@extends('layouts.app')

@section('title', 'Dashboard Ejecutivo Avanzado')

@section('content')
<div class="container-fluid py-4">
    <!-- Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="h3 mb-1 text-dark">
                <i class="fas fa-chart-line me-2 text-primary"></i>Dashboard Ejecutivo Avanzado
            </h1>
            <p class="text-muted mb-0 small">Vista ejecutiva completa con KPIs, gráficos interactivos y comparativas</p>
        </div>
        <div class="d-flex gap-2">
            <div class="btn-group" role="group">
                <button type="button" class="btn btn-sm btn-outline-secondary period-btn {{ $period == 'week' ? 'active' : '' }}" data-period="week">Semana</button>
                <button type="button" class="btn btn-sm btn-outline-secondary period-btn {{ $period == 'month' ? 'active' : '' }}" data-period="month">Mes</button>
                <button type="button" class="btn btn-sm btn-outline-secondary period-btn {{ $period == 'year' ? 'active' : '' }}" data-period="year">Año</button>
            </div>
            <button onclick="refreshDashboard()" class="btn btn-primary btn-sm">
                <i class="fas fa-sync-alt me-2"></i>Actualizar
            </button>
            <button onclick="window.print()" class="btn btn-secondary btn-sm">
                <i class="fas fa-print me-2"></i>Imprimir
            </button>
        </div>
    </div>

    <!-- KPIs Principales -->
    <div class="row g-3 mb-4">
        <div class="col-xl-3 col-lg-6 col-md-6">
            <div class="stat-card stat-card-primary">
                <div class="stat-card-icon">
                    <i class="fas fa-dollar-sign"></i>
                </div>
                <div class="stat-card-content">
                    <div class="stat-card-label">Ventas</div>
                    <div class="stat-card-value">${{ number_format($data['kpis']['sales']['current'] ?? 0, 2) }}</div>
                    <div class="stat-card-trend">
                        <i class="fas fa-arrow-{{ ($data['kpis']['sales']['trend'] ?? 'stable') == 'up' ? 'up text-success' : 'down text-danger' }}"></i>
                        <span class="{{ ($data['kpis']['sales']['trend'] ?? 'stable') == 'up' ? 'text-success' : 'text-danger' }}">
                            {{ number_format(abs($data['kpis']['sales']['growth'] ?? 0), 2) }}%
                        </span>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-lg-6 col-md-6">
            <div class="stat-card stat-card-success">
                <div class="stat-card-icon">
                    <i class="fas fa-hand-holding-usd"></i>
                </div>
                <div class="stat-card-content">
                    <div class="stat-card-label">Cobranza</div>
                    <div class="stat-card-value">${{ number_format($data['kpis']['collections'] ?? 0, 2) }}</div>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-lg-6 col-md-6">
            <div class="stat-card stat-card-warning">
                <div class="stat-card-icon">
                    <i class="fas fa-boxes"></i>
                </div>
                <div class="stat-card-content">
                    <div class="stat-card-label">Inventario</div>
                    <div class="stat-card-value">${{ number_format($data['kpis']['inventory'] ?? 0, 2) }}</div>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-lg-6 col-md-6">
            <div class="stat-card stat-card-info">
                <div class="stat-card-icon">
                    <i class="fas fa-chart-pie"></i>
                </div>
                <div class="stat-card-content">
                    <div class="stat-card-label">Utilidad</div>
                    <div class="stat-card-value">${{ number_format($data['kpis']['profit']['amount'] ?? 0, 2) }}</div>
                    <div class="stat-card-subtitle">{{ number_format($data['kpis']['profit']['margin'] ?? 0, 2) }}% margen</div>
                </div>
            </div>
        </div>
    </div>

    <!-- Gráficos Interactivos -->
    <div class="row g-4 mb-4">
        <div class="col-lg-8">
            <div class="card shadow-sm">
                <div class="card-header bg-white border-bottom py-3">
                    <h5 class="mb-0 text-dark">
                        <i class="fas fa-chart-line me-2 text-primary"></i>Tendencia de Ventas
                    </h5>
                </div>
                <div class="card-body">
                    <canvas id="salesTrendChart" height="80"></canvas>
                </div>
            </div>
        </div>
        <div class="col-lg-4">
            <div class="card shadow-sm">
                <div class="card-header bg-white border-bottom py-3">
                    <h5 class="mb-0 text-dark">
                        <i class="fas fa-chart-pie me-2 text-primary"></i>Ventas por Categoría
                    </h5>
                </div>
                <div class="card-body">
                    <canvas id="categoryChart" height="200"></canvas>
                </div>
            </div>
        </div>
    </div>

    <!-- Comparativas -->
    <div class="row g-4 mb-4">
        <div class="col-lg-6">
            <div class="card shadow-sm">
                <div class="card-header bg-white border-bottom py-3">
                    <h5 class="mb-0 text-dark">
                        <i class="fas fa-balance-scale me-2 text-primary"></i>Comparativa de Ventas
                    </h5>
                </div>
                <div class="card-body">
                    <div class="row text-center">
                        <div class="col-6">
                            <h6 class="text-muted">Período Actual</h6>
                            <h4 class="text-primary">${{ number_format($data['comparisons']['sales']['current'] ?? 0, 2) }}</h4>
                        </div>
                        <div class="col-6">
                            <h6 class="text-muted">Período Anterior</h6>
                            <h4 class="text-secondary">${{ number_format($data['comparisons']['sales']['previous'] ?? 0, 2) }}</h4>
                        </div>
                    </div>
                    <div class="mt-3">
                        <div class="d-flex justify-content-between mb-2">
                            <span>Cambio</span>
                            <span class="{{ ($data['comparisons']['sales']['percentage'] ?? 0) >= 0 ? 'text-success' : 'text-danger' }}">
                                {{ ($data['comparisons']['sales']['percentage'] ?? 0) >= 0 ? '+' : '' }}{{ number_format($data['comparisons']['sales']['percentage'] ?? 0, 2) }}%
                            </span>
                        </div>
                        <div class="progress" style="height: 20px;">
                            <div class="progress-bar {{ ($data['comparisons']['sales']['percentage'] ?? 0) >= 0 ? 'bg-success' : 'bg-danger' }}" 
                                 style="width: {{ min(abs($data['comparisons']['sales']['percentage'] ?? 0), 100) }}%">
                                {{ number_format($data['comparisons']['sales']['change'] ?? 0, 2) }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-6">
            <div class="card shadow-sm">
                <div class="card-header bg-white border-bottom py-3">
                    <h5 class="mb-0 text-dark">
                        <i class="fas fa-users me-2 text-primary"></i>Ventas por Vendedor
                    </h5>
                </div>
                <div class="card-body">
                    <canvas id="salesmanChart" height="150"></canvas>
                </div>
            </div>
        </div>
    </div>

    <!-- Alertas -->
    @if(($data['alerts']['low_stock'] ?? 0) > 0 || ($data['alerts']['overdue_receivables'] ?? 0) > 0)
    <div class="row g-4 mb-4">
        <div class="col-12">
            <div class="card shadow-sm border-warning">
                <div class="card-header bg-warning text-white">
                    <h5 class="mb-0">
                        <i class="fas fa-exclamation-triangle me-2"></i>Alertas del Sistema
                    </h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        @if(($data['alerts']['low_stock'] ?? 0) > 0)
                        <div class="col-md-4">
                            <div class="alert alert-warning mb-0">
                                <i class="fas fa-box me-2"></i>
                                <strong>{{ $data['alerts']['low_stock'] }}</strong> productos con stock bajo
                            </div>
                        </div>
                        @endif
                        @if(($data['alerts']['overdue_receivables'] ?? 0) > 0)
                        <div class="col-md-4">
                            <div class="alert alert-danger mb-0">
                                <i class="fas fa-clock me-2"></i>
                                <strong>{{ $data['alerts']['overdue_receivables'] }}</strong> cuentas por cobrar vencidas
                            </div>
                        </div>
                        @endif
                        @if(($data['alerts']['expiring_products'] ?? 0) > 0)
                        <div class="col-md-4">
                            <div class="alert alert-info mb-0">
                                <i class="fas fa-calendar-alt me-2"></i>
                                <strong>{{ $data['alerts']['expiring_products'] }}</strong> productos próximos a vencer
                            </div>
                        </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
    @endif
</div>

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

// Gráfico de categorías
const categoryCtx = document.getElementById('categoryChart').getContext('2d');
const categoryChart = new Chart(categoryCtx, {
    type: 'doughnut',
    data: {
        labels: @json(collect($data['charts']['category'] ?? [])->pluck('category')->toArray()),
        datasets: [{
            data: @json(collect($data['charts']['category'] ?? [])->pluck('total')->toArray()),
            backgroundColor: [
                '#FF6384',
                '#36A2EB',
                '#FFCE56',
                '#4BC0C0',
                '#9966FF',
                '#FF9F40'
            ]
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: true,
        plugins: {
            legend: {
                position: 'bottom'
            }
        }
    }
});

// Gráfico de vendedores
const salesmanCtx = document.getElementById('salesmanChart').getContext('2d');
const salesmanChart = new Chart(salesmanCtx, {
    type: 'bar',
    data: {
        labels: @json(collect($data['charts']['salesman'] ?? [])->pluck('name')->toArray()),
        datasets: [{
            label: 'Ventas',
            data: @json(collect($data['charts']['salesman'] ?? [])->pluck('total')->toArray()),
            backgroundColor: 'rgba(54, 162, 235, 0.8)'
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: true,
        scales: {
            y: {
                beginAtZero: true,
                ticks: {
                    callback: function(value) {
                        return '$' + value.toLocaleString();
                    }
                }
            }
        }
    }
});

// Cambiar período
document.querySelectorAll('.period-btn').forEach(btn => {
    btn.addEventListener('click', function() {
        const period = this.dataset.period;
        window.location.href = '{{ route("admin.dashboards.executive-advanced") }}?period=' + period;
    });
});

function refreshDashboard() {
    location.reload();
}
</script>
@endpush
@endsection