<!DOCTYPE html>
<html lang="id">
  <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', 'NataAset')</title>
    @php
      $tablerIconsUrl = url()->versionedAsset('assets/vendor/tabler-icons/tabler-icons.min.css');
    @endphp
    <script>
      (() => {
        let savedTheme = null;
        try {
          savedTheme = localStorage.getItem('inventory-theme');
        } catch (error) {}
        const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
        document.documentElement.dataset.theme = savedTheme || (prefersDark ? 'dark' : 'light');
      })();
    </script>
    <link rel="icon" type="image/png" href="{{ url()->versionedAsset('assets/img/logo-icon.png') }}">
    <link rel="preload" href="{{ $tablerIconsUrl }}" as="style" onload="this.onload=null;this.rel='stylesheet'">
    <noscript><link rel="stylesheet" href="{{ $tablerIconsUrl }}"></noscript>
    <link rel="stylesheet" href="{{ url()->versionedAsset('assets/css/dashboard-redesign.css') }}">
    @stack('styles')
  </head>
  <body
    data-realtime-latest-url="{{ route('admin-notifications.latest') }}"
    data-realtime-last-id="{{ \App\Models\RealtimeNotification::max('id') ?? 0 }}"
  >
    @php
      $authUser = auth()->user();
      $menuItems = [
        ['label' => 'Dashboard', 'icon' => 'ti-layout-dashboard', 'route' => 'dashboard', 'match' => 'dashboard'],
        ['label' => 'Data Barang', 'icon' => 'ti-package', 'route' => 'items.index', 'match' => 'items.*'],
        ['label' => 'Data Ruangan', 'icon' => 'ti-building', 'route' => 'rooms.index', 'match' => 'rooms.index'],
        ['label' => 'QR Code Ruangan', 'icon' => 'ti-qrcode', 'route' => 'rooms.qr', 'match' => 'rooms.qr'],
        ['label' => 'Kategori Barang', 'icon' => 'ti-tags', 'route' => 'categories.index', 'match' => 'categories.*'],
        ['label' => 'Penggantian Barang', 'icon' => 'ti-refresh', 'route' => 'replacements.index', 'match' => 'replacements.*'],
        ['label' => 'Pemeliharaan Barang', 'icon' => 'ti-tool', 'route' => 'maintenance.index', 'match' => 'maintenance.*'],
        ['label' => 'Laporan Inventaris', 'icon' => 'ti-report-analytics', 'route' => 'reports.index', 'match' => 'reports.*'],
        ['label' => 'Manajemen User', 'icon' => 'ti-users', 'route' => 'users.index', 'match' => 'users.*'],
      ];
      $profileName = $authUser?->nama ?? 'Admin BNN';
      $profileEmail = $authUser?->email ?? 'admin@bnn.com';
      $profileParts = preg_split('/\s+/', trim($profileName));
      $profileInitials = strtoupper(substr($profileParts[0] ?? 'A', 0, 1) . substr($profileParts[1] ?? 'B', 0, 1));
    @endphp

    <div class="app-canvas">
      <button class="sidebar-backdrop" type="button" data-sidebar-close aria-label="Tutup menu"></button>

      <aside class="app-sidebar" id="appSidebar" aria-label="Menu utama">
        <button class="sidebar-collapse-button" type="button" aria-label="Kecilkan sidebar" aria-expanded="true" data-sidebar-collapse-toggle>
          <i class="ti ti-chevron-left" aria-hidden="true"></i>
        </button>

        <a class="brand-lockup" href="{{ route('dashboard') }}">
          <span class="brand-mark">
            <img src="{{ url()->versionedAsset('assets/img/logo-icon.png') }}" alt="" aria-hidden="true">
          </span>
          <span>
            <strong>NataAset</strong>
          </span>
        </a>

        <nav class="side-menu">
          @foreach ($menuItems as $item)
            <a class="side-link {{ request()->routeIs($item['match']) ? 'active' : '' }}" href="{{ route($item['route']) }}" aria-label="{{ $item['label'] }}" title="{{ $item['label'] }}">
              <i class="ti {{ $item['icon'] }}"></i>
              <span>{{ $item['label'] }}</span>
            </a>
          @endforeach
        </nav>
      </aside>

      <main class="app-main">
        <header class="topbar">
          <div class="topbar-left">
            <button class="icon-button mobile-menu-button" type="button" data-sidebar-open aria-label="Buka menu">
              <i class="ti ti-menu-2"></i>
            </button>
          </div>

          <form class="top-search" action="{{ route('items.index') }}" method="GET" autocomplete="off" data-global-search-form data-search-url="{{ route('global-search') }}">
            <i class="ti ti-search"></i>
            <input
              type="search"
              name="search"
              value="{{ request('search') }}"
              placeholder="Cari barang, ruangan, user..."
              aria-autocomplete="list"
              aria-expanded="false"
              aria-controls="globalSearchPanel"
              data-global-search-input
            >
            <div class="global-search-panel" id="globalSearchPanel" data-global-search-panel role="listbox" hidden></div>
          </form>

          <div class="top-actions">
            <a class="icon-button notification-button" href="{{ route('notifications.index') }}" aria-label="Notifikasi">
              <i class="ti ti-inbox"></i>
              <span class="notification-count" data-realtime-count hidden>0</span>
            </a>
            <div class="profile-menu" data-profile-menu>
              <button class="profile-chip profile-menu-toggle" type="button" aria-haspopup="menu" aria-expanded="false" data-profile-menu-toggle>
                <span class="avatar">{{ $profileInitials }}</span>
                <span class="profile-menu-identity">
                  <strong>{{ $profileName }}</strong>
                  <small>Biro Umum</small>
                </span>
                <i class="ti ti-chevron-down profile-menu-chevron" aria-hidden="true"></i>
              </button>

              <div class="profile-menu-panel" data-profile-menu-panel role="menu" hidden>
                <div class="profile-menu-card profile-menu-user">
                  <span class="profile-menu-avatar">{{ $profileInitials }}</span>
                  <span>
                    <strong>{{ $profileName }}</strong>
                    <small>{{ $profileEmail }}</small>
                  </span>
                </div>

                <div class="profile-menu-card profile-menu-list">
                  <a class="profile-menu-item" href="{{ route('users.index') }}" role="menuitem">
                    <i class="ti ti-user"></i>
                    <span>Profile</span>
                  </a>
                  <a class="profile-menu-item" href="{{ route('notifications.index') }}" role="menuitem">
                    <i class="ti ti-inbox"></i>
                    <span>Notifications</span>
                  </a>
                  <button class="profile-menu-item profile-theme-item" type="button" role="menuitem" aria-label="Dark mode" aria-pressed="false" data-theme-toggle>
                    <i class="ti ti-moon" data-theme-icon></i>
                    <span class="profile-theme-copy">
                      <span>Dark mode</span>
                      <small data-theme-state>Mode terang</small>
                    </span>
                    <span class="profile-theme-switch" aria-hidden="true"></span>
                  </button>
                  <a class="profile-menu-item" href="{{ route('dashboard') }}" role="menuitem">
                    <i class="ti ti-settings"></i>
                    <span>Account Settings</span>
                  </a>
                </div>

                <form class="logout-form profile-menu-footer" action="{{ route('logout') }}" method="POST" data-logout-form>
                  @csrf
                  <span>
                    <strong>NataAset</strong>
                    <small>Dashboard Admin</small>
                  </span>
                  <button class="profile-logout-button" type="button" role="menuitem" data-logout-open>
                    <i class="ti ti-logout"></i>
                    <span>Keluar</span>
                  </button>
                </form>
              </div>
            </div>
          </div>
        </header>

        <section class="content-shell">
          <div class="page-actions">
            @yield('page_actions')
          </div>

          @if (session('success'))
            <div class="alert success" data-auto-dismiss>
              <i class="ti ti-circle-check"></i>
              <span>{{ session('success') }}</span>
            </div>
          @endif

          @if (session('error'))
            <div class="alert danger" data-auto-dismiss>
              <i class="ti ti-alert-triangle"></i>
              <span>{{ session('error') }}</span>
            </div>
          @endif

          @if ($errors->any())
            <div class="alert danger">
              <i class="ti ti-alert-triangle"></i>
              <span>{{ $errors->first() }}</span>
            </div>
          @endif

          @yield('content')
        </section>
      </main>
    </div>

    <div class="logout-modal" data-logout-modal aria-hidden="true">
      <button class="logout-modal-backdrop" type="button" data-logout-close aria-label="Batal logout"></button>
      <section class="logout-dialog" role="dialog" aria-modal="true" aria-labelledby="logoutTitle" aria-describedby="logoutDescription">
        <button class="logout-dialog-close" type="button" data-logout-close aria-label="Tutup popup">
          <i class="ti ti-x"></i>
        </button>
        <div class="logout-dialog-icon">
          <i class="ti ti-logout"></i>
        </div>
        <div class="logout-dialog-copy">
          <h2 id="logoutTitle">Keluar dari dashboard?</h2>
          <p id="logoutDescription">Sesi admin NataAset akan diakhiri dan kamu perlu login ulang untuk mengakses data inventaris.</p>
        </div>
        <div class="logout-dialog-actions">
          <button class="btn" type="button" data-logout-close>Batal</button>
          <button class="btn btn-primary logout-confirm-button" type="button" data-logout-confirm>
            <i class="ti ti-logout"></i>
            Keluar
          </button>
        </div>
      </section>
    </div>

    <div class="notification-confirm-modal" data-action-confirm-modal aria-hidden="true">
      <button class="notification-confirm-backdrop" type="button" data-action-confirm-close aria-label="Batalkan aksi"></button>
      <section class="notification-confirm-dialog" role="dialog" aria-modal="true" aria-labelledby="actionConfirmTitle" aria-describedby="actionConfirmDescription">
        <button class="notification-confirm-close" type="button" data-action-confirm-close aria-label="Tutup popup">
          <i class="ti ti-x"></i>
        </button>
        <div class="notification-confirm-icon selected-delete">
          <i class="ti ti-trash"></i>
        </div>
        <div class="notification-confirm-copy">
          <h2 id="actionConfirmTitle" data-action-confirm-title>Konfirmasi aksi</h2>
          <p id="actionConfirmDescription" data-action-confirm-message>Data yang dipilih akan diproses.</p>
        </div>
        <div class="notification-confirm-actions">
          <button class="btn" type="button" data-action-confirm-close>Batal</button>
          <button class="btn btn-primary logout-confirm-button" type="button" data-action-confirm-submit>
            <i class="ti ti-trash"></i>
            Hapus
          </button>
        </div>
      </section>
    </div>

    <div class="theme-transition-layer" data-theme-transition aria-hidden="true"></div>

    <div class="page-loader" data-page-loader aria-hidden="true">
      <div class="page-loader-card" role="status" aria-live="polite">
        <span class="page-loader-mark">
          <i class="ti ti-qrcode"></i>
        </span>
      </div>
    </div>

    <script src="{{ url()->versionedAsset('assets/js/dashboard.js') }}" defer></script>
    @stack('scripts')
  </body>
</html>
