@extends('layouts.admin')
@section('title') {{ __('contents.newOtherRental') }} @endsection
@section('style')
<style>
     /* --- GENERAL STYLES --- */
    #map { height: 400px; width: 100%; display: none; }
    
    .dash-btn-two.disabled {
        opacity: 0.6;
        pointer-events: none;
        cursor: no-drop;
    }
    
    .btn.icon-center {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .form-step { display: none; }
    .form-step.active { display: block; }
    #formProgress { background-color: #1d3a8c !important; }
    
    .switch.btn-lg { min-width: 100% !important; }

    /* Close Button */
    .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; }

    /* --- FILE PREVIEW STYLES --- */
    .file-preview-frame {
        box-sizing: border-box;
        border: 2px solid transparent !important; /* Default border */
        border-radius: 12px;
        box-shadow: 0 2px 5px rgba(0,0,0,0.05);
        transition: all 0.2s ease-in-out;
        margin: 8px;
        padding: 0;
        overflow: hidden;
        background: #fff;
        display: inline-block;
        vertical-align: top;
        width: 260px;
    }

    .file-preview-frame.cover-is-selected {
        border-color: #28a745 !important;
        background-color: #f0fff4;
    }

    .file-thumbnail-footer {
        background: #fff;
        padding: 10px;
        border-top: 1px solid #f8f9fa;
    }

    .file-detail-caption {
        font-size: 11px;
        color: #999;
        margin-bottom: 6px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Cover Button */
    .cover-selector-btn {
        cursor: pointer;
        display: block;
        width: 100%;
        padding: 6px 10px;
        margin-bottom: 8px;
        border-radius: 50px; 
        border: 1px solid #e0e0e0;
        background-color: #f8f9fa;
        color: #666;
        font-size: 12px;
        font-weight: 600;
        text-align: center;
        transition: all 0.2s ease;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        min-height: 34px; 
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .cover-selector-btn:hover {
        background-color: #e2e6ea;
        border-color: #ccc;
    }

    .cover-selector-btn.active {
        background-color: #28a745;
        border-color: #28a745;
        color: white;
        box-shadow: 0 2px 6px rgba(40, 167, 69, 0.4);
    }

    .file-preview-thumbnails {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: flex-start !important; 
        align-items: flex-start !important;
    }
    
    .file-preview {
        text-align: left !important;
    }
</style>
@endsection
@section('content')

@php
$village = "";
if(!empty($rental->village)){
	$village = \App\Models\Village::where('code',$rental->village)->first();
}
$commune = \App\Models\Commune::where('code',$rental->commune)->first();
$district = \App\Models\District::where('code',$rental->district)->first();
$province = \App\Models\Province::where('code',$rental->province)->first();

$prop_info = json_decode($rental->Info);
$prop_others = json_decode($rental->others);
@endphp
<h2 class="main-title d-block d-lg-none">{{ __('contents.newOtherRental') }}</h2>
<form method="post" enctype="multipart/form-data"  action="{{ route('admin.update-other-rental') }}">
	@csrf
	<div class="bg-white card-box border-20">
		<h4 class="dash-title-three">Address & Location</h4>
		<input type="hidden" name="latitude" id="latitude" value="{{ $rental->latitude}}" >
		<input type="hidden" name="longitude" id="longitude" value="{{ $rental->longitude }}" >
		<input type="hidden" name="rental" value="{{ $rental->id }}" >
		<div class="row">
	        <div class="col-md-6 notranslate">
	            <div class="dash-input-wrapper mb-30">
	                <label for="">{{ __('contents.province') }}*</label>
	                <select name="province" id="province" class="select2" >
	                	<option value=" "selected disabled> {{ __('contents.selectProvince') }}</option>
	                	@foreach($provinces as $p)
						<option value="{{ $p->code }}" selected ><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="">{{ __('contents.district') }}*</label>
	                <select name="district" id="district" class="select2">
	                	<option value=" " hidden> {{ __('contents.select') }}</option>
	                	@foreach($districts as $d)
						<option value="{{ $d->code }}" selected ><span class="notranslate">{{ $d->{'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="commune_div">
	                <label for="">{{ __('contents.commune') }}*</label>
	                <select name="commune" id="commune" class="select2" >
	                	<option value=" " hidden> {{ __('contents.select') }}</option>
	                	@foreach($communes as $c)
						<option value="{{ $c->code }}" selected ><span class="notranslate">{{ $c->{'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="village_div">
	                <label for="">{{ __('contents.village') }}</label>
	                <select name="village" id="village" class="select2" >
	                	<option value=" " hidden> {{ __('contents.select') }}</option>
	                	@foreach($villages as $v)
						<option value="{{ $v->code }}" selected ><span class="notranslate">{{ $v->{'name_'.app()->getLocale() } }}</span></option>
						@endforeach
					</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', $rental->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', $rental->home) }}" id="home" placeholder="145/A, Ranchview">
				</div>
			</div>
			<div class="col-12">
	            <div class="dash-input-wrapper mb-25">
	                <label for="">Address*</label>
	                <input type="text" name="address" value="{{ $rental->address }}" id="address" placeholder="145/A, Ranchview">
	            </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>
	<!-- /.card-box -->

	<div class="bg-white card-box border-20 mt-40">
	    <h4 class="dash-title-three">{{ __('contents.overview') }}</h4>
	    <ul class="nav nav-tabs w-100" role="tablist">
			<li class="nav-item" role="presentation">
				<button type="button" class="nav-link active" data-bs-toggle="tab" data-bs-target="#fc1" role="tab">English</button>
			</li>
			<li class="nav-item" role="presentation">
				<button type="button" class="nav-link" data-bs-toggle="tab" data-bs-target="#fc2" role="tab">Khmer</button>
			</li>
		</ul>
		<div class="tab-content mt-30">
			<div class="tab-pane show active" role="tabpanel" id="fc1">
				<div class="dash-input-wrapper mb-30">
			        <label for="">{{ __('contents.propTitleEN') }}*</label>
			        <input type="text" name="title_en" value="{{ $rental->title_en }}"  placeholder="Your Rental Name" required>
			    </div>
			    <!-- /.dash-input-wrapper -->
			    <div class="dash-input-wrapper mb-30">
			        <label for="">{{ __('contents.descEN') }}</label>
			        <textarea name="description_en" class="size-lg" placeholder="Write about Rental...">{{ $rental->description_en }}</textarea>
			    </div>
			    <!-- /.dash-input-wrapper -->
			</div>
			<!-- /.tab-pane -->
			<div class="tab-pane" role="tabpanel" id="fc2">
				<div class="dash-input-wrapper mb-30">
			        <label for="">{{ __('contents.propTitleKM') }}</label>
			        <input type="text" name="title_km" value="{{ $rental->title_km }}"  placeholder="Your Rental Name">
			    </div>
			    <!-- /.dash-input-wrapper -->
			    <div class="dash-input-wrapper mb-30">
			        <label for="">{{ __('contents.descKM') }}</label>
			        <textarea name="description_km" class="size-lg" placeholder="Write about Rental...">{{ $rental->description_km }}</textarea>
			    </div>
			    <!-- /.dash-input-wrapper -->
			</div>
			<!-- /.tab-pane -->
		</div>
	    
	    <div class="row align-items-end">
	    	<input type="hidden" name="type" id="type" value="{{ $type->id }}">
	    		        <div class="col-md-6">
	            <div class="dash-input-wrapper mb-30">
					<label for="">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="{{ $rental->price }}" required>
	            </div>
	            <!-- /.dash-input-wrapper -->
	        </div>
	        <div class="col-md-6">
	            <div class="dash-input-wrapper mb-30">
					<label for="">Contact No.*</label>
	                <input  name="contact" type="tel" value="{{ $rental->contact }}" placeholder="Your Contact Number." required>
	            </div>
	            <!-- /.dash-input-wrapper -->
	        </div>
	    </div>
	</div>
	<!-- /.card-box -->
	@if(!empty($rental->gallery))
	@php
	$gallery = json_decode($rental->gallery);
	$imgs = getMediaByType($rental->id,'image','rental');
	$videos = getMediaByType($rental->id,'video','rental');
	@endphp
	@endif
	<div class="bg-white card-box border-20 mt-40">
        <h4 class="dash-title-three">Photo</h4>
        
        <input type="hidden" name="image" id="cover_image_input" value="{{ $rental->image }}">
        <input type="file" id="file-upload" name="gallery[]"  multiple />
        
        <small>Upload file .jpg, .png</small>
    </div>
	<!-- /.card-box -->




		@if(!empty($info))
	<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="{{ $prop_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="{{ $prop_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="{{ $prop_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>
	</div>
	@endif
	<!-- /.card-box -->

		@if(!empty($others))
	<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="{{ $prop_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($contract_types->count() > 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 }}" selected >{{ $cType->{'title_' . app()->getLocale()} }}</option>
							@endforeach
						</select>
		            </div>
		            <!-- /.dash-input-wrapper -->
		        </div>
		        @endif
	        @endif
	    </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">Submit Rental</button>
		<a href="{{ route('admin.dashboard') }}" class="dash-cancel-btn tran3s">Cancel</a>
	</div>	
</form>
@endsection
@section('script')
<script>
    /*$('.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);
        }
    });

    // 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;

	function initMap() {
	    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 position = marker.getPosition();
	        $('#latitude').val(position.lat());
	        $('#longitude').val(position.lng());
	    });
	}

	function geocodeIfCambodia(address) {
	    const 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(26);
	            map.setCenter(location);
	            marker.setPosition(location);
	            $('#latitude').val(location.lat());
	            $('#longitude').val(location.lng());
	            $('#map').show();
	        } else {
	            Swal.fire({
	                icon: 'error',
	                title: 'Geocoding Error',
	                text: 'Geocoding failed: ' + status
	            });
	        }
	    });
	}
</script>
<script>
$(document).ready(function () {
    // ----------------------------
    // 1) Init Fileinput + Cover Button in Footer
    // ----------------------------
    $("#file-upload").fileinput({
        theme: 'fa5',
        showUpload: false,
        showRemove: false,
        showCaption: false,
        overwriteInitial: false,
        allowedFileExtensions: ['jpg', 'jpeg', 'png'],
        previewFileType: 'any',
        browseClass: 'btn btn-primary w-100 dash-btn-two',
        browseLabel: 'Upload File',

        // 🟢 LIMIT CONFIG
        maxFileCount: 5,            
        validateInitialCount: true, 
        msgFilesTooMany: "Number of files selected for upload ({n}) exceeds maximum allowed limit of {m}. Please retry your upload!",

        // TEMPLATES
        layoutTemplates: {
            footer:
                '<div class="file-thumbnail-footer">\n' +
                '  <div class="file-detail-caption" title="{caption}">{caption}</div>\n' +
                '  <div class="text-center mt-2">\n' +
                '    \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>'
        },

        // PREVIEW DATA
        initialPreview: [
                    ],
        initialPreviewAsData: true,

        initialPreviewConfig: [
                    ],
    });

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

        // activate clicked
        const $btn = $(element);
        const $frame = $btn.closest('.file-preview-frame');

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

        // store filename from radio
        const filename = $frame.find('.cover-radio-input').val();
        $('#cover_image_input').val(filename);
        console.log("Selected cover: " + filename);
    };

    // ----------------------------
    // 3) Auto apply current cover from DB
    // ----------------------------
    function applySavedCover() {
        const saved = $('#cover_image_input').val(); // filename
        if (!saved) return;

        $('.cover-radio-input').each(function () {
            if ($(this).val() === saved) {
                const btn = $(this).siblings('.cover-selector-btn')[0];
                if (btn) window.selectCover(btn);
            }
        });
    }

    // ----------------------------
    // 4) If no cover saved → auto select first image
    // ----------------------------
    function autoSelectFirstIfEmpty() {
        if ($('#cover_image_input').val()) return;

        const $firstBtn = $('.file-preview-frame:visible').first().find('.cover-selector-btn');
        if ($firstBtn.length) window.selectCover($firstBtn[0]);
    }

    // Apply on load with slight delay for rendering
    setTimeout(function(){
        applySavedCover();
        autoSelectFirstIfEmpty();
    }, 800);

    // ----------------------------
    // 5) Validation / Cleanup
    // ----------------------------
    $('#file-upload').on('filedeleted filesuccessremove', function () {
        setTimeout(function () {
            const saved = $('#cover_image_input').val();
            let stillExists = false;
            $('.cover-radio-input').each(function(){
                if($(this).val() === saved) stillExists = true;
            });
            if(!stillExists) {
                $('#cover_image_input').val('');
                autoSelectFirstIfEmpty();
            }
        }, 500);
    });

    // Auto-Select newly uploaded files
    $('#file-upload').on('filebatchselected', function(event, files) {
        setTimeout(function() {
            if (!$('#cover_image_input').val()) {
                autoSelectFirstIfEmpty();
            }
        }, 500);
    });
});
</script>
@endsection