@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') Lecturas @endslot
@endcomponent

<!-- start page content -->
<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-body mb-n3">
                
                
                    <form id="formFiltro">
                        @csrf
                        <div class="row g-2 align-items-end">
                            <div class="col-md-2">
                                <label>Año</label>
                                <input type="number" name="anio" value="{{ $anio }}" class="form-control">
                            </div>

                            <div class="col-md-2">
                                <label>Mes</label>
                                <select name="mes" id="mesSelect" class="form-control">
                                    <option value="">Seleccione...</option>
                                    @foreach ([1=>'Enero',2=>'Febrero',3=>'Marzo',4=>'Abril',5=>'Mayo',
                                            6=>'Junio',7=>'Julio',8=>'Agosto',9=>'Septiembre',
                                            10=>'Octubre',11=>'Noviembre',12=>'Diciembre'] as $num => $nombre)
                                        <option value="{{ $num }}" {{ $mes == $num ? 'selected' : '' }}>
                                            {{ $nombre }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>


                            <div class="col-md-3">
                                <label>Barrio</label>
                                <select name="sector_id" id="sectorSelect" class="form-control">
                                    <option value="">Todos</option>
                                    @foreach($sectores as $sector)
                                        <option value="{{ $sector->id_sector }}">{{ $sector->nombre_sector }}</option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="col-md-3">
                                <label> Calle</label>
                                <select name="via_id" id="viaSelect" class="form-control">
                                    <option value="">Todas</option>
                                </select>
                            </div>

                            <div class="col-md-2">
                                <button type="submit" class="btn btn-primary w-100">Buscar</button>
                            </div>
                        </div>
                    </form>



                    <div class="table-responsive">
                        <table class="table table-striped" id="tablaConexiones">
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>Cliente</th>
                                    <th>Dirección</th> <!-- ✅ Nueva columna -->
                                    <th>Lectura Anterior</th>
                                    <th>Fecha Lectura Anterior</th>
                                    <th>Tipo Lectura</th>
                                    <th>Estado Lectura</th> <!-- ✅ Renombrado para evitar confusión -->
                                    <th>Estado Conexión</th> <!-- ✅ Nuevo campo -->
                                    <th>Observación</th>
                                    <th>Lectura Actual</th>
                                    <th>Consumo</th>
                                    <th>Monto</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>

                        <button type="button" id="btnGuardarLectura" class="btn btn-success">
                            Guardar Lectura
                        </button>
                    </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 () {
        $("#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: '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('#tablaSectores_wrapper .col-md-6:eq(0)');
    });
</script>
<!-- agregar -->
<script>
    $(document).ready(function () {

        // CREAR LECTURA
        $('#formCrearLectura').submit(function (e) {
            e.preventDefault();

            $.ajax({
                url: "{{ route('lecturas.store') }}",
                method: 'POST',
                data: $(this).serialize(),
                success: function () {
                    $('#modalCrearLectura').modal('hide');
                    Swal.fire({
                        icon: 'success',
                        title: 'Registrado',
                        text: 'Lectura guardada correctamente',
                        timer: 1800,
                        showConfirmButton: false
                    }).then(() => location.reload());
                },
                error: function (xhr) {
                    let errores = xhr.responseJSON.errors;
                    let mensaje = 'Ocurrió un error.';
                    if (errores) {
                        mensaje = Object.values(errores).map(e => `• ${e}`).join('<br>');
                    }
                    Swal.fire({ icon: 'error', title: 'Error', html: mensaje });
                }
            });
        });

        // CARGAR DATOS EN MODAL DE EDICIÓN
        $('.btn-editar').click(function () {
            $('#edit_id').val($(this).data('id'));
            $('#edit_id_conexion').val($(this).data('conexion'));
            $('#edit_fecha_lectura').val($(this).data('fecha'));
            $('#edit_lectura').val($(this).data('lectura'));
            $('#edit_observacion').val($(this).data('observacion'));
        });

        // EDITAR LECTURA
        $('#formEditarLectura').submit(function (e) {
            e.preventDefault();
            let id = $('#edit_id').val();

            $.ajax({
                url: `/lecturas/${id}`,
                method: 'POST',
                data: $(this).serialize(),
                success: function () {
                    $('#modalEditarLectura').modal('hide');
                    Swal.fire({
                        icon: 'success',
                        title: 'Actualizado',
                        text: 'Lectura actualizada correctamente',
                        timer: 1800,
                        showConfirmButton: false
                    }).then(() => location.reload());
                },
                error: function (xhr) {
                    let errores = xhr.responseJSON.errors;
                    let mensaje = 'Error al actualizar.';
                    if (errores) {
                        mensaje = Object.values(errores).map(e => `• ${e}`).join('<br>');
                    }
                    Swal.fire({ icon: 'error', title: 'Error', html: mensaje });
                }
            });
        });

        // ELIMINAR LECTURA
        $('.btn-eliminar').click(function () {
            let id = $(this).data('id');
            Swal.fire({
                title: '¿Eliminar lectura?',
                text: "Esta acción no se puede deshacer",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: 'Sí, eliminar',
                cancelButtonText: 'Cancelar'
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        url: `/lecturas/${id}`,
                        method: 'POST',
                        data: {
                            _token: $('meta[name="csrf-token"]').attr('content'),
                            _method: 'DELETE'
                        },
                        success: function () {
                            Swal.fire({
                                icon: 'success',
                                title: 'Eliminado',
                                text: 'Lectura eliminada correctamente',
                                timer: 1500,
                                showConfirmButton: false
                            }).then(() => location.reload());
                        },
                        error: function () {
                            Swal.fire('Error', 'No se pudo eliminar.', 'error');
                        }
                    });
                }
            });
        });

    });

</script>

<script>
$('#formFiltro').on('submit', function(e) {
    e.preventDefault();

    $.ajax({
        url: "{{ route('lecturas.buscar') }}",
        type: 'POST',
        data: $(this).serialize(),
        beforeSend: function() {
            Swal.fire({
                title: 'Cargando datos...',
                text: 'Por favor espere un momento.',
                allowOutsideClick: false,
                didOpen: () => Swal.showLoading()
            });
        },
        success: function(data) {
            Swal.close();

            if (!Array.isArray(data) || data.length === 0) {
                Swal.fire({
                    icon: 'info',
                    title: 'Sin resultados',
                    text: 'No se encontraron conexiones con los filtros seleccionados.'
                });
                $('#tablaConexiones tbody').html('');
                return;
            }

            let filas = '';
            data.forEach(function(c) {

                // Estado de lectura
                let estadoLecturaBadge = '-';
                if (c.estado_lectura === 'Pendiente')
                    estadoLecturaBadge = '<span class="badge bg-warning text-dark">Pendiente</span>';
                else if (c.estado_lectura === 'Confirmada')
                    estadoLecturaBadge = '<span class="badge bg-success">Confirmada</span>';
                else if (c.estado_lectura === 'Anulada')
                    estadoLecturaBadge = '<span class="badge bg-danger">Anulada</span>';

                // Estado de conexión
                let estadoConexionBadge = '-';
                if (c.estado_conexion === 'Activo')
                    estadoConexionBadge = '<span class="badge bg-success">Activo</span>';
                else if (c.estado_conexion === 'Suspendido')
                    estadoConexionBadge = '<span class="badge bg-warning text-dark">Suspendido</span>';
                else if (c.estado_conexion === 'Cortado')
                    estadoConexionBadge = '<span class="badge bg-danger">Cortado</span>';

                // Campo lectura actual (si editable)
                let inputLectura = '';
                if (c.cronograma_info?.periodo_editable && c.estado_conexion === 'Activo') {
                    inputLectura = `
                        <input type="number" step="0.01" class="form-control lectura-actual"
                            placeholder="0.00"
                            value="${parseFloat(c.lectura_actual ?? 0).toFixed(2)}">
                        <input type="hidden" class="cronograma-id" value="${c.cronograma_id ?? ''}">
                    `;
                } else if (!c.cronograma_info?.periodo_editable) {
                    inputLectura = `<span class="badge bg-secondary">🔒 Periodo cerrado</span>`;
                } else {
                    inputLectura = `<span class="badge bg-light text-dark">No editable</span>`;
                }

                // 🟢 Ahora el consumo es solo texto, no editable
                filas += `
                    <tr 
                        data-precio="${c.precio_m3 ?? 0}" 
                        data-cuota="${c.cuota_fija ?? 0}" 
                        data-anterior="${c.lectura_anterior ?? 0}"
                        data-cronograma="${c.cronograma_id ?? ''}"
                        data-tope="${c.tope ?? 10}"
                    >
                        <td>${c.id_conexion}</td>
                        <td>${c.cliente_nombre ?? '-'}</td>
                        <td>${(c.via_nombre ?? '-') + ' ' + (c.via_numero ?? '')}</td>
                        <td>${(c.lectura_anterior ?? 0).toFixed ? Number(c.lectura_anterior).toFixed(2) : c.lectura_anterior}</td>
                        <td>${c.fecha_lectura ?? '-'}</td>
                        <td>${c.tipo_lectura ?? '-'}</td>
                        <td>${estadoLecturaBadge}</td>
                        <td>${estadoConexionBadge}</td>
                        <td>${c.observacion ?? '-'}</td>
                        <td>${inputLectura}</td>
                        <td class="consumo-text">${parseFloat(c.consumo ?? 0).toFixed(2)}</td>
                        <td class="monto">${parseFloat(c.monto ?? 0).toFixed(2)}</td>
                    </tr>
                `;
            });

            $('#tablaConexiones tbody').html(filas);
        },
        error: function(xhr) {
            Swal.close();
            Swal.fire({
                icon: 'error',
                title: 'Error',
                text: 'Ocurrió un error al buscar conexiones.'
            });
            console.error(xhr.responseText);
        }
    });
});

// 🔹 Cargar vías por sector
$('#sectorSelect').on('change', function () {
    let sectorId = $(this).val();
    let viaSelect = $('#viaSelect');
    viaSelect.html('<option value="">Todas</option>');

    if (sectorId) {
        $.get(`/sectores/${sectorId}/vias`, function (data) {
            data.forEach(function (via) {
                viaSelect.append(`<option value="${via.id_via}">${via.nombre_via}</option>`);
            });
        });
    }
});

// 🔹 Al escribir la lectura actual: recalcular consumo y monto
$(document).on('input', '.lectura-actual', function() {
    const fila = $(this).closest('tr');

    const lecturaAnterior = parseFloat(fila.data('anterior')) || 0;
    const cuotaFija       = parseFloat(fila.data('cuota')) || 0;
    const precioM3        = parseFloat(fila.data('precio')) || 0;
    const topeM3          = parseInt(fila.data('tope')) || 10;
    const lecturaActual   = parseFloat($(this).val()) || 0;

    let consumoReal = lecturaActual - lecturaAnterior;
    if (consumoReal < 0) consumoReal = 0;

    const excedente = Math.max(consumoReal - topeM3, 0);
    const monto = cuotaFija + (excedente * precioM3);

    // 🟢 Mostrar consumo y monto actualizados
    fila.find('.consumo-text').text(consumoReal.toFixed(2));
    fila.find('.monto').text(monto.toFixed(2));
});
</script>






<script>
    $('#btnGuardarLectura').on('click', function() {
        let lecturas = [];
        let hoy = new Date().toISOString().slice(0, 10);
        let faltantes = 0;

        $('#tablaConexiones tbody tr').each(function() {
            let fila = $(this);

            let idConexion    = fila.find('td').eq(0).text().trim();
            let lecturaActual = parseFloat(fila.find('.lectura-actual').val());
            let cronogramaId  = fila.find('.cronograma-id').val();
            let periodoAnio   = $('input[name="anio"]').val();
            let periodoMes    = $('select[name="mes"]').val();
            let consumo = parseFloat(fila.find('.consumo').val()) || 0;
            let monto    = parseFloat(fila.find('.monto').text()) || 0;

            if (isNaN(lecturaActual) || lecturaActual < 0) {
                faltantes++;
            } else {
                lecturas.push({
                    id_conexion: idConexion,
                    id_cronograma: cronogramaId,
                    periodo_anio: periodoAnio,
                    periodo_mes: periodoMes,
                    fecha_lectura: hoy,
                    lectura: lecturaActual,
                    consumo: consumo,
                    monto: monto,
                    tipo_lectura: 'Normal',
                    estado: 'Confirmada',
                    observacion: '',
                    usuario_registro: '{{ Auth::user()->name }}'
                });
            }
        });

        if (faltantes > 0) {
            Swal.fire({
                icon: 'warning',
                title: 'Atención',
                text: `Faltan ingresar ${faltantes} lecturas.`
            });
            return;
        }

        if (lecturas.length === 0) {
            Swal.fire({
                icon: 'warning',
                title: 'Atención',
                text: 'No hay lecturas para guardar.'
            });
            return;
        }

        $.ajax({
            url: "{{ route('lecturas.guardar') }}",
            type: 'POST',
            contentType: 'application/json',
            data: JSON.stringify({
                _token: '{{ csrf_token() }}',
                lecturas: lecturas
            }),
            success: function(resp) {
                Swal.fire({
                    icon: 'success',
                    title: 'Éxito',
                    text: 'Lecturas guardadas correctamente',
                    confirmButtonText: 'Aceptar'
                }).then(() => location.reload());
            },
            error: function(xhr) {
                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: 'No se pudieron guardar las lecturas'
                });
                console.error("Error AJAX:", xhr.responseText);
            }
        });
    });

</script>


<script>
    function actualizarMesesPorAnio(anio, mesSeleccionado = null) {
        let mesSelect = $('#mesSelect');
        mesSelect.html('<option value="">Seleccione...</option>'); // limpiar

        if (anio) {
            $.get(`/cronogramas/meses/${anio}`, function(data) {
                const nombresMeses = [null,'Enero','Febrero','Marzo','Abril','Mayo','Junio','Julio','Agosto','Septiembre','Octubre','Noviembre','Diciembre'];
                
                if (Array.isArray(data) && data.length > 0) {
                    data.forEach(function(mes) {
                        const selected = mes === mesSeleccionado ? 'selected' : '';
                        mesSelect.append(`<option value="${mes}" ${selected}>${nombresMeses[mes]}</option>`);
                    });
                } else {
                    mesSelect.html('<option value="">No hay cronogramas activos</option>');
                }
            });
        }
    }

    // Al cambiar el año
    $('input[name="anio"]').on('change', function() {
        actualizarMesesPorAnio($(this).val());
    });

    // Al cargar la página, disparar con el año actual
    $(document).ready(function() {
        let anioActual = $('input[name="anio"]').val();
        let mesActual = $('#mesSelect').val(); // para mantener el mes seleccionado si hay
        actualizarMesesPorAnio(anioActual, mesActual);
    });
</script>





@endsection