@extends('adminlte::page')
@section('title', env('APP_NAME') . ' - Historial de Saldos de Corte de Caja')
@section('plugins.Datatables', true)
@section('content_header')
    <h1>Historial Cierres de Caja</h1>
@stop

@section('content')
    <div class="row mb-3">
        <div class="col-md-12">
            <a class="btn btn-primary" href="{{ route('cierre-cajas.create') }}" style="display: none;">
                <i class="fa fa-plus"></i> Nuevo Registro
            </a>
        </div>
    </div>

    <div class="card">

        <div class="card-header">
            <h3 class="card-title">Registros de Saldos de Corte de Caja</h3>
            <a href="{{ route('ajuste-historial-corte-caja.index') }}" class="btn btn-primary float-right"> <i
                    class="fa fa-history"></i> Historial de ajustes</a>
        </div>
        <div class="card-body">

            <div class="row mb-3">
                <div class="col-md-3">
                    <label for="searchDate">Buscar por Fecha:</label>
                    <input type="date" id="searchDate" class="form-control">
                </div>
                <div class="col-md-1">
                    <button id="filterButton" class="btn btn-primary" style="margin-top: 2.3rem;">Buscar</button>
                </div>
            </div>

            <div class="table-responsive">
                <table class="table table-bordered" id="table-historial-saldos" style="width: 100%;">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>Fecha de Registro</th>
                            <th>Caja</th>
                            <th>Cliente</th>
                            <th>Saldo a Cobrar</th>
                            <th>Descripción</th>
                            <th>Acciones</th>
                        </tr>
                    </thead>
                    <tbody>
                        <!-- Aquí se carga el contenido de la tabla -->
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- Modal de Ajustar -->
    <div class="modal fade" id="modalAjustar" tabindex="-1" role="dialog">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Ajustar Cierre de Caja</h5>
                    <button type="button" class="close" data-dismiss="modal">
                        <span>&times;</span>
                    </button>
                </div>
                <div class="modal-body" id="modalAjustarContent">
                    <!-- Contenido se carga aquí -->
                </div>
            </div>
        </div>
    </div>

@stop

@section('css')
    <!-- SweetAlert2 CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">
    <link href="https://cdn.datatables.net/buttons/1.6.0/css/buttons.dataTables.min.css" rel="stylesheet" />

@stop

@section('js')
    @include('partials.data_export_js')
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script src="https://cdn.jsdelivr.net/npm/moment@2.29.1/moment.min.js"></script>

    <script>

        var filterDate = $('#searchDate').val();

        $(document).ready(function() {
            // Inicializa DataTables
            var table = $('#table-historial-saldos').DataTable({
                processing: false,
                serverSide: false,
                ajax: {
                    url: '{{ route('cierre-cajas.index') }}',
                    type: 'GET'
                },
                columns: [
                    { data: 'id', name: 'id' },
                    { data: 'fecha_formateada', name: 'fecha_formateada' },
                    { data: 'caja', name: 'caja' },
                    { data: 'cliente_nombre', name: 'cliente_nombre' },
                    { data: 'saldo_formateado', name: 'saldo_formateado' },
                    { data: 'descripcion', name: 'descripcion' },
                    { data: 'acciones', name: 'acciones', orderable: false, searchable: false }
                ],
                order: [[0, 'desc']],
                language: {
                    url: '/js/spanish.json'
                },
                dom: 'Bfrtip',
                buttons: [
                    {
                        extend: 'copyHtml5',
                        text: '<i class="fa fa-copy"></i> Copiar',
                        className: 'btn btn-info btn-sm',
                        exportOptions: {
                            columns: [0, 1, 2, 3, 4, 5] // Excluir columna de acciones
                        }
                    },
                    {
                        extend: 'excelHtml5',
                        text: '<i class="fa fa-file-excel-o"></i> Excel',
                        className: 'btn btn-success btn-sm',
                        title: 'Historial de Saldos de Corte de Caja',
                        exportOptions: {
                            columns: [0, 1, 2, 3, 4, 5] // Excluir columna de acciones
                        }
                    },
                    {
                        extend: 'pdfHtml5',
                        text: '<i class="fa fa-file-pdf-o"></i> PDF',
                        className: 'btn btn-danger btn-sm',
                        title: 'Historial de Saldos de Corte de Caja',
                        orientation: 'landscape',
                        pageSize: 'A4',
                        exportOptions: {
                            columns: [0, 1, 2, 3, 4, 5] // Excluir columna de acciones
                        },
                        customize: function(doc) {
                            // Cambia el color de fondo de los encabezados
                            doc.styles.tableHeader.fillColor = '#2c3e50';
                            doc.styles.tableHeader.color = '#fff';
                            doc.styles.tableHeader.alignment = 'center';
                            doc.styles.tableHeader.fontSize = 10;

                            // Cambia el tamaño de fuente del contenido
                            doc.styles.tableBodyEven.fontSize = 9;
                            doc.styles.tableBodyOdd.fontSize = 9;

                            // Centra el título
                            doc.styles.title = {
                                alignment: 'center',
                                fontSize: 16,
                                bold: true,
                                margin: [0, 0, 0, 20]
                            };
                        }
                    }
                ]
            });

            // Filtrar cuando se hace clic en el botón de búsqueda Table
            $('#filterButton').on('click', function() {
                var selectedDate = $('#searchDate').val();

                if (selectedDate == '') {
                    Swal.fire({
                        title: 'No se ha seleccionado ninguna fecha',
                        text: 'Por favor, seleccione una fecha',
                        icon: 'warning',
                        confirmButtonText: 'Aceptar'
                    });
                    return;
                }

                if (selectedDate) {
                    var formattedDate = moment(selectedDate).format('DD/MM/YYYY');
                    table.column(1).search('^' + formattedDate + '$', true, false).draw();
                } else {
                    table.column(1).search('').draw();
                }
            });

            // Maneja el clic en el botón de ajustar (modal) - Usando delegación de eventos
            $(document).on('click', '.btn-edit-modal', function(e) {
                e.preventDefault();
                var id = $(this).data('id');
                var monto = $(this).data('monto');
                var cliente = $(this).data('cliente');

                // Mostrar modal con spinner
                $('#modalAjustar').modal('show');
                $('#modalAjustar .modal-title').text('Ajustar Cierre de Caja #' + id);
                $('#modalAjustarContent').html('<div class="text-center"><div class="spinner-border" role="status"><span class="sr-only">Cargando...</span></div></div>');

                // Cargar contenido del modal via AJAX
                $.ajax({
                    type: "GET",
                    url: '/cierre-cajas/' + id + '/modal-ajustar',
                    success: function(response) {
                        //Aquí se carga el contenido del modal (get_modal_ajustar.blade.php)
                        $('#modalAjustarContent').html(response);

                        // Llenar los campos con los datos
                        $('#historial_id').val(id);
                        $('#cliente_info').val(cliente);
                        $('#monto_corte_anterior').val(monto);
                        $('#monto_corte_nuevo').val(monto);
                        $('#descripcion').val('');
                    },
                    error: function(xhr, status, error) {
                        $('#modalAjustarContent').html('<div class="alert alert-danger">Error al cargar el modal</div>');
                    }
                });
            });

            // Maneja el envío del formulario de ajuste
            $(document).on('submit', '#editHistorialForm', function(e) {
                e.preventDefault();

                var formData = $(this).serialize();

                Swal.fire({
                    title: '¿Estás seguro de ajustar el saldo?',
                    text: 'El saldo de la caja será ajustado y se guardará en el historial de ajustes.',
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonText: 'Aceptar',
                    cancelButtonText: 'Cancelar'
                }).then((result) => {

                    if (result.isConfirmed) {
                        $.ajax({
                            type: "POST",
                            url: '/cierre-cajas/ajustar',
                            data: formData,
                            headers: {
                                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                            },
                            success: function(response) {
                                if (response.success) {
                                    Swal.fire({
                                        icon: 'success',
                                        title: 'Éxito',
                                        text: response.message,
                                        showConfirmButton: false,
                                        timer: 2000
                                    }).then(() => {
                                        $('#modalAjustar').modal('hide');
                                        table.ajax.reload(); // Recargar la tabla
                                    });
                                } else {
                                    Swal.fire({
                                        icon: 'error',
                                        title: 'Error',
                                        text: response.message
                                    });
                                }
                            },
                            error: function(xhr, status, error) {
                                Swal.fire({
                                    icon: 'error',
                                    title: 'Error',
                                    text: 'Ocurrió un error al procesar el ajuste.'
                                });
                            }
                        });
                    } else {
                        Swal.fire({
                            icon: 'warning',
                            title: 'Cancelado',
                            text: 'El ajuste no se ha realizado.'
                        });
                    }
                });
            });


        });
    </script>
@stop