@php
	$currentLocale = app()->getLocale();
@endphp
<!DOCTYPE html>
<html lang="en" dir="ltr" data-nav-layout="vertical" class="light" data-header-styles="light"
	data-menu-styles="dark">

	<head>

		<!-- META DATA -->
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta name="description" content="Tailwind Responsive Admin Web Dashboard Laravel Template">
		<meta name="keywords"
			content="admin, admin tailwind, laravel admin template, admin laravel, tailwind laravel, admin dashboard template, laravel tailwind, admin dashboard, admin panel, admin template, laravel admin dashboard, tailwind, laravel dashboard template, admin panel template, laravel admin panel, laravel dashboard">

		<!-- TITLE -->
		<title>{{ config('app.name', 'Laravel') }}</title>

		<!-- FAVICON -->
		<link rel="shortcut icon" href="{{ asset('assets/img/brand-logos/favicon.ico') }}">

		<!-- ICONS CSS -->
		<link href="{{ asset('assets/iconfonts/icons.css') }}" rel="stylesheet">

		<!-- MAIN CSS -->
		<link href="{{ asset('assets/app.css') }}" rel="stylesheet">

		<!-- SIMPLEBAR CSS -->
		<link rel="stylesheet" href="{{ asset('assets/libs/simplebar/simplebar.min.css') }}">

		<!-- COLOR PICKER CSS -->
		<link rel="stylesheet" href="{{ asset('assets/libs/@simonwep/pickr/themes/nano.min.css') }}">

		<!-- MAIN JS -->
		<script src="{{ asset('assets/main.js') }}"></script>

		@yield('styles')
		<!-- NOTIFICATION CSS -->
		<link rel="stylesheet" href="{{ asset('assets/libs/awesome-notifications/style.css') }}">
		<style>
			input[type="hidden"] {
				display: none;
			}

			.ti-form-input {
				padding-top: 0.5rem !important;
				padding-bottom: 0.5rem !important;
				font-weight: 700;
			}

			.ti-form-label {
				font-weight: 200;
				color: #9fa1a5;
				margin-bottom: 0.1rem;
			}

			.ti-form-label.error {
				color: #ef4444;
			}

			.ti-form-input::placeholder {
				color: #9fa1a5;
				font-weight: 200;
			}

			.choices__inner {
				padding-top: 0.25rem !important;
				padding-bottom: 0.25rem !important;
				min-height: 22px;
			}

			.choices__list--dropdown .choices__item {
				padding-top: 0.5rem !important;
				padding-bottom: 0.5rem !important;
			}

			.choices__inner.border-red-500 {
				border-color: #ef4444 !important;
			}

			.choices__list--dropdown {
				width: 100% !important;
				min-width: 260px !important;
			}

			.choices--align-right {
				position: relative;
			}

			.choices--align-right.is-open .choices__list--dropdown {
				left: auto !important;
				right: 0 !important;
			}

			.choices--align-right .choices__list--dropdown {
				min-width: 260px !important;
				width: 100% !important;
			}

			#passport_place_id .choices__item--selectable {
				display: inline-block;
				width: 100%;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			#passport_place_id .choices__item--selectable:hover {
				text-overflow: unset;
			}

			/* This will style .choices__inner only if it HAS a child .choices__item[aria-selected="true"] */
			#passport_place_id .choices__inner:has(.choices__item[aria-selected="true"]) {
				padding-bottom: 0px !important;
			}

			#passport_place_id .choices__inner.border-red-500:has(.choices__item[aria-selected="true"]) {
				border-color: #ef4444 !important;
			}

			#country_code_id .choices__item--selectable {
				display: inline-block;
				width: 100%;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			#country_code_id .choices__item--selectable:hover {
				text-overflow: unset;
			}

			/* This will style .choices__inner only if it HAS a child .choices__item[aria-selected="true"] */
			#country_code_id .choices__inner:has(.choices__item[aria-selected="true"]) {
				padding-bottom: 0px !important;
			}

			#country_code_id .choices__inner.border-red-500:has(.choices__item[aria-selected="true"]) {
				border-color: #ef4444 !important;
			}

			#nationality_id .choices__item--selectable {
				display: inline-block;
				width: 100%;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			#nationality_id .choices__item--selectable:hover {
				text-overflow: unset;
			}

			/* This will style .choices__inner only if it HAS a child .choices__item[aria-selected="true"] */
			#nationality_id .choices__inner:has(.choices__item[aria-selected="true"]) {
				padding-bottom: 0px !important;
			}

			#nationality_id .choices__inner.border-red-500:has(.choices__item[aria-selected="true"]) {
				border-color: #ef4444 !important;
			}

			/* Override notification opacity */
			.awn-toast {
				opacity: 0.50 !important;
				/* Adjust value as needed */
				background-color: rgba(255, 255, 255, 0.5) !important;
				/* For background-only opacity */
			}

			/* Optional: Target specific notification types */
			.awn-toast.awn-success {
				opacity: 0.6 !important;
			}

			.awn-toast.awn-warning {
				opacity: 0.5 !important;
			}

			/* Hide label */
			.awn-toast-label {
				display: none !important;
			}
		</style>

	</head>

	<body class="">

		<!-- PAGE -->
		<div class="page">

			<!-- SIDEBAR -->
			@include('backend.layouts.components.sidebar')

			<!-- END SIDEBAR -->

			<!-- HEADER -->
			@include('backend.layouts.components.header1')

			<!-- END HEADER -->

			<!-- MAIN-CONTENT -->
			@yield('content')
			<!-- END MAIN-CONTENT -->

			<!-- SEARCH-MODAL -->
			@include('backend.layouts.components.search-modal')

			<!-- END SEARCH-MODAL -->

			<!-- FOOTER -->
			@include('backend.layouts.components.footer')

			<!-- END FOOTER -->

		</div>
		<!-- END PAGE-->

		<!-- SCRIPTS -->

		@include('backend.layouts.components.scripts')

		<!-- STICKY JS -->
		<script src="{{ asset('assets/sticky.js') }}"></script>

		<!-- SWITCH JS -->
		<script src="{{ asset('assets/switch.js') }}"></script>
		<script src="{{ asset('assets/app.js') }}"></script>

		<!-- END SCRIPTS -->

		<script src="{{ asset('assets/libs/awesome-notifications/index.var.js') }}"></script>

		<script>
			var options = {
				position: 'bottom-right',
				durations: {
					success: 2000
				}
			};
			window.notifier = new AWN(options); // Use window to ensure global scope

			document.addEventListener('awn:success', function(event) {
				// The 'message' is passed from the Livewire component
				notifier.success(event.detail.message);
			});
		</script>
	</body>

</html>
