@extends('layouts.app')

@php
    // Pre-compute safe arrays for JS (avoids Blade parse issues with array_fill in @push)
    $jsMonthlySales        = $monthlySales        ?? array_fill(0, 12, 0);
    $jsMonthlyOrders       = $monthlyOrders       ?? array_fill(0, 12, 0);
    $jsMonthlyReservations = $monthlyReservations ?? array_fill(0, 12, 0);
    $jsRadarLabels         = $radarLabels         ?? ['Entradas', 'Platos', 'Bebidas', 'Postres', 'Especiales'];
    $jsRadarData           = $radarData           ?? [0, 0, 0, 0, 0];
    $jsGoalPercent         = $goalPercent         ?? 60;
@endphp

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {

    /* ====================================================
       CHART 1 — Actividad Anual (Line Chart)
    ==================================================== */
    const lineCtx = document.getElementById('lineChart').getContext('2d');

    const monthlySales = @json($jsMonthlySales);

    new Chart(lineCtx, {
        type: 'line',
        data: {
            labels: ['Ene','Feb','Mar','Abr','May','Jun','Jul','Ago','Sep','Oct','Nov','Dic'],
            datasets: [
                {
                    label: 'Ventas',
                    data: monthlySales,
                    borderColor: '#ff8c00',
                    backgroundColor: 'rgba(255,140,0,0.08)',
                    borderWidth: 2.5,
                    pointBackgroundColor: '#ff8c00',
                    pointRadius: 4,
                    pointHoverRadius: 6,
                    tension: 0.45,
                    fill: true,
                },
                {
                    label: 'Pedidos',
                    data: @json($jsMonthlyOrders),
                    borderColor: '#9b5de5',
                    backgroundColor: 'rgba(155,93,229,0.06)',
                    borderWidth: 2,
                    pointBackgroundColor: '#9b5de5',
                    pointRadius: 3,
                    pointHoverRadius: 5,
                    tension: 0.45,
                    fill: true,
                },
                {
                    label: 'Reservas',
                    data: @json($jsMonthlyReservations),
                    borderColor: '#22c55e',
                    backgroundColor: 'rgba(34,197,94,0.05)',
                    borderWidth: 2,
                    pointBackgroundColor: '#22c55e',
                    pointRadius: 3,
                    pointHoverRadius: 5,
                    tension: 0.45,
                    fill: true,
                }
            ]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    position: 'top',
                    labels: { usePointStyle: true, pointStyleWidth: 8, padding: 18, font: { family:'Inter', size:11 } }
                },
                tooltip: {
                    backgroundColor: '#2d1b5e',
                    titleFont: { family:'Inter', weight:'700' },
                    bodyFont:  { family:'Inter' },
                    padding: 12,
                    cornerRadius: 10,
                }
            },
            scales: {
                x: { grid: { display: false }, ticks: { font: { family:'Inter', size:11 } } },
                y: {
                    grid: { color: 'rgba(0,0,0,0.04)' },
                    ticks: { font: { family:'Inter', size:11 }, callback: v => 'S/'+v },
                    beginAtZero: true
                }
            }
        }
    });

    /* ====================================================
       CHART 2 — Donut (Ingreso Actual)
    ==================================================== */
    const donutCtx = document.getElementById('donutChart').getContext('2d');

    const goalPct = {{ $jsGoalPercent }};

    new Chart(donutCtx, {
        type: 'doughnut',
        data: {
            datasets: [{
                data: [goalPct, 100 - goalPct],
                backgroundColor: ['#2d1b5e', '#ede9f8'],
                borderWidth: 0,
                hoverOffset: 4,
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            cutout: '72%',
            plugins: {
                legend: { display: false },
                tooltip: { enabled: false },
            }
        }
    });

});
</script>
@endpush

@section('content')
<div class="container-fluid p-0">

    {{-- ============================================================
         FILA 1: 4 Paneles KPI + Ventas Mes + Meta
    ============================================================ --}}
    <div class="row g-2 mb-2">

        {{-- KPI 1: Ventas de Hoy --}}
        <div class="col-12 col-sm-6 col-xl-3">
            <div class="kpi-panel kpi-sales">
                <div class="kpi-icon-wrap">
                    <i class="bi bi-cash-coin"></i>
                </div>
                <div class="kpi-content">
                    <span class="kpi-label">Ventas de Hoy</span>
                    <div class="kpi-value">{{ $currency ?? 'S/' }} {{ number_format($totalSalesToday ?? 0, 2, '.', ',') }}</div>
                    <div class="kpi-sub">
                        <i class="bi bi-receipt me-1"></i>
                        {{ $ordersCountToday ?? 0 }} órdenes completadas
                    </div>
                </div>
                <div class="kpi-badge">HOY</div>
            </div>
        </div>

        {{-- KPI 2: Mesas en Servicio --}}
        <div class="col-12 col-sm-6 col-xl-3">
            <div class="kpi-panel kpi-tables">
                <div class="kpi-icon-wrap">
                    <i class="bi bi-grid-3x3-gap-fill"></i>
                </div>
                <div class="kpi-content">
                    <span class="kpi-label">Mesas en Servicio</span>
                    <div class="kpi-value">{{ $activeTables ?? 0 }}</div>
                    <div class="kpi-sub">
                        <i class="bi bi-clock me-1"></i>
                        Ocupadas ahora mismo
                    </div>
                </div>
                <div class="kpi-badge">LIVE</div>
            </div>
        </div>

        {{-- KPI 3: Ventas del Mes --}}
        <div class="col-12 col-sm-6 col-xl-3">
            <div class="kpi-panel kpi-month">
                <div class="kpi-icon-wrap">
                    <i class="bi bi-graph-up-arrow"></i>
                </div>
                <div class="kpi-content">
                    <span class="kpi-label">Ventas del Mes</span>
                    <div class="kpi-value">{{ $currency ?? 'S/' }} {{ number_format($totalSalesMonth ?? 0, 0, '.', ',') }}</div>
                    <div class="kpi-sub">
                        <i class="bi bi-bullseye me-1"></i>
                        Meta: {{ $currency ?? 'S/' }} {{ number_format($monthlyGoal ?? 5000, 0, '.', ',') }}
                    </div>
                </div>
                <div class="kpi-badge">MES</div>
            </div>
        </div>

        {{-- KPI 4: Stock Bajo --}}
        <div class="col-12 col-sm-6 col-xl-3">
            <div class="kpi-panel kpi-stock {{ ($lowStockProducts ?? 0) > 0 ? 'kpi-alert' : 'kpi-ok' }}">
                <div class="kpi-icon-wrap">
                    <i class="bi bi-{{ ($lowStockProducts ?? 0) > 0 ? 'exclamation-triangle-fill' : 'box-seam-fill' }}"></i>
                </div>
                <div class="kpi-content">
                    <span class="kpi-label">Alertas de Stock</span>
                    <div class="kpi-value">{{ $lowStockProducts ?? 0 }}</div>
                    <div class="kpi-sub">
                        @if(($lowStockProducts ?? 0) > 0)
                            <i class="bi bi-exclamation-circle me-1"></i> Productos por reponer
                        @else
                            <i class="bi bi-check-circle me-1"></i> Inventario en buen estado
                        @endif
                    </div>
                </div>
                <a href="{{ route('inventory.logs') }}" class="kpi-badge kpi-badge-link">VER</a>
            </div>
        </div>

    </div>

    {{-- ============================================================
         FILA 1B: Meta mensual + Progreso
    ============================================================ --}}
    <div class="row g-2 mb-2">
        <div class="col-12">
            <div class="goal-bar-panel">
                <div class="goal-bar-left">
                    <i class="bi bi-trophy-fill"></i>
                    <div>
                        <span class="goal-bar-title">Progreso de Meta Mensual</span>
                        <span class="goal-bar-sub">Logrado: <strong>{{ $currency ?? 'S/' }} {{ number_format($totalSalesMonth ?? 0, 2, '.', ',') }}</strong> de <strong>{{ $currency ?? 'S/' }} {{ number_format($monthlyGoal ?? 5000, 2, '.', ',') }}</strong></span>
                    </div>
                </div>
                <div class="goal-bar-track-wrap">
                    <div class="goal-bar-track">
                        <div class="goal-bar-fill" style="width: {{ $goalPercent ?? 0 }}%;">
                            <span class="goal-bar-pct">{{ $goalPercent ?? 0 }}%</span>
                        </div>
                    </div>
                </div>
                <a href="{{ route('reports.index') }}" class="goal-bar-btn">
                    <i class="bi bi-bar-chart-line-fill me-1"></i> Ver Reportes
                </a>
            </div>
        </div>
    </div>

    {{-- ============================================================
         FILA 2: Actividad Anual | Ingreso Actual
    ============================================================ --}}
    <div class="row g-2">

        {{-- Gráfico Actividad Anual --}}
        <div class="col-12 col-xl-8">
            <div class="card h-100">
                <div class="card-header d-flex align-items-center justify-content-between py-2 px-3">
                    <span class="fw-bold" style="font-size:.78rem;">Actividad del Año</span>
                    <div style="background:#ff8c00;width:18px;height:18px;border-radius:5px;display:flex;align-items:center;justify-content:center;">
                        <span style="color:white;font-size:11px;line-height:1;">—</span>
                    </div>
                </div>
                <div class="card-body p-2" style="height:200px;">
                    <canvas id="lineChart"></canvas>
                </div>
            </div>
        </div>

        {{-- Donut: Ingreso Actual --}}
        <div class="col-12 col-xl-4">
            <div class="card h-100">
                <div class="card-header d-flex align-items-center justify-content-between py-2 px-3">
                    <span class="fw-bold" style="font-size:.78rem;">Ingreso Actual</span>
                    <div style="background:#ff8c00;width:18px;height:18px;border-radius:5px;display:flex;align-items:center;justify-content:center;">
                        <span style="color:white;font-size:11px;line-height:1;">—</span>
                    </div>
                </div>
                <div class="card-body d-flex flex-column align-items-center justify-content-center p-2 gap-2">
                    {{-- Donut --}}
                    <div style="position:relative;width:110px;height:110px;">
                        <canvas id="donutChart"></canvas>
                        <div style="position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;">
                            <div style="font-size:1.3rem;font-weight:800;color:#2d1b5e;line-height:1;">{{ $goalPercent ?? 60 }}%</div>
                            <div style="font-size:.58rem;color:#9090b0;font-weight:600;">de meta</div>
                        </div>
                    </div>

                    {{-- Stat --}}
                    <div class="text-center">
                        <div style="font-size:.68rem;color:#6c6c90;">Meta mensual: <strong style="color:#2d1b5e;">S/ {{ number_format($monthlyGoal ?? 5000, 0,'.',',') }}</strong></div>
                        <div style="font-size:.66rem;color:#9090b0;margin-top:2px;">Logrado: S/ {{ number_format($totalSalesMonth ?? 0, 0,'.',',') }}</div>
                    </div>

                    {{-- Buttons --}}
                    <div class="d-flex gap-2 w-100">
                        <a href="{{ route('reports.index') }}" class="btn btn-success flex-grow-1 py-1" style="font-size:.74rem;">
                            <i class="bi bi-eye me-1"></i>Ver más
                        </a>
                        <a href="{{ route('reports.index') }}" class="btn btn-danger flex-grow-1 py-1" style="font-size:.74rem;">
                            <i class="bi bi-download me-1"></i>Exportar
                        </a>
                    </div>

                    <p style="font-size:.64rem;color:#9090b0;text-align:center;margin:0;">
                        Progreso mensual basado en las ventas registradas en el sistema.
                    </p>
                </div>
            </div>
        </div>

    </div>

    {{-- ============================================================
         FILA 3: Estado de Salones + Más Vendidos
    ============================================================ --}}
    <div class="row g-2 mt-0">

        <div class="col-lg-8">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center py-2 px-3">
                    <h6 class="fw-bold mb-0" style="font-size:.85rem;">Estado de Salones</h6>
                    <div class="d-flex gap-2">
                        <span class="badge" style="background:#f0fdf4;color:#16a34a;border:1px solid #bbf7d0;font-size:.66rem;">● Disponible</span>
                        <span class="badge" style="background:#fff1f2;color:#e11d48;border:1px solid #fecdd3;font-size:.66rem;">● Ocupada</span>
                    </div>
                </div>
                <div class="card-body px-3 pb-3 pt-2">
                    @if(isset($areas) && count($areas) > 0)
                        <ul class="nav nav-pills mb-2 gap-2" id="pills-tab" role="tablist">
                            @foreach($areas as $index => $area)
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link {{ $index == 0 ? 'active' : '' }} rounded-pill px-3 py-1 fw-bold border"
                                            style="font-size:.78rem;"
                                            id="pills-{{ $area->id }}-tab" data-bs-toggle="pill"
                                            data-bs-target="#pills-{{ $area->id }}" type="button">
                                        {{ $area->name }}
                                    </button>
                                </li>
                            @endforeach
                        </ul>

                        <div class="tab-content">
                            @foreach($areas as $index => $area)
                                <div class="tab-pane fade {{ $index == 0 ? 'show active' : '' }}" id="pills-{{ $area->id }}">
                                    <div class="row row-cols-2 row-cols-sm-3 row-cols-xl-5 g-2">
                                        @foreach($area->tables as $table)
                                            @php $isBusy = $table->orders->count() > 0; @endphp
                                            <div class="col">
                                                <a href="{{ route('pos.order', $table->id) }}" class="text-decoration-none">
                                                    <div class="card border-0 text-center py-2 table-hover-card"
                                                         style="background:{{ $isBusy ? '#fff1f2' : '#f8f5ff' }};">
                                                        <div class="card-body p-2">
                                                            <div class="mb-1">
                                                                <i class="bi {{ $isBusy ? 'bi-person-workspace' : 'bi-check-circle-fill' }} fs-3"
                                                                   style="color:{{ $isBusy ? '#e11d48' : '#22c55e' }};"></i>
                                                            </div>
                                                            <h6 class="fw-bold text-dark mb-1" style="font-size:.76rem;">{{ $table->name }}</h6>
                                                            @if($isBusy)
                                                                <span class="badge rounded-pill" style="background:#e11d48;font-size:.64rem;">
                                                                    S/{{ number_format($table->orders->first()->total, 2) }}
                                                                </span>
                                                            @else
                                                                <small class="text-muted" style="font-size:.64rem;">Libre</small>
                                                            @endif
                                                        </div>
                                                    </div>
                                                </a>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    @else
                        <div class="text-center py-5 text-muted">No hay áreas configuradas.</div>
                    @endif
                </div>
            </div>
        </div>

        <div class="col-lg-4">
            <div class="card h-100">
                <div class="card-header py-2 px-3">
                    <h6 class="fw-bold mb-0" style="font-size:.85rem;">🏆 Más Vendidos</h6>
                </div>
                <div class="card-body px-0 py-1">
                    <div class="list-group list-group-flush">
                        @forelse($topProducts ?? [] as $product)
                            <div class="list-group-item border-0 d-flex align-items-center px-3 py-1 top-product-item">
                                <div class="me-2 position-relative flex-shrink-0">
                                    @if($product->image)
                                        <img src="{{ asset('storage/'.$product->image) }}" class="rounded-3 shadow-sm"
                                             width="36" height="36" style="object-fit:cover;">
                                    @else
                                        <div class="rounded-3 d-flex align-items-center justify-content-center"
                                             style="width:36px;height:36px;background:#f0eef8;color:#9b5de5;">
                                            <i class="bi bi-image" style="font-size:.9rem;"></i>
                                        </div>
                                    @endif
                                    <span class="position-absolute top-0 start-0 translate-middle badge rounded-pill border border-white"
                                          style="background:var(--primary);font-size:.55rem;">
                                        #{{ $loop->iteration }}
                                    </span>
                                </div>
                                <div class="flex-grow-1 min-w-0">
                                    <div class="fw-bold text-dark text-truncate" style="font-size:.78rem;">{{ $product->name }}</div>
                                    <small class="text-muted" style="font-size:.68rem;">{{ $product->total_qty }} unidades</small>
                                </div>
                                <i class="bi bi-trophy-fill text-warning ms-2" style="opacity:.6;font-size:.85rem;"></i>
                            </div>
                        @empty
                            <div class="text-center py-5 text-muted">Sin datos de ventas aún.</div>
                        @endforelse
                    </div>
                </div>
            </div>
        </div>

    </div>

</div>

{{-- Dashboard-specific styles --}}
<style>
    /* ── KPI Panels ───────────────────────────────────────── */
    .kpi-panel {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 13px 15px;
        border-radius: 12px;
        background: #fff;
        box-shadow: 0 2px 10px rgba(45,27,94,0.06);
        position: relative;
        overflow: hidden;
        transition: transform .22s, box-shadow .22s;
        border: 1px solid rgba(224,221,240,0.6);
        height: 100%;
    }
    .kpi-panel:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(45,27,94,0.11);
    }
    .kpi-panel::before {
        content: '';
        position: absolute;
        top: 0; left: 0;
        width: 4px;
        height: 100%;
        border-radius: 12px 0 0 12px;
    }
    .kpi-sales::before  { background: linear-gradient(180deg,#ff8c00,#ffc36b); }
    .kpi-tables::before { background: linear-gradient(180deg,#9b5de5,#c084fc); }
    .kpi-month::before  { background: linear-gradient(180deg,#22c55e,#86efac); }
    .kpi-stock.kpi-alert::before { background: linear-gradient(180deg,#ef4444,#fca5a5); }
    .kpi-stock.kpi-ok::before    { background: linear-gradient(180deg,#06b6d4,#67e8f9); }

    .kpi-icon-wrap {
        width: 38px;
        height: 38px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.1rem;
        flex-shrink: 0;
    }
    .kpi-sales  .kpi-icon-wrap { background: #fff4e6; color: #ff8c00; }
    .kpi-tables .kpi-icon-wrap { background: #f3eeff; color: #9b5de5; }
    .kpi-month  .kpi-icon-wrap { background: #f0fdf4; color: #22c55e; }
    .kpi-stock.kpi-alert .kpi-icon-wrap { background: #fff1f2; color: #ef4444; }
    .kpi-stock.kpi-ok    .kpi-icon-wrap { background: #ecfeff; color: #06b6d4; }

    .kpi-content { flex: 1; min-width: 0; }
    .kpi-label {
        display: block;
        font-size: .64rem;
        font-weight: 600;
        letter-spacing: .05em;
        text-transform: uppercase;
        color: #9090b0;
        margin-bottom: 2px;
    }
    .kpi-value {
        font-size: 1.2rem;
        font-weight: 800;
        color: #1e1b3a;
        line-height: 1.1;
        margin-bottom: 3px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .kpi-sub {
        font-size: .66rem;
        color: #9090b0;
        display: flex;
        align-items: center;
    }
    .kpi-badge {
        position: absolute;
        top: 10px;
        right: 10px;
        font-size: .56rem;
        font-weight: 700;
        letter-spacing: .07em;
        padding: 2px 7px;
        border-radius: 20px;
        background: rgba(45,27,94,0.06);
        color: #6c6c90;
        text-decoration: none;
    }
    .kpi-badge-link:hover {
        background: #ff8c00;
        color: #fff;
    }

    /* ── Goal Progress Bar ───────────────────────────────── */
    .goal-bar-panel {
        background: #fff;
        border-radius: 12px;
        border: 1px solid rgba(224,221,240,0.6);
        box-shadow: 0 2px 10px rgba(45,27,94,0.05);
        padding: 11px 18px;
        display: flex;
        align-items: center;
        gap: 16px;
        flex-wrap: wrap;
    }
    .goal-bar-left {
        display: flex;
        align-items: center;
        gap: 10px;
        flex-shrink: 0;
    }
    .goal-bar-left > i {
        font-size: 1.15rem;
        color: #ff8c00;
    }
    .goal-bar-title {
        display: block;
        font-size: .76rem;
        font-weight: 700;
        color: #1e1b3a;
    }
    .goal-bar-sub {
        display: block;
        font-size: .66rem;
        color: #9090b0;
        margin-top: 1px;
    }
    .goal-bar-track-wrap { flex: 1; min-width: 160px; }
    .goal-bar-track {
        width: 100%;
        height: 11px;
        background: #f0eef8;
        border-radius: 20px;
        overflow: hidden;
    }
    .goal-bar-fill {
        height: 100%;
        background: linear-gradient(90deg, #ff8c00, #ffc36b);
        border-radius: 20px;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        padding-right: 7px;
        transition: width .6s ease;
        min-width: 32px;
    }
    .goal-bar-pct {
        font-size: .58rem;
        font-weight: 700;
        color: #fff;
        white-space: nowrap;
    }
    .goal-bar-btn {
        flex-shrink: 0;
        background: linear-gradient(135deg,#2d1b5e,#9b5de5);
        color: #fff;
        border-radius: 9px;
        padding: 6px 15px;
        font-size: .74rem;
        font-weight: 600;
        text-decoration: none;
        transition: opacity .2s, transform .2s;
        white-space: nowrap;
    }
    .goal-bar-btn:hover { opacity: .9; transform: translateY(-1px); color:#fff; }

    /* ── Table cards ───────────────────────────────────────── */
    .table-hover-card {
        border-radius: 14px !important;
        transition: transform .2s, box-shadow .2s;
        box-shadow: 0 2px 10px rgba(0,0,0,0.04) !important;
    }
    .table-hover-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 22px rgba(45,27,94,0.12) !important;
    }

    /* Nav pills (override for purple/orange theme) */
    .nav-pills .nav-link { color: #6c6c90; background: white; border-color: #e0ddf0; font-size:.84rem; }
    .nav-pills .nav-link.active { background: var(--primary, #ff8c00); color: white; border-color: var(--primary, #ff8c00); box-shadow: 0 4px 14px rgba(255,140,0,0.30); }

    /* Top product hover */
    .top-product-item { transition: background .15s; border-radius: 10px; }
    .top-product-item:hover { background: #f8f5ff; }
</style>

@includeIf('products.create_modal')
@endsection