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

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

                <!-- 🔹 Sección: Datos para generar facturación -->
                <div class="card mb-4 shadow-sm">
                    <div class="card-header bg-primary text-white fw-bold">
                        Generar Facturación
                    </div>
                    <div class="card-body">
                        <div class="row mb-3">
                            <!-- Select de Año -->
                            <div class="col-md-2">
                                <label for="anio">Año:</label>
                                <select id="anio" class="form-control">
                                    @for ($i = 2025; $i <= 2030; $i++)
                                        <option value="{{ $i }}" {{ $i == now()->year ? 'selected' : '' }}>
                                            {{ $i }}
                                        </option>
                                    @endfor
                                </select>
                            </div>

                            <!-- Select de Cronograma -->
                            <div class="col-md-4">
                                <label for="cronograma_id">Cronograma:</label>
                                <select id="cronograma_id" class="form-control">
                                    <option value="">Seleccione...</option>
                                    {{-- Se llenará vía AJAX --}}
                                </select>
                            </div>

                            <!-- Botón Generar -->
                            <div class="col-md-2 align-self-end">
                                <button id="btnGenerarFacturacion" class="btn btn-success w-100">
                                    Generar
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

                @php
                    \Carbon\Carbon::setLocale('es');
                @endphp

                <!-- 🔹 Sección: Filtros -->
                <div class="card mb-4 shadow-sm">
                    <div class="card-header bg-secondary text-white fw-bold">
                        Filtros de búsqueda
                    </div>
                    <div class="card-body">
                        <div class="row mb-3">
                            <div class="col-md-3">
                                <label for="mes" class="form-label fw-bold">Filtrar por periodo:</label>
                                <select id="mes" class="form-control">
                                    <option value="">Seleccione un mes...</option>
                                    @for ($m = 1; $m <= 12; $m++)
                                        <option value="{{ $m }}">
                                            {{ \Carbon\Carbon::create()->month($m)->translatedFormat('F') }}
                                        </option>
                                    @endfor
                                </select>
                            </div>
                        </div>
                    </div>
                </div>






                <div class="table-responsive">
                    <table id="tablaSectores" class="table table-striped mb-0 table-hover">
                        <thead class="table-light">
                            <tr>
                                <th>Cod. Inscripción</th>
                                <th>#Factura</th>
                                <th>Cliente</th>
                                <th>DNI</th>
                                <th>Periodo</th>
                                <th>Lectura Anterior</th>
                                <th>Lectura Actual</th>
                                <th>Consumo</th>
                                <th>Monto Total</th>
                                
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($facturas as $f)
                            <tr>
                                <td>{{ $f->conexion->cliente->codigo_inscripcion ?? '—' }}</td>
                                <td>{{ $f->numero_factura }}</td>
                                <td>{{ $f->conexion->cliente->nombres_razon_social ?? '—' }}</td> <!-- 👈 ahora se muestra el cliente -->
                                <td>{{ $f->conexion->cliente->documento_identidad ?? '—' }}</td>
                                <td>{{ $f->periodo_consumo }}</td>
                                <td>{{ $f->lectura_anterior }}</td>
                                <td>{{ $f->lectura_actual }}</td>
                                <td>{{ $f->consumo }} m³</td>
                                <td>{{ number_format($f->monto_total, 2) }}</td>
                                
                            </tr>
                            @endforeach
                        </tbody>
                    </table>



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

<!-- Modal Crear -->



<!-- Modal Editar -->




<!--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 -->

<!-- agregar -->


<script>
    $(document).ready(function() {
        function cargarCronogramas() {
            let sectorId = $('#sector_id').val() || 'general'; // 👉 si está vacío, enviamos "general"
            let anio = $('#anio').val();

            $('#cronograma_id').empty().append('<option value="">Seleccione...</option>');

            if (anio) { // sólo validamos año, porque sector puede ser "general"
                $.get(`/facturacion/cronogramas/${sectorId}`, { anio: anio }, function(data) {
                    if (data.length > 0) {
                        data.forEach(c => {
                            $('#cronograma_id').append(
                                `<option value="${c.id_cronograma}">
                                    ${c.nombre_cronograma} - ${c.mes}/${c.anio} (${c.periodicidad})
                                </option>`
                            );
                        });
                    } else {
                        $('#cronograma_id').append('<option value="">No hay cronogramas</option>');
                    }
                });
            }
        }

        // Evento de cambio
        $('#sector_id, #anio').on('change', cargarCronogramas);

        // ✅ Ejecutar automáticamente al cargar la página
        cargarCronogramas();
    });
</script>



<script>
    $(document).ready(function () {
        // Inicializar DataTable sobre tablaSectores
        window.tablaSectores = $("#tablaSectores").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: 'Facturas' },
                        { 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('#tablaSectores_wrapper .col-md-6:eq(0)');
    });

    // Botón Generar Facturación
    $('#btnGenerarFacturacion').on('click', function() {
        let cronogramaId = $('#cronograma_id').val();

        if (!cronogramaId) {
            Swal.fire({
                icon: 'warning',
                title: '¡Atención!',
                text: 'Seleccione un cronograma antes de generar la facturación.'
            });
            return;
        }

        $.ajax({
            url: '{{ route("facturacion.generar") }}',
            method: 'POST',
            data: {
                _token: '{{ csrf_token() }}',
                cronograma_id: cronogramaId
            },
            beforeSend: function() {
                $('#btnGenerarFacturacion').prop('disabled', true).text('Generando...');
            },
            success: function (response) {
                $('#btnGenerarFacturacion').prop('disabled', false).text('Generar Facturación');

                console.log("Respuesta AJAX:", response);

                if (response.success === false) {
                    let detalles = response.detalles?.length 
                        ? '<br><b>Detalles:</b><br>' + response.detalles.join('<br>')
                        : '';

                    Swal.fire({
                        icon: 'info',
                        title: 'Sin resultados',
                        html: `${response.message}${detalles}`
                    });
                    return;
                }

                if (!response.data || response.data.length === 0) {
                    Swal.fire({
                        icon: 'info',
                        title: 'Sin resultados',
                        text: 'No se encontraron lecturas para generar facturación.'
                    });
                    return;
                }

                // Construir tabla
                let filas = '';
                response.data.forEach(f => {
                    filas += `<tr>
                        <td>${f.numero_factura}</td>
                        <td>${f.cliente}</td>
                        <td>${f.periodo_consumo}</td>
                        <td>${f.lectura_anterior}</td>
                        <td>${f.lectura_actual}</td>
                        <td>${f.consumo} m³</td>
                        <td>${Number(f.monto_total).toFixed(2)}</td>
                        <td>
                            <button class="btn btn-sm btn-warning btn-editar"
                                data-id="${f.id_factura ?? ''}"
                                data-numero="${f.numero_factura}"
                                data-periodo="${f.periodo_consumo}"
                                data-anterior="${f.lectura_anterior}"
                                data-actual="${f.lectura_actual}"
                                data-consumo="${f.consumo}"
                                data-monto="${f.monto_total}"
                                data-estado="${f.estado ?? 'Pendiente'}"
                                data-bs-toggle="modal" data-bs-target="#modalEditarFactura">
                                <i class="las la-pen"></i>
                            </button>
                        </td>
                    </tr>`;
                });

                $('#tablaSectores tbody').html(filas);

                Swal.fire({
                    icon: 'success',
                    title: '¡Facturación cargada!',
                    text: 'Se muestran todas las facturas del cronograma.'
                }).then(() => {
                    // 🔹 Recargar página al cerrar el Swal
                    location.reload();
                });
            },
            error: function(err) {
                $('#btnGenerarFacturacion').prop('disabled', false).text('Generar Facturación');
                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: 'Ocurrió un error al generar la facturación.'
                });
                console.error("Error AJAX:", err);
            }
        });
    });
</script>



<script>
    $('#anio, #mes').change(function () {
        let anio = $('#anio').val();
        let mes = $('#mes').val();

        $.ajax({
            url: '/facturacion/filtrar',
            type: 'GET',
            data: { anio: anio, mes: mes },
            beforeSend: function () {
                Swal.fire({ title: 'Cargando...', didOpen: () => Swal.showLoading() });
            },
            success: function (res) {
                console.log("Respuesta del servidor:", res);

                // ⚡ Si estás usando DataTables:
                let tabla = $('#tablaSectores').DataTable();
                tabla.clear().draw(); // limpiamos

                // "res" trae el HTML con <tr>...</tr>
                // Creamos un contenedor temporal para leerlo
                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); // agregamos fila a DataTable
                });

                tabla.draw(); // refrescamos
                Swal.close();
            },
            error: function (xhr) {
                console.error("Error en AJAX:", xhr.responseText);
                Swal.fire('Error', 'No se pudo filtrar las facturas', 'error');
            }
        });
    });
</script>






@endsection