<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>@yield('title', 'Dashboard Admin 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-active: #3b6386;
      --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-shell {
      background: rgba(244, 246, 249, .92);
      backdrop-filter: blur(12px);
    }

    .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: 8.5px;
  line-height: 1;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: rgba(226, 232, 240, .48);
}

    .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="flex min-h-screen flex-col bg-gray-100">

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

  $menuGroups = [
    'dashboard'   => 'Beranda',
    'audit'       => 'Manajemen Audit',
    'jadwal'      => 'Manajemen Jadwal',
    'notifikasi'  => 'Manajemen Notifikasi',
    'tema'        => 'Manajemen Tema',
    'user'        => 'Manajemen User',
    'laporan'     => 'Laporan',
  ];

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

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

  $auditActive =
    request()->is('admin/audit') ||
    request()->is('admin/audit/verifikasi') ||
    request()->is('admin/audit/audit-riwayat*');
@endphp

<div class="flex flex-1">

  {{-- 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">

            {{-- Logo --}}
        <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>

    {{-- Text --}}
    <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">
        Admin Panel
      </p>
    </div>

  </div>
</div>

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

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

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

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

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

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

      {{-- Master Data --}}
      <li>
        <p class="side-section">
          Master Data
        </p>
      </li>

      <li>
        <a
          href="{{ route('admin.jadwal.index') }}"
          class="side-link {{ request()->is('admin/jadwal*') ? 'is-active' : '' }}"
        >
          <i data-lucide="calendar-clock"></i>
          <span class="truncate">Manajemen Jadwal</span>
        </a>
      </li>

      <li>
        <a
          href="{{ route('admin.tema.index') }}"
          class="side-link {{ request()->is('admin/tema*') ? 'is-active' : '' }}"
        >
          <i data-lucide="palette"></i>
          <span class="truncate">Manajemen Tema</span>
        </a>
      </li>

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

      <li>
        <a
          href="{{ route('admin.user.index') }}"
          class="side-link {{ request()->is('admin/user*') ? 'is-active' : '' }}"
        >
          <i data-lucide="users-round"></i>
          <span class="truncate">Manajemen User</span>
        </a>
      </li>

      {{-- Lainnya --}}
      <li>
        <p class="side-section">
          Lainnya
        </p>
      </li>
      {{-- Laporan --}}
  
        <a
          href="{{ route('admin.laporan') }}"
          class="side-link {{ request()->is('admin/laporan*') ? 'is-active' : '' }}"
        >
          <i data-lucide="chart-no-axes-combined"></i>
          <span class="truncate">Laporan</span>
        </a>
      </li>

    </ul>
  </nav>

  {{-- Logout Sidebar --}}
  <div class="shrink-0 px-4 pb-0 pt-0">
    <form method="POST" action="{{ route('admin.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 flex flex-1 flex-col">

    {{-- Header --}}
    <header class="app-header-shell sticky top-0 z-30 w-full 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 --}}
            <div class="hidden items-center gap-3 sm:flex">
              <div class="flex h-9 w-9 items-center justify-center rounded-full bg-white/[0.08] ring-1 ring-white/[0.07]">
                <span class="text-xs font-semibold text-white">
                  {{ strtoupper(substr(Auth::user()->name, 0, 1)) }}
                </span>
              </div>

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

            {{-- 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>

              {{-- Menu Dropdown --}}
              <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">
                  <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>

                  <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>

                

                {{-- Logout Header --}}
                <form method="POST" action="{{ route('admin.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="flex-1 overflow-y-auto bg-gray-100 px-4 pb-5 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 pengelolaan audit, verifikasi, jadwal, notifikasi, user, tema, dan laporan audit secara 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('admin.dashboard'),        'active' => request()->is('admin/dashboard')],
                            ['label' => 'Manajemen Audit',      'href' => route('admin.audit'),            'active' => request()->is('admin/audit') || request()->is('admin/audit/*')],
                            ['label' => 'Manajemen Jadwal',     'href' => route('admin.jadwal.index'),     'active' => request()->is('admin/jadwal*')],
                            ['label' => 'Manajemen Tema',       'href' => route('admin.tema.index'),       'active' => request()->is('admin/tema*')],
                            ['label' => 'Manajemen Notifikasi', 'href' => route('admin.notifikasi.index'), 'active' => request()->is('admin/notifikasi*')],
                            ['label' => 'Manajemen User',       'href' => route('admin.user.index'),       'active' => request()->is('admin/user*')],
                            ['label' => 'Laporan',              'href' => route('admin.laporan'),          'active' => request()->is('admin/laporan*')],
                        ];
                    @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"
                                aria-label="Kirim email ke easyaudit5s@gmail.com via Gmail"
                                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 admin.
                        </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>Mengelola audit dan verifikasi audit pada <span class="font-semibold text-slate-800">Manajemen 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">2</span>
                        <span>Mengelola jadwal audit dan verifikasi pada <span class="font-semibold text-slate-800">Manajemen Jadwal</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> Mengubah atau menambah tema audit pada <span class="font-semibold text-slate-800">Manajemen Tema</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>Mengirim dan memantau pemberitahuan melalui <span class="font-semibold text-slate-800">Manajemen 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">5</span>
                        <span>Mengelola akun dan hak akses pada <span class="font-semibold text-slate-800">Manajemen User</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>Mengunduh dan meninjau hasil audit pada menu <span class="font-semibold text-slate-800">Laporan</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 src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<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>