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

@section('contenido')
<style>
    /* Estilos Dashboard Moderno */
    .dashboard-header {
        background: linear-gradient(135deg, #0f172a 0%, #1e3c72 60%, #2a5298 100%);
        color: white;
        padding: 22px 26px;
        border-radius: 16px;
        box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18);
        margin-bottom: 22px;
    }

    .filter-card {
        background: #ffffff;
        border-radius: 14px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
        padding: 22px 25px;
        margin-bottom: 22px;
        border-top: 4px solid #2a5298;
    }

    .modo-selector-btn {
        cursor: pointer;
        font-weight: 700;
        font-size: 0.88rem;
        padding: 8px 18px;
        border-radius: 10px;
        transition: all 0.25s ease;
        border: 2px solid transparent;
    }

    .modo-selector-btn.active {
        background-color: #1e3c72 !important;
        color: #ffffff !important;
        box-shadow: 0 4px 12px rgba(30, 60, 114, 0.3);
    }

    .kpi-card {
        border-radius: 14px;
        padding: 20px 22px;
        color: white;
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
        transition: transform 0.25s ease, box-shadow 0.25s ease;
        position: relative;
        overflow: hidden;
        margin-bottom: 20px;
        min-height: 140px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .kpi-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.16);
    }

    .kpi-icon {
        position: absolute;
        right: 18px;
        top: 18px;
        font-size: 2.8rem;
        opacity: 0.22;
        pointer-events: none;
    }

    .kpi-ventas     { background: linear-gradient(135deg, #10b981 0%, #059669 100%); }
    .kpi-costo      { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); }
    .kpi-utilidad   { background: linear-gradient(135deg, #06b6d4 0%, #0284c7 100%); }
    .kpi-categoria  { background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%); }
    .kpi-marca      { background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%); }
    .kpi-volumen    { background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%); }

    .chart-container-box {
        background: #ffffff;
        border-radius: 14px;
        padding: 22px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
        margin-bottom: 22px;
        border: 1px solid #f1f5f9;
        transition: all 0.3s ease;
    }

    /* Pestañas estilizadas con cursor pointer garantizado */
    .custom-tabs .nav-item {
        margin-bottom: -2px;
    }

    .custom-tabs .nav-link {
        cursor: pointer !important;
        font-weight: 700;
        color: #64748b;
        border: none;
        border-bottom: 3px solid transparent;
        padding: 14px 22px;
        font-size: 0.94rem;
        transition: all 0.2s ease;
        border-radius: 0;
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }

    .custom-tabs .nav-link:hover {
        color: #1e3c72;
        background-color: rgba(30, 60, 114, 0.04);
    }

    .custom-tabs .nav-link.active {
        color: #1e3c72 !important;
        border-bottom: 3.5px solid #1e3c72 !important;
        background: transparent !important;
    }

    .btn-quick-date {
        padding: 4px 11px;
        font-size: 0.78rem;
        border-radius: 8px;
        font-weight: 600;
        margin-right: 4px;
        margin-bottom: 4px;
        transition: all 0.2s;
    }

    .table thead th {
        font-weight: 700;
        font-size: 0.80rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        border: none;
        vertical-align: middle;
    }

    .table td {
        font-size: 0.88rem;
        vertical-align: middle;
    }

    .badge-rentable-alta {
        background-color: #d1fae5;
        color: #065f46;
        font-weight: 700;
        padding: 4px 8px;
        border-radius: 6px;
    }

    .badge-rentable-media {
        background-color: #e0f2fe;
        color: #0369a1;
        font-weight: 700;
        padding: 4px 8px;
        border-radius: 6px;
    }

    .badge-rentable-baja {
        background-color: #fef3c7;
        color: #92400e;
        font-weight: 700;
        padding: 4px 8px;
        border-radius: 6px;
    }

    .badge-rentable-negativa {
        background-color: #fee2e2;
        color: #991b1b;
        font-weight: 700;
        padding: 4px 8px;
        border-radius: 6px;
    }

    .mini-progress {
        height: 6px;
        border-radius: 3px;
        background-color: #e2e8f0;
        overflow: hidden;
        margin-top: 4px;
    }

    .mini-progress-bar {
        height: 100%;
        background: linear-gradient(90deg, #3b82f6, #10b981);
        border-radius: 3px;
    }

    .search-box-wrap {
        position: relative;
    }

    .search-box-wrap .search-icon {
        position: absolute;
        left: 12px;
        top: 50%;
        transform: translateY(-50%);
        color: #94a3b8;
    }

    .search-box-wrap input {
        padding-left: 36px;
        border-radius: 20px;
    }

    /* Soporte Modo Oscuro */
    [data-theme='dark'] .filter-card,
    [data-theme='dark'] .chart-container-box,
    [data-theme='dark'] .card {
        background-color: var(--card-bg) !important;
        border-color: var(--border-color) !important;
        color: var(--text-dark) !important;
    }

    [data-theme='dark'] .custom-tabs .nav-link {
        color: #94a3b8;
    }

    [data-theme='dark'] .custom-tabs .nav-link.active {
        color: #38bdf8 !important;
        border-bottom-color: #38bdf8 !important;
    }

    [data-theme='dark'] .table thead th {
        background-color: #1e293b !important;
        color: #f1f5f9 !important;
    }

    [data-theme='dark'] .table tfoot {
        background-color: #1e293b !important;
        color: #f1f5f9 !important;
    }
</style>

<div class="container-fluid py-3">
    <!-- Header del Módulo -->
    <div class="dashboard-header d-flex justify-content-between align-items-center flex-wrap" style="gap: 15px;">
        <div class="d-flex align-items-center" style="gap: 14px;">
            <div style="font-size: 2.4rem; line-height: 1;">🏷️</div>
            <div>
                <h3 class="m-0 font-weight-bold">Tablero Inteligente: Ventas por Marca y Categoría</h3>
                <p class="m-0 opacity-75 small">Análisis comparativo de facturación neta, costos, márgenes de ganancia y rotación comercial</p>
            </div>
        </div>
        <div class="d-flex align-items-center flex-wrap" style="gap: 10px;">
            <button type="button" class="btn btn-success rounded-pill px-3 font-weight-bold shadow-sm" data-toggle="modal" data-target="#modalImportarMarcaCategoria" data-bs-toggle="modal" data-bs-target="#modalImportarMarcaCategoria">
                <i class="fa fa-file-excel-o mr-1"></i> Importar Excel
            </button>
            <button type="button" class="btn btn-warning text-dark rounded-pill px-3 font-weight-bold shadow-sm" id="btnExportarExcel">
                <i class="fa fa-download mr-1"></i> Exportar Informe
            </button>
            <a href="{{ url('/inicio') }}" class="btn btn-outline-light rounded-pill px-3 font-weight-bold">
                <i class="fa fa-arrow-left mr-1"></i> Menú Principal
            </a>
        </div>
    </div>

    <!-- Barra de Filtros Inteligentes -->
    <div class="filter-card">
        <!-- Selector Rápido de Modo de Vista (Ambas, Solo Categorías, Solo Marcas) -->
        <div class="d-flex justify-content-between align-items-center flex-wrap pb-3 mb-3 border-bottom" style="gap: 10px;">
            <div class="d-flex align-items-center" style="gap: 10px;">
                <span class="font-weight-bold text-dark small text-uppercase">
                    <i class="fa fa-sliders text-primary mr-1"></i> Vista de Análisis:
                </span>
                <div class="btn-group shadow-sm" role="group" id="groupModoVista">
                    <button type="button" class="btn btn-sm btn-outline-primary modo-selector-btn active" data-modo="ambas">
                        ⚖️ Ambas (Comparativo)
                    </button>
                    <button type="button" class="btn btn-sm btn-outline-primary modo-selector-btn" data-modo="categorias">
                        📁 Solo Categorías
                    </button>
                    <button type="button" class="btn btn-sm btn-outline-primary modo-selector-btn" data-modo="marcas">
                        🏷️ Solo Marcas
                    </button>
                </div>
            </div>
            <div class="text-muted small font-weight-bold" id="labelModoExplicativo">
                Mostrando comparativo combinado de Categorías y Marcas
            </div>
        </div>

        <form id="formFiltros" class="row align-items-end">
            <input type="hidden" id="modoVista" name="modoVista" value="{{ $modoVista ?? 'ambas' }}">

            <!-- Rango de Fechas -->
            <div class="col-xl-2 col-md-4 col-sm-6 mb-3">
                <label class="font-weight-bold text-dark small mb-1"><i class="fa fa-calendar text-primary mr-1"></i> Fecha Inicial:</label>
                <input type="date" id="fi" name="fi" class="form-control form-control-sm font-weight-bold" value="{{ $fi }}">
            </div>
            <div class="col-xl-2 col-md-4 col-sm-6 mb-3">
                <label class="font-weight-bold text-dark small mb-1"><i class="fa fa-calendar text-primary mr-1"></i> Fecha Final:</label>
                <input type="date" id="ff" name="ff" class="form-control form-control-sm font-weight-bold" value="{{ $ff }}">
            </div>

            <!-- Selector de Bodega -->
            <div class="col-xl-2 col-md-4 col-sm-6 mb-3">
                <label class="font-weight-bold text-dark small mb-1"><i class="fa fa-building text-info mr-1"></i> Bodega / Sucursal:</label>
                <select id="bodega" name="bodega" class="form-control form-control-sm font-weight-bold">
                    <option value="0" {{ $bodegaActual == '0' ? 'selected' : '' }}>🏢 Todas las Bodegas</option>
                    @foreach($bodegas as $b)
                        <option value="{{ $b->id }}" {{ $bodegaActual == $b->id ? 'selected' : '' }}>{{ $b->nombre }}</option>
                    @endforeach
                </select>
            </div>

            <!-- Selector de Categoría -->
            <div class="col-xl-2 col-md-4 col-sm-6 mb-3" id="colFiltroCat">
                <label class="font-weight-bold text-dark small mb-1"><i class="fa fa-folder-open text-warning mr-1"></i> Filtrar Categoría:</label>
                <select id="categoriaFiltro" name="categoria" class="form-control form-control-sm font-weight-bold">
                    <option value="Todos" {{ $cate == 'Todos' ? 'selected' : '' }}>📁 Todas las Categorías</option>
                    @foreach($categorias as $cat)
                        <option value="{{ $cat->codcategoria }}" {{ $cate == $cat->codcategoria ? 'selected' : '' }}>{{ $cat->nomcategoria }}</option>
                    @endforeach
                </select>
            </div>

            <!-- Selector de Marca -->
            <div class="col-xl-2 col-md-4 col-sm-6 mb-3" id="colFiltroMar">
                <label class="font-weight-bold text-dark small mb-1"><i class="fa fa-tags text-success mr-1"></i> Filtrar Marca:</label>
                <select id="marcaFiltro" name="marca" class="form-control form-control-sm font-weight-bold">
                    <option value="Todos" {{ $marc == 'Todos' ? 'selected' : '' }}>🏷️ Todas las Marcas</option>
                    @foreach($marcas as $m)
                        <option value="{{ $m->codmarca }}" {{ $marc == $m->codmarca ? 'selected' : '' }}>{{ $m->nommarca }}</option>
                    @endforeach
                </select>
            </div>

            <!-- Botón Consultar -->
            <div class="col-xl-2 col-md-4 col-sm-12 mb-3 d-flex" style="gap: 8px;">
                <button type="submit" class="btn btn-primary btn-sm rounded-pill font-weight-bold w-100 shadow-sm" id="btnConsultar">
                    <i class="fa fa-refresh mr-1"></i> Consultar
                </button>
            </div>

            <!-- Atajos Rápidos de Fechas -->
            <div class="col-12 mt-1 d-flex align-items-center flex-wrap">
                <span class="small font-weight-bold text-muted mr-2">Atajos de fecha:</span>
                <button type="button" class="btn btn-sm btn-outline-secondary btn-quick-date" data-range="hoy">Hoy</button>
                <button type="button" class="btn btn-sm btn-outline-secondary btn-quick-date" data-range="ayer">Ayer</button>
                <button type="button" class="btn btn-sm btn-outline-secondary btn-quick-date" data-range="esta_semana">Esta Semana</button>
                <button type="button" class="btn btn-sm btn-outline-secondary btn-quick-date active-date" data-range="este_mes">Este Mes</button>
                <button type="button" class="btn btn-sm btn-outline-secondary btn-quick-date" data-range="mes_anterior">Mes Anterior</button>
                <button type="button" class="btn btn-sm btn-outline-secondary btn-quick-date" data-range="este_ano">Año Actual</button>
            </div>
        </form>
    </div>

    <!-- Indicador de Carga -->
    <div id="loadingIndicator" class="text-center py-5 d-none">
        <div class="spinner-border text-primary" style="width: 3.5rem; height: 3.5rem;" role="status">
            <span class="sr-only">Cargando...</span>
        </div>
        <h5 class="mt-3 font-weight-bold text-muted">Consolidando ventas, márgenes y comparativos...</h5>
    </div>

    <!-- Contenedor Principal de Datos -->
    <div id="contentDashboard">
        <!-- 6 Tarjetas de KPIs Principales -->
        <div class="row">
            <!-- 1. Ventas Netas -->
            <div class="col-xl-4 col-md-6">
                <div class="kpi-card kpi-ventas">
                    <div class="kpi-icon"><i class="fa fa-shopping-cart"></i></div>
                    <div>
                        <span class="text-uppercase small font-weight-bold opacity-75" id="labelKpiVentas">💰 Ventas Netas Totales</span>
                        <h2 class="font-weight-bold my-1" id="kpiVentaNeta">$0</h2>
                    </div>
                    <div class="small opacity-90 mt-2" id="kpiVentaSub">Brutas: $0 | Devoluciones: $0</div>
                </div>
            </div>

            <!-- 2. Costo Mercancía -->
            <div class="col-xl-4 col-md-6">
                <div class="kpi-card kpi-costo">
                    <div class="kpi-icon"><i class="fa fa-cubes"></i></div>
                    <div>
                        <span class="text-uppercase small font-weight-bold opacity-75">📦 Costo Mercancía Vendida</span>
                        <h2 class="font-weight-bold my-1" id="kpiCostoNeto">$0</h2>
                    </div>
                    <div class="small opacity-90 mt-2" id="kpiCostoPct">Representa el 0% de las ventas</div>
                </div>
            </div>

            <!-- 3. Utilidad Bruta -->
            <div class="col-xl-4 col-md-6">
                <div class="kpi-card kpi-utilidad">
                    <div class="kpi-icon"><i class="fa fa-line-chart"></i></div>
                    <div>
                        <span class="text-uppercase small font-weight-bold opacity-75">📈 Utilidad Bruta Comercial</span>
                        <h2 class="font-weight-bold my-1" id="kpiUtilidadBruta">$0</h2>
                    </div>
                    <div class="d-flex align-items-center mt-2">
                        <span class="badge badge-light text-dark font-weight-bold px-2 py-1" id="kpiMargenBadge" style="font-size: 0.82rem;">0% Margen Bruto</span>
                    </div>
                </div>
            </div>

            <!-- 4. Card 4: Categoría Líder o Marca Líder -->
            <div class="col-xl-4 col-md-6" id="boxKpi4">
                <div class="kpi-card kpi-categoria">
                    <div class="kpi-icon"><i class="fa fa-folder-open"></i></div>
                    <div>
                        <span class="text-uppercase small font-weight-bold opacity-75" id="titleKpi4">🏷️ Categoría Líder en Ventas</span>
                        <h4 class="font-weight-bold my-1 text-truncate" id="kpiTopCategoriaNombre">Ninguna</h4>
                    </div>
                    <div class="small opacity-90 mt-2" id="kpiTopCategoriaMonto">$0 (0% de participación)</div>
                </div>
            </div>

            <!-- 5. Card 5: Marca Líder o Mayor Margen -->
            <div class="col-xl-4 col-md-6" id="boxKpi5">
                <div class="kpi-card kpi-marca">
                    <div class="kpi-icon"><i class="fa fa-tags"></i></div>
                    <div>
                        <span class="text-uppercase small font-weight-bold opacity-75" id="titleKpi5">🏢 Marca Líder en Ventas</span>
                        <h4 class="font-weight-bold my-1 text-truncate" id="kpiTopMarcaNombre">Ninguna</h4>
                    </div>
                    <div class="small opacity-90 mt-2" id="kpiTopMarcaMonto">$0 (0% de participación)</div>
                </div>
            </div>

            <!-- 6. Volumen Físico -->
            <div class="col-xl-4 col-md-6" id="boxKpi6">
                <div class="kpi-card kpi-volumen">
                    <div class="kpi-icon"><i class="fa fa-truck"></i></div>
                    <div>
                        <span class="text-uppercase small font-weight-bold opacity-75">📊 Volumen Entregado</span>
                        <h3 class="font-weight-bold my-1" id="kpiVolumen">0 Cajas | 0 Fracc</h3>
                    </div>
                    <div class="small opacity-90 mt-2" id="kpiLineasActivas">0 Categorías | 0 Marcas con ventas</div>
                </div>
            </div>
        </div>

        <!-- Sección de Gráficos Comparativos Chart.js -->
        <div class="row" id="rowGraficosBarras">
            <!-- Gráfico 1: Top Categorías -->
            <div class="col-lg-6 mb-4" id="boxGraficoCat">
                <div class="chart-container-box h-100">
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <div>
                            <h6 class="font-weight-bold m-0 text-dark">
                                <i class="fa fa-bar-chart text-primary mr-1"></i> Top Categorías: Venta vs Costo vs Utilidad
                            </h6>
                            <small class="text-muted">Comparativo financiero de las principales categorías</small>
                        </div>
                    </div>
                    <div style="height: 330px; position: relative;">
                        <canvas id="chartTopCategorias"></canvas>
                    </div>
                </div>
            </div>

            <!-- Gráfico 2: Top Marcas -->
            <div class="col-lg-6 mb-4" id="boxGraficoMar">
                <div class="chart-container-box h-100">
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <div>
                            <h6 class="font-weight-bold m-0 text-dark">
                                <i class="fa fa-bar-chart text-success mr-1"></i> Top Marcas: Venta vs Costo vs Utilidad
                            </h6>
                            <small class="text-muted">Comparativo financiero de las principales marcas</small>
                        </div>
                    </div>
                    <div style="height: 330px; position: relative;">
                        <canvas id="chartTopMarcas"></canvas>
                    </div>
                </div>
            </div>
        </div>

        <!-- Fila de Participación Donut Charts -->
        <div class="row" id="rowGraficosDonut">
            <div class="col-lg-6 mb-4" id="boxDonutCat">
                <div class="chart-container-box h-100">
                    <div class="d-flex justify-content-between align-items-center mb-2">
                        <div>
                            <h6 class="font-weight-bold m-0 text-dark">
                                <i class="fa fa-pie-chart text-info mr-1"></i> Participación de Mercado por Categoría (%)
                            </h6>
                            <small class="text-muted">Distribución del pastel de ventas netas</small>
                        </div>
                    </div>
                    <div style="height: 280px; position: relative;">
                        <canvas id="chartDonutCategorias"></canvas>
                    </div>
                </div>
            </div>

            <div class="col-lg-6 mb-4" id="boxDonutMar">
                <div class="chart-container-box h-100">
                    <div class="d-flex justify-content-between align-items-center mb-2">
                        <div>
                            <h6 class="font-weight-bold m-0 text-dark">
                                <i class="fa fa-pie-chart text-warning mr-1"></i> Participación de Mercado por Marca (%)
                            </h6>
                            <small class="text-muted">Distribución del pastel de ventas por fabricante</small>
                        </div>
                    </div>
                    <div style="height: 280px; position: relative;">
                        <canvas id="chartDonutMarcas"></canvas>
                    </div>
                </div>
            </div>
        </div>

        <!-- Pestañas de Análisis Detallado (Conmutador 100% interactivo) -->
        <div class="card border-0 shadow-sm" style="border-radius: 14px;">
            <div class="card-header bg-white border-bottom-0 p-0">
                <ul class="nav nav-tabs custom-tabs" id="tablasTabs" role="tablist">
                    <li class="nav-item" id="navItemCat">
                        <a class="nav-link active" id="tab-cat-link" 
                           data-bs-toggle="tab" data-toggle="tab" 
                           data-bs-target="#tab-categorias" href="#tab-categorias" 
                           role="tab" aria-controls="tab-categorias" aria-selected="true">
                            <i class="fa fa-folder-open text-primary mr-1"></i> Detalle Categorías (<span id="badgeCountCat">0</span>)
                        </a>
                    </li>
                    <li class="nav-item" id="navItemMar">
                        <a class="nav-link" id="tab-mar-link" 
                           data-bs-toggle="tab" data-toggle="tab" 
                           data-bs-target="#tab-marcas" href="#tab-marcas" 
                           role="tab" aria-controls="tab-marcas" aria-selected="false">
                            <i class="fa fa-tags text-success mr-1"></i> Detalle Marcas (<span id="badgeCountMar">0</span>)
                        </a>
                    </li>
                    <li class="nav-item" id="navItemProd">
                        <a class="nav-link" id="tab-prod-link" 
                           data-bs-toggle="tab" data-toggle="tab" 
                           data-bs-target="#tab-productos" href="#tab-productos" 
                           role="tab" aria-controls="tab-productos" aria-selected="false">
                            <i class="fa fa-cubes text-info mr-1"></i> Top 20 Productos Más Vendidos
                        </a>
                    </li>
                    <li class="nav-item" id="navItemCruce">
                        <a class="nav-link" id="tab-cruce-link" 
                           data-bs-toggle="tab" data-toggle="tab" 
                           data-bs-target="#tab-cruce" href="#tab-cruce" 
                           role="tab" aria-controls="tab-cruce" aria-selected="false">
                            <i class="fa fa-exchange text-warning mr-1"></i> Cruce Categoría × Marca
                        </a>
                    </li>
                </ul>
            </div>

            <div class="card-body p-3">
                <div class="tab-content" id="tablasTabsContent">
                    <!-- Tab 1: Categorías -->
                    <div class="tab-pane fade show active" id="tab-categorias" role="tabpanel" aria-labelledby="tab-cat-link">
                        <div class="d-flex justify-content-between align-items-center mb-3 flex-wrap" style="gap: 10px;">
                            <div class="search-box-wrap" style="max-width: 320px; width: 100%;">
                                <i class="fa fa-search search-icon"></i>
                                <input type="text" class="form-control form-control-sm" id="searchCategorias" placeholder="Buscar categoría...">
                            </div>
                            <small class="text-muted font-weight-bold">Ordenado por facturación neta descendente</small>
                        </div>
                        <div class="table-responsive" style="border-radius: 10px; border: 1px solid #cbd5e1; max-height: 520px; overflow-y: auto;">
                            <table class="table table-sm table-hover table-bordered m-0 text-center" id="tablaCategorias">
                                <thead style="background: #182848; color: #ffffff; position: sticky; top: 0; z-index: 10;">
                                    <tr>
                                        <th style="width: 40px; background:#0f172a; color:#fff;">#</th>
                                        <th style="width: 100px; background:#0f172a; color:#fff;">Código</th>
                                        <th class="text-left" style="background:#0f172a; color:#fff;">Categoría</th>
                                        <th style="background:#16a34a; color:#fff;">Venta Neta ($)</th>
                                        <th style="background:#334155; color:#cbd5e1;">Costo Mercancía ($)</th>
                                        <th style="background:#0284c7; color:#fff;">Utilidad Bruta ($)</th>
                                        <th style="background:#0f766e; color:#fff;">Margen (%)</th>
                                        <th style="width: 130px; background:#182848; color:#fff;">Participación (%)</th>
                                        <th style="background:#475569; color:#fff;">Cajas</th>
                                        <th style="background:#475569; color:#fff;">Fracciones</th>
                                    </tr>
                                </thead>
                                <tbody id="tablaCategoriasBody">
                                    <!-- Renderizado vía JS -->
                                </tbody>
                                <tfoot id="tablaCategoriasFoot" class="font-weight-bold" style="background: #f1f5f9; position: sticky; bottom: 0;">
                                    <!-- Renderizado vía JS -->
                                </tfoot>
                            </table>
                        </div>
                    </div>

                    <!-- Tab 2: Marcas -->
                    <div class="tab-pane fade" id="tab-marcas" role="tabpanel" aria-labelledby="tab-mar-link">
                        <div class="d-flex justify-content-between align-items-center mb-3 flex-wrap" style="gap: 10px;">
                            <div class="search-box-wrap" style="max-width: 320px; width: 100%;">
                                <i class="fa fa-search search-icon"></i>
                                <input type="text" class="form-control form-control-sm" id="searchMarcas" placeholder="Buscar marca...">
                            </div>
                            <small class="text-muted font-weight-bold">Ordenado por facturación neta descendente</small>
                        </div>
                        <div class="table-responsive" style="border-radius: 10px; border: 1px solid #cbd5e1; max-height: 520px; overflow-y: auto;">
                            <table class="table table-sm table-hover table-bordered m-0 text-center" id="tablaMarcas">
                                <thead style="background: #182848; color: #ffffff; position: sticky; top: 0; z-index: 10;">
                                    <tr>
                                        <th style="width: 40px; background:#0f172a; color:#fff;">#</th>
                                        <th style="width: 110px; background:#0f172a; color:#fff;">Código</th>
                                        <th class="text-left" style="background:#0f172a; color:#fff;">Marca</th>
                                        <th style="background:#16a34a; color:#fff;">Venta Neta ($)</th>
                                        <th style="background:#334155; color:#cbd5e1;">Costo Mercancía ($)</th>
                                        <th style="background:#0284c7; color:#fff;">Utilidad Bruta ($)</th>
                                        <th style="background:#0f766e; color:#fff;">Margen (%)</th>
                                        <th style="width: 130px; background:#182848; color:#fff;">Participación (%)</th>
                                        <th style="background:#475569; color:#fff;">Cajas</th>
                                        <th style="background:#475569; color:#fff;">Fracciones</th>
                                    </tr>
                                </thead>
                                <tbody id="tablaMarcasBody">
                                    <!-- Renderizado vía JS -->
                                </tbody>
                                <tfoot id="tablaMarcasFoot" class="font-weight-bold" style="background: #f1f5f9; position: sticky; bottom: 0;">
                                    <!-- Renderizado vía JS -->
                                </tfoot>
                            </table>
                        </div>
                    </div>

                    <!-- Tab 3: Top Productos -->
                    <div class="tab-pane fade" id="tab-productos" role="tabpanel" aria-labelledby="tab-prod-link">
                        <div class="d-flex justify-content-between align-items-center mb-3 flex-wrap" style="gap: 10px;">
                            <div class="search-box-wrap" style="max-width: 320px; width: 100%;">
                                <i class="fa fa-search search-icon"></i>
                                <input type="text" class="form-control form-control-sm" id="searchProductos" placeholder="Buscar producto...">
                            </div>
                            <small class="text-muted font-weight-bold">Top 20 productos de mayor rotación económica</small>
                        </div>
                        <div class="table-responsive" style="border-radius: 10px; border: 1px solid #cbd5e1; max-height: 520px; overflow-y: auto;">
                            <table class="table table-sm table-hover table-bordered m-0 text-center" id="tablaProductos">
                                <thead style="background: #182848; color: #ffffff; position: sticky; top: 0; z-index: 10;">
                                    <tr>
                                        <th style="width: 40px; background:#0f172a; color:#fff;">#</th>
                                        <th style="width: 120px; background:#0f172a; color:#fff;">Código</th>
                                        <th class="text-left" style="background:#0f172a; color:#fff;">Producto</th>
                                        <th class="text-left" style="background:#1e3c72; color:#fff;">Categoría</th>
                                        <th class="text-left" style="background:#0f766e; color:#fff;">Marca</th>
                                        <th style="background:#475569; color:#fff;">Cajas</th>
                                        <th style="background:#475569; color:#fff;">Fracc</th>
                                        <th style="background:#16a34a; color:#fff;">Venta ($)</th>
                                        <th style="background:#334155; color:#cbd5e1;">Costo ($)</th>
                                        <th style="background:#0284c7; color:#fff;">Utilidad ($)</th>
                                        <th style="background:#0f766e; color:#fff;">Margen (%)</th>
                                    </tr>
                                </thead>
                                <tbody id="tablaProductosBody">
                                    <!-- Renderizado vía JS -->
                                </tbody>
                            </table>
                        </div>
                    </div>

                    <!-- Tab 4: Cruce Categoría x Marca -->
                    <div class="tab-pane fade" id="tab-cruce" role="tabpanel" aria-labelledby="tab-cruce-link">
                        <div class="d-flex justify-content-between align-items-center mb-3 flex-wrap" style="gap: 10px;">
                            <div class="search-box-wrap" style="max-width: 320px; width: 100%;">
                                <i class="fa fa-search search-icon"></i>
                                <input type="text" class="form-control form-control-sm" id="searchCruce" placeholder="Buscar categoría o marca...">
                            </div>
                            <small class="text-muted font-weight-bold">Combinaciones más rentables de Categoría y Marca</small>
                        </div>
                        <div class="table-responsive" style="border-radius: 10px; border: 1px solid #cbd5e1; max-height: 520px; overflow-y: auto;">
                            <table class="table table-sm table-hover table-bordered m-0 text-center" id="tablaCruce">
                                <thead style="background: #182848; color: #ffffff; position: sticky; top: 0; z-index: 10;">
                                    <tr>
                                        <th style="width: 40px; background:#0f172a; color:#fff;">#</th>
                                        <th class="text-left" style="background:#1e3c72; color:#fff;">Categoría</th>
                                        <th class="text-left" style="background:#0f766e; color:#fff;">Marca</th>
                                        <th style="background:#16a34a; color:#fff;">Venta Neta ($)</th>
                                        <th style="background:#334155; color:#cbd5e1;">Costo ($)</th>
                                        <th style="background:#0284c7; color:#fff;">Utilidad ($)</th>
                                        <th style="background:#0f766e; color:#fff;">Margen (%)</th>
                                        <th style="background:#475569; color:#fff;">Cajas</th>
                                        <th style="background:#475569; color:#fff;">Fracc</th>
                                    </tr>
                                </thead>
                                <tbody id="tablaCruceBody">
                                    <!-- Renderizado vía JS -->
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal de Importación de Marcas / Categorías -->
@include('menu.modalImportarMarcaCategoria')

@endsection

@section('pie')
<!-- Librería Chart.js para visualización de gráficos comparativos -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Formateador de moneda en Pesos Colombianos
    const formatCurrency = new Intl.NumberFormat('es-CO', {
        style: 'currency',
        currency: 'COP',
        maximumFractionDigits: 0
    });

    const formatNumber = new Intl.NumberFormat('es-CO', {
        maximumFractionDigits: 0
    });

    // Instancias de Gráficos Chart.js
    let chartCat = null;
    let chartMar = null;
    let chartDonutCat = null;
    let chartDonutMar = null;

    // Estado del modo de vista actual: 'ambas', 'categorias', 'marcas'
    let modoVistaActual = '{{ $modoVista ?? "ambas" }}';

    // Datos globales en memoria
    let globalData = @json($initialData ?? null);

    // =========================================================================
    // SOLUCIÓN DEFINITIVA DE CONMUTACIÓN DE PESTAÑAS (Bootstrap 4 / 5 / jQuery)
    // =========================================================================
    $(document).on('click', '#tablasTabs .nav-link', function(e) {
        e.preventDefault();
        e.stopPropagation();

        const targetSelector = $(this).attr('data-bs-target') || $(this).attr('href');
        if (!targetSelector) return;

        // Desactivar todos los links y activar el actual
        $('#tablasTabs .nav-link').removeClass('active').attr('aria-selected', 'false');
        $(this).addClass('active').attr('aria-selected', 'true');

        // Desactivar todos los paneles y activar el destino
        $('#tablasTabsContent .tab-pane').removeClass('show active');
        $(targetSelector).addClass('show active');
    });

    // =========================================================================
    // CONTROL DEL MODO DE VISTA: AMBAS / SOLO CATEGORÍAS / SOLO MARCAS
    // =========================================================================
    $('.modo-selector-btn').on('click', function() {
        const modo = $(this).data('modo');
        aplicarModoVista(modo);
    });

    function aplicarModoVista(modo) {
        modoVistaActual = modo;
        $('#modoVista').val(modo);

        $('.modo-selector-btn').removeClass('active');
        $(`.modo-selector-btn[data-modo="${modo}"]`).addClass('active');

        if (modo === 'categorias') {
            $('#labelModoExplicativo').text('Mostrando exclusivamente métricas y análisis de CATEGORÍAS');
            
            // Gráficos
            $('#boxGraficoCat').removeClass('col-lg-6').addClass('col-lg-8').show();
            $('#boxDonutCat').removeClass('col-lg-6').addClass('col-lg-4').show();
            $('#boxGraficoMar').hide();
            $('#boxDonutMar').hide();

            // Pestañas
            $('#navItemCat').show();
            $('#navItemProd').show();
            $('#navItemMar').hide();
            $('#navItemCruce').hide();
            activarPestana('#tab-cat-link', '#tab-categorias');

            // Filtros de formulario
            $('#colFiltroCat').show();
            $('#colFiltroMar').hide();

            // KPIs
            $('#labelKpiVentas').text('💰 Ventas Netas Categorías');
            $('#boxKpi4').show();
            $('#titleKpi4').text('🏷️ Categoría Líder en Ventas');
            $('#boxKpi5').show();
            $('#titleKpi5').text('⭐ Categoría Más Rentable (% Margen)');

            if (globalData && globalData.kpis) {
                const kpis = globalData.kpis;
                if (kpis.top_categoria) {
                    $('#kpiTopCategoriaNombre').text(kpis.top_categoria.nombre);
                    $('#kpiTopCategoriaMonto').text(`${formatCurrency.format(kpis.top_categoria.venta_neta)} (${kpis.top_categoria.participacion_pct}%)`);
                }
                if (kpis.top_margen_categoria) {
                    $('#kpiTopMarcaNombre').text(kpis.top_margen_categoria.nombre);
                    $('#kpiTopMarcaMonto').text(`${kpis.top_margen_categoria.margen_pct}% Margen Bruto (${formatCurrency.format(kpis.top_margen_categoria.venta_neta)})`);
                }
                $('#kpiLineasActivas').text(`${kpis.total_categorias} Categorías activas con venta`);
            }

        } else if (modo === 'marcas') {
            $('#labelModoExplicativo').text('Mostrando exclusivamente métricas y análisis de MARCAS');
            
            // Gráficos
            $('#boxGraficoMar').removeClass('col-lg-6').addClass('col-lg-8').show();
            $('#boxDonutMar').removeClass('col-lg-6').addClass('col-lg-4').show();
            $('#boxGraficoCat').hide();
            $('#boxDonutCat').hide();

            // Pestañas
            $('#navItemMar').show();
            $('#navItemProd').show();
            $('#navItemCat').hide();
            $('#navItemCruce').hide();
            activarPestana('#tab-mar-link', '#tab-marcas');

            // Filtros de formulario
            $('#colFiltroCat').hide();
            $('#colFiltroMar').show();

            // KPIs
            $('#labelKpiVentas').text('💰 Ventas Netas Marcas');
            $('#boxKpi4').show();
            $('#titleKpi4').text('🏢 Marca Líder en Ventas');
            $('#boxKpi5').show();
            $('#titleKpi5').text('⭐ Marca Más Rentable (% Margen)');

            if (globalData && globalData.kpis) {
                const kpis = globalData.kpis;
                if (kpis.top_marca) {
                    $('#kpiTopCategoriaNombre').text(kpis.top_marca.nombre);
                    $('#kpiTopCategoriaMonto').text(`${formatCurrency.format(kpis.top_marca.venta_neta)} (${kpis.top_marca.participacion_pct}%)`);
                }
                if (kpis.top_margen_marca) {
                    $('#kpiTopMarcaNombre').text(kpis.top_margen_marca.nombre);
                    $('#kpiTopMarcaMonto').text(`${kpis.top_margen_marca.margen_pct}% Margen Bruto (${formatCurrency.format(kpis.top_margen_marca.venta_neta)})`);
                }
                $('#kpiLineasActivas').text(`${kpis.total_marcas} Marcas activas con venta`);
            }

        } else {
            // Ambas (Comparativo Integral)
            $('#labelModoExplicativo').text('Mostrando comparativo integral de Categorías y Marcas');

            // Gráficos
            $('#boxGraficoCat').removeClass('col-lg-8').addClass('col-lg-6').show();
            $('#boxGraficoMar').removeClass('col-lg-8').addClass('col-lg-6').show();
            $('#boxDonutCat').removeClass('col-lg-4').addClass('col-lg-6').show();
            $('#boxDonutMar').removeClass('col-lg-4').addClass('col-lg-6').show();

            // Pestañas
            $('#navItemCat').show();
            $('#navItemMar').show();
            $('#navItemProd').show();
            $('#navItemCruce').show();

            // Filtros de formulario
            $('#colFiltroCat').show();
            $('#colFiltroMar').show();

            // KPIs
            $('#labelKpiVentas').text('💰 Ventas Netas Totales');
            $('#boxKpi4').show();
            $('#titleKpi4').text('🏷️ Categoría Líder en Ventas');
            $('#boxKpi5').show();
            $('#titleKpi5').text('🏢 Marca Líder en Ventas');

            if (globalData && globalData.kpis) {
                renderizarKPIs(globalData.kpis);
            }
        }

        // Redimensionar gráficos si existen
        setTimeout(() => {
            if (chartCat) chartCat.resize();
            if (chartMar) chartMar.resize();
            if (chartDonutCat) chartDonutCat.resize();
            if (chartDonutMar) chartDonutMar.resize();
        }, 100);
    }

    function activarPestana(linkSelector, targetSelector) {
        $('#tablasTabs .nav-link').removeClass('active').attr('aria-selected', 'false');
        $(linkSelector).addClass('active').attr('aria-selected', 'true');
        $('#tablasTabsContent .tab-pane').removeClass('show active');
        $(targetSelector).addClass('show active');
    }

    // Inicializar visualización con datos precargados
    if (globalData) {
        renderizarTodo(globalData);
        aplicarModoVista(modoVistaActual);
    } else {
        cargarDatos();
    }

    // Evento Submit de Filtros
    $('#formFiltros').on('submit', function(e) {
        e.preventDefault();
        cargarDatos();
    });

    // Botón Exportar Excel
    $('#btnExportarExcel').on('click', function() {
        const fi = $('#fi').val();
        const ff = $('#ff').val();
        const bodega = $('#bodega').val();
        const cate = $('#categoriaFiltro').val();
        const marc = $('#marcaFiltro').val();
        window.location.href = `{{ url('ventasMarcaCategoria/exportar') }}?exportar=1&fi=${fi}&ff=${ff}&bodega=${bodega}&categoria=${cate}&marca=${marc}&modoVista=${modoVistaActual}`;
    });

    // Atajos de Fechas
    $('.btn-quick-date').on('click', function() {
        const range = $(this).data('range');
        const hoy = new Date();
        let f1 = new Date();
        let f2 = new Date();

        if (range === 'hoy') {
            // Hoy
        } else if (range === 'ayer') {
            f1.setDate(hoy.getDate() - 1);
            f2.setDate(hoy.getDate() - 1);
        } else if (range === 'esta_semana') {
            const day = hoy.getDay();
            const diff = hoy.getDate() - day + (day === 0 ? -6 : 1);
            f1.setDate(diff);
        } else if (range === 'este_mes') {
            f1 = new Date(hoy.getFullYear(), hoy.getMonth(), 1);
            f2 = new Date(hoy.getFullYear(), hoy.getMonth() + 1, 0);
        } else if (range === 'mes_anterior') {
            f1 = new Date(hoy.getFullYear(), hoy.getMonth() - 1, 1);
            f2 = new Date(hoy.getFullYear(), hoy.getMonth(), 0);
        } else if (range === 'este_ano') {
            f1 = new Date(hoy.getFullYear(), 0, 1);
            f2 = new Date(hoy.getFullYear(), 11, 31);
        }

        $('#fi').val(formatDateInput(f1));
        $('#ff').val(formatDateInput(f2));

        $('.btn-quick-date').removeClass('btn-secondary text-white').addClass('btn-outline-secondary');
        $(this).removeClass('btn-outline-secondary').addClass('btn-secondary text-white');

        cargarDatos();
    });

    function formatDateInput(d) {
        const year = d.getFullYear();
        const month = String(d.getMonth() + 1).padStart(2, '0');
        const day = String(d.getDate()).padStart(2, '0');
        return `${year}-${month}-${day}`;
    }

    // Carga de datos vía AJAX
    function cargarDatos() {
        const fi = $('#fi').val();
        const ff = $('#ff').val();
        const bodega = $('#bodega').val();
        const categoria = $('#categoriaFiltro').val();
        const marca = $('#marcaFiltro').val();

        $('#loadingIndicator').removeClass('d-none');
        $('#contentDashboard').addClass('opacity-50');

        fetch(`{{ url('ventasMarcaCategoria/data') }}?fi=${fi}&ff=${ff}&bodega=${bodega}&categoria=${categoria}&marca=${marca}`)
            .then(res => {
                if (!res.ok) throw new Error('Error en el servidor al consultar los datos');
                return res.json();
            })
            .then(res => {
                if (res.status === 'success') {
                    globalData = res.data;
                    renderizarTodo(res.data);
                    aplicarModoVista(modoVistaActual);
                } else {
                    alert(res.message || 'Error al obtener la información.');
                }
            })
            .catch(err => {
                console.error(err);
                alert('No se pudo conectar con el servidor: ' + err.message);
            })
            .finally(() => {
                $('#loadingIndicator').addClass('d-none');
                $('#contentDashboard').removeClass('opacity-50');
            });
    }

    // Renderizador integral
    function renderizarTodo(data) {
        renderizarKPIs(data.kpis);
        renderizarGraficos(data.charts);
        renderizarTablaCategorias(data.categorias, data.kpis);
        renderizarTablaMarcas(data.marcas, data.kpis);
        renderizarTablaProductos(data.top_productos);
        renderizarTablaCruce(data.cruce);

        $('#badgeCountCat').text(data.categorias.length);
        $('#badgeCountMar').text(data.marcas.length);
    }

    // Renderizador de KPIs
    function renderizarKPIs(kpis) {
        $('#kpiVentaNeta').text(formatCurrency.format(kpis.venta_neta));
        $('#kpiVentaSub').text(`Brutas: ${formatCurrency.format(kpis.venta_bruta)} | Devs: ${formatCurrency.format(kpis.devoluciones)}`);

        $('#kpiCostoNeto').text(formatCurrency.format(kpis.costo_neto));
        const pctCosto = kpis.venta_neta > 0 ? ((kpis.costo_neto / kpis.venta_neta) * 100).toFixed(1) : 0;
        $('#kpiCostoPct').text(`Representa el ${pctCosto}% de las ventas netas`);

        $('#kpiUtilidadBruta').text(formatCurrency.format(kpis.utilidad_bruta));
        $('#kpiMargenBadge').text(`${kpis.margen_promedio_pct}% Margen Bruto`);

        if (kpis.top_categoria) {
            $('#kpiTopCategoriaNombre').text(kpis.top_categoria.nombre);
            $('#kpiTopCategoriaMonto').text(`${formatCurrency.format(kpis.top_categoria.venta_neta)} (${kpis.top_categoria.participacion_pct}%)`);
        } else {
            $('#kpiTopCategoriaNombre').text('Sin ventas');
            $('#kpiTopCategoriaMonto').text('$0 (0%)');
        }

        if (kpis.top_marca) {
            $('#kpiTopMarcaNombre').text(kpis.top_marca.nombre);
            $('#kpiTopMarcaMonto').text(`${formatCurrency.format(kpis.top_marca.venta_neta)} (${kpis.top_marca.participacion_pct}%)`);
        } else {
            $('#kpiTopMarcaNombre').text('Sin ventas');
            $('#kpiTopMarcaMonto').text('$0 (0%)');
        }

        $('#kpiVolumen').text(`${formatNumber.format(kpis.cajas)} Cajas | ${formatNumber.format(kpis.frcc)} Fracc`);
        $('#kpiLineasActivas').text(`${kpis.total_categorias} Categorías | ${kpis.total_marcas} Marcas`);
    }

    // Renderizador de Gráficos Chart.js
    function renderizarGraficos(charts) {
        // 1. Gráfico Top Categorías
        if (chartCat) chartCat.destroy();
        const ctxCat = document.getElementById('chartTopCategorias').getContext('2d');
        chartCat = new Chart(ctxCat, {
            type: 'bar',
            data: {
                labels: charts.topCategorias.labels,
                datasets: [
                    {
                        label: 'Ventas Netas ($)',
                        data: charts.topCategorias.ventas,
                        backgroundColor: 'rgba(16, 185, 129, 0.85)',
                        borderColor: '#059669',
                        borderWidth: 1,
                        borderRadius: 4
                    },
                    {
                        label: 'Costo ($)',
                        data: charts.topCategorias.costos,
                        backgroundColor: 'rgba(245, 158, 11, 0.85)',
                        borderColor: '#d97706',
                        borderWidth: 1,
                        borderRadius: 4
                    },
                    {
                        label: 'Utilidad Bruta ($)',
                        data: charts.topCategorias.utilidades,
                        backgroundColor: 'rgba(6, 182, 212, 0.85)',
                        borderColor: '#0284c7',
                        borderWidth: 1,
                        borderRadius: 4
                    }
                ]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: { position: 'top', labels: { font: { size: 11, weight: 'bold' } } },
                    tooltip: {
                        callbacks: {
                            label: function(ctx) {
                                return ` ${ctx.dataset.label}: ${formatCurrency.format(ctx.raw)}`;
                            }
                        }
                    }
                },
                scales: {
                    x: { ticks: { font: { size: 10 } } },
                    y: {
                        ticks: {
                            callback: function(v) {
                                if (v >= 1000000) return '$' + (v / 1000000).toFixed(1) + 'M';
                                if (v >= 1000) return '$' + (v / 1000).toFixed(0) + 'k';
                                return '$' + v;
                            }
                        }
                    }
                }
            }
        });

        // 2. Gráfico Top Marcas
        if (chartMar) chartMar.destroy();
        const ctxMar = document.getElementById('chartTopMarcas').getContext('2d');
        chartMar = new Chart(ctxMar, {
            type: 'bar',
            data: {
                labels: charts.topMarcas.labels,
                datasets: [
                    {
                        label: 'Ventas Netas ($)',
                        data: charts.topMarcas.ventas,
                        backgroundColor: 'rgba(59, 130, 246, 0.85)',
                        borderColor: '#1d4ed8',
                        borderWidth: 1,
                        borderRadius: 4
                    },
                    {
                        label: 'Costo ($)',
                        data: charts.topMarcas.costos,
                        backgroundColor: 'rgba(245, 158, 11, 0.85)',
                        borderColor: '#d97706',
                        borderWidth: 1,
                        borderRadius: 4
                    },
                    {
                        label: 'Utilidad Bruta ($)',
                        data: charts.topMarcas.utilidades,
                        backgroundColor: 'rgba(16, 185, 129, 0.85)',
                        borderColor: '#059669',
                        borderWidth: 1,
                        borderRadius: 4
                    }
                ]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: { position: 'top', labels: { font: { size: 11, weight: 'bold' } } },
                    tooltip: {
                        callbacks: {
                            label: function(ctx) {
                                return ` ${ctx.dataset.label}: ${formatCurrency.format(ctx.raw)}`;
                            }
                        }
                    }
                },
                scales: {
                    x: { ticks: { font: { size: 10 } } },
                    y: {
                        ticks: {
                            callback: function(v) {
                                if (v >= 1000000) return '$' + (v / 1000000).toFixed(1) + 'M';
                                if (v >= 1000) return '$' + (v / 1000).toFixed(0) + 'k';
                                return '$' + v;
                            }
                        }
                    }
                }
            }
        });

        // 3. Gráfico Donut Categorías
        if (chartDonutCat) chartDonutCat.destroy();
        const ctxDonutCat = document.getElementById('chartDonutCategorias').getContext('2d');
        chartDonutCat = new Chart(ctxDonutCat, {
            type: 'doughnut',
            data: {
                labels: charts.donutCategorias.labels,
                datasets: [{
                    data: charts.donutCategorias.data,
                    backgroundColor: [
                        '#10b981', '#3b82f6', '#6366f1', '#f59e0b', '#ec4899', '#8b5cf6', '#94a3b8'
                    ],
                    borderWidth: 2,
                    borderColor: '#ffffff'
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: { position: 'right', labels: { boxWidth: 12, font: { size: 11 } } },
                    tooltip: {
                        callbacks: {
                            label: function(ctx) {
                                return ` ${ctx.label}: ${formatCurrency.format(ctx.raw)}`;
                            }
                        }
                    }
                },
                cutout: '62%'
            }
        });

        // 4. Gráfico Donut Marcas
        if (chartDonutMar) chartDonutMar.destroy();
        const ctxDonutMar = document.getElementById('chartDonutMarcas').getContext('2d');
        chartDonutMar = new Chart(ctxDonutMar, {
            type: 'doughnut',
            data: {
                labels: charts.donutMarcas.labels,
                datasets: [{
                    data: charts.donutMarcas.data,
                    backgroundColor: [
                        '#0284c7', '#10b981', '#f59e0b', '#8b5cf6', '#14b8a6', '#f43f5e', '#64748b'
                    ],
                    borderWidth: 2,
                    borderColor: '#ffffff'
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: { position: 'right', labels: { boxWidth: 12, font: { size: 11 } } },
                    tooltip: {
                        callbacks: {
                            label: function(ctx) {
                                return ` ${ctx.label}: ${formatCurrency.format(ctx.raw)}`;
                            }
                        }
                    }
                },
                cutout: '62%'
            }
        });
    }

    // Renderizador de Tabla Categorías
    function renderizarTablaCategorias(categorias, kpis) {
        const tbody = $('#tablaCategoriasBody');
        tbody.empty();

        if (!categorias || categorias.length === 0) {
            tbody.append('<tr><td colspan="10" class="text-center py-4 text-muted font-weight-bold">No se encontraron ventas para las categorías en el rango seleccionado.</td></tr>');
            $('#tablaCategoriasFoot').empty();
            return;
        }

        categorias.forEach((c, i) => {
            let badgeClass = 'badge-rentable-media';
            if (c.rentabilidad_nivel === 'alta') badgeClass = 'badge-rentable-alta';
            else if (c.rentabilidad_nivel === 'baja') badgeClass = 'badge-rentable-baja';
            else if (c.rentabilidad_nivel === 'negativa') badgeClass = 'badge-rentable-negativa';

            const tr = `
                <tr class="row-cat-item">
                    <td>${i + 1}</td>
                    <td class="font-weight-bold text-muted">${c.id}</td>
                    <td class="text-left font-weight-bold text-primary name-field">${c.nombre}</td>
                    <td class="font-weight-bold text-success">${formatCurrency.format(c.venta_neta)}</td>
                    <td class="text-muted">${formatCurrency.format(c.costo_neto)}</td>
                    <td class="font-weight-bold text-info">${formatCurrency.format(c.utilidad_bruta)}</td>
                    <td><span class="${badgeClass}">${c.margen_pct}%</span></td>
                    <td>
                        <div class="d-flex align-items-center justify-content-between small font-weight-bold">
                            <span>${c.participacion_pct}%</span>
                        </div>
                        <div class="mini-progress">
                            <div class="mini-progress-bar" style="width: ${Math.min(100, c.participacion_pct)}%;"></div>
                        </div>
                    </td>
                    <td>${formatNumber.format(c.cajas)}</td>
                    <td>${formatNumber.format(c.frcc)}</td>
                </tr>
            `;
            tbody.append(tr);
        });

        // Totales al pie
        $('#tablaCategoriasFoot').html(`
            <tr>
                <td colspan="3" class="text-right">TOTAL CATEGORÍAS:</td>
                <td class="text-success">${formatCurrency.format(kpis.venta_neta)}</td>
                <td class="text-muted">${formatCurrency.format(kpis.costo_neto)}</td>
                <td class="text-info">${formatCurrency.format(kpis.utilidad_bruta)}</td>
                <td><span class="badge-rentable-alta">${kpis.margen_promedio_pct}%</span></td>
                <td>100%</td>
                <td>${formatNumber.format(kpis.cajas)}</td>
                <td>${formatNumber.format(kpis.frcc)}</td>
            </tr>
        `);
    }

    // Renderizador de Tabla Marcas
    function renderizarTablaMarcas(marcas, kpis) {
        const tbody = $('#tablaMarcasBody');
        tbody.empty();

        if (!marcas || marcas.length === 0) {
            tbody.append('<tr><td colspan="10" class="text-center py-4 text-muted font-weight-bold">No se encontraron ventas para las marcas en el rango seleccionado.</td></tr>');
            $('#tablaMarcasFoot').empty();
            return;
        }

        marcas.forEach((m, i) => {
            let badgeClass = 'badge-rentable-media';
            if (m.rentabilidad_nivel === 'alta') badgeClass = 'badge-rentable-alta';
            else if (m.rentabilidad_nivel === 'baja') badgeClass = 'badge-rentable-baja';
            else if (m.rentabilidad_nivel === 'negativa') badgeClass = 'badge-rentable-negativa';

            const tr = `
                <tr class="row-mar-item">
                    <td>${i + 1}</td>
                    <td class="font-weight-bold text-muted">${m.id}</td>
                    <td class="text-left font-weight-bold text-dark name-field">${m.nombre}</td>
                    <td class="font-weight-bold text-success">${formatCurrency.format(m.venta_neta)}</td>
                    <td class="text-muted">${formatCurrency.format(m.costo_neto)}</td>
                    <td class="font-weight-bold text-info">${formatCurrency.format(m.utilidad_bruta)}</td>
                    <td><span class="${badgeClass}">${m.margen_pct}%</span></td>
                    <td>
                        <div class="d-flex align-items-center justify-content-between small font-weight-bold">
                            <span>${m.participacion_pct}%</span>
                        </div>
                        <div class="mini-progress">
                            <div class="mini-progress-bar" style="width: ${Math.min(100, m.participacion_pct)}%;"></div>
                        </div>
                    </td>
                    <td>${formatNumber.format(m.cajas)}</td>
                    <td>${formatNumber.format(m.frcc)}</td>
                </tr>
            `;
            tbody.append(tr);
        });

        // Totales al pie
        $('#tablaMarcasFoot').html(`
            <tr>
                <td colspan="3" class="text-right">TOTAL MARCAS:</td>
                <td class="text-success">${formatCurrency.format(kpis.venta_neta)}</td>
                <td class="text-muted">${formatCurrency.format(kpis.costo_neto)}</td>
                <td class="text-info">${formatCurrency.format(kpis.utilidad_bruta)}</td>
                <td><span class="badge-rentable-alta">${kpis.margen_promedio_pct}%</span></td>
                <td>100%</td>
                <td>${formatNumber.format(kpis.cajas)}</td>
                <td>${formatNumber.format(kpis.frcc)}</td>
            </tr>
        `);
    }

    // Renderizador de Tabla Productos
    function renderizarTablaProductos(productos) {
        const tbody = $('#tablaProductosBody');
        tbody.empty();

        if (!productos || productos.length === 0) {
            tbody.append('<tr><td colspan="11" class="text-center py-4 text-muted font-weight-bold">No se registraron productos vendidos en el periodo.</td></tr>');
            return;
        }

        productos.forEach((p, i) => {
            let badgeClass = p.margen_pct >= 30 ? 'badge-rentable-alta' : (p.margen_pct >= 15 ? 'badge-rentable-media' : 'badge-rentable-baja');

            const tr = `
                <tr class="row-prod-item">
                    <td>${i + 1}</td>
                    <td class="font-weight-bold text-muted">${p.codigo}</td>
                    <td class="text-left font-weight-bold text-dark name-field">${p.nombre}</td>
                    <td class="text-left small font-weight-bold text-primary">${p.categoria}</td>
                    <td class="text-left small font-weight-bold text-secondary">${p.marca}</td>
                    <td>${formatNumber.format(p.cajas)}</td>
                    <td>${formatNumber.format(p.frcc)}</td>
                    <td class="font-weight-bold text-success">${formatCurrency.format(p.valor)}</td>
                    <td class="text-muted">${formatCurrency.format(p.costo)}</td>
                    <td class="font-weight-bold text-info">${formatCurrency.format(p.utilidad)}</td>
                    <td><span class="${badgeClass}">${p.margen_pct}%</span></td>
                </tr>
            `;
            tbody.append(tr);
        });
    }

    // Renderizador de Cruce Categoría x Marca
    function renderizarTablaCruce(cruce) {
        const tbody = $('#tablaCruceBody');
        tbody.empty();

        if (!cruce || cruce.length === 0) {
            tbody.append('<tr><td colspan="9" class="text-center py-4 text-muted font-weight-bold">No hay cruces de información disponibles.</td></tr>');
            return;
        }

        cruce.forEach((cr, i) => {
            let badgeClass = cr.margen_pct >= 30 ? 'badge-rentable-alta' : (cr.margen_pct >= 15 ? 'badge-rentable-media' : 'badge-rentable-baja');

            const tr = `
                <tr class="row-cruce-item">
                    <td>${i + 1}</td>
                    <td class="text-left font-weight-bold text-primary name-cat">${cr.nomcategoria}</td>
                    <td class="text-left font-weight-bold text-dark name-mar">${cr.nommarca}</td>
                    <td class="font-weight-bold text-success">${formatCurrency.format(cr.venta_neta)}</td>
                    <td class="text-muted">${formatCurrency.format(cr.costo_neto)}</td>
                    <td class="font-weight-bold text-info">${formatCurrency.format(cr.utilidad_bruta)}</td>
                    <td><span class="${badgeClass}">${cr.margen_pct}%</span></td>
                    <td>${formatNumber.format(cr.cajas)}</td>
                    <td>${formatNumber.format(cr.frcc)}</td>
                </tr>
            `;
            tbody.append(tr);
        });
    }

    // Búsqueda en vivo para Categorías
    $('#searchCategorias').on('keyup', function() {
        const q = $(this).val().toLowerCase();
        $('.row-cat-item').each(function() {
            const text = $(this).find('.name-field').text().toLowerCase();
            $(this).toggle(text.indexOf(q) > -1);
        });
    });

    // Búsqueda en vivo para Marcas
    $('#searchMarcas').on('keyup', function() {
        const q = $(this).val().toLowerCase();
        $('.row-mar-item').each(function() {
            const text = $(this).find('.name-field').text().toLowerCase();
            $(this).toggle(text.indexOf(q) > -1);
        });
    });

    // Búsqueda en vivo para Productos
    $('#searchProductos').on('keyup', function() {
        const q = $(this).val().toLowerCase();
        $('.row-prod-item').each(function() {
            const text = $(this).text().toLowerCase();
            $(this).toggle(text.indexOf(q) > -1);
        });
    });

    // Búsqueda en vivo para Cruce
    $('#searchCruce').on('keyup', function() {
        const q = $(this).val().toLowerCase();
        $('.row-cruce-item').each(function() {
            const text = $(this).text().toLowerCase();
            $(this).toggle(text.indexOf(q) > -1);
        });
    });
});
</script>
@endsection