@extends('backend.layouts.master')

@section('styles')
	<!-- FLATPICKR CSS -->
	<link rel="stylesheet" href="{{ asset('assets/libs/flatpickr/flatpickr.min.css') }}">
	<!-- TOM SELECT CSS -->
	<link rel="stylesheet" href="{{ asset('assets/libs/tom-select/css/tom-select.default.min.css') }}">
	<style>
		/* Hide anything marked x-cloak until Alpine is initialized */
		[x-cloak] {
			display: none !important;
		}
	</style>
@endsection

@section('content')
	<div class="content">
		<div class="main-content">
			<div class="block justify-between page-header sm:flex">
				<h3 class="text-2xl font-medium text-gray-700 dark:text-white">
					Nova polisa
				</h3>
				<ol class="flex items-center space-x-2">
					@if ($entity->entityable_type === 'App\Models\CRM\Company')
						<a href="{{ route('crm.companies.edit', $entity->entityable) }}" class="ti-btn ti-btn-outline-secondary">
							Profil klijenta
						</a>
					@else
						<a href="{{ route('crm.individuals.edit', $entity->entityable) }}" class="ti-btn ti-btn-outline-secondary">
							Profil klijenta
						</a>
					@endif
					<a href="{{ route('osiguranje.insurance-policies.index', $entity) }}" class="ti-btn ti-btn-outline-secondary">
						Polise klijenta
					</a>
				</ol>
			</div>

			<div class="md:grid md:grid-cols-2 gap-4 space-y-4 md:space-y-0">
				<form action="{{ route('osiguranje.insurance-policies.store', $entity) }}" method="POST">
					@csrf

					<div class="box mb-0">
						<div class="box-header flex items-center justify-between !py-1">
							<div class="box-title !py-0 !my-0">
								Broj polise
							</div>

							<input type="text" hidden name="status" value="active" />

							<input type="text"
								class="ti-form-input !py-0 !px-2 h-8 mr-2 text-sm leading-none max-w-xs @error('policy_number') border-red-500 @enderror"
								placeholder="Broj polise @error('policy_number') {{ $message }} @enderror" name="policy_number"
								value="{{ old('policy_number') }}" />

							<button class="ti-btn ti-btn-soft-success !py-0 !px-2 h-8 text-sm leading-none">
								{{ __('forms.Save') }}
							</button>
						</div>

						<div class="box-body pb-4">

							{{-- Alpine + TomSelect block --}}
							<div x-data="commissionFetcher()" x-init="initTom();
	
	// 1) seed the insurer dropdown
	insurerId = '{{ old('insurer_id') }}';
	
	// 2) if we had an old insurer, fetch its defaults
	if (insurerId) {
	    fetchDefaults().then(() => {
	        // 3) after defaults are loaded, re-select old commission_default_id
	        @if(old('commission_default_id'))
	        tom.setValue('{{ old('commission_default_id') }}');
	        @endif
	    });
	}" class="space-y-4">

								{{-- 1) Insurer dropdown (unchanged) --}}
								<div>
									<label for="insurer_select" class="block text-sm font-medium">
										@error('insurer_id')
											{{ $message }}
										@else
											Izbor osiguravača
										@enderror
									</label>
									<select id="insurer_select" x-model="insurerId" @change="fetchDefaults()"
										class="mt-1 block w-full py-2 px-3 ti-form-select @error('insurer_id') border-red-500 @enderror"
										name="insurer_id">
										<option value="">— Izaberi —</option>
										@foreach ($insurers as $insurer)
											<option value="{{ $insurer->id }}" {{ old('insurer_id') == $insurer->id ? 'selected' : '' }}>
												{{ $insurer->short_name }}
											</option>
										@endforeach
									</select>
								</div>

								{{-- 2) Commission-defaults as TomSelect --}}
								<div>
									<label for="commission_default_id" class="block text-sm font-medium mb-1">
										@error('commission_default_id')
											{{ $message }}
										@else
											Izbor vrste osiguranja
										@enderror
									</label>
									<select x-cloak {{-- hide raw select until Alpine is ready --}} x-ref="commissionSelect" x-model="selectedDefault" :disabled="loading"
										autocomplete="off" name="commission_default_id"
										class="ti-form-select
										@error('commission_default_id')
										border border-red-500 focus:border-red-500
										@enderror
									"></select>
								</div>
								<div class="grid lg:grid-cols-2 gap-6 space-y-4 lg:space-y-0">
									<div class="space-y-2">
										<label for="insured_amount" class="block text-sm font-medium mb-1">
											Osigurana suma @error('insured_amount')
												{{ $message }}
											@enderror
										</label>
										<input type="text" class="my-auto ti-form-input @error('insured_amount') border-red-500 @enderror"
											placeholder="Osigurana suma" name="insured_amount" value="{{ old('insured_amount') }}">
									</div>
									<div class="space-y-2">
										<label for="premium" class="block text-sm font-medium mb-1">
											Premija osiguranja @error('premium')
												{{ $message }}
											@enderror
										</label>
										<input type="text" class="my-auto ti-form-input @error('premium') border-red-500 @enderror"
											placeholder="Premija osiguranja" name="premium" value="{{ old('premium') }}">
									</div>

									<div class="flex rounded-sm shadow-sm">
										<div
											class="px-2 inline-flex items-center min-w-fit ltr:rounded-l-sm rtl:rounded-r-sm border ltr:border-r-0 rtl:border-l-0 border-gray-200 bg-gray-50 dark:bg-black/20 dark:border-white/10 @error('start_date') border-red-500 @enderror">
											<span class="text-xl text-gray-500 dark:text-white/70"><i class="ti ti-player-play"></i></span>
										</div>

										<input type="text"
											class="ti-form-input rounded-l-none focus:z-10 flatpickr-input @error('start_date') border-red-500 @enderror"
											id="start_date" name="start_date" value="{{ old('start_date') }}"
											placeholder="Početak osiguranja @error('start_date'){{ $message }} @enderror" readonly>
									</div>
									<div class="flex rounded-sm shadow-sm">
										<div
											class="px-2 inline-flex items-center min-w-fit ltr:rounded-l-sm rtl:rounded-r-sm border ltr:border-r-0 rtl:border-l-0 border-gray-200 bg-gray-50 dark:bg-black/20 dark:border-white/10 @error('start_date') border-red-500 @enderror">
											<span class="text-xl text-gray-500 dark:text-white/70"><i class="ti ti-player-stop"></i></span>
										</div>

										<input type="text" id="end_date" name="end_date"
											value="{{ $errors->has('end_date') ? '' : old('end_date') }}"
											@error('end_date')
												placeholder="{{ $message }}"
											@enderror
											placeholder="Kraj osiguranja" readonly
											class="ti-form-input rounded-l-none focus:z-10 flatpickr-input
													{{ $errors->has('end_date') ? 'border border-red-500 focus:border-red-500' : '' }}">
									</div>
								</div>
							</div>
						</div>
					</div>
				</form>
				{{-- Your existing company/individual boxes --}}
				@if ($entity->entityable_type == 'App\Models\CRM\Company')
					@include('backend.insurance.insurance-policies.boxes.company')
				@else
					@include('backend.insurance.insurance-policies.boxes.individual')
				@endif

			</div>
		</div>
	</div>
@endsection

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

	<script>
		document.addEventListener('DOMContentLoaded', function() {
			// basic single-date pickers
			flatpickr('#start_date', {
				dateFormat: 'Y-m-d',
				// you can set minDate, maxDate, locale, etc here
			});

			flatpickr('#end_date', {
				dateFormat: 'Y-m-d',
				// e.g. disallow selecting before the start date
				onOpen: function(selectedDates, dateStr, instance) {
					const start = document.querySelector('#start_date')._flatpickr.selectedDates[0];
					if (start) {
						instance.set('minDate', start);
					}
				}
			});
		});
	</script>

	<!-- Alpine -->
	<script src="//unpkg.com/alpinejs" defer></script>

	<!-- 1) expose route URL -->
	<script>
		window.commissionDefaultsUrl = @json(url('_cp/insurers/{insurer}/commission-defaults'));
	</script>

	<!-- 2) TomSelect JS -->
	<script src="{{ asset('assets/libs/tom-select/js/tom-select.complete.min.js') }}"></script>

	<!-- 3) Alpine component + TomSelect integration -->
	<script>
		function commissionFetcher() {
		return {
			insurerId: '',
			defaults: [],
			selectedDefault: null,
			loading: false,
			tom: null,

			initTom() {
			// 1) remove the raw select styling
			this.$refs.commissionSelect.classList.remove('ti-form-select');

			// 2) init TomSelect
			this.tom = new TomSelect(this.$refs.commissionSelect, {
				create: false,
				sortField: { field: "text", direction: "asc" },
				allowEmptyOption: true,
			});

			// 3) strip inherited class off the wrapper
			this.tom.wrapper.classList.remove('ti-form-select');

			// 4) highlight on validation error
			@error('commission_default_id')
				this.tom.wrapper.classList.add('border','rounded-sm','border-red-500','focus:border-red-500');
			@enderror

			// pin full width & disable until loaded
			this.pinWidth();
			this.tom.disable();

			// helper to decide which placeholder to show
			const applyPlaceholder = () => {
				if (this.defaults.length === 0) {
				// no defaults loaded
				this.tom.control_input.setAttribute(
					'placeholder',
					'Nema dostupnih podrazumevanih provizija'
				);
				} else if (!this.selectedDefault) {
				// defaults exist but none picked yet
				this.tom.control_input.setAttribute(
					'placeholder',
					'kucajte da biste pretražili…'
				);
				}
			};

			// re‑apply on blur, focus, or any click
			this.tom.on('blur',  applyPlaceholder);
			this.tom.on('focus', applyPlaceholder);
			document.addEventListener('click', applyPlaceholder);

			// once a user picks one, clear placeholder so the selected item shows
			this.tom.on('item_add', () => {
				this.tom.control_input.removeAttribute('placeholder');
			});
			},

			async fetchDefaults() {
			this.loading = true;

			// fully clear prior selection & options
			this.tom.clear();
			this.tom.clearOptions();
			this.selectedDefault = null;

			if (!this.insurerId) {
				this.tom.disable();
				this.tom.control_input.removeAttribute('placeholder');
				this.loading = false;
				return;
			}

			try {
				const url = window.commissionDefaultsUrl.replace('{insurer}', this.insurerId);
				const res = await fetch(url, {
				headers: {
					'X-Requested-With':'XMLHttpRequest',
					'Accept':'application/json',
				}
				});
				if (!res.ok) throw new Error('Network error');

				this.defaults = await res.json();

				if (this.defaults.length) {
				// populate with real defaults
				this.defaults.forEach(d => {
					this.tom.addOption({
					value: d.id,
					text: `${d.type_name} — ${d.commission_rate}%`
					});
				});
				this.tom.refreshOptions(false);
				this.tom.enable();

				// set & lock in the “search…” placeholder
				this.tom.control_input.setAttribute(
					'placeholder',
					'kucajte da biste pretražili…'
				);
				this.tom.control_input.blur();
				} else {
				// no defaults for this insurer
				this.tom.refreshOptions(false);
				this.tom.disable();
				this.tom.control_input.setAttribute(
					'placeholder',
					'Nema dostupnih podrazumevanih provizija'
				);
				this.tom.control_input.blur();
				}
			} catch (e) {
				console.error(e);
				this.tom.control_input.setAttribute(
				'placeholder',
				'Greška pri učitavanju provizija'
				);
				this.tom.disable();
			} finally {
				this.pinWidth();
				this.loading = false;
			}
			},

			pinWidth() {
			const { wrapper, dropdown } = this.tom;
			if (wrapper) {
				wrapper.style.width = '100%';
				wrapper.style.minWidth = '100%';
			}
			if (dropdown) {
				dropdown.style.width = '100%';
				dropdown.style.minWidth = '100%';
			}
			}
		}
		}


	</script>
@endsection