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

@section('styles')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
@endsection

@section('contenido')
<style>
    .dashboard-header {
        background: linear-gradient(135deg, #1d976c 0%, #93f9b9 100%);
        color: white;
        padding: 20px;
        border-radius: 12px;
        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        margin-bottom: 25px;
    }
    
    .filter-card {
        background: white;
        border-radius: 12px;
        box-shadow: 0 4px 20px rgba(0,0,0,0.05);
        padding: 25px;
        margin-bottom: 25px;
        border-top: 4px solid #1d976c;
    }

    .kpi-card {
        border-radius: 12px;
        padding: 20px;
        color: white;
        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        transition: transform 0.3s ease;
        position: relative;
        overflow: hidden;
    }
    
    .kpi-card:hover { font-weight: bold; transform: translateY(-5px); }
    
    .kpi-icon { position: absolute; right: 15px; top: 20px; font-size: 3rem; opacity: 0.2; }

    .kpi-total { background: linear-gradient(45deg, #FF8008, #FFC837); }
    .kpi-promedio { background: linear-gradient(45deg, #1D976C, #93F9B9); }
    .kpi-mejor { background: linear-gradient(45deg, #4b6cb7, #182848); }
    .kpi-facturas { background: linear-gradient(45deg, #EB3349, #F45C43); }

    .chart-container-box {
        background: white;
        border-radius: 12px;
        padding: 20px;
        box-shadow: 0 4px 20px rgba(0,0,0,0.05);
        margin-bottom: 25px;
        border: 1px solid #f0f0f0;
    }
    
    .chart-title {
        font-size: 1.1rem;
        font-weight: 600;
        color: #333;
        margin-bottom: 15px;
        border-bottom: 2px solid #f0f0f0;
        padding-bottom: 10px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .table-responsive {
        max-height: 500px;
        overflow-y: auto;
    }

    .btn-consultar {
        background: #1d976c;
        color: white;
        font-weight: bold;
        border: none;
        padding: 10px 30px;
        border-radius: 30px;
        box-shadow: 0 4px 15px rgba(29, 151, 108, 0.4);
        transition: all 0.3s ease;
    }
    
    .btn-consultar:hover { background: #136a4b; transform: translateY(-2px); }

    .loader {
        display: none;
        position: fixed;
        top: 0; left: 0; width: 100%; height: 100%;
        background: rgba(255,255,255,0.8);
        z-index: 9999;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
    .spinner {
        border: 5px solid #f3f3f3;
        border-top: 5px solid #1d976c;
        border-radius: 50%;
        width: 50px;
        height: 50px;
        animation: spin 1s linear infinite;
    }
    @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

    .rank-badge {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
        color: white;
    }
    .badge-rank-1 { background: #FFD700; color: #000; } /* Gold */
    .badge-rank-2 { background: #C0C0C0; color: #000; } /* Silver */
    .badge-rank-3 { background: #CD7F32; color: #fff; } /* Bronze */
    .badge-rank-oth { background: #f0f0f0; color: #333; }
</style>

<div class="loader" id="loader">
    <div class="spinner"></div>
    <h4 class="mt-3 text-success font-weight-bold">Analizando Clientes...</h4>
</div>

<div class="container-fluid mb-5">
    
    <div class="dashboard-header mb-4" style="display: flex; justify-content: space-between; align-items: center; background: linear-gradient(135deg, #1d976c 0%, #115e43 100%); color: white; padding: 20px; border-radius: 15px;">
        <div style="display: flex; align-items: center;">
            <button type="button" class="btn btn-light" onclick="window.location.href='{{ url('/inicio') }}'" style="border-radius: 20px; padding: 5px 15px; margin-right: 20px; font-weight: bold; color: #1d976c; border: none;">
                <i class="fa fa-home"></i> Inicio
            </button>
            <div>
                <h2 class="m-0" style="margin:0; font-weight: bold;">🏆 Mejores Clientes</h2>
                <p class="m-0 opacity-75" style="margin:0;">Ventas netas por cliente</p>
            </div>
        </div>
        <div>
            <button type="button" id="btnExportar" class="btn btn-success" style="border-radius: 20px; padding: 8px 25px; font-weight: bold; background-color: #ffffff; color: #1d976c; border: none; box-shadow: 0 4px 10px rgba(0,0,0,0.2);">
                <i class="fa fa-file-excel-o"></i> EXPORTAR EXCEL
            </button>
        </div>
    </div>

    <!-- Filtros -->
    <div class="filter-card" style="background: white; border-radius: 12px; padding: 20px; margin-bottom: 25px; box-shadow: 0 4px 10px rgba(0,0,0,0.05); border-top: 4px solid #1d976c;">
        <form id="formFiltros" onsubmit="return false;">
            <div class="row align-items-end">
                <div class="col-md-3">
                    <div class="form-group mb-0">
                        <label style="font-weight: bold; color: #1d976c;"><i class="fa fa-calendar"></i> Fecha Inicial</label>
                        <input type="date" id="fi" name="fi" class="form-control" value="{{ date('Y-m-01') }}" required>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="form-group mb-0">
                        <label style="font-weight: bold; color: #1d976c;"><i class="fa fa-calendar"></i> Fecha Final</label>
                        <input type="date" id="ff" name="ff" class="form-control" value="{{ date('Y-m-d') }}" required>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="form-group mb-0">
                        <label style="font-weight: bold; color: #1d976c;"><i class="fa fa-building"></i> Bodega</label>
                        @include('../menu.bodegas') 
                    </div>
                </div>
                <div class="col-md-3">
                    <button type="button" id="btnConsultar" class="btn btn-success w-100" style="background: #1d976c; border: none; font-weight: bold; padding: 10px; border-radius: 20px; box-shadow: 0 4px 10px rgba(29, 151, 108, 0.3);">
                        <i class="fa fa-search"></i> CONSULTAR DATOS
                    </button>
                </div>
            </div>
        </form>
    </div>

    <!-- KPIs -->
    <div class="row mb-4">
        <div class="col-lg-3 col-md-6 mb-3">
            <div class="kpi-card kpi-total">
                <i class="fa fa-user kpi-icon"></i>
                <h6 class="text-uppercase font-weight-bold mb-1">Clientes Activos</h6>
                <h3 class="font-weight-bold mb-0" id="kpiTotalClientes">0</h3>
                <small>En el período seleccionado</small>
            </div>
        </div>
        <div class="col-lg-3 col-md-6 mb-3">
            <div class="kpi-card kpi-promedio">
                <i class="fa fa-line-chart kpi-icon"></i>
                <h6 class="text-uppercase font-weight-bold mb-1">Ticket Promedio</h6>
                <h3 class="font-weight-bold mb-0" id="kpiTicketPromedio">$0</h3>
                <small>Por cliente único</small>
            </div>
        </div>
        <div class="col-lg-3 col-md-6 mb-3">
            <div class="kpi-card kpi-mejor">
                <i class="fa fa-trophy kpi-icon"></i>
                <h6 class="text-uppercase font-weight-bold mb-1">Mejor Cliente</h6>
                <h3 class="font-weight-bold mb-0" style="font-size: 1.2rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;" id="kpiMejorCliente">N/A</h3>
                <small>Mayor volumen de compra</small>
            </div>
        </div>
        <div class="col-lg-3 col-md-6 mb-3">
            <div class="kpi-card kpi-facturas">
                <i class="fa fa-file-text-o kpi-icon"></i>
                <h6 class="text-uppercase font-weight-bold mb-1">Total Facturas</h6>
                <h3 class="font-weight-bold mb-0" id="kpiTotalFacturas">0</h3>
                <small>Transacciones analizadas</small>
            </div>
        </div>
    </div>

    <!-- Gráficos -->
    <div class="row">
        <div class="col-md-12">
            <div class="chart-container-box">
                <h5 class="chart-title">
                    <span><i class="fa fa-bar-chart text-success"></i> Top 15 Clientes (Ventas Netas)</span>
                    <small class="text-muted font-weight-normal">Ventas descontando devoluciones</small>
                </h5>
                <div style="position: relative; height: 400px;">
                    <canvas id="chartTopClientes"></canvas>
                </div>
            </div>
        </div>
        
        <div class="col-md-12">
            <div class="chart-container-box">
                <h5 class="chart-title"><i class="fa fa-table text-info"></i> Ranking Detallado de Clientes</h5>
                <div class="table-responsive">
                    <table class="table table-hover table-striped" id="tablaClientes">
                        <thead class="bg-light">
                            <tr>
                                <th>#</th>
                                <th>Identificación</th>
                                <th>Nombre Completo</th>
                                <th class="text-right">Ventas Brutas</th>
                                <th class="text-right">Devoluciones</th>
                                <th class="text-right">Venta Neta</th>
                                <th class="text-center">Facturas</th>
                                <th class="text-right">Ticket Promedio</th>
                            </tr>
                        </thead>
                        <tbody>
                            <!-- Se llena via JS -->
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

@section('pie')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<script>
    const formatter = new Intl.NumberFormat('es-CO', { style: 'currency', currency: 'COP', maximumFractionDigits: 0 });
    let chartTop = null;

    $(document).ready(function() {
        $('#btnConsultar').click(function() {
            cargarDatos();
        });

        $('#btnExportar').click(function() {
            const fi = $('#fi').val();
            const ff = $('#ff').val();
            const bodega = $('select[name="bodega"]').val() || 0;
            window.open(`{{ url('estadisticas-clientes/exportar') }}?fi=${fi}&ff=${ff}&bodega=${bodega}`, '_blank');
        });

        // Carga inicial
        cargarDatos();
    });

    function cargarDatos() {
        $('#loader').css('display', 'flex');
        
        const data = {
            fi: $('#fi').val(),
            ff: $('#ff').val(),
            bodega: $('select[name="bodega"]').val() || 0
        };

        fetch(`{{ url('estadisticas-clientes/data') }}?` + new URLSearchParams(data))
        .then(res => res.json())
        .then(result => {
            $('#loader').hide();
            actualizarUI(result);
        })
        .catch(err => {
            $('#loader').hide();
            console.error(err);
            alert("Error al cargar los datos.");
        });
    }

    function actualizarUI(resp) {
        // KPIs
        $('#kpiTotalClientes').text(resp.kpis.total_clientes.toLocaleString('es-CO'));
        $('#kpiTicketPromedio').text(formatter.format(resp.kpis.ticket_promedio));
        $('#kpiMejorCliente').text(resp.kpis.mejor_cliente);
        $('#kpiTotalFacturas').text(resp.kpis.total_facturas.toLocaleString('es-CO'));

        // Gráfico
        if(chartTop) chartTop.destroy();
        
        const ctx = document.getElementById('chartTopClientes').getContext('2d');
        chartTop = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: resp.graficos.labels,
                datasets: [
                    {
                        label: 'Ventas Netas',
                        data: resp.graficos.ventas,
                        backgroundColor: '#1d976c',
                        borderRadius: 5
                    },
                    {
                        label: 'Devoluciones',
                        data: resp.graficos.devoluciones,
                        backgroundColor: '#dc3545',
                        borderRadius: 5
                    }
                ]
            },
            options: {
                indexAxis: 'y',
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: { position: 'bottom' },
                    tooltip: {
                        callbacks: { label: (c) => " " + formatter.format(c.raw) }
                    }
                },
                scales: {
                    x: { ticks: { callback: (v) => formatter.format(v) } }
                }
            }
        });

        // Tabla
        const tbody = $('#tablaClientes tbody');
        tbody.empty();

        resp.tabla.forEach((c, index) => {
            let rankClass = (index < 3) ? `badge-rank-${index+1}` : 'badge-rank-oth';
            let row = `
                <tr>
                    <td><span class="rank-badge ${rankClass}">${index + 1}</span></td>
                    <td><small class="font-weight-bold text-muted">${c.cliente}</small></td>
                    <td><span class="font-weight-bold">${c.nombre_completo}</span></td>
                    <td class="text-right">${formatter.format(c.ventas_brutas)}</td>
                    <td class="text-right text-danger">${formatter.format(c.devoluciones)}</td>
                    <td class="text-right font-weight-bold text-success">${formatter.format(c.venta_neta)}</td>
                    <td class="text-center"><span class="badge badge-secondary p-2">${c.cant_facturas}</span></td>
                    <td class="text-right text-muted">${formatter.format(c.ticket_promedio)}</td>
                </tr>
            `;
            tbody.append(row);
        });
    }
</script>
@endsection