@extends('../padre.padre')

@section('contenido')
<style>
    .premium-card {
        background: #ffffff;
        border-radius: 15px;
        box-shadow: 0 4px 20px rgba(0,0,0,0.06);
        border: none;
        margin-bottom: 25px;
        padding: 25px;
    }
    .page-title {
        color: #2c3e50;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1px;
    }
    .nav-tabs-premium {
        border-bottom: 2px solid #e9ecef;
        margin-bottom: 25px;
    }
    .nav-tabs-premium .nav-link {
        border: none;
        color: #7f8c8d;
        font-weight: 600;
        padding: 12px 20px;
        transition: all 0.3s;
        border-bottom: 3px solid transparent;
        border-radius: 0;
    }
    .nav-tabs-premium .nav-link:hover {
        color: #2980b9;
        border-bottom: 3px solid #3498db;
    }
    .nav-tabs-premium .nav-link.active {
        color: #2980b9;
        background: transparent;
        border-bottom: 3px solid #2980b9;
    }
    .drop-zone {
        border: 2px dashed #bdc3c7;
        border-radius: 10px;
        padding: 40px 20px;
        text-align: center;
        background: #f8f9fa;
        cursor: pointer;
        transition: all 0.3s;
    }
    .drop-zone:hover, .drop-zone.dragover {
        border-color: #2980b9;
        background: #ebf5fb;
    }
    .form-label {
        font-weight: 600;
        color: #5d6778;
        margin-bottom: 8px;
    }
    .btn-premium {
        padding: 10px 22px;
        border-radius: 8px;
        font-weight: 600;
        transition: all 0.3s;
        box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    }
    .btn-premium:hover {
        transform: translateY(-1px);
        box-shadow: 0 6px 15px rgba(0,0,0,0.1);
    }
    .table-premium thead th {
        background-color: #34495e;
        color: white;
        border: none;
        text-transform: uppercase;
        font-size: 0.82rem;
        letter-spacing: 0.5px;
        vertical-align: middle;
    }
    .table-premium tbody td {
        vertical-align: middle;
        font-size: 0.9rem;
    }
    .badge-status {
        padding: 6px 12px;
        font-weight: 700;
        border-radius: 4px;
        display: inline-block;
    }
</style>

<div class="container-fluid">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h1 class="page-title m-0">Actualización y Reportes de Guías</h1>
        @include('menu.botonRegresar')
    </div>

    <!-- Pestañas de Navegación -->
    <ul class="nav nav-tabs nav-tabs-premium" id="guiasTab" role="tablist">
        <li class="nav-item">
            <a class="nav-link {{ ($consultado ?? false) ? '' : 'active' }}" id="importar-tab" data-bs-toggle="tab" data-bs-target="#importar" href="#importar" role="tab" aria-controls="importar" aria-selected="true">
                <i class="fas fa-file-import mr-2"></i> Importar desde Excel
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link {{ ($consultado ?? false) ? 'active' : '' }}" id="reporte-tab" data-bs-toggle="tab" data-bs-target="#reporte" role="tab" aria-controls="reporte" aria-selected="false">
                <i class="fas fa-chart-line mr-2"></i> Consultar Reporte
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link" id="consolidado-tab" data-bs-toggle="tab" data-bs-target="#consolidado" href="#consolidado" role="tab" aria-controls="consolidado" aria-selected="false">
                <i class="fas fa-calculator mr-2"></i> Reporte Consolidado
            </a>
        </li>
    </ul>

    <!-- Formulario de Búsqueda de Reportes -->
    <div class="premium-card" id="reportFilterFormCard" style="display: none;">
        <form action="{{ url('/actualizarGuiasConsulta') }}" method="GET">
            <input type="hidden" name="active_tab" id="active_tab_input" value="reporte">
            <div class="row align-items-end">
                <div class="col-md-3">
                    <label class="form-label">Fecha Inicial</label>
                    <input required type="date" name="fi" value="{{ $fi }}" class="form-control shadow-sm">
                </div>
                <div class="col-md-3">
                    <label class="form-label">Fecha Final</label>
                    <input required type="date" name="ff" value="{{ $ff }}" class="form-control shadow-sm">
                </div>
                <div class="col-md-3">
                    <label class="form-label">Bodega</label>
                    @include('../menu.bodegas')
                </div>
                <div class="col-md-3 text-right">
                    <div class="btn-group w-100">
                        <button type="submit" class="btn btn-warning btn-premium flex-grow-1 mr-2 text-dark font-weight-bold">
                            <i class="fas fa-search mr-1"></i> Consultar
                        </button>
                        <a href="{{ url('/actualizarGuiasExportar?fi='.$fi.'&ff='.$ff.'&bodega='.$bodega) }}" class="btn btn-success btn-premium flex-grow-1 font-weight-bold">
                            <i class="fas fa-file-excel mr-1"></i> Exportar
                        </a>
                    </div>
                </div>
            </div>
        </form>
    </div>

    <!-- Contenido de las Pestañas -->
    <div class="tab-content" id="guiasTabContent">
        <!-- PESTAÑA: IMPORTACIÓN -->
        <div class="tab-pane fade {{ ($consultado ?? false) ? '' : 'show active' }}" id="importar" role="tabpanel" aria-labelledby="importar-tab">
            <div class="premium-card">
                <h4 class="mb-3 font-weight-bold" style="color: #2c3e50;">Cargar Archivo de Guías</h4>
                <p class="text-muted small">
                    El archivo Excel debe contener la columna <strong>GUIA</strong> para identificar los registros del Kárdex de tipo <strong>Guia_Traslado</strong>, 
                    y puede incluir una o más de las siguientes columnas a actualizar: 
                    <code>telefonoDes</code>, <code>flete</code>, <code>Recaudo</code>, <code>cpa</code>, <code>comisionCard</code>, <code>pagoguia</code>, <code>OtroDatoGuias</code>.
                </p>

                <!-- Zona Drop-Zone -->
                <div class="drop-zone mb-4" id="dropZone">
                    <i class="fas fa-cloud-upload-alt fa-3x text-primary mb-3"></i>
                    <h5 class="font-weight-bold">Arrastra tu archivo Excel aquí o haz clic para seleccionar</h5>
                    <p class="text-muted small mb-0">Formatos soportados: .xlsx, .xls</p>
                    <input type="file" id="excelFile" accept=".xlsx, .xls" style="display: none;">
                </div>

                <!-- Previsualización -->
                <div id="previewContainer" style="display: none;">
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <h5 class="font-weight-bold m-0" style="color: #34495e;">Previsualización de Datos</h5>
                        <button class="btn btn-success btn-premium" id="btnProcesar">
                            <i class="fas fa-save mr-1"></i> Procesar Actualización
                        </button>
                    </div>
                    <div class="table-responsive" style="max-height: 400px; border: 1px solid #e9ecef; border-radius: 8px;">
                        <table class="table table-sm table-striped" id="tblPreview">
                            <thead class="thead-dark">
                                <!-- Se genera dinámicamente -->
                            </thead>
                            <tbody>
                                <!-- Se genera dinámicamente -->
                            </tbody>
                        </table>
                    </div>
                </div>

                <!-- Resultados de la Importación -->
                <div id="resultContainer" class="mt-4" style="display: none;">
                    <div class="alert alert-info border-0 shadow-sm" role="alert">
                        <h5 class="alert-heading font-weight-bold"><i class="fas fa-info-circle mr-2"></i>Resultado de la Operación</h5>
                        <p id="resultMsg" class="mb-0 font-weight-bold"></p>
                    </div>
                    
                    <div id="notFoundContainer" style="display: none;">
                        <h6 class="font-weight-bold text-danger"><i class="fas fa-exclamation-triangle mr-2"></i>Guías no encontradas en el Kárdex (Tipo: Guia_Traslado)</h6>
                        <div class="bg-light p-3 rounded text-muted small" style="max-height: 150px; overflow-y: auto;" id="lstNotFound">
                            <!-- Lista de guías no encontradas -->
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- PESTAÑA: REPORTES -->
        <div class="tab-pane fade {{ ($consultado ?? false) ? 'show active' : '' }}" id="reporte" role="tabpanel" aria-labelledby="reporte-tab">
            @if($consultado ?? false)
            <div class="premium-card p-0" style="overflow: hidden; border-radius: 15px;">
                <div class="table-responsive">
                    <table class="table table-hover table-premium mb-0">
                        <thead>
                            <tr>
                                <th class="px-4">Fecha</th>
                                <th>Nombre Destinatario</th>
                                <th>SKU</th>
                                <th class="text-center">Cant</th>
                                <th>Teléfono</th>
                                <th>Guía</th>
                                <th class="text-right">Flete</th>
                                <th class="text-right">Recaudo</th>
                                <th class="text-right">Costo Unit</th>
                                <th class="text-right">Costo Total</th>
                                <th class="text-center">Stock Inv</th>
                                <th class="text-right">CPA</th>
                                <th class="text-right">Comisión</th>
                                <th class="text-right">Utilidad</th>
                                <th class="text-center">Estado Guía</th>
                                <th class="px-4">Pagos</th>
                            </tr>
                        </thead>
                        <tbody>
                            @php
                                $totalCant = 0;
                                $totalFlete = 0;
                                $totalRecaudo = 0;
                                $totalCostoTotal = 0;
                                $totalUtilidad = 0;
                            @endphp

                            @forelse($kardex as $item)
                                @php
                                    $itemCant = floatval($item->cant ?? 0);
                                    $itemFlete = floatval(str_replace(['$', ',', ' '], '', $item->flete ?? 0));
                                    $itemRecaudo = floatval(str_replace(['$', ',', ' '], '', $item->Recaudo ?? 0));
                                    $itemCostoTotal = floatval($item->costo_total ?? 0);
                                    $itemUtilidad = floatval($item->utilidad ?? 0);

                                    $totalCant += $itemCant;
                                    $totalFlete += $itemFlete;
                                    $totalRecaudo += $itemRecaudo;
                                    $totalCostoTotal += $itemCostoTotal;
                                    $totalUtilidad += $itemUtilidad;
                                @endphp
                                <tr>
                                    <td class="px-4 text-nowrap"><small>{{ date('d/m/Y', strtotime($item->fecha)) }}</small></td>
                                    <td><strong>{{ $item->nombre }}</strong></td>
                                    <td><code>{{ $item->sku }}</code></td>
                                    <td class="text-center font-weight-bold">{{ number_format($itemCant, 0) }}</td>
                                    <td><small>{{ $item->telefonoDes }}</small></td>
                                    <td><small class="font-weight-bold text-dark">{{ $item->GUIA }}</small></td>
                                    <td class="text-right text-muted">${{ number_format($itemFlete, 2) }}</td>
                                    <td class="text-right text-success font-weight-bold">${{ number_format($itemRecaudo, 2) }}</td>
                                    <td class="text-right text-muted">${{ number_format(floatval($item->costo_caja), 2) }}</td>
                                    <td class="text-right text-danger font-weight-bold">${{ number_format($itemCostoTotal, 2) }}</td>
                                    <td class="text-center font-weight-bold text-primary">{{ number_format(floatval($item->stock), 2) }}</td>
                                    <td class="text-right">${{ number_format(floatval(str_replace(['$', ',', ' '], '', $item->cpa ?? 0)), 2) }}</td>
                                    <td class="text-right">${{ number_format(floatval(str_replace(['$', ',', ' '], '', $item->comision ?? 0)), 2) }}</td>
                                    <td class="text-right font-weight-bold {{ $itemUtilidad >= 0 ? 'text-success' : 'text-danger' }}">
                                        ${{ number_format($itemUtilidad, 2) }}
                                    </td>
                                    <td class="text-center">
                                        @php
                                            $estadoCode = strtoupper(trim($item->estado));
                                            $bg = '#858796'; 
                                            $fg = '#ffffff';
                                            $label = $item->estado; 

                                            switch ($estadoCode) {
                                                case 'A': $label = 'Alistamiento'; $bg = '#4e73df'; break;
                                                case 'V': $label = 'Verificado'; $bg = '#1cc88a'; break;
                                                case 'C': $label = 'Confirmado'; $bg = '#36b9cc'; break;
                                                case 'D': $label = 'Despachado'; $bg = '#f6c23e'; $fg = '#2c3e50'; break;
                                                case 'DV': $label = 'Devolución'; $bg = '#6f42c1'; break;
                                                case 'AN': $label = 'Anulado'; $bg = '#e74a3b'; break;
                                            }
                                        @endphp
                                        <span class="badge" style="background-color: {{ $bg }}; color: {{ $fg }}; padding: 5px 8px; font-size: 0.75rem; border-radius: 4px;">
                                            {{ $label }}
                                        </span>
                                    </td>
                                    <td class="px-4"><small class="text-muted">{{ $item->pago }}</small></td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="16" class="text-center p-4 text-muted font-weight-bold">
                                        No se encontraron registros de tipo Guia_Traslado en el rango de fechas seleccionado.
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                        @if(count($kardex) > 0)
                        <tfoot class="bg-light font-weight-bold" style="border-top: 2px solid #34495e;">
                            <tr>
                                <td colspan="3" class="px-4 text-right">TOTALES:</td>
                                <td class="text-center">{{ number_format($totalCant, 0) }}</td>
                                <td colspan="2"></td>
                                <td class="text-right">${{ number_format($totalFlete, 2) }}</td>
                                <td class="text-right text-success">${{ number_format($totalRecaudo, 2) }}</td>
                                <td></td>
                                <td class="text-right text-danger">${{ number_format($totalCostoTotal, 2) }}</td>
                                <td colspan="3"></td>
                                <td class="text-right {{ $totalUtilidad >= 0 ? 'text-success' : 'text-danger' }}">
                                    ${{ number_format($totalUtilidad, 2) }}
                                </td>
                                <td colspan="2"></td>
                            </tr>
                        </tfoot>
                        @endif
                    </table>
                </div>
            </div>
            @endif
        </div>

        <!-- PESTAÑA: CONSOLIDADO -->
        <div class="tab-pane fade" id="consolidado" role="tabpanel" aria-labelledby="consolidado-tab">
            @if($consultado ?? false)
                @if(!empty($consolidado))
                <!-- Tarjetas KPI Consolidadas -->
                <div class="row mb-4">
                    <div class="col-md-3 mb-3">
                        <div class="card shadow-sm py-3" style="border-left: 4px solid #4e73df; border-radius: 10px; background: #ffffff;">
                            <div class="card-body py-1">
                                <div class="row no-gutters align-items-center">
                                    <div class="col mr-2">
                                        <div class="text-xs font-weight-bold text-primary text-uppercase mb-1" style="font-size:0.75rem; letter-spacing:0.5px;">Total Guías</div>
                                        <div class="h4 mb-0 font-weight-bold text-dark">{{ number_format($consolidado['total_guias'], 0) }}</div>
                                    </div>
                                    <div class="col-auto">
                                        <i class="fas fa-shipping-fast fa-2x text-muted" style="opacity: 0.3;"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-3 mb-3">
                        <div class="card shadow-sm py-3" style="border-left: 4px solid #36b9cc; border-radius: 10px; background: #ffffff;">
                            <div class="card-body py-1">
                                <div class="row no-gutters align-items-center">
                                    <div class="col mr-2">
                                        <div class="text-xs font-weight-bold text-info text-uppercase mb-1" style="font-size:0.75rem; letter-spacing:0.5px;">Cajas Totales</div>
                                        <div class="h4 mb-0 font-weight-bold text-dark">{{ number_format($consolidado['total_cajas'], 0) }}</div>
                                    </div>
                                    <div class="col-auto">
                                        <i class="fas fa-box fa-2x text-muted" style="opacity: 0.3;"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-3 mb-3">
                        <div class="card shadow-sm py-3" style="border-left: 4px solid #e74a3b; border-radius: 10px; background: #ffffff;">
                            <div class="card-body py-1">
                                <div class="row no-gutters align-items-center">
                                    <div class="col mr-2">
                                        <div class="text-xs font-weight-bold text-danger text-uppercase mb-1" style="font-size:0.75rem; letter-spacing:0.5px;">Costo Total</div>
                                        <div class="h4 mb-0 font-weight-bold text-dark">${{ number_format($consolidado['total_costo'], 2) }}</div>
                                    </div>
                                    <div class="col-auto">
                                        <i class="fas fa-dollar-sign fa-2x text-muted" style="opacity: 0.3;"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-3 mb-3">
                        <div class="card shadow-sm py-3" style="border-left: 4px solid {{ $consolidado['total_utilidad'] >= 0 ? '#1cc88a' : '#e74a3b' }}; border-radius: 10px; background: #ffffff;">
                            <div class="card-body py-1">
                                <div class="row no-gutters align-items-center">
                                    <div class="col mr-2">
                                        <div class="text-xs font-weight-bold text-uppercase mb-1" style="font-size:0.75rem; letter-spacing:0.5px; color: {{ $consolidado['total_utilidad'] >= 0 ? '#1cc88a' : '#e74a3b' }};">Utilidad Total</div>
                                        <div class="h4 mb-0 font-weight-bold" style="color: {{ $consolidado['total_utilidad'] >= 0 ? '#1cc88a' : '#e74a3b' }};">${{ number_format($consolidado['total_utilidad'], 2) }}</div>
                                    </div>
                                    <div class="col-auto">
                                        <i class="fas fa-hand-holding-usd fa-2x" style="color: {{ $consolidado['total_utilidad'] >= 0 ? '#1cc88a' : '#e74a3b' }}; opacity: 0.3;"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Tabla de Resumen Consolidado -->
                <div class="premium-card p-0" style="overflow: hidden; border-radius: 15px;">
                    <div class="table-responsive">
                        <table class="table table-hover table-premium mb-0">
                            <thead>
                                <tr>
                                    <th class="px-4">Rango de Fechas</th>
                                    <th class="text-center">Cant. Guías</th>
                                    <th class="text-center">Cajas Totales</th>
                                    <th class="text-right">Flete Total</th>
                                    <th class="text-right">Recaudo Total</th>
                                    <th class="text-right">Costo Total</th>
                                    <th class="text-right">CPA Total</th>
                                    <th class="text-right">Comisión Total</th>
                                    <th class="text-right">Utilidad Total</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td class="px-4 font-weight-bold text-nowrap">
                                        {{ date('d/m/Y', strtotime($fi)) }} - {{ date('d/m/Y', strtotime($ff)) }}
                                    </td>
                                    <td class="text-center font-weight-bold text-dark">{{ number_format($consolidado['total_guias'], 0) }}</td>
                                    <td class="text-center font-weight-bold">{{ number_format($consolidado['total_cajas'], 0) }}</td>
                                    <td class="text-right text-muted">${{ number_format($consolidado['total_flete'], 2) }}</td>
                                    <td class="text-right text-success font-weight-bold">${{ number_format($consolidado['total_recaudo'], 2) }}</td>
                                    <td class="text-right text-danger font-weight-bold">${{ number_format($consolidado['total_costo'], 2) }}</td>
                                    <td class="text-right">${{ number_format($consolidado['total_cpa'], 2) }}</td>
                                    <td class="text-right">${{ number_format($consolidado['total_comision'], 2) }}</td>
                                    <td class="text-right font-weight-bold {{ $consolidado['total_utilidad'] >= 0 ? 'text-success' : 'text-danger' }}">
                                        ${{ number_format($consolidado['total_utilidad'], 2) }}
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                @else
                <div class="premium-card text-center p-4 text-muted font-weight-bold">
                    No hay datos consolidados disponibles para el rango de fechas seleccionado.
                </div>
                @endif
            @else
            <div class="premium-card text-center p-4 text-muted font-weight-bold">
                Realice una consulta para visualizar el reporte consolidado.
            </div>
            @endif
        </div>
    </div>
</div>

<!-- Scripts de SheetJS -->
<script src="{{ asset('js/excel.js') }}"></script>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const dropZone = document.getElementById('dropZone');
    const excelFile = document.getElementById('excelFile');
    const previewContainer = document.getElementById('previewContainer');
    const tblPreview = document.getElementById('tblPreview');
    const btnProcesar = document.getElementById('btnProcesar');
    const resultContainer = document.getElementById('resultContainer');
    const resultMsg = document.getElementById('resultMsg');
    const notFoundContainer = document.getElementById('notFoundContainer');
    const lstNotFound = document.getElementById('lstNotFound');

    let excelData = [];

    // Trigger de selección de archivos
    dropZone.addEventListener('click', () => excelFile.click());

    // Dragover & Dragenter
    dropZone.addEventListener('dragover', (e) => {
        e.preventDefault();
        dropZone.classList.add('dragover');
    });

    dropZone.addEventListener('dragleave', () => {
        dropZone.classList.remove('dragover');
    });

    // Drop
    dropZone.addEventListener('drop', (e) => {
        e.preventDefault();
        dropZone.classList.remove('dragover');
        if (e.dataTransfer.files.length > 0) {
            excelFile.files = e.dataTransfer.files;
            handleFile(e.dataTransfer.files[0]);
        }
    });

    // File input change
    excelFile.addEventListener('change', (e) => {
        if (e.target.files.length > 0) {
            handleFile(e.target.files[0]);
        }
    });

    function handleFile(file) {
        const reader = new FileReader();
        reader.onload = function(e) {
            const data = new Uint8Array(e.target.result);
            const workbook = XLSX.read(data, { type: 'array' });
            const sheetName = workbook.SheetNames[0];
            const worksheet = workbook.Sheets[sheetName];
            
            const jsonData = XLSX.utils.sheet_to_json(worksheet);
            if (jsonData.length === 0) {
                alert('El archivo Excel está vacío o no tiene el formato correcto.');
                return;
            }

            // Obtener todas las cabeceras únicas presentes en los datos
            const headers = [];
            jsonData.forEach(row => {
                Object.keys(row).forEach(k => {
                    if (!headers.includes(k)) headers.push(k);
                });
            });

            // Buscar columna guía
            const guiaHeader = headers.find(h => ['GUIA', 'guia', 'Guia', 'guía', 'GUÍA'].includes(h.trim()));
            if (!guiaHeader) {
                alert('El archivo Excel debe contener una columna llamada "GUIA".');
                return;
            }

            // Generar Encabezado de Previsualización
            let htmlHead = '<tr>';
            headers.forEach(h => {
                htmlHead += `<th>${h}</th>`;
            });
            htmlHead += '</tr>';
            tblPreview.querySelector('thead').innerHTML = htmlHead;

            // Generar Filas
            let htmlBody = '';
            jsonData.forEach(row => {
                let htmlRow = '<tr>';
                headers.forEach(h => {
                    const val = row[h] !== undefined ? row[h] : '';
                    htmlRow += `<td>${val}</td>`;
                });
                htmlRow += '</tr>';
                htmlBody += htmlRow;
            });
            tblPreview.querySelector('tbody').innerHTML = htmlBody;

            excelData = jsonData;
            previewContainer.style.display = 'block';
            resultContainer.style.display = 'none';
        };
        reader.readAsArrayBuffer(file);
    }

    // Procesar actualización al servidor
    btnProcesar.addEventListener('click', () => {
        if (excelData.length === 0) return;

        btnProcesar.disabled = true;
        btnProcesar.innerHTML = '<i class="fas fa-spinner fa-spin mr-1"></i> Procesando...';

        fetch("{{ url('/actualizarGuiasExcel') }}", {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            },
            body: JSON.stringify({ archivo: excelData })
        })
        .then(res => res.json())
        .then(res => {
            btnProcesar.disabled = false;
            btnProcesar.innerHTML = '<i class="fas fa-save mr-1"></i> Procesar Actualización';

            resultContainer.style.display = 'block';
            resultMsg.innerText = res.mensaje;
            
            if (res.estado === 'ok') {
                resultContainer.querySelector('.alert').className = 'alert alert-success border-0 shadow-sm';
                
                if (res.no_encontrados && res.no_encontrados.length > 0) {
                    notFoundContainer.style.display = 'block';
                    lstNotFound.innerHTML = res.no_encontrados.map(g => `<span class="badge badge-danger m-1 font-weight-bold" style="font-size:0.8rem;">${g}</span>`).join('');
                } else {
                    notFoundContainer.style.display = 'none';
                }
            } else {
                resultContainer.querySelector('.alert').className = 'alert alert-danger border-0 shadow-sm';
                notFoundContainer.style.display = 'none';
            }
        })
        .catch(err => {
            btnProcesar.disabled = false;
            btnProcesar.innerHTML = '<i class="fas fa-save mr-1"></i> Procesar Actualización';
            alert('Error en la comunicación con el servidor. Por favor, reintente.');
            console.error(err);
        });
    });

    // Control de visualización y envío dinámico de pestañas de reportes
    const filterFormCard = document.getElementById('reportFilterFormCard');
    const activeTabInput = document.getElementById('active_tab_input');

    function updateFormVisibility(targetId) {
        if (targetId === '#importar') {
            filterFormCard.style.display = 'none';
        } else {
            filterFormCard.style.display = 'block';
            if (targetId === '#consolidado') {
                activeTabInput.value = 'consolidado';
            } else {
                activeTabInput.value = 'reporte';
            }
        }
    }

    // Escuchar cambios de pestañas en Bootstrap
    document.querySelectorAll('#guiasTab .nav-link').forEach(link => {
        link.addEventListener('shown.bs.tab', (e) => {
            const target = e.target.getAttribute('data-bs-target') || e.target.getAttribute('href');
            updateFormVisibility(target);
        });
    });

    // Determinar pestaña activa al cargar la página
    const urlParams = new URLSearchParams(window.location.search);
    const activeTab = urlParams.get('active_tab');
    if (activeTab === 'consolidado') {
        const tabEl = document.getElementById('consolidado-tab');
        if (tabEl) {
            const tab = new bootstrap.Tab(tabEl);
            tab.show();
            updateFormVisibility('#consolidado');
        }
    } else if (activeTab === 'reporte') {
        const tabEl = document.getElementById('reporte-tab');
        if (tabEl) {
            const tab = new bootstrap.Tab(tabEl);
            tab.show();
            updateFormVisibility('#reporte');
        }
    } else {
        const activeTabEl = document.querySelector('#guiasTab .nav-link.active');
        if (activeTabEl) {
            const target = activeTabEl.getAttribute('data-bs-target') || activeTabEl.getAttribute('href');
            updateFormVisibility(target);
        }
    }
});
</script>
@endsection