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

@section('contenido') 
<style>
    .admin-banner {
        background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%);
        color: #ffffff;
        padding: 18px 24px;
        border-radius: 14px;
        box-shadow: 0 4px 15px -3px rgba(15, 23, 42, 0.15);
        margin-bottom: 20px;
    }

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

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

    .filter-card label {
        font-size: 0.82rem;
        font-weight: 700;
        color: #475569;
        text-transform: uppercase;
        letter-spacing: 0.4px;
        margin-bottom: 5px;
    }

    .kpi-card {
        border-radius: 14px;
        padding: 16px 20px;
        color: white;
        box-shadow: 0 4px 14px -2px rgba(0,0,0,0.1);
        transition: all 0.25s ease;
        position: relative;
        overflow: hidden;
        margin-bottom: 16px;
        height: 100%;
    }

    .kpi-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 22px -2px rgba(0,0,0,0.18);
    }

    .kpi-icon {
        position: absolute;
        right: 18px;
        bottom: 10px;
        font-size: 2.5rem;
        opacity: 0.22;
    }

    .kpi-ventas { background: linear-gradient(135deg, #059669 0%, #10b981 100%); }
    .kpi-presupuesto { background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%); }
    .kpi-diferencia { background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%); }
    .kpi-cumplimiento-success { background: linear-gradient(135deg, #047857 0%, #10b981 100%); }
    .kpi-cumplimiento-warning { background: linear-gradient(135deg, #d97706 0%, #f59e0b 100%); }
    .kpi-cumplimiento-danger { background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%); }
    .kpi-cumplimiento-neutral { background: linear-gradient(135deg, #64748b 0%, #94a3b8 100%); }

    .kpi-title {
        font-size: 0.78rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        opacity: 0.92;
        margin-bottom: 6px;
    }

    .kpi-value {
        font-size: 1.55rem;
        font-weight: 800;
        line-height: 1.15;
    }

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

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

    .table-responsive-container {
        width: 100%;
        overflow-x: auto;
        border-radius: 12px;
        border: 1px solid #e2e8f0;
        box-shadow: 0 2px 10px rgba(0,0,0,0.03);
    }

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

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

    .custom-table tbody td, .custom-table tbody th {
        padding: 12px 16px;
        border-bottom: 1px solid #f1f5f9;
    }

    .custom-table tbody tr:hover {
        background-color: #f8fafc;
    }
</style>

<!-- Chart.js CDN -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<div class="container-fluid px-3 py-2">

    <!-- Header Banner -->
    <div class="admin-banner d-flex justify-content-between align-items-center flex-wrap gap-2">
        <div>
            <div class="d-flex align-items-center gap-2">
                <span class="badge-admin">Módulo Metas</span>
                <span class="text-white-50 fs-7">Control & Rendimiento</span>
            </div>
            <h2 class="h3 font-weight-bold text-white mb-0 mt-1">
                <i class="fas fa-chart-line me-2 text-primary"></i>INFORME DE CUMPLIMIENTO Y METAS
            </h2>
        </div>
        <div>
            @include('menu.botonRegresar')
        </div>
    </div>

    <!-- Filtros de Consulta -->
    <div class="filter-card">
        <form action="cumplimientosInf" method="GET" class="row g-3 align-items-end">
            
            <div class="col-md-2 col-sm-6">
                <label for="fecI"><i class="far fa-calendar-alt text-primary me-1"></i>Fecha Inicial</label>
                <input required type="date" name="fi" id="fecI" value="{{ $fi }}" class="form-control form-control-sm">
            </div>

            <div class="col-md-2 col-sm-6">
                <label for="fecF"><i class="far fa-calendar-check text-primary me-1"></i>Fecha Final</label>
                <input required type="date" name="ff" id="fecF" value="{{ $ff }}" class="form-control form-control-sm">
            </div>

            <div class="col-md-3 col-sm-6">
                <label><i class="fas fa-warehouse text-primary me-1"></i>Bodega</label>
                <div>
                    @include('../menu.bodegas')
                </div>
            </div>

            <div class="col-md-2 col-sm-6">
                <label for="tipoSel"><i class="fas fa-user-tag text-primary me-1"></i>Tipo</label>
                <select name="Tipo" id="tipoSel" class="form-control form-control-sm">
                    <option value="vendedor" {{ $Tipo == 'vendedor' ? 'selected' : '' }}>Vendedor</option>
                    <option value="bodega" {{ $Tipo == 'bodega' ? 'selected' : '' }}>Bodega</option>
                </select>
            </div>

            <div class="col-md-2 col-sm-6">
                <label for="agrupSel"><i class="fas fa-layer-group text-primary me-1"></i>Agrupado</label>
                <select name="Agrupado" id="agrupSel" class="form-control form-control-sm">
                    <option value="resumido" {{ $Agrupado == 'resumido' ? 'selected' : '' }}>Resumido</option>
                    <option value="detallado" {{ $Agrupado == 'detallado' ? 'selected' : '' }}>Detallado</option>
                </select>
            </div>      

            <div class="col-md-1 col-sm-6 d-flex gap-2 w-100 mt-3 justify-content-end">
                <button type="submit" id="botonf" class="btn btn-primary btn-sm px-4 font-weight-bold shadow-sm">
                    <i class="fas fa-search me-1"></i> Consultar
                </button>
                <button type="submit" name="exportarC" class="btn btn-success btn-sm px-4 font-weight-bold shadow-sm" value="1">
                    <i class="fas fa-file-excel me-1"></i> Exportar
                </button>
            </div>
        </form>
    </div>

    @isset($productos)
        @php
            $totVentaGlobal = 0;
            $totPresupuestoGlobal = 0;
            $totVentaConPresupuestoGlobal = 0;
            
            // 1. Agrupación consolidada por Entidad (Vendedor o Bodega) para evitar gráficos sobrecargados por días
            $entidades = [];
            $diarios = [];

            foreach ($productos as $item) {
                $code = ($Tipo == "vendedor") ? ($item["codigoVendedor"] ?? '') : ($item["bodega"] ?? '');
                $name = ($Tipo == "vendedor") ? ($item["nombrev"] ?? '') : ($item["nombreB"] ?? '');
                
                $vReal = floatval($item["valor"] ?? 0);
                $vPres = floatval($item["valorPresup"] ?? 0);

                $totVentaGlobal += $vReal;
                $totPresupuestoGlobal += $vPres;
                if ($vPres > 0) {
                    $totVentaConPresupuestoGlobal += $vReal;
                }

                // Agrupar por Entidad (Vendedor o Bodega)
                if (!isset($entidades[$code])) {
                    $entidades[$code] = [
                        'nombre' => $name,
                        'venta' => 0,
                        'presupuesto' => 0
                    ];
                }
                $entidades[$code]['venta'] += $vReal;
                $entidades[$code]['presupuesto'] += $vPres;

                // Agrupar por Día (para el gráfico de tendencia temporal si es detallado)
                if ($Agrupado == "detallado" && isset($item["diaV"])) {
                    $fechaKey = sprintf('%02d/%02d', $item["diaV"], $item["mesV"] ?? 1);
                    if (!isset($diarios[$fechaKey])) {
                        $diarios[$fechaKey] = [
                            'venta' => 0,
                            'presupuesto' => 0
                        ];
                    }
                    $diarios[$fechaKey]['venta'] += $vReal;
                    $diarios[$fechaKey]['presupuesto'] += $vPres;
                }
            }

            $totDiferenciaGlobal = $totVentaGlobal - $totPresupuestoGlobal;

            $hasGlobalPresupuesto = ($totPresupuestoGlobal > 0);
            $cumplimientoGlobalPct = $hasGlobalPresupuesto ? round(($totVentaConPresupuestoGlobal / $totPresupuestoGlobal) * 100, 1) : 0;

            if (!$hasGlobalPresupuesto) {
                $kpiClassCumpl = 'kpi-cumplimiento-neutral';
            } elseif ($cumplimientoGlobalPct >= 100) {
                $kpiClassCumpl = 'kpi-cumplimiento-success';
            } elseif ($cumplimientoGlobalPct >= 80) {
                $kpiClassCumpl = 'kpi-cumplimiento-warning';
            } else {
                $kpiClassCumpl = 'kpi-cumplimiento-danger';
            }

            // Preparar datos para Gráficos Consolidados por Entidad
            $chartEntityLabels = [];
            $chartEntityVentas = [];
            $chartEntityPresupuestos = [];
            $chartEntityPct = [];

            foreach ($entidades as $ent) {
                $chartEntityLabels[] = strlen($ent['nombre']) > 22 ? substr($ent['nombre'], 0, 22) . '...' : $ent['nombre'];
                $chartEntityVentas[] = round($ent['venta'], 0);
                $chartEntityPresupuestos[] = round($ent['presupuesto'], 0);
                
                $pctEnt = ($ent['presupuesto'] > 0) ? round(($ent['venta'] / $ent['presupuesto']) * 100, 1) : 0;
                $chartEntityPct[] = $pctEnt;
            }

            // Preparar datos para Gráfico de Tendencia Diaria (si es detallado)
            ksort($diarios);
            $chartDailyLabels = array_keys($diarios);
            $chartDailyVentas = array_column($diarios, 'venta');
            $chartDailyPresupuestos = array_column($diarios, 'presupuesto');
        @endphp

        <!-- Dashboard KPI Summary Cards -->
        <div class="row g-3 mb-4">
            <div class="col-lg-3 col-md-6">
                <div class="kpi-card kpi-ventas">
                    <div class="kpi-title">Ventas Reales Totales</div>
                    <div class="kpi-value">${{ number_format($totVentaGlobal, 0) }}</div>
                    <i class="fas fa-hand-holding-usd kpi-icon"></i>
                </div>
            </div>

            <div class="col-lg-3 col-md-6">
                <div class="kpi-card kpi-presupuesto">
                    <div class="kpi-title">Presupuesto Meta Total</div>
                    <div class="kpi-value">${{ number_format($totPresupuestoGlobal, 0) }}</div>
                    <i class="fas fa-bullseye kpi-icon"></i>
                </div>
            </div>

            <div class="col-lg-3 col-md-6">
                <div class="kpi-card kpi-diferencia">
                    <div class="kpi-title">Diferencia Total</div>
                    <div class="kpi-value">${{ number_format($totDiferenciaGlobal, 0) }}</div>
                    <i class="fas fa-balance-scale kpi-icon"></i>
                </div>
            </div>

            <div class="col-lg-3 col-md-6">
                <div class="kpi-card {{ $kpiClassCumpl }}">
                    <div class="kpi-title">% Cumplimiento Global</div>
                    <div class="kpi-value">
                        @if($hasGlobalPresupuesto)
                            {{ $cumplimientoGlobalPct > 999 ? '>999%' : number_format($cumplimientoGlobalPct, 1) . '%' }}
                        @else
                            N/A <span style="font-size: 0.75rem; font-weight: normal; opacity: 0.85;">(Sin Meta)</span>
                        @endif
                    </div>
                    <i class="fas fa-trophy kpi-icon"></i>
                </div>
            </div>
        </div>

        <!-- Seccion de Gráficas Interactivas -->
        @if(count($entidades) > 0)
            <div class="row g-3 mb-4">
                <div class="col-lg-7">
                    <div class="chart-card">
                        <div class="chart-header">
                            <i class="fas fa-chart-bar text-primary"></i>
                            <span>Consolidado por {{ ucfirst($Tipo) }}: Presupuesto vs Venta Real</span>
                        </div>
                        <div style="position: relative; height: 320px;">
                            <canvas id="chartComparativo"></canvas>
                        </div>
                    </div>
                </div>

                <div class="col-lg-5">
                    <div class="chart-card">
                        <div class="chart-header">
                            <i class="fas fa-percentage text-success"></i>
                            <span>Ranking de Cumplimiento (%) por {{ ucfirst($Tipo) }}</span>
                        </div>
                        <div style="position: relative; height: 320px;">
                            <canvas id="chartCumplimientoPct"></canvas>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Gráfico Secundario de Tendencia Diaria (Solo cuando es detallado) -->
            @if($Agrupado == "detallado" && count($chartDailyLabels) > 1)
                <div class="row g-3 mb-4">
                    <div class="col-12">
                        <div class="chart-card">
                            <div class="chart-header">
                                <i class="fas fa-chart-line text-info"></i>
                                <span>Evolución Diaria del Periodo (Venta Real vs Presupuesto)</span>
                            </div>
                            <div style="position: relative; height: 280px;">
                                <canvas id="chartTendenciaDiaria"></canvas>
                            </div>
                        </div>
                    </div>
                </div>
            @endif
        @endif
    @endisset

    <!-- Tabla Detallada -->
    <div class="chart-card p-3">
        <div class="chart-header mb-3">
            <i class="fas fa-table text-dark"></i>
            <span>Detalle de Cumplimiento</span>
        </div>
        @include('../menu/exportar.exportarCumplimientos') 
    </div>

</div>

<!-- Scripts de Inicialización de Chart.js -->
@isset($productos)
    @if(count($entidades) > 0)
        <script>
            document.addEventListener('DOMContentLoaded', function () {
                const entityLabels = {!! json_encode($chartEntityLabels) !!};
                const entityVentas = {!! json_encode($chartEntityVentas) !!};
                const entityPresupuestos = {!! json_encode($chartEntityPresupuestos) !!};
                const entityPcts = {!! json_encode($chartEntityPct) !!};

                // 1. Gráfico de Barras Comparativo por Entidad (Vendedor/Bodega Acumulado)
                const ctxBar = document.getElementById('chartComparativo').getContext('2d');
                new Chart(ctxBar, {
                    type: 'bar',
                    data: {
                        labels: entityLabels,
                        datasets: [
                            {
                                label: 'Presupuesto Meta ($)',
                                data: entityPresupuestos,
                                backgroundColor: 'rgba(59, 130, 246, 0.85)',
                                borderColor: '#2563eb',
                                borderWidth: 1.5,
                                borderRadius: 6
                            },
                            {
                                label: 'Venta Real ($)',
                                data: entityVentas,
                                backgroundColor: 'rgba(16, 185, 129, 0.85)',
                                borderColor: '#059669',
                                borderWidth: 1.5,
                                borderRadius: 6
                            }
                        ]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        plugins: {
                            legend: {
                                position: 'top',
                                labels: { font: { weight: 'bold' } }
                            },
                            tooltip: {
                                callbacks: {
                                    label: function(context) {
                                        let value = context.raw || 0;
                                        return context.dataset.label + ': $' + new Intl.NumberFormat('es-CO').format(value);
                                    }
                                }
                            }
                        },
                        scales: {
                            y: {
                                beginAtZero: true,
                                ticks: {
                                    callback: function(value) {
                                        return '$' + new Intl.NumberFormat('es-CO', { notation: 'compact' }).format(value);
                                    }
                                }
                            },
                            x: {
                                ticks: {
                                    font: { size: 11, weight: 'bold' }
                                }
                            }
                        }
                    }
                });

                // 2. Gráfico Horizontal de Porcentaje de Cumplimiento por Entidad
                const ctxPct = document.getElementById('chartCumplimientoPct').getContext('2d');
                
                const bgColorsPct = entityPcts.map(p => p >= 100 ? 'rgba(16, 185, 129, 0.85)' : (p > 0 ? (p >= 80 ? 'rgba(245, 158, 11, 0.85)' : 'rgba(239, 68, 68, 0.85)') : 'rgba(148, 163, 184, 0.6)'));
                const borderColorsPct = entityPcts.map(p => p >= 100 ? '#047857' : (p > 0 ? (p >= 80 ? '#d97706' : '#dc2626') : '#64748b'));

                new Chart(ctxPct, {
                    type: 'bar',
                    data: {
                        labels: entityLabels,
                        datasets: [{
                            label: '% Cumplimiento',
                            data: entityPcts,
                            backgroundColor: bgColorsPct,
                            borderColor: borderColorsPct,
                            borderWidth: 1.5,
                            borderRadius: 6
                        }]
                    },
                    options: {
                        indexAxis: 'y',
                        responsive: true,
                        maintainAspectRatio: false,
                        plugins: {
                            legend: { display: false },
                            tooltip: {
                                callbacks: {
                                    label: function(context) {
                                        return context.raw > 0 ? '% Cumplimiento: ' + context.raw + '%' : 'Sin presupuesto asignado (N/A)';
                                    }
                                }
                            }
                        },
                        scales: {
                            x: {
                                beginAtZero: true,
                                ticks: {
                                    callback: function(value) {
                                        return value + '%';
                                    }
                                }
                            }
                        }
                    }
                });

                // 3. Gráfico Opcional de Tendencia Diaria (Líneas)
                @if($Agrupado == "detallado" && count($chartDailyLabels) > 1)
                    const dailyLabels = {!! json_encode($chartDailyLabels) !!};
                    const dailyVentas = {!! json_encode($chartDailyVentas) !!};
                    const dailyPresupuestos = {!! json_encode($chartDailyPresupuestos) !!};

                    const ctxDaily = document.getElementById('chartTendenciaDiaria').getContext('2d');
                    new Chart(ctxDaily, {
                        type: 'line',
                        data: {
                            labels: dailyLabels,
                            datasets: [
                                {
                                    label: 'Venta Real Diaria ($)',
                                    data: dailyVentas,
                                    borderColor: '#10b981',
                                    backgroundColor: 'rgba(16, 185, 129, 0.15)',
                                    fill: true,
                                    tension: 0.3,
                                    pointRadius: 4,
                                    pointHoverRadius: 6
                                },
                                {
                                    label: 'Presupuesto Meta Diario ($)',
                                    data: dailyPresupuestos,
                                    borderColor: '#3b82f6',
                                    borderDash: [5, 5],
                                    backgroundColor: 'transparent',
                                    fill: false,
                                    tension: 0.1,
                                    pointRadius: 3
                                }
                            ]
                        },
                        options: {
                            responsive: true,
                            maintainAspectRatio: false,
                            plugins: {
                                legend: { position: 'top' },
                                tooltip: {
                                    callbacks: {
                                        label: function(context) {
                                            return context.dataset.label + ': $' + new Intl.NumberFormat('es-CO').format(context.raw);
                                        }
                                    }
                                }
                            },
                            scales: {
                                y: {
                                    beginAtZero: true,
                                    ticks: {
                                        callback: function(value) {
                                            return '$' + new Intl.NumberFormat('es-CO', { notation: 'compact' }).format(value);
                                        }
                                    }
                                }
                            }
                        }
                    });
                @endif
            });
        </script>
    @endif
@endisset

@endsection