@extends('layouts.admin')
@section('title', 'Dashboard')
@section('page-title', 'Overview')

@section('content')

{{-- Stat grid --}}
<div style="display:grid; grid-template-columns: repeat(3,1fr); gap:16px; margin-bottom:28px;">

    {{-- Total Revenue --}}
    <div class="stat-card" style="grid-column: span 1; background: linear-gradient(135deg, #10101a, #1a0a0a); border-color: rgba(239,68,68,0.2);">
        <div style="position:absolute;top:0;right:0;width:80px;height:80px;background:radial-gradient(circle,rgba(239,68,68,0.12),transparent 70%);border-radius:50%;"></div>
        <div style="font-size:10px;letter-spacing:3px;text-transform:uppercase;color:var(--muted);font-family:'JetBrains Mono',monospace;margin-bottom:12px;">TOTAL REVENUE</div>
        <div style="font-family:'Bebas Neue',sans-serif;font-size:42px;color:#ef4444;line-height:1;text-shadow:0 0 30px rgba(239,68,68,0.4);">${{ number_format($stats['total_revenue'], 0) }}</div>
        <div style="font-size:11px;color:var(--muted);margin-top:6px;font-family:'JetBrains Mono',monospace;">from paid orders</div>
    </div>

    {{-- Orders --}}
    <div class="stat-card">
        <div style="font-size:10px;letter-spacing:3px;text-transform:uppercase;color:var(--muted);font-family:'JetBrains Mono',monospace;margin-bottom:12px;">TOTAL ORDERS</div>
        <div style="display:flex;align-items:flex-end;gap:16px;">
            <div style="font-family:'Bebas Neue',sans-serif;font-size:42px;color:#e2e8f0;line-height:1;">{{ $stats['total_orders'] }}</div>
            <div style="padding-bottom:6px;">
                <div style="font-size:11px;color:#86efac;font-family:'JetBrains Mono',monospace;">{{ $stats['paid_orders'] }} PAID</div>
                <div style="font-size:11px;color:#fde047;font-family:'JetBrains Mono',monospace;margin-top:2px;">{{ $stats['pending_orders'] }} PENDING</div>
            </div>
        </div>
    </div>

    {{-- Submissions --}}
    <div class="stat-card">
        <div style="font-size:10px;letter-spacing:3px;text-transform:uppercase;color:var(--muted);font-family:'JetBrains Mono',monospace;margin-bottom:12px;">INBOX</div>
        <div style="display:flex;gap:24px;">
            <div>
                <div style="font-family:'Bebas Neue',sans-serif;font-size:42px;color:#e2e8f0;line-height:1;">{{ $stats['contacts'] }}</div>
                <div style="font-size:10px;color:var(--muted);font-family:'JetBrains Mono',monospace;margin-top:4px;">CONTACTS</div>
            </div>
            <div style="width:1px;background:var(--border);"></div>
            <div>
                <div style="font-family:'Bebas Neue',sans-serif;font-size:42px;color:#e2e8f0;line-height:1;">{{ $stats['quotes'] }}</div>
                <div style="font-size:10px;color:var(--muted);font-family:'JetBrains Mono',monospace;margin-top:4px;">QUOTES</div>
            </div>
        </div>
    </div>
</div>

{{-- Quick-action cards --}}
<div style="display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:28px;">
    @foreach([
        ['Orders', route('admin.orders.index'), $stats['total_orders'], '#86efac', 'M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4zM3 6h18M16 10a4 4 0 0 1-8 0'],
        ['Paid', route('admin.orders.index').'?status=paid', $stats['paid_orders'], '#86efac', 'M22 11.08V12a10 10 0 1 1-5.93-9.14M22 4 12 14.01l-3-3'],
        ['Contacts', route('admin.contacts.index'), $stats['contacts'], '#93c5fd', 'M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2zm18 2-10 7L2 6'],
        ['Quotes', route('admin.quotes.index'), $stats['quotes'], '#f9a8d4', 'M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2'],
    ] as [$label, $href, $count, $color, $path])
    <a href="{{ $href }}" style="display:block;background:var(--card);border:1px solid var(--border);border-radius:12px;padding:16px;text-decoration:none;transition:all 0.2s;position:relative;overflow:hidden;"
       onmouseover="this.style.borderColor='rgba(239,68,68,0.3)';this.style.transform='translateY(-2px)'"
       onmouseout="this.style.borderColor='var(--border)';this.style.transform='translateY(0)'">
        <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="{{ $color }}" stroke-width="2">
                <path d="{{ $path }}"/>
            </svg>
            <span style="font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:2px;color:var(--muted);text-transform:uppercase;">VIEW →</span>
        </div>
        <div style="font-family:'Bebas Neue',sans-serif;font-size:32px;color:{{ $color }};line-height:1;">{{ $count }}</div>
        <div style="font-size:11px;color:var(--muted);margin-top:4px;font-family:'JetBrains Mono',monospace;letter-spacing:1px;text-transform:uppercase;">{{ $label }}</div>
    </a>
    @endforeach
</div>

{{-- Recent orders table --}}
<div class="glass-card">
    <div class="section-header">
        <div class="section-title">Recent Orders</div>
        <a href="{{ route('admin.orders.index') }}" class="view-all">VIEW ALL →</a>
    </div>

    @if($recentOrders->isEmpty())
        <div style="padding:48px;text-align:center;">
            <div style="font-size:40px;margin-bottom:12px;opacity:0.3;">📦</div>
            <div style="color:var(--muted);font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:2px;">NO ORDERS YET</div>
        </div>
    @else
    <table class="data-table">
        <thead>
            <tr>
                <th>Order</th>
                <th>Customer</th>
                <th>Items</th>
                <th>Total</th>
                <th>Status</th>
                <th>Date</th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            @foreach($recentOrders as $order)
            <tr>
                <td>
                    <span class="mono" style="color:#94a3b8;font-size:11px;">{{ $order->order_number }}</span>
                </td>
                <td>
                    <div style="font-weight:500;color:var(--text);">{{ $order->full_name }}</div>
                    <div style="font-size:11px;color:var(--muted);">{{ $order->email }}</div>
                </td>
                <td style="color:var(--muted);font-size:12px;">{{ $order->items->count() }} item(s)</td>
                <td>
                    <span style="font-family:'JetBrains Mono',monospace;font-weight:600;color:#86efac;">${{ number_format($order->total, 2) }}</span>
                </td>
                <td>
                    <span class="badge badge-{{ $order->status }}">
                        <span class="badge-dot"></span>
                        {{ $order->status }}
                    </span>
                </td>
                <td style="color:var(--muted);font-size:12px;font-family:'JetBrains Mono',monospace;">{{ $order->created_at->format('M j, Y') }}</td>
                <td style="text-align:right;">
                    <a href="{{ route('admin.orders.show', $order) }}" class="link-red">OPEN →</a>
                </td>
            </tr>
            @endforeach
        </tbody>
    </table>
    @endif
</div>

@endsection
