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

@section('styles')
<!-- Select2 CSS CDN -->
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<style>
    /* Estructura Principal */
    .admin-banner {
        background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%);
        color: #ffffff;
        padding: 8px 16px;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12);
        margin-bottom: 8px;
    }

    .badge-admin {
        background: linear-gradient(90deg, #3b82f6, #6366f1);
        color: white;
        font-size: 0.65rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        padding: 2px 6px;
        border-radius: 10px;
    }

    /* Barra de Filtros Compacta e Inline */
    .filter-card {
        background: #ffffff;
        border-radius: 8px;
        box-shadow: 0 1px 6px rgba(0, 0, 0, 0.04);
        padding: 8px 12px;
        border: 1px solid #e2e8f0;
        margin-bottom: 10px;
    }

    .filter-item {
        display: flex;
        flex-direction: column;
    }

    .filter-label {
        font-size: 0.68rem;
        font-weight: 700;
        color: #475569;
        margin-bottom: 2px;
        display: flex;
        align-items: center;
        gap: 3px;
        text-transform: uppercase;
        letter-spacing: 0.3px;
        white-space: nowrap;
    }

    .filter-input {
        height: 31px !important;
        border: 1px solid #cbd5e1 !important;
        border-radius: 6px !important;
        font-size: 0.8rem !important;
        font-weight: 500 !important;
        color: #1e293b !important;
        padding: 2px 6px !important;
        background-color: #ffffff !important;
    }

    .filter-input:focus {
        border-color: #3b82f6 !important;
        box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15) !important;
    }

    /* Botones Compactos */
    .btn-exec-primary {
        background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
        color: #ffffff !important;
        border: none;
        height: 31px;
        padding: 0 12px;
        border-radius: 6px;
        font-weight: 700;
        font-size: 0.78rem;
        box-shadow: 0 2px 6px rgba(37, 99, 235, 0.2);
        transition: all 0.2s ease;
        display: inline-flex;
        align-items: center;
        gap: 4px;
        white-space: nowrap;
    }
    .btn-exec-primary:hover {
        transform: translateY(-1px);
        box-shadow: 0 3px 8px rgba(37, 99, 235, 0.3);
    }

    .btn-exec-success {
        background: linear-gradient(135deg, #10b981 0%, #059669 100%);
        color: #ffffff !important;
        border: none;
        height: 31px;
        padding: 0 10px;
        border-radius: 6px;
        font-weight: 700;
        font-size: 0.78rem;
        box-shadow: 0 2px 6px rgba(16, 185, 129, 0.2);
        transition: all 0.2s ease;
        display: inline-flex;
        align-items: center;
        gap: 4px;
        white-space: nowrap;
    }
    .btn-exec-success:hover {
        transform: translateY(-1px);
        box-shadow: 0 3px 8px rgba(16, 185, 129, 0.3);
    }

    /* KPI Cards */
    .kpi-card {
        border-radius: 8px;
        padding: 10px 14px;
        color: white;
        box-shadow: 0 3px 10px -2px rgba(0,0,0,0.08);
        transition: all 0.2s ease;
        position: relative;
        overflow: hidden;
        margin-bottom: 8px;
    }

    .kpi-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 5px 14px -2px rgba(0,0,0,0.12);
    }

    .kpi-icon {
        position: absolute;
        right: 10px;
        bottom: 4px;
        font-size: 1.8rem;
        opacity: 0.25;
    }

    .kpi-neta { background: linear-gradient(135deg, #059669 0%, #10b981 100%); }
    .kpi-bruta { background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%); }
    .kpi-devo { background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%); }
    .kpi-fact { background: linear-gradient(135deg, #d97706 0%, #f59e0b 100%); }

    .kpi-title {
        font-size: 0.68rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        opacity: 0.9;
        margin-bottom: 2px;
    }

    .kpi-value {
        font-size: 1.2rem;
        font-weight: 800;
        line-height: 1.1;
    }

    .chart-card {
        background: #ffffff;
        border-radius: 8px;
        padding: 14px;
        box-shadow: 0 1px 8px rgba(0, 0, 0, 0.04);
        border: 1px solid #e2e8f0;
        margin-bottom: 12px;
    }

    .chart-header {
        font-size: 0.88rem;
        font-weight: 700;
        color: #1e293b;
        margin-bottom: 10px;
        padding-bottom: 5px;
        border-bottom: 1.5px solid #f1f5f9;
        display: flex;
        align-items: center;
        gap: 6px;
    }

    /* Tabla */
    .table-responsive-container {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        border-radius: 6px;
        border: 1px solid #e2e8f0;
    }

    .custom-table {
        border-collapse: separate;
        border-spacing: 0;
        width: 100%;
        min-width: 850px;
        white-space: nowrap;
        margin-bottom: 0;
    }

    .custom-table thead th {
        background-color: #0f172a;
        color: #f8fafc;
        font-weight: 600;
        text-transform: uppercase;
        font-size: 0.72rem;
        letter-spacing: 0.5px;
        padding: 8px 10px;
        border: none;
    }

    .custom-table tbody td, .custom-table tbody th {
        padding: 6px 10px;
        border-bottom: 1px solid #f1f5f9;
        font-size: 0.82rem;
    }

    .custom-table tbody tr:hover {
        background-color: #f8fafc;
    }
    
    /* Select2 Compacto */
    .select2-container .select2-selection--single {
        height: 31px !important;
        border: 1px solid #cbd5e1 !important;
        border-radius: 6px !important;
        padding: 1px 6px !important;
        background-color: #ffffff !important;
        display: flex !important;
        align-items: center !important;
    }
    .select2-container--default .select2-selection--single .select2-selection__rendered {
        line-height: 22px !important;
        color: #1e293b !important;
        font-weight: 600 !important;
        font-size: 0.8rem !important;
        padding-left: 0 !important;
    }
    .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: 29px !important;
        right: 4px !important;
    }
    .select2-dropdown {
        border: 1.5px solid #3b82f6 !important;
        border-radius: 6px !important;
        box-shadow: 0 8px 20px -4px rgba(0, 0, 0, 0.12) !important;
        font-size: 0.8rem !important;
        z-index: 9999 !important;
    }
    .select2-search--dropdown {
        padding: 4px !important;
    }
    .select2-search--dropdown .select2-search__field {
        border: 1px solid #cbd5e1 !important;
        border-radius: 4px !important;
        padding: 4px 8px !important;
        font-size: 0.8rem !important;
    }
</style>
@endsection

@section('contenido')

<!-- HEADER BANNER COMPACTO -->
<div class="admin-banner d-flex flex-wrap justify-content-between align-items-center gap-2">
    <div class="d-flex align-items-center gap-2">
        <span class="badge-admin"><i class="bi bi-shield-lock-fill me-1"></i> Admin</span>
        <h5 class="fw-bold mb-0 text-white fs-6">
            Resumen de Ventas por 
            @if($agruparPor == 'usuario') Usuario (Sistema)
            @elseif($agruparPor == 'marca') Marca
            @elseif($agruparPor == 'categoria') Categoría
            @else Vendedor
            @endif
        </h5>
        <small class="text-white-50 ms-2 d-none d-lg-inline">Consolidado general de ventas brutas, devoluciones y venta neta.</small>
    </div>
    <div class="d-none d-md-block">
        <span class="fs-5">📊</span>
    </div>
</div>

<!-- BARRA DE FILTROS EN LÍNEA (CAMPOS CON TAMAÑO PROPORCIONAL Y COMPACTO) -->
<div class="filter-card">
    <form action="{{ url('resumenVentasConsulta') }}" method="GET" class="d-flex flex-wrap align-items-end gap-2">
        
        <!-- Fecha Inicial -->
        <div class="filter-item" style="width: 125px;">
            <label class="filter-label">📅 Desde</label>
            <input required type="date" name="fi" value="{{ $fei }}" class="form-control filter-input">
        </div>

        <!-- Fecha Final -->
        <div class="filter-item" style="width: 125px;">
            <label class="filter-label">📅 Hasta</label>
            <input required type="date" name="ff" value="{{ $fef }}" class="form-control filter-input">
        </div>

        <!-- Bodega -->
        <div class="filter-item" style="width: 140px;">
            <label class="filter-label">🏢 Bodega</label>
            <select name="bodega" class="form-select select2">
                <option value="0" {{ empty($bodegaSel) || (string)$bodegaSel === '0' ? 'selected' : '' }}>Todas (General)</option>
                @isset($bodegas)
                    @foreach ($bodegas as $b)
                        <option value="{{ $b->id }}" {{ (string)$bodegaSel !== '0' && (string)$bodegaSel === (string)$b->id ? 'selected' : '' }}>{{ $b->nombreBodega }}</option>
                    @endforeach
                @endisset
            </select>
        </div>

        <!-- Agrupar Por -->
        <div class="filter-item" style="width: 145px;">
            <label class="filter-label text-primary"><i class="bi bi-diagram-3-fill"></i> Agrupar Por</label>
            <select name="agruparPor" id="agruparPorSelect" class="form-select select2">
                <option value="vendedor" {{ (string)$agruparPor === 'vendedor' ? 'selected' : '' }}>👤 Vendedor</option>
                <option value="usuario" {{ (string)$agruparPor === 'usuario' ? 'selected' : '' }}>💻 Usuario</option>
                <option value="marca" {{ (string)$agruparPor === 'marca' ? 'selected' : '' }}>🏷️ Marca</option>
                <option value="categoria" {{ (string)$agruparPor === 'categoria' ? 'selected' : '' }}>📁 Categoría</option>
            </select>
        </div>

        <!-- Vendedor -->
        <div class="filter-item" style="width: 155px;">
            <label class="filter-label">👤 Vendedor</label>
            <select name="filtroVendedor" class="form-select select2">
                <option value="Todos" {{ empty($filtroVendedor) || (string)$filtroVendedor === 'Todos' ? 'selected' : '' }}>Todos</option>
                @isset($vendedores)
                    @foreach ($vendedores as $v)
                        <option value="{{ $v->id }}" {{ (string)$filtroVendedor === (string)$v->id ? 'selected' : '' }}>{{ $v->nombrev }}</option>
                    @endforeach
                @endisset
            </select>
        </div>

        <!-- Usuario -->
        <div class="filter-item" style="width: 135px;">
            <label class="filter-label">💻 Usuario</label>
            <select name="filtroUsuario" class="form-select select2">
                <option value="Todos" {{ empty($filtroUsuario) || (string)$filtroUsuario === 'Todos' ? 'selected' : '' }}>Todos</option>
                @isset($usuariosList)
                    @foreach ($usuariosList as $u)
                        <option value="{{ $u }}" {{ (string)$filtroUsuario === (string)$u ? 'selected' : '' }}>{{ $u }}</option>
                    @endforeach
                @endisset
            </select>
        </div>

        <!-- Marca -->
        <div class="filter-item" style="width: 155px;">
            <label class="filter-label">🏷️ Marca</label>
            <select name="filtroMarca" class="form-select select2">
                <option value="Todos" {{ empty($filtroMarca) || (string)$filtroMarca === 'Todos' ? 'selected' : '' }}>Todos</option>
                @isset($marcas)
                    @foreach ($marcas as $m)
                        <option value="{{ $m->codmarca }}" {{ (string)$filtroMarca === (string)$m->codmarca ? 'selected' : '' }}>{{ $m->nommarca }}</option>
                    @endforeach
                @endisset
            </select>
        </div>

        <!-- Categoría -->
        <div class="filter-item" style="width: 155px;">
            <label class="filter-label">📁 Categoría</label>
            <select name="filtroCategoria" class="form-select select2">
                <option value="Todos" {{ empty($filtroCategoria) || (string)$filtroCategoria === 'Todos' ? 'selected' : '' }}>Todos</option>
                @isset($categorias)
                    @foreach ($categorias as $c)
                        <option value="{{ $c->codcategoria }}" {{ (string)$filtroCategoria === (string)$c->codcategoria ? 'selected' : '' }}>{{ $c->nomcategoria }}</option>
                    @endforeach
                @endisset
            </select>
        </div>

        <!-- Botones de Acción al Lado -->
        <div class="d-flex align-items-center gap-1 ms-auto mt-2 mt-xxl-0">
            <button type="submit" name="consul" class="btn-exec-primary">
                <i class="bi bi-search"></i> Consultar
            </button>
            <button type="submit" name="exportarC" value="1" class="btn-exec-success">
                <i class="bi bi-file-earmark-excel"></i> Excel
            </button>
            @include('menu.botonRegresar')
        </div>
    </form>
</div>

@php
    $totFacturas = 0;
    $totVentaBruta = 0;
    $totDevolucion = 0;
    $totVentaNeta = 0;
    $totBaseIva = 0;
    $totTotalIva = 0;

    $chartLabels = [];
    $chartVentasNetas = [];
    $chartVentasBrutas = [];
    $chartDevoluciones = [];

    if (!empty($resultados)) {
        foreach ($resultados as $item) {
            $totFacturas += $item['cant_facturas'];
            $totVentaBruta += $item['venta_bruta'];
            $totDevolucion += $item['devolucion'];
            $totVentaNeta += $item['venta_neta'];
            $totBaseIva += $item['base_iva'];
            $totTotalIva += $item['total_iva'];

            $chartLabels[] = $item['nombre'];
            $chartVentasNetas[] = round($item['venta_neta'], 2);
            $chartVentasBrutas[] = round($item['venta_bruta'], 2);
            $chartDevoluciones[] = round($item['devolucion'], 2);
        }
    }

    $nombreTipoAgrupacion = 'Vendedor';
    if ($agruparPor == 'usuario') $nombreTipoAgrupacion = 'Usuario';
    elseif ($agruparPor == 'marca') $nombreTipoAgrupacion = 'Marca';
    elseif ($agruparPor == 'categoria') $nombreTipoAgrupacion = 'Categoría';
@endphp

@if(!empty($resultados))

<!-- TARJETAS KPI RESPONSIVAS -->
<div class="row g-2">
    <div class="col-12 col-sm-6 col-xl-3">
        <div class="kpi-card kpi-neta">
            <div class="kpi-title">Venta Neta Total</div>
            <div class="kpi-value">${{ number_format($totVentaNeta, 2) }}</div>
            <div class="kpi-icon">💰</div>
        </div>
    </div>
    <div class="col-12 col-sm-6 col-xl-3">
        <div class="kpi-card kpi-bruta">
            <div class="kpi-title">Ventas Brutas</div>
            <div class="kpi-value">${{ number_format($totVentaBruta, 2) }}</div>
            <div class="kpi-icon">📈</div>
        </div>
    </div>
    <div class="col-12 col-sm-6 col-xl-3">
        <div class="kpi-card kpi-devo">
            <div class="kpi-title">Total Devoluciones</div>
            <div class="kpi-value">${{ number_format($totDevolucion, 2) }}</div>
            <div class="kpi-icon">🔄</div>
        </div>
    </div>
    <div class="col-12 col-sm-6 col-xl-3">
        <div class="kpi-card kpi-fact">
            <div class="kpi-title">Total Facturas</div>
            <div class="kpi-value">{{ number_format($totFacturas) }}</div>
            <div class="kpi-icon">📄</div>
        </div>
    </div>
</div>

<!-- GRÁFICOS RESPONSIVOS -->
<div class="row g-2">
    <!-- GRÁFICO 1: BARRAS - VENTA NETA -->
    <div class="col-12 col-lg-7 col-xl-8">
        <div class="chart-card">
            <div class="chart-header">
                <span>📊</span> Venta Neta por {{ $nombreTipoAgrupacion }}
            </div>
            <div style="height: 280px; position: relative;">
                <canvas id="chartVentasNetasBar"></canvas>
            </div>
        </div>
    </div>

    <!-- GRÁFICO 2: DONUT - PARTICIPACIÓN % -->
    <div class="col-12 col-lg-5 col-xl-4">
        <div class="chart-card">
            <div class="chart-header">
                <span>🍩</span> Participación en Ventas por {{ $nombreTipoAgrupacion }}
            </div>
            <div style="height: 280px; position: relative;">
                <canvas id="chartParticipacionDoughnut"></canvas>
            </div>
        </div>
    </div>
</div>

<!-- TABLA 100% RESPONSIVA CON CONTENEDOR DESLIZABLE -->
<div class="chart-card">
    <div class="chart-header justify-content-between flex-wrap gap-2">
        <span>📋 Desglose Detallado por {{ $nombreTipoAgrupacion }}</span>
        <span class="badge bg-secondary text-wrap fw-normal fs-7">
            {{ count($resultados) }} Registros
        </span>
    </div>
    
    <!-- CONTENEDOR CON DESPLAZAMIENTO HORIZONTAL FLUIDO -->
    <div class="table-responsive-container">
        <table class="table custom-table" id="tablep">
            <thead>
                <tr>
                    <th scope="col">
                        @if($agruparPor == 'usuario') Usuario
                        @elseif($agruparPor == 'marca') Código Marca
                        @elseif($agruparPor == 'categoria') Código Categoría
                        @else Código Vendedor
                        @endif
                    </th>
                    <th scope="col">
                        @if($agruparPor == 'usuario') Nombre Usuario
                        @elseif($agruparPor == 'marca') Nombre Marca
                        @elseif($agruparPor == 'categoria') Nombre Categoría
                        @else Nombre Vendedor
                        @endif
                    </th>
                    <th scope="col" class="text-center">Facturas</th>
                    <th scope="col" class="text-end">Venta Bruta</th>
                    <th scope="col" class="text-end text-danger">Devoluciones</th>
                    <th scope="col" class="text-end text-success fw-bold">Venta Neta</th>
                    <th scope="col" class="text-end">% Participación</th>
                    <th scope="col" class="text-end">Base IVA</th>
                    <th scope="col" class="text-end">Total IVA</th>
                </tr>
            </thead>
            <tbody>        
                @foreach ($resultados as $item)
                @php
                    $porcentaje = $totVentaNeta > 0 ? ($item['venta_neta'] / $totVentaNeta) * 100 : 0;
                @endphp
                <tr>
                    <th class="align-middle text-muted small">{{ $item['codigo'] }}</th>
                    <td class="align-middle fw-bold text-dark">{{ $item['nombre'] }}</td>
                    <td class="align-middle text-center">
                        <span class="badge bg-light text-dark border px-2 py-1 fs-7">{{ number_format($item['cant_facturas']) }}</span>
                    </td>
                    <td class="align-middle text-end fw-semibold">${{ number_format($item['venta_bruta'], 2) }}</td>
                    <td class="align-middle text-end text-danger fw-semibold">
                        @if($item['devolucion'] > 0)
                            -${{ number_format($item['devolucion'], 2) }}
                        @else
                            $0.00
                        @endif
                    </td>
                    <td class="align-middle text-end text-success fw-bold">${{ number_format($item['venta_neta'], 2) }}</td>
                    <td class="align-middle text-end">
                        <div class="d-flex align-items-center justify-content-end gap-2">
                            <small class="fw-bold text-secondary">{{ number_format($porcentaje, 1) }}%</small>
                            <div class="progress" style="width: 55px; height: 5px;">
                                <div class="progress-bar bg-success" role="progressbar" style="width: {{ $porcentaje }}%"></div>
                            </div>
                        </div>
                    </td>
                    <td class="align-middle text-end text-secondary small">${{ number_format($item['base_iva'], 2) }}</td>
                    <td class="align-middle text-end text-secondary small">${{ number_format($item['total_iva'], 2) }}</td>
                </tr>
                @endforeach
            </tbody>
            <tfoot>
                <tr class="table-dark fw-bold bg-dark text-white">
                    <td colspan="2" class="text-end align-middle">TOTAL GENERAL:</td>
                    <td class="text-center align-middle">{{ number_format($totFacturas) }}</td>
                    <td class="text-end align-middle">${{ number_format($totVentaBruta, 2) }}</td>
                    <td class="text-end align-middle text-warning">${{ number_format($totDevolucion, 2) }}</td>
                    <td class="text-end align-middle text-info">${{ number_format($totVentaNeta, 2) }}</td>
                    <td class="text-end align-middle">100%</td>
                    <td class="text-end align-middle">${{ number_format($totBaseIva, 2) }}</td>
                    <td class="text-end align-middle">${{ number_format($totTotalIva, 2) }}</td>
                </tr>
            </tfoot>
        </table> 
    </div>
</div>

@else
<div class="chart-card text-center py-4">
    <div class="fs-2 text-muted mb-1">🔍</div>
    <h5 class="fw-bold text-secondary mb-1">No se encontraron resultados</h5>
    <p class="text-muted small mb-0">Seleccione un rango de fechas y presione el botón <strong>Generar Resumen</strong> para visualizar los gráficos y datos.</p>
</div>
@endif

@endsection

@section('pie')
<!-- Scripts: Chart.js y Select2 cargados después de jQuery -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script>
$(document).ready(function () {
    // Inicializar Select2 con buscador integrado en tiempo real
    if ($.fn.select2) {
        $('.select2').select2({
            width: '100%',
            dropdownAutoWidth: true,
            language: {
                noResults: function() {
                    return "No se encontraron coincidencias";
                },
                searching: function() {
                    return "Buscando...";
                }
            }
        });
    }

    // INICIALIZACIÓN DE GRÁFICOS CHART.JS
    const labels = {!! json_encode($chartLabels) !!};
    const ventasNetas = {!! json_encode($chartVentasNetas) !!};

    if (labels && labels.length > 0) {

        // CHART DE BARRAS DE VENTAS NETAS
        const ctxBar = document.getElementById('chartVentasNetasBar').getContext('2d');
        const gradientNetas = ctxBar.createLinearGradient(0, 0, 0, 250);
        gradientNetas.addColorStop(0, 'rgba(37, 99, 235, 0.9)');
        gradientNetas.addColorStop(1, 'rgba(59, 130, 246, 0.2)');

        new Chart(ctxBar, {
            type: 'bar',
            data: {
                labels: labels,
                datasets: [{
                    label: 'Venta Neta',
                    data: ventasNetas,
                    backgroundColor: gradientNetas,
                    borderColor: '#1d4ed8',
                    borderWidth: 1.5,
                    borderRadius: 6,
                    maxBarThickness: 38
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: { display: false },
                    tooltip: {
                        callbacks: {
                            label: function(context) {
                                return ' Venta Neta: $' + context.raw.toLocaleString('es-CO');
                            }
                        }
                    }
                },
                scales: {
                    y: {
                        beginAtZero: true,
                        grid: { color: '#f1f5f9' },
                        ticks: {
                            callback: function(val) {
                                return '$' + val.toLocaleString('es-CO');
                            }
                        }
                    },
                    x: {
                        grid: { display: false }
                    }
                }
            }
        });

        // CHART DONUT DE PARTICIPACIÓN
        const ctxDoughnut = document.getElementById('chartParticipacionDoughnut').getContext('2d');
        const colors = [
            '#2563eb', '#10b981', '#f59e0b', '#ef4444', '#8b5cf6',
            '#06b6d4', '#ec4899', '#64748b', '#3b82f6', '#14b8a6'
        ];

        new Chart(ctxDoughnut, {
            type: 'doughnut',
            data: {
                labels: labels,
                datasets: [{
                    data: ventasNetas,
                    backgroundColor: colors.slice(0, labels.length),
                    borderWidth: 2,
                    borderColor: '#ffffff'
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        position: 'bottom',
                        labels: {
                            boxWidth: 10,
                            font: { size: 10 }
                        }
                    },
                    tooltip: {
                        callbacks: {
                            label: function(context) {
                                const total = ventasNetas.reduce((a, b) => a + b, 0);
                                const percentage = total > 0 ? ((context.raw / total) * 100).toFixed(1) : 0;
                                return ` ${context.label}: $${context.raw.toLocaleString('es-CO')} (${percentage}%)`;
                            }
                        }
                    }
                },
                cutout: '65%'
            }
        });
    }
});
</script>
@endsection