@extends('layouts.admin')
@section('title') {{ __('contents.newRental') }} @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;
    }

    /* 🟢 2. SELECTED STATE */
    .file-preview-frame.cover-is-selected {
        /* Just change the color, the size stays the same */
        border-color: #28a745 !important; 
        background-color: #f8fff9;
    }

    /* 🟢 3. FIX BUTTON WIDTH */
    .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;
        
        /* THIS STOPS THE MOVE: Fixed width for the button */
        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.newRental') }}</h2>
<form method="post" enctype="multipart/form-data" action="{{ route('admin.submit-rental') }}">
    @csrf
    
    <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 p-3">
            <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" translate="no">{{ $p->{'name_'.app()->getLocale() } }}</span></option>
                            @endforeach
                        </select>
                    </div>
                    </div>
                <div class="col-md-6 notranslate">
                    <div class="dash-input-wrapper mb-30" id="district_div">
                        <label for="district">{{ __('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>
                    </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>
                    </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>
                    </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>
    </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">{{ __('contents.propTitleEN') }}*</label>
                        <input type="text" id="title" name="title" value="{{ old('title') }}"  placeholder="Your Property Name" data-error="{{ __('contents.propTitleEN') }}  is required" required>
                    </div>
                    <div class="dash-input-wrapper mb-30">
                        <label for="description">{{ __('contents.descEN') }}</label>
                        <textarea id="description" name="description" class="size-lg" placeholder="Write about property..." data-error="{{ __('contents.descEN') }}  is required.">{{ old('description') }}</textarea>
                    </div>
            </div>
            <div class="row align-items-end">
                <input type="hidden" name="property_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>
                    </div>
                @endif
                <div class="col-md-6">
                    <div class="dash-input-wrapper mb-30">
                        <label for="contact">Contact No.*</label>
                         <input type="tel" placeholder="Your Contact Number." id="contact" name="contact" style="width: 100% !important;" required="required" data-error="Contact No. is required" value="{{ old('contact') }}"  >
                    </div>
                    </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>
    </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 data-error="At least 5 pictures are 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>

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

    @if(!empty($variations))
    <div class="form-step">
        <template id="unit-template">
            <div class="bg-blue border-20 mt-20 position-relative unit-block">
                <button type="button" class="close-btn" style="position:absolute;top:10px;right:10px;">
                    <i class="fa fa-times"></i>
                </button>
                <div class="row">
                    <div class="col-12">
                        <div class="card-box">
                            <div class="row justify-content-center">
                                @if(in_array("ID", $variations))
                                <div class="col-md-3">
                                    <div class="dash-input-wrapper mb-30">
                                        <label>ID*</label>
                                        <input name="variations_id_%%INDEX%%" required>
                                    </div>
                                </div>
                                @endif
                                @if(in_array("Price", $variations))
                                <div class="col-md-3">
                                    <div class="dash-input-wrapper mb-30">
                                        <label>Price*</label>
                                        <input type="number" min="0" name="variations_price_%%INDEX%%" required>
                                    </div>
                                </div>
                                @endif
                                @if(in_array("Floor", $variations))
                                <div class="col-md-3">
                                    <div class="dash-input-wrapper mb-30">
                                        <label>Floor</label>
                                        <input type="number" min="0" name="variations_floor_%%INDEX%%">
                                    </div>
                                </div>
                                @endif
                                @if(in_array("Width", $variations))
                                <div class="col-md-3">
                                    <div class="dash-input-wrapper mb-30">
                                        <label>Width</label>
                                        <input type="number" min="0" name="variations_width_%%INDEX%%">
                                    </div>
                                </div>
                                @endif
                                @if(in_array("Length", $variations))
                                <div class="col-md-3">
                                    <div class="dash-input-wrapper mb-30">
                                        <label>Length</label>
                                        <input type="number" min="0" name="variations_length_%%INDEX%%">
                                    </div>
                                </div>
                                @endif
                                @if(in_array("Area", $variations))
                                <div class="col-md-3">
                                    <div class="dash-input-wrapper mb-30">
                                        <label>Area</label>
                                        <input type="number" min="0" name="variations_area_%%INDEX%%">
                                    </div>
                                </div>
                                @endif
                                @if(in_array("Bedroom", $variations))
                                <div class="col-md-3">
                                    <div class="dash-input-wrapper mb-30">
                                        <label>Bedroom #</label>
                                        <input type="number" min="0" name="variations_bedroom_%%INDEX%%">
                                    </div>
                                </div>
                                @endif
                                @if(in_array("Bathroom", $variations))
                                <div class="col-md-3">
                                    <div class="dash-input-wrapper mb-30">
                                        <label>Bathroom #</label>
                                        <input type="number" min="0" name="variations_bathroom_%%INDEX%%">
                                    </div>
                                </div>
                                @endif
                                @if(in_array("Car Parking", $variations))
                                <div class="col-md-3">
                                    <div class="dash-input-wrapper mb-30">
                                        <label>Car Parking</label>
                                        <input type="number" min="0" name="variations_carParking_%%INDEX%%">
                                    </div>
                                </div>
                                @endif
                                @if(in_array("Motor Parking", $variations))
                                <div class="col-md-3">
                                    <div class="dash-input-wrapper mb-30">
                                        <label>Motor Parking</label>
                                        <input type="number" min="0" name="variations_motorParking_%%INDEX%%">
                                    </div>
                                </div>
                                @endif
                                @if(in_array("Availability", $variations))
                                <div class="col-md-3">
                                    <div class="dash-input-wrapper mb-30">
                                        <label>Availability</label>
                                            <input class="w-100" name="variations_Availability_%%INDEX%%" data-size="lg" value="active" type="checkbox" data-toggle="switchbutton" data-onlabel="<i class='fa-regular fa-check text-white'></i> Yes" data-offlabel="<i class='fa-regular fa-multiply text-danger'></i> No">
                                    </div>
                                </div>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </template>

        <div class="bg-white card-box border-20 mt-40">
            <h4 class="dash-title-three">{{ __('contents.variationHeading') }}</h4>
            <div class="price-div d-none" id="price-div">
                <p>{{ __('contents.startingFrom') }}</p>
                <h5> {{$settings->currency_symbol }} <span id="price-heading"></span> {{ $settings->currency_code }} </h5>
                {{ __('contents.avrPrice') }}
            </div>
            <div class="row align-items-end" id="varitaion_div">
                
            </div>
            <div class="d-grid mt-40">
                <div class="btn btn-dark btn-lg" id="add-unit" ><i class="fa-regular fa-plus me-2"></i>Add Unit</div>
            </div>
            <input type="hidden" name="variation_data" id="variation_data">
            
            <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>
    </div>
    @endif

    @if(!empty($info))
    <div class="form-step">
        <div class="bg-white card-box border-20 mt-40">
            <h4 class="dash-title-three">{{ __('contents.Pinfo') }}</h4>
            <div class="row align-items-end">
                @if(in_array("Container Truck Access",$info))
                <div class="col-md-6">
                    <div class="dash-input-wrapper mb-30">
                        <label for="">{{ __('contents.containerAccess') }}</label>
                        <input type="number"  min="0" name="info_container_access" value="{{ old('info_container_access') }}" placeholder="Enter the Number of Container">
                    </div>
                    </div>
                @endif
                @if(in_array("Rooms",$info))
                <div class="col-md-6">
                    <div class="dash-input-wrapper mb-30">
                        <label for="">{{ __('contents.rooms') }}</label>
                        <input type="number"  min="0" name="info_rooms" value="{{ old('info_rooms') }}" placeholder="Number of Rooms">
                    </div>
                    </div>
                @endif
                @if(in_array("Number of Story",$info))
                <div class="col-md-6">
                    <div class="dash-input-wrapper mb-30">
                        <label for="">{{ __('contents.storyNumber') }}</label>
                        <input type="number"  min="0" name="info_story_number" value="{{ old('info_story_number') }}" placeholder="Enter the Number of Story">
                    </div>
                    </div>
                @endif
                @if(in_array("Bedrooms",$info))
                <div class="col-md-6">
                    <div class="dash-input-wrapper mb-30">
                        <label for="">{{ __('contents.bedrooms') }}</label>
                        <input type="number"  min="0" value="{{ old('info_bedrooms') }}" name="info_bedrooms" placeholder="Number of Bedrooms">
                    </div>
                    </div>
                @endif
                @if(in_array("Bathrooms",$info))
                <div class="col-md-6">
                    <div class="dash-input-wrapper mb-30">
                        <label for="">{{ __('contents.bathrooms') }}</label>
                        <input type="number" min="0" value="{{ old('info_bathrooms') }}" name="info_bathrooms" placeholder="Number of Bathrooms">
                    </div>
                    </div>
                @endif
                @if(in_array("Living Rooms",$info))
                <div class="col-md-6">
                    <div class="dash-input-wrapper mb-30">
                        <label for="">{{ __('contents.livingrooms') }}</label>
                        <input type="number" min="0" value="{{ old('info_livingrooms') }}" name="info_livingrooms" placeholder="Number of Living rooms">
                    </div>
                    </div>
                @endif
                @if(in_array("Kitchen",$info))
                <div class="col-md-4">
                    <div class="dash-input-wrapper mb-30">
                        <label for="">{{ __('contents.kitchen') }}</label>
                        <select name="info_kitchen" class="nice-select">
                            <option value=" "> {{ __('contents.select') }}</option>
                            <option>YES</option>
                            <option>NO</option>
                        </select>
                    </div>
                    </div>
                @endif
                @if(in_array("Balcony",$info))
                <div class="col-md-4">
                    <div class="dash-input-wrapper mb-30">
                        <label for="">{{ __('contents.balcony') }}</label>
                        <select name="info_balcony" class="nice-select">
                            <option value=" "> {{ __('contents.select') }}</option>
                            <option>YES</option>
                            <option>NO</option>
                        </select>
                    </div>
                    </div>
                @endif
                @if(in_array("Furnished",$info))
                <div class="col-md-4">
                    <div class="dash-input-wrapper mb-30">
                        <label for="">{{ __('contents.furnished') }}</label>
                        <select name="info_furnished" class="nice-select">
                            <option value=" "> {{ __('contents.select') }}</option>
                            <option>Fully Furnished</option>
                            <option>Semi Furnished</option>
                            <option>Unfurnished</option>
                        </select>
                    </div>
                    </div>
                @endif
                @if(in_array("Car Parking",$info))
                <div class="col-md-6">
                    <div class="dash-input-wrapper mb-30">
                        <label for="">{{ __('contents.carParking') }}</label>
                        <input type="number" min="0" value="{{ old('info_car_parking') }}" name="info_car_parking" placeholder="Number of Cars">
                    </div>
                    </div>
                @endif
                @if(in_array("Motor Parking",$info))
                <div class="col-md-6">
                    <div class="dash-input-wrapper mb-30">
                        <label for="">{{ __('contents.motorParking') }}</label>
                        <input type="number" min="0" value="{{ old('info_motor_parking') }}" name="info_motor_parking" placeholder="Number of Motors">
                    </div>
                    </div>
                @endif
                @if(in_array("Buliding Width (m)",$info))
                <div class="col-md-6">
                    <div class="dash-input-wrapper mb-30">
                        <label for="">{{ __('contents.bulidingWidth') }}</label>
                        <input type="number" min="0" value="{{ old('info_building_width') }}" name="info_building_width" placeholder="Building Width in Meters">
                    </div>
                    </div>
                @endif
                @if(in_array("Buliding Length (m)",$info))
                <div class="col-md-6">
                    <div class="dash-input-wrapper mb-30">
                        <label for="">{{ __('contents.bulidingLength') }}</label>
                        <input type="number" min="0" value="{{ old('info_building_length') }}" name="info_building_length" placeholder="Building Length in Meters">
                    </div>
                    </div>
                @endif
                @if(in_array("Buliding Total Area (sqm)",$info))
                <div class="col-md-6">
                    <div class="dash-input-wrapper mb-30">
                        <label for="">{{ __('contents.bulidingArea') }}</label>
                        <input type="number" min="0" value="{{ old('info_building_area') }}" name="info_building_area" placeholder="Building Total Area in Meters">
                    </div>
                    </div>
                @endif
                @if(in_array("Land Width (m)",$info))
                <div class="col-md-6">
                    <div class="dash-input-wrapper mb-30">
                        <label for="">{{ __('contents.landWidth') }}</label>
                        <input type="number" min="0" value="{{ old('info_land_width') }}" name="info_land_width" placeholder="Land Width in Meters">
                    </div>
                    </div>
                @endif
                @if(in_array("Land Length (m)",$info))
                <div class="col-md-6">
                    <div class="dash-input-wrapper mb-30">
                        <label for="">{{ __('contents.landLength') }}</label>
                        <input type="number" min="0" value="{{ old('info_land_length') }}" name="info_land_length" placeholder="Land Length in Meters">
                    </div>
                    </div>
                @endif
                @if(in_array("Land Total Area (sqm)",$info))
                <div class="col-md-6">
                    <div class="dash-input-wrapper mb-30">
                        <label for="">{{ __('contents.landArea') }}</label>
                        <input type="number" min="0" value="{{ old('info_land_area') }}" name="info_land_area" placeholder="Land Total Area in Meters">
                    </div>
                    </div>
                @endif
                @if(in_array("Land Zone",$info))
                <div class="col-md-6">
                    <div class="dash-input-wrapper mb-30">
                        <label for="">{{ __('contents.landZone') }}</label>
                        <select name="info_land_zone" class="nice-select">
                            <option value=" "> {{ __('contents.select') }}</option>
                            <option>Residential</option>
                            <option>Commercial</option>
                            <option>Agriculture</option>
                            <option>Development</option>
                            <option>Industrial</option>
                        </select>
                    </div>
                    </div>
                @endif
                @if(in_array("Access Road",$info))
                <div class="col-md-6">
                    <div class="dash-input-wrapper mb-30">
                        <label for="">{{ __('contents.accessRoad') }}</label>
                        <select name="info_access_road" class="nice-select">
                            <option value=" "> {{ __('contents.select') }}</option>
                            <option>YES</option>
                            <option>NO</option>
                        </select>
                    </div>
                    </div>
                @endif
                @if(in_array("Space Width (m)",$info))
                <div class="col-md-6">
                    <div class="dash-input-wrapper mb-30">
                        <label for="">{{ __('contents.spaceWidth') }}</label>
                        <input type="number" min="0" value="{{ old('info_space_width') }}" name="info_space_width" placeholder="Space Width in Meters">
                    </div>
                    </div>
                @endif
                @if(in_array("Space Length (m)",$info))
                <div class="col-md-6">
                    <div class="dash-input-wrapper mb-30">
                        <label for="">{{ __('contents.spaceLength') }}</label>
                        <input type="number" min="0" value="{{ old('info_space_length') }}" name="info_space_length" placeholder="Space Length in Meters">
                    </div>
                    </div>
                @endif
                @if(in_array("Space Total Area (sqm)",$info))
                <div class="col-md-6">
                    <div class="dash-input-wrapper mb-30">
                        <label for="">{{ __('contents.spaceArea') }}</label>
                        <input type="number" min="0" value="{{ old('info_space_area') }}" name="info_space_area" placeholder="Space Area in SQM">
                    </div>
                    </div>
                @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="button" class="btn btn-two w-100 next-step mt-3">Next</button>
                </div>
            </div>
        </div>
    </div>
    @endif

    @if(count($aminites) > 0 && $type->allow_amenities == 'yes' )
    <div class="form-step">
        <div class="bg-white card-box border-20 mt-40">
            <h4 class="dash-title-three m0 pb-5">Select Amenities</h4>
            <ul class="style-none d-flex flex-wrap filter-input">
                @foreach($aminites as $aminity)
                <li>
                    <input type="checkbox" name="amenities[]" value="{{ $aminity->id }}">
                    <label>{{ $aminity->{'title_'.app()->getLocale()} }}</label>
                </li>
                @endforeach
            </ul>
            
            <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>
    </div>
    @endif

    @if(!empty($utilities))
    <div class="form-step">
        <div class="bg-white card-box border-20 mt-40">
            <h4 class="dash-title-three">{{ __('contents.PU') }}</h4>
            <div class="row align-items-end">
                @if(in_array("Electricity (phase / Amperes)",$utilities))
                <div class="col-md-12 mb-20">
                    <div class="row" style="border: 1px solid #ccc; border-radius: 20px;">
                        <div class="col-md-6 mb-10">
                            <div class="dash-input-wrapper ">
                                <label for="">{{ __('contents.Phase') }}</label>
                                <select name="utilities_phase" class="nice-select">
                                    <option value=" "> {{ __('contents.select') }}</option>
                                    <option>1 Ph</option>
                                    <option>3 Ph</option>
                                </select>
                            </div>
                            </div>
                        <div class="col-md-6 mb-10">
                            <div class="dash-input-wrapper">
                                <label for="">{{ __('contents.Amperes') }}</label>
                                <div class="position-relative">
                                    <span class="position-absolute top-50 start-0 translate-middle-y ps-3">(A)</span>
                                    <input
                                        type="number"
                                        step="0.01"
                                        min="0" 
                                        name="utilities_electricity_price"
                                        value="{{ old('utilities_amperes') }}"
                                        class="form-control ps-4"
                                        style="padding-left: 3rem !important;"
                                    >
                                </div>
                            </div>
                            </div>
                    </div>
                </div>
                @endif

                @if(in_array("Electricity price (per kWh)",$utilities))
                <div class="col-md-6">
                    <div class="dash-input-wrapper mb-30">
                        <label for="">{{ __('contents.electricityPrice') }}</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="utilities_electricity_price"
                                value="{{ old('utilities_electricity_price') }}"
                                class="form-control ps-4"
                                style="padding-left: 1.5rem;"
                            >
                        </div>
                    </div>
                    </div>
                @endif

                @if(in_array("Garbage price (per month)",$utilities))
                <div class="col-md-6">
                    <div class="dash-input-wrapper mb-30">
                        <label for="">{{ __('contents.garbagePrice') }}</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="utilities_garbage_price"
                                value="{{ old('utilities_garbage_price') }}"
                                class="form-control ps-4"
                                style="padding-left: 1.5rem;"
                            >
                        </div>
                    </div>
                    </div>
                @endif

                @if(in_array("Water price (per month)",$utilities))
                <div class="col-md-6">
                    <div class="dash-input-wrapper mb-30">
                         <label for="">{{ __('contents.waterPrice') }}</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="utilities_water_price" 
                                value="{{ old('utilities_water_price') }}"
                                class="form-control ps-4"
                                style="padding-left: 1.5rem;"
                            >
                        </div>
                    </div>
                    </div>
                @endif

                @if(in_array("Internet / Cable Price (per month)",$utilities))
                <div class="col-md-6">
                    <div class="dash-input-wrapper mb-30">
                         <label for="">{{ __('contents.cablePrice') }}</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="utilities_cable_price" 
                                value="{{ old('utilities_cable_price') }}"
                                class="form-control ps-4"
                                style="padding-left: 1.5rem;"
                            >
                        </div>
                    </div>
                    </div>
                @endif

                @if(in_array("Cleaning (per month)",$utilities))
                <div class="col-md-6">
                    <div class="dash-input-wrapper mb-30">
                         <label for="">{{ __('contents.cleaningPrice') }}</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="utilities_cleaning_price" 
                                value="{{ old('utilities_cleaning_price') }}"
                                class="form-control ps-4"
                                style="padding-left: 1.5rem;"
                            >
                        </div>
                    </div>
                    </div>
                @endif

                @if(in_array("Security (per month)",$utilities))
                <div class="col-md-6">
                    <div class="dash-input-wrapper mb-30">
                         <label for="">{{ __('contents.securityPrice') }}</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="utilities_security_price" 
                                value="{{ old('utilities_security_price') }}"
                                class="form-control ps-4"
                                style="padding-left: 1.5rem;"
                            >
                        </div>
                    </div>
                    </div>
                @endif

                @if(in_array("Car / Motor Parking (per month)",$utilities))
                <div class="col-md-6">
                    <div class="dash-input-wrapper mb-30">
                         <label for="">{{ __('contents.parkingPrice') }}</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="utilities_parking_price" 
                                value="{{ old('utilities_parking_price') }}"
                                class="form-control ps-4"
                                style="padding-left: 1.5rem;"
                            >
                        </div>
                    </div>
                    </div>
                @endif

                @if(in_array("Management Fee (per month)",$utilities))
                <div class="col-md-6">
                    <div class="dash-input-wrapper mb-30">
                        <label for="">{{ __('contents.managementFee') }}</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="utilities_management_price" 
                                value="{{ old('utilities_management_price') }}" 
                                class="form-control ps-4"
                                style="padding-left: 1.5rem;"
                            >
                        </div>
                    </div>
                    </div>
                @endif
                @if(in_array("Other",$utilities))
                <div class="col-md-6">
                    <div class="dash-input-wrapper mb-30">
                        <label for="">{{ __('contents.other') }}</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="utilities_other_price" 
                                value="{{ old('utilities_other_price') }}" 
                                class="form-control ps-4"
                                style="padding-left: 1.5rem;"
                            >
                        </div>
                    </div>
                    </div>
                @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="button" class="btn btn-two w-100 next-step mt-3">Next</button>
                </div>
            </div>
        </div>
    </div>
    @endif

    
    <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">
                
                <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>
                    </div>

                @if(isset($contract_types) && 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 }}" {{ old('others_contract_type') == $cType->id ? 'selected' : '' }}>
                                {{ $cType->{'title_' . app()->getLocale()} }}
                            </option>
                            @endforeach
                        </select>
                    </div>
                    </div>
                @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>

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

    $(document).ready(function () {
        let unitIndex = 0;

        function addUnit() {
            unitIndex++;
            let template = $('#unit-template').html();
            let rendered = template.replaceAll('%%INDEX%%', unitIndex);

            const $rendered = $(rendered);

            // Remove close button for the first unit only
            if (unitIndex === 1) {
                $rendered.find('.close-btn').remove();
            }

            $('#varitaion_div').append($rendered);
        }

        // Add first unit by default
        addUnit();

        $('#add-unit').on('click', function () {
            addUnit();
        });

        $(document).on('click', '.close-btn', function () {
            $(this).closest('.unit-block').remove();
        });

        $('form').on('submit', function (e) {
            const units = [];
            let valid = true;

            $('.unit-block').each(function () {
                const unit = {};
                $(this).find('input').each(function () {
                    const name = $(this).attr('name');
                    const value = $(this).val();
                    const key = name.split('_')[1];
                    unit[key] = value;

                    if ((key === 'id' || key === 'price') && !value) {
                        valid = false;
                        $(this).css('border', '1px solid red');
                    } else {
                        $(this).css('border', '');
                    }
                });
                units.push(unit);
            });

            if (!valid) {
                e.preventDefault(); // prevent form submission
                toastr.error("Please fill in all required fields in each unit.");
                Swal.fire({
                    icon: 'error',
                    title: 'Validation Error',
                    text: 'Please fill in all required fields in each unit.',
                });
                return false;
            }

            $('#variation_data').val(JSON.stringify(units));
        });
    });
</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');
                }
            });
        }
    });

    
    // ---------------------------------------------------------
    // 1. COMMUNE CHANGE: Load Villages & Move Map to Commune
    // ---------------------------------------------------------
    $('#commune').on('change', function () {
        let communeCode = $(this).val();
        
        // Get text for Geocoding (e.g. "Toul Tom Pung 1")
        const provinceText = $('#province option:selected').text().trim();
        const districtText = $('#district option:selected').text().trim();
        const communeText = $('#commune option:selected').text().trim();

        // Clear Village dropdown & Address input
        $('#village').empty().append('<option value="" hidden>{{ __("contents.select") }}</option>').prop('disabled', true);
        $('#address').val(''); 

        // Move Map to Commune Level immediately so user sees the general area
        if (provinceText && districtText && communeText) {
            const partialAddress = `${communeText}, ${districtText}, ${provinceText}, Cambodia`;
            geocodeIfCambodia(partialAddress);
        }

        // Fetch Villages via AJAX
        if (communeCode) {
            $.ajax({
                url: `{{ route('getVillages', [':communeCode']) }}`.replace(':communeCode', communeCode),
                type: "GET",
                dataType: "json",
                success: function (res) {
                    if (res && res.length > 0) {
                        $.each(res, function (key, item) {
                            // Helper to check for English name, then standard name
                            let optionText = item.name_en || item.name || 'Unknown';
                            
                            // IMPORTANT: Get Lat/Lng from DB response (if available)
                            let lat = item.latitude || ''; 
                            let lng = item.longitude || '';

                            // Append option with data attributes for coordinates
                            $('#village').append(`<option value="${item.code}" data-lat="${lat}" data-lng="${lng}"><span class="notranslate">${optionText}</span></option>`);
                        });
                        
                        // Notify Select2 to update the list
                        $('#village').prop('disabled', false).trigger('change.select2'); 
                    }
                    $('#map-label').removeClass('d-none').show();
                }
            });
        }
    });

    // ---------------------------------------------------------
    // 2. VILLAGE CHANGE: Catch Specific Village Location
    // ---------------------------------------------------------
    $('#village').on('change', function () {
        // Get the selected option element to read its data attributes
        const selectedOption = $(this).find('option:selected');
        
        const villageText = selectedOption.text().trim();
        const communeText = $('#commune option:selected').text().trim();
        const districtText = $('#district option:selected').text().trim();
        const provinceText = $('#province option:selected').text().trim();
        
        // Priority 1: Use Database Coordinates (Most Accurate & Instant)
        const lat = selectedOption.data('lat');
        const lng = selectedOption.data('lng');

        if (lat && lng) {
            // Update Map directly using coordinates
            const newLatLng = new google.maps.LatLng(lat, lng);
            marker.setPosition(newLatLng);
            map.setCenter(newLatLng);
            map.setZoom(17); // Zoom in closer for Village level
            
            // Fill hidden inputs
            $('#latitude').val(lat);
            $('#longitude').val(lng);
            $('#map').show();
            google.maps.event.trigger(map, 'resize');
        } 
        else {
            if (villageText && communeText) {
                const fullAddress = `${villageText}, ${communeText}, ${districtText}, ${provinceText}, Cambodia`;
                geocodeIfCambodia(fullAddress);
            }
        }
        $('#address').val(''); 
    });

    $(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'); 
            }, 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);
        }
        $.ajax({
            url: '/get-average-price',
            method: 'GET',
            data: {
                latitude: $('#latitude').val(),
                longitude: $('#longitude').val(),
                type: $('#type').val(),
            },
            success: function (response) {
                if(response.starting_from == false ){
                    if(response.average_price > 0){
                        $('#price').val(Number(response.average_price).toFixed(2));
                        $('#avrPrice').removeClass('d-none');
                    }else{
                        $('#avrPrice').addClass('d-none');
                    }
                }
                if(response.starting_from == true ){
                    if(response.average_price > 0){
                        $('#price-div').removeClass('d-none');
                        $('#price-heading').html(Number(response.average_price).toFixed(2));
                    }else{
                        $('#price-div').addClass('d-none');
                    }
                }
            },
            error: function (err) {
                console.error(err);
            }
        });
        $('#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 () {
        // 1. Initialize the Plugin
        $("#file-upload").fileinput({
            showUpload: false,
            showRemove: false,
            showCaption: false,
            overwriteInitial: false, // Allows appending files (if supported by your version)
            //allowedFileExtensions: ['jpg', 'jpeg', 'png', 'gif', 'mp4'],
            allowedFileExtensions: ['jpg', 'jpeg', 'png'],
            previewFileType: 'image',
            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' +
                '       \n' +
                '       <input type="radio" name="cover_radio" class="d-none cover-radio-input" value="{caption}">\n' +
                '       \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>'
        }
    });

    // 🟢 ADD THIS: Function to handle the click
    window.selectCover = function(element) {
        // Reset state
        $('.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 button and frame
        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');

        // Update hidden input
        var $radio = $frame.find('.cover-radio-input');
        $radio.prop('checked', true);
        $('#cover_image_input').val($radio.val());
    };

    // 🟢 ADD THIS: Auto-select first image if none selected
    $('#file-upload').on('filebatchselected', function(event, files) {
        setTimeout(function() {
            if (!$('#cover_image_input').val()) {
                var $firstBtn = $('.cover-selector-btn').first();
                if ($firstBtn.length) { window.selectCover($firstBtn[0]); }
            }
            // Call your existing validation function here
            if (typeof validateImageCount === "function") { validateImageCount(); }
        }, 500);
    });

        // 2. Define the Validation Function
        function validateImageCount() {
            // Get the count of files from the plugin
            // 'getFilesCount' is a method provided by the bootstrap-fileinput plugin
            var fileCount = $('#file-upload').fileinput('getFilesCount');
            
            // Fallback: If getFilesCount returns 0 but files exist in the input stack (common in some versions)
            if(fileCount === 0 && $('#file-upload')[0].files.length > 0) {
                 fileCount = $('#file-upload')[0].files.length;
            }

            const $nextBtn = $('#btn-next-photo');
            const $errorMsg = $('#file-error-msg');

            if (fileCount >= 5) {
                // Enable Button
                $nextBtn.prop('disabled', false).removeClass('disabled');
                $errorMsg.removeClass('text-danger').addClass('text-success')
                         .html('<i class="fa fa-check"></i> ' + fileCount + ' images selected.');
            } else {
                // Disable Button
                $nextBtn.prop('disabled', true).addClass('disabled');
                $errorMsg.removeClass('text-success').addClass('text-danger')
                         .text('* Please select at least 5 images. (Selected: ' + fileCount + ')');
            }
        }

        // 3. Listen to Plugin Events
        // 'filebatchselected' = when files are selected via browse
        // 'fileselect' = when a single file is selected
        // 'filecleared' = when the clear/remove button is clicked
        // 'filedeleted' = when a specific preview item is deleted
        $('#file-upload').on('filebatchselected fileselect filecleared filedeleted', function(event) {
            // Use a small timeout to ensure the plugin has updated its internal stack
            setTimeout(validateImageCount, 100);
        });
    });
</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

    // Restrict input as the user types
    input.addEventListener("input", function () {
        let value = input.value.replace(/\D/g, ""); // Remove non-digits
        if (value.startsWith("855")) {
            value = "+" + value;
        } else if (!value.startsWith("+855")) {
            value = "+855" + value; // Force +855
        }

        // Enforce max length
        if (value.length > maxLength + 1) { // + sign is extra
            value = value.slice(0, maxLength + 1);
        }

        input.value = value;
    });
</script>
@endsection