@extends('layouts.master')
@section('title') Inicio @endsection
@section('content')
<!-- this is breadcrumbs -->
@component('components.breadcrumb')
@slot('li_1') Inicio @endslot
@slot('li_2') Panel Catastro @endslot
@slot('title') Registro de Pagos @endslot
@endcomponent

<!-- start page content -->
<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-body mb-n3">
                <div class="card-body mb-3">

                    <div class="card shadow-sm mb-3 border-0">

    <div class="card-body py-3">

        <div class="d-flex flex-wrap align-items-center justify-content-between gap-3">

            <!-- IZQUIERDA -->
            <div class="d-flex align-items-center gap-2">
                <span class="fw-bold text-muted">
                    <i class="fas fa-filter"></i> Filtros:
                </span>

                <select id="selectAnio" class="form-select form-select-sm">
                    <option value="">Año</option>
                    @for($i = date('Y'); $i >= 2020; $i--)
                        <option value="{{ $i }}">{{ $i }}</option>
                    @endfor
                </select>

                <select id="selectCaja" class="form-select form-select-sm">
                    <option value="">Caja</option>
                </select>
            </div>

            <!-- DERECHA -->
            <div>
                <button type="button"
                    class="btn btn-primary btn-sm px-3"
                    data-bs-toggle="modal"
                    data-bs-target="#modalCrearPago">
                    <i class="fas fa-plus"></i> Nuevo Pago
                </button>
            </div>

        </div>

    </div>

</div>


                    <div class="table-responsive">
                        <table id="tablaRecibos" class="table table-striped mb-0 table-hover">
                            <thead class="table-light">
                                <tr>
                                    <th>ID</th>
                                    <th>Caja</th>
                                    <th>N° Recibo(s)</th>
                                    <th>Cliente(s)</th>
                                    <th>Método</th>
                                    <th>Monto</th>
                                    <th>Referencia</th>
                                    <th>Fecha</th>
                                    <th>Acciones</th>
                                </tr>
                            </thead>
                            <tbody>

                            </tbody>
                        </table>







                    </div>
                </div>
                <!--end card-body-->
            </div>
            <!--end card-->
        </div>
        <!--end col-->
    </div>



    <!-- Modal -->
    <div class="modal fade" id="modalCrearPago" tabindex="-1" aria-labelledby="modalCrearPagoLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">

                <div class="modal-header bg-primary text-white">
                    <h5 class="modal-title" id="modalCrearPagoLabel">
                        <i class="fas fa-money-bill"></i> Registrar Pago
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>

                <div class="modal-body">
                    <form id="formCrearPago">
                        @csrf

                        <!-- Seleccionar Caja -->
                        <div class="mb-3">
                            <label class="form-label">Caja</label>
                            <select name="id_caja" class="form-select" required>
                                @if($cajaAbierta)
                                <option value="{{ $cajaAbierta->id_caja }}">
                                    {{ $cajaAbierta->nombre }} (Aperturada: {{ $cajaAbierta->fecha_apertura }})
                                </option>
                                @else
                                <option value="">⚠ No hay cajas abiertas</option>
                                @endif
                            </select>
                        </div>

                        <!-- Buscar cliente -->
                        <div class="mb-3">
                            <label class="form-label">Documento del Cliente</label>
                            <div class="input-group">
                                <input type="text" id="documentoCliente" class="form-control" placeholder="Ingrese DNI o RUC">
                                <button type="button" id="btnBuscarCliente" class="btn btn-secondary">
                                    <i class="fas fa-search"></i> Buscar
                                </button>
                            </div>
                            <div class="mt-2">
                                <strong>Cliente:</strong> <span id="nombreCliente" class="text-primary">---</span>
                            </div>
                        </div>

                        <!-- Grid de recibos -->
                        <div class="mb-3">
                            <label class="form-label">Recibos Pendientes</label>
                            <div id="recibosGrid" class="table-responsive">
                                <table class="table table-bordered table-sm">
                                    <thead class="table-light">
                                        <tr>
                                            <th></th>
                                            <th>N° Recibo</th>
                                            <th>Facturas</th>
                                            <th>Monto Total</th>
                                        </tr>
                                    </thead>
                                    <tbody id="tbodyRecibos">
                                        <tr>
                                            <td colspan="4" class="text-center text-muted">Busque un cliente para cargar recibos...</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>

                        <!-- Total seleccionado -->
                        <div class="mb-3">
                            <label class="form-label">Monto Total a Pagar</label>
                            <input type="text" id="montoRecibo" class="form-control" readonly>
                        </div>

                        <!-- Método de pago -->
                        <div class="mb-3">
                            <label class="form-label">Método de Pago</label>
                            <select name="metodo_pago" class="form-select" required>
                                <option value="">Seleccione...</option>
                                <option value="Efectivo">Efectivo</option>
                                <option value="Tarjeta">Tarjeta</option>
                                <option value="Transferencia">Transferencia</option>
                                <option value="Yape">Yape</option>
                                <option value="Plin">Plin</option>
                            </select>
                        </div>

                        <!-- Referencia -->
                        <div class="mb-3">
                            <label class="form-label">Referencia (Voucher / Operación)</label>
                            <input type="text" name="referencia" class="form-control">
                        </div>
                    </form>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancelar</button>
                    <button type="button" id="btnGuardarPago" class="btn btn-success">
                        Guardar Pago
                    </button>
                </div>

            </div>
        </div>
    </div>











    <!--end row-->


    @endsection
    @section('script')
    <!-- jQuery y DataTables -->

    <!-- jQuery y DataTables -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>

    <!-- DataTables Buttons -->
    <script src="https://cdn.datatables.net/buttons/2.3.6/js/dataTables.buttons.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/pdfmake.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/vfs_fonts.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.3.6/js/buttons.html5.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.3.6/js/buttons.print.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.3.6/js/buttons.colVis.min.js"></script>

    <!-- DataTables CSS -->
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.3.6/css/buttons.dataTables.min.css">
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <!-- tablas -->
    <script>
        $(document).ready(function() {
            $("#tablaRecibos").DataTable({
                "responsive": true,
                "lengthChange": true,
                "autoWidth": false,
                "buttons": [{
                        extend: 'collection',
                        text: 'Opciones',
                        buttons: [{
                                extend: 'copy',
                                text: 'Copiar'
                            },
                            {
                                extend: 'csv',
                                text: 'CSV'
                            },
                            {
                                extend: 'excel',
                                text: 'Excel',
                                title: 'Periodos Académicos'
                            },
                            {
                                extend: 'pdf',
                                text: 'PDF'
                            },
                            {
                                extend: 'print',
                                text: 'Imprimir'
                            }
                        ]
                    },
                    {
                        extend: 'colvis',
                        text: 'Visibilidad de Columna'
                    }
                ],
                "paging": true,
                "searching": true,
                "info": true,
                "language": {
                    "search": "Buscar:",
                    "lengthMenu": "Mostrar _MENU_ registros por página",
                    "info": "Mostrando _START_ a _END_ de _TOTAL_ entradas",
                    "paginate": {
                        "first": "Primero",
                        "previous": "Anterior",
                        "next": "Siguiente",
                        "last": "Último"
                    }
                }
            }).buttons().container().appendTo('#tablaRecibos_wrapper .col-md-6:eq(0)');
        });
    </script>

    <script>
        $(document).ready(function() {

            /* ===============================
            🔎 BUSCAR CLIENTE
            =============================== */
            $('#btnBuscarCliente').click(function() {

                let documento = $('#documentoCliente').val().trim();
                if (documento === '') {
                    Swal.fire('Atención', 'Ingrese un documento', 'warning');
                    return;
                }

                $.get('/buscar-recibos/' + documento, function(res) {

                    if (!res.success) {
                        Swal.fire('Error', res.message, 'error');
                        return;
                    }

                    $('#nombreCliente').text(res.cliente.nombres_razon_social);

                    let $tbody = $('#tbodyRecibos');
                    $tbody.empty();

                    if (res.recibos.length === 0) {
                        $tbody.append(`
                        <tr>
                            <td colspan="4" class="text-center text-muted">
                                No hay recibos pendientes
                            </td>
                        </tr>
                    `);
                        return;
                    }

                    res.recibos.forEach(r => {

                        let totalFacturas = r.facturas
                            .reduce((sum, f) => sum + parseFloat(f.monto_total), 0)
                            .toFixed(2);

                        let facturasTexto = r.facturas
                            .map(f => `${f.numero_factura}: S/ ${parseFloat(f.monto_total).toFixed(2)}`)
                            .join('<br>');

                        $tbody.append(`
                        <tr>
                            <td>
                                <input type="checkbox" 
                                    class="recibo-check" 
                                    value="${r.id_recibo}" 
                                    data-monto="${totalFacturas}">
                            </td>
                            <td>${r.numero_recibo}</td>
                            <td>${facturasTexto}</td>
                            <td>S/ ${totalFacturas}</td>
                        </tr>
                    `);
                    });

                }).fail(function() {
                    Swal.fire('Error', 'No se pudo obtener los recibos', 'error');
                });
            });


            /* ===============================
            💰 CALCULAR TOTAL
            =============================== */
            $(document).on('change', '.recibo-check', function() {

                let total = 0;

                $('.recibo-check:checked').each(function() {
                    total += parseFloat($(this).data('monto'));
                });

                $('#montoRecibo').val(total.toFixed(2));
            });


            /* ===============================
            💾 GUARDAR PAGO
            =============================== */
            $('#btnGuardarPago').click(function() {

                let monto = parseFloat($('#montoRecibo').val());

                if (!monto || monto <= 0) {
                    Swal.fire('Atención', 'Debes seleccionar al menos un recibo', 'warning');
                    return;
                }

                let formData = $('#formCrearPago').serializeArray();

                // Agregar monto total
                formData.push({
                    name: 'monto',
                    value: monto
                });

                // Agregar recibos seleccionados
                $('.recibo-check:checked').each(function() {
                    formData.push({
                        name: 'recibos[]',
                        value: $(this).val()
                    });
                });

                $.post("{{ route('pagos.store') }}", formData, function(res) {

                    if (res.success) {

                        Swal.fire('Éxito', 'Pago registrado correctamente', 'success')
                            .then(() => {
                                $('#modalCrearPago').modal('hide');
                            });

                    } else {
                        Swal.fire('Error', res.message || 'No se pudo registrar el pago', 'error');
                    }

                }).fail(function() {
                    Swal.fire('Error', 'Error en el servidor', 'error');
                });

            });


            /* ===============================
            🔄 RESET COMPLETO DEL MODAL
            =============================== */
            $('#modalCrearPago').on('hidden.bs.modal', function() {

                // Reset formulario
                $('#formCrearPago')[0].reset();

                // Limpiar DNI
                $('#documentoCliente').val('');

                // Limpiar nombre cliente
                $('#nombreCliente').text('---');

                // Limpiar total
                $('#montoRecibo').val('');

                // Reiniciar tabla
                $('#tbodyRecibos').html(`
                <tr>
                    <td colspan="4" class="text-center text-muted">
                        Busque un cliente para cargar recibos...
                    </td>
                </tr>
            `);

                // Desmarcar checks
                $('.recibo-check').prop('checked', false);
            });

        });
    </script>


    <script>
        $(document).on('click', '.btnImprimirPago', function() {
            let idPago = $(this).data('id');
            window.open('/pagos/' + idPago + '/ticket', '_blank');
        });


        $(document).on('click', '.btnAnularPago', function() {

            let idPago = $(this).data('id');

            Swal.fire({
                title: '¿Desea anular este pago?',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: 'Sí, anular',
                cancelButtonText: 'Cancelar'
            }).then((result) => {

                if (result.isConfirmed) {

                    $.post('/pagos/' + idPago + '/anular', {
                        _token: '{{ csrf_token() }}'
                    }, function(res) {

                        if (res.success) {

                            Swal.fire('Anulado', 'Pago anulado correctamente', 'success');

                            // 🔥 recargar tabla sin refresh
                            $('#selectCaja').trigger('change');

                        } else {
                            Swal.fire('Error', res.message, 'error');
                        }

                    });

                }

            });

        });

        /* =====================================
        ⚡ PAGO MASIVO
        ===================================== */
        $('#btnPagoMasivo').click(function() {

            Swal.fire({
                title: '¿Pagar todos los recibos pendientes?',
                text: "Se pagarán TODOS los recibos en estado Pendiente.",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#d33',
                confirmButtonText: 'Sí, pagar todo',
                cancelButtonText: 'Cancelar'
            }).then((result) => {

                if (result.isConfirmed) {

                    Swal.fire({
                        title: 'Procesando...',
                        allowOutsideClick: false,
                        didOpen: () => {
                            Swal.showLoading();
                        }
                    });

                    $.ajax({
                        url: "{{ route('pagos.pagoMasivo') }}",
                        type: "POST",
                        data: {
                            _token: "{{ csrf_token() }}"
                        },
                        success: function(res) {

                            if (res.success) {

                                Swal.fire(
                                    'Pago Masivo Realizado',
                                    'Total pagado: S/ ' + parseFloat(res.total).toFixed(2),
                                    'success'
                                ).then(() => {
                                    location.reload();
                                });

                            } else {
                                Swal.fire('Error', res.message, 'error');
                            }

                        },
                        error: function() {
                            Swal.fire('Error', 'Error en el servidor', 'error');
                        }
                    });

                }

            });

        });
    </script>

    <script>
        $(document).ready(function() {

            let tabla = $('#tablaRecibos').DataTable();

            // 👉 iniciar vacía
            tabla.clear().draw();

            // =========================
            // FILTRAR POR CAJA
            // =========================
            $('#selectCaja').on('change', function() {

                let idCaja = $(this).val();

                if (!idCaja) {
                    tabla.clear().draw();
                    Swal.fire('Aviso', 'Seleccione una caja', 'warning');
                    return;
                }

                Swal.fire({
                    title: 'Cargando...',
                    text: 'Filtrando pagos',
                    allowOutsideClick: false,
                    didOpen: () => Swal.showLoading()
                });

                $.ajax({
                    url: '/pagos/caja/' + idCaja,
                    type: 'GET',

                    success: function(response) {

                        tabla.clear();

                        if (response.length === 0) {
                            Swal.fire('Info', 'No hay pagos en esta caja', 'info');
                        }

                        response.forEach(pago => {

                            let cliente = pago.recibos?.[0]?.facturas?.[0]?.conexion?.cliente?.nombres_razon_social ?? '---';
                            let caja = pago.historial_caja?.caja?.nombre ?? '---';

                            let recibos = pago.recibos.map(r => r.numero_recibo).join(', ');

                            let botones = `
                        <button class="btn btn-primary btn-sm btnImprimirPago" data-id="${pago.id_pago}">
                            <i class="fas fa-print"></i>
                        </button>

                        <button class="btn btn-danger btn-sm btnAnularPago" data-id="${pago.id_pago}">
                            <i class="fas fa-ban"></i>
                        </button>
                    `;

                            tabla.row.add([
                                pago.id_pago,
                                caja,
                                recibos,
                                cliente,
                                pago.metodo_pago ?? '---',
                                'S/ ' + parseFloat(pago.monto).toFixed(2),
                                pago.referencia ?? '-',
                                pago.created_at,
                                botones
                            ]);

                        });

                        tabla.draw();
                        Swal.close();
                    },

                    error: function() {
                        Swal.fire('Error', 'No se pudo filtrar', 'error');
                    }

                });

            });

            // =========================
            // IMPRIMIR PAGO
            // =========================

            // =========================
            // ANULAR PAGO
            // =========================


        });
    </script>

<script>
    $('#selectAnio').on('change', function() {
    
        let anio = $(this).val();
    
        $('#selectCaja').html('<option value="">Cargando...</option>');
    
        if (!anio) {
            $('#selectCaja').html('<option value="">-- Seleccionar Caja --</option>');
            return;
        }
    
        $.ajax({
            url: '/cajas/por-anio/' + anio,
            type: 'GET',
    
            success: function(response) {
    
                let options = '<option value="">-- Seleccionar Caja --</option>';
    
                response.forEach(caja => {
                    options += `
                        <option value="${caja.id_caja}">
                            ${caja.nombre} (${caja.estado})
                        </option>
                    `;
                });
    
                $('#selectCaja').html(options);
    
            },
    
            error: function() {
                Swal.fire('Error', 'No se pudieron cargar las cajas', 'error');
            }
    
        });
    
    });
</script>
    @endsection