<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>@yield('title', 'Dashboard Auditor E-Audit')</title>

  {{-- Load CSS & Library --}}
  @vite('resources/css/app.css')
  @vite('resources/js/app.js')

  <script src="https://unpkg.com/lucide@latest"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap" rel="stylesheet">

  <style>
    :root {
      --page-bg: #f4f6f9;
      --sidebar-bg: #2f435b;
      --sidebar-hover: rgba(255, 255, 255, .075);
      --sidebar-border: rgba(255, 255, 255, .075);
      --header-bg: #26384f;
      --header-border: rgba(255, 255, 255, .075);
    }

    [x-cloak] {
      display: none !important;
    }

    body {
      font-family: 'Poppins', sans-serif;
      background: var(--page-bg);
    }

    [data-lucide],
    svg[data-lucide] {
      stroke: currentColor !important;
    }

    .app-sidebar {
      background: var(--sidebar-bg);
      border: 1px solid var(--sidebar-border);
      box-shadow: 0 18px 36px rgba(15, 23, 42, .16);
    }

    .app-header {
      background: var(--header-bg);
      border: 1px solid var(--header-border);
      box-shadow: 0 10px 24px rgba(15, 23, 42, .12);
    }

    .side-section {
      padding: 11px 12px 5px;
      font-size: 8px;
      line-height: 1;
      font-weight: 400;
      text-transform: uppercase;
      letter-spacing: .12em;
      color: rgba(226, 232, 240, .45);
    }

    .side-link,
    .side-button {
      display: flex;
      width: 100%;
      align-items: center;
      gap: 10px;
      border-radius: 12px;
      padding: 8px 12px;
      font-size: 11.5px;
      line-height: 1.2;
      font-weight: 500;
      color: rgba(241, 245, 249, .80);
      transition: all .18s ease;
    }

    .side-link svg,
    .side-button svg {
      width: 16px;
      height: 16px;
      flex-shrink: 0;
      color: rgba(226, 232, 240, .76);
      stroke-width: 2.05;
      transition: all .18s ease;
    }

    .side-link:hover,
    .side-button:hover {
      background: var(--sidebar-hover);
      color: #ffffff;
      transform: translateX(2px);
    }

    .side-link:hover svg,
    .side-button:hover svg {
      color: #ffffff;
    }

    .side-link.is-active {
      background: linear-gradient(90deg, rgba(59, 99, 134, .98), rgba(55, 88, 119, .78));
      color: #ffffff;
      border: 1px solid rgba(147, 197, 253, .12);
      box-shadow:
        inset 2px 0 0 rgba(125, 190, 235, .82),
        0 8px 18px rgba(15, 23, 42, .12);
    }

    .side-link.is-active svg {
      color: #ffffff;
    }

    .side-logout {
      color: #fb7185 !important;
    }

    .side-logout svg {
      color: #fb7185 !important;
    }

    .side-logout:hover {
      background: rgba(244, 63, 94, .10) !important;
      color: #fecdd3 !important;
    }

    .side-logout:hover svg {
      color: #fecdd3 !important;
    }

    .header-logout {
      color: #334155 !important;
      background: transparent !important;
    }

    .header-logout .header-logout-icon {
      background: #fff1f2 !important;
      color: #f43f5e !important;
    }

    .header-logout .header-logout-text {
      color: #334155 !important;
    }

    .header-logout:hover {
      background: #fff1f2 !important;
      color: #e11d48 !important;
    }

    .header-logout:hover .header-logout-icon {
      background: #f43f5e !important;
      color: #ffffff !important;
    }

    .header-logout:hover .header-logout-text {
      color: #e11d48 !important;
    }

    .header-logout:hover svg {
      stroke: #ffffff !important;
    }
  </style>
</head>

<body class="min-h-screen overflow-x-hidden bg-[#f4f6f9]">

@php
  use Illuminate\Support\Facades\Auth;
  use Illuminate\Support\Str;
  use Illuminate\Notifications\DatabaseNotification;

  $path = request()->path();

  $menuGroups = [
    'dashboard'          => 'Beranda',
    'tambah-audit'       => 'Manajemen Audit',
    'verifikasi-audit'   => 'Manajemen Audit',
    'riwayat-audit'      => 'Manajemen Audit',
    'hasil-audit'        => 'Audit Divisi',
    'hasil-verifikasi'   => 'Audit Divisi',
    'notifikasi'         => 'Notifikasi',
    'profile'            => 'Pengaturan Akun',
  ];

  $activeGroup = collect($menuGroups)->first(
    fn ($label, $key) => Str::contains($path, $key)
  ) ?? 'Beranda';

  $notifCount = Auth::check()
    ? DatabaseNotification::where('notifiable_id', Auth::id())->whereNull('read_at')->count()
    : 0;
@endphp

<div class="min-h-screen">

  {{-- Sidebar --}}
  <aside class="app-sidebar fixed bottom-0 left-4 top-0 z-40 flex w-60 flex-col overflow-hidden rounded-[18px] text-slate-200">

    {{-- Logo --}}
    <div class="border-b border-white/[0.055] px-5 py-4">
      <div class="flex items-center gap-3">

        <div class="relative flex h-10 w-10 shrink-0 items-center justify-center overflow-hidden rounded-full bg-white/[0.10] shadow-sm">
          <div class="pointer-events-none absolute inset-0 z-10 bg-gradient-to-br from-white/[0.10] to-transparent"></div>

          <img
            src="{{ asset('images/logo-ea.png') }}"
            alt="EA Systems"
            class="absolute inset-0 h-full w-full rounded-full object-cover"
            onerror="this.classList.add('hidden'); this.nextElementSibling.classList.remove('hidden');"
          >

          <span class="relative z-20 hidden text-center text-[14px] font-medium tracking-tight text-white">
            EA
          </span>
        </div>

        <div class="min-w-0">
          <h1 class="truncate text-lg font-medium leading-none tracking-[-0.01em] text-white">
            EA Systems
          </h1>

          <p class="mt-1.5 truncate text-sm font-sans text-gray-300">
            Auditor Panel
          </p>
        </div>

      </div>
    </div>

    {{-- Navigasi Sidebar --}}
    <nav class="flex-1 overflow-hidden px-4 py-3">
      <ul class="space-y-0.5">

        <li>
          <a href="{{ route('dashboard') }}"
            class="side-link {{ request()->is('dashboard') ? 'is-active' : '' }}">
            <i data-lucide="layout-dashboard"></i>
            <span class="truncate">Beranda</span>
          </a>
        </li>

        <li>
          <p class="side-section">Manajemen Audit</p>
        </li>

        <li>
          <a href="{{ route('audit.create') }}"
            class="side-link {{ request()->is('tambah-audit') ? 'is-active' : '' }}">
            <i data-lucide="clipboard-plus"></i>
            <span class="truncate">Audit 5S</span>
          </a>
        </li>

        <li>
          <a href="{{ route('audit.verifikasi') }}"
            class="side-link {{ request()->is('verifikasi-audit') ? 'is-active' : '' }}">
            <i data-lucide="badge-check"></i>
            <span class="truncate">Hasil Verifikasi</span>
          </a>
        </li>

        <li>
          <a href="{{ route('audit.riwayat') }}"
            class="side-link {{ request()->is('riwayat-audit') ? 'is-active' : '' }}">
            <i data-lucide="history"></i>
            <span class="truncate">Riwayat</span>
          </a>
        </li>

        <li>
          <p class="side-section">Audit Divisi</p>
        </li>

        <li>
          <a href="{{ route('audit.hasil') }}"
            class="side-link {{ request()->is('hasil-audit') || request()->is('hasil-audit/*') ? 'is-active' : '' }}">
            <i data-lucide="file-check-2"></i>
            <span class="truncate">Hasil Audit</span>
          </a>
        </li>

        <li>
          <a href="{{ route('audit.hasil.verifikasi') }}"
            class="side-link {{ request()->is('hasil-verifikasi') || request()->is('hasil-verifikasi/*') ? 'is-active' : '' }}">
            <i data-lucide="shield-check"></i>
            <span class="truncate">Hasil Verifikasi</span>
          </a>
        </li>

        <li>
          <p class="side-section">Lainnya</p>
        </li>

        <li>
          <a href="{{ route('notifikasi.index') }}"
            class="side-link {{ request()->is('notifikasi') || request()->is('notifikasi/*') ? 'is-active' : '' }}">
            <i data-lucide="bell-ring"></i>
            <span class="truncate">Notifikasi</span>

            @if($notifCount > 0)
              <span class="ml-auto text-[10px] font-medium text-white">
                {{ $notifCount }}
              </span>
            @endif
          </a>
        </li>

        <li>
          <a href="{{ route('profile.edit') }}"
            class="side-link {{ request()->is('profile') || request()->is('profile/*') ? 'is-active' : '' }}">
            <i data-lucide="settings"></i>
            <span class="truncate">Pengaturan Akun</span>
          </a>
        </li>

      </ul>
    </nav>

    {{-- Logout Sidebar --}}
    <div class="shrink-0 px-4 pb-0 pt-0">
      <form method="POST" action="{{ route('logout') }}" class="w-full">
        @csrf

        <button type="submit" class="side-button side-logout">
          <i data-lucide="log-out"></i>
          <span class="truncate">Keluar</span>
        </button>
      </form>
    </div>
  </aside>

  {{-- Konten Utama --}}
  <div class="ml-64 min-h-screen">

    {{-- Header --}}
    <header class="sticky top-0 z-30 w-full bg-[#f4f6f9] px-4 pb-1 pt-4">
      <div class="app-header rounded-[18px] px-5 py-2.5">

        <div class="flex items-center justify-between">

          {{-- Left --}}
          <div class="flex items-center gap-3">
            <div
              class="flex h-9 w-9 items-center justify-center rounded-xl shadow-sm"
              style="background-color: #eef4fa; border: 1px solid rgba(47, 67, 91, 0.10);"
            >
              <i
                data-lucide="panel-top"
                class="h-4 w-4"
                style="color: #2f435b;"
                stroke-width="2.3"
              ></i>
            </div>

            <h2 class="text-[14px] font-medium tracking-tight text-white">
              {{ $activeGroup }}
            </h2>
          </div>

          {{-- Right --}}
          <div class="flex items-center gap-3">

            {{-- Profile Header --}}
            <div class="hidden items-center gap-3 sm:flex">
              @if (Auth::user()->foto)
                  <div class="relative h-9 w-9 overflow-hidden rounded-full ring-1 ring-white/[0.12]">
                      <img
                          src="{{ asset('uploads/foto/' . Auth::user()->foto) }}"
                          class="h-full w-full object-cover"
                          alt="Foto Profil"
                          onerror="this.classList.add('hidden'); this.nextElementSibling.classList.remove('hidden'); this.nextElementSibling.classList.add('flex');"
                      >

                      <div class="hidden h-full w-full items-center justify-center rounded-full bg-blue-400">
                          <span class="text-xs font-semibold text-white">
                              {{ strtoupper(substr(Auth::user()->name, 0, 1)) }}
                          </span>
                      </div>
                  </div>
              @else
                  <div class="flex h-9 w-9 items-center justify-center rounded-full bg-blue-400 ring-1 ring-white/[0.07]">
                      <span class="text-xs font-semibold text-white">
                          {{ strtoupper(substr(Auth::user()->name, 0, 1)) }}
                      </span>
                  </div>
              @endif

              <div class="leading-tight">
                  <span class="block text-xs font-medium text-white">
                      {{ Auth::user()->name }}
                  </span>
              </div>
          </div>

            {{-- Notification --}}
            <a
              href="{{ route('notifikasi.index') }}"
              class="relative flex h-9 w-9 items-center justify-center rounded-xl bg-white/[0.08] text-white shadow-sm transition-all duration-300 hover:bg-white/[0.14]"
            >
              <i data-lucide="bell" class="h-4 w-4"></i>

              @if($notifCount > 0)
                <span
                  class="absolute -right-1 -top-1 flex h-6 min-w-6 items-center justify-center rounded-full bg-red-600 px-1"
                >
                  <span class="text-sm text-center leading-none text-white">
                    {{ $notifCount > 99 ? '99+' : $notifCount }}
                  </span>
                </span>
              @endif
            </a>

            {{-- Dropdown --}}
            <div x-data="{ open: false }" class="relative">

              <button
                type="button"
                @click="open = !open"
                class="group flex h-9 w-9 items-center justify-center rounded-xl shadow-sm transition-all duration-300 hover:bg-white/[0.14]"
              >
                <i
                  data-lucide="chevron-down"
                  :class="{ 'rotate-180': open }"
                  class="h-4 w-4 text-white transition-all duration-300"
                ></i>
              </button>

              {{-- Dropdown Menu --}}
              <div
                x-show="open"
                @click.away="open = false"
                x-cloak
                x-transition:enter="transition ease-out duration-200"
                x-transition:enter-start="opacity-0 translate-y-2"
                x-transition:enter-end="opacity-100 translate-y-0"
                x-transition:leave="transition ease-in duration-150"
                x-transition:leave-start="opacity-100 translate-y-0"
                x-transition:leave-end="opacity-0 translate-y-2"
                class="absolute right-0 mt-3 w-60 rounded-2xl bg-white p-2 shadow-2xl"
              >

                {{-- Profile Card --}}
                <div class="mb-2 flex items-center gap-3 rounded-xl bg-blue-50 px-3 py-3">
                  @if (Auth::user()->foto)
                    <div class="relative h-10 w-10 overflow-hidden rounded-full bg-white">
                      <img
                        src="{{ asset('storage/foto/' . Auth::user()->foto) }}"
                        class="h-full w-full object-cover"
                        alt="Foto Profil"
                        onerror="this.classList.add('hidden'); this.nextElementSibling.classList.remove('hidden'); this.nextElementSibling.classList.add('flex');"
                      >

                      <div class="hidden h-full w-full items-center justify-center rounded-full bg-white">
                        <span class="font-bold text-blue-500">
                          {{ strtoupper(substr(Auth::user()->name, 0, 1)) }}
                        </span>
                      </div>
                    </div>
                  @else
                    <div class="flex h-10 w-10 items-center justify-center rounded-full bg-white">
                      <span class="font-bold text-blue-500">
                        {{ strtoupper(substr(Auth::user()->name, 0, 1)) }}
                      </span>
                    </div>
                  @endif

                  <div class="min-w-0">
                    <p class="truncate text-sm font-bold text-slate-800">
                      {{ Auth::user()->name }}
                    </p>

                    <p class="mt-0.5 truncate text-[11px] text-blue-500">
                      {{ Auth::user()->email }}
                    </p>
                  </div>
                </div>

                {{-- Ganti Password --}}
                <a
                  href="{{ route('profile.edit') }}"
                  class="group flex items-center gap-3 rounded-xl px-3 py-3 text-sm font-semibold text-slate-700 transition-all duration-300 hover:bg-blue-50 hover:text-blue-600"
                >
                  <span
                    class="flex h-9 w-9 items-center justify-center rounded-xl bg-blue-50 text-blue-500 transition-all duration-300 group-hover:bg-blue-500 group-hover:text-white"
                  >
                    <i data-lucide="shield-check" class="h-4 w-4"></i>
                  </span>

                  <span>Ganti Password</span>
                </a>

                {{-- Logout Header --}}
                <form method="POST" action="{{ route('logout') }}" class="w-full">
                  @csrf

                  <button
                    type="submit"
                    class="header-logout flex w-full items-center gap-3 rounded-xl px-3 py-3 text-left text-sm font-semibold transition-all duration-300 ease-in-out"
                  >
                    <span
                      class="header-logout-icon flex h-9 w-9 shrink-0 items-center justify-center rounded-xl transition-all duration-300 ease-in-out"
                    >
                      <i data-lucide="log-out" class="h-4 w-4"></i>
                    </span>

                    <span class="header-logout-text transition-colors duration-300 ease-in-out">
                      Keluar
                    </span>
                  </button>
                </form>

              </div>
            </div>

          </div>
        </div>

      </div>
    </header>

    {{-- Konten Halaman --}}
    <main class="px-4 pb-4 pt-2">
      @yield('content')
    </main>

    {{-- Footer --}}
<footer class="mt-auto" x-data="{ open:false, guide:false }">
    <div class="mt-6"></div>

    <div class="border-t border-slate-200 bg-white">
        <div class="mx-auto max-w-screen-xl px-4">

            {{-- Footer Bar --}}
            <div class="flex flex-col gap-3 py-4 sm:flex-row sm:items-center sm:justify-between">
                <div>
                    <p class="text-sm font-semibold text-slate-800">
                        Easy Audit Systems
                    </p>
                    <p class="mt-0.5 text-xs text-slate-500">
                        © {{ date('Y') }} All rights reserved.
                    </p>
                </div>

                <button
                    type="button"
                    @click="open = !open"
                    :aria-expanded="open.toString()"
                    class="inline-flex h-9 w-fit items-center justify-center gap-2 rounded-xl bg-slate-100 px-3 text-xs font-semibold text-slate-600 transition hover:bg-slate-200 hover:text-slate-800"
                >
                    <span x-text="open ? 'Tutup' : 'Lihat'"></span>
                    <i
                        data-lucide="chevron-up"
                        :class="open ? 'rotate-180' : ''"
                        class="h-4 w-4 transition-transform duration-300"
                    ></i>
                </button>
            </div>

            {{-- Expanded Footer --}}
            <div
                x-show="open"
                x-cloak
                x-transition:enter="transition ease-out duration-300"
                x-transition:enter-start="opacity-0 translate-y-3"
                x-transition:enter-end="opacity-100 translate-y-0"
                x-transition:leave="transition ease-in duration-200"
                x-transition:leave-start="opacity-100 translate-y-0"
                x-transition:leave-end="opacity-0 translate-y-3"
                class="border-t border-slate-100 pb-8 pt-6"
            >
                <div class="grid gap-6 md:grid-cols-3">

                    {{-- Brand --}}
                    <div class="rounded-2xl border border-slate-200 bg-slate-50/70 p-4">
                        <div class="flex items-center gap-3">
                            <div class="flex h-10 w-10 items-center justify-center rounded-xl bg-blue-50 text-blue-600 ring-1 ring-blue-100">
                                <i data-lucide="shield-check" class="h-5 w-5"></i>
                            </div>

                            <div>
                                <p class="text-sm font-semibold text-slate-800">
                                    Easy Audit Systems
                                </p>
                                <p class="mt-0.5 text-xs text-slate-500">
                                    {{ $activeGroup }}
                                </p>
                            </div>
                        </div>

                        <p class="mt-4 text-xs leading-relaxed text-slate-500">
                            Sistem pendukung proses audit, verifikasi, dan pemantauan hasil audit agar lebih terstruktur.
                        </p>

                        <div class="mt-4 flex flex-wrap items-center gap-2">
                            <span class="inline-flex items-center rounded-lg bg-white px-2.5 py-1.5 text-[11px] font-semibold text-slate-600 ring-1 ring-slate-200">
                                Versi {{ config('app.version') ?? '1.0.0' }}
                            </span>

                            <span class="inline-flex items-center gap-1.5 rounded-lg bg-emerald-50 px-2.5 py-1.5 text-[11px] font-semibold text-emerald-700 ring-1 ring-emerald-100">
                                <i data-lucide="activity" class="h-3.5 w-3.5"></i>
                                Stable
                            </span>
                        </div>
                    </div>

                    {{-- Navigasi Cepat --}}
                    @php
                        $quickNav = [
                            ['label' => 'Beranda',              'href' => route('dashboard'),                 'active' => request()->is('dashboard')],
                            ['label' => 'Audit 5S',             'href' => route('audit.create'),              'active' => request()->is('tambah-audit')],
                            ['label' => 'Hasil Verifikasi',     'href' => route('audit.verifikasi'),          'active' => request()->is('verifikasi-audit')],
                            ['label' => 'Riwayat',              'href' => route('audit.riwayat'),             'active' => request()->is('riwayat-audit')],
                            ['label' => 'Hasil Audit',          'href' => route('audit.hasil'),               'active' => request()->is('hasil-audit') || request()->is('hasil-audit/*')],
                            ['label' => 'Hasil Verifikasi',     'href' => route('audit.hasil.verifikasi'),    'active' => request()->is('hasil-verifikasi') || request()->is('hasil-verifikasi/*')],
                            ['label' => 'Notifikasi',           'href' => route('notifikasi.index'),          'active' => request()->is('notifikasi') || request()->is('notifikasi/*')],
                            ['label' => 'Pengaturan Akun',      'href' => route('profile.edit'),              'active' => request()->is('profile') || request()->is('profile/*')],
                        ];
                    @endphp

                    <div class="rounded-2xl border border-slate-200 bg-slate-50/70 p-4">
                        <div class="mb-3 flex items-center gap-2">
                            <div class="flex h-8 w-8 items-center justify-center rounded-lg bg-blue-50 text-blue-600 ring-1 ring-blue-100">
                                <i data-lucide="navigation" class="h-4 w-4"></i>
                            </div>
                            <h4 class="text-sm font-semibold text-slate-800">
                                Navigasi Cepat
                            </h4>
                        </div>

                        <div class="grid grid-cols-1 gap-1.5 sm:grid-cols-2 md:grid-cols-1">
                            @foreach ($quickNav as $item)
                                <a
                                    href="{{ $item['href'] }}"
                                    class="group flex items-center justify-between rounded-lg px-2.5 py-2 text-xs font-medium transition
                                        {{ $item['active']
                                            ? 'bg-blue-50 text-blue-700 ring-1 ring-blue-100'
                                            : 'text-slate-600 hover:bg-white hover:text-blue-600 hover:ring-1 hover:ring-slate-200' }}"
                                >
                                    <span>{{ $item['label'] }}</span>

                                    @if($item['active'])
                                        <span class="h-1.5 w-1.5 rounded-full bg-blue-600"></span>
                                    @else
                                        <i data-lucide="chevron-right" class="h-3.5 w-3.5 opacity-0 transition group-hover:opacity-100"></i>
                                    @endif
                                </a>
                            @endforeach
                        </div>
                    </div>

                    {{-- Bantuan --}}
                    <div class="rounded-2xl border border-slate-200 bg-slate-50/70 p-4">
                        <div class="mb-3 flex items-center gap-2">
                            <div class="flex h-8 w-8 items-center justify-center rounded-lg bg-blue-50 text-blue-600 ring-1 ring-blue-100">
                                <i data-lucide="help-circle" class="h-4 w-4"></i>
                            </div>
                            <h4 class="text-sm font-semibold text-slate-800">
                                Bantuan
                            </h4>
                        </div>

                        <div class="space-y-2">
                            <button
                                type="button"
                                @click="guide = true"
                                class="flex w-full items-center gap-2 rounded-lg bg-white px-2.5 py-2 text-left text-xs font-medium text-slate-600 ring-1 ring-slate-200 transition hover:text-blue-600 hover:ring-blue-100"
                            >
                                <i data-lucide="book-open" class="h-4 w-4 text-blue-600"></i>
                                <span>Panduan Pengguna</span>
                            </button>

                            <a
                                href="https://mail.google.com/mail/?view=cm&fs=1&to=easyaudit5s@gmail.com&su=Butuh%20Bantuan%20E-Audit"
                                target="_blank"
                                rel="noopener"
                                class="flex items-center gap-2 rounded-lg bg-white px-2.5 py-2 text-xs font-medium text-slate-600 ring-1 ring-slate-200 transition hover:text-blue-600 hover:ring-blue-100"
                            >
                                <i data-lucide="mail" class="h-4 w-4 text-blue-600"></i>
                                <span>easyaudit5s@gmail.com</span>
                            </a>

                            <div class="flex items-center gap-2 rounded-lg bg-white px-2.5 py-2 text-xs font-medium text-slate-500 ring-1 ring-slate-200">
                                <i data-lucide="clock-4" class="h-4 w-4 text-slate-400"></i>
                                <span>Operasional: 08:00–17:00 WIB</span>
                            </div>
                        </div>
                    </div>

                </div>

                <div class="mt-5 flex justify-end">
                    <button
                        type="button"
                        onclick="window.scrollTo({top:0,behavior:'smooth'})"
                        class="inline-flex h-9 items-center gap-2 rounded-xl bg-slate-800 px-3 text-xs font-semibold text-white shadow-sm transition hover:bg-slate-900"
                    >
                        <i data-lucide="arrow-up" class="h-4 w-4"></i>
                        Ke atas
                    </button>
                </div>
            </div>

        </div>
    </div>

    {{-- Modal Panduan Pengguna --}}
    <div
        x-show="guide"
        x-cloak
        x-transition.opacity
        @keydown.escape.window="guide=false"
        class="fixed inset-0 z-[60] flex items-center justify-center p-4"
    >
        <div class="absolute inset-0 bg-slate-950/45 backdrop-blur-sm" @click="guide=false"></div>

        <div
            x-show="guide"
            x-transition:enter="transition ease-out duration-300"
            x-transition:enter-start="opacity-0 scale-95 translate-y-2"
            x-transition:enter-end="opacity-100 scale-100 translate-y-0"
            x-transition:leave="transition ease-in duration-200"
            x-transition:leave-start="opacity-100 scale-100 translate-y-0"
            x-transition:leave-end="opacity-0 scale-95 translate-y-2"
            class="relative w-full max-w-xl overflow-hidden rounded-2xl bg-white shadow-2xl"
        >
            <div class="flex items-center justify-between border-b border-slate-100 px-5 py-4">
                <div class="flex items-center gap-3">
                    <div class="flex h-10 w-10 items-center justify-center rounded-xl bg-blue-50 text-blue-600 ring-1 ring-blue-100">
                        <i data-lucide="book-open" class="h-5 w-5"></i>
                    </div>

                    <div>
                        <h3 class="text-sm font-semibold text-slate-800">
                            Panduan Pengguna
                        </h3>
                        <p class="mt-0.5 text-xs text-slate-500">
                            Ringkasan penggunaan fitur auditor.
                        </p>
                    </div>
                </div>

                <button
                    type="button"
                    class="flex h-8 w-8 items-center justify-center rounded-lg text-slate-400 transition hover:bg-slate-100 hover:text-slate-700"
                    @click="guide=false"
                    aria-label="Tutup"
                >
                    <i data-lucide="x" class="h-4 w-4"></i>
                </button>
            </div>

            <div class="px-5 py-4">
                <ol class="space-y-2 text-sm text-slate-600">
                    <li class="flex gap-3">
                        <span class="mt-0.5 flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-blue-50 text-xs font-bold text-blue-600">1</span>
                        <span>Tambah dan Verifikasi Audit 5S anda pada <span class="font-semibold text-slate-800">Audit 5S</span>.</span>
                    </li>

                    <li class="flex gap-3">
                        <span class="mt-0.5 flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-blue-50 text-xs font-bold text-blue-600">2</span>
                        <span>Lihat Hasil Verifikasi Audit 5S anda pada <span class="font-semibold text-slate-800">Hasil Verifikasi</span>.</span>
                    </li>

                    <li class="flex gap-3">
                        <span class="mt-0.5 flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-blue-50 text-xs font-bold text-blue-600">3</span>
                        <span>Lihat histori Audit 5S anda pada <span class="font-semibold text-slate-800">Riwayat</span>.</span>
                    </li>

                    <li class="flex gap-3">
                        <span class="mt-0.5 flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-blue-50 text-xs font-bold text-blue-600">4</span>
                        <span>Tinjau hasil Audit 5S oleh auditor lain terhadap divisi anda pada <span class="font-semibold text-slate-800">Hasil Audit</span>.</span>
                    </li>

                    <li class="flex gap-3">
                        <span class="mt-0.5 flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-blue-50 text-xs font-bold text-blue-600">5</span>
                        <span>Cek status hasil Verifikasi Audit 5S oleh auditor lain terhadap divisi anda pada <span class="font-semibold text-slate-800">Hasil Verifikasi</span>.</span>
                    </li>

                    <li class="flex gap-3">
                        <span class="mt-0.5 flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-blue-50 text-xs font-bold text-blue-600">6</span>
                        <span>Cek pemberitahuan pada <span class="font-semibold text-slate-800">Notifikasi</span>.</span>
                    </li>

                    <li class="flex gap-3">
                        <span class="mt-0.5 flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-blue-50 text-xs font-bold text-blue-600">7</span>
                        <span>Atur profil pada <span class="font-semibold text-slate-800">Pengaturan Akun</span>.</span>
                    </li>
                </ol>
            </div>

            <div class="flex flex-col gap-2 border-t border-slate-100 bg-slate-50 px-5 py-4 sm:flex-row sm:justify-end">
                <a
                    href="https://mail.google.com/mail/?view=cm&fs=1&to=easyaudit5s@gmail.com&su=Butuh%20Bantuan%20E-Audit"
                    target="_blank"
                    rel="noopener"
                    class="inline-flex h-9 items-center justify-center gap-2 rounded-xl bg-blue-50 px-3 text-xs font-semibold text-blue-700 ring-1 ring-blue-100 transition hover:bg-blue-100"
                >
                    <i data-lucide="mail" class="h-4 w-4"></i>
                    Butuh bantuan?
                </a>

                <button
                    type="button"
                    @click="guide=false"
                    class="inline-flex h-9 items-center justify-center gap-2 rounded-xl bg-slate-800 px-3 text-xs font-semibold text-white transition hover:bg-slate-900"
                >
                    <i data-lucide="check" class="h-4 w-4"></i>
                    Selesai
                </button>
            </div>
        </div>
    </div>
</footer>

  </div>
</div>

<script>
  function initLucideIcons() {
    if (window.lucide) {
      window.lucide.createIcons();
    }
  }

  document.addEventListener('DOMContentLoaded', initLucideIcons);
  document.addEventListener('livewire:navigated', initLucideIcons);
</script>

@yield('scripts')
@stack('scripts')

</body>
</html>