@extends('layouts.app')

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

@push('styles')
<style>
    .welcome-banner {
        background: linear-gradient(135deg, var(--accent) 0%, #4834d4 100%);
        border-radius: var(--radius-lg);
        padding: 2rem 2.5rem;
        margin-bottom: 2rem;
        position: relative;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 1rem;
    }

    .welcome-banner::after {
        content: '';
        position: absolute;
        top: -50%;
        right: -10%;
        width: 300px;
        height: 300px;
        background: rgba(255, 255, 255, 0.05);
        border-radius: 50%;
    }

    .welcome-banner h1 { font-size: 1.5rem; font-weight: 700; color: #fff; margin-bottom: 0.25rem; }
    .welcome-banner p { color: rgba(255, 255, 255, 0.8); font-size: 0.9rem; }
    .welcome-banner .plan-badge {
        background: rgba(255,255,255,0.2);
        color: #fff;
        padding: 0.4rem 1rem;
        border-radius: 20px;
        font-size: 0.8rem;
        font-weight: 600;
        backdrop-filter: blur(5px);
    }

    /* Stats Grid */
    .stats-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 1.25rem;
        margin-bottom: 2rem;
    }

    .stat-card {
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        padding: 1.25rem;
        transition: transform var(--transition), box-shadow var(--transition);
    }

    .stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }

    .stat-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 0.75rem;
    }

    .stat-icon {
        width: 40px;
        height: 40px;
        border-radius: var(--radius-md);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1rem;
    }

    .stat-icon.blue { background: var(--accent-light); color: var(--accent); }
    .stat-icon.green { background: var(--success-light); color: var(--success); }
    .stat-icon.yellow { background: var(--warning-light); color: var(--warning); }
    .stat-icon.red { background: var(--danger-light); color: var(--danger); }
    .stat-icon.purple { background: rgba(72, 52, 212, 0.15); color: #4834d4; }

    .stat-value { font-size: 1.5rem; font-weight: 700; line-height: 1; margin-bottom: 0.25rem; }
    .stat-label { font-size: 0.78rem; color: var(--text-muted); }
    .stat-badge { background: var(--danger); color: #fff; font-size: 0.65rem; font-weight: 700; padding: 2px 7px; border-radius: 10px; }

    /* Critical Quota Alert Banner */
    .quota-alert {
        display: flex;
        align-items: center;
        gap: 1rem;
        padding: 1rem 1.25rem;
        border-radius: var(--radius-md);
        margin-bottom: 1rem;
        border: 1px solid transparent;
    }
    .quota-alert-warn {
        background: rgba(255, 176, 32, 0.08);
        border-color: rgba(255, 176, 32, 0.35);
        color: var(--text-primary);
    }
    .quota-alert-critical {
        background: rgba(255, 71, 87, 0.09);
        border-color: rgba(255, 71, 87, 0.4);
        color: var(--text-primary);
    }
    .quota-alert-icon {
        width: 36px; height: 36px; border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
        font-size: 1rem; flex-shrink: 0;
    }
    .quota-alert-warn .quota-alert-icon { background: rgba(255, 176, 32, 0.18); color: #d98a00; }
    .quota-alert-critical .quota-alert-icon { background: rgba(255, 71, 87, 0.18); color: #e11d48; }
    .quota-alert-body { flex: 1; font-size: 0.88rem; line-height: 1.5; }
    .quota-alert-body strong { display: block; margin-bottom: 0.15rem; }
    .quota-alert-cta {
        display: inline-flex; align-items: center; gap: 0.4rem;
        padding: 0.5rem 0.95rem;
        background: var(--accent); color: #fff;
        border-radius: var(--radius-sm);
        font-size: 0.82rem; font-weight: 600;
        text-decoration: none; white-space: nowrap;
        transition: opacity 0.2s;
    }
    .quota-alert-cta:hover { opacity: 0.9; }
    @media (max-width: 640px) {
        .quota-alert { flex-wrap: wrap; }
        .quota-alert-cta { width: 100%; justify-content: center; }
    }

    /* Quota Section */
    .quota-section {
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        padding: 1.5rem;
        margin-bottom: 2rem;
    }

    .quota-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 1.25rem;
    }

    .quota-title {
        font-size: 1rem;
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .quota-title i { color: var(--accent); }

    .quota-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 1rem;
    }

    .quota-item { padding: 0.75rem; background: var(--bg-primary); border-radius: var(--radius-md); }

    .quota-item-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 0.5rem;
    }

    .quota-item-label { font-size: 0.8rem; color: var(--text-muted); }

    .quota-item-count {
        font-size: 0.8rem;
        font-weight: 600;
    }

    .quota-item-count.warning { color: var(--warning); }
    .quota-item-count.danger { color: var(--danger); }
    .quota-item-count.ok { color: var(--text-secondary); }
    .quota-item-count.unlimited { color: var(--success); }

    .quota-bar {
        height: 6px;
        background: var(--bg-hover);
        border-radius: 3px;
        overflow: hidden;
    }

    .quota-bar-fill {
        height: 100%;
        border-radius: 3px;
        transition: width 0.5s ease;
    }

    .quota-bar-fill.ok { background: var(--accent); }
    .quota-bar-fill.warning { background: var(--warning); }
    .quota-bar-fill.danger { background: var(--danger); }

    /* Quick Actions */
    .section-title { font-size: 1.05rem; font-weight: 600; margin-bottom: 1rem; }

    .quick-actions-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 1rem;
        margin-bottom: 2rem;
    }

    .quick-action-card {
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        padding: 1.25rem 1rem;
        text-align: center;
        cursor: pointer;
        transition: all var(--transition);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.625rem;
        color: var(--text-primary);
        font-family: inherit;
    }

    .quick-action-card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow); }

    .qa-icon {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.1rem;
    }

    .qa-icon.blue { background: var(--accent-light); color: var(--accent); }
    .qa-icon.green { background: var(--success-light); color: var(--success); }
    .qa-icon.yellow { background: var(--warning-light); color: var(--warning); }
    .qa-icon.purple { background: rgba(72, 52, 212, 0.15); color: #4834d4; }

    .qa-label { font-size: 0.82rem; font-weight: 500; }

    /* Two-column layout */
    .dashboard-grid {
        display: grid;
        grid-template-columns: 1.5fr 1fr;
        gap: 1.5rem;
        margin-bottom: 2rem;
    }

    .table-container {
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        overflow-x: auto;
    }

    .table-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 1.25rem 1.5rem;
        border-bottom: 1px solid var(--border);
    }

    .table-title { font-size: 1rem; font-weight: 600; display: flex; align-items: center; gap: 0.5rem; }

    .data-table { width: 100%; border-collapse: collapse; }

    .data-table th {
        text-align: left;
        padding: 0.75rem 1.5rem;
        font-size: 0.72rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--text-muted);
        border-bottom: 1px solid var(--border);
        background: var(--bg-secondary);
    }

    .data-table td {
        padding: 0.75rem 1.5rem;
        font-size: 0.85rem;
        border-bottom: 1px solid var(--border);
        color: var(--text-secondary);
    }

    .data-table tbody tr:hover { background: var(--bg-hover); }

    .order-id {
        font-family: 'Courier New', monospace;
        font-weight: 600;
        color: var(--accent);
        font-size: 0.78rem;
    }

    .badge-status {
        display: inline-flex;
        align-items: center;
        padding: 0.2rem 0.55rem;
        border-radius: 20px;
        font-size: 0.68rem;
        font-weight: 600;
        text-transform: capitalize;
    }

    .badge-pending { background: rgba(255, 165, 2, 0.15); color: #ffa502; }
    .badge-processing { background: rgba(0, 180, 216, 0.15); color: #00b4d8; }
    .badge-shipped { background: rgba(0, 119, 182, 0.15); color: #0077b6; }
    .badge-delivered, .badge-completed { background: rgba(0, 212, 170, 0.15); color: #00d4aa; }
    .badge-cancelled { background: rgba(99, 110, 114, 0.15); color: #636e72; }

    /* Low Stock */
    .alert-list { list-style: none; }

    .alert-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.75rem 1.5rem;
        border-bottom: 1px solid var(--border);
        transition: background var(--transition);
    }

    .alert-item:hover { background: var(--bg-hover); }
    .alert-item:last-child { border-bottom: none; }

    .alert-info { display: flex; flex-direction: column; gap: 0.125rem; }
    .alert-product-name { font-size: 0.85rem; font-weight: 500; color: var(--text-primary); }
    .alert-stock { font-size: 0.72rem; color: var(--danger); }
    .alert-stock .threshold { color: var(--text-muted); margin-left: 0.5rem; }

    /* Charts */
    .charts-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1.5rem;
        margin-bottom: 2rem;
    }

    .chart-card {
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        padding: 1.5rem;
        position: relative;
    }

    .chart-wrapper {
        position: relative;
        height: 220px;
    }

    .chart-card h3 {
        font-size: 0.9rem;
        font-weight: 600;
        margin-bottom: 1rem;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .chart-card h3 i { color: var(--accent); }

    .empty-state {
        text-align: center;
        padding: 2.5rem 2rem;
        color: var(--text-muted);
    }

    .empty-state i { font-size: 2rem; margin-bottom: 0.75rem; color: var(--accent); opacity: 0.5; }
    .empty-state p { font-size: 0.85rem; }

    @media (max-width: 1024px) {
        .stats-grid { grid-template-columns: repeat(2, 1fr); }
        .quota-grid { grid-template-columns: repeat(2, 1fr); }
        .dashboard-grid { grid-template-columns: 1fr; }
        .charts-row { grid-template-columns: 1fr; }
    }

    @media (max-width: 640px) {
        .stats-grid { grid-template-columns: 1fr; }
        .quota-grid { grid-template-columns: 1fr; }
        .quick-actions-grid { grid-template-columns: repeat(2, 1fr); }
        .welcome-banner { padding: 1.5rem; }
        .welcome-banner h1 { font-size: 1.2rem; }
    }
</style>
@endpush

@section('content')
    {{-- Welcome Banner --}}
    <div class="welcome-banner">
        <div>
            <h1>Welcome back, {{ auth()->user()->name ?? 'User' }}!</h1>
            <p>Managing inventory for <strong>{{ $tenant->business_name ?? 'Your Business' }}</strong></p>
        </div>
        <span class="plan-badge"><i class="fas fa-crown" style="margin-right:0.375rem;"></i> {{ $planName ?? 'Free' }} Plan</span>
    </div>

    {{-- Subscription expired banner --}}
    @if(isset($subscriptionActive) && !$subscriptionActive)
        <div class="quota-alert quota-alert-critical">
            <div class="quota-alert-icon"><i class="fas fa-triangle-exclamation"></i></div>
            <div class="quota-alert-body">
                <strong>Subscription expired.</strong>
                Your paid plan has ended — new orders through your forms have been paused. Renew to keep selling.
            </div>
            <a href="{{ route('inventory.subscription') }}" class="quota-alert-cta"><i class="fas fa-arrow-up"></i> Renew plan</a>
        </div>
    @endif

    {{-- Critical quota alerts (at or near limits) --}}
    @if(!empty($criticalQuotas ?? []))
        @foreach($criticalQuotas as $qKey => $q)
            <div class="quota-alert {{ $q['level'] === 'full' ? 'quota-alert-critical' : 'quota-alert-warn' }}">
                <div class="quota-alert-icon">
                    <i class="fas {{ $q['level'] === 'full' ? 'fa-ban' : 'fa-triangle-exclamation' }}"></i>
                </div>
                <div class="quota-alert-body">
                    @if($q['level'] === 'full')
                        <strong>{{ $q['label'] }} quota full ({{ $q['used'] }} / {{ $q['max'] }}).</strong>
                        @if($qKey === 'orders')
                            Your forms are no longer accepting new orders this month. Upgrade to receive more.
                        @elseif($qKey === 'products')
                            You can\'t add more products until you upgrade or remove some.
                        @elseif($qKey === 'forms')
                            You can\'t create more order forms until you upgrade.
                        @elseif($qKey === 'staff')
                            You can\'t invite more staff until you upgrade.
                        @else
                            You\'ve hit your plan limit. Upgrade to continue.
                        @endif
                    @else
                        <strong>{{ $q['label'] }} almost full ({{ $q['used'] }} / {{ $q['max'] }} — {{ $q['pct'] }}%).</strong>
                        @if($qKey === 'orders')
                            Only {{ $q['remaining'] }} orders left this month. Upgrade now to avoid disruption.
                        @else
                            Only {{ $q['remaining'] }} left. Consider upgrading soon.
                        @endif
                    @endif
                </div>
                <a href="{{ route('inventory.subscription') }}" class="quota-alert-cta"><i class="fas fa-arrow-up"></i> Upgrade</a>
            </div>
        @endforeach
    @endif

    {{-- Personal performance widget for non-owner staff.
         Owner / managers see the tenant-wide stats below. --}}
    @if(! empty($personalStats))
        <div style="background:linear-gradient(135deg, rgba(16,191,255,0.12), rgba(176,132,255,0.12));border:1px solid var(--border);border-radius:14px;padding:1.25rem 1.4rem;margin-bottom:1.5rem;">
            <div style="display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:1rem;margin-bottom:1rem;">
                <div>
                    <div style="font-size:0.72rem;text-transform:uppercase;letter-spacing:0.08em;color:var(--text-muted,#9CA3AF);font-weight:600;">Your performance · {{ now()->format('F Y') }}</div>
                    <h2 style="font-size:1.2rem;font-weight:700;margin:0.2rem 0 0;">
                        @if($personalStats['rep_name']) Hi, {{ $personalStats['rep_name'] }} —@endif
                        Let's close some deals
                    </h2>
                </div>
                @if($personalStats['commission_rate'] > 0)
                    <span style="padding:4px 12px;border-radius:999px;background:rgba(0,212,170,0.14);color:var(--success,#00D4AA);font-size:0.75rem;font-weight:700;">
                        {{ $personalStats['commission_rate'] }}% commission
                    </span>
                @endif
            </div>
            <div style="display:grid;grid-template-columns:repeat(auto-fit, minmax(160px, 1fr));gap:1rem;">
                <div>
                    <div style="font-size:0.72rem;color:var(--text-muted,#9CA3AF);text-transform:uppercase;letter-spacing:0.06em;">Deals Closed</div>
                    <div style="font-size:1.6rem;font-weight:800;margin-top:0.2rem;">{{ number_format($personalStats['deals_mtd']) }}</div>
                </div>
                <div>
                    <div style="font-size:0.72rem;color:var(--text-muted,#9CA3AF);text-transform:uppercase;letter-spacing:0.06em;">Revenue Attributed</div>
                    <div style="font-size:1.6rem;font-weight:800;margin-top:0.2rem;">{{ $currency }}{{ number_format($personalStats['revenue_mtd'], 2) }}</div>
                </div>
                <div>
                    <div style="font-size:0.72rem;color:var(--text-muted,#9CA3AF);text-transform:uppercase;letter-spacing:0.06em;">Commission Earned</div>
                    <div style="font-size:1.6rem;font-weight:800;margin-top:0.2rem;color:var(--success,#00D4AA);">{{ $currency }}{{ number_format($personalStats['commission_mtd'], 2) }}</div>
                </div>
                <div>
                    <div style="font-size:0.72rem;color:var(--text-muted,#9CA3AF);text-transform:uppercase;letter-spacing:0.06em;">Open Customers</div>
                    <div style="font-size:1.6rem;font-weight:800;margin-top:0.2rem;">
                        <a href="{{ route('inventory.customers.index', ['assignee' => 'mine']) }}" style="color:inherit;text-decoration:none;">
                            {{ number_format($personalStats['open_customers']) }}
                        </a>
                    </div>
                </div>
                <div>
                    <div style="font-size:0.72rem;color:var(--text-muted,#9CA3AF);text-transform:uppercase;letter-spacing:0.06em;">Pending Appointments</div>
                    <div style="font-size:1.6rem;font-weight:800;margin-top:0.2rem;">
                        <a href="{{ route('inventory.appointments.index', ['view' => 'mine']) }}" style="color:inherit;text-decoration:none;">
                            {{ number_format($personalStats['open_appointments']) }}
                        </a>
                    </div>
                </div>
            </div>
        </div>
    @endif

    {{-- Stats Grid --}}
    <div class="stats-grid">
        <div class="stat-card">
            <div class="stat-header">
                <div class="stat-icon blue"><i class="fas fa-boxes-stacked"></i></div>
            </div>
            <div class="stat-value">{{ $totalProducts }}</div>
            <div class="stat-label">Total Products</div>
        </div>

        <div class="stat-card">
            <div class="stat-header">
                <div class="stat-icon red"><i class="fas fa-triangle-exclamation"></i></div>
                @if($lowStockCount > 0)
                    <span class="stat-badge">{{ $lowStockCount }} alert{{ $lowStockCount > 1 ? 's' : '' }}</span>
                @endif
            </div>
            <div class="stat-value">{{ $lowStockCount }}</div>
            <div class="stat-label">Low Stock Alerts</div>
        </div>

        <div class="stat-card">
            <div class="stat-header">
                <div class="stat-icon purple"><i class="fas fa-receipt"></i></div>
                @if($pendingOrders > 0)
                    <span class="stat-badge" style="background:var(--warning);">{{ $pendingOrders }} pending</span>
                @endif
            </div>
            <div class="stat-value">{{ $totalOrders }}</div>
            <div class="stat-label">Total Orders</div>
        </div>

        <div class="stat-card">
            <div class="stat-header">
                <div class="stat-icon green"><i class="fas fa-chart-line"></i></div>
            </div>
            <div class="stat-value">{{ $currency }}{{ number_format($revenueThisMonth, 0) }}</div>
            <div class="stat-label">Revenue This Month</div>
        </div>
    </div>

    {{-- Plan Quota Usage --}}
    <div class="quota-section">
        <div class="quota-header">
            <h3 class="quota-title"><i class="fas fa-gauge-high"></i> Plan Usage</h3>
            <a href="{{ route('inventory.subscription') }}" class="btn btn-sm btn-secondary" style="font-size:0.78rem;">
                <i class="fas fa-arrow-up"></i> Upgrade
            </a>
        </div>
        <div class="quota-grid">
            @foreach($quota as $key => $q)
                @php
                    $isUnlimited = $q['max'] == -1;
                    $pct = $isUnlimited ? 0 : ($q['max'] > 0 ? min(round(($q['used'] / $q['max']) * 100), 100) : 0);
                    $level = $isUnlimited ? 'unlimited' : ($pct >= 90 ? 'danger' : ($pct >= 70 ? 'warning' : 'ok'));
                @endphp
                <div class="quota-item">
                    <div class="quota-item-header">
                        <span class="quota-item-label">{{ $q['label'] }}</span>
                        <span class="quota-item-count {{ $level }}">
                            {{ $q['used'] }} / {{ $isUnlimited ? '∞' : number_format($q['max']) }}
                        </span>
                    </div>
                    @if(!$isUnlimited)
                        <div class="quota-bar">
                            <div class="quota-bar-fill {{ $level }}" style="width: {{ $pct }}%;"></div>
                        </div>
                    @else
                        <div class="quota-bar">
                            <div class="quota-bar-fill ok" style="width: 15%; opacity: 0.5;"></div>
                        </div>
                    @endif
                </div>
            @endforeach
        </div>
    </div>

    {{-- Quick Actions --}}
    <h3 class="section-title">Quick Actions</h3>
    <div class="quick-actions-grid">
        <a href="{{ route('inventory.products.create') }}" class="quick-action-card">
            <div class="qa-icon blue"><i class="fas fa-plus-circle"></i></div>
            <div class="qa-label">Add Product</div>
        </a>
        <a href="{{ route('inventory.forms.create') }}" class="quick-action-card">
            <div class="qa-icon green"><i class="fas fa-file-lines"></i></div>
            <div class="qa-label">Create Form</div>
        </a>
        <a href="{{ route('inventory.orders.index') }}" class="quick-action-card">
            <div class="qa-icon yellow"><i class="fas fa-receipt"></i></div>
            <div class="qa-label">View Orders</div>
        </a>
        <a href="{{ route('inventory.staff.create') }}" class="quick-action-card">
            <div class="qa-icon purple"><i class="fas fa-user-plus"></i></div>
            <div class="qa-label">Add Staff</div>
        </a>
    </div>

    {{-- Recent Orders & Low Stock --}}
    <div class="dashboard-grid">
        <div class="table-container">
            <div class="table-header">
                <h2 class="table-title"><i class="fas fa-receipt"></i> Recent Orders</h2>
                <a href="{{ route('inventory.orders.index') }}" class="btn btn-sm btn-secondary">View All</a>
            </div>

            @if($recentOrders->count())
                <table class="data-table">
                    <thead>
                        <tr>
                            <th>Order #</th>
                            <th>Customer</th>
                            <th>Total</th>
                            <th>Status</th>
                            <th>Date</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($recentOrders as $order)
                            <tr>
                                <td><a href="{{ route('inventory.orders.show', $order->id) }}" class="order-id">{{ $order->order_number ?? 'ORD-' . str_pad($order->id, 5, '0', STR_PAD_LEFT) }}</a></td>
                                <td>{{ $order->customer_name ?? '—' }}</td>
                                <td>{{ $currency }}{{ number_format($order->total, 2) }}</td>
                                <td><span class="badge-status badge-{{ $order->status }}">{{ ucfirst($order->status) }}</span></td>
                                <td style="color:var(--text-muted); font-size:0.8rem;">{{ $order->created_at->format('M d') }}</td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            @else
                <div class="empty-state">
                    <i class="fas fa-receipt"></i>
                    <p>No orders yet. Share your order forms to start receiving orders!</p>
                </div>
            @endif
        </div>

        <div class="table-container">
            <div class="table-header">
                <h2 class="table-title"><i class="fas fa-triangle-exclamation" style="color:var(--danger);"></i> Low Stock</h2>
            </div>

            @if($lowStockProducts->count())
                <ul class="alert-list">
                    @foreach($lowStockProducts as $product)
                        <li class="alert-item">
                            <div class="alert-info">
                                <span class="alert-product-name">{{ $product->name }}</span>
                                <span class="alert-stock">
                                    {{ $product->quantity }} left
                                    <span class="threshold">/ min {{ $product->low_stock_threshold }}</span>
                                </span>
                            </div>
                            <a href="{{ route('inventory.products.edit', $product->id) }}" class="btn btn-sm btn-secondary" style="font-size:0.72rem;">
                                <i class="fas fa-pen"></i> Update
                            </a>
                        </li>
                    @endforeach
                </ul>
            @else
                <div class="empty-state">
                    <i class="fas fa-check-circle" style="color:var(--success);"></i>
                    <p>All products are well stocked!</p>
                </div>
            @endif
        </div>
    </div>

    {{-- Charts --}}
    <h3 class="section-title">Performance</h3>
    <div class="charts-row">
        <div class="chart-card">
            <h3><i class="fas fa-chart-bar"></i> Orders This Week</h3>
            <div class="chart-wrapper">
                <canvas id="ordersChart"></canvas>
            </div>
        </div>
        <div class="chart-card">
            <h3><i class="fas fa-chart-line"></i> Revenue This Week</h3>
            <div class="chart-wrapper">
                <canvas id="revenueChart"></canvas>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js@4/dist/chart.umd.min.js"></script>
<script>
    const chartColors = {
        accent: '#10BFFF',
        accentLight: 'rgba(16, 191, 255, 0.15)',
        success: '#00d4aa',
        successLight: 'rgba(0, 212, 170, 0.15)',
        gridColor: getComputedStyle(document.documentElement).getPropertyValue('--border').trim() || 'rgba(255,255,255,0.06)',
        textMuted: getComputedStyle(document.documentElement).getPropertyValue('--text-muted').trim() || '#636e72',
    };

    const defaultOptions = {
        responsive: true,
        maintainAspectRatio: false,
        plugins: { legend: { display: false } },
        scales: {
            x: { grid: { display: false }, ticks: { color: chartColors.textMuted, font: { size: 11 } } },
            y: { grid: { color: chartColors.gridColor }, ticks: { color: chartColors.textMuted, font: { size: 11 } }, beginAtZero: true }
        }
    };

    new Chart(document.getElementById('ordersChart'), {
        type: 'bar',
        data: {
            labels: @json($ordersChartLabels),
            datasets: [{
                data: @json($ordersChartData),
                backgroundColor: chartColors.accentLight,
                borderColor: chartColors.accent,
                borderWidth: 2,
                borderRadius: 6,
            }]
        },
        options: { ...defaultOptions, scales: { ...defaultOptions.scales, y: { ...defaultOptions.scales.y, ticks: { ...defaultOptions.scales.y.ticks, stepSize: 1 } } } }
    });

    new Chart(document.getElementById('revenueChart'), {
        type: 'line',
        data: {
            labels: @json($ordersChartLabels),
            datasets: [{
                data: @json($revenueChartData),
                borderColor: chartColors.success,
                backgroundColor: chartColors.successLight,
                fill: true,
                tension: 0.3,
                pointRadius: 4,
                pointBackgroundColor: chartColors.success,
            }]
        },
        options: defaultOptions
    });
</script>
@endpush