@extends('layouts.kaiadmin.master')

@section('template_title')
    Ingreso Directo - Lecturas
@endsection

@section('content')
<br>
<section class="content container-fluid">
    <div class="row justify-content-center">
        <div >
            <div class="card shadow-sm">
                <div class="card-header bg-gradient-primary d-flex justify-content-between align-items-center">
                    <div>
                        <h5 class="m-0">Ingreso de Lectura Directo</h5>
                        <small>Registrar lecturas, ajustes y otros tipos de ingreso</small>
                    </div>
                    <div>
                        <a href="{{ url()->previous() }}" class="btn btn-primary btn-sm"><i class="fas fa-arrow-left"></i> Volver</a>
                    </div>
                </div>

                <div class="card-body">
                    @includeif('partials.errors')

                    <!-- Mensajes de estado -->
                    <div id="mensajeNoExiste" class="alert alert-danger" style="display: none;">
                        No se encontró ningún servicio.
                    </div>

                    <div id="mensajeInactivo" class="alert alert-danger" style="display: none;">
                        El servicio está inactivo.
                    </div>

                    <!-- Mensaje de carga -->
                    <div id="mensajeBuscando" class="alert alert-info text-center" style="display: none;">
                        <i class="fas fa-spinner fa-spin"></i> Buscando servicio, por favor espere...
                    </div>

                    <!-- Formulario de búsqueda -->
                    <form id="searchForm" method="POST" action="{{ route('buscarServicioLec') }}" class="form-inline mb-3">
                        @csrf
                        <div class="input-group w-100">
                            <input type="text" class="form-control" id="usrSerCodigo" name="usrSerCodigo" autocomplete="off" placeholder="Ingrese el código de servicio" required>
                            <div class="input-group-append">
                                <button type="submit" class="btn btn-primary"><i class="fas fa-search"></i> Buscar</button>
                            </div>
                        </div>
                    </form>

                    <!-- Formulario principal (se muestra solo cuando hay un servicio activo) -->
                    <div id="formularioLectura" style="display: none;">
                        <form method="POST" action="{{ route('lecturas.store') }}" role="form" enctype="multipart/form-data" id="lecturaForm">
                            @csrf
                            <input type="hidden" name="UsrCarParticipacionPunta" id="UsrCarParticipacionPunta" />
                            <input type="hidden" name="usrSerCodigo" id="hiddenUsrSerCodigo" />

                            <div class="row">
                                <div class="col-md-8">
                                    <div class="form-group">
                                        <label for="usrSerNombreUsuario">Usuario:</label>
                                        <input type="text" class="form-control form-control-sm" id="usrSerNombreUsuario" name="usrSerNombreUsuario" readonly>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label for="usrSerMedidor">Medidor:</label>
                                        <input type="text" class="form-control form-control-sm" id="usrSerMedidor" name="usrSerMedidor" readonly>
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="usrSerDireccion">Dirección:</label>
                                        <input type="text" class="form-control form-control-sm" id="usrSerDireccion" name="usrSerDireccion" readonly>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label for="UsrSerDemandaContratada">Demanda:</label>
                                        <input type="text" class="form-control form-control-sm" id="UsrSerDemandaContratada" name="UsrSerDemandaContratada" readonly>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label for="usrSerMultiplicador">Multiplicador:</label>
                                        <input type="text" class="form-control form-control-sm" id="usrSerMultiplicador" name="usrSerMultiplicador" readonly>
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label for="lectura_responsable">Lector responsable:</label>
                                        <select class="form-control form-control-sm" id="lectura_responsable" name="lectura_responsable" required>
                                            <option value="">Seleccionar Lector</option>
                                        </select>
                                    </div>
                                </div>

                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label for="usrcarfechalectura">Fecha:</label>
                                        <input type="date" class="form-control form-control-sm" name="usrcarfechalectura" id="usrcarfechalectura" required>
                                    </div>
                                </div>

                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label for="ingreso">Tipo de Ingreso:</label>
                                        <select class="form-control form-control-sm" id="ingreso" name="ingreso" required>
                                            <option value="">Seleccionar tipo de ingreso</option>
                                        </select>
                                    </div>
                                </div>
                            </div>

                            <div class="form-group">
                                <label for="UsrCarDescripcionPeriodoLectura">Descripción:</label>
                                <input type="text" class="form-control form-control-sm" name="UsrCarDescripcionPeriodoLectura" id="UsrCarDescripcionPeriodoLectura" readonly>
                            </div>

                            <div class="form-row justify-content-center mb-2">
                                <div id="campos_consumo_no_pagado" style="display: none;" class="form-inline w-100 align-items-center">
                                    <label for="dictamen" class="mr-2 mb-0">No. Dictamen</label>
                                    <input type="text" class="form-control form-control-sm mr-2" name="dictamen" id="dictamen" placeholder="Dictamen">
                                    <input type="text" class="form-control form-control-sm" name="anio_actual" id="anio_actual" readonly>
                                </div>
                            </div>

                            <div class="form-row justify-content-center mb-2">
                                <div id="campos_reinstalacion" style="display: none;" class="form-inline w-100 align-items-center">
                                    <label for="orden_trabajo" class="mr-2 mb-0">No. Orden de Trabajo</label>
                                    <input type="text" class="form-control form-control-sm" name="orden_trabajo" id="orden_trabajo" placeholder="Orden de Trabajo">
                                </div>
                            </div>

                            <div id="campos_lectura" style="display: none;">
                                <div class="row">
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label for="UsrCarLecturaAnterior">Lectura Anterior:</label>
                                            <input type="number" step="0.01" class="form-control form-control-sm" name="UsrCarLecturaAnterior" id="UsrCarLecturaAnterior">
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label for="UsrCarLecturaActual">Lectura Actual:</label>
                                            <input type="number" step="0.01" class="form-control form-control-sm" name="UsrCarLecturaActual" id="UsrCarLecturaActual">
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label for="UsrCarKwhDistribuidoRed">Consumo KWH:</label>
                                            <input type="text" class="form-control form-control-sm" name="UsrCarKwhDistribuidoRed" id="UsrCarKwhDistribuidoRed" readonly>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div id="campos_aplica_cargo" style="display: none;">
                                <hr style="border-top: 1px solid #e9ecef;">
                                <div class="row justify-content-center mt-3">
                                    <h6 class="text-center">APLICA CARGO</h6>
                                </div>

                                <div class="form-row justify-content-center">
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label for="UsrCarPotenciaMaxima">Demanda (kW):</label>
                                            <input type="number" step="0.01" class="form-control form-control-sm" name="UsrCarPotenciaMaxima" id="UsrCarPotenciaMaxima">
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label for="UsrCarFactorPotencia">Factor Potencia:</label>
                                            <input type="number" step="0.01" class="form-control form-control-sm" name="UsrCarFactorPotencia" id="UsrCarFactorPotencia">
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <input type="hidden" id="diferencia" name="diferencia">

                            <div id="campos_usuario_autoproductor" style="display: none;">
                                <hr style="border-top: 1px solid #e9ecef;">
                                <div class="row">
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label for="UsrCarLecturaAnteriorAutoproductor">Lectura Anterior (Autoproductor):</label>
                                            <input type="number" step="0.01" class="form-control form-control-sm" name="UsrCarLecturaAnteriorAutoproductor" id="UsrCarLecturaAnteriorAutoproductor">
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label for="UsrCarLecturaActualAutoproductor">Lectura Actual (Autoproductor):</label>
                                            <input type="number" step="0.01" class="form-control form-control-sm" name="UsrCarLecturaActualAutoproductor" id="UsrCarLecturaActualAutoproductor">
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label for="UsrCarKwhGeneradoAutoproductor">KWH Generados:</label>
                                            <input type="text" class="form-control form-control-sm" name="UsrCarKwhGeneradoAutoproductor" id="UsrCarKwhGeneradoAutoproductor" readonly>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label for="UsrCarKwhNetoAutoproductor">Consumo Neto KWH:</label>
                                            <input type="text" class="form-control form-control-sm" name="UsrCarKwhNetoAutoproductor" id="UsrCarKwhNetoAutoproductor" readonly>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="form-group text-center mt-4">
                                <button type="submit" class="btn btn-primary" id="guardarDatosBtn">
                                    <i class="fas fa-save"></i> Guardar Datos
                                </button>
                                <button type="button" class="btn btn-secondary ml-2" id="limpiarFormularioBtn">
                                    <i class="fas fa-broom"></i> Limpiar
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Modal para verificar datos -->
<div class="modal fade" id="modalVerificarDatos" tabindex="-1" role="dialog" aria-labelledby="modalVerificarDatosLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalVerificarDatosLabel">Verificar Datos</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                Por favor, verifique que todos los campos obligatorios estén completos antes de guardar.
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
            </div>
        </div>
    </div>
</div>

<!-- Modal para éxito -->
<div class="modal fade" id="modalExito" tabindex="-1" role="dialog" aria-labelledby="modalExitoLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header bg-success text-white">
                <h5 class="modal-title" id="modalExitoLabel">Éxito</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                Los datos se han guardado correctamente.
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-success" data-dismiss="modal">Aceptar</button>
            </div>
        </div>
    </div>
</div>

@endsection

@section('js')
<script>
$(document).ready(function() {
    // Fecha actual
    function setFechaHoy() {
        var today = new Date();
        var dd = String(today.getDate()).padStart(2, '0');
        var mm = String(today.getMonth() + 1).padStart(2, '0');
        var yyyy = today.getFullYear();
        $('#usrcarfechalectura').val(yyyy + '-' + mm + '-' + dd);
    }
    setFechaHoy();

    // Buscar servicio
    $('#searchForm').submit(function(e) {
        e.preventDefault();
        var form = $(this);
        var url = form.attr('action');
        var codigoServicio = $('#usrSerCodigo').val().trim();

        if(!codigoServicio) {
            alert('Por favor ingrese un código de servicio');
            return;
        }

        $('#mensajeBuscando').show();
        $('#mensajeNoExiste, #mensajeInactivo, #formularioLectura').hide();
        $('#guardarDatosBtn').prop('disabled', true).html('<i class="fas fa-spinner fa-spin"></i> Buscando...');

        $.ajax({
            type: "POST",
            url: url,
            data: form.serialize(),
            dataType: 'json',
            success: function(response) {
                $('#mensajeBuscando').hide();
                if(response.success) {
                    llenarDatosServicio(response);
                    manejarEstadoServicio(response.estadoServicio, response.mostrarCampos);
                } else {
                    $('#mensajeNoExiste').show();
                }
            },
            error: function(xhr, status, error) {
                $('#mensajeBuscando').hide();
                console.error(error);
                alert('Ocurrió un error al buscar el servicio: ' + (xhr.responseJSON?.message || error));
            },
            complete: function() {
                $('#guardarDatosBtn').prop('disabled', false).html('<i class="fas fa-save"></i> Guardar Datos');
            }
        });
    });

    function llenarDatosServicio(response) {
        // limpiar campos
        $('#usrSerNombreUsuario, #usrSerDireccion, #usrSerMedidor, #UsrSerDemandaContratada, #usrSerMultiplicador').val('');

        if(response.usrservicio) {
            var s = response.usrservicio;
            $('#usrSerNombreUsuario').val(s.UsrSerNombreUsuario || '');
            $('#usrSerDireccion').val(s.UsrSerDireccion || '');
            $('#usrSerMedidor').val(s.UsrSerContador || '');
            $('#UsrSerDemandaContratada').val(s.UsrSerDemandaContratada || '');
            $('#usrSerMultiplicador').val(s.UsrSerMultiplicador || '');
            $('#UsrCarParticipacionPunta').val(s.UsrSerParticipacionPunta || '');
            $('#hiddenUsrSerCodigo').val(s.UsrSerCodigo || '');

            // lectores
            var lectoresSelect = $('#lectura_responsable');
            lectoresSelect.empty().append('<option value="">Seleccionar Lector</option>');
            $.each(response.lectores, function(id, nombre) {
                lectoresSelect.append($('<option>', { value: id, text: nombre }));
            });

            // ingresos
            var ingresosSelect = $('#ingreso');
            ingresosSelect.empty().append('<option value="">Seleccionar tipo de ingreso</option>');
            $.each(response.ingresos, function(id, descripcion) {
                ingresosSelect.append($('<option>', { value: id, text: descripcion, 'data-descripcion': descripcion }));
            });
        }
    }

    function manejarEstadoServicio(estado, mostrarCampos) {
        $('#mensajeNoExiste, #mensajeInactivo').hide();
        if (estado === 'no_existe') {
            $('#mensajeNoExiste').show();
            $('#formularioLectura').hide();
        } else if (estado === 'inactivo') {
            $('#mensajeInactivo').show();
            $('#formularioLectura').hide();
        } else if (estado === 'activo') {
            $('#formularioLectura').show();
            if (mostrarCampos) {
                $('#campos_usuario_autoproductor').show();
            } else {
                $('#campos_usuario_autoproductor').hide();
            }
        }
    }

    // cálculos consumo
    $('#UsrCarLecturaActual, #UsrCarLecturaAnterior').on('input', function() {
        calcularConsumo();
    });

    function calcularConsumo() {
        var lecturaAnterior = parseFloat($('#UsrCarLecturaAnterior').val()) || 0;
        var lecturaActual = parseFloat($('#UsrCarLecturaActual').val()) || 0;
        var consumo = lecturaActual - lecturaAnterior;
        var campoConsumo = $('#UsrCarKwhDistribuidoRed');

        if (isNaN(consumo)) {
            campoConsumo.val('');
            return;
        }

        if (consumo >= 0) {
            campoConsumo.val(consumo.toFixed(2)).css('color', 'black');
            if ($('#campos_usuario_autoproductor').is(':visible')) {
                calcularDiferenciaAutoproductor();
            }
            calcularDiferenciaDemanda();
        } else {
            campoConsumo.val(consumo.toFixed(2)).css('color', 'red');
        }
    }

    // autoproductor
    $('#UsrCarLecturaAnteriorAutoproductor, #UsrCarLecturaActualAutoproductor').on('input', function() {
        calcularDiferenciaAutoproductor();
    });

    function calcularDiferenciaAutoproductor() {
        var lecturaAnterior = parseFloat($('#UsrCarLecturaAnteriorAutoproductor').val()) || 0;
        var lecturaActual = parseFloat($('#UsrCarLecturaActualAutoproductor').val()) || 0;
        var consumoKwh = parseFloat($('#UsrCarKwhDistribuidoRed').val()) || 0;

        var diferencia = lecturaActual - lecturaAnterior;
        $('#UsrCarKwhGeneradoAutoproductor').val(isNaN(diferencia) ? '' : diferencia.toFixed(2));

        var consumoNeto = Math.max(0, consumoKwh - diferencia);
        $('#UsrCarKwhNetoAutoproductor').val(isNaN(consumoNeto) ? '' : consumoNeto.toFixed(2));
    }

    // diferencia demanda
    $('#UsrCarPotenciaMaxima').on('input', function() { calcularDiferenciaDemanda(); });

    function calcularDiferenciaDemanda() {
        var potenciaMaxima = parseFloat($('#UsrCarPotenciaMaxima').val()) || 0;
        var demandaContratada = parseFloat($('#UsrSerDemandaContratada').val()) || 0;
        var diferencia = Math.max(0, potenciaMaxima - demandaContratada);
        $('#diferencia').val(diferencia.toFixed(2));
    }

    // Manejo del tipo de ingreso
    $('#ingreso').change(function() {
        var seleccionado = $(this).find('option:selected');
        var id = seleccionado.val();
        var descripcionIngreso = seleccionado.data('descripcion') || '';
        var fechaSeleccionada = $('#usrcarfechalectura').val();

        function getMesAnterior(fecha) {
            if (!fecha) return '';
            var partes = fecha.split('-');
            var f = new Date(parseInt(partes[0],10), parseInt(partes[1],10)-1, parseInt(partes[2],10));
            f.setMonth(f.getMonth()-1);
            var nombres = ['Ene','Feb','Mar','Abr','May','Jun','Jul','Ago','Sep','Oct','Nov','Dic'];
            return nombres[f.getMonth()] + './' + f.getFullYear();
        }

        var mesAnioAnterior = getMesAnterior(fechaSeleccionada);

        // mostrar/ocultar por defecto
        if (id === '1' || id === '200' || id === '201') {
            $('#campos_lectura').show();
            $('#campos_aplica_cargo').show();
        } else {
            $('#campos_lectura').hide();
            $('#campos_aplica_cargo').hide();
        }

        // casos específicos
        if (id === '1') {
            $('#UsrCarDescripcionPeriodoLectura').val(mesAnioAnterior);
            $('#campos_consumo_no_pagado, #campos_reinstalacion').hide();

        } else if (id === '2') { // Reinstalación
            $('#UsrCarDescripcionPeriodoLectura').val('Reinstalación');
            $('#campos_consumo_no_pagado').hide();
            $('#campos_reinstalacion').show();

        } else if (id === '77') { // Convenio
            $('#UsrCarDescripcionPeriodoLectura').val('Convenio de Pago');
            $('#campos_consumo_no_pagado, #campos_reinstalacion').hide();

        } else if (id === '200') { // Ajuste
            $('#UsrCarDescripcionPeriodoLectura').val('Ajuste: ' + mesAnioAnterior);
            $('#campos_consumo_no_pagado, #campos_reinstalacion').hide();

        } else if (id === '201') { // Energía no pagada
            $('#UsrCarDescripcionPeriodoLectura').val('Energía Consumida No Pagada DIC ' + $('#dictamen').val() + ' ' + new Date().getFullYear());
            $('#campos_consumo_no_pagado').show();
            $('#campos_reinstalacion').hide();

        } else {
            $('#UsrCarDescripcionPeriodoLectura').val(descripcionIngreso);
            $('#campos_consumo_no_pagado, #campos_reinstalacion').hide();
        }
    });

    // actualizar descripción según dictamen/orden
    $('#dictamen').on('input', function() {
        if ($('#ingreso').val() === '201') {
            $('#UsrCarDescripcionPeriodoLectura').val('Energía Consumida No Pagada DIC ' + this.value + ' ' + new Date().getFullYear());
        }
    });

    $('#orden_trabajo').on('input', function() {
        if ($('#ingreso').val() === '2') {
            $('#UsrCarDescripcionPeriodoLectura').val('Reinstalación OT ' + this.value);
        }
    });

    // año actual
    $('#anio_actual').val(new Date().getFullYear());

    // limpiar formulario
    $('#limpiarFormularioBtn').click(function() {
        $('#lecturaForm')[0].reset();
        $('#formularioLectura').hide();
        $('#mensajeNoExiste, #mensajeInactivo').hide();
        $('#usrSerCodigo').focus();
    });

    // Validación y envío
    $('#lecturaForm').submit(function(event) {
        event.preventDefault();

        var lecturaResponsable = $('#lectura_responsable').val();
        var fechaLectura = $('#usrcarfechalectura').val();
        var tipoIngreso = $('#ingreso').val();

        // validación genérica
        if (!lecturaResponsable || !fechaLectura || !tipoIngreso) {
            $('#modalVerificarDatos').modal('show');
            return;
        }

        // Si el tipo requiere lectura, validar lecturas y consumo
        if (tipoIngreso === '1' || tipoIngreso === '200' || tipoIngreso === '201') {
            var lecturaAnterior = $('#UsrCarLecturaAnterior').val();
            var lecturaActual = $('#UsrCarLecturaActual').val();
            var consumo = parseFloat($('#UsrCarKwhDistribuidoRed').val()) || 0;

            if (lecturaAnterior === "" || lecturaActual === "") {
                $('#modalVerificarDatos').modal('show');
                return;
            }

            if (consumo < 0 || isNaN(consumo)) {
                alert("Error: El consumo no puede ser negativo. Verifique los valores ingresados.");
                return;
            }
        }

        var form = $(this);
        var url = form.attr('action');
        var formData = form.serialize();

        $.ajax({
            type: "POST",
            url: url,
            data: formData,
            dataType: 'json',
            beforeSend: function() {
                $('#guardarDatosBtn').prop('disabled', true).html('<i class="fas fa-spinner fa-spin"></i> Guardando...');
            },
            success: function(response) {
                if (response.success) {
                    $('#modalExito').modal('show');
                    $('#lecturaForm')[0].reset();
                    $('#formularioLectura').hide();
                } else {
                    alert(response.message || 'Error al guardar los datos');
                }
            },
            error: function(xhr, status, error) {
                console.error(error);
                alert('Ocurrió un error al guardar: ' + (xhr.responseJSON?.message || error));
            },
            complete: function() {
                $('#guardarDatosBtn').prop('disabled', false).html('<i class="fas fa-save"></i> Guardar Datos');
            }
        });
    });

});
</script>
@endsection