@extends('layouts.kaiadmin.master')

@section('title', 'Consulta Estado de Cuenta')

@section('css')
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/dataTables.bootstrap5.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.5.0/css/responsive.bootstrap5.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
@endsection

@section('content_header')
<h5><i class="fas fa-file-invoice-dollar me-2"></i>CONSULTA ESTADO DE CUENTA</h5>
@stop

@section('content')

<div class="card shadow-sm">
    <div class="card-header bg-primary text-white">
        <h6 class="mb-0"><i class="fas fa-search me-2"></i>Buscar Servicio</h6>
    </div>

    <div class="card-body">

        <!-- BUSCADOR -->
        <div class="mb-4">
            <div class="input-group" style="max-width:400px;">
                <input type="text" id="codigoservicio" class="form-control"
                       placeholder="Ej: A-001 o Juan Pérez">
                <button class="btn btn-primary" id="btnBuscar">
                    <i class="fas fa-search"></i>
                </button>
            </div>
        </div>

        <!-- INFO SERVICIO -->
        <div id="serviceInfo" class="alert alert-light border" style="display:none;">
            <div class="row">
                <div class="col-md-6">
                    <strong>Usuario:</strong>
                    <span id="usrSerNombreUsuario">-</span><br>

                    <strong>Dirección:</strong>
                    <span id="usrSerDireccion">-</span>
                </div>

                <div class="col-md-6">
                    <strong>Medidor:</strong>
                    <span id="usrSerContador">-</span><br>

                    <strong>Voltaje:</strong>
                    <span id="conVolCodigo">-</span>
                </div>
            </div>
        </div>

        <!-- TABLA -->
        <div class="table-responsive">
            <table id="tablaEstadoCuenta"
                   class="table table-bordered table-hover display responsive nowrap"
                   style="width:100%">
                <thead class="table-light">
                    <tr>
                        <th>Fecha</th>
                        <th>Descripción</th>
                        <th>Lect. Ant.</th>
                        <th>Lect. Act.</th>
                        <th>Kwh</th>
                        <th>Q. Total</th>
                        <th>Detalle</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>

    </div>
</div>

@endsection


@section('js')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/dataTables.bootstrap5.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.5.0/js/dataTables.responsive.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.5.0/js/responsive.bootstrap5.min.js"></script>

<script>

let dataTable;

$(document).ready(function(){

    dataTable = $('#tablaEstadoCuenta').DataTable({
        language: {
            url: '//cdn.datatables.net/plug-ins/1.13.6/i18n/es-ES.json'
        },
        responsive: true,
        searching: false,
        order: [[0,'desc']]
    });

    $('#btnBuscar').click(buscarServicio);

    $('#codigoservicio').keypress(function(e){
        if(e.which === 13){
            buscarServicio();
        }
    });

});


function buscarServicio(){

    const codigo = $('#codigoservicio').val().trim();

    if(!codigo){
        Swal.fire('Debe ingresar un criterio de búsqueda');
        return;
    }

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

    $.ajax({
        url: "{{ route('gestion-cuentas.buscar') }}",
        method: 'POST',
        data: { codigo: codigo },
        headers: { 'X-CSRF-TOKEN': "{{ csrf_token() }}" },
        success: function(data){

            Swal.close();

            if(data.error){
                Swal.fire(data.error);
                return;
            }

            cargarServicio(data);
        },
        error: function(){
            Swal.fire('Error al buscar');
        }
    });
}


function cargarServicio(data){

    $('#serviceInfo').show();

    $('#usrSerNombreUsuario').text(data.nombre);
    $('#usrSerDireccion').text(data.direccion);
    $('#usrSerContador').text(data.medidor);
    $('#conVolCodigo').text(data.voltaje);

    dataTable.clear();

    data.registros.forEach(reg => {

        let fecha = new Date(reg.UsrCarFechaLecturaActual)
                    .toLocaleDateString('es-GT');

        let kwh = reg.UsrCarKwhSocial > 0
                    ? reg.UsrCarKwhSocial
                    : reg.UsrCarKwhSimple;

        let fila = [
            fecha,
            reg.UsrCarDescripcion ?? '-',
            reg.UsrCarLecturaAnterior ?? 0,
            reg.UsrCarLecturaActual ?? 0,
            kwh,
            `<strong>Q ${reg.UsrCarCargoPeriodo ?? '0.00'}</strong>`,
            `<button class="btn btn-sm btn-primary btn-detalle">
                <i class="fas fa-eye"></i>
             </button>`
        ];

        fila.details = reg;

        dataTable.row.add(fila);
    });

    dataTable.draw();
}


/* ===== EXPANDIR DETALLE ===== */

$('#tablaEstadoCuenta tbody').on('click', '.btn-detalle', function(){

    let tr = $(this).closest('tr');
    let row = dataTable.row(tr);

    if(row.child.isShown()){
        row.child.hide();
    }else{

        let d = row.data().details;

        let html = `
            <div class="p-3 bg-light">
                <div class="row">
                    <div class="col-md-4"><strong>Cargo Fijo:</strong> Q ${d.UsrCarCargoFijo ?? 0}</div>
                    <div class="col-md-4"><strong>Cargo Social:</strong> Q ${d.UsrCarCargoSocial ?? 0}</div>
                    <div class="col-md-4"><strong>IVA:</strong> Q ${d.UsrCarCargoIva ?? 0}</div>
                </div>
            </div>
        `;

        row.child(html).show();
    }

});

</script>
@endsection