@extends('layouts.kaiadmin.master')

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

@section('css')
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.6/css/dataTables.bootstrap5.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
<link rel="stylesheet" type="text/css" 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">

<style>
/* ==== ESTILOS GENERALES ==== */
:root {
    --primary-color: #4361ee;
    --secondary-color: #3a0ca3;
    --success-color: #4cc9f0;
    --light-bg: #f8f9fa;
    --border-color: #e0e0e0;
    --shadow-light: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-medium: 0 6px 20px rgba(0, 0, 0, 0.1);
}

body {
    background-color: #f5f7fb;
}

/* ==== HEADER Y TÍTULOS ==== */
.content-header h5 {
    color: var(--secondary-color);
    font-weight: 700;
    font-size: 1.5rem;
    border-left: 4px solid var(--primary-color);
    padding-left: 15px;
}

.card {
    border-radius: 12px;
    border: none;
    box-shadow: var(--shadow-light);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden;
}

.card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-medium);
}

.card-header {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: white;
    border-radius: 12px 12px 0 0 !important;
    padding: 1.2rem 1.5rem;
    border-bottom: none;
}

.card-header h3 {
    font-weight: 600;
    margin: 0;
    font-size: 1.4rem;
}

/* ==== BUSCADOR MEJORADO ==== */
.search-container {
    background: white;
    border-radius: 10px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    border: 1px solid var(--border-color);
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.input-group {
    max-width: 400px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    border-radius: 8px;
    overflow: hidden;
}

.input-group input {
    border: 2px solid #e0e0e0;
    border-right: none;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    transition: all 0.3s;
}

.input-group input:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.15);
}

#btnBuscar {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    border: none;
    padding: 0.75rem 1.5rem;
    font-weight: 600;
    transition: all 0.3s;
}

#btnBuscar:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(67, 97, 238, 0.3);
}

/* ==== INFORMACIÓN DEL SERVICIO ==== */
.service-info {
    background: white;
    border-radius: 10px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    border-left: 4px solid var(--success-color);
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.service-info h6 {
    color: var(--secondary-color);
    font-weight: 600;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.service-info p {
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.info-label {
    font-weight: 600;
    color: #555;
    min-width: 120px;
    display: inline-block;
}

.info-value {
    color: #333;
    font-weight: 500;
}

/* ==== PESTAÑAS PROFESIONALES ==== */
.nav-tabs-custom {
    border-bottom: 2px solid #e0e0e0;
    margin: 1.5rem 0;
    display: none;
}

.nav-tabs-custom .nav-item {
    margin-right: 5px;
}

.nav-tabs-custom .nav-link {
    font-weight: 600;
    padding: 0.8rem 1.5rem;
    color: #666;
    border: none;
    border-radius: 8px 8px 0 0;
    background-color: #f8f9fa;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    gap: 8px;
}

.nav-tabs-custom .nav-link:hover {
    color: var(--primary-color);
    background-color: #edf2ff;
}

.nav-tabs-custom .nav-link.active {
    background-color: white;
    color: var(--primary-color) !important;
    border-bottom: 3px solid var(--primary-color);
    box-shadow: 0 -2px 8px rgba(0,0,0,0.05);
}

/* ==== TABLA COMPACTA CON DETALLES EXPANDIBLES ==== */
.table-container {
    background: white;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    margin-bottom: 1.5rem;
}

.table-header {
    background: #f8f9fa;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border-color);
}

.table-header h5 {
    margin: 0;
    color: var(--secondary-color);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.table-responsive {
    overflow-x: auto;
    max-width: 100%;
}

/* Estilos para DataTables */
table.dataTable {
    width: 100% !important;
    margin: 0 !important;
    border-collapse: collapse !important;
}

table.dataTable thead th {
    background-color: var(--light-bg);
    color: var(--secondary-color);
    font-weight: 600;
    padding: 12px 10px;
    border-bottom: 2px solid var(--border-color);
    text-align: center;
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 10;
}

table.dataTable tbody td {
    padding: 10px;
    border-bottom: 1px solid #f0f0f0;
    text-align: center;
    vertical-align: middle;
}

/* Estilo para fila principal */
table.dataTable tbody tr.parent-row {
    cursor: pointer;
    transition: background-color 0.2s;
}

table.dataTable tbody tr.parent-row:hover {
    background-color: #f8faff !important;
}

/* Estilo para fila expandida */
table.dataTable tbody tr.details-row {
    background-color: #f9f9f9 !important;
}

.details-content {
    padding: 15px;
    background: #f9f9f9;
    border-top: 1px solid #e0e0e0;
    border-bottom: 1px solid #e0e0e0;
}

.details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin-bottom: 10px;
}

.detail-item {
    display: flex;
    flex-direction: column;
    padding: 8px 12px;
    background: white;
    border-radius: 6px;
    border-left: 3px solid var(--primary-color);
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.detail-label {
    font-size: 0.85rem;
    color: #666;
    font-weight: 600;
    margin-bottom: 3px;
}

.detail-value {
    font-size: 1rem;
    color: #333;
    font-weight: 500;
}

/* Botón de expandir/colapsar */
.btn-expand-action {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    border: none;
    color: white;
    cursor: pointer;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    transition: all 0.3s;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-width: 80px;
    justify-content: center;
}

.btn-expand-action:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(67, 97, 238, 0.3);
}

.btn-expand-action i {
    transition: transform 0.3s;
    font-size: 0.9rem;
}

.btn-expand-action.expanded i {
    transform: rotate(180deg);
}

/* Estilo para DataTables responsive en móviles */
@media screen and (max-width: 767px) {
    .details-grid {
        grid-template-columns: 1fr;
    }
    
    table.dataTable thead th {
        font-size: 0.85rem;
        padding: 8px 5px;
    }
    
    table.dataTable tbody td {
        font-size: 0.85rem;
        padding: 8px 5px;
    }
    
    .btn-expand-action {
        padding: 4px 8px;
        font-size: 0.8rem;
        min-width: 70px;
    }
}

/* ==== PAGINACIÓN PERSONALIZADA ==== */
.dataTables_paginate {
    padding: 1rem;
    background: #f8f9fa;
    border-top: 1px solid var(--border-color);
}

.paginate_button {
    padding: 0.5rem 1rem !important;
    margin: 0 3px !important;
    border-radius: 6px !important;
    border: 1px solid #ddd !important;
    background: white !important;
    color: #555 !important;
    transition: all 0.3s !important;
}

.paginate_button:hover {
    background: var(--primary-color) !important;
    color: white !important;
    border-color: var(--primary-color) !important;
    transform: translateY(-1px);
}

.paginate_button.current {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)) !important;
    color: white !important;
    border-color: var(--primary-color) !important;
    box-shadow: 0 2px 6px rgba(67, 97, 238, 0.3);
}

/* ==== TOTAL A PAGAR ==== */
.total-container {
    background: linear-gradient(135deg, #4cc9f0, #4361ee);
    color: white;
    padding: 1.2rem 1.5rem;
    border-radius: 10px;
    margin-top: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 4px 12px rgba(76, 201, 240, 0.3);
}

.total-label {
    font-size: 1.1rem;
    font-weight: 600;
}

.total-amount {
    font-size: 1.8rem;
    font-weight: 700;
}

/* ==== CONTENEDORES DE TABS ==== */
.tab-pane {
    padding: 1rem 0;
}

/* ==== LOADING SPINNER ==== */
.spinner-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 200px;
}

.loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid #f3f3f3;
    border-top: 3px solid var(--primary-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ==== RESPONSIVE ==== */
@media (max-width: 768px) {
    .service-info .row > div {
        margin-bottom: 1rem;
    }
    
    .total-container {
        flex-direction: column;
        text-align: center;
        gap: 10px;
    }
    
    .nav-tabs-custom .nav-link {
        padding: 0.6rem 1rem;
        font-size: 0.9rem;
    }
}
</style>
@endsection

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

@section('content')
<div class="card">
    <div class="card-header">
        <h3 class="card-title"><i class="fas fa-search me-2"></i>Consulta de Estado de Cuenta</h3>
    </div>
    <div class="card-body">
        
        <!-- BUSCADOR MEJORADO -->
       <div class="search-container">
            <div class="form-group">
                <label for="codigoservicio" class="form-label">
                    <strong>
                        <i class="fas fa-search me-1"></i>Buscar Servicio:
                    </strong>
                </label>
                <div class="input-group">
                    <input type="text" 
                        id="codigoservicio" 
                        class="form-control" 
                        placeholder="Ej: A-001 o Juan Pérez">
                    <div class="input-group-append">
                        <button class="btn btn-primary" id="btnBuscar">
                            <i class="fas fa-search me-1"></i>Buscar
                        </button>
                    </div>
                </div>
                <small class="form-text text-muted mt-1">
                    <i class="fas fa-info-circle me-1"></i>
                    Puede buscar por <strong>código de cuenta</strong> (Ej: A-001) o por <strong>nombre de usuario</strong> (Ej: Juan Pérez)
                </small>
            </div>
        </div>
        

        <!-- INFORMACIÓN DEL SERVICIO -->
        <div class="service-info" id="serviceInfo" style="display: none;">
            <h6><i class="fas fa-user-circle me-2"></i>Información del Cliente</h6>
            <div class="row">
                <div class="col-md-6">
                    <p><span class="info-label"><i class="fas fa-user me-1"></i>Usuario:</span> 
                       <span class="info-value" id="usrSerNombreUsuario">-</span></p>
                    <p><span class="info-label"><i class="fas fa-id-card me-1"></i>DPI:</span> 
                       <span class="info-value" id="DPI">-</span></p>
                    <p><span class="info-label"><i class="fas fa-address-card me-1"></i>NIT:</span> 
                       <span class="info-value" id="usrSerNit">-</span></p>
                </div>
                <div class="col-md-6">
                    <p><span class="info-label"><i class="fas fa-map-marker-alt me-1"></i>Dirección:</span> 
                       <span class="info-value" id="usrSerDireccion">-</span></p>
                    <p><span class="info-label"><i class="fas fa-tachometer-alt me-1"></i>Medidor:</span> 
                       <span class="info-value" id="usrSerContador">-</span></p>
                    <p><span class="info-label"><i class="fas fa-bolt me-1"></i>Voltaje/Mult.:</span> 
                       <span class="info-value"><span id="conVolCodigo">-</span> | <span id="usrSerMultiplicador">-</span></span></p>
                </div>
            </div>
        </div>

        <div id="mensajeInactivo" class="alert alert-warning" style="display: none;"></div>

        <!-- PESTAÑAS -->
        <ul class="nav nav-tabs nav-tabs-custom" id="tabsEstadoCuenta">
            <li class="nav-item">
                <a class="nav-link active" data-tab="tabTabla">
                    <i class="fas fa-table me-1"></i>Estado de Cuenta
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-tab="tabDocumentos">
                    <i class="fas fa-file-alt me-1"></i>Documentos
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-tab="tabGraficas">
                    <i class="fas fa-chart-line me-1"></i>Gráficas
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-tab="tabFacturas">
                    <i class="fas fa-receipt me-1"></i>Facturas
                </a>
            </li>
        </ul>

        <!-- CONTENIDO DE PESTAÑAS -->
        <div class="tab-content">
            
            <!-- TAB 1: ESTADO DE CUENTA CON TABLA COMPACTA -->
            <div id="tabTabla" class="tab-pane fade show active">
                <div class="table-container">
                    <div class="table-header">
                        <h5><i class="fas fa-history me-2"></i>Historial de Consumo</h5>
                    </div>
                    
                    <div class="table-responsive">
                        <table id="tablaEstadoCuenta" class="table table-hover display responsive nowrap" style="width:100%">
                            <thead>
                                <tr>
                                    <th>Fecha</th>
                                    <th>Descripción</th>
                                    <th>Lect. Ant.</th>
                                    <th>Lect. Act.</th>
                                    <th>Kwh</th>
                                    <th>Q. Total</th>
                                    <th>Acción</th>
                                </tr>
                            </thead>
                            <tbody>
                                <!-- Los datos se cargarán vía AJAX -->
                            </tbody>
                        </table>
                    </div>
                </div>

                <!-- TOTAL A PAGAR -->
                <div class="total-container">
                    <div class="total-label">
                        <i class="fas fa-money-bill-wave me-2"></i>TOTAL A PAGAR:
                    </div>
                    <div class="total-amount" id="totalPagar">Q 0.00</div>
                </div>

                <div class="text-end mt-3">
                   <button id="btnImprimirEstado" type="button" class="btn btn-danger btn-lg">
                        <i class="fas fa-print me-2"></i> Imprimir Estado de Cuenta
                    </button>
                </div>
            </div>

            <!-- TAB 2: DOCUMENTOS -->
            <div id="tabDocumentos" class="tab-pane fade">
                <div class="spinner-container" id="loadingDocumentos">
                    <div class="loading-spinner"></div>
                </div>
                <div class="row mt-4" id="contenedorDocumentos"></div>
            </div>

            <!-- TAB 3: GRÁFICAS -->
            <div id="tabGraficas" class="tab-pane fade">
                <div class="spinner-container" id="loadingGraficas">
                    <div class="loading-spinner"></div>
                </div>
                <div id="contenedorGraficas" class="mt-4"></div>
            </div>

            <!-- TAB 4: FACTURAS -->
            <div id="tabFacturas" class="tab-pane fade">
                <div class="spinner-container" id="loadingFacturas">
                    <div class="loading-spinner"></div>
                </div>
                <div id="contenedorFacturas" class="mt-4"></div>
            </div>
            
        </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>
// Variables globales
let dataTable = null;
let currentCodigo = '';
let expandedRows = new Set();

/* ============================================================
   INICIALIZACIÓN
============================================================ */
$(document).ready(function() {
    // Inicializar DataTable vacío
    inicializarDataTable();
    
    // Manejo de pestañas
    manejarTabs();
    
    // Botón de búsqueda
    $('#btnBuscar').on('click', buscarServicio);
    
    // Permitir búsqueda con Enter
    $('#codigoservicio').on('keypress', function(e) {
        if (e.which === 13) {
            buscarServicio();
        }
    });
});

/* ============================================================
   INICIALIZAR DATATABLE CON FUNCIONALIDAD EXPANDIBLE
============================================================ */
function inicializarDataTable() {
    dataTable = $('#tablaEstadoCuenta').DataTable({
        language: {
            url: '//cdn.datatables.net/plug-ins/1.13.6/i18n/es-ES.json'
        },
        responsive: true,
        pageLength: 10,
        lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "Todos"]],
        order: [[0, 'desc']], // Ordenar por fecha por defecto
        dom: '<"row"<"col-sm-12 col-md-6"l><"col-sm-12 col-md-6"f>>rt<"row"<"col-sm-12 col-md-6"i><"col-sm-12 col-md-6"p>>',
        processing: true,
        serverSide: false,
        searching: false,
        info: true,
        autoWidth: false,
        columnDefs: [
            { targets: 0, width: '100px' }, // Fecha
            { targets: 1, width: '150px' }, // Descripción
            { targets: 2, width: '80px' },  // Lectura anterior
            { targets: 3, width: '80px' },  // Lectura actual
            { targets: 4, width: '80px' },  // Kwh
            { targets: 5, width: '100px' }, // Q Total
            {
                targets: 6,
                orderable: false,
                width: '100px'
            }
        ],
        createdRow: function(row, data, dataIndex) {
            $(row).addClass('parent-row');
        }
    });
    
    // Agregar evento para expandir/colapsar filas
    $('#tablaEstadoCuenta tbody').on('click', '.btn-expand-action', function(e) {
        e.stopPropagation(); // Prevenir propagación del evento
        
        const tr = $(this).closest('tr');
        const row = dataTable.row(tr);
        const rowIndex = row.index();
        
        if (row.child.isShown()) {
            // Esta fila ya está abierta - cerrarla
            row.child.hide();
            tr.removeClass('details-row');
            $(this).removeClass('expanded');
            $(this).html('<i class="fas fa-eye me-1"></i>Ver');
            expandedRows.delete(rowIndex);
        } else {
            // Abrir esta fila
            const rowData = row.data();
            mostrarDetalles(row, rowData);
            tr.addClass('details-row');
            $(this).addClass('expanded');
            $(this).html('<i class="fas fa-eye-slash me-1"></i>Ocultar');
            expandedRows.add(rowIndex);
        }
    });
}

/* ============================================================
   MOSTRAR DETALLES EXPANDIDOS
============================================================ */
function mostrarDetalles(row, rowData) {
    // Extraer datos de detalles de los atributos data-*
    const detailsData = rowData.details || {};
    
    const detailsHtml = `
        <div class="details-content">
            <div class="details-grid">
                <div class="detail-item">
                    <span class="detail-label">Demanda Contratada</span>
                    <span class="detail-value">${detailsData.demandaContratada || '0'}</span>
                </div>
                <div class="detail-item">
                    <span class="detail-label">Demanda Máxima</span>
                    <span class="detail-value">${detailsData.demandaMaxima || '0'}</span>
                </div>
                <div class="detail-item">
                    <span class="detail-label">Punta</span>
                    <span class="detail-value">${detailsData.punta || '0'}</span>
                </div>
                <div class="detail-item">
                    <span class="detail-label">Cargo Fijo</span>
                    <span class="detail-value">Q ${detailsData.cargoFijo || '0.00'}</span>
                </div>
                <div class="detail-item">
                    <span class="detail-label">Cargo Social</span>
                    <span class="detail-value">Q ${detailsData.cargoSocial || '0.00'}</span>
                </div>
                <div class="detail-item">
                    <span class="detail-label">Cargo No Social</span>
                    <span class="detail-value">Q ${detailsData.cargoNoSocial || '0.00'}</span>
                </div>
                <div class="detail-item">
                    <span class="detail-label">Tasa Municipal</span>
                    <span class="detail-value">Q ${detailsData.tasa || '0.00'}</span>
                </div>
                <div class="detail-item">
                    <span class="detail-label">IVA</span>
                    <span class="detail-value">Q ${detailsData.iva || '0.00'}</span>
                </div>
                <div class="detail-item">
                    <span class="detail-label">Demanda Contratada</span>
                    <span class="detail-value">Q ${detailsData.demandaContratadaCargo || '0.00'}</span>
                </div>
                <div class="detail-item">
                    <span class="detail-label">Demanda Máxima</span>
                    <span class="detail-value">Q ${detailsData.demandaMaximaCargo || '0.00'}</span>
                </div>
                <div class="detail-item">
                    <span class="detail-label">Excedente</span>
                    <span class="detail-value">Q ${detailsData.excedente || '0.00'}</span>
                </div>
                <div class="detail-item">
                    <span class="detail-label">Factor P.</span>
                    <span class="detail-value">${detailsData.factorP || '0.00'}</span>
                </div>
            </div>
            <div class="text-muted small">
                <i class="fas fa-info-circle me-1"></i>Detalles del período
            </div>
        </div>
    `;
    
    row.child(detailsHtml).show();
}

/* ============================================================
   MANEJO DE PESTAÑAS
============================================================ */
function manejarTabs() {
    $('.nav-link').on('click', function(e) {
        e.preventDefault();
        const tab = $(this).data('tab');
        
        // Cambiar pestaña activa
        $('.nav-link').removeClass('active');
        $(this).addClass('active');
        
        // Mostrar contenido
        $('.tab-pane').removeClass('show active');
        $(`#${tab}`).addClass('show active');
        
        // Si la pestaña de documentos está vacía, cargarla
        if (tab === 'tabDocumentos' && currentCodigo && $('#contenedorDocumentos').is(':empty')) {
            cargarDocumentos(currentCodigo);
        }
    });
}

/* ============================================================
   BUSCAR SERVICIO - MEJORADO PARA MÚLTIPLES RESULTADOS
============================================================ */
function buscarServicio() {
    const codigo = $('#codigoservicio').val().trim();
    
    if (!codigo) {
        Swal.fire({
            icon: 'warning',
            title: 'Campo requerido',
            text: 'Debe ingresar un número de cuenta o nombre de usuario.',
            confirmButtonColor: '#4361ee'
        });
        return;
    }
    
    Swal.fire({
        title: 'Buscando información...',
        text: 'Por favor espere',
        allowOutsideClick: false,
        didOpen: () => Swal.showLoading()
    });
    
    $.ajax({
        url: "{{ route('buscarServicio') }}",
        method: 'POST',
        data: JSON.stringify({ codigo: codigo }),
        contentType: 'application/json',
        headers: {
            'X-CSRF-TOKEN': "{{ csrf_token() }}"
        },
        success: function(data) {
            Swal.close();
            
            if (data.error) {
                resetUI();
                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: data.error,
                    confirmButtonColor: '#dc3545'
                });
                return;
            }
            
            // Si hay múltiples servicios, mostrar selector
            if (data.multiple === true) {
                mostrarSelectorServicios(data.servicios);
                return;
            }
            
            // Si es único, cargar directamente
            cargarServicioCompleto(data);
        },
        error: function(xhr) {
            Swal.close();
            Swal.fire({
                icon: 'error',
                title: 'Error',
                text: 'No se pudo conectar con el servidor. Intente nuevamente.',
                confirmButtonColor: '#dc3545'
            });
        }
    });
}

/* ============================================================
   MOSTRAR SELECTOR CUANDO HAY MÚLTIPLES SERVICIOS
============================================================ */
function mostrarSelectorServicios(servicios) {
    // Construir HTML de la tabla de servicios
    let htmlTabla = `
        <div class="table-responsive" style="max-height: 400px; overflow-y: auto;">
            <table class="table table-hover table-bordered">
                <thead class="table-primary">
                    <tr>
                        <th>Código</th>
                        <th>Nombre</th>
                        <th>Dirección</th>
                        <th>Medidor</th>
                        <th>Estado</th>
                        <th>Seleccionar</th>
                    </tr>
                </thead>
                <tbody>
    `;
    
    servicios.forEach(servicio => {
    let estadoBadge;
    
    if (servicio.UsrSerActivoDesc === 0 ) {
        estadoBadge = '<span class="badge bg-success">ACTIVO</span>';
    } else if (servicio.UsrSerActivoDesc === 1) {
        estadoBadge = '<span class="badge bg-danger">INACTIVO</span>';
    } 
            
        htmlTabla += `
            <tr>
                <td><strong>${servicio.UsrSerCodigo}</strong></td>
                <td>${servicio.UsrSerNombreUsuario}</td>
                <td>${servicio.UsrSerDireccion || '-'}</td>
                <td>${servicio.UsrSerContador || '-'}</td>
                <td>${estadoBadge}</td>
                <td class="text-center">
                    <button class="btn btn-sm btn-primary btn-seleccionar-servicio" 
                            data-codigo="${servicio.UsrSerCodigo}">
                        <i class="fas fa-check-circle me-1"></i>Seleccionar
                    </button>
                </td>
            </tr>
        `;
    });
    
    htmlTabla += `
                </tbody>
            </table>
        </div>
    `;
    
    // Mostrar en SweetAlert2
    Swal.fire({
        title: '<strong>Múltiples Servicios Encontrados</strong>',
        icon: 'info',
        html: `
            <p class="text-muted mb-3">Se encontraron ${servicios.length} servicios. Seleccione el que desea consultar:</p>
            ${htmlTabla}
        `,
        width: '900px',
        showConfirmButton: false,
        showCloseButton: true,
        didOpen: () => {
            // Agregar evento click a los botones de selección
            $('.btn-seleccionar-servicio').on('click', function() {
                const codigoSeleccionado = $(this).data('codigo');

                // 👉 Mostrar SIEMPRE el código en el input
                $('#codigoservicio').val(codigoSeleccionado);

                Swal.close();
                cargarServicioPorCodigo(codigoSeleccionado);
            });

        }
    });
}

/* ============================================================
   CARGAR SERVICIO ESPECÍFICO POR CÓDIGO
============================================================ */
function cargarServicioPorCodigo(codigo) {
    Swal.fire({
        title: 'Cargando servicio...',
        text: 'Por favor espere',
        allowOutsideClick: false,
        didOpen: () => Swal.showLoading()
    });
    
    $.ajax({
        url: "{{ route('buscarServicio') }}",
        method: 'POST',
        data: JSON.stringify({ codigo: codigo }),
        contentType: 'application/json',
        headers: {
            'X-CSRF-TOKEN': "{{ csrf_token() }}"
        },
        success: function(data) {
            Swal.close();
            
            if (data.error) {
                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: data.error,
                    confirmButtonColor: '#dc3545'
                });
                return;
            }
            
            // IMPORTANTE: Aquí también puede devolver múltiple si hay varios
            // pero como estamos buscando por código exacto, debería ser único
            // De todas formas, manejamos ambos casos:
            if (data.multiple === true && data.servicios && data.servicios.length > 0) {
                // Si por alguna razón devuelve múltiples, tomamos el primero
                // o volvemos a mostrar el selector
                mostrarSelectorServicios(data.servicios);
                return;
            }
            
            cargarServicioCompleto(data);
        },
        error: function(xhr) {
            Swal.close();
            Swal.fire({
                icon: 'error',
                title: 'Error',
                text: 'No se pudo cargar el servicio.',
                confirmButtonColor: '#dc3545'
            });
        }
    });
}

/* ============================================================
   CARGAR SERVICIO COMPLETO (REFACTORIZADO)
============================================================ */
function cargarServicioCompleto(data) {
    $('#codigoservicio').val(data.codigo);
    // Guardar código actual
    currentCodigo = data.codigoEncriptado;
    
    // Mostrar información del servicio
    cargarDatosServicio(data);
    
    // Cargar tabla con registros
    cargarTablaDataTable(data.registros, data.totalPagar);
    
    // Mostrar pestañas
    mostrarTabs();
    
    // Cargar contenido de otras pestañas
    cargarDocumentos(data.codigoEncriptado);
    cargarGraficas(data.codigoEncriptado);
    cargarFacturas(data.codigoEncriptado);
    
    // Mostrar mensaje de éxito
    Swal.fire({
        icon: 'success',
        title: '¡Encontrado!',
        text: `Información de ${data.nombre} cargada correctamente.`,
        timer: 1500,
        showConfirmButton: false
    });
}

/* ============================================================
   CARGAR DATOS DEL SERVICIO
============================================================ */
function cargarDatosServicio(data) {
    $('#serviceInfo').show();
    $('#usrSerNombreUsuario').text(data.nombre || '-');
    $('#usrSerDireccion').text(data.direccion || '-');
    $('#usrSerContador').text(data.medidor || '-');
    $('#usrSerNit').text(data.nit || '-');
    $('#DPI').text(data.dpi || '-');
    $('#conVolCodigo').text(data.voltaje || '-');
    $('#usrSerMultiplicador').text(data.multiplicador || '-');
    
    // Mostrar/Ocultar mensaje de inactivo si aplica
    if (data.activo === 1) {
        $('#mensajeInactivo').html(`
            <i class="fas fa-exclamation-triangle me-2"></i>
            <strong>¡Atención!</strong> Este servicio se encuentra INACTIVO.
        `).show();
    } else {
        $('#mensajeInactivo').hide();
    }

}

/* ============================================================
   CARGAR TABLA CON DATOS Y FUNCIONALIDAD EXPANDIBLE
============================================================ */
function cargarTablaDataTable(registros, total) {
    // Limpiar tabla existente y resetear filas expandidas
    dataTable.clear();
    expandedRows.clear();
    
    if (!registros || registros.length === 0) {
        dataTable.draw();
        $('#totalPagar').text('Q 0.00');
        return;
    }
    
    // Agregar datos a la tabla
    registros.forEach((reg, index) => {
        // Formatear fecha
        const fecha = new Date(reg.UsrCarFechaLecturaActual);
        const fechaFormateada = fecha.toLocaleDateString('es-GT');
        
        // Calcular Kwh
        const kwh = (reg.UsrCarKwhSocial > 0 ? reg.UsrCarKwhSocial : reg.UsrCarKwhSimple) || 0;
        
        // Datos para la fila principal (solo 6 columnas + botón de acción)
        const rowData = [
            // Columna 0: Fecha
            fechaFormateada,
            
            // Columna 1: Descripción
            reg.UsrCarDescripcion || '-',
            
            // Columna 2: Lectura anterior
            reg.UsrCarLecturaAnterior || '0',
            
            // Columna 3: Lectura actual
            reg.UsrCarLecturaActual || '0',
            
            // Columna 4: Kwh
            kwh,
            
            // Columna 5: Q Total
            `<strong class="text-primary">Q ${reg.UsrCarCargoPeriodo || '0.00'}</strong>`,
            
            // Columna 6: Botón de acción
            `<button class="btn-expand-action" data-index="${index}">
                <i class="fas fa-eye me-1"></i>Ver
            </button>`
        ];
        
        // Agregar datos de detalles como atributo personalizado
        rowData.details = {
            demandaContratada: reg.UsrCarDemandaContratada || '0',
            demandaMaxima: reg.UsrCarDemandaConsumida || '0',
            punta: reg.UsrCarParticipacionPunta || '0',
            cargoFijo: reg.UsrCarCargoFijo || '0.00',
            cargoSocial: reg.UsrCarCargoSocial || '0.00',
            cargoNoSocial: reg.UsrCarCargoNoSocial || '0.00',
            tasa: reg.UsrCarCargoTasaMunicipal || '0.00',
            iva: reg.UsrCarCargoIva || '0.00',
            demandaContratadaCargo: reg.UsrCarCargoDemandaContratada || '0.00',
            demandaMaximaCargo: reg.UsrCarCargoDemandaConsumida || '0.00',
            excedente: reg.UsrCarCargoKwExc || '0.00',
            factorP: reg.UsrCarCargoPf || '0.00'
        };
        
        dataTable.row.add(rowData);
    });
    
    // Dibujar tabla
    dataTable.draw();
    
    // Actualizar total
    $('#totalPagar').text('Q ' + parseFloat(total || 0).toFixed(2));
}

/* ============================================================
   CARGAR DOCUMENTOS
============================================================ */
function cargarDocumentos(codigo) {
    $('#loadingDocumentos').show();
    $('#contenedorDocumentos').empty();
    
    // Simulación de carga (reemplazar con tu endpoint real)
    setTimeout(() => {
        $('#loadingDocumentos').hide();
        $('#contenedorDocumentos').html(`
            <div class="col-md-12">
                <div class="card card-sub">
                    <div class="card-body text-center">
                        <h5 class="card-title mb-4"><i class="fas fa-folder-open me-2"></i>Documentos Disponibles</h5>
                        <div class="row">
                            <div class="col-md-4 mb-3">
                                <a href="/documentos/${codigo}" class="btn btn-info btn-lg btn-block py-3">
                                    <i class="fas fa-file-contract fa-2x mb-2"></i><br>
                                    Contratos
                                </a>
                            </div>
                            <div class="col-md-4 mb-3">
                                <a href="/convenios/${codigo}" class="btn btn-success btn-lg btn-block py-3">
                                    <i class="fas fa-handshake fa-2x mb-2"></i><br>
                                    Convenios
                                </a>
                            </div>
                            <div class="col-md-4 mb-3">
                                <a href="/dictamenes/${codigo}" class="btn btn-warning btn-lg btn-block py-3">
                                    <i class="fas fa-clipboard-check fa-2x mb-2"></i><br>
                                    Dictámenes
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        `);
    }, 1000);
}

/* ============================================================
   CARGAR GRÁFICAS
============================================================ */
function cargarGraficas(codigo) {
    $('#loadingGraficas').show();
    
    setTimeout(() => {
        $('#loadingGraficas').hide();
        $('#contenedorGraficas').html(`
            <div class="card card-sub">
                <div class="card-body">
                    <h5 class="card-title"><i class="fas fa-chart-line me-2"></i>Gráficas de Consumo</h5>
                    <iframe src="/facturas/grafica/${codigo}" 
                            class="w-100" 
                            style="height:500px; border:none; border-radius:8px;">
                    </iframe>
                </div>
            </div>
        `);
    }, 1000);
}

/* ============================================================
   CARGAR FACTURAS
============================================================ */
function cargarFacturas(codigo) {
    $('#loadingFacturas').show();
    
    setTimeout(() => {
        $('#loadingFacturas').hide();
        $('#contenedorFacturas').html(`
            <div class="card card-sub">
                <div class="card-body">
                    <h5 class="card-title"><i class="fas fa-file-invoice me-2"></i>Facturas Históricas</h5>
                    <iframe src="/facturas/${codigo}" 
                            class="w-100" 
                            style="height:500px; border:none; border-radius:8px;">
                    </iframe>
                </div>
            </div>
        `);
    }, 1000);
}

/* ============================================================
   MOSTRAR PESTAÑAS
============================================================ */
function mostrarTabs() {
    $('#tabsEstadoCuenta').css('display', 'flex');
    
    // Asegurarse de que la primera pestaña esté activa
    $('.nav-link').removeClass('active');
    $('.nav-link[data-tab="tabTabla"]').addClass('active');
    
    $('.tab-pane').removeClass('show active');
    $('#tabTabla').addClass('show active');
}

/* ============================================================
   LIMPIAR INTERFAZ
============================================================ */
function resetUI() {
    $('#tabsEstadoCuenta').hide();
    $('#serviceInfo').hide();
    $('#mensajeInactivo').hide();
    
    // Limpiar datos del servicio
    $('#usrSerNombreUsuario, #usrSerDireccion, #usrSerContador, #usrSerNit, #DPI, #conVolCodigo, #usrSerMultiplicador')
        .text('-');
    
    // Limpiar tabla
    if (dataTable) {
        dataTable.clear().draw();
    }
    
    // Limpiar total
    $('#totalPagar').text('Q 0.00');
    
    // Limpiar otras pestañas
    $('#contenedorDocumentos').empty(); 
    $('#contenedorGraficas').empty();
    $('#contenedorFacturas').empty();
    
    // Limpiar filas expandidas
    expandedRows.clear();
}
 

$('#btnImprimirEstado').on('click', function () {
    if (!currentCodigo) {
        Swal.fire({
            icon: 'error',
            title: 'Debe buscar un servicio primero'
        });
        return;
    }

    const url = "{{ route('estadocuenta.ticket') }}?codigo=" + currentCodigo;

    window.open(
        url,
        '_blank',
        'width=350,height=600'
    );
});



</script>
@endsection