<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{{ env('APP_NAME') }}</title>
    @if(app_setting('app_logo'))
        <link rel="icon" type="image/png" href="{{ asset('storage/' . app_setting('app_logo')) }}">
    @endif
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet">
    @stack('styles')
    @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body class="bg-[#f8f2ec] text-slate-800">
    @auth
        <nav class="fixed top-0 z-50 w-full border-b border-amber-100 bg-[#fffaf5]">
            <div class="px-4 py-3 lg:px-6">
                <div class="flex items-center justify-between">
                    <div class="flex items-center gap-3">
                        <button data-drawer-target="sidebar" data-drawer-toggle="sidebar" class="inline-flex items-center rounded-lg p-2 text-amber-700 hover:bg-amber-100 focus:outline-none focus:ring-2 focus:ring-amber-200" type="button">
                            <span class="sr-only">Open sidebar</span>
                            <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 20 20">
                                <path clip-rule="evenodd" fill-rule="evenodd" d="M2 4.75A.75.75 0 0 1 2.75 4h14.5a.75.75 0 0 1 0 1.5H2.75A.75.75 0 0 1 2 4.75ZM2 10a.75.75 0 0 1 .75-.75h14.5a.75.75 0 0 1 0 1.5H2.75A.75.75 0 0 1 2 10Zm0 5.25A.75.75 0 0 1 2.75 14.5h14.5a.75.75 0 0 1 0 1.5H2.75a.75.75 0 0 1-.75-.75Z" />
                            </svg>
                        </button>
                        <div class="flex items-center gap-3">
                            @if(app_setting('app_logo'))
                                <img src="{{ asset('storage/' . app_setting('app_logo')) }}" alt="Logo" class="h-8 w-8 rounded-full object-cover ring-2 ring-amber-200">
                            @endif
                            <span class="text-xl font-semibold tracking-tight text-[#3b1117]">{{ app_setting('app_name', 'Foodcourt') }}</span>
                        </div>
                    </div>
                    <div class="relative flex items-center gap-3">
                        <button type="button" class="relative inline-flex items-center justify-center rounded-full bg-white p-2 text-amber-700 hover:bg-amber-100 focus:ring-2 focus:ring-amber-200" id="notif-button" data-dropdown-toggle="notif-dropdown">
                            <span class="sr-only">Open notifications</span>
                            <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                <path d="M10 2a5 5 0 0 0-5 5v2.586l-.707.707A1 1 0 0 0 5 12h10a1 1 0 0 0 .707-1.707L15 9.586V7a5 5 0 0 0-5-5Zm0 16a2 2 0 0 0 1.995-1.85L12 16H8a2 2 0 0 0 2 2Z"/>
                            </svg>
                            <span id="notif-count" class="absolute -right-1 -top-1 hidden min-w-[18px] rounded-full bg-rose-500 px-1.5 py-0.5 text-[10px] font-semibold text-white">0</span>
                        </button>
                        <div class="absolute right-0 top-full z-50 mt-2 hidden w-72 rounded-xl bg-white shadow" id="notif-dropdown">
                            <div class="border-b border-amber-100 px-4 py-3 text-sm font-semibold text-slate-700">Notifikasi Terbaru</div>
                            <div id="notif-list" class="max-h-80 overflow-y-auto text-sm"></div>
                            <div class="border-t border-amber-100 px-4 py-3 text-xs text-slate-500">
                                Update realtime untuk order terbaru.
                            </div>
                        </div>
                        <button type="button" class="flex items-center rounded-full bg-amber-100 p-1 text-sm focus:ring-2 focus:ring-amber-200" id="user-menu-button" data-dropdown-toggle="user-dropdown">
                            <span class="sr-only">Open user menu</span>
                            <span class="flex h-8 w-8 items-center justify-center rounded-full bg-[#4b1a22] text-xs font-semibold text-amber-50">
                                {{ strtoupper(substr(auth()->user()->username ?? auth()->user()->name ?? 'U', 0, 1)) }}
                            </span>
                        </button>
                        <div class="absolute right-0 top-full z-50 mt-2 hidden w-56 divide-y divide-amber-100 rounded-lg bg-white shadow" id="user-dropdown">
                            <div class="px-4 py-3 text-sm text-slate-700">
                                <div class="font-medium">{{ auth()->user()->name ?? auth()->user()->username }}</div>
                                <div class="text-xs text-slate-500">{{ auth()->user()->role?->nama_roles }}</div>
                            </div>
                            <div class="py-2">
                                <form action="{{ route('logout') }}" method="post">
                                    @csrf
                                    <button type="submit" class="block w-full px-4 py-2 text-left text-sm text-slate-700 hover:bg-amber-50">Logout</button>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </nav>

        <aside id="sidebar" class="fixed left-0 top-0 z-40 h-screen w-64 -translate-x-full border-r border-amber-100 bg-[#fffaf5] pt-16 transition-transform">
            <div class="h-full overflow-y-auto px-3 pb-4">
                <ul class="space-y-2 text-sm font-medium">
                    @php($role = auth()->user()->role?->nama_roles)
                    @php($attendanceRoles = collect(explode(',', app_setting('attendance_roles', 'admin')))->map(fn($r) => strtolower(trim($r)))->filter())
                    @php($warehouseRoles = collect(explode(',', app_setting('warehouse_roles', 'admin')))->map(fn($r) => strtolower(trim($r)))->filter())
                    <li>
                        <a href="{{ $role === 'admin' ? route('dashboard') : ($role === 'cashier' ? route('dashboard.cashier') : (in_array($role, ['supervisor'], true) ? route('orders.all') : route('orders.index'))) }}" class="flex items-center gap-3 rounded-lg px-3 py-2 text-slate-700 hover:bg-amber-50">
                            <svg class="h-5 w-5 text-slate-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                <path d="M10 2a1 1 0 0 1 .707.293l6 6a1 1 0 0 1-1.414 1.414L15 9.414V16a2 2 0 0 1-2 2h-2v-4a1 1 0 0 0-1-1H10a1 1 0 0 0-1 1v4H7a2 2 0 0 1-2-2V9.414l-.293.293a1 1 0 1 1-1.414-1.414l6-6A1 1 0 0 1 10 2Z"/>
                            </svg>
                            <span>Dashboard</span>
                        </a>
                    </li>
                    @if(in_array($role, ['admin', 'supervisor'], true))
                        <li class="text-xs font-semibold uppercase text-amber-700/70">Master Data</li>
                        <li>
                            <a href="{{ route('stands.index') }}" class="flex items-center gap-3 rounded-lg px-3 py-2 text-slate-700 hover:bg-amber-50">
                                <svg class="h-5 w-5 text-slate-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                    <path d="M4 3a2 2 0 0 0-2 2v3h16V5a2 2 0 0 0-2-2H4Zm14 7H2v5a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-5Z"/>
                                </svg>
                                <span>Stand</span>
                            </a>
                        </li>
                        <li>
                            <a href="{{ route('mejas.index') }}" class="flex items-center gap-3 rounded-lg px-3 py-2 text-slate-700 hover:bg-amber-50">
                                <svg class="h-5 w-5 text-slate-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                    <path d="M4 6a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v2H4V6Zm12 4H4v4a2 2 0 0 0 2 2h1v-2a1 1 0 1 1 2 0v2h2v-2a1 1 0 1 1 2 0v2h1a2 2 0 0 0 2-2v-4Z"/>
                                </svg>
                                <span>Meja</span>
                            </a>
                        </li>
                        <li>
                            <a href="{{ route('waiters.index') }}" class="flex items-center gap-3 rounded-lg px-3 py-2 text-slate-700 hover:bg-amber-50">
                                <svg class="h-5 w-5 text-slate-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                    <path d="M10 2a3 3 0 1 0 0 6 3 3 0 0 0 0-6Zm-5 14a5 5 0 0 1 10 0v1H5v-1Z"/>
                                </svg>
                                <span>Waiter</span>
                            </a>
                        </li>
                        <li>
                            <a href="{{ route('menus.index') }}" class="flex items-center gap-3 rounded-lg px-3 py-2 text-slate-700 hover:bg-amber-50">
                                <svg class="h-5 w-5 text-slate-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                    <path d="M5 3a1 1 0 0 1 1 1v5a3 3 0 0 0 6 0V4a1 1 0 1 1 2 0v5a5 5 0 0 1-4 4.9V18a1 1 0 1 1-2 0v-4.1A5 5 0 0 1 4 9V4a1 1 0 0 1 1-1Z"/>
                                </svg>
                                <span>Menu</span>
                            </a>
                        </li>
                        @if($role === 'admin')
                        <li>
                            <a href="{{ route('users.index') }}" class="flex items-center gap-3 rounded-lg px-3 py-2 text-slate-700 hover:bg-amber-50">
                                <svg class="h-5 w-5 text-slate-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                    <path d="M10 2a4 4 0 1 0 0 8 4 4 0 0 0 0-8ZM4 16a6 6 0 0 1 12 0v1H4v-1Z"/>
                                </svg>
                                <span>User</span>
                            </a>
                        </li>
                        <li>
                            <a href="{{ route('banks.index') }}" class="flex items-center gap-3 rounded-lg px-3 py-2 text-slate-700 hover:bg-amber-50">
                                <svg class="h-5 w-5 text-slate-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                    <path d="M10 2a1 1 0 0 1 .894.553l5 10A1 1 0 0 1 15 14H5a1 1 0 0 1-.894-1.447l5-10A1 1 0 0 1 10 2Zm0 4.618L7.618 12h4.764L10 6.618ZM4 16a1 1 0 0 1 1-1h10a1 1 0 1 1 0 2H5a1 1 0 0 1-1-1Z"/>
                                </svg>
                                <span>Akun Bank</span>
                            </a>
                        </li>
                        <li>
                            <a href="{{ route('discounts.index') }}" class="flex items-center gap-3 rounded-lg px-3 py-2 text-slate-700 hover:bg-amber-50">
                                <svg class="h-5 w-5 text-slate-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                    <path d="M5 4a3 3 0 0 1 3-3h4a3 3 0 0 1 3 3v1h1a1 1 0 1 1 0 2h-1v4h1a1 1 0 1 1 0 2h-1v1a3 3 0 0 1-3 3H8a3 3 0 0 1-3-3v-1H4a1 1 0 1 1 0-2h1V7H4a1 1 0 1 1 0-2h1V4Zm3-1a1 1 0 0 0-1 1v1h6V4a1 1 0 0 0-1-1H8Zm-1 12v1a1 1 0 0 0 1 1h4a1 1 0 0 0 1-1v-1H7Zm0-2h6V7H7v6Z"/>
                                </svg>
                                <span>Discount</span>
                            </a>
                        </li>
                        <li>
                            <a href="{{ route('settings.edit') }}" class="flex items-center gap-3 rounded-lg px-3 py-2 text-slate-700 hover:bg-amber-50">
                                <svg class="h-5 w-5 text-slate-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                    <path d="M9.243 2.828a1 1 0 0 1 1.514 0l.586.686a1 1 0 0 0 .858.343l.904-.076a1 1 0 0 1 1.02.59l.422.817a1 1 0 0 0 .73.53l.89.19a1 1 0 0 1 .756.756l.19.89a1 1 0 0 0 .53.73l.817.422a1 1 0 0 1 .59 1.02l-.076.904a1 1 0 0 0 .343.858l.686.586a1 1 0 0 1 0 1.514l-.686.586a1 1 0 0 0-.343.858l.076.904a1 1 0 0 1-.59 1.02l-.817.422a1 1 0 0 0-.53.73l-.19.89a1 1 0 0 1-.756.756l-.89.19a1 1 0 0 0-.73.53l-.422.817a1 1 0 0 1-1.02.59l-.904-.076a1 1 0 0 0-.858.343l-.586.686a1 1 0 0 1-1.514 0l-.586-.686a1 1 0 0 0-.858-.343l-.904.076a1 1 0 0 1-1.02-.59l-.422-.817a1 1 0 0 0-.73-.53l-.89-.19a1 1 0 0 1-.756-.756l-.19-.89a1 1 0 0 0-.53-.73l-.817-.422a1 1 0 0 1-.59-1.02l.076-.904a1 1 0 0 0-.343-.858l-.686-.586a1 1 0 0 1 0-1.514l.686-.586a1 1 0 0 0 .343-.858l-.076-.904a1 1 0 0 1 .59-1.02l.817-.422a1 1 0 0 0 .53-.73l.19-.89a1 1 0 0 1 .756-.756l.89-.19a1 1 0 0 0 .73-.53l.422-.817a1 1 0 0 1 1.02-.59l.904.076a1 1 0 0 0 .858-.343l.586-.686ZM10 7a3 3 0 1 0 0 6 3 3 0 0 0 0-6Z"/>
                                </svg>
                                <span>Pengaturan</span>
                            </a>
                        </li>
                        @endif
                    @endif
                    @if(in_array($role, ['supervisor'], true))
                    <li class="text-xs font-semibold uppercase text-amber-700/70">Orders</li>
                        <!-- <li>
                            <a href="{{ route('orders.create') }}" class="flex items-center gap-3 rounded-lg px-3 py-2 text-slate-700 hover:bg-slate-100">
                                <svg class="h-5 w-5 text-slate-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                    <path d="M10 3a1 1 0 0 1 1 1v5h5a1 1 0 1 1 0 2h-5v5a1 1 0 1 1-2 0v-5H4a1 1 0 1 1 0-2h5V4a1 1 0 0 1 1-1Z"/>
                                </svg>
                                <span>Buat Order</span>
                            </a>
                        </li> -->
                        @if($role === 'supervisor')
                            <li>
                                <a href="{{ route('orders.index') }}" class="flex items-center gap-3 rounded-lg px-3 py-2 text-slate-700 hover:bg-amber-50">
                                    <svg class="h-5 w-5 text-slate-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                        <path d="M6 4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V8.414a2 2 0 0 0-.586-1.414l-2.414-2.414A2 2 0 0 0 11.586 4H6Zm4 8H7a1 1 0 1 1 0-2h3a1 1 0 1 1 0 2Zm3 3H7a1 1 0 1 1 0-2h6a1 1 0 1 1 0 2Z"/>
                                    </svg>
                                    <span>Order Saya</span>
                                </a>
                            </li>
                        @endif
                    @endif
                    @if(in_array($role, ['admin', 'supervisor'], true))
                        <li>
                            <a href="{{ route('orders.all') }}" class="flex items-center gap-3 rounded-lg px-3 py-2 text-slate-700 hover:bg-amber-50">
                                <svg class="h-5 w-5 text-slate-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                    <path d="M5 4a2 2 0 0 0-2 2v3h14V6a2 2 0 0 0-2-2H5Zm12 7H3v3a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-3Z"/>
                                </svg>
                                <span>Semua Order</span>
                            </a>
                        </li>
                    @endif
                    @if($warehouseRoles->contains(strtolower((string) $role)) || $role === 'supervisor')
                        <li class="text-xs font-semibold uppercase text-amber-700/70">Gudang</li>
                        <li>
                            <a href="{{ route('warehouse.items.index') }}" class="flex items-center gap-3 rounded-lg px-3 py-2 text-slate-700 hover:bg-amber-50">
                                <svg class="h-5 w-5 text-slate-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                    <path d="M3 5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v2H3V5Zm14 4H3v6a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V9Z"/>
                                </svg>
                                <span>Master Item</span>
                            </a>
                        </li>
                        <li>
                            <a href="{{ route('warehouse.in.index') }}" class="flex items-center gap-3 rounded-lg px-3 py-2 text-slate-700 hover:bg-amber-50">
                                <svg class="h-5 w-5 text-slate-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                    <path d="M10 3a1 1 0 0 1 1 1v5h5a1 1 0 1 1 0 2h-5v5a1 1 0 1 1-2 0v-5H4a1 1 0 1 1 0-2h5V4a1 1 0 0 1 1-1Z"/>
                                </svg>
                                <span>Pemasukan</span>
                            </a>
                        </li>
                        <li>
                            <a href="{{ route('warehouse.out.index') }}" class="flex items-center gap-3 rounded-lg px-3 py-2 text-slate-700 hover:bg-amber-50">
                                <svg class="h-5 w-5 text-slate-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                    <path d="M4 9a1 1 0 0 1 1-1h5V4a1 1 0 1 1 2 0v4h5a1 1 0 1 1 0 2h-5v4a1 1 0 1 1-2 0V10H5a1 1 0 0 1-1-1Z"/>
                                </svg>
                                <span>Pengeluaran</span>
                            </a>
                        </li>
                        <li>
                            <a href="{{ route('warehouse.report') }}" class="flex items-center gap-3 rounded-lg px-3 py-2 text-slate-700 hover:bg-amber-50">
                                <svg class="h-5 w-5 text-slate-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                    <path d="M3 3a1 1 0 0 1 1 1v12h12a1 1 0 1 1 0 2H4a2 2 0 0 1-2-2V4a1 1 0 0 1 1-1Zm12 4a1 1 0 0 1 .993.883L16 8v6a1 1 0 1 1-2 0V9.414l-3.293 3.293a1 1 0 0 1-1.414 0L7 10.414l-1.293 1.293a1 1 0 1 1-1.414-1.414l2-2a1 1 0 0 1 1.414 0L10 10.586l2.586-2.586A1 1 0 0 1 13 7h2Z"/>
                                </svg>
                                <span>Laporan Stok</span>
                            </a>
                        </li>
                    @endif
                    @if($role === 'admin')
                        <li class="text-xs font-semibold uppercase text-amber-700/70">Reports</li>
                        <li>
                            <a href="{{ route('reports.sales.index') }}" class="flex items-center gap-3 rounded-lg px-3 py-2 text-slate-700 hover:bg-amber-50">
                                <svg class="h-5 w-5 text-slate-400" viewBsaox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                    <path d="M3 3a1 1 0 0 1 1 1v12h12a1 1 0 1 1 0 2H4a2 2 0 0 1-2-2V4a1 1 0 0 1 1-1Zm12 4a1 1 0 0 1 .993.883L16 8v6a1 1 0 1 1-2 0V9.414l-3.293 3.293a1 1 0 0 1-1.414 0L7 10.414l-1.293 1.293a1 1 0 1 1-1.414-1.414l2-2a1 1 0 0 1 1.414 0L10 10.586l2.586-2.586A1 1 0 0 1 13 7h2Z"/>
                                </svg>
                                <span>Laporan Omset</span>
                            </a>
                        </li>
                        <li>
                            <a href="{{ route('reports.profit.index') }}" class="flex items-center gap-3 rounded-lg px-3 py-2 text-slate-700 hover:bg-amber-50">
                                <span class="inline-flex h-5 w-5 items-center justify-center rounded text-slate-400">$</span>
                                <span>Laporan Keuntungan</span>
                            </a>
                        </li>
                        <li>
                            <a href="{{ route('reports.menu_sales.index') }}" class="flex items-center gap-3 rounded-lg px-3 py-2 text-slate-700 hover:bg-amber-50">
                                <svg class="h-5 w-5 text-slate-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                    <path d="M3 5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v2H3V5Zm14 4H3v6a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V9Z"/>
                                </svg>
                                <span>Laporan Penjualan Menu</span>
                            </a>
                        </li>
                    @endif
                    @php($canAttendanceLog = $attendanceRoles->contains(strtolower((string) $role)))
                    @php($canAttendanceUsers = in_array($role, ['admin', 'supervisor'], true))
                    @if($canAttendanceLog || $canAttendanceUsers)
                        <li class="text-xs font-semibold uppercase text-amber-700/70">Absensi</li>
                        @if($canAttendanceLog)
                            <li>
                                <a href="{{ route('attendance.index') }}" class="flex items-center gap-3 rounded-lg px-3 py-2 text-slate-700 hover:bg-amber-50">
                                    <svg class="h-5 w-5 text-slate-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                        <path d="M6 2a1 1 0 0 1 1 1v1h6V3a1 1 0 1 1 2 0v1a2 2 0 0 1 2 2v1H3V6a2 2 0 0 1 2-2V3a1 1 0 0 1 1-1ZM3 9h14v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V9Zm3 2a1 1 0 0 0 0 2h2a1 1 0 1 0 0-2H6Zm6 0a1 1 0 1 0 0 2h2a1 1 0 1 0 0-2h-2Z"/>
                                    </svg>
                                    <span>Log Absensi</span>
                                </a>
                            </li>
                        @endif
                        @if($canAttendanceUsers)
                            <li>
                                <a href="{{ route('attendance.users.index') }}" class="flex items-center gap-3 rounded-lg px-3 py-2 text-slate-700 hover:bg-amber-50">
                                    <svg class="h-5 w-5 text-slate-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                        <path d="M10 2a4 4 0 1 0 0 8 4 4 0 0 0 0-8ZM4 16a6 6 0 0 1 12 0v1H4v-1Z"/>
                                    </svg>
                                    <span>User Mesin</span>
                                </a>
                            </li>
                        @endif
                    @endif
                </ul>
            </div>
        </aside>
    @endauth

    <div id="app-content" class="min-h-screen @auth pt-16 @endauth">
        <main class="p-4 lg:p-8">
            @if(session('success'))
                <div id="toast-success" class="mb-4 flex w-full max-w-xs items-center gap-3 rounded-lg bg-white p-4 text-slate-700 shadow" role="alert">
                    <div class="inline-flex h-8 w-8 items-center justify-center rounded-full bg-emerald-100 text-emerald-700">
                        <svg class="h-4 w-4" fill="currentColor" viewBox="0 0 20 20"><path d="M16.707 5.293a1 1 0 0 1 0 1.414l-8 8a1 1 0 0 1-1.414 0l-4-4a1 1 0 0 1 1.414-1.414L8 12.586l7.293-7.293a1 1 0 0 1 1.414 0Z"/></svg>
                    </div>
                    <div class="text-sm font-medium">{{ session('success') }}</div>
                    <button type="button" class="ml-auto inline-flex h-8 w-8 items-center justify-center rounded-lg text-slate-400 hover:bg-slate-100" data-dismiss-target="#toast-success" aria-label="Close">
                        <span class="sr-only">Close</span>
                        <svg class="h-3 w-3" fill="currentColor" viewBox="0 0 20 20"><path d="M14.348 5.652a1 1 0 0 0-1.414 0L10 8.586 7.066 5.652a1 1 0 1 0-1.414 1.414L8.586 10l-2.934 2.934a1 1 0 1 0 1.414 1.414L10 11.414l2.934 2.934a1 1 0 0 0 1.414-1.414L11.414 10l2.934-2.934a1 1 0 0 0 0-1.414Z"/></svg>
                    </button>
                </div>
            @endif

            @if ($errors->any())
                <div id="toast-danger" class="mb-4 flex w-full max-w-xs items-center gap-3 rounded-lg bg-white p-4 text-slate-700 shadow" role="alert">
                    <div class="inline-flex h-8 w-8 items-center justify-center rounded-full bg-rose-100 text-rose-700">
                        <svg class="h-4 w-4" fill="currentColor" viewBox="0 0 20 20"><path d="M8.257 3.099c.765-1.36 2.72-1.36 3.485 0l5.58 9.92c.75 1.334-.214 2.981-1.742 2.981H4.42c-1.528 0-2.492-1.647-1.742-2.98l5.58-9.92ZM11 13a1 1 0 1 0-2 0 1 1 0 0 0 2 0Zm-1-7a1 1 0 0 0-.993.883L9 7v4a1 1 0 0 0 1.993.117L11 11V7a1 1 0 0 0-1-1Z"/></svg>
                    </div>
                    <div class="text-sm font-medium">Ada kesalahan pada input. Periksa kembali.</div>
                    <button type="button" class="ml-auto inline-flex h-8 w-8 items-center justify-center rounded-lg text-slate-400 hover:bg-slate-100" data-dismiss-target="#toast-danger" aria-label="Close">
                        <span class="sr-only">Close</span>
                        <svg class="h-3 w-3" fill="currentColor" viewBox="0 0 20 20"><path d="M14.348 5.652a1 1 0 0 0-1.414 0L10 8.586 7.066 5.652a1 1 0 1 0-1.414 1.414L8.586 10l-2.934 2.934a1 1 0 1 0 1.414 1.414L10 11.414l2.934 2.934a1 1 0 0 0 1.414-1.414L11.414 10l2.934-2.934a1 1 0 0 0 0-1.414Z"/></svg>
                    </button>
                </div>
            @endif

            @yield('content')
        </main>
    </div>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            if (window.$ && $.fn.select2) {
                $('select.select2').select2({ width: '100%' });
            }
        });
    </script>
    @stack('scripts')
</body>
</html>
