<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>@yield('title', 'Admin Dashboard')</title>
        <style>
            :root {
                --admin-bg: #f4ead7;
                --admin-card: rgba(255, 251, 243, 0.92);
                --admin-line: rgba(108, 78, 38, 0.14);
                --admin-text: #302417;
                --admin-muted: #74614d;
                --admin-gold: #aa8048;
                --admin-gold-deep: #7b5b34;
                --admin-shadow: 0 24px 60px rgba(72, 47, 21, 0.12);
            }

            * { box-sizing: border-box; }
            body {
                margin: 0;
                font-family: Georgia, "Times New Roman", serif;
                background: linear-gradient(180deg, #fbf5ea 0%, var(--admin-bg) 100%);
                color: var(--admin-text);
            }
            a { color: inherit; text-decoration: none; }
            .admin-shell {
                display: grid;
                grid-template-columns: 260px minmax(0, 1fr);
                min-height: 100vh;
            }
            .sidebar {
                padding: 28px 20px;
                background: rgba(108, 78, 38, 0.08);
                border-right: 1px solid var(--admin-line);
            }
            .brand {
                margin-bottom: 24px;
                font-size: 1.35rem;
                color: var(--admin-gold-deep);
            }
            .sidebar nav {
                display: grid;
                gap: 10px;
            }
            .sidebar nav a, .logout-button {
                padding: 12px 14px;
                border-radius: 14px;
                color: var(--admin-muted);
                background: transparent;
                border: 0;
                font: inherit;
                text-align: left;
                cursor: pointer;
            }
            .sidebar nav a.active, .sidebar nav a:hover, .logout-button:hover {
                background: rgba(170, 128, 72, 0.14);
                color: var(--admin-gold-deep);
            }
            .content {
                padding: 28px;
            }
            .toolbar {
                display: flex;
                justify-content: space-between;
                align-items: center;
                gap: 16px;
                margin-bottom: 24px;
            }
            .status {
                margin-bottom: 20px;
                padding: 14px 18px;
                border-radius: 18px;
                background: rgba(176, 132, 73, 0.12);
                border: 1px solid rgba(176, 132, 73, 0.25);
                color: var(--admin-gold-deep);
            }
            .card {
                background: var(--admin-card);
                border: 1px solid var(--admin-line);
                border-radius: 24px;
                box-shadow: var(--admin-shadow);
            }
            .button, button {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                gap: 8px;
                padding: 12px 18px;
                border: 0;
                border-radius: 999px;
                background: linear-gradient(135deg, var(--admin-gold), var(--admin-gold-deep));
                color: #fffaf0;
                font: inherit;
                cursor: pointer;
            }
            .ghost-button {
                background: rgba(170, 128, 72, 0.12);
                color: var(--admin-gold-deep);
            }
            table {
                width: 100%;
                border-collapse: collapse;
            }
            th, td {
                padding: 16px 18px;
                border-bottom: 1px solid var(--admin-line);
                text-align: left;
            }
            th { color: var(--admin-muted); font-weight: 600; }
            .pill {
                display: inline-flex;
                padding: 6px 12px;
                border-radius: 999px;
                background: rgba(170, 128, 72, 0.12);
                color: var(--admin-gold-deep);
                font-size: 0.9rem;
            }
            .meta-text { color: var(--admin-muted); }
            .errors {
                margin-bottom: 18px;
                padding: 14px 18px;
                border-radius: 16px;
                background: rgba(162, 62, 71, 0.10);
                color: #842f3a;
            }
            @media (max-width: 900px) {
                .admin-shell { grid-template-columns: 1fr; }
                .sidebar { border-right: 0; border-bottom: 1px solid var(--admin-line); }
            }
        </style>
        @stack('styles')
    </head>
    <body>
        <div class="admin-shell">
            <aside class="sidebar">
                <div class="brand">Cultural Arts Admin</div>
                <nav>
                    <a class="{{ request()->routeIs('admin.dashboard') ? 'active' : '' }}" href="{{ route('admin.dashboard') }}">Dashboard</a>
                    <a class="{{ request()->routeIs('admin.products.*') ? 'active' : '' }}" href="{{ route('admin.products.index') }}">Products</a>
                    <a class="{{ request()->routeIs('admin.orders.*') ? 'active' : '' }}" href="{{ route('admin.orders.index') }}">Orders</a>
                    <a href="{{ route('home') }}">View Storefront</a>
                </nav>
                <form action="{{ route('admin.logout') }}" method="POST" style="margin-top: 18px;">
                    @csrf
                    <button class="logout-button" type="submit">Sign Out</button>
                </form>
            </aside>

            <main class="content">
                <div class="toolbar">
                    <div>
                        <h1 style="margin: 0;">@yield('heading', 'Admin Dashboard')</h1>
                        <p class="meta-text" style="margin: 6px 0 0;">Manage products, monitor orders, and update the storefront catalog.</p>
                    </div>
                    @yield('toolbar')
                </div>

                @if (session('status'))
                    <div class="status">{{ session('status') }}</div>
                @endif

                @if ($errors->any())
                    <div class="errors">
                        @foreach ($errors->all() as $error)
                            <div>{{ $error }}</div>
                        @endforeach
                    </div>
                @endif

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