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

@section('contenido')
<div class="container-fluid">
    <div class="d-flex justify-content-between align-items-center mb-3">
        <div class="d-flex align-items-center gap-3">
            <h1 class="mb-0">Sugerido De Compra <span class="badge bg-primary">V2</span></h1>
            <button type="button" class="btn btn-warning fw-bold shadow-sm" data-bs-toggle="modal" data-bs-target="#modalOfertas">
                🎁 Ofertas
            </button>
        </div>
        @include('menu.botonRegresar')
    </div>

    {{-- Librería SweetAlert2 para mensajes --}}
    <!-- <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script> -->

     <script src="{{ asset('js/sweetalert2@11.js') }}"></script>
    
    @if (session('mensaje'))
        <div class="alert alert-success alert-dismissible fade show shadow-sm mb-3" role="alert">
            <i class="fas fa-check-circle me-2"></i> <strong>¡Hecho!</strong> {{ session('mensaje') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
        <script>
            window.onload = function() {
                Swal.fire({
                    icon: 'success',
                    title: '¡Sugerido Guardado!',
                    text: "{{ session('mensaje') }}",
                    confirmButtonColor: '#0d6efd'
                });
            };
        </script>
    @endif

    <div class="card shadow-sm mb-2">
        <div class="card-body py-2">
            <form action="sugeridoV2" method="GET" class="row g-3">
                <!-- Columna Izquierda: Fechas e ID -->
                <div class="col-md-3">
                    <label class="form-label fw-bold">Fecha Pedido</label>
                    <input required type="date" name="idpedido" value="{{$idpedido}}" class="form-control">
                    
                    <div class="row mt-2">
                        <div class="col-6">
                            <label class="form-label small">Análisis Desde</label>
                            <input required type="date" name="fi" id="fecha_inicio" value="{{$fechaI}}" class="form-control form-control-sm">
                        </div>
                        <div class="col-6">
                            <label class="form-label small">Hasta</label>
                            <input required type="date" name="ff" id="fecha_fin" value="{{$fechaF}}" class="form-control form-control-sm">
                        </div>
                    </div>
                </div>

                <!-- Columna Centro: Bodegas (Checkbox List) -->
                <div class="col-md-3">
                    <label class="form-label fw-bold d-flex justify-content-between">
                        Bodegas 
                        <button type="button" class="btn btn-link btn-sm p-0 text-decoration-none" id="btnSelectAll">Seleccionar todas</button>
                    </label>
                    <div class="border rounded p-2 bg-light" style="height: 100px; overflow-y: auto;" id="containerBodegas">
                        @foreach ($bodegas as $b)
                            <div class="form-check">
                                <input class="form-check-input chk-bodega" type="checkbox" name="bodegas[]" value="{{$b->id}}" id="bodega_{{$b->id}}" {{ in_array($b->id, $selectedBodegas) ? 'checked' : '' }}>
                                <label class="form-check-label small" for="bodega_{{$b->id}}">
                                    {{$b->nombreBodega}}
                                </label>
                            </div>
                        @endforeach
                    </div>
                    <div class="form-check mt-2">
                        <input class="form-check-input" type="checkbox" name="consolidado" id="chkConsolidado" {{ isset($consolidado) && $consolidado ? 'checked' : '' }}>
                        <label class="form-check-label small fw-bold text-primary" for="chkConsolidado">
                            Consolidar todas las bodegas en una fila
                        </label>
                    </div>
                </div>

                <!-- Columna Derecha: Filtros y Parámetros -->
                <div class="col-md-4">
                    <div class="row g-2">
                        <div class="col-6">
                            <label class="form-label small fw-bold" title="Filtra por la categoría del producto">Categoría ℹ️</label>
                            <select class="form-select form-select-sm" name="categoria">
                                <option value="Todos">Todos</option>
                                @foreach ($categorias as $item)
                                    <option value="{{$item->codcategoria}}" {{$cate == $item->codcategoria ? 'selected' : ''}}>
                                        {{$item->nomcategoria}}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-6">
                            <label class="form-label small fw-bold" title="Filtra por la marca del producto">Marca ℹ️</label>
                            <select class="form-select form-select-sm" name="marca">
                                <option value="Todos">Todos</option>
                                @foreach ($marcas as $item)
                                    <option value="{{$item->codmarca}}" {{$marc == $item->codmarca ? 'selected' : ''}}>
                                        {{$item->nommarca}}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-3">
                            <label class="form-label small" title="Días de historial para promediar la venta">Rotación 🕒</label>
                            <input required type="number" name="diasRotacion" id="input_rotacion" value="{{$rotaxion}}" class="form-control form-control-sm">
                        </div>
                        <div class="col-3">
                            <label class="form-label small" title="Días que quieres cubrir con el stock">Provisión 📦</label>
                            <input required type="number" name="provision" value="{{$provesion}}" class="form-control form-control-sm">
                        </div>
                        <div class="col-3">
                            <label class="form-label small" title="Días que tarda el proveedor en entregar">Envío 🚚</label>
                            <input type="number" name="diasEnvio" value="{{$diasEnvio ?? 0}}" class="form-control form-control-sm">
                        </div>
                        <div class="col-3">
                            <label class="form-label small" title="Stock extra para emergencias">Seguridad 🛡️</label>
                            <input type="number" name="diasSeguridad" value="{{$stockSeguridad ?? 0}}" class="form-control form-control-sm">
                        </div>
                    </div>
                </div>

                <!-- Botones -->
                <div class="col-md-2 d-grid gap-2 align-self-end">
                    <div class="form-check form-switch mb-1">
                        <input class="form-check-input" type="checkbox" name="soloConSugerido" id="soloSug" {{ $soloConSugerido ? 'checked' : '' }}>
                        <label class="form-check-label small fw-bold" for="soloSug">Ver solo a pedir</label>
                    </div>
                    <div class="form-check form-switch mb-1">
                        <input class="form-check-input" type="checkbox" id="soloOfertas">
                        <label class="form-check-label small fw-bold text-primary" for="soloOfertas">Ver solo ofertas 🎁</label>
                    </div>
                    <button type="submit" name="Generar" value="1" class="btn btn-primary btn-sm">Generar Matriz</button>
                    <div class="btn-group">
                        <button type="button" onclick="preguntarExportar('exportar')" class="btn btn-success btn-sm">Excel</button>
                        <button type="button" onclick="preguntarExportar('txt')" class="btn btn-dark btn-sm">Plano (TXT)</button>
                    </div>
                    <button type="submit" name="grabar" value="1" class="btn btn-info btn-sm">Grabar Todo</button>
                    
                    <!-- Inputs ocultos para controlar la exportación desde el modal -->
                    <input type="hidden" name="exportar_tipo" id="exportar_tipo">
                </div>
            </form>
        </div>
    </div>

    </div>
    
    <!-- MODAL DE PREGUNTA EXPORTAR -->
    <div class="modal fade" id="modalExportar" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header bg-primary text-white">
                    <h5 class="modal-title">Configuración de Exportación</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body text-center py-4">
                    <p class="fw-bold mb-4">¿Cómo desea generar el archivo <span id="textTipoExport"></span>?</p>
                    <div class="d-grid gap-3">
                        <button type="button" onclick="ejecutarExportar(true)" class="btn btn-outline-primary btn-lg">
                            📦 Consolidado (Un solo total global)
                        </button>
                        <button type="button" onclick="ejecutarExportar(false)" class="btn btn-outline-secondary btn-lg">
                            🏢 Por Bodegas (Detalle individual)
                        </button>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancelar</button>
                </div>
            </div>
        </div>
    </div>

    <!-- MODAL DE OFERTAS (CARGA DE EXCEL) -->
    <div class="modal fade" id="modalOfertas" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header bg-warning text-dark">
                    <h5 class="modal-title"><i class="fas fa-gift me-2"></i> Gestión de Ofertas y Promociones</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="alert alert-info small">
                        <i class="fas fa-info-circle me-1"></i> <strong>Instrucciones:</strong> Suba el archivo Excel de ofertas. El sistema buscará el código del producto en la <strong>Columna C</strong> y la descripción de la oferta en la <strong>Columna H</strong>. Las ofertas se guardan solo en este navegador.
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label fw-bold">Seleccionar Archivo Excel (.xlsx, .xls)</label>
                        <input type="file" id="inputExcelOfertas" class="form-control" accept=".xlsx, .xls">
                    </div>

                    <div id="resumenOfertas" class="mt-3 d-none">
                        <p class="fw-bold mb-1">Ofertas Cargadas Actualmente:</p>
                        <div class="table-responsive border rounded" style="max-height: 200px;">
                            <table class="table table-sm table-striped small mb-0" id="tablaOfertasCargadas">
                                <thead class="table-light">
                                    <tr>
                                        <th>Código</th>
                                        <th>Descripción de Oferta</th>
                                    </tr>
                                </thead>
                                <tbody></tbody>
                            </table>
                        </div>
                        <div class="mt-2 text-end">
                            <button type="button" class="btn btn-danger btn-sm" onclick="limpiarOfertasLocal()">
                                <i class="fas fa-trash-alt me-1"></i> Borrar Todas
                            </button>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
                </div>
            </div>
        </div>
    </div>

    @if(session('mensaje'))
        <div class="alert alert-success">{{session('mensaje')}}</div>
    @endif

    @isset($matriz)
    <!-- Panel Resumen de Valorización Total y por Sede (Ultracompacto) -->
    <div class="card shadow-sm mb-2 border-start border-3 border-primary bg-white">
        <div class="card-body py-1 px-3">
            <div class="d-flex flex-wrap align-items-center justify-content-between gap-2">
                <div class="d-flex align-items-center gap-2">
                    <span class="text-uppercase fw-bold text-muted small" style="font-size: 0.72rem;">
                        <i class="fas fa-coins me-1 text-warning"></i> Total Sugerido (Todas las Sedes):
                    </span>
                    <span class="fs-5 fw-bold text-success" id="badge_val_total_general">
                        ${{ number_format($valorizacionTotalGeneral ?? 0, 0, ',', '.') }}
                    </span>
                </div>
                <div class="d-flex flex-wrap gap-1 align-items-center">
                    <span class="fw-bold text-secondary me-1" style="font-size: 0.72rem;">Por Sede:</span>
                    @foreach($bodegasColumnas as $bc)
                        <div class="badge bg-light text-dark border px-2 py-1 text-start">
                            <span class="text-muted fw-normal" style="font-size: 0.65rem;">{{ $bc->nombreBodega }}:</span>
                            <span class="text-primary fw-bold ms-1" style="font-size: 0.78rem;" id="badge_val_bodega_{{ $bc->id }}">
                                ${{ number_format($valorizacionPorBodega[$bc->id] ?? 0, 0, ',', '.') }}
                            </span>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>

    <div class="table-responsive bg-white rounded shadow-sm border" style="max-height: 75vh;">
        <table class="table table-bordered table-sm align-middle m-0" id="tableV2" style="font-size: 0.82rem; border-collapse: separate; border-spacing: 0;">
            <thead>
                <tr class="table-dark text-white">
                    <th class="sticky-header sticky-col-1" style="width: 250px; min-width: 250px; max-width: 250px; z-index: 20;">Producto / Marca</th>
                    <th class="sticky-header sticky-col-2 text-center" style="width: 55px; min-width: 55px; max-width: 55px; z-index: 20; cursor: pointer; padding: 2px;" onclick="ordenarPorRotacion()" title="Rotación Total (Haga clic para ordenar)">
                        Rot.<br>Total <i class="fas fa-sort" style="font-size: 0.65rem;"></i>
                    </th>
                    <th class="sticky-header sticky-col-3 text-center" style="width: 55px; min-width: 55px; max-width: 55px; z-index: 20; padding: 2px;" title="Inventario Total">
                        Inv.<br>Total
                    </th>
                    <th class="sticky-header sticky-col-4 text-center" style="width: 160px; min-width: 160px; max-width: 160px; z-index: 20;" title="Proveedor más económico según los últimos 4 ingresos">
                        Prov. Sugerido 💡
                    </th>
                    @foreach($bodegasColumnas as $index => $bc)
                        <th class="text-center border-start {{ $index % 2 == 0 ? 'bg-warehouse-1-dark' : 'bg-warehouse-2-dark' }} text-white" style="min-width: 180px; position: sticky; top: 0; z-index: 10;">
                            <div class="fw-bold text-uppercase border-bottom mb-1 pb-1" style="font-size: 0.75rem; border-color: rgba(255,255,255,0.2) !important;">{{ $bc->nombreBodega }}</div>
                            <div class="badge bg-warning text-dark mb-1 shadow-sm" id="val_bodega_col_{{ $bc->id }}" style="font-size: 0.65rem;" title="Valorización total calculada para esta bodega">
                                Val: ${{ number_format($valorizacionPorBodega[$bc->id] ?? 0, 0, ',', '.') }}
                            </div>
                            <div class="d-flex justify-content-around fw-normal" style="font-size: 0.6rem; color: rgba(255,255,255,0.8);">
                                <span title="Rotación">ROT</span>
                                <span title="Inventario">INV</span>
                                <span title="Pendiente">PEND</span>
                                <span title="Pedir">PEDIR</span>
                            </div>
                        </th>
                    @endforeach
                    <th class="sticky-header text-center bg-primary text-white" style="position: sticky; right: 0; z-index: 20; min-width: 90px;">Total Sug.</th>
                </tr>
            </thead>
            <tbody>
                @foreach ($matriz as $p)
                <tr>
                    <td class="sticky-col-1" style="width: 250px; min-width: 250px; max-width: 250px;">
                        <div class="d-flex align-items-center">
                            <div class="fw-bold text-truncate product-name-v2 flex-grow-1" style="max-width: 180px;" title="{{$p['nombre']}}">{{$p['nombre']}}</div>
                            <div class="offer-badge-container ms-1"></div>
                        </div>
                        <div class="d-flex justify-content-between text-muted" style="font-size: 0.68rem;">
                            <span>Cod: <code class="text-danger">{{$p['codigo']}}</code></span>
                            <span class="text-uppercase small">{{$p['nommarca']}}</span>
                        </div>
                    </td>
                    <td class="sticky-col-2 text-center fw-bold text-success align-middle" data-rot="{{$p['ventaTotalEmpresa']}}" style="width: 55px; min-width: 55px; max-width: 55px; font-size: 0.8rem; padding: 2px;">
                        {{$p['ventaTotalEmpresa']}}
                    </td>
                    <td class="sticky-col-3 text-center fw-bold text-info align-middle" style="width: 55px; min-width: 55px; max-width: 55px; font-size: 0.8rem; padding: 2px;">
                        {{$p['inventarioTotalEmpresa']}}
                    </td>
                    
                    <td class="sticky-col-4 text-center align-middle p-1" style="width: 160px; min-width: 160px; max-width: 160px;">
                        @if(isset($p['provSugerido']) && $p['provSugerido'] != 'Sin compras')
                            <div class="fw-bold text-truncate text-primary" style="max-width: 150px; font-size: 0.72rem;" title="{{ $p['provSugerido'] }} (NIT: {{ $p['provNit'] }})">
                                {{ $p['provSugerido'] }}
                            </div>
                            <div class="d-flex justify-content-center align-items-center gap-1 mt-1">
                                <span class="badge bg-success" style="font-size: 0.65rem; padding: 2px 4px;">${{ number_format($p['provCosto'], 0, ',', '.') }}</span>
                                @if(!empty($p['provHistorial']))
                                    <button type="button" class="btn btn-xs btn-outline-info p-0 px-1 border-0 fw-bold" 
                                            style="font-size: 0.65rem;"
                                            onclick='verHistorialCompras(@json($p["nombre"]), @json($p["provHistorial"]))'
                                            title="Ver comparativa de los últimos {{ count($p['provHistorial']) }} ingresos">
                                        📊 {{ count($p['provHistorial']) }}
                                    </button>
                                @endif
                            </div>
                        @else
                            <span class="text-muted" style="font-size: 0.7rem;">Sin compras</span>
                        @endif
                    </td>
                    
                    @foreach($bodegasColumnas as $index => $bc)
                        @php 
                            $data = $p['dataBodegas'][$bc->id] ?? ['stock' => 0, 'rotIndividual' => 0, 'pedir' => 0, 'pendiente' => 0]; 
                            $cellClass = ($index % 2 == 0) ? 'bg-warehouse-1' : 'bg-warehouse-2';
                            if ($data['pedir'] > 0) $cellClass = 'table-warning';
                        @endphp
                        <td class="{{ $cellClass }} border-start p-1">
                            <div class="d-flex align-items-center justify-content-around">
                                <span class="badge bg-success" style="font-size: 0.65rem; padding: 2px 4px; min-width: 25px;">{{$data['rotIndividual']}}</span>
                                <span class="badge bg-secondary" style="font-size: 0.65rem; padding: 2px 4px; min-width: 25px;">{{$data['stock']}}</span>
                                <span class="badge bg-info" style="font-size: 0.65rem; padding: 2px 4px; min-width: 25px;">{{$data['pendiente'] ?? 0}}</span>
                                <input type="number" class="form-control form-control-sm text-center fw-bold input-pedir p-0" 
                                       value="{{$data['pedir']}}" 
                                       data-codigo="{{$p['codigo']}}"
                                       data-bodega="{{$bc->id}}"
                                       data-costo="{{$p['costoAplicado'] ?? 0}}"
                                       style="width: 40px; height: 22px; border: 1px solid #0d6efd; font-size: 0.8rem;">
                            </div>
                        </td>
                    @endforeach

                    <td class="text-center fw-bold bg-primary text-white" style="position: sticky; right: 0; z-index: 5;">
                        <span class="fs-6 d-block" id="total_sug_cant_{{ $p['codigo'] }}">{{$p['sugeridoTotalEmpresa']}}</span>
                        <span class="badge bg-light text-dark fw-bold" id="total_sug_val_{{ $p['codigo'] }}" style="font-size: 0.65rem;" title="Subtotal valorizado del producto">
                            ${{ number_format($p['sugeridoTotalEmpresa'] * ($p['costoAplicado'] ?? 0), 0, ',', '.') }}
                        </span>
                    </td>
                </tr>
                @endforeach
            </tbody>
            <tfoot class="table-dark text-white fw-bold">
                <tr>
                    <td colspan="4" class="text-end text-uppercase pe-3 sticky-col-1" style="background-color: #212529 !important; color: #fff !important; font-size: 0.8rem;">
                        💰 Valorización Total
                    </td>
                    @foreach($bodegasColumnas as $bc)
                        <td class="text-center bg-dark text-warning border-start" style="font-size: 0.78rem;" id="foot_val_bodega_{{ $bc->id }}">
                            ${{ number_format($valorizacionPorBodega[$bc->id] ?? 0, 0, ',', '.') }}
                        </td>
                    @endforeach
                    <td class="text-center bg-success text-white" style="position: sticky; right: 0; z-index: 5; font-size: 0.82rem;" id="foot_val_total_general">
                        ${{ number_format($valorizacionTotalGeneral ?? 0, 0, ',', '.') }}
                    </td>
                </tr>
            </tfoot>
        </table>
    </div>
    @endisset
</div>

<style>
    .input-pedir:focus { background-color: #fff9c4; outline: none; box-shadow: 0 0 5px #0d6efd; }
    .table-responsive {
        max-height: 700px;
        overflow: auto;
    }

    /* Columnas Inmovilizadas */
    .sticky-header {
        position: sticky;
        top: 0;
        z-index: 10;
        background-color: #212529 !important;
    }

    .sticky-col-1 {
        position: sticky;
        left: 0;
        z-index: 5;
        background-color: white !important;
        width: 250px;
        min-width: 250px;
        max-width: 250px;
        border-right: 1px solid #dee2e6 !important;
    }

    .sticky-col-2 {
        position: sticky;
        left: 250px;
        z-index: 5;
        background-color: white !important;
        width: 55px;
        min-width: 55px;
        max-width: 55px;
        border-right: 1px solid #dee2e6 !important;
    }

    .sticky-col-3 {
        position: sticky;
        left: 305px;
        z-index: 5;
        background-color: white !important;
        width: 55px;
        min-width: 55px;
        max-width: 55px;
        border-right: 1px solid #dee2e6 !important;
    }

    .sticky-col-4 {
        position: sticky;
        left: 360px;
        z-index: 5;
        background-color: white !important;
        width: 160px;
        min-width: 160px;
        max-width: 160px;
        border-right: 3px solid #dee2e6 !important;
        box-shadow: 5px 0 5px -5px rgba(0,0,0,0.2);
    }

    /* Ajuste para encabezados inmovilizados */
    th.sticky-col-1, th.sticky-col-2, th.sticky-col-3, th.sticky-col-4 {
        z-index: 15;
        background-color: #212529 !important;
        border-bottom: 2px solid #444 !important;
        border-right: 1px solid #444 !important;
    }

    [data-theme='dark'] .sticky-col-1, 
    [data-theme='dark'] .sticky-col-2, 
    [data-theme='dark'] .sticky-col-3,
    [data-theme='dark'] .sticky-col-4 {
        background-color: #1a1d21 !important;
        border-right-color: #373b3e !important;
    }

    #tableV2 td, #tableV2 th {
        border: 1px solid #dee2e6 !important;
    }

    #tableV2 thead th {
        border: 1px solid #444 !important;
        vertical-align: middle;
    }

    #tableV2 tbody tr:hover td {
        background-color: #f2f7fe !important;
    }

    [data-theme='dark'] #tableV2 tbody tr:hover td {
        background-color: #1e2634 !important;
    }

    .warehouse-sep { border-left: 2px solid #444 !important; }
    .bg-warehouse-1 { background-color: #f8f9fa; }
    .bg-warehouse-2 { background-color: #e9ecef; }
    .bg-warehouse-1-dark { background-color: #343a40 !important; border-left: 2px solid #555 !important; }
    .bg-warehouse-2-dark { background-color: #2c3136 !important; border-left: 2px solid #555 !important; }
</style>

<!-- Librería para leer Excel en el navegador -->
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script> -->
 <script src="{{ asset('js/xlsx.full.min.js') }}"></script>

<script>
    // Botón Seleccionar Todas
    document.getElementById('btnSelectAll').addEventListener('click', function() {
        const checkboxes = document.querySelectorAll('.chk-bodega');
        const allChecked = Array.from(checkboxes).every(c => c.checked);
        checkboxes.forEach(c => c.checked = !allChecked);
        this.innerText = allChecked ? 'Seleccionar todas' : 'Desmarcar todas';
    });

    // Lógica para el Modal de Exportación
    function preguntarExportar(tipo) {
        document.getElementById('exportar_tipo').value = tipo;
        document.getElementById('textTipoExport').innerText = (tipo === 'exportar' ? 'Excel' : 'Plano (TXT)');
        var modalEl = document.getElementById('modalExportar');
        var myModal = new bootstrap.Modal(modalEl);
        myModal.show();
    }

    function ejecutarExportar(consolidado) {
        const tipo = document.getElementById('exportar_tipo').value;
        
        // Sincronizar el checkbox principal con la elección del modal
        document.getElementById('chkConsolidado').checked = consolidado;
        
        if (tipo === 'txt') {
            // EXPORTACIÓN TXT DIRECTA DESDE EL NAVEGADOR (Evita el ZIP y descarga archivos planos normales)
            exportarTxtCliente(consolidado);
            
            // Cerrar el modal
            const modalEl = document.getElementById('modalExportar');
            const myModal = bootstrap.Modal.getInstance(modalEl);
            if (myModal) myModal.hide();
            return;
        }

        // Si es Excel, mantenemos la lógica del servidor
        const form = document.querySelector('form');
        const inputAccion = document.createElement('input');
        inputAccion.type = 'hidden';
        inputAccion.name = tipo;
        inputAccion.value = '1';
        form.appendChild(inputAccion);
        
        form.submit();
        
        // Limpiar para evitar duplicados si se vuelve a usar
        setTimeout(() => { inputAccion.remove(); }, 500);
    }

    function exportarTxtCliente(consolidado) {
        const matriz = @json($matriz ?? []);
        const bodegas = @json($bodegasColumnas ?? []);
        
        if (!matriz || Object.keys(matriz).length === 0) {
            Swal.fire({
                icon: 'warning',
                title: 'Sin datos',
                text: 'No hay productos en la matriz para exportar.',
                confirmButtonColor: '#0d6efd'
            });
            return;
        }

        if (consolidado) {
            // GENERAR UN SOLO TXT CONSOLIDADO
            let fileContent = "";
            Object.values(matriz).forEach(p => {
                let totalSugerido = 0;
                bodegas.forEach(b => {
                    const input = document.querySelector(`input[data-codigo="${p.codigo}"][data-bodega="${b.id}"]`);
                    if (input) {
                        totalSugerido += parseInt(input.value) || 0;
                    }
                });
                
                if (totalSugerido > 0) {
                    fileContent += `12345\t${p.codigo}\t${p.nombre}\t${totalSugerido}\r\n`;
                }
            });

            if (fileContent.length > 0) {
                descargarArchivoTxt("sugerido_consolidado.txt", fileContent);
            } else {
                Swal.fire('Atención', 'No hay sugerencias mayores a 0 para exportar.', 'info');
            }
        } else {
            // GENERAR UN TXT POR CADA BODEGA INDIVIDUAL
            let archivosGenerados = 0;
            bodegas.forEach(b => {
                let fileContent = "";
                Object.values(matriz).forEach(p => {
                    const input = document.querySelector(`input[data-codigo="${p.codigo}"][data-bodega="${b.id}"]`);
                    const pedir = input ? (parseInt(input.value) || 0) : 0;
                    
                    if (pedir > 0) {
                        fileContent += `${b.id}\t${p.codigo}\t${p.nombre}\t${pedir}\r\n`;
                    }
                });

                if (fileContent.length > 0) {
                    const safeName = b.nombreBodega.toUpperCase().replace(/[^A-Z0-9]/g, '_');
                    const fileName = `BOD_${b.id}_${safeName}.txt`;
                    descargarArchivoTxt(fileName, fileContent);
                    archivosGenerados++;
                }
            });

            if (archivosGenerados === 0) {
                Swal.fire('Atención', 'No hay sugerencias mayores a 0 en ninguna bodega para exportar.', 'info');
            }
        }
    }

    function descargarArchivoTxt(nombreArchivo, contenido) {
        const blob = new Blob([contenido], { type: 'text/plain;charset=utf-8' });
        const link = document.createElement("a");
        link.href = URL.createObjectURL(blob);
        link.download = nombreArchivo;
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
        URL.revokeObjectURL(link.href);
    }

    // Cálculo automático de días de rotación
    function calcularDiasRotacion() {
        const fi = document.getElementById('fecha_inicio').value;
        const ff = document.getElementById('fecha_fin').value;
        
        if (fi && ff) {
            const start = new Date(fi);
            const end = new Date(ff);
            
            // Calculamos la diferencia en milisegundos y convertimos a días
            const diffTime = end - start;
            if (diffTime >= 0) {
                const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24)) + 1;
                document.getElementById('input_rotacion').value = diffDays;
            }
        }
    }

    document.getElementById('fecha_inicio').addEventListener('change', calcularDiasRotacion);
    document.getElementById('fecha_fin').addEventListener('change', calcularDiasRotacion);

    document.querySelectorAll('.input-pedir').forEach(input => {
        input.addEventListener('change', function() {
            const codigo = this.dataset.codigo;
            const bodega = this.dataset.bodega;
            const cantidad = this.value;
            const originalColor = this.style.borderColor;
            
            this.style.borderColor = "#ffc107"; // Amarillo: Procesando

            fetch('modificarPedirV2', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                body: JSON.stringify({
                    codigo: codigo,
                    bodega: bodega,
                    cantidad: cantidad
                })
            })
            .then(response => response.text())
            .then(data => {
                if(data.trim() === 'ok') {
                    this.style.borderColor = "#198754"; // Verde: Éxito
                    setTimeout(() => { this.style.borderColor = originalColor; }, 2000);
                } else {
                    this.style.borderColor = "#dc3545"; // Rojo: Error
                    alert("No se pudo actualizar la cantidad. Intente de nuevo.");
                }
            })
            .catch(error => {
                console.error('Error:', error);
                this.style.borderColor = "#dc3545";
            });
        });
    });

    // --- LÓGICA DE OFERTAS (LOCALSTORAGE) ---
    const STORAGE_KEY = 'ofertas_v2_data'; // Cambiamos la llave para forzar limpieza

    // Cargar ofertas al abrir el modal o la página
    function cargarOfertasDesdeStorage() {
        const rawData = localStorage.getItem(STORAGE_KEY);
        if (!rawData) {
            document.getElementById('resumenOfertas')?.classList.add('d-none');
            return;
        }

        const ofertas = JSON.parse(rawData);
        const tbody = document.querySelector('#tablaOfertasCargadas tbody');
        const resumen = document.getElementById('resumenOfertas');
        
        if (!tbody) return; 
        
        tbody.innerHTML = '';
        const keys = Object.keys(ofertas);
        
        if (keys.length > 0) {
            resumen.classList.remove('d-none');
            keys.forEach(cod => {
                const tr = document.createElement('tr');
                const data = ofertas[cod];
                const msg = typeof data === 'string' ? data : data.mensaje;
                tr.innerHTML = `<td>${cod}</td><td>${msg}</td>`;
                tbody.appendChild(tr);
            });
            aplicarIconosOfertas();
        } else {
            resumen.classList.add('d-none');
        }
    }

    function limpiarOfertasLocal() {
        Swal.fire({
            title: '¿Borrar todas?',
            text: "Se eliminarán todas las ofertas cargadas.",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#d33',
            confirmButtonText: 'Sí, borrar'
        }).then((result) => {
            if (result.isConfirmed) {
                localStorage.removeItem(STORAGE_KEY);
                // Limpiar visualmente sin recargar
                document.querySelectorAll('.offer-label').forEach(el => el.remove());
                document.querySelectorAll('.product-name-v2').forEach(el => el.style.color = '');
                cargarOfertasDesdeStorage();
                Swal.fire('¡Borrado!', 'Las ofertas han sido eliminadas.', 'success');
            }
        });
    }

    // Procesar el Excel al seleccionarlo
    document.getElementById('inputExcelOfertas').addEventListener('change', function(e) {
        const file = e.target.files[0];
        if (!file) return;

        const reader = new FileReader();
        reader.onload = function(e) {
            const data = new Uint8Array(e.target.result);
            const workbook = XLSX.read(data, { type: 'array' });
            const firstSheet = workbook.Sheets[workbook.SheetNames[0]];
            const jsonData = XLSX.utils.sheet_to_json(firstSheet, { header: 1 });

            let nuevasOfertas = {};
            jsonData.forEach((row, index) => {
                if (index > 0 && row[2]) {
                    const codigo = String(row[2]).trim();
                    const cCompra = row[4] || 1;
                    const cRegalo = row[5] || 1;
                    const detalle = row[7] ? String(row[7]).trim() : 'Obsequio';
                    const msg = `Por la compra de ${cCompra} recibe ${cRegalo}: ${detalle}`;

                    nuevasOfertas[codigo] = {
                        mensaje: msg,
                        cantCompra: cCompra,
                        cantRegalo: cRegalo,
                        detalle: detalle
                    };
                }
            });

            if (Object.keys(nuevasOfertas).length > 0) {
                localStorage.setItem(STORAGE_KEY, JSON.stringify(nuevasOfertas));
                
                // Actualizar visualmente en caliente
                aplicarIconosOfertas();
                cargarOfertasDesdeStorage();

                Swal.fire({
                    icon: 'success',
                    title: '¡Actualizado!',
                    text: `Se cargaron ${Object.keys(nuevasOfertas).length} promociones sin recargar la página.`,
                    timer: 2000,
                    showConfirmButton: false
                });
            } else {
                Swal.fire('Error', 'Archivo no válido.', 'error');
            }
        };
        reader.readAsArrayBuffer(file);
    });

    function aplicarIconosOfertas() {
        const rawData = localStorage.getItem(STORAGE_KEY);
        
        // Primero limpiamos lo que ya exista para no duplicar etiquetas
        document.querySelectorAll('.offer-label').forEach(el => el.remove());
        document.querySelectorAll('.product-name-v2').forEach(el => el.style.color = '');

        if (!rawData) return;
        
        const ofertas = JSON.parse(rawData);
        document.querySelectorAll('#tableV2 tbody tr').forEach(tr => {
            const codigoCell = tr.querySelector('.text-danger');
            if (!codigoCell) return;
            
            const codigo = codigoCell.innerText.trim();
            if (ofertas[codigo]) {
                const badgeContainer = tr.querySelector('.offer-badge-container');
                const nombreDiv = tr.querySelector('.product-name-v2');
                
                if (badgeContainer) {
                    const data = ofertas[codigo];
                    const textoExponer = typeof data === 'string' ? data : data.mensaje;
                    
                    const label = document.createElement('span');
                    label.className = 'offer-label badge rounded-pill border border-dark';
                    label.innerHTML = '<i class="fas fa-gift"></i> OFERTA';
                    label.style.backgroundColor = '#ffc107';
                    label.style.color = '#000';
                    label.style.fontSize = '0.65rem';
                    label.style.cursor = 'pointer';
                    label.style.padding = '3px 8px';
                    label.style.boxShadow = '0 2px 4px rgba(0,0,0,0.2)';
                    label.title = "Ver: " + textoExponer;
                    
                    label.onclick = function(e) {
                        e.preventDefault();
                        e.stopPropagation();
                        Swal.fire({
                            title: '🎁 Promoción Detallada',
                            html: `<div class="alert alert-warning border-dark fw-bold fs-4">${textoExponer}</div>`,
                            icon: 'info',
                            confirmButtonColor: '#ffc107',
                            confirmButtonText: '<span style="color:#000">Entendido</span>'
                        });
                    };
                    
                    badgeContainer.appendChild(label);
                    if (nombreDiv) nombreDiv.style.color = '#d63384'; 
                }
            }
        });
    }

    document.addEventListener('DOMContentLoaded', function() {
        cargarOfertasDesdeStorage();
        aplicarIconosOfertas(); // Asegurar carga inicial
    });

    // Filtro de Solo Ofertas (Real-time)
    document.getElementById('soloOfertas').addEventListener('change', function() {
        const soloOfertas = this.checked;
        const rows = document.querySelectorAll('#tableV2 tbody tr');
        
        rows.forEach(row => {
            const hasOffer = row.querySelector('.offer-label') !== null;
            if (soloOfertas) {
                row.style.display = hasOffer ? '' : 'none';
            } else {
                row.style.display = '';
            }
        });
    });

    // Ordenamiento por Rotación (Real-time)
    let ordenAsc = false;
    function ordenarPorRotacion() {
        const tbody = document.querySelector('#tableV2 tbody');
        const rows = Array.from(tbody.querySelectorAll('tr'));
        
        rows.sort((a, b) => {
            const valA = parseFloat(a.querySelector('[data-rot]').getAttribute('data-rot')) || 0;
            const valB = parseFloat(b.querySelector('[data-rot]').getAttribute('data-rot')) || 0;
            return ordenAsc ? valA - valB : valB - valA;
        });
        
        // Limpiar y reinsertar
        rows.forEach(row => tbody.appendChild(row));
        ordenAsc = !ordenAsc; // Alternar orden

        // Notificación visual en el icono
        const icon = document.querySelector('th.sticky-col-2 i');
        if (icon) {
            icon.className = ordenAsc ? 'fas fa-sort-up ms-1 text-warning' : 'fas fa-sort-down ms-1 text-warning';
        }
    }

    // Modal para visualizar la comparativa de los últimos 4 ingresos
    function verHistorialCompras(nombreProducto, historial) {
        if (!historial || historial.length === 0) {
            Swal.fire('Sin compras', 'No se encontraron registros de compra recientes para este producto.', 'info');
            return;
        }

        const minCosto = Math.min(...historial.map(h => parseFloat(h.costo) || 0));

        let rowsHtml = '';
        historial.forEach((h, index) => {
            const costoVal = parseFloat(h.costo) || 0;
            const esMejor = costoVal === minCosto && minCosto > 0;
            const badgeMejor = esMejor ? '<span class="badge bg-success ms-1">¡Más Económico!</span>' : '';
            const rowClass = esMejor ? 'table-success fw-bold' : '';

            rowsHtml += `
                <tr class="${rowClass}">
                    <td>${index + 1}</td>
                    <td>${h.fecha || 'N/A'}</td>
                    <td class="text-start">
                        <strong>${h.nombre}</strong>
                        <br><small class="text-muted">NIT: ${h.provedor}</small>
                    </td>
                    <td class="text-end fw-bold text-success">
                        $${costoVal.toLocaleString('es-CO')}
                        ${badgeMejor}
                    </td>
                </tr>
            `;
        });

        const tableHtml = `
            <div class="alert alert-info py-2 small mb-3 text-start">
                <i class="fas fa-info-circle me-1"></i> Analizando los <strong>últimos ${historial.length} ingresos más recientes</strong> en la tabla de compras. Se resalta en verde el proveedor con el precio más económico.
            </div>
            <div class="table-responsive">
                <table class="table table-sm table-bordered align-middle text-center small mb-0">
                    <thead class="table-dark">
                        <tr>
                            <th>#</th>
                            <th>Fecha</th>
                            <th class="text-start">Proveedor</th>
                            <th class="text-end">Costo Caja</th>
                        </tr>
                    </thead>
                    <tbody>
                        ${rowsHtml}
                    </tbody>
                </table>
            </div>
        `;

        Swal.fire({
            title: `📊 Comparativa de Compras`,
            html: `<div class="fw-bold text-primary mb-2">${nombreProducto}</div>` + tableHtml,
            width: '600px',
            confirmButtonColor: '#0d6efd',
            confirmButtonText: 'Entendido'
        });
    }

    // Recalcular valorización en vivo al modificar inputs
    function recalcularValorizacionEnVivo() {
        let totalGeneral = 0;
        const bodegaTotals = {};
        const productTotals = {};
        const productValuations = {};

        document.querySelectorAll('.input-pedir').forEach(input => {
            const cant = parseFloat(input.value) || 0;
            const costo = parseFloat(input.dataset.costo) || 0;
            const bodId = input.dataset.bodega;
            const codigo = input.dataset.codigo;

            const subtotal = cant * costo;

            if (!bodegaTotals[bodId]) bodegaTotals[bodId] = 0;
            bodegaTotals[bodId] += subtotal;
            totalGeneral += subtotal;

            if (!productTotals[codigo]) productTotals[codigo] = 0;
            productTotals[codigo] += cant;

            if (!productValuations[codigo]) productValuations[codigo] = 0;
            productValuations[codigo] += subtotal;
        });

        const formatter = new Intl.NumberFormat('es-CO', { style: 'currency', currency: 'COP', maximumFractionDigits: 0 });

        // Actualizar Badges y Encabezados por Bodega
        Object.keys(bodegaTotals).forEach(bodId => {
            const formatted = formatter.format(bodegaTotals[bodId]);
            const badgeEl = document.getElementById('badge_val_bodega_' + bodId);
            const colHeaderEl = document.getElementById('val_bodega_col_' + bodId);
            const footEl = document.getElementById('foot_val_bodega_' + bodId);

            if (badgeEl) badgeEl.innerText = formatted;
            if (colHeaderEl) colHeaderEl.innerText = 'Val: ' + formatted;
            if (footEl) footEl.innerText = formatted;
        });

        // Actualizar Total General
        const formattedGeneral = formatter.format(totalGeneral);
        const badgeGen = document.getElementById('badge_val_total_general');
        const footGen = document.getElementById('foot_val_total_general');
        if (badgeGen) badgeGen.innerText = formattedGeneral;
        if (footGen) footGen.innerText = formattedGeneral;

        // Actualizar Totales por Producto
        Object.keys(productTotals).forEach(codigo => {
            const cantEl = document.getElementById('total_sug_cant_' + codigo);
            const valEl = document.getElementById('total_sug_val_' + codigo);
            if (cantEl) cantEl.innerText = productTotals[codigo];
            if (valEl) valEl.innerText = formatter.format(productValuations[codigo]);
        });
    }

    document.addEventListener('input', function(e) {
        if (e.target && e.target.classList.contains('input-pedir')) {
            recalcularValorizacionEnVivo();
        }
    });
</script>
@endsection