@extends('backend.layouts.master')

@section('styles')
	<!-- FLATPICKR CSS -->
	<link rel="stylesheet" href="{{ asset('assets/libs/flatpickr/flatpickr.min.css') }}">
	<!-- CHOICES CSS -->
	<link rel="stylesheet" href="{{ asset('assets/libs/choices.js/public/assets/styles/choices.min.css') }}">
@endsection

@section('content')
	<div class="content">
		@if ($individual)
			<!-- Edit mode -->
			<div id="individual-dashboard" class="main-content">
				<div class="block justify-between page-header sm:flex">
					<div>
						<h3 class="text-gray-700 hover:text-gray-900 dark:text-white dark:hover:text-white text-2xl font-medium">
							{{ $individual->first_name }} {{ $individual->last_name }}</h3>
					</div>
					<div>
						@if (session('status'))
							<script>
								document.addEventListener("DOMContentLoaded", function() {
									notifier.success("{{ session('status') }}");
								});
							</script>
						@endif
					</div>
				</div>

				<div class="grid grid-cols-12 gap-x-6">
					<div class="col-span-12 lg:col-span-2">
						<div class="box">
							<div class="box-body pt-6">
								@include('backend.crm.individuals.components.sidebar')
							</div>
						</div>
					</div>
					<div class="col-span-12 lg:col-span-10">
						<div class="grid grid-cols-12 gap-x-5">
							<div class="col-span-12 lg:col-span-4">
								@include('backend.crm.individuals.forms.individual-form-edit', [
									'individual' => $individual,
									'readonly' => $readonly,
								])
							</div>

							<div class="col-span-12 lg:col-span-4">
								@if ($individual->lastActiveIdCard)
									@include('backend.crm.individuals.forms.id-card-form-edit', [
										'individual' => $individual,
									])
								@else
									@include('backend.crm.individuals.forms.id-card-form', [
										'individual' => $individual,
									])
								@endif

							</div>

							<div class="col-span-12 lg:col-span-4">
								@include('backend.crm.individuals.forms.passport-form', [
									'individual' => $individual,
								])
							</div>
							<div class="col-span-12 lg:col-span-4">
								@if ($individual->lastActiveIdCard || $individual->lastActivePassport)
									@if ($individual->lastActiveResidence)
										@include('backend.crm.individuals.forms.address-residence-form-edit', [
											'individual' => $individual,
										])
									@else
										@include('backend.crm.individuals.forms.address-residence-form', [
											'individual' => $individual,
										])
									@endif
								@else
									@include('backend.crm.placeholders.address-residence-form')
								@endif
							</div>
							<div class="col-span-12 lg:col-span-4">
								@if (($individual->lastActiveIdCard || $individual->lastActivePassport) && $individual->lastActiveResidence)
									@if ($individual->lastActiveMailing)
										@include('backend.crm.individuals.forms.address-mailing-form-edit', [
											'individual' => $individual,
										])
									@else
										@include('backend.crm.individuals.forms.address-mailing-form', [
											'individual' => $individual,
										])
									@endif
								@else
									@include('backend.crm.placeholders.address-mailing-form')
								@endif
							</div>

						</div>
					</div>
				</div>
			</div>
		@else
			<!-- Create mode -->
			<div id="individual-dashboard" class="main-content">
				<div class="block justify-between page-header sm:flex">
					<div>
						<h3 class="text-gray-700 hover:text-gray-900 dark:text-white dark:hover:text-white text-2xl font-medium">
							Novi klijent </h3>
					</div>
					<div>
						@if (session('status'))
							@include('backend.crm.individuals.components.alert-status')
						@endif
					</div>
				</div>

				<div class="grid grid-cols-12 gap-x-6">
					<div class="col-span-12 lg:col-span-2">
						<div class="box">
							<div class="box-body pt-6">
								@include('backend.crm.individuals.components.sidebar')
							</div>
						</div>
					</div>
					<div class="col-span-12 lg:col-span-10">
						<div class="grid grid-cols-12 gap-x-5">
							<div class="col-span-12 lg:col-span-4">
								@include('backend.crm.individuals.forms.individual-form', [
									'readonly' => $readonly,
								])
							</div>
							<div class="col-span-12 lg:col-span-4">
								@include('backend.crm.placeholders.id-card-form')
							</div>
							<div class="col-span-12 lg:col-span-4">
								@include('backend.crm.placeholders.passport-form')
							</div>
							<div class="col-span-12 lg:col-span-4">
								@include('backend.crm.placeholders.address-residence-form')
							</div>
							<div class="col-span-12 lg:col-span-4">
								@include('backend.crm.placeholders.address-mailing-form')
							</div>
							<div class="col-span-12 lg:col-span-4">
								@include('backend.crm.placeholders.accounts-form')
							</div>
						</div>
					</div>
				</div>
			</div>
		@endif
	</div>

@endsection

@section('scripts')
	<!-- FLATPICKR JS -->
	<script src="{{ asset('assets/libs/flatpickr/flatpickr.min.js') }}"></script>

	<script>
		flatpickr(".date-picker", {
			dateFormat: "d.m.Y.",
			allowInput: true
		});
	</script>

	<!-- CHOICES JS -->
	<script src="{{ asset('assets/libs/choices.js/public/assets/scripts/choices.min.js') }}"></script>

	@if ($individual)
		<script>
			window.__IS_READONLY__ = @json($readonly);

			// For ID Card place of birth
			window.__OLD_place_of_birth_city_id = "{{ old('place_of_birth_city_id') }}";
			window.__EXISTING_place_of_birth_city_id = "{{ $individual->lastActiveIdCard?->place_of_birth_city_id }}";

			// For Passport BIRTH PLACE:
			window.__OLD_place_of_birth_country_id = "{{ old('passport.place_of_birth_country_id') }}";
			window.__EXISTING_place_of_birth_country_id = "{{ $individual->lastActivePassport?->place_of_birth_country_id }}";

			// For Passport "country code" field:
			window.__OLD_country_code_country_id = "{{ old('passport.country_code_country_id') }}";
			window.__EXISTING_country_code_country_id = "{{ $individual->lastActivePassport?->country_code_country_id }}";

			// For Passport nationality
			window.__OLD_nationality_country_id = "{{ old('passport.nationality_country_id') }}";
			window.__EXISTING_nationality_country_id = "{{ $individual->lastActivePassport?->nationality_country_id }}";

			// For residence
			window.__OLD_residence_city_id = "{{ old('residence.city_id') }}";
			window.__EXISTING_residence_city_id = "{{ optional($individual->lastActiveResidence)->city_id }}";

			// For mailing
			window.__OLD_mailing_city_id = "{{ old('mailing.city_id') }}";
			window.__EXISTING_mailing_city_id = "{{ optional($individual->lastActiveMailing)->city_id }}";
		</script>
		@vite(['resources/js/choices-setup.js'])
	@endif
@endsection