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

<!-- start page content -->
<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-body mb-n3">
                            
            @php
                \Carbon\Carbon::setLocale('es');
            @endphp

            <!-- 🔹 Sección: Generar Recibos -->
            <div class="card mb-4 shadow-sm">
                <div class="card-header bg-primary text-white fw-bold">
                    <i class="fas fa-file-invoice-dollar me-1"></i> Generar Recibos
                </div>
                <div class="card-body">
                    <form id="formGenerarRecibos">
                        @csrf
                        <div class="row g-3">
                            <!-- Año -->
                            <div class="col-md-3">
                                <label for="anio">Año:</label>
                                <select id="anio" name="anio" class="form-control">
                                    @for ($i = 2025; $i <= 2030; $i++)
                                        <option value="{{ $i }}" {{ $i == now()->year ? 'selected' : '' }}>
                                            {{ $i }}
                                        </option>
                                    @endfor
                                </select>
                            </div>

                            <!-- Cronograma -->
                            <div class="col-md-3">
                                <label for="id_cronograma">Cronograma:</label>
                                <select id="id_cronograma" name="id_cronograma" class="form-control">
                                    <option value="">Seleccione...</option>
                                    {{-- Se llenará por AJAX --}}
                                </select>
                            </div>

                            <!-- Botones -->
                            <div class="col-md-4 d-flex align-items-end gap-2">
                                <button type="submit" class="btn btn-success">
                                    <i class="fas fa-cogs me-1"></i> Generar
                                </button>
                                <button type="button" id="btnImprimir" class="btn btn-danger">
                                    <i class="fas fa-file-pdf me-1"></i> Imprimir PDF
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

            <!-- 🔹 Sección: Filtros de búsqueda -->
            <div class="card mb-4 shadow-sm">
                <div class="card-header bg-secondary text-white fw-bold">
                    <i class="fas fa-search me-1"></i> Filtros de búsqueda
                </div>
                <div class="card-body">
                    <div class="row g-3">
                        <!-- Filtro Año -->
                        <div class="col-md-2">
                            <label for="filtro_anio">Año:</label>
                            <select id="filtro_anio" class="form-control">
                                <option value="">Todos</option>
                                @for ($i = 2025; $i <= 2030; $i++)
                                    <option value="{{ $i }}">{{ $i }}</option>
                                @endfor
                            </select>
                        </div>

                        <!-- Filtro Mes -->
                        <div class="col-md-3">
                            <label for="filtro_mes" class="fw-bold">Mes:</label>
                            <select id="filtro_mes" class="form-control">
                                <option value="">Todos</option>
                                @for ($m = 1; $m <= 12; $m++)
                                    <option value="{{ $m }}">
                                        {{ ucfirst(\Carbon\Carbon::create()->month($m)->translatedFormat('F')) }}
                                    </option>
                                @endfor
                            </select>
                        </div>

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

            <!-- 🔹 Tabla de Recibos -->
            <div class="card shadow-sm">
                <div class="card-header bg-light fw-bold">
                    <i class="fas fa-table me-1"></i> Listado de Recibos
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table id="tablaRecibos" class="table table-striped mb-0 table-hover">
                            <thead class="table-light">
                                <tr>
                                    <th>ID</th>
                                    <th>N° Recibo</th>
                                    <th>DNI</th>
                                    <th>Cliente</th>
                                    <th>Fecha de Pago</th>
                                    <th>Monto Pagado</th>
                                    <th>Forma de Pago</th>
                                    <th>Estado</th>
                                    
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($recibos as $r)
                                    <tr id="fila-recibo-{{ $r->id_recibo }}">
                                        <td>{{ $r->id_recibo }}</td>
                                        <td>{{ $r->numero_recibo }}</td>
                                        <td>{{ $r->facturas->first()->conexion->cliente->documento_identidad ?? 'N/A' }}</td>
                                        <td>{{ $r->facturas->first()->conexion->cliente->nombres_razon_social ?? 'N/A' }}</td>
                                        <td>{{ \Carbon\Carbon::parse($r->fecha_pago)->format('d/m/Y') }}</td>
                                        <td>S/ {{ number_format($r->monto_pagado, 2) }}</td>
                                        <td>{{ $r->forma_pago }}</td>
                                        <td>
                                            <span class="badge bg-{{ $r->estado == 'Completado' ? 'success' : 'secondary' }}">
                                                {{ $r->estado }}
                                            </span>
                                        </td>
                                        
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            </div>
            <!--end card-body-->
        </div>
        <!--end card-->
    </div>
    <!--end col-->
</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 () {
    $('#filtro_anio, #filtro_mes').change(function () {
        let anio = $('#filtro_anio').val();
        let mes  = $('#filtro_mes').val();

        // ⚡ Solo ejecutar si ambos tienen valor
        if (!anio || !mes) {
            return; // No hace nada si falta alguno
        }

        $.ajax({
            url: "{{ route('recibos.filtrar') }}",
            type: "GET",
            data: { anio: anio, mes: mes },
            beforeSend: function () {
                Swal.fire({
                    title: 'Filtrando recibos...',
                    allowOutsideClick: false,
                    didOpen: () => { Swal.showLoading(); }
                });
            },
            success: function (res) {
                let tabla = $('#tablaRecibos').DataTable();

                tabla.clear(); // limpiar filas actuales

                // Convertir el HTML en nodos <tr>
                let temp = $('<tbody>').html(res);
                temp.find('tr').each(function () {
                    let rowData = [];
                    $(this).find('td').each(function () {
                        rowData.push($(this).html());
                    });
                    tabla.row.add(rowData);
                });

                tabla.draw(); // refrescar tabla
                Swal.close();
            },
            error: function () {
                Swal.fire('Error', 'No se pudo filtrar los recibos', 'error');
            }
        });
    });
});
</script>



<script>
    $(document).ready(function(){
        // Generar con AJAX
        $('#formGenerarRecibos').on('submit', function(e){
            e.preventDefault();

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

            $.ajax({
                url: "{{ route('recibos.generar') }}",
                type: "POST",
                data: formData,
                success: function(response){
                    if(response.success){
                        Swal.fire({
                            icon: 'success',
                            title: 'Éxito',
                            text: response.message,
                        }).then(() => {
                            if(response.print_url){
                                window.open(response.print_url, '_blank');
                            } else {
                                location.reload();
                            }
                        });
                    }
                },
                error: function(){
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: 'Ocurrió un error al generar los recibos.'
                    });
                }
            });
        });

        // Botón independiente para imprimir PDF
        $('#btnImprimir').on('click', function(){
            let idCronograma = $('#id_cronograma').val(); // ✅ id correcto

            if(!idCronograma){
                Swal.fire({
                    icon: 'warning',
                    title: 'Atención',
                    text: 'Por favor selecciona un cronograma antes de imprimir.'
                });
                return;
            }

            // Abrir la ruta en una nueva pestaña
            let url = "{{ route('recibos.imprimir', ':id') }}".replace(':id', idCronograma);
            window.open(url, '_blank');
        });

    });
</script>
<!-- cargar select de cronograma -->
<script>
    $(document).ready(function() {
        function cargarCronogramas() {
            let sectorId = $('#sector_id').val();
            let anio = $('#anio').val();
            $('#id_cronograma').empty().append('<option value="">Seleccione...</option>');

            // Construir la URL dinámicamente según si hay sector o no
            let url = sectorId 
                ? `/facturacion/cronogramas/${sectorId}?anio=${anio}` 
                : `/facturacion/cronogramas?anio=${anio}`;

            $.get(url, function(data) {
                if (data.length > 0) {
                    data.forEach(c => {
                        $('#id_cronograma').append(
                            `<option value="${c.id_cronograma}">
                                ${c.nombre_cronograma} - ${c.mes}/${c.anio} (${c.periodicidad})
                            </option>`
                        );
                    });
                } else {
                    $('#id_cronograma').append('<option value="">No hay cronogramas</option>');
                }
            }).fail(function() {
                $('#id_cronograma').append('<option value="">Error al cargar cronogramas</option>');
            });
        }

        // Cargar cronogramas cuando cambia sector o año
        $('#sector_id, #anio').on('change', cargarCronogramas);

        // Cargar cronogramas al cargar la página
        cargarCronogramas();
    });
</script>




@endsection