@extends('layouts.user')
@section('title') {{ __('contents.newOtherRental') }} @endsection
@section('style')
<style>
    #map { height: 400px; width: 100%; display: none; }
    .dash-btn-two.disabled {
        opacity: 0.6; /* Decreased opacity */
        pointer-events: none; /* Prevent interaction */
        cursor: no-drop;
    }
    .btn.icon-center {
	  display: inline-flex;
	  align-items: center;
	  justify-content: center;
	}
	.close-btn {
	  position: absolute;
	  top: -10px;
	  left: -10px;
	  background-color: #000;
	  color: #fff;
	  border: none;
	  border-radius: 50%;
	  width: 30px;
	  height: 30px;
	  font-size: 16px;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  cursor: pointer;
	  z-index: 10;
	  transition: background-color 0.3s ease;
	}
	.close-btn:hover {
	  background-color: #333;
	}
	.form-step { display: none; }
    .form-step.active { display: block; }
    #formProgress {
      background-color: #1d3a8c !important;
    }
    .switch.btn-lg{
        min-width: 100% !important;
    }

	/* ... existing styles ... */
    .file-preview-frame {
        /* Always have a 2px border (invisible at first) so adding color later doesn't change size */
        border: 2px solid transparent !important; 
        box-sizing: border-box; 
        transition: all 0.2s ease;
    }
    .file-preview-frame.cover-is-selected {
        /* Just change the color, the size stays the same */
        border-color: #28a745 !important; 
        background-color: #f8fff9;
    }
    .cover-selector-btn {
        cursor: pointer;
        font-size: 12px;
        padding: 4px 10px;
        border-radius: 15px;
        border: 1px solid #ddd;
        background-color: #fff;
        color: #666;
        transition: all 0.2s ease;
        display: inline-block;
        margin-top: 5px;
        min-width: 130px; 
        text-align: center;
    }
    .cover-selector-btn:hover {
        background-color: #f1f1f1;
        border-color: #ccc;
    }
    .cover-selector-btn.active {
        background-color: #28a745;
        border-color: #28a745;
        color: white;
        font-weight: 600;
    }
    .cover-selector-btn i {
        margin-right: 4px;
    }
    .cover-selector-btn.active {
        background-color: #28a745;
        border-color: #28a745;
        color: white;
        box-shadow: 0 2px 6px rgba(40, 167, 69, 0.4);
    }
</style>
@endsection
@section('content')
<h2 class="main-title d-block d-lg-none">{{ __('contents.newOtherRental') }}</h2>
<form method="post" enctype="multipart/form-data"  action="{{ route('user.submit-other-rental') }}">
	@csrf
	<!-- Progress Bar -->
    <div class="progress mb-4">
        <div class="progress-bar" id="formProgress" role="progressbar" 
             style="width: 0%;" aria-valuemin="0" aria-valuemax="100"></div>
    </div>
    <div class="form-step active">
		<div class="bg-white card-box border-20">
			<h4 class="dash-title-three">Address & Location</h4>
			<input type="hidden" name="latitude" id="latitude">
			<input type="hidden" name="longitude" id="longitude">
			<div class="row">
		        <div class="col-md-6 notranslate">
		            <div class="dash-input-wrapper mb-30">
		                <label for="province">{{ __('contents.province') }}*</label>
		                <select name="province" id="province" class="select2" required data-erorr="{{ __('contents.province') }} is required" >
		                	<option value=" "selected disabled> {{ __('contents.selectProvince') }}</option>
		                	@foreach($provinces as $p)
							<option value="{{ $p->code }}"><span class="notranslate">{{ $p->{'name_'.app()->getLocale() } }}</span></option>
							@endforeach
						</select>
		            </div>
		            <!-- /.dash-input-wrapper -->
		        </div>
		        <div class="col-md-6 notranslate">
		            <div class="dash-input-wrapper mb-30" id="district_div">
		                <label for="disctrict">{{ __('contents.district') }}*</label>
		                <select name="district" id="district" class="select2" disabled required data-erorr="{{ __('contents.district') }} is required">
		                	<option value=" " hidden> {{ __('contents.select') }}</option>
						</select>
		            </div>
		            <!-- /.dash-input-wrapper -->
		        </div>
		        <div class="col-md-6 notranslate">
		            <div class="dash-input-wrapper mb-30" id="commune_div">
		                <label for="commune">{{ __('contents.commune') }}*</label>
		                <select name="commune" id="commune" class="select2" disabled required data-erorr="{{ __('contents.commune') }} is required">
		                	<option value=" " hidden> {{ __('contents.select') }}</option>
						</select>
		            </div>
		            <!-- /.dash-input-wrapper -->
		        </div>
		        <div class="col-md-6 notranslate">
		            <div class="dash-input-wrapper mb-30" id="village_div">
		                <label for="village">{{ __('contents.village') }}</label>
		                <select name="village" id="village" class="select2" disabled>
		                	<option value=" " hidden> {{ __('contents.select') }}</option>
						</select>
		            </div>
		            <!-- /.dash-input-wrapper -->
		        </div>
				<div class="col-md-6 notranslate">
                    <div class="dash-input-wrapper mb-25">
                        <label for="street">Street</label>
                        <input type="text" name="street" value="{{ old('street') }}" id="street" placeholder="145/A, Ranchview">
                    </div>
                </div>
                <div class="col-md-6 notranslate">
                    <div class="dash-input-wrapper mb-25">
                        <label for="home">Home</label>
                        <input type="text" name="home" value="{{ old('home') }}" id="home" placeholder="145/A, Ranchview">
                    </div>
                </div>
				{{-- <div class="col-12">
		            <div class="dash-input-wrapper mb-25">
		                <label for="address">Address</label>
		                <input type="text" name="address" value="{{ old('address') }}" id="address" placeholder="145/A, Ranchview">
		            </div>
		        </div> --}}
                <div class="col-12">
                    <div class="dash-input-wrapper mb-25">
                        <label for="address">Address</label>
                        <input type="text" name="address" value="{{ old('address') }}" id="address" placeholder="Address will auto-generate" readonly style="background-color: #f3f4f6; cursor: not-allowed;">
                    </div>
                </div>
			</div>
			<br>
			<label class="d-none" id="map-label" >Drag and Drop the Marker to Select the Location:</label>
			<div id="map"></div>
			<div class="grid">
                <button type="button" class="btn-two btn-block w-100 next-step mt-3">Next</button>
            </div>
		</div>
		<!-- /.card-box -->
	</div>

	<div class="form-step">
		<div class="bg-white card-box border-20 mt-40">
		    <h4 class="dash-title-three">{{ __('contents.overview') }}</h4>
		    <div class="row">
			    <div class="dash-input-wrapper mb-30">
			        <label for="title">Rental Title*</label>
			        <input id="title" type="text" name="title" value="{{ old('title') }}"  placeholder="Your Rental Name" data-error="Rental title is required" required>
			    </div>
			    <!-- /.dash-input-wrapper -->
			    <div class="dash-input-wrapper mb-30">
			        <label for="description">{{ __('contents.descEN') }}</label>
			        <textarea id="description" name="description" class="size-lg" placeholder="Write about Rental..." data-error="{{ __('contents.descEN') }}  is required.">{{ old('description') }}</textarea>
			    </div>
			    <!-- /.dash-input-wrapper -->
		    </div>
		    <div class="row align-items-end">
		    	<input type="hidden" name="type" id="type" value="{{ $type->id }}">
		    			    	@if(empty($variations))
		        <div class="col-md-6">
		            <div class="dash-input-wrapper mb-30">
						<label for="price">Price*<span class="d-none" id="avrPrice"><br><small>{{ __('contents.avrPrice') }}</small></span></label>
		                <input  name="price" id="price" type="number" min="0.01" step="0.01" placeholder="Your Price" value="{{ old('price') }}" required data-error="Price is required.">
		            </div>
		            <!-- /.dash-input-wrapper -->
		        </div>
		        @endif
		        <div class="col-md-6">
		            <div class="dash-input-wrapper mb-30">
						<label for="contact">Contact No.*</label>
		                <input  id="contact" name="contact" type="tel" value="{{ old('contact') }}" placeholder="Your Contact Number." required="required" data-error="Contact No. is required" value="{{ old('contact') }}">
		            </div>
		            <!-- /.dash-input-wrapper -->
		        </div>
		    </div>
		    <div class="row">
                <div class="col-md-6">
                    <button type="button" class="btn btn-one w-100 prev-step mt-3">Previous</button>
                </div>
                <div class="col-md-6">
                    <button type="button" class="btn btn-two w-100 next-step mt-3">Next</button>
                </div>
            </div>
		</div>
		<!-- /.card-box -->
	</div>
	<div class="form-step">
		<div class="bg-white card-box border-20 mt-40">
			<h4 class="dash-title-three">Photo*</h4>
			
			<input type="hidden" name="cover_image" id="cover_image_input" value="">

			<input type="file" id="file-upload" name="gallery[]" multiple required />
			
			<small>Upload file .jpg, .png</small>

			<p id="file-error-msg" class="text-danger mt-2 fw-500" style="font-size: 0.9rem;">
				* Please select at least 5 images to continue.
			</p>

			@if(!empty($variations) || !empty($info) || (!empty($aminites) && count($aminites) > 0 && isset($type) && $type->allow_amenities == 'yes') || !empty($utilities) || !empty($others) )
			<div class="row">
				<div class="col-md-6">
					<button type="button" class="btn btn-one w-100 prev-step mt-3">Previous</button>
				</div>
				<div class="col-md-6">
					<button type="button" id="btn-next-photo" class="btn btn-two w-100 next-step mt-3" disabled>Next</button>
				</div>
			</div>
			@else
			<div class="row">
				<div class="col-md-6">
					<button type="button" class="btn btn-one w-100 prev-step mt-3">Previous</button>
				</div>
				<div class="col-md-6">
					<button type="submit" id="btn-submit-photo" class="btn btn-two w-100 mt-3" disabled>Submit</button>
				</div>
			</div>
			@endif
		</div>
	</div>
	<!-- /.card-box -->




	
	@if(!empty($info))
	<div class="form-step">
		<div class="bg-white card-box border-20 mt-40">
			<h4 class="dash-title-three">{{ __('contents.Rinfo') }}</h4>
			<div class="row align-items-end">
				@if(in_array("Body Type",$info))
				<div class="col-md-6">
		            <div class="dash-input-wrapper mb-30">
		            	<label for="">{{ __('contents.bodyType') }}</label>
		                <select name="info_body_type" class="nice-select">
		                	<option value=" "> {{ __('contents.select') }}</option>
		                	<option>Hatchback</option>
		                	<option>Compact Hatchback</option>
		                	<option>Subcompact Hatchback</option>
		                	<option>Sedan</option>
		                	<option>Compact Sedan</option>
		                	<option>SUV</option>
		                	<option>Compact SUV</option>
		                	<option>Crossover</option>
		                	<option>Mini Van</option>
		                	<option>Van</option>
		                	<option>Micro Van</option>
		                	<option>MPV</option>
		                	<option>Single Cabin</option>
		                	<option>Double Cabin</option>
		                	<option>Pickup</option>
		                	<option>Station Wagon</option>
		                	<option>Mini Vehicles</option>
		                	<option>Truck</option>
		                	<option>Coupe</option>
		                	<option>Convertible</option>
		                	<option>High Roof</option>
		                	<option>Off-Road Vehicles</option>
						</select>
		            </div>
		            <!-- /.dash-input-wrapper -->
		        </div>
		        @endif
		        @if(in_array("Brand",$info))
				<div class="col-md-6">
		            <div class="dash-input-wrapper mb-30">
		            	<label for="">{{ __('contents.brand') }}</label>
		                <input  name="info_brand" value="{{ old('info_brand') }}" placeholder="Enter the Brand">
		            </div>
		            <!-- /.dash-input-wrapper -->
		        </div>
		        @endif
		        @if(in_array("Year of manufacture",$info))
				<div class="col-md-6">
		            <div class="dash-input-wrapper mb-30">
		            	<label for="">{{ __('contents.year') }}</label>
		                <input  name="info_year" value="{{ old('info_year') }}" placeholder="Enter the Make Year">
		            </div>
		            <!-- /.dash-input-wrapper -->
		        </div>
		        @endif
		        @if(in_array("Fuel",$info))
				<div class="col-md-6">
		            <div class="dash-input-wrapper mb-30">
		            	<label for="">{{ __('contents.fuel') }}</label>
		                <input  name="info_fuel" value="{{ old('info_fuel') }}" placeholder="Enter the Fuel Type">
		            </div>
		            <!-- /.dash-input-wrapper -->
		        </div>
		        @endif
		        @if(in_array("Transmission",$info))
				<div class="col-md-6">
		            <div class="dash-input-wrapper mb-30">
		            	<label for="">{{ __('contents.Transmission') }}</label>
		                <select name="info_transmission" class="nice-select">
		                	<option value=" "> {{ __('contents.select') }}</option>
		                	<option>Automatic</option>
		                	<option>Manual</option>
						</select>
		            </div>
		            <!-- /.dash-input-wrapper -->
		        </div>
		        @endif
		    </div>
		    @if(!empty($others) )
		    <div class="row">
                <div class="col-md-6">
                    <button type="button" class="btn btn-one w-100 prev-step mt-3">Previous</button>
                </div>
                <div class="col-md-6">
                    <button type="button" class="btn btn-two w-100 next-step mt-3">Next</button>
                </div>
            </div>
            @else
            <div class="row">
                <div class="col-md-6">
                    <button type="button" class="btn btn-one w-100 prev-step mt-3">Previous</button>
                </div>
                <div class="col-md-6">
                    <button type="submit" class="btn btn-two w-100 mt-3">Submit</button>
                </div>
            </div>
            @endif
		</div>
	</div>
	@endif
	<!-- /.card-box -->

	@if(!empty($others))
	<div class="form-step">
		<div class="bg-white card-box border-20 mt-40">
			<h4 class="dash-title-three">{{ __('contents.otherTerms') }}</h4>
			<div class="row align-items-end">
				@if(in_array("Minimum Deposit",$others))
				<div class="col-md-6">
				    <div class="dash-input-wrapper mb-30">
				        <label for="">{{ __('contents.minimumDeposit') }}</label>
				        <div class="position-relative">
				            <span class="position-absolute top-50 start-0 translate-middle-y ps-3">{{ $settings->currency_symbol }}</span>
				            <input
				            	type="number"
				            	step="0.01"
				            	min="0" 
				            	name="others_minimum_deposit"
				            	value="{{ old('others_minimum_deposit') }}"
				                class="form-control ps-4"
				                style="padding-left: 1.5rem;"
				            >
				        </div>
				    </div>
				    <!-- /.dash-input-wrapper -->
				</div>
		        @endif
		        @if(in_array("Minimal Rental Contract",$others))
			        @if(count($contract_types) > 0)
			        <div class="col-md-6">
			            <div class="dash-input-wrapper mb-30">
			                <label for="">{{ __('contents.minimumRentalContract') }}</label>
			                <select name="others_contract_type" class="nice-select">
			                	<option value=" "> Select Contract Period</option>
			                	@foreach($contract_types as $cType)
								<option value="{{ $cType->id }}">{{ $cType->{'title_' . app()->getLocale()} }}</option>
								@endforeach
							</select>
			            </div>
			            <!-- /.dash-input-wrapper -->
			        </div>
			        @endif
		        @endif
		    </div>
		    <div class="row">
                <div class="col-md-6">
                    <button type="button" class="btn btn-one w-100 prev-step mt-3">Previous</button>
                </div>
                <div class="col-md-6">
                    <button type="submit" class="btn btn-two w-100 mt-3">Submit</button>
                </div>
            </div>
		</div>
	</div>
	@endif
	<!-- /.card-box -->
	
	{{-- <div class="button-group d-inline-flex align-items-center mt-30">
		<button type="submit" id="submit-btn" class="dash-btn-two tran3s me-3 disabled">Submit Rental</button>
		<a href="{{ route('user.dashboard') }}" class="dash-cancel-btn tran3s">Cancel</a>
	</div> --}}	
</form>
@endsection
@section('script')
<script>
	document.addEventListener("DOMContentLoaded", function() {
        let steps = document.querySelectorAll(".form-step");
        let nextBtns = document.querySelectorAll(".next-step");
        let prevBtns = document.querySelectorAll(".prev-step");
        let progressBar = document.getElementById("formProgress");
        let currentStep = 0;

        function showStep(step) {
            steps.forEach((s, index) => {
                s.classList.toggle("active", index === step);
            });
            if(progressBar) {
                progressBar.style.width = ((step+1) / steps.length) * 100 + "%";
            }
        }

        nextBtns.forEach(btn => {
            btn.addEventListener("click", () => {
                let currentFormStep = steps[currentStep];
                let requiredFields = currentFormStep.querySelectorAll("[required]");
                let allValid = true;

                requiredFields.forEach(field => {
                    let value = field.value;
                    if (!value || value.trim() === "") {
                        // get custom error if defined
                        let message = field.getAttribute("data-error");

                        if (!message) {
                            // fallback: get the label text for this field
                            let label = currentFormStep.querySelector(`label[for="${field.id}"]`);
                            let labelText = label ? label.innerText : "This field";
                            message = `${labelText} &nbsp;is required`;
                        }

                        toastr.error(message);

                        // if it's a select2, auto-open so user sees it
                        if ($(field).hasClass("select2")) {
                            $(field).select2("open");
                        }

                        allValid = false;
                    }
                });

                if (allValid && currentStep < steps.length - 1) {
                    currentStep++;
                    showStep(currentStep);
                }
            });
        });



        prevBtns.forEach(btn => {
            btn.addEventListener("click", () => {
                if(currentStep > 0) {
                    currentStep--;
                    showStep(currentStep);
                }
            });
        });

        showStep(currentStep);
    });
    /*$('.select2').select2({
        width: '100%',
        allowClear: true,
        placeholder: "{{ __('contents.select') }}"
    });*/

    $('.select2').select2({
        width: '100%',
        allowClear: true,
        placeholder: "{{ __('contents.select') }}"
    }).each(function() {
        // 1. Add 'translate="no"' to the Select2 container on the page
        $(this).next('.select2-container').attr('translate', 'no');
        
        // 2. Add 'translate="no"' to the actual dropdown menu when it opens
        // This is the most critical step for the options list
    }).on('select2:open', function() {
        $('.select2-dropdown').attr('translate', 'no');
    });

    $('#province').on('change', function () {
        let provinceCode = $(this).val();

        $('#district').empty().append('<option></option>').prop('disabled', true).trigger('change');
        $('#commune').empty().append('<option></option>').prop('disabled', true).trigger('change');
        $('#village').empty().append('<option></option>').prop('disabled', true).trigger('change');
        $('#address').val('');
        $('#latitude, #longitude').val('');

        if (provinceCode) {
            $.ajax({
                url: `{{ route('getDistricts', [':provinceCode']) }}`.replace(':provinceCode', provinceCode),
                type: "GET",
                success: function (res) {
                    $.each(res, function (key, item) {
                    	$('#district').append('<option value="' + item.code + '"><span class="notranslate">' + item.name + '</span></option>');
                    });
                    $('#district').prop('disabled', false).trigger('change');
                }
            });
        }
    });

    $('#district').on('change', function () {
        let districtCode = $(this).val();

        $('#commune').empty().append('<option></option>').prop('disabled', true).trigger('change');
        $('#village').empty().append('<option></option>').prop('disabled', true).trigger('change');
        $('#address').val('');
        $('#latitude, #longitude').val('');

        if (districtCode) {
            $.ajax({
                url: `{{ route('getCommunes', [':districtCode']) }}`.replace(':districtCode', districtCode),
                type: "GET",
                success: function (res) {
                    $.each(res, function (key, item) {
                        $('#commune').append('<option value="' + item.code + '"><span class="notranslate">' + item.name + '</span></option>');
                    });
                    $('#commune').prop('disabled', false).trigger('change');
                }
            });
        }
    });

    
    $('#commune').on('change', function () {
    	let communeCode = $(this).val();
        const provinceText = $('#province option:selected').text().trim();
        const districtText = $('#district option:selected').text().trim();
        const communeText = $('#commune option:selected').text().trim();

        $('#village').empty().append('<option></option>').prop('disabled', true).trigger('change');

        if (provinceText && districtText && communeText) {
            const partialAddress = `${communeText}, ${districtText}, ${provinceText}, Cambodia`;
            geocodeIfCambodia(partialAddress);
        }
        if (communeCode) {
            $.ajax({
                url: `{{ route('getVillages', [':communeCode']) }}`.replace(':communeCode', communeCode),
                type: "GET",
                success: function (res) {
                    $.each(res, function (key, item) {
                        $('#village').append('<option value="' + item.code + '"><span class="notranslate">' + item.name + '</span></option>');
                    });
                    $('#village').prop('disabled', false).trigger('change');
                    $('#map-label').removeClass('d-none').show();
                }
            });
        }
    });

    // Handle Village input
    $('#village').on('change', function () {
        const villageText = $('#village option:selected').text().trim();
        const communeText = $('#commune option:selected').text().trim();
        const districtText = $('#district option:selected').text().trim();
        const provinceText = $('#province option:selected').text().trim();
        $('#address').val('');

        if (villageText && communeText && districtText && provinceText) {
            const partialAddress = `${villageText}, ${communeText}, ${districtText}, ${provinceText}, Cambodia`;
            geocodeIfCambodia(partialAddress);
        }
    });

    $(document).ready(function () {
        function autoGenerateAddress() {
            let addressParts = [];
            // 1. Home
            let home = $('#home').val().trim();
            if (home) addressParts.push("Home " + home);
            // 2. Street
            let street = $('#street').val().trim();
            if (street) addressParts.push("Street " + street);
            // 3. Village / Phum
            let village = $('#village').val() ? $('#village option:selected').text().trim() : '';
            if (village && !village.toLowerCase().includes("select")) addressParts.push(village);
            // 4. Commune / Sangkat
            let commune = $('#commune').val() ? $('#commune option:selected').text().trim() : '';
            if (commune && !commune.toLowerCase().includes("select")) addressParts.push(commune);
            // 5. District / Khan
            let district = $('#district').val() ? $('#district option:selected').text().trim() : '';
            if (district && !district.toLowerCase().includes("select")) addressParts.push(district);
            // 6. Province / City
            let province = $('#province').val() ? $('#province option:selected').text().trim() : '';
            if (province && !province.toLowerCase().includes("select")) addressParts.push(province);
            let finalAddress = addressParts.join(', ');
            $('#address').val(finalAddress);
        }
        let geocodeTimer = null;
    function triggerGeocodeDebounced() {
        clearTimeout(geocodeTimer);
        geocodeTimer = setTimeout(function () {
            $('#address').trigger('blur'); // keep your existing blur logic
        }, 400); 
    }
    $('#home, #street').on('input', function () {
        autoGenerateAddress();
        triggerGeocodeDebounced();
    });
    $('#province, #district, #commune, #village').on('change', function () {
        autoGenerateAddress();
        triggerGeocodeDebounced();
    });
    autoGenerateAddress();
    });

    // Handle Address input
    $('#address').on('blur', function () {
        const addressText = $('#address').val().trim();
        const villageText = $('#village option:selected').text().trim();
        const communeText = $('#commune option:selected').text().trim();
        const districtText = $('#district option:selected').text().trim();
        const provinceText = $('#province option:selected').text().trim();

        if (addressText && communeText && districtText && provinceText) {
            const fullAddress = `${addressText}, ${villageText}, ${communeText}, ${districtText}, ${provinceText}, Cambodia`;
            geocodeIfCambodia(fullAddress);
        }
        $('#submit-btn').removeClass('disabled').removeAttr('disabled');
    });
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=&callback=initMap" async defer></script>
<script>
    let map, marker, geocoder;

    function initMap() {
        geocoder = new google.maps.Geocoder();

        map = new google.maps.Map(document.getElementById('map'), {
            zoom: 16,
            center: { lat: 12.533911, lng: 103.453864 }, // Default center
        });

        marker = new google.maps.Marker({
            position: map.getCenter(),
            map: map,
            draggable: true
        });

        google.maps.event.addListener(marker, 'dragend', function () {
            const pos = marker.getPosition();
            const lat = pos.lat();
            const lng = pos.lng();

            $('#latitude').val(lat);
            $('#longitude').val(lng);

            reverseGeocodeToAddress(lat, lng);
        });
    }

    function reverseGeocodeToAddress(lat, lng) {
        if (!geocoder) geocoder = new google.maps.Geocoder();

        geocoder.geocode(
            { location: { lat: parseFloat(lat), lng: parseFloat(lng) } },
            function (results, status) {
                if (status !== 'OK' || !results || !results.length) return;

                const comps = results[0].address_components || [];
                const country = comps.find(c => c.types.includes('country'));
                if (!country || country.short_name !== 'KH') {
                    Swal.fire({
                        icon: 'error',
                        title: 'Invalid Location',
                        text: 'Please select an address from Cambodia.'
                    });
                    return;
                }
                $('#address').val(results[0].formatted_address);
            }
        );
    }

    function geocodeIfCambodia(address) {
        if (!geocoder) geocoder = new google.maps.Geocoder();

        geocoder.geocode({ address }, function (results, status) {
            if (status === 'OK') {
                const location = results[0].geometry.location;
                const country = results[0].address_components.find(component =>
                    component.types.includes('country')
                );
                if (!country || country.short_name !== 'KH') {
                    Swal.fire({
                        icon: 'error',
                        title: 'Invalid Location',
                        text: 'Please select an address from Cambodia.'
                    });
                    return;
                }
                map.setZoom(18);
                map.setCenter(location);
                marker.setPosition(location);

                $('#latitude').val(location.lat());
                $('#longitude').val(location.lng());
                $('#map').show();
                $('#address').val(results[0].formatted_address);

            } else {
                Swal.fire({
                    icon: 'error',
                    title: 'Geocoding Error',
                    text: 'Geocoding failed: ' + status
                });
            }
        });
    }
</script>
<script>
$(document).ready(function() {

    window.selectCover = function(element) {
        $('.cover-selector-btn').removeClass('active').html('<i class="fa-regular fa-image"></i> Set as Cover');
        $('.file-preview-frame').removeClass('cover-is-selected');

        var $btn = $(element);
        $btn.addClass('active').html('<i class="fa-solid fa-check-circle"></i> Cover Image');

        var $frame = $btn.closest('.file-preview-frame');
        $frame.addClass('cover-is-selected');

        // keep your index logic
        var index = $frame.index();
        $('#cover_image_input').val(index);
    };

    $("#file-upload").fileinput({
        theme: 'fa5',
        showUpload: false,
        showRemove: false,
        showCaption: false,
        allowedFileExtensions: ['jpg', 'jpeg', 'png', 'gif'],
        browseClass: 'btn btn-primary w-100 dash-btn-two',
        browseLabel: 'Upload File',
        layoutTemplates: {
            footer: '<div class="file-thumbnail-footer">\n' +
                '    <div class="file-detail-caption" title="{caption}">{caption}</div>\n' +
                '    <div class="text-center">\n' +
                '       <input type="radio" name="cover_radio" class="d-none cover-radio-input" value="{caption}">\n' +
                '       <div class="cover-selector-btn" onclick="selectCover(this)">\n' +
                '           <i class="fa-regular fa-image"></i> Set as Cover\n' +
                '       </div>\n' +
                '    </div>\n' +
                '    {actions}\n' +
                '</div>'
        }
    });

    function getRealPreviewCount(){
        return $("#file-upload")
            .closest(".file-input")
            .find(".file-preview-frame.krajee-default:not(.file-preview-initial):visible")
            .length;
    }

    $('#file-upload').on('filebatchselected fileselect filecleared loaded.bs.fileinput filedeleted', function() {
        setTimeout(function() {

            var count = getRealPreviewCount();

            if(count >= 5) {
                $('#btn-next-photo, #btn-submit-photo')
                    .prop('disabled', false).removeClass('disabled');

                $('#file-error-msg')
                    .removeClass('text-danger')
                    .addClass('text-success')
                    .html('<i class="fa fa-check"></i> ' + count + ' images selected.');

                if ($('#cover_image_input').val() === "") {
                    var $firstBtn = $('.cover-selector-btn').first();
                    if ($firstBtn.length) window.selectCover($firstBtn[0]);
                }

            } else {
                $('#btn-next-photo, #btn-submit-photo')
                    .prop('disabled', true).addClass('disabled');

                $('#file-error-msg')
                    .removeClass('text-success')
                    .addClass('text-danger')
                    .text('* Please select at least 5 images. (Selected: ' + count + ')');
            }
        }, 150);
    });
});
</script>
<script type="text/javascript">
    var input = document.querySelector("#contact");
    var iti = window.intlTelInput(input, {
        initialCountry: "kh",        // Cambodia
        onlyCountries: ["kh"],       // Restrict to Cambodia
        nationalMode: false,         // Always show +855
        formatOnDisplay: true,
        separateDialCode: false,
        utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/18.1.1/js/utils.js"
    });
    // Allowed total length for Cambodian numbers (including country code)
    const maxLength = 12; // e.g., +855xxxxxxxx
    input.addEventListener("input", function () {
        let value = input.value.replace(/\D/g, ""); 
        if (value.startsWith("855")) {
            value = "+" + value;
        } else if (!value.startsWith("+855")) {
            value = "+855" + value; 
        }
        if (value.length > maxLength + 1) { 
            value = value.slice(0, maxLength + 1);
        }
        input.value = value;
    });
</script>
@endsection