{{-- resources/views/components/app-layout.blade.php --}}
@props([
  'title' => null,
  'topbarTitle' => null,
  'topbarSubtitle' => null,
  'section' => 'dashboard',
])

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>{{ $title ?? config('app.name', 'Sharawy Systems') }}</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=Cairo:wght@400;600;700;800&display=swap" rel="stylesheet">

  @vite(['resources/css/app.css', 'resources/js/app.js'])

  <style>
    body { font-family: 'Cairo', sans-serif; }
  </style>
</head>

<body class="bg-slate-50 text-slate-900">
  {{-- Topbar --}}
  @include('layouts.topbar', [
    'topbarTitle' => $topbarTitle,
    'topbarSubtitle' => $topbarSubtitle,
    'section' => $section,
  ])

  <div class="mx-auto max-w-[1400px] px-3 sm:px-6 lg:px-8">
    <div class="flex gap-4 py-6">

      {{-- Sidebar (Desktop) --}}
      <aside class="hidden lg:block w-[270px] shrink-0">
        @include('layouts.sidebar', ['section' => $section])
      </aside>

      {{-- Main content --}}
      <main class="flex-1 min-w-0">
        {{-- Flash messages --}}
        @if (session('success'))
          <div class="mb-4 rounded-xl border border-emerald-200 bg-emerald-50 p-3 text-emerald-800 font-extrabold">
            {{ session('success') }}
          </div>
        @endif

        @if (session('error'))
          <div class="mb-4 rounded-xl border border-rose-200 bg-rose-50 p-3 text-rose-800 font-extrabold">
            {{ session('error') }}
          </div>
        @endif

        {{ $slot }}
      </main>

    </div>
  </div>

</body>
</html>

