@extends('layouts.user')
@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('user.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" required data-error="{{ __('contents.province') }} is required">
                        <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>
            </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" required data-error="{{ __('contents.district') }} is required">
                        <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>
            </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" required data-error="{{ __('contents.commune') }} is required">
                        <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>
            </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>
            </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" required data-error="Address is required">
                </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>

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

    @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>
        
        {{-- 🟢 FIX 1: POPULATE EXISTING COVER IMAGE --}}
        <input type="hidden" name="cover_image" id="cover_image_input" value="{{ $rental->thumbnail ?? $rental->cover_image ?? '' }}">

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

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

        @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>
            </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>
                </div>
                @endif
            @endif
        </div>
    </div>
    @endif
    
    <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('user.dashboard') }}" class="dash-cancel-btn tran3s">Cancel</a>
    </div>  
</form>
@endsection

@section('script')
<script>
    // --- 1. Select2 Init ---
    $('.select2').select2({
        width: '100%',
        allowClear: true,
        placeholder: "{{ __('contents.select') }}"
    }).each(function() {
        $(this).next('.select2-container').attr('translate', 'no');
    }).on('select2:open', function() {
        $('.select2-dropdown').attr('translate', 'no');
    });

    // --- 2. Location Logic ---
    $('#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');
        
        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();
                }
            });
        }
    });

    $('#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);
        }
    });

    $('#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() {
        const lat = parseFloat($('#latitude').val()) || 12.533911;
        const lng = parseFloat($('#longitude').val()) || 103.453864;
        map = new google.maps.Map(document.getElementById('map'), {
            zoom: 16,
            center: { lat: lat, lng: lng },
        });
        marker = new google.maps.Marker({
            position: { lat: lat, lng: lng },
            map: map,
            draggable: true
        });
        $('#map').show(); // Show map immediately if editing

        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(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;
                }
                map.setZoom(26);
                map.setCenter(location);
                marker.setPosition(location);
                $('#latitude').val(location.lat());
                $('#longitude').val(location.lng());
                $('#map').show();
            }
        });
    }
</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