<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@yield('title', 'Lingel Portal')</title>

    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" />

    <style>
        :root {
            --brand-green: #0e6b57;
            --brand-green-dark: #0a4d3f;
            --brand-green-soft: #17806b;
            --brand-gold: #d8a52a;
            --brand-gold-soft: #efc45b;
            --brand-cream: #f8f4e9;
            --bg-main: #081411;
            --bg-soft: #0d1d19;
            --panel-dark: #0b1714;
            --panel-mid: #10211d;
            --panel-light: #152b26;
            --border-soft: rgba(216, 165, 42, 0.16);
            --text-main: #f4f7f2;
            --text-soft: #b7c6be;
            --danger: #dc4c3f;
            --danger-dark: #b9382d;
            --success-bg: #dbf5e7;
            --success-text: #13653f;
            --error-bg: #fde2e0;
            --error-text: #9e2f27;
        }

        body {
            background:
                radial-gradient(circle at top left, rgba(216, 165, 42, 0.08), transparent 22%),
                radial-gradient(circle at top right, rgba(14, 107, 87, 0.14), transparent 28%),
                linear-gradient(180deg, #07110f 0%, #0a1714 50%, #081411 100%);
        }

        ::-webkit-scrollbar { width: 8px; height: 8px; }
        ::-webkit-scrollbar-track { background: #0b1513; }
        ::-webkit-scrollbar-thumb {
            background: linear-gradient(180deg, var(--brand-gold), var(--brand-green));
            border-radius: 999px;
        }

        .sidebar-shell {
            background:
                linear-gradient(180deg, rgba(8, 20, 17, 0.98), rgba(11, 23, 20, 0.98));
            border-right: 1px solid rgba(216, 165, 42, 0.10);
            box-shadow: 16px 0 40px rgba(0, 0, 0, 0.18);
        }

        .brand-logo {
            width: 58px;
            height: 58px;
            object-fit: cover;
            border-radius: 999px;
            border: 2px solid rgba(216, 165, 42, 0.45);
            background: #fff;
            box-shadow: 0 10px 22px rgba(216, 165, 42, 0.16);
        }

        .brand-title {
            color: var(--brand-cream);
            letter-spacing: 0.14em;
        }

        .brand-accent {
            color: var(--brand-gold-soft);
        }

        .panel-subtitle {
            color: rgba(244, 247, 242, 0.56);
        }

        .nav-link {
            position: relative;
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 14px 16px;
            border-radius: 16px;
            color: var(--text-soft);
            font-weight: 600;
            transition: all 0.28s ease;
            border: 1px solid transparent;
            background: transparent;
        }

        .nav-link:hover {
            color: white;
            background: rgba(216, 165, 42, 0.08);
            border-color: rgba(216, 165, 42, 0.10);
            transform: translateX(4px);
        }

        .nav-link.active {
            background: linear-gradient(135deg, rgba(216, 165, 42, 0.18), rgba(14, 107, 87, 0.16));
            color: white;
            border-color: rgba(216, 165, 42, 0.18);
            box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02), 0 10px 24px rgba(0,0,0,0.12);
        }

        .nav-link.active::before {
            content: "";
            position: absolute;
            left: 0;
            top: 10px;
            bottom: 10px;
            width: 4px;
            border-radius: 999px;
            background: linear-gradient(180deg, var(--brand-gold), var(--brand-green));
        }

        .nav-icon {
            width: 20px;
            text-align: center;
            color: var(--brand-gold-soft);
        }

        .logout-btn {
            width: 100%;
            background: linear-gradient(135deg, #cf4739, #a82f24);
            color: white;
            padding: 12px 16px;
            border-radius: 14px;
            font-weight: 700;
            transition: all 0.25s ease;
            box-shadow: 0 10px 22px rgba(207, 71, 57, 0.20);
        }

        .logout-btn:hover {
            transform: translateY(-1px);
            box-shadow: 0 14px 26px rgba(207, 71, 57, 0.26);
        }

        .top-header {
            background: rgba(248, 244, 233, 0.92);
            backdrop-filter: blur(12px);
            border-bottom: 1px solid rgba(216, 165, 42, 0.12);
            box-shadow: 0 8px 26px rgba(0,0,0,0.06);
        }

        .page-title {
            color: #18211d;
        }

        .welcome-text {
            color: #51615a;
        }

        .welcome-text strong {
            color: var(--brand-green-dark);
        }

        .content-shell {
            background:
                linear-gradient(180deg, rgba(248, 244, 233, 0.94), rgba(245, 241, 233, 0.97));
        }

        .flash-success {
            background: linear-gradient(180deg, #edf9f2, #def5e8);
            border: 1px solid rgba(19, 101, 63, 0.18);
            color: var(--success-text);
            border-radius: 18px;
            box-shadow: 0 12px 28px rgba(19, 101, 63, 0.08);
        }

        .flash-error {
            background: linear-gradient(180deg, #fff0ee, #fde4e1);
            border: 1px solid rgba(158, 47, 39, 0.16);
            color: var(--error-text);
            border-radius: 18px;
            box-shadow: 0 12px 28px rgba(158, 47, 39, 0.08);
        }

        .content-card {
            background: rgba(255, 255, 255, 0.76);
            border: 1px solid rgba(216, 165, 42, 0.10);
            border-radius: 24px;
            box-shadow: 0 16px 38px rgba(0, 0, 0, 0.06);
        }

        .header-action-slot > * {
            display: inline-flex;
            align-items: center;
        }

        .lingel-badge {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 8px 14px;
            border-radius: 999px;
            background: rgba(216, 165, 42, 0.12);
            color: #8d6400;
            font-size: 12px;
            font-weight: 700;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            border: 1px solid rgba(216, 165, 42, 0.16);
        }

        @media (max-width: 1024px) {
            .sidebar-shell {
                width: 240px !important;
            }
        }

        @media (max-width: 768px) {
            .brand-logo {
                width: 48px;
                height: 48px;
            }
        }
    </style>
</head>
<body class="font-sans leading-normal tracking-normal flex h-screen overflow-hidden">

    <aside class="w-64 sidebar-shell text-white flex flex-col">
        <div class="p-6 border-b border-[rgba(216,165,42,0.10)]">
            <div class="flex items-center gap-4">
                <img src="{{ url('assets/logo.png') }}" alt="Lingel Logo" class="brand-logo">
                <div>
                    <h1 class="text-xl md:text-2xl font-extrabold brand-title">
                        Lingel
                    </h1>
                    <p class="text-[11px] uppercase tracking-[0.22em] mt-1 panel-subtitle">
                        @if(Auth::user()->role === 'super_admin')
                            Sup Admin Panel
                        @else
                            Uploader Panel
                        @endif
                    </p>
                </div>
            </div>

            {{-- <div class="mt-5">
                <span class="lingel-badge">
                    <i class="fas fa-shield-alt"></i>
                    Brand Control Center
                </span>
            </div> --}}
        </div>

        <nav class="flex-1 px-4 py-6 space-y-2">
            <a href="{{ route('admin.assets') }}"
               class="nav-link {{ request()->routeIs('admin.assets') ? 'active' : '' }}">
                <span class="nav-icon"><i class="fas fa-photo-video"></i></span>
                <span>Media Assets</span>
            </a>

           

    

            @if(Auth::user()->role === 'super_admin')

                 <a href="{{ route('admin.categories') }}"
               class="nav-link {{ request()->routeIs('admin.categories') ? 'active' : '' }}">
                <span class="nav-icon"><i class="fas fa-layer-group"></i></span>
                <span>Categories</span>
            </a>

                <a href="{{ route('admin.users') }}"
                   class="nav-link {{ request()->routeIs('admin.users') ? 'active' : '' }}">
                    <span class="nav-icon"><i class="fas fa-users"></i></span>
                    <span>Manage Users</span>
                </a>
            @endif

            <a href="{{ route('home') }}" target="_blank"
            class="nav-link mt-4 border border-[rgba(216,165,42,0.3)] bg-[rgba(216,165,42,0.05)] hover:bg-[rgba(216,165,42,0.15)]">
            <span class="nav-icon"><i class="fas fa-external-link-alt"></i></span>
            <span>Preview Media Portal</span>
            </a>
        </nav>

        <div class="p-4 border-t border-[rgba(216,165,42,0.10)]">
            <form method="POST" action="{{ route('logout') }}">
                @csrf
                <button type="submit" class="logout-btn">
                    <i class="fas fa-sign-out-alt mr-2"></i> Logout
                </button>
            </form>
        </div>
    </aside>

    <div class="flex-1 flex flex-col overflow-hidden">
        <header class="top-header flex items-center justify-between px-6 py-4">
            <div>
                <h2 class="text-2xl font-bold page-title">
                    @yield('page_header', 'Dashboard')
                </h2>
                <p class="text-sm mt-1 text-[#6a766f]">
                    Manage Lingel brand assets with a cleaner premium interface.
                </p>
            </div>

            <div class="flex items-center gap-4">
                <span class="welcome-text hidden md:block">
                    Welcome, <strong>{{ Auth::user()->name ?? 'Admin' }}</strong>
                </span>
                <div class="header-action-slot">
                    @yield('header_action')
                </div>
            </div>
        </header>

        <main class="flex-1 overflow-x-hidden overflow-y-auto content-shell p-6">
            @if(session('success'))
                <div class="mb-6 px-5 py-4 flash-success flex items-center">
                    <i class="fas fa-check-circle mr-3 text-lg"></i>
                    <span class="font-semibold">{{ session('success') }}</span>
                </div>
            @endif

            @if(session('error'))
                <div class="mb-6 px-5 py-4 flash-error flex items-center">
                    <i class="fas fa-exclamation-circle mr-3 text-lg"></i>
                    <span class="font-semibold">{{ session('error') }}</span>
                </div>
            @endif

            @if($errors->any())
                <div class="mb-6 px-5 py-4 flash-error">
                    <div class="flex items-start">
                        <i class="fas fa-triangle-exclamation mr-3 mt-1"></i>
                        <ul class="list-disc list-inside space-y-1 font-medium">
                            @foreach($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                </div>
            @endif

            <div class="content-card p-5 md:p-6">
                @yield('content')
            </div>
        </main>
    </div>

</body>
</html>
