<!DOCTYPE html>
<html lang="ar" dir="rtl" class="h-full">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>@yield('title', 'لوحة التحكم') — {{ config('app.name') }}</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700&display=swap" rel="stylesheet">
    @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body class="min-h-screen bg-zinc-100 font-sans text-zinc-900 antialiased">
    <div class="flex min-h-screen">
        {{-- شريط جانبي — سطح المكتب --}}
        <aside class="hidden w-64 shrink-0 flex-col border-l border-zinc-800 bg-madar-950 text-zinc-100 md:flex">
            <div class="border-b border-zinc-800 px-5 py-6">
                <a href="{{ route('admin.dashboard') }}" class="flex items-center gap-2">
                    <span class="flex h-10 w-10 items-center justify-center rounded-xl bg-teal-500/20 text-lg font-bold text-teal-300">م</span>
                    <div>
                        <p class="text-sm font-bold text-white">مدار</p>
                        <p class="text-xs text-zinc-400">لوحة التحكم</p>
                    </div>
                </a>
            </div>
            <nav class="flex flex-1 flex-col gap-1 px-3 py-4 text-sm">
                @include('admin.partials.nav-links')
            </nav>
            <div class="border-t border-zinc-800 px-4 py-4 text-xs text-zinc-500">
                {{ config('app.name') }} · {{ config('app.env') }}
            </div>
        </aside>

        <div class="flex min-w-0 flex-1 flex-col">
            {{-- قائمة موبايل --}}
            <details class="group border-b border-zinc-200 bg-white shadow-sm md:hidden">
                <summary class="flex cursor-pointer list-none items-center justify-between px-4 py-3 font-medium text-zinc-800">
                    <span>القائمة</span>
                    <span class="text-zinc-400 transition group-open:rotate-180">▼</span>
                </summary>
                <div class="border-t border-zinc-100 bg-madar-950 px-3 py-3 text-zinc-100">
                    @include('admin.partials.nav-links')
                </div>
            </details>

            <header class="flex items-center justify-between gap-4 border-b border-zinc-200 bg-white px-4 py-4 shadow-sm md:px-8">
                <div>
                    <h1 class="text-lg font-bold text-zinc-900 md:text-xl">@yield('heading')</h1>
                    @hasSection('subheading')
                        <p class="mt-1 text-sm text-zinc-500">@yield('subheading')</p>
                    @endif
                </div>
                <div class="flex items-center gap-3">
                    <span class="hidden max-w-[12rem] truncate text-sm text-zinc-600 sm:inline">{{ auth()->user()->full_name }}</span>
                    <form method="post" action="{{ route('admin.logout') }}">
                        @csrf
                        <button type="submit" class="rounded-lg border border-zinc-200 bg-white px-3 py-2 text-sm font-medium text-zinc-700 shadow-sm hover:bg-zinc-50">
                            خروج
                        </button>
                    </form>
                </div>
            </header>

            <main class="flex-1 px-4 py-6 md:px-8 md:py-8">
                @if (session('success'))
                    <div class="mb-6 rounded-xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-emerald-800">
                        {{ session('success') }}
                    </div>
                @endif
                @if (session('error'))
                    <div class="mb-6 rounded-xl border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-800">
                        {{ session('error') }}
                    </div>
                @endif
                @if ($errors->any())
                    <div class="mb-6 rounded-xl border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-950">
                        <p class="font-semibold">يرجى تصحيح البيانات:</p>
                        <ul class="mt-2 list-inside list-disc space-y-1">
                            @foreach ($errors->all() as $err)
                                <li>{{ $err }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif
                @yield('content')
            </main>
        </div>
    </div>
</body>
</html>
