<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{{ $title ?? 'Print Cards' }}</title>
    <meta name="description" content="Upload ABHA, PAN, Aadhaar, and other customer-owned card files for printing, lamination, and courier delivery.">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        :root {
            --pc-navy: #123055;
            --pc-cyan: #1b6b7a;
            --pc-gold: #f4ae2b;
            --pc-cream: #f8f4eb;
            --pc-ink: #183247;
        }
        body {
            background:
                radial-gradient(circle at top right, rgba(244, 174, 43, 0.16), transparent 20rem),
                linear-gradient(180deg, #f7fafc 0%, #eef3f8 100%);
            color: var(--pc-ink);
            min-height: 100vh;
        }
        .hero-card {
            background: linear-gradient(135deg, var(--pc-navy), var(--pc-cyan));
            color: #fff;
            border: 0;
            overflow: hidden;
        }
        .hero-card::after {
            content: "";
            position: absolute;
            inset: auto -4rem -5rem auto;
            width: 14rem;
            height: 14rem;
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.1);
        }
        .card-soft {
            border: 0;
            border-radius: 1.25rem;
            box-shadow: 0 18px 48px rgba(18, 48, 85, 0.09);
        }
        .metric-number {
            font-size: 2rem;
            font-weight: 700;
            color: var(--pc-navy);
        }
        .navbar-brand {
            font-weight: 800;
            letter-spacing: 0.04em;
        }
        .navbar {
            backdrop-filter: blur(12px);
        }
        .disclaimer {
            border-left: 4px solid var(--pc-gold);
        }
        .bg-grid {
            background-image:
                linear-gradient(rgba(18, 48, 85, 0.04) 1px, transparent 1px),
                linear-gradient(90deg, rgba(18, 48, 85, 0.04) 1px, transparent 1px);
            background-size: 24px 24px;
        }
        .status-pill {
            display: inline-flex;
            align-items: center;
            gap: 0.35rem;
            padding: 0.35rem 0.75rem;
            border-radius: 999px;
            background: #edf3f8;
            font-size: 0.82rem;
            font-weight: 600;
            color: var(--pc-navy);
        }
        .timeline-item {
            position: relative;
            padding-left: 1.5rem;
        }
        .timeline-item::before {
            content: "";
            position: absolute;
            left: 0.3rem;
            top: 0.5rem;
            width: 0.6rem;
            height: 0.6rem;
            border-radius: 999px;
            background: var(--pc-gold);
            box-shadow: 0 0 0 6px rgba(244, 174, 43, 0.16);
        }
        .timeline-item::after {
            content: "";
            position: absolute;
            left: 0.57rem;
            top: 1.3rem;
            bottom: -1.3rem;
            width: 1px;
            background: rgba(18, 48, 85, 0.15);
        }
        .timeline-item:last-child::after {
            display: none;
        }
    </style>
</head>
<body>
    <nav class="navbar navbar-expand-lg bg-white bg-opacity-75 border-bottom sticky-top">
        <div class="container">
            <a class="navbar-brand" href="{{ route('home') }}">Print Cards</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mainNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="mainNav">
                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                    <li class="nav-item"><a class="nav-link" href="{{ route('home') }}">Home</a></li>
                    @auth
                        <li class="nav-item"><a class="nav-link" href="{{ route('dashboard') }}">Dashboard</a></li>
                        <li class="nav-item"><a class="nav-link" href="{{ route('documents.index') }}">Documents</a></li>
                        <li class="nav-item"><a class="nav-link" href="{{ route('orders.index') }}">Orders</a></li>
                        <li class="nav-item"><a class="nav-link" href="{{ route('orders.create') }}">Place Order</a></li>
                        @if(auth()->user()->isAdmin())
                            <li class="nav-item"><a class="nav-link" href="{{ route('admin.dashboard') }}">Admin</a></li>
                            <li class="nav-item"><a class="nav-link" href="{{ route('admin.reports.index') }}">Reports</a></li>
                        @endif
                    @endauth
                </ul>
                <div class="d-flex gap-2 align-items-center">
                    @auth
                        <span class="text-muted small">{{ auth()->user()->name }}</span>
                        <form method="POST" action="{{ route('logout') }}">
                            @csrf
                            <button class="btn btn-outline-danger btn-sm" type="submit">Logout</button>
                        </form>
                    @else
                        <a href="{{ route('login') }}" class="btn btn-outline-primary btn-sm">Login</a>
                        <a href="{{ route('register') }}" class="btn btn-primary btn-sm">Register</a>
                    @endauth
                </div>
            </div>
        </div>
    </nav>

    <main class="py-4">
        <div class="container">
            @if(session('status'))
                <div class="alert alert-success">{{ session('status') }}</div>
            @endif

            @if($errors->any())
                <div class="alert alert-danger">
                    <ul class="mb-0">
                        @foreach($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

            @yield('content')
        </div>
    </main>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
    @yield('scripts')
</body>
</html>
