<!doctype html>
<html lang="vi">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1">
	<meta name="csrf-token" content="{{ csrf_token() }}">
	<title>{{ $page_title ?? 'KOC Booking Manager' }}</title>
	<link rel="icon" type="image/png" href="/images/11zon_cropped.png">
	<link href="/build/app.css" rel="stylesheet">
    <style>[x-cloak]{display:none!important}</style>
    <script defer src="/build/alpine.js?v={{ filemtime(public_path('build/alpine.js')) }}"></script>
</head>
<body id="app-layout"
      class="min-h-screen has-sidebar"
      x-data="sidebar()"
      :class="{ 'sidebar-open': sidebarOpen }"
      data-user-name="{{ auth()->user()->name ?? '' }}"
      data-user-display-name="{{ auth()->user()->display_name ?? '' }}"
      data-user-email="{{ auth()->user()->email ?? '' }}"
      data-user-role="{{ auth()->user()->role?->name ?? (auth()->user()->hasRole('owner') ? 'owner' : (auth()->user()->hasRole('admin') ? 'admin' : 'staff')) }}"
      data-user-created-at="{{ auth()->user()->created_at ?? '' }}">
	<div class="sidebar-overlay" @click="closeSidebar()"></div>

	@include('components.layout.sidebar')

	<main>
		<div x-data="profilePage()" x-init="init()">
			@yield('content')

			{{-- Profile Modal --}}
			@if(auth()->check())
				<x-features.profile.profile-modal />
			@endif
		</div>
	</main>

	{{-- Notifications container --}}
	<div x-data="notifications()" class="notification-container" id="notification-container">
		<template x-for="toast in toasts" :key="toast.id">
			<div :id="toast.id" :class="['notification', toast.level, toast.closing ? 'closing' : '']">
				<span class="notification-icon"></span>
				<div class="notification-content">
					<div class="notification-title" x-text="toast.title"></div>
					<template x-if="toast.message">
						<div class="notification-message" x-text="toast.message"></div>
					</template>
				</div>
				<button type="button" class="notification-close" @click="dismiss(toast.id)">&times;</button>
			</div>
		</template>
	</div>

    <button x-data="scrollToTop()" x-show="visible" x-transition.opacity.duration.300ms
            @click="scrollToTop" class="scroll-to-top-btn" :class="{ 'is-visible': visible }"
            title="Lên đầu trang" type="button" aria-label="Lên đầu trang">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" fill="currentColor">
            <path d="M214.6 41.4c-12.5-12.5-32.8-12.5-45.3 0l-160 160c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 141.2V448c0 17.7 14.3 32 32 32s32-14.3 32-32V141.2L329.4 246.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-160-160z"/>
        </svg>
    </button>

    @stack('alpine-data')
    <script>
        window.__currentUserIdHex = '{{ bin2hex(auth()->id()) }}';
        window.__isOwner = {{ auth()->user()->hasRole('owner') ? 'true' : 'false' }};
        window.__enums = {
            campaignStatus: @json(\App\Enums\CampaignStatus::options()),
            bookingStatus: @json(\App\Enums\BookingStatus::options()),
			bookingKocStatus: @json(\App\Enums\BookingStatus::kocOptions()),
			bookingKocOrder: @json(\App\Enums\BookingStatus::kocOrder()),
            videoStatus: @json(\App\Enums\VideoStatus::options()),
            taskStatus: @json(\App\Enums\TaskStatus::options()),
            taskPriority: @json(\App\Enums\TaskPriority::options()),
            taskAccess: @json(\App\Enums\TaskAccess::options()),
        };
        window.statusBadgeHtml = function(value, enumName) {
            const list = window.__enums?.[enumName] || [];
            const item = list.find(function(e) { return e.value === value; });
            if (!item) return '<span class="status-badge status-badge--draft">' + (value || '-') + '</span>';
            return '<span class="status-badge ' + item.cssClass + '">' + item.label + '</span>';
        };
    </script>
    <script src="/build/app.js"></script>
</body>
</html>
