@extends('layouts.app')

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">
                        <i class="fas fa-chart-line me-2"></i>Dashboard Ejecutivo
                    </h3>
                    <div class="card-tools">
                        <div class="btn-group">
                            <x-professional-button 
                                variant="outline-primary"
                                size="sm"
                                icon="fas fa-sync-alt"
                                onclick="refreshDashboard()"
                                class="pulse">
                                Actualizar
                            </x-professional-button>
                            <x-professional-button 
                                variant="outline-success"
                                size="sm"
                                icon="fas fa-download"
                                onclick="exportDashboard()">
                                Exportar
                            </x-professional-button>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <!-- KPIs Principales -->
                    <div class="row mb-4">
                        <x-kpi-card 
                            title="Ventas del Mes"
                            value="${{ number_format($kpis['sales']['this_month'], 2) }}"
                            subtitle="{{ abs($kpis['sales']['growth']) }}% vs mes anterior"
                            icon="fas fa-chart-line"
                            variant="primary"
                            trend="{{ $kpis['sales']['growth'] >= 0 ? 'up' : 'down' }}"
                            trend-value="{{ abs($kpis['sales']['growth']) }}%"
                            animation-delay="0s" />
                        
                        <x-kpi-card 
                            title="Compras del Mes"
                            value="${{ number_format($kpis['purchases']['this_month'], 2) }}"
                            subtitle="{{ abs($kpis['purchases']['growth']) }}% vs mes anterior"
                            icon="fas fa-shopping-bag"
                            variant="success"
                            trend="{{ $kpis['purchases']['growth'] >= 0 ? 'up' : 'down' }}"
                            trend-value="{{ abs($kpis['purchases']['growth']) }}%"
                            animation-delay="0.1s" />
                        
                        <x-kpi-card 
                            title="Inventario"
                            value="${{ number_format($kpis['inventory']['total_value'], 2) }}"
                            subtitle="{{ $kpis['inventory']['products_count'] }} productos"
                            icon="fas fa-boxes"
                            variant="warning"
                            animation-delay="0.2s" />
                        
                        <x-kpi-card 
                            title="Utilidad Bruta"
                            value="${{ number_format($kpis['profit']['gross_profit'], 2) }}"
                            subtitle="{{ number_format($kpis['profit']['margin'], 2) }}% margen"
                            icon="fas fa-dollar-sign"
                            variant="info"
                            animation-delay="0.3s" />
                    </div>

                    <!-- Gráficos -->
                    <div class="row mb-4">
                        <div class="col-md-8">
                            <div class="card">
                                <div class="card-header">
                                    <h5 class="card-title">Tendencia de Ventas (Últimos 12 meses)</h5>
                                </div>
                                <div class="card-body">
                                    <canvas id="salesChart" height="100"></canvas>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="card">
                                <div class="card-header">
                                    <h5 class="card-title">Ventas por Vendedor</h5>
                                </div>
                                <div class="card-body">
                                    <canvas id="salesmanChart" height="200"></canvas>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Métricas Adicionales -->
                    <div class="row mb-4">
                        <div class="col-md-6">
                            <div class="card">
                                <div class="card-header">
                                    <h5 class="card-title">Cuentas por Cobrar</h5>
                                </div>
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-6">
                                            <h6>Total Pendiente</h6>
                                            <h4 class="text-warning">${{ number_format($kpis['receivables']['total'], 2) }}</h4>
                                        </div>
                                        <div class="col-6">
                                            <h6>Vencidas</h6>
                                            <h4 class="text-danger">${{ number_format($kpis['receivables']['overdue'], 2) }}</h4>
                                        </div>
                                    </div>
                                    <div class="progress mt-3">
                                        <div class="progress-bar bg-warning text-white" style="width: {{ $kpis['receivables']['overdue_percentage'] }}%"</div>
                                    </div>
                                    <small class="text-muted">{{ number_format($kpis['receivables']['overdue_percentage'], 1) }}% vencidas</small>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="card">
                                <div class="card-header">
                                    <h5 class="card-title">Cuentas por Pagar</h5>
                                </div>
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-6">
                                            <h6>Total Pendiente</h6>
                                            <h4 class="text-warning">${{ number_format($kpis['payables']['total'], 2) }}</h4>
                                        </div>
                                        <div class="col-6">
                                            <h6>Vencidas</h6>
                                            <h4 class="text-danger">${{ number_format($kpis['payables']['overdue'], 2) }}</h4>
                                        </div>
                                    </div>
                                    <div class="progress mt-3">
                                        <div class="progress-bar bg-danger text-white" style="width: {{ $kpis['payables']['overdue_percentage'] }}%"</div>
                                    </div>
                                    <small class="text-muted">{{ number_format($kpis['payables']['overdue_percentage'], 1) }}% vencidas</small>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Top Productos y Clientes -->
                    <div class="row">
                        <div class="col-md-6">
                            <div class="card">
                                <div class="card-header">
                                    <h5 class="card-title">Top 5 Productos Más Vendidos</h5>
                                </div>
                                <div class="card-body">
                                    <div class="table-responsive">
                                        <table class="table table-sm">
                                            <thead>
                                                <tr>
                                                    <th>Producto</th>
                                                    <th>Cantidad</th>
                                                    <th>Valor</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach($kpis['top_products'] as $product)
                                                <tr>
                                                    <td>{{ $product->name }}</td>
                                                    <td>{{ number_format($product->total_quantity) }}</td>
                                                    <td>${{ number_format($product->total_value, 2) }}</td>
                                                </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="card">
                                <div class="card-header">
                                    <h5 class="card-title">Top 5 Clientes</h5>
                                </div>
                                <div class="card-body">
                                    <div class="table-responsive">
                                        <table class="table table-sm">
                                            <thead>
                                                <tr>
                                                    <th>Cliente</th>
                                                    <th>Facturas</th>
                                                    <th>Valor</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach($kpis['top_clients'] as $client)
                                                <tr>
                                                    <td>{{ $client->business_name }}</td>
                                                    <td>{{ $client->invoices_count }}</td>
                                                    <td>${{ number_format($client->total_value, 2) }}</td>
                                                </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Alertas y Notificaciones -->
                    <div class="row mt-4">
                        <div class="col-12">
                            <div class="card">
                                <div class="card-header">
                                    <h5 class="card-title">Alertas del Sistema</h5>
                                </div>
                                <div class="card-body">
                                    <div class="row">
                                        @if($kpis['alerts']['low_stock'] > 0)
                                        <div class="col-md-3">
                                            <x-professional-alert 
                                                type="warning"
                                                icon="fas fa-exclamation-triangle"
                                                title="{{ $kpis['alerts']['low_stock'] }} productos con stock bajo" />
                                        </div>
                                        @endif
                                        @if($kpis['alerts']['overdue_receivables'] > 0)
                                        <div class="col-md-3">
                                            <x-professional-alert 
                                                type="danger"
                                                icon="fas fa-clock"
                                                title="{{ $kpis['alerts']['overdue_receivables'] }} cuentas por cobrar vencidas" />
                                        </div>
                                        @endif
                                        @if($kpis['alerts']['overdue_payables'] > 0)
                                        <div class="col-md-3">
                                            <x-professional-alert 
                                                type="danger"
                                                icon="fas fa-credit-card"
                                                title="{{ $kpis['alerts']['overdue_payables'] }} cuentas por pagar vencidas" />
                                        </div>
                                        @endif
                                        @if($kpis['alerts']['expiring_documents'] > 0)
                                        <div class="col-md-3">
                                            <x-professional-alert 
                                                type="info"
                                                icon="fas fa-file-alt"
                                                title="{{ $kpis['alerts']['expiring_documents'] }} documentos por vencer" />
                                        </div>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
// Gráfico de tendencia de ventas
const salesCtx = document.getElementById('salesChart').getContext('2d');
const salesChart = new Chart(salesCtx, {
    type: 'line',
    data: {
        labels: {!! json_encode($kpis['sales_chart']['months']) !!},
        datasets: [{
            label: 'Ventas',
            data: {!! json_encode($kpis['sales_chart']['values']) !!},
            borderColor: 'rgb(75, 192, 192)',
            backgroundColor: 'rgba(75, 192, 192, 0.2)',
            tension: 0.1
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        scales: {
            y: {
                beginAtZero: true,
                ticks: {
                    callback: function(value) {
                        return '$' + value.toLocaleString();
                    }
                }
            }
        },
        plugins: {
            tooltip: {
                callbacks: {
                    label: function(context) {
                        return 'Ventas: $' + context.parsed.y.toLocaleString();
                    }
                }
            }
        }
    }
});

// Gráfico de ventas por vendedor
const salesmanCtx = document.getElementById('salesmanChart').getContext('2d');
const salesmanChart = new Chart(salesmanCtx, {
    type: 'doughnut',
    data: {
        labels: {!! json_encode($kpis['salesman_chart']['names']) !!},
        datasets: [{
            data: {!! json_encode($kpis['salesman_chart']['values']) !!},
            backgroundColor: [
                '#FF6384',
                '#36A2EB',
                '#FFCE56',
                '#4BC0C0',
                '#9966FF',
                '#FF9F40'
            ]
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
            legend: {
                position: 'bottom'
            },
            tooltip: {
                callbacks: {
                    label: function(context) {
                        return context.label + ': $' + context.parsed.toLocaleString();
                    }
                }
            }
        }
    }
});

function refreshDashboard() {
    const btn = event.target.closest('button');
    btn.classList.add('btn-loading');
    btn.disabled = true;
    
    setTimeout(() => {
        location.reload();
    }, 1000);
}

function exportDashboard() {
    const btn = event.target.closest('button');
    btn.classList.add('btn-loading');
    btn.disabled = true;
    
    // Simular proceso de exportación
    setTimeout(() => {
        btn.classList.remove('btn-loading');
        btn.disabled = false;
        
        // Crear y descargar archivo de ejemplo
        const data = {
            fecha: new Date().toLocaleDateString(),
            ventas: {{ $kpis['sales']['this_month'] }},
            compras: {{ $kpis['purchases']['this_month'] }},
            inventario: {{ $kpis['inventory']['total_value'] }},
            utilidad: {{ $kpis['profit']['gross_profit'] }}
        };
        
        const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
        const url = window.URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = 'dashboard-ejecutivo-' + new Date().toISOString().split('T')[0] + '.json';
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
        window.URL.revokeObjectURL(url);
        
        // Mostrar notificación de éxito
        showNotification('Dashboard exportado exitosamente', 'success');
    }, 2000);
}

function showNotification(message, type = 'info') {
    const notification = document.createElement('div');
    notification.className = `alert alert-${type} alert-dismissible fade show position-fixed`;
    notification.style.cssText = 'top: 20px; right: 20px; z-index: 9999; min-width: 300px;';
    notification.innerHTML = `
        ${message}
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    `;
    
    document.body.appendChild(notification);
    
    setTimeout(() => {
        notification.remove();
    }, 5000);
}
</script>
@endpush