@extends('layouts.app')

@section('title', 'Dashboard Principal')

@section('content')
<div class="container-fluid py-4">
    <div class="d-flex justify-content-between align-items-center mb-3">
        <h2 class="h3 mb-0 text-dark">
            <i class="fas fa-tachometer-alt me-2 text-primary"></i>Dashboard Principal
        </h2>
        <div class="btn-group" role="group">
            <button type="button" class="btn btn-sm btn-outline-secondary filter-btn" data-period="today">Hoy</button>
            <button type="button" class="btn btn-sm btn-outline-secondary filter-btn" data-period="week">Semana</button>
            <button type="button" class="btn btn-sm btn-outline-secondary filter-btn active" data-period="month">Este Mes</button>
            <button type="button" class="btn btn-sm btn-outline-secondary filter-btn" data-period="year">Este Año</button>
        </div>
    </div>

    <!-- 1. KPIs (Indicadores Clave) -->
    <div class="row mb-4">
        <!-- Ventas del Período -->
        <div class="col-md-3 col-6 mb-3">
            <div class="small-box bg-info">
                <div class="inner">
                    <h3 id="kpi-sales">$0.00</h3>
                    <p>Ventas del Período (USD)</p>
                </div>
                <div class="icon"><i class="fas fa-shopping-cart"></i></div>
                <a href="{{ route('admin.reports.sales') }}" class="small-box-footer">
                    Ver Detalle <i class="fas fa-arrow-circle-right"></i>
                </a>
            </div>
        </div>
        
        <!-- Cobranza del Período -->
        <div class="col-md-3 col-6 mb-3">
            <div class="small-box bg-success">
                <div class="inner">
                    <h3 id="kpi-collections">$0.00</h3>
                    <p>Cobranza del Período (USD)</p>
                </div>
                <div class="icon"><i class="fas fa-dollar-sign"></i></div>
                <a href="{{ route('admin.sales.accounts-receivable.index') }}" class="small-box-footer">
                    Ver Detalle <i class="fas fa-arrow-circle-right"></i>
                </a>
            </div>
        </div>

        <!-- CXC Total (Global) -->
        <div class="col-md-3 col-6 mb-3">
            <div class="small-box bg-warning">
                <div class="inner">
                    <h3 id="kpi-cxc">$0.00</h3>
                    <p>Total Cuentas por Cobrar (USD)</p>
                </div>
                <div class="icon"><i class="fas fa-file-invoice-dollar"></i></div>
                <a href="{{ route('admin.reports.accounts-receivable') }}" class="small-box-footer">
                    Ver Detalle <i class="fas fa-arrow-circle-right"></i>
                </a>
            </div>
        </div>
        
        <!-- Tareas Pendientes (Global) -->
        <div class="col-md-3 col-6 mb-3">
            <div class="small-box bg-danger">
                <div class="inner">
                    <h3 id="kpi-verify-payments">0</h3>
                    <p>Pagos por Aprobar</p>
                </div>
                <div class="icon"><i class="fas fa-check-double"></i></div>
                <a href="{{ route('admin.sales.payment_verifications.index') }}" class="small-box-footer">
                    Ver Tareas <i class="fas fa-arrow-circle-right"></i>
                </a>
            </div>
        </div>
    </div>

    <!-- KPI Adicional: Comisiones -->
    <div class="row mb-4">
        <div class="col-md-3 col-6">
            <div class="small-box bg-secondary">
                <div class="inner">
                    <h3 id="kpi-commissions">$0.00</h3>
                    <p>Comisiones Ganadas (Este Mes)</p>
                </div>
                <div class="icon"><i class="fas fa-percent"></i></div>
                <a href="{{ route('admin.reports.commissions') }}" class="small-box-footer">
                    Ver Reporte <i class="fas fa-arrow-circle-right"></i>
                </a>
            </div>
        </div>
        <div class="col-md-3 col-6">
            <!-- Espacio adicional si se necesita otro KPI -->
        </div>
        <div class="col-md-3 col-6">
            <!-- Espacio adicional si se necesita otro KPI -->
        </div>
        <div class="col-md-3 col-6">
            <!-- Espacio adicional si se necesita otro KPI -->
        </div>
    </div>

    <!-- 2. Gráfico y Accesos Directos -->
    <div class="row">
        <!-- Gráfico de Ventas vs Cobranza -->
        <div class="col-lg-8">
            <div class="card shadow">
                <div class="card-header bg-primary text-white">
                    <h5 class="mb-0">
                        <i class="fas fa-chart-line me-2"></i>Ventas vs. Cobranza (Últimos 30 días)
                    </h5>
                </div>
                <div class="card-body">
                    <div class="chart-container" style="position: relative; height: 400px;">
                        <canvas id="salesChart"></canvas>
                    </div>
                </div>
            </div>
        </div>

        <!-- Accesos Directos -->
        <div class="col-lg-4">
            <div class="card shadow">
                <div class="card-header bg-secondary text-white">
                    <h5 class="mb-0">
                        <i class="fas fa-bolt me-2"></i>Accesos Directos
                    </h5>
                </div>
                <div class="card-body">
                    <div class="d-grid gap-2">
                        <a href="{{ route('admin.sales.invoices.create') }}" class="btn btn-app bg-primary">
                            <i class="fas fa-plus"></i> Nueva Factura
                        </a>
                        <a href="{{ route('admin.sales.accounts-receivable.index') }}" class="btn btn-app bg-success">
                            <i class="fas fa-cash-register"></i> Registrar Cobro
                        </a>
                        <a href="{{ route('admin.reports.sales') }}" class="btn btn-app bg-info">
                            <i class="fas fa-chart-line"></i> Reporte Ventas
                        </a>
                        <a href="{{ route('admin.sales.payment_verifications.index') }}" class="btn btn-app bg-warning position-relative" style="margin-right: 20px;">
                            <span class="badge bg-danger position-absolute top-0 start-100 translate-middle" id="kpi-verify-payments-badge" style="font-size: 0.75rem; z-index: 10;">0</span>
                            <i class="fas fa-check-double"></i> Aprobar Pagos
                        </a>
                        <a href="{{ route('admin.reports.commissions') }}" class="btn btn-app bg-secondary">
                            <i class="fas fa-user-tie"></i> Comisiones
                        </a>
                        <a href="{{ route('admin.settings.index') }}" class="btn btn-app bg-dark">
                            <i class="fas fa-cogs"></i> Configuración
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
{{-- Incluimos Chart.js desde una CDN --}}
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>

<script>
document.addEventListener('DOMContentLoaded', function() {
    
    // --- Configuración del Gráfico ---
    const ctx = document.getElementById('salesChart').getContext('2d');
    let salesChart = null;

    function initChart(labels = [], salesData = [], collectionsData = []) {
        if (salesChart) {
            salesChart.destroy();
        }

        salesChart = new Chart(ctx, {
            type: 'line',
            data: {
                labels: labels,
                datasets: [
                    {
                        label: 'Ventas (USD)',
                        data: salesData,
                        borderColor: 'rgba(54, 162, 235, 1)',
                        backgroundColor: 'rgba(54, 162, 235, 0.2)',
                        fill: true,
                        tension: 0.4,
                        pointRadius: 3,
                        pointHoverRadius: 5
                    },
                    {
                        label: 'Cobranza (USD)',
                        data: collectionsData,
                        borderColor: 'rgba(40, 167, 69, 1)',
                        backgroundColor: 'rgba(40, 167, 69, 0.2)',
                        fill: true,
                        tension: 0.4,
                        pointRadius: 3,
                        pointHoverRadius: 5
                    }
                ]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        display: true,
                        position: 'top',
                    },
                    tooltip: {
                        mode: 'index',
                        intersect: false,
                        callbacks: {
                            label: function(context) {
                                return context.dataset.label + ': $' + context.parsed.y.toFixed(2);
                            }
                        }
                    }
                },
                scales: {
                    y: {
                        beginAtZero: true,
                        ticks: {
                            callback: function(value) {
                                return '$' + value.toFixed(2);
                            }
                        }
                    }
                },
                interaction: {
                    mode: 'nearest',
                    axis: 'x',
                    intersect: false
                }
            }
        });
    }

    // Inicializar gráfico vacío
    initChart();

    // --- Lógica de Carga de Datos ---
    const filterButtons = document.querySelectorAll('.filter-btn');
    
    // Función para buscar datos
    async function fetchDashboardStats(period = 'month') {
        // Marcar botón activo
        filterButtons.forEach(btn => {
            btn.classList.toggle('active', btn.dataset.period === period);
        });

        // Mostrar un loader simple
        document.getElementById('kpi-sales').textContent = '...';
        document.getElementById('kpi-collections').textContent = '...';
        document.getElementById('kpi-cxc').textContent = '...';
        document.getElementById('kpi-verify-payments').textContent = '...';
        document.getElementById('kpi-commissions').textContent = '...';
        
        try {
            const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
            const response = await fetch(`{{ route('api.admin.dashboard.stats') }}?period=${period}`, {
                method: 'GET',
                headers: {
                    'Accept': 'application/json',
                    'X-Requested-With': 'XMLHttpRequest',
                    'X-CSRF-TOKEN': csrfToken || ''
                },
                credentials: 'same-origin'
            });

            if (!response.ok) {
                throw new Error('Error al cargar datos');
            }
            
            const data = await response.json();
            
            if (data.success) {
                // 1. Actualizar KPIs
                const formatter = new Intl.NumberFormat('en-US', { 
                    style: 'currency', 
                    currency: 'USD',
                    minimumFractionDigits: 2,
                    maximumFractionDigits: 2
                });
                
                document.getElementById('kpi-sales').textContent = formatter.format(data.kpis.sales_usd);
                document.getElementById('kpi-collections').textContent = formatter.format(data.kpis.collections_usd);
                document.getElementById('kpi-cxc').textContent = formatter.format(data.kpis.total_cxc_usd);
                document.getElementById('kpi-verify-payments').textContent = data.kpis.payments_to_verify_count;
                document.getElementById('kpi-verify-payments-badge').textContent = data.kpis.payments_to_verify_count;
                document.getElementById('kpi-commissions').textContent = formatter.format(data.kpis.commissions_earned_usd);
                
                // 2. Actualizar Gráfico (solo si hay datos del gráfico)
                if (data.chart && data.chart.labels && data.chart.labels.length > 0) {
                    initChart(
                        data.chart.labels,
                        data.chart.sales_data,
                        data.chart.collections_data
                    );
                }
            } else {
                throw new Error(data.message || 'Error desconocido');
            }
        } catch (error) {
            console.error('Error en fetchDashboardStats:', error);
            document.getElementById('kpi-sales').textContent = 'Error';
            document.getElementById('kpi-collections').textContent = 'Error';
            document.getElementById('kpi-cxc').textContent = 'Error';
            document.getElementById('kpi-verify-payments').textContent = '-';
            document.getElementById('kpi-commissions').textContent = 'Error';
            
            // Mostrar mensaje de error al usuario (opcional)
            // alert('Error al cargar los datos del dashboard. Por favor, recargue la página.');
        }
    }

    // Clicks en los filtros
    filterButtons.forEach(button => {
        button.addEventListener('click', () => {
            fetchDashboardStats(button.dataset.period);
        });
    });

    // Carga inicial (Este Mes)
    fetchDashboardStats('month');
});
</script>
@endpush

@push('styles')
<style>
    /* Estilos para las tarjetas pequeñas (small-box) */
    .small-box {
        border-radius: 0.25rem;
        box-shadow: 0 0 1px rgba(0,0,0,.125), 0 1px 3px rgba(0,0,0,.2);
        display: block;
        margin-bottom: 20px;
        position: relative;
        transition: transform 0.2s;
    }

    .small-box:hover {
        transform: translateY(-5px);
        box-shadow: 0 0 1px rgba(0,0,0,.125), 0 1px 3px rgba(0,0,0,.3);
    }

    .small-box > .inner {
        padding: 10px;
    }

    .small-box > .small-box-footer {
        background-color: rgba(0,0,0,.1);
        color: rgba(255,255,255,.8);
        display: block;
        padding: 3px 0;
        position: relative;
        text-align: center;
        text-decoration: none;
        z-index: 10;
        transition: all 0.3s;
    }

    .small-box > .small-box-footer:hover {
        background-color: rgba(0,0,0,.15);
        color: #fff;
    }

    .small-box .icon {
        color: rgba(0,0,0,.15);
        z-index: 0;
        position: absolute;
        right: 10px;
        top: 10px;
        font-size: 90px;
        transition: transform 0.3s;
    }

    .small-box:hover .icon {
        transform: scale(1.1);
    }

    .small-box h3, .small-box p {
        z-index: 5;
        position: relative;
    }

    .small-box h3 {
        font-size: 2.2rem;
        font-weight: bold;
        margin: 0 0 10px 0;
        white-space: nowrap;
        padding: 0;
    }

    .small-box p {
        font-size: 1rem;
        margin: 0;
    }

    .bg-info {
        background-color: #17a2b8 !important;
        color: #fff;
    }

    .bg-success {
        background-color: #28a745 !important;
        color: #fff;
    }

    .bg-warning {
        background-color: #ffc107 !important;
        color: #1f2d3d;
    }

    .bg-danger {
        background-color: #dc3545 !important;
        color: #fff;
    }

    .bg-secondary {
        background-color: #6c757d !important;
        color: #fff;
    }

    /* Estilos para botones de acceso directo */
    .btn-app {
        position: relative;
        padding: 15px 5px;
        margin: 0 0 10px 0;
        min-width: 80px;
        height: 80px;
        box-shadow: none;
        border-radius: 0.25rem;
        text-align: center;
        color: #666 !important;
        border: 1px solid #ddd;
        background-color: #f4f4f4;
        font-size: 12px;
        transition: all 0.3s;
    }

    .btn-app:hover {
        color: #333 !important;
        border-color: #adb5bd;
        transform: translateY(-3px);
        box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    }

    .btn-app i {
        display: block;
        font-size: 24px;
        margin-bottom: 5px;
    }

    .btn-app.bg-primary {
        background-color: #007bff !important;
        color: #fff !important;
        border-color: #007bff;
    }

    .btn-app.bg-success {
        background-color: #28a745 !important;
        color: #fff !important;
        border-color: #28a745;
    }

    .btn-app.bg-info {
        background-color: #17a2b8 !important;
        color: #fff !important;
        border-color: #17a2b8;
    }

    .btn-app.bg-warning {
        background-color: #ffc107 !important;
        color: #1f2d3d !important;
        border-color: #ffc107;
    }

    .btn-app.bg-secondary {
        background-color: #6c757d !important;
        color: #fff !important;
        border-color: #6c757d;
    }

    .btn-app.bg-dark {
        background-color: #343a40 !important;
        color: #fff !important;
        border-color: #343a40;
    }

    .btn-app.bg-primary:hover,
    .btn-app.bg-success:hover,
    .btn-app.bg-info:hover,
    .btn-app.bg-secondary:hover,
    .btn-app.bg-dark:hover {
        opacity: 0.9;
        color: #fff !important;
    }

    .btn-app.bg-warning:hover {
        opacity: 0.9;
        color: #1f2d3d !important;
    }

    /* Estilos para filtros */
    .filter-btn.active {
        background-color: #007bff;
        color: #fff;
        border-color: #007bff;
    }
</style>
@endpush