@extends('layouts.vertical', ['title' => 'Edit Property'])

@section('content')

<!-- Start Content-->
<div class="container-fluid">

<div class="py-3 d-flex align-items-sm-center flex-sm-row flex-column">
    <div class="flex-grow-1">
        <h4 class="fs-18 fw-semibold m-0">Edit Property - {{ $property->ref_id }}</h4>
    </div>
</div>

<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <h5 class="card-title mb-0">Property Information</h5>
            </div>

            <div class="card-body">
                <!-- Multi-tab Navigation -->
                <ul class="nav nav-tabs nav-justified" id="propertyTabs" role="tablist">
                    <li class="nav-item" role="presentation">
                        <button class="nav-link active" id="details-tab" data-bs-toggle="tab" data-bs-target="#details" type="button" role="tab" aria-controls="details" aria-selected="true">
                            <i class="mdi mdi-home me-1"></i> Details
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="descriptions-tab" data-bs-toggle="tab" data-bs-target="#descriptions" type="button" role="tab" aria-controls="descriptions" aria-selected="false">
                            <i class="mdi mdi-text me-1"></i> Descriptions
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="pricing-tab" data-bs-toggle="tab" data-bs-target="#pricing" type="button" role="tab" aria-controls="pricing" aria-selected="false">
                            <i class="mdi mdi-currency-eur me-1"></i> Pricing
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="features-tab" data-bs-toggle="tab" data-bs-target="#features" type="button" role="tab" aria-controls="features" aria-selected="false">
                            <i class="mdi mdi-star me-1"></i> Features
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="pictures-tab" data-bs-toggle="tab" data-bs-target="#pictures" type="button" role="tab" aria-controls="pictures" aria-selected="false">
                            <i class="mdi mdi-image me-1"></i> Pictures
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="documents-tab" data-bs-toggle="tab" data-bs-target="#documents" type="button" role="tab" aria-controls="documents" aria-selected="false">
                            <i class="mdi mdi-file-document me-1"></i> Documents
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="address-tab" data-bs-toggle="tab" data-bs-target="#address" type="button" role="tab" aria-controls="address" aria-selected="false">
                            <i class="mdi mdi-map-marker me-1"></i> Address
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="contacts-tab" data-bs-toggle="tab" data-bs-target="#contacts" type="button" role="tab" aria-controls="contacts" aria-selected="false">
                            <i class="mdi mdi-account me-1"></i> Contacts
                        </button>
                    </li>
                </ul>

                <!-- Tab Content -->
                <div class="tab-content mt-4" id="propertyTabsContent">
                    <!-- Tab 1: Details -->





                    <div class="tab-pane fade show active" id="details" role="tabpanel" aria-labelledby="details-tab">
                        <x-form.form id="detailsForm" method="POST" action="{{ route('properties.update', $property->id) }}">
                            @method('PUT')
                            <div class="row">
                                <div class="col-md-6">
                                    <x-form.input
                                        name="ref_id"
                                        label="Reference ID"
                                        :required="true"
                                        :value="$property->ref_id"
                                        help="Leave empty to auto-generate"
                                    />
                                </div>
                                <div class="col-md-6">
                                    <x-form.select
                                        name="status_id"
                                        label="Status"
                                        :options="['' => 'Select Status'] + \App\Models\Property::$statuses"
                                        :required="true"
                                        :value="$property->status_id"
                                    />
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-6">
                                    <x-form.select
                                        name="country_id"
                                        label="Country"
                                        placeholder="Select Country"
                                        :options="$countries->pluck('name', 'id')->toArray()"
                                        :required="true"
                                        :value="$property->country_id"
                                    />
                                </div>
                                <div class="col-md-6">
                                    <x-form.select
                                        name="state_id"
                                        label="Province/State"
                                        placeholder="Select Province/State"
                                        :options="$states->pluck('name', 'id')->toArray()"
                                        :required="true"
                                        :value="$property->state_id"
                                    />
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-6">
                                    <x-form.select
                                        name="city_id"
                                        label="City"
                                        placeholder="Select City"
                                        :options="$cities->pluck('name', 'id')->toArray()"
                                        :required="true"
                                        :value="$property->city_id"
                                    />
                                </div>
                                <div class="col-md-6">
                                    <div class="row">
                                        <div class="col-md-9">
                                            <label for="area_id" class="form-label">Area <span class="text-danger">*</span></label>
                                            <x-form.select
                                                name="area_id"
                                                placeholder="Select Area"
                                                class="w-100"
                                                :options="$areas->pluck('name', 'id')->toArray()"
                                                :required="true"
                                                :value="$property->area_id"
                                            />
                                        </div>
                                        <div class="col-md-3 d-flex align-items-end mb-3">
                                            <button type="button" class="btn btn-outline-primary w-100" id="addAreaBtn">
                                                <i class="mdi mdi-plus"></i> Add Area
                                            </button>
                                        </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-6">
                                    <x-form.select
                                        name="property_type_id"
                                        label="Property Type"
                                        placeholder="Select Type"
                                        :options="$propertyTypes->pluck('name', 'id')->toArray()"
                                        :required="true"
                                        :value="$property->property_type_id"
                                    />
                                </div>
                                <div class="col-md-6">
                                    <x-form.select
                                        name="property_sub_type_id"
                                        label="Sub Type"
                                        placeholder="Select Sub Type"
                                        :options="[]"
                                        :value="$property->property_sub_type_id"
                                    />
                                </div>
                            </div>

                            <!-- Commercial Options Row (only visible when Commercial is selected) -->
                            <div id="commercial-options" class="row" style="display: {{ in_array($property->property_type_id, [24, 29]) ? '' : 'none' }};">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label">Property Ownership</label>
                                        <div class="form-check mb-2">
                                            <input type="hidden" name="is_freehold" value="N">
                                            <input class="form-check-input" type="checkbox" id="is_freehold" name="is_freehold" value="Y"
                                                {{ $property->is_freehold == 'Y' ? 'checked' : '' }}>
                                            <label class="form-check-label" for="is_freehold">Freehold</label>
                                        </div>
                                        <div class="form-check">
                                            <input type="hidden" name="is_leasehold" value="N">
                                            <input class="form-check-input" type="checkbox" id="is_leasehold" name="is_leasehold" value="Y"
                                                {{ $property->is_leasehold == 'Y' ? 'checked' : '' }}>
                                            <label class="form-check-label" for="is_leasehold">Leasehold</label>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="property_sub_type_id2" class="form-label">Sub Type (Commercial)</label>
                                        <select class="form-select" id="property_sub_type_id2" name="property_sub_type_id2">
                                            <option value="">Select Commercial Sub Type</option>
                                        </select>
                                    </div>
                                </div>
                            </div>


                            <div id="building-beds-baths-section" style="display: {{ $property->property_type_id == 24 ? 'none' : '' }}">

                                <div class="row">
                                    <div class="col-md-3">
                                        <x-form.input
                                            name="beds"
                                            label="Bedrooms"
                                            type="number"
                                            :min="0"
                                            :value="$property->beds"
                                        />
                                    </div>
                                    <div class="col-md-3">
                                        <x-form.input
                                            name="baths"
                                            label="Bathrooms"
                                            type="number"
                                            :min="0"
                                            :value="$property->baths"
                                        />
                                    </div>
                                    <div class="col-md-3">
                                        <x-form.select
                                            name="completed_status_id"
                                            label="Completion Status"
                                            :options="$completedStatuses"
                                            placeholder="Select Status"
                                            :value="$property->completed_status_id"
                                        />
                                    </div>
                                    <div class="col-md-3">
                                        <x-form.select
                                            name="completed_year"
                                            label="Year Built"
                                            :options="$builtYears"
                                            placeholder="Select Year"
                                            :value="$property->completed_year"
                                        />
                                    </div>

                                </div>
                                <div class="row" id="completed_month_group" style="display: {{ in_array($property->completed_status_id, [2, 3]) ? '' : 'none' }};">
                                    <div class="col-md-9">
                                        {{-- To balance --}}
                                    </div>
                                    <div class="col-md-3">
                                        <x-form.select
                                            name="completed_month"
                                            label="Completion Month"
                                            :options="$months"
                                            placeholder="Select Month"
                                            :value="$property->completed_month"
                                        />
                                    </div>
                                </div>

                            </div>

                            <!-- Building Details Section -->
                            <div id="building-details-section" style="display: {{ $property->property_type_id == 24 ? 'none' : '' }}">
                                <h5 class="mt-3">Building Details</h5>

                                <div class="row">

                                    <div class="col-md-3">
                                        <x-form.input
                                            name="floors"
                                            label="Floors"
                                            type="number"
                                            :min="0"
                                            :value="$property->floors"
                                        />
                                    </div>
                                    <div class="col-md-3">
                                        <x-form.input
                                            name="levels"
                                            label="Levels"
                                            type="number"
                                            :min="0"
                                            :value="$property->levels"
                                        />
                                    </div>
                                    <div class="col-md-3">
                                        <x-form.input
                                            name="storeys"
                                            label="Storeys"
                                            type="number"
                                            :min="0"
                                            :value="$property->storeys"
                                        />
                                    </div>

                                    <div class="col-md-3">
                                        <x-form.input
                                            name="properties_in_building"
                                            label="No. Of Properties In Building"
                                            type="number"
                                            :min="0"
                                            :value="$property->properties_in_building"
                                        />
                                    </div>
                                </div>

                            </div>

                            <!-- Area Section -->
                            <div id="area-section">
                                <h5 class="mt-3">Area</h5>

                                <div class="row">
                                    <div class="col-md-6 mb-3">
                                        <x-form.select
                                            name="dimensions_type_id"
                                            label="Dimensions Type"
                                            :options="$dimensionsTypes"
                                            :value="$property->dimensions_type_id"
                                        />
                                    </div>

                                    <div class="col-md-6 mb-3">
                                        <x-form.input
                                            name="area_built"
                                            label="Built"
                                            type="number"
                                            :min="0"
                                            :value="$property->area_built"
                                        />
                                    </div>

                                    <div class="col-md-6 mb-3" id="area_terrace_group" style="display: {{ $property->property_type_id == 24 ? 'none' : 'block' }}">
                                        <x-form.input
                                            name="area_terrace"
                                            label="Terrace"
                                            type="number"
                                            :min="0"
                                            :value="$property->area_terrace"
                                        />
                                    </div>

                                    <div class="col-md-6 mb-3" id="area_total_group" style="display: {{ $property->property_type_id == 24 ? 'none' : 'block' }}">
                                        <x-form.input
                                            name="area_total"
                                            label="Total Size"
                                            type="number"
                                            :min="0"
                                            :value="$property->area_total"
                                        />
                                    </div>

                                    <div class="col-md-6 mb-3" id="area_plot_group">
                                        <x-form.input
                                            name="area_plot"
                                            label="{{ $property->property_type_id == 24 ? 'Plot' : 'Garden/Plot' }}"
                                            type="number"
                                            :min="0"
                                            :value="$property->area_plot"
                                        />
                                    </div>

                                    <div class="col-md-6 mb-3" id="area_floor_group" style="display: {{ $property->property_type_id == 24 ? 'none' : 'block' }}">
                                        <x-form.input
                                            name="area_floor"
                                            label="Int. Floor Space"
                                            type="number"
                                            :min="0"
                                            :value="$property->area_floor"
                                        />
                                    </div>
                                </div>
                            </div>








                            <!-- Energy Section -->
                            <div id="energy-section" style="display: {{ $property->property_type_id == 24 ? 'none' : '' }}">
                                <h5 class="mt-1">Energy Rating</h5>

                                <div class="row">
                                    <div class="col-md-6 mb-3">
                                        <x-form.input
                                            name="co2_emissions"
                                            label="CO2 Emissions"
                                            type="number"
                                            :min="0"
                                            :value="$property->co2_emissions"
                                        />
                                    </div>

                                    <div class="col-md-6 mb-3">
                                        <x-form.select
                                            name="co2_emissions_letter"
                                            label="Letter"
                                            :options="\App\Models\Property::$energy_letters"
                                            placeholder="Please Select"
                                            :value="$property->co2_emissions_letter"
                                        />
                                    </div>

                                    <div class="col-md-6 mb-3">
                                        <x-form.input
                                            name="energy_consumption"
                                            label="Energy Consumption"
                                            type="number"
                                            :min="0"
                                            :value="$property->energy_consumption"
                                        />
                                    </div>

                                    <div class="col-md-6 mb-3">
                                        <x-form.select
                                            name="energy_consumption_letter"
                                            label="Letter"
                                            :options="\App\Models\Property::$energy_letters"
                                            placeholder="Please Select"
                                            :value="$property->energy_consumption_letter"
                                        />
                                    </div>

                                </div>
                            </div>









                            <!-- Property Options -->
                            <div class="row">
                                <div class="col-md-12">
                                    <h5 class="mt-1">Property Options</h5>
                                    <div class="row">
                                        <div class="col-md-2">
                                            <x-form.checkbox
                                                name="is_published"
                                                label="Published"
                                                :checked="$property->is_published == 'Y'"
                                            />
                                        </div>
                                        <div class="col-md-2">
                                            <x-form.checkbox
                                                name="is_featured"
                                                label="Featured"
                                                :checked="$property->is_featured == 'Y'"
                                            />
                                        </div>

                                        <div class="col-md-2">
                                            <x-form.checkbox
                                                name="nota_simple"
                                                label="Nota Simple"
                                                :checked="$property->nota_simple == 'Y'"
                                            />
                                        </div>
                                        <div class="col-md-2">
                                            <x-form.checkbox
                                                name="ibi_receipt"
                                                label="IBI Receipt"
                                                :checked="$property->ibi_receipt == 'Y'"
                                            />
                                        </div>
                                        <div class="col-md-4">
                                            <x-form.checkbox
                                                name="first_occupancy_licence"
                                                label="First Occupancy Licence / AFO"
                                                :checked="$property->first_occupancy_licence == 'Y'"
                                            />
                                        </div>

                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-12">
                                    <h5 class="mt-3">Agency Information</h5>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-3">
                                    <x-form.input
                                        name="agency_ref"
                                        label="Agency Ref"
                                        :value="$property->agency_ref"
                                    />
                                </div>
                                <div class="col-md-3">
                                    <x-form.input
                                        name="long_term_ref"
                                        label="Long Term Ref"
                                        :value="$property->long_term_ref"
                                    />
                                </div>
                                <div class="col-md-3">
                                    <x-form.input
                                        name="short_term_ref"
                                        label="Short Term Ref"
                                        :value="$property->short_term_ref"
                                    />
                                </div>
                                <div class="col-md-3">
                                    <x-form.input
                                        name="rental_license_ref"
                                        label="Rental License Ref"
                                        :value="$property->rental_license_ref"
                                    />
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-12">
                                    <x-form.textarea
                                        name="notes_for_agencies"
                                        label="Notes for Agencies"
                                        :rows="3"
                                        :value="$property->notes_for_agencies"
                                    />
                                </div>
                            </div>

                            <div class="text-end">
                                <x-form.button
                                    type="submit"
                                    variant="primary"
                                    icon="mdi mdi-content-save"
                                >
                                    Update Details
                                </x-form.button>
                            </div>
                        </div>
                        </x-form.form>
                    </div>








                    <!-- Tab 2: Descriptions -->
                    <div class="tab-pane fade" id="descriptions" role="tabpanel" aria-labelledby="descriptions-tab">


                        <x-form.form id="descriptionsForm" method="POST">
                            <div class="row">
                                <div class="col-md-12">
                                    <h6 class="mb-3">Multilingual Descriptions</h6>

                                    @php
                                        $descByLang = $property->descriptions->keyBy('language_id');
                                    @endphp

                                    <!-- Language Tabs (Dynamic) -->
                                    <ul class="nav nav-pills mb-3" id="languageTabs" role="tablist">
                                        @foreach(($languages ?? collect()) as $index => $language)
                                            <li class="nav-item" role="presentation">
                                                <button class="nav-link {{ $index === 0 ? 'active' : '' }}" id="lang-{{ $language->id }}-tab" data-bs-toggle="pill" data-bs-target="#lang-{{ $language->id }}" type="button" role="tab">
                                                    <img src="{{ asset('images/flags/' . strtolower($language->code) . '.png') }}" width="20" class="me-1" onerror="this.style.display='none'"> {{ $language->name }}
                                                </button>
                                            </li>
                                        @endforeach
                                    </ul>

                                    <div class="tab-content" id="languageTabsContent">
                                        @foreach(($languages ?? collect()) as $index => $language)
                                            <div class="tab-pane fade {{ $index === 0 ? 'show active' : '' }}" id="lang-{{ $language->id }}" role="tabpanel">
                                                <x-form.textarea
                                                    name="descriptions[{{ $language->id }}]"
                                                    label="Description ({{ $language->name }})"
                                                    :rows="8"
                                                    :value="$descByLang->get($language->id)->description ?? ''"
                                                    placeholder="Enter property description in {{ $language->name }}..."
                                                />
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            </div>

                            <div class="text-end">
                                <x-form.button
                                    type="submit"
                                    variant="primary"
                                    icon="mdi mdi-content-save"
                                >
                                    Save Descriptions
                                </x-form.button>
                            </div>
                        </x-form.form>


                    </div>

                    <!-- Tab 3: Pricing -->
                    <div class="tab-pane fade" id="pricing" role="tabpanel" aria-labelledby="pricing-tab">
                        @php
                            $pricing = $property->pricing;
                        @endphp
                        <x-form.form id="pricingForm" method="POST">
                            <!-- Prices Tab Accordions -->
                            <div class="accordion" id="pricesAccordion">
                                <!-- For Sale Accordion -->
                                <div class="accordion-item mb-3">
                                    <h2 onclick="$('#is_for_sale').prop('checked', !$('#is_for_sale').prop('checked'));" class="accordion-header" id="headingForSale">
                                        <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseForSale" aria-expanded="true" aria-controls="collapseForSale">
                                            <input onclick="$('#is_for_sale').prop('checked', !$('#is_for_sale').prop('checked'));" type="checkbox" name="is_for_sale" id="is_for_sale" value="Y" {{ $property->is_for_sale == 'Y' ? 'checked' : '' }}> &nbsp; For Sale
                                        </button>
                                    </h2>

                                    <div id="collapseForSale" class="accordion-collapse {{ $property->is_for_sale == 'Y' ? '' : 'collapse' }}" aria-labelledby="headingForSale">
                                        <div class="accordion-body">
                                            <div class="row">
                                                <div class="col-md-4">
                                                    <x-form.input name="sale_price" label="Sale Price" type="number" :min="0" :step="0.01" append="€" :value="$pricing->sale_price ?? null" />
                                                </div>
                                            </div>

                                            <div class="row mb-2">
                                                <div class="col-12">
                                                    <strong>Commissions</strong>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-md-4">
                                                    <x-form.input name="comission" label="Comission" type="number" :min="0" :step="0.01" append="€" :value="$pricing->comission ?? null" />
                                                </div>
                                                <div class="col-md-4">
                                                    <x-form.input name="listing_agent_comission" label="Listing Agent Comission" type="number" :min="0" :step="0.01" append="€" :value="$pricing->listing_agent_comission ?? null" />
                                                </div>
                                                <div class="col-md-4">
                                                    <x-form.input name="selling_agent_comission" label="Selling Agent Comission" type="number" :min="0" :step="0.01" append="€" :value="$pricing->selling_agent_comission ?? null" />
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-md-4">
                                                    <x-form.input name="comission_percentage" type="number" :min="0" :step="0.01" class="w-50" append="%" :value="$pricing->comission_percentage ?? null" />
                                                </div>
                                                <div class="col-md-4">
                                                    <x-form.input name="listing_agent_percentage" type="number" :min="0" :step="0.01" class="w-50" append="%" :value="$pricing->listing_agent_percentage ?? null" />
                                                </div>
                                                <div class="col-md-4">
                                                    <x-form.input name="selling_agent_percentage" type="number" :min="0" :step="0.01" class="w-50" append="%" :value="$pricing->selling_agent_percentage ?? null" />
                                                </div>
                                            </div>

                                            <div class="row">
                                                <div class="col-md-12">
                                                    <x-form.textarea name="comission_notes" label="Comission Notes" :rows="3" :value="$pricing->comission_notes ?? null" />
                                                </div>
                                            </div>

                                            <div class="row mb-2">
                                                <div class="col-12">
                                                    <strong>Valuations</strong>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-md-6">
                                                    <x-form.input name="net_price" readonly label="Net Price" type="number" :min="0" :step="0.01" append="€" :value="$pricing->net_price ?? null" />
                                                </div>
                                                <div class="col-md-6">
                                                    <x-form.input name="min_price" label="Minimum Price" type="number" :min="0" :step="0.01" append="€" help="(Minimum Net Price Vendor Will Accept)" :value="$pricing->min_price ?? null" />
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-md-4">
                                                    <x-form.input name="valution" label="Valution" type="number" :min="0" :step="0.01" append="€" :value="$pricing->valution ?? null" />
                                                </div>
                                                <div class="col-md-4">
                                                    <x-form.input name="valution_year" label="Valution Year" type="number" :min="0" :value="$pricing->valution_year ?? null" />
                                                </div>
                                                <div class="col-md-4">
                                                    <x-form.input name="deed_value" label="Deed Value" type="number" :min="0" :step="0.01" append="€" :value="$pricing->deed_value ?? null" />
                                                </div>

                                            </div>

                                            <div class="row mb-2">
                                                <div class="col-12">
                                                    <strong>Taxes</strong>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-md-4 mb-3">
                                                    <x-form.input name="community_fee" label="Community Fees" type="number" :min="0" :step="0.01" append="€ / month" :value="$pricing->community_fee ?? null" />
                                                </div>
                                                <div class="col-md-4 mb-3">
                                                    <x-form.input name="garbage_tax" label="Garbage Tax" type="number" :min="0" :step="0.01" append="€ / year" :value="$pricing->garbage_tax ?? null" />
                                                </div>
                                                <div class="col-md-4 mb-3">
                                                    <x-form.input name="ibi_fee" label="IBI Fees" type="number" :min="0" :step="0.01" append="€ / year" :value="$pricing->ibi_fee ?? null" />
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- For Rent Accordion -->
                                <div class="accordion-item">
                                    <h2 class="accordion-header" onclick="$('#is_for_rent').prop('checked', !$('#is_for_rent').prop('checked'));" id="headingForRent">
                                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseForRent" aria-expanded="false" aria-controls="collapseForRent">
                                            <input onclick="$('#is_for_rent').prop('checked', !$('#is_for_rent').prop('checked'));" type="checkbox" name="is_for_rent" id="is_for_rent" value="Y" {{ $property->is_for_rent == 'Y' ? 'checked' : '' }}> &nbsp; For Rent
                                        </button>
                                    </h2>
                                    <div id="collapseForRent" class="accordion-collapse {{ $property->is_for_rent == 'Y' ? '' : 'collapse' }}" aria-labelledby="headingForRent">
                                        <div class="accordion-body">
                                            <!-- Sub-Accordion for Rent Types -->
                                            <div class="accordion" id="rentSubAccordion">
                                                <!-- Long Term -->
                                                <div class="accordion-item mb-3">
                                                    <h2 class="accordion-header" onclick="$('#is_for_rent_lt').prop('checked', !$('#is_for_rent_lt').prop('checked'));" id="headingRentLT">
                                                        <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseRentLT" aria-expanded="true" aria-controls="collapseRentLT">
                                                            <input onclick="$('#is_for_rent_lt').prop('checked', !$('#is_for_rent_lt').prop('checked'));" type="checkbox" name="is_for_rent_lt" id="is_for_rent_lt" value="Y" {{ $property->is_for_rent_lt == 'Y' ? 'checked' : '' }} /> &nbsp; For Rent - Long Term
                                                        </button>
                                                    </h2>
                                                    <div id="collapseRentLT" class="accordion-collapse  {{ $property->is_for_rent_lt == 'Y' ? '' : 'collapse' }}" aria-labelledby="headingRentLT">
                                                        <div class="accordion-body">
                                                            <div class="row mb-3">
                                                                <div class="col-md-4">
                                                                    <x-form.input name="rent_lt" label="Rent" append="€" type="number" :min="0" :step="0.01" :value="$pricing->rent_lt ?? null" />
                                                                </div>
                                                                <div class="col-md-4">
                                                                    <x-form.input name="security_deposit_lt" label="Security Deposit" append="€" type="number" :min="0" :step="0.01" :value="$pricing->security_deposit_lt ?? null" />
                                                                </div>
                                                            </div>
                                                            <div class="row">

                                                                <div class="col-md-4">
                                                                    <x-form.input name="comission_lt" label="Comission" append="€" type="number" :min="0" :step="0.01" :value="$pricing->comission_lt ?? null" />
                                                                </div>

                                                                <div class="col-md-4">
                                                                    <x-form.input name="comission_listing_agent_lt" label="Listing Agent" append="€" type="number" :min="0" :step="0.01" :value="$pricing->comission_listing_agent_lt ?? null" />
                                                                </div>

                                                                <div class="col-md-4">
                                                                    <x-form.input name="comission_selling_agent_lt" label="Selling Agent" append="€" type="number" :min="0" :step="0.01" :value="$pricing->comission_selling_agent_lt ?? null" />
                                                                </div>

                                                            </div>
                                                            <div class="row">

                                                                <div class="col-md-4">
                                                                    <x-form.input name="percentage_lt" label="Percentage"  append="%" type="number"  :min="0" :step="0.01" :value="$pricing->percentage_lt ?? null" />
                                                                </div>

                                                                <div class="col-md-4">
                                                                    <x-form.input name="comission_listing_agent_percentage_lt" label="Listing Agent Percentage" append="%" type="number" :min="0" :step="0.01" :value="$pricing->comission_listing_agent_percentage_lt ?? null" />
                                                                </div>

                                                                <div class="col-md-4">
                                                                    <x-form.input name="comission_selling_agent_percentage_lt" label="Selling Agent Percentage"  append="%" type="number" :min="0" :step="0.01" :value="$pricing->comission_selling_agent_percentage_lt ?? null" />
                                                                </div>

                                                            </div>

                                                            <div class="row">
                                                                <div class="col-md-12 mt-3">
                                                                    <x-form.textarea name="comission_notes_lt" label="Comission Notes" :rows="3" :value="$pricing->comission_notes_lt ?? null" />
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>

                                                <!-- Short Term -->
                                                <div class="accordion-item">
                                                    <h2 class="accordion-header" onclick="$('#is_for_rent_st').prop('checked', !$('#is_for_rent_st').prop('checked'));" id="headingRentST">
                                                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseRentST" aria-expanded="false" aria-controls="collapseRentST">
                                                            <input onclick="$('#is_for_rent_st').prop('checked', !$('#is_for_rent_st').prop('checked'));" type="checkbox" name="is_for_rent_st" id="is_for_rent_st" value="Y" {{ $property->is_for_rent_st == 'Y' ? 'checked' : '' }} /> &nbsp; For Rent - Short Term
                                                        </button>
                                                    </h2>
                                                    <div id="collapseRentST" class="accordion-collapse  {{ $property->is_for_rent_st == 'Y' ? '' : 'collapse' }}" aria-labelledby="headingRentST">
                                                        <div class="accordion-body">
                                                            <!-- Low Season -->
                                                            <div class="mb-2"><strong>Low Season</strong></div>
                                                            <div class="row">
                                                                <div class="col-md-4">
                                                                    <x-form.input name="rent_st_ls" label="Rent" type="number" :min="0" :step="0.01" append="€" :value="$pricing->rent_st_ls ?? null" />
                                                                </div>
                                                            </div>
                                                            <div class="row">
                                                                <div class="col-md-4">
                                                                    <x-form.input name="comission_st_ls" label="Comission" type="number" :min="0" :step="0.01" append="€" :value="$pricing->comission_st_ls ?? null" />
                                                                </div>
                                                                <div class="col-md-4">
                                                                    <x-form.input name="comission_listing_agent_st_ls" label="Listing Agent" type="number" :min="0" :step="0.01" append="€" :value="$pricing->comission_listing_agent_st_ls ?? null" />
                                                                </div>
                                                                <div class="col-md-4">
                                                                    <x-form.input name="comission_selling_agent_st_ls" label="Selling Agent" type="number" :min="0" :step="0.01" append="€" :value="$pricing->comission_selling_agent_st_ls ?? null" />
                                                                </div>

                                                                <div class="col-md-4">
                                                                    <x-form.input class="w-50" name="percentage_st_ls" label="Percentage" type="number" :min="0" :step="0.01" append="%" :value="$pricing->percentage_st_ls ?? null" />
                                                                </div>
                                                                <div class="col-md-4">
                                                                    <x-form.input class="w-50" name="comission_listing_agent_percentage_st_ls" label="Listing Agent Percentage" type="number" :min="0" :step="0.01" append="%" :value="$pricing->comission_listing_agent_percentage_st_ls ?? null" />
                                                                </div>
                                                                <div class="col-md-4">
                                                                    <x-form.input class="w-50" name="comission_selling_agent_percentage_st_ls" label="Selling Agent Percentage" type="number" :min="0" :step="0.01" append="%" :value="$pricing->comission_selling_agent_percentage_st_ls ?? null" />
                                                                </div>
                                                            </div>

                                                            <!-- High Season -->
                                                            <div class="mb-2 mt-3"><strong>High Season</strong></div>
                                                            <div class="row">
                                                                <div class="col-md-4">
                                                                    <x-form.input name="rent_st_hs" label="Rent" type="number" :min="0" :step="0.01" append="€" :value="$pricing->rent_st_hs ?? null" />
                                                                </div>
                                                            </div>
                                                            <div class="row">
                                                                <div class="col-md-4">
                                                                    <x-form.input name="comission_st_hs" label="Comission" type="number" :min="0" :step="0.01" append="€" :value="$pricing->comission_st_hs ?? null" />
                                                                </div>
                                                                <div class="col-md-4">
                                                                    <x-form.input name="comission_listing_agent_st_hs" label="Listing Agent" type="number" :min="0" :step="0.01" append="€" :value="$pricing->comission_listing_agent_st_hs ?? null" />
                                                                </div>
                                                                <div class="col-md-4">
                                                                    <x-form.input name="comission_selling_agent_st_hs" label="Selling Agent" type="number" :min="0" :step="0.01" append="€" :value="$pricing->comission_selling_agent_st_hs ?? null" />
                                                                </div>

                                                                <div class="col-md-4">
                                                                    <x-form.input class="w-50" name="percentage_st_hs" label="Percentage" type="number" :min="0" :step="0.01" append="%" :value="$pricing->percentage_st_hs ?? null" />
                                                                </div>
                                                                <div class="col-md-4">
                                                                    <x-form.input class="w-50" name="comission_listing_agent_percentage_st_hs" label="Listing Agent Percentage" type="number" :min="0" :step="0.01" append="%" :value="$pricing->comission_listing_agent_percentage_st_hs ?? null" />
                                                                </div>
                                                                <div class="col-md-4">
                                                                    <x-form.input class="w-50" name="comission_selling_agent_percentage_st_hs" label="Selling Agent Percentage" type="number" :min="0" :step="0.01" append="%" :value="$pricing->comission_selling_agent_percentage_st_hs ?? null" />
                                                                </div>
                                                            </div>

                                                            <!-- Notes after both seasons -->
                                                            <div class="row mt-3">
                                                                <div class="col-md-12">
                                                                    <x-form.textarea name="comission_notes_st" label="Comission Notes" :rows="3" :value="$pricing->comission_notes_st ?? null" />
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="row mt-3">
                                                    <div class="col-md-3">

                                                        <x-form.checkbox
                                                            name="bank_guarantee_required"
                                                            label="Bank Gurantee Required"
                                                            value="Y"
                                                            :checked="$property->bank_guarantee_required == 'Y'"
                                                        />

                                                    </div>
                                                    <div class="col-md-3">

                                                        <x-form.checkbox
                                                            name="references_required"
                                                            label="References Required"
                                                            value="Y"
                                                            :checked="$property->references_required == 'Y'"
                                                        />

                                                    </div>
                                                    <div class="col-md-3">

                                                        <x-form.checkbox
                                                            name="smoking_allowed"
                                                            label="Smoking Allowed"
                                                            value="Y"
                                                            :checked="$property->smoking_allowed == 'Y'"
                                                        />

                                                    </div>
                                                    <div class="col-md-3">

                                                        <x-form.checkbox
                                                            name="pets_allowed"
                                                            label="Pets Allowed"
                                                            value="Y"
                                                            :checked="$property->pets_allowed == 'Y'"
                                                        />

                                                    </div>
                                                </div>

                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="text-end mt-3">
                                <x-form.button
                                    type="submit"
                                    variant="primary"
                                    icon="mdi mdi-content-save"
                                >
                                    Save Pricing
                                </x-form.button>
                            </div>
                        </x-form.form>
                    </div>

                    <!-- Tab 4: Features -->
                    <div class="tab-pane fade" id="features" role="tabpanel" aria-labelledby="features-tab">


                        <x-form.form id="featuresForm" method="POST">
                            <div class="row">
                                <div class="col-md-12">
                                    <h6 class="mb-3">Property Features</h6>

                                    @foreach($features['parents'] as $parentId => $parentFeature)
                                        <div class="mb-4">
                                            <h6 class="mb-3 fw-bold">{{ $parentFeature->name }}</h6>
                                            <div class="row">
                                                @if(isset($features['grouped'][$parentId]) && count($features['grouped'][$parentId]) > 0)
                                                    @foreach($features['grouped'][$parentId] as $childFeature)
                                                        <div class="col-md-3 mb-2">
                                                            <x-form.checkbox
                                                                name="features[]"
                                                                :value="$childFeature->id"
                                                                :label="$childFeature->name"
                                                                :id="'feature_' . $childFeature->id"
                                                                :checked="$property->features->contains($childFeature->id)"
                                                            />
                                                        </div>
                                                    @endforeach
                                                @endif
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            </div>

                            <div class="text-end">
                                <x-form.button
                                    type="submit"
                                    variant="primary"
                                    icon="mdi mdi-content-save"
                                >
                                    Save Features
                                </x-form.button>
                            </div>
                        </x-form.form>


                    </div>

                    <!-- Tab 5: Pictures -->
                    <div class="tab-pane fade" id="pictures" role="tabpanel" aria-labelledby="pictures-tab">
                        <div class="row">
                            <div class="col-md-12">
                                <h6 class="mb-3">Property Images</h6>

                                <!-- Drag and Drop Zone -->
                                <div id="imageDropZone" class="border border-2 border-dashed rounded p-5 text-center mb-4" style="min-height: 200px; background-color: #f8f9fa;">
                                    <i class="mdi mdi-cloud-upload-outline" style="font-size: 48px; color: #6c757d;"></i>
                                    <p class="mt-3 mb-2">Drag and drop images here or click to browse</p>
                                    <p class="text-muted small">Supports: JPG, PNG, GIF (Max 10MB per image)</p>
                                    <input type="file" id="imageInput" name="images[]" multiple accept="image/*" style="display: none;">
                                    <button type="button" id="selectImagesBtn" class="btn btn-sm btn-primary mt-2">
                                        <i class="mdi mdi-folder-open me-1"></i> Select Images
                                    </button>
                                </div>

                                <!-- Upload Progress -->
                                <div id="uploadProgress" class="mb-4" style="display: none;">
                                    <div class="progress" style="height: 25px;">
                                        <div id="progressBar" class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 0%">0%</div>
                                    </div>
                                    <p class="text-center mt-2 mb-0" id="uploadStatus">Preparing upload...</p>
                                </div>

                                <!-- Existing Images Grid -->
                                <div id="imagesGrid" class="row">
                                    @foreach($property->images()->orderBy('position')->get() as $image)
                                        <div class="col-md-3 mb-3 image-item" data-image-id="{{ $image->id }}" data-position="{{ $image->position }}">
                                            <div class="card position-relative" style="cursor: move;">
                                                <img src="{{ Storage::disk('public')->url('thumbnails/' . $image->image) }}"
                                                     class="card-img-top"
                                                     alt="Property Image"
                                                     style="height: 200px; object-fit: cover;">
                                                <div class="card-body p-2">
                                                    <div class="d-flex justify-content-between align-items-center">
                                                        <button type="button"
                                                                class="btn btn-sm {{ $image->is_default === 'Y' ? 'btn-success' : 'btn-outline-secondary' }} set-default-btn"
                                                                data-image-id="{{ $image->id }}"
                                                                title="{{ $image->is_default === 'Y' ? 'Primary Image' : 'Set as Primary' }}">
                                                            <i class="mdi {{ $image->is_default === 'Y' ? 'mdi-star' : 'mdi-star-outline' }}"></i>
                                                        </button>
                                                        <button type="button"
                                                                class="btn btn-sm btn-danger delete-image-btn"
                                                                data-image-id="{{ $image->id }}"
                                                                title="Delete Image">
                                                            <i class="mdi mdi-delete"></i>
                                                        </button>
                                                    </div>
                                                    <small class="text-muted d-block text-center mt-2">Position: <span class="position-number">{{ $image->position }}</span></small>
                                                </div>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Tab 6: Documents -->
                    <div class="tab-pane fade" id="documents" role="tabpanel" aria-labelledby="documents-tab">
                        <div class="row">
                            <div class="col-md-12">
                                <h6 class="mb-3">Property Documents</h6>

                                <!-- Upload Form -->
                                <div class="card mb-4">
                                    <div class="card-body">
                                        <form id="documentsForm" enctype="multipart/form-data">
                                            @csrf
                                            <div class="row">
                                                <div class="col-md-6">
                                                    <div class="mb-3">
                                                        <label for="document_type_id" class="form-label">Document Type <span class="text-danger">*</span></label>
                                                        <select class="form-select" id="document_type_id" name="document_type_id" required>
                                                            <option value="">Select Type</option>
                                                            @foreach($documentTypes as $key => $value)
                                                                <option value="{{ $key }}">{{ $value }}</option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="col-md-6">
                                                    <div class="mb-3">
                                                        <label for="document" class="form-label">Document <span class="text-danger">*</span></label>
                                                        <input type="file" class="form-control" id="document" name="document" accept=".pdf,.doc,.docx" required>
                                                        <small class="form-text text-muted">PDF or Word documents only (Max 50MB)</small>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="text-end">
                                                <button type="submit" class="btn btn-primary" id="uploadDocumentBtn">
                                                    <i class="mdi mdi-upload me-1"></i> Upload Document
                                                </button>
                                            </div>
                                        </form>
                                    </div>
                                </div>

                                <!-- Uploaded Documents Table -->
                                <div class="card">
                                    <div class="card-body">
                                        <h6 class="mb-3">Uploaded Documents</h6>
                                        <div class="table-responsive">
                                            <table class="table table-striped table-bordered" id="documentsTable">
                                                <thead>
                                                    <tr>
                                                        <th>Document Type</th>
                                                        <th>File Name</th>
                                                        <th>File Type</th>
                                                        <th>Size</th>
                                                        <th>Actions</th>
                                                    </tr>
                                                </thead>
                                                <tbody id="documentsTableBody">
                                                    @forelse($property->documents as $document)
                                                        <tr data-document-id="{{ $document->id }}">
                                                            <td>{{ $documentTypes[$document->document_type_id] ?? 'Unknown' }}</td>
                                                            <td>{{ $document->document }}</td>
                                                            <td>{{ strtoupper($document->document_file_type) }}</td>
                                                            <td>{{ $document->document_size }}</td>
                                                            <td>
                                                                <a href="{{ Storage::disk('public')->url('properties/' . $property->id . '/documents/' . $document->document) }}"
                                                                   target="_blank"
                                                                   class="btn btn-sm btn-primary">
                                                                    <i class="mdi mdi-download me-1"></i> Download
                                                                </a>
                                                            </td>
                                                        </tr>
                                                    @empty
                                                        <tr>
                                                            <td colspan="5" class="text-center">No documents uploaded yet.</td>
                                                        </tr>
                                                    @endforelse
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Tab 7: Address -->
                    <div class="tab-pane fade" id="address" role="tabpanel" aria-labelledby="address-tab">
                        @php
                            $propertyAddress = $property->addresses()->first();
                        @endphp

                        <x-form.form id="addressForm" method="POST">
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="mb-3">
                                        <label for="addressInput" class="form-label">Address <span class="text-danger">*</span></label>
                                        <div id="addressAutocompleteContainer">
                                            <input type="text"
                                                   class="form-control"
                                                   id="addressInput"
                                                   name="address"
                                                   placeholder="Start typing an address..."
                                                   value="{{ $propertyAddress->address ?? '' }}"
                                                   autocomplete="off"
                                                   required>
                                        </div>
                                        <small class="form-text text-muted">Select an address from Google suggestions</small>
                                    </div>
                                </div>
                            </div>

                            <!-- Hidden fields for Google data -->
                            <input type="hidden" id="formatted_address" name="formatted_address" value="{{ $propertyAddress->formatted_address ?? '' }}">
                            <input type="hidden" id="place_id" name="place_id" value="{{ $propertyAddress->place_id ?? '' }}">

                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="latitude" class="form-label">Latitude</label>
                                        <input type="number"
                                               class="form-control"
                                               id="latitude"
                                               name="latitude"
                                               step="any"
                                               placeholder="e.g., 40.4168"
                                               value="{{ $propertyAddress->latitude ?? '' }}">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="longitude" class="form-label">Longitude</label>
                                        <input type="number"
                                               class="form-control"
                                               id="longitude"
                                               name="longitude"
                                               step="any"
                                               placeholder="e.g., -3.7038"
                                               value="{{ $propertyAddress->longitude ?? '' }}">
                                    </div>
                                </div>
                            </div>

                            <!-- Google Map (shown after address selection) -->
                            <div class="row" id="mapContainer" style="display: {{ ($propertyAddress && $propertyAddress->latitude && $propertyAddress->longitude) ? 'block' : 'none' }};">
                                <div class="col-md-12">
                                    <div class="mb-3">
                                        <label class="form-label">Map Location</label>
                                        <div id="map" style="height: 400px; width: 100%; border: 1px solid #ddd; border-radius: 5px;"></div>
                                        <small class="form-text text-muted">You can drag the marker to adjust the location</small>
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-12">
                                    <div class="mb-3">
                                        <label for="directions" class="form-label">Directions (Optional)</label>
                                        <textarea class="form-control"
                                                  id="directions"
                                                  name="directions"
                                                  rows="4"
                                                  placeholder="Enter directions or additional location information...">{{ $propertyAddress->directions ?? '' }}</textarea>
                                    </div>
                                </div>
                            </div>

                            <div class="text-end">
                                <x-form.button
                                    type="submit"
                                    variant="primary"
                                    icon="mdi mdi-content-save"
                                >
                                    Save Address
                                </x-form.button>
                            </div>
                        </x-form.form>
                    </div>

                    <!-- Tab 8: Contacts -->
                    <div class="tab-pane fade" id="contacts" role="tabpanel" aria-labelledby="contacts-tab">
                        @php
                            $propertyContact = $property->contacts()->first();
                        @endphp

                        <x-form.form id="contactsForm" method="POST">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="owner_1" class="form-label">Owner 1</label>
                                        <input type="text"
                                               class="form-control"
                                               id="owner_1"
                                               name="owner_1"
                                               placeholder="Enter owner 1 name"
                                               value="{{ $propertyContact->owner_1 ?? '' }}">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="owner_2" class="form-label">Owner 2</label>
                                        <input type="text"
                                               class="form-control"
                                               id="owner_2"
                                               name="owner_2"
                                               placeholder="Enter owner 2 name"
                                               value="{{ $propertyContact->owner_2 ?? '' }}">
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="key_holder" class="form-label">Key Holder</label>
                                        <input type="text"
                                               class="form-control"
                                               id="key_holder"
                                               name="key_holder"
                                               placeholder="Enter key holder name"
                                               value="{{ $propertyContact->key_holder ?? '' }}">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="developer" class="form-label">Developer</label>
                                        <input type="text"
                                               class="form-control"
                                               id="developer"
                                               name="developer"
                                               placeholder="Enter developer name"
                                               value="{{ $propertyContact->developer ?? '' }}">
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-12">
                                    <div class="mb-3">
                                        <label for="lawyer" class="form-label">Lawyer</label>
                                        <textarea class="form-control"
                                                  id="lawyer"
                                                  name="lawyer"
                                                  rows="3"
                                                  placeholder="Enter lawyer information...">{{ $propertyContact->lawyer ?? '' }}</textarea>
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="key_status" class="form-label">Key Status</label>
                                        <select class="form-select" id="key_status" name="key_status">
                                            <option value="">Select Key Status</option>
                                            @foreach($keyStatuses as $key => $value)
                                                <option value="{{ $key }}" {{ ($propertyContact->key_status ?? '') == $key ? 'selected' : '' }}>
                                                    {{ $value }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="key_id" class="form-label">Key ID</label>
                                        <input type="text"
                                               class="form-control"
                                               id="key_id"
                                               name="key_id"
                                               placeholder="Enter key ID"
                                               value="{{ $propertyContact->key_id ?? '' }}">
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-12">
                                    <div class="mb-3">
                                        <label for="key_details" class="form-label">Key Details</label>
                                        <textarea class="form-control"
                                                  id="key_details"
                                                  name="key_details"
                                                  rows="3"
                                                  placeholder="Enter key details...">{{ $propertyContact->key_details ?? '' }}</textarea>
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-12">
                                    <div class="mb-3">
                                        <label for="private_notes" class="form-label">Private Notes</label>
                                        <textarea class="form-control"
                                                  id="private_notes"
                                                  name="private_notes"
                                                  rows="4"
                                                  placeholder="Enter private notes...">{{ $propertyContact->private_notes ?? '' }}</textarea>
                                    </div>
                                </div>
                            </div>

                            <div class="text-end">
                                <x-form.button
                                    type="submit"
                                    variant="primary"
                                    icon="mdi mdi-content-save"
                                >
                                    Save Contacts
                                </x-form.button>
                            </div>
                        </x-form.form>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>

<!-- Add Area Modal -->
<div class="modal fade" id="addAreaModal" tabindex="-1" aria-labelledby="addAreaModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="addAreaModalLabel">Add New Area</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="addAreaForm">
                    <div class="mb-3">
                        <label for="newAreaName" class="form-label">Area Name <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="newAreaName" name="name" required
                               placeholder="Enter area name" maxlength="255">
                        <div class="invalid-feedback" id="areaNameError"></div>
                    </div>
                    <div class="mb-3">
                        <label for="newAreaDescription" class="form-label">Description (Optional)</label>
                        <textarea class="form-control" id="newAreaDescription" name="description"
                                  rows="3" placeholder="Enter area description"></textarea>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" id="saveAreaBtn">
                    <span class="spinner-border spinner-border-sm d-none" id="areaSpinner"></span>
                    <span id="saveAreaText">Save Area</span>
                </button>
            </div>
        </div>
    </div>
</div>

@endsection

@section('script-bottom')

<!-- SortableJS for drag and drop reordering -->
<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"></script>

<style>
    .sortable-ghost {
        opacity: 0.4;
    }
    .sortable-chosen {
        cursor: grabbing !important;
    }
    .sortable-drag {
        opacity: 0.8;
    }
    #imagesGrid .image-item {
        transition: transform 0.2s;
    }
    #imagesGrid .image-item:hover {
        transform: translateY(-2px);
    }
</style>

<script>
let currentPropertyId = {{ $property->id }};
const currentPropertySubTypeId = @json($property->property_sub_type_id);
const currentPropertySubTypeId2 = @json($property->property_sub_type_id2 ?? null);

// Dependent dropdown functionality
function setupDependentDropdowns() {
    try {
        console.log('Setting up dependent dropdowns...');

        // Try getElementById first
        let countrySelect = document.getElementById('country_id');
        let stateSelect = document.getElementById('state_id');
        let citySelect = document.getElementById('city_id');

        console.log('getElementById - Country:', countrySelect);
        console.log('getElementById - State:', stateSelect);
        console.log('getElementById - City:', citySelect);

        // If not found, try querySelector with different selectors
        if (!countrySelect || !stateSelect || !citySelect) {
            console.log('Trying alternative selectors...');
            countrySelect = countrySelect || document.querySelector('select[name="country_id"]');
            stateSelect = stateSelect || document.querySelector('select[name="state_id"]');
            citySelect = citySelect || document.querySelector('select[name="city_id"]');

            console.log('Alternative - Country:', countrySelect);
            console.log('Alternative - State:', stateSelect);
            console.log('Alternative - City:', citySelect);
        }


        if (!countrySelect) {
            console.error('Country select element not found with any method!');
            return false;
        }
        if (!stateSelect) {
            console.error('State select element not found with any method!');
            return false;
        }
        if (!citySelect) {
            console.error('City select element not found with any method!');
            return false;
        }

        console.log('All elements found successfully!');
        return { countrySelect, stateSelect, citySelect };
    } catch (error) {
        console.error('Error in setupDependentDropdowns:', error);
        return false;
    }
}

// Single initialization approach
console.log('Script loaded, setting up event listeners...');

// Use DOMContentLoaded for reliable initialization
document.addEventListener('DOMContentLoaded', function() {
    console.log('DOMContentLoaded fired');
    console.log('Looking for elements...');
    console.log('Country element:', document.getElementById('country_id'));
    console.log('State element:', document.getElementById('state_id'));
    console.log('City element:', document.getElementById('city_id'));

    // Ensure all tab forms have the correct action URLs
    updateFormActions();

    // Initialize tab functionality
    initTabFunctionality();

    // Initialize area section display
    const initialPropertyType = document.querySelector('select[name="property_type_id"]').value;
    if (initialPropertyType) {
        handleAreaSectionDisplay(initialPropertyType);
        handleBuildingDetailsDisplay(initialPropertyType);
    }

    // Initialize completed month display
    const initialCompletedStatus = document.querySelector('select[name="completed_status_id"]').value;
    if (initialCompletedStatus) {
        handleCompletedMonthDisplay(initialCompletedStatus);
    }

    // Try to initialize immediately
    initDropdowns();

    // After dropdowns init, pre-populate sub-types if we already have a property type on load
    if (initialPropertyType) {
        prepopulateSubTypes(initialPropertyType, currentPropertySubTypeId, currentPropertySubTypeId2);
    }

    // If elements not found, try again after a short delay
    if (!document.getElementById('country_id')) {
        console.log('Elements not found, retrying in 100ms...');
        setTimeout(initDropdowns, 100);
    }

    // Final fallback
    if (!document.getElementById('country_id')) {
        console.log('Elements still not found, final retry in 500ms...');
        setTimeout(initDropdowns, 500);
    }
});

// Initialize tab functionality
function initTabFunctionality() {
    console.log('Initializing tab functionality...');

    // Remove existing event listeners to avoid duplicates
    const tabButtons = document.querySelectorAll('#propertyTabs .nav-link');
    tabButtons.forEach(button => {
        // Clone the button to remove all event listeners
        const newButton = button.cloneNode(true);
        button.parentNode.replaceChild(newButton, button);
    });

    // Add click event listeners to all tab buttons
    const newTabButtons = document.querySelectorAll('#propertyTabs .nav-link');
    newTabButtons.forEach(button => {
        button.addEventListener('click', function(e) {
            console.log('Tab clicked:', this.id);

            // Check if tab is disabled
            if (this.classList.contains('disabled')) {
                e.preventDefault();
                e.stopPropagation();
                console.log('Tab is disabled:', this.id);
                return false;
            }

            // Let Bootstrap handle the tab switching
            console.log('Tab switching allowed for:', this.id);
        });
    });

    // Listen for Bootstrap tab events
    const tabList = document.getElementById('propertyTabs');
    if (tabList) {
        // Remove existing event listeners
        tabList.removeEventListener('shown.bs.tab', handleTabShown);
        tabList.removeEventListener('hidden.bs.tab', handleTabHidden);

        // Add new event listeners
        tabList.addEventListener('shown.bs.tab', handleTabShown);
        tabList.addEventListener('hidden.bs.tab', handleTabHidden);
    }
}

// Tab event handlers
function handleTabShown(e) {
    console.log('Tab shown:', e.target.id);

    // Initialize image upload when Pictures tab is shown
    if (e.target.id === 'pictures-tab' || e.target.getAttribute('data-bs-target') === '#pictures') {
        console.log('Pictures tab shown, initializing image upload...');
        setTimeout(initializeImageUpload, 100);
        // Initialize SortableJS for drag and drop after a short delay to ensure DOM is ready
        setTimeout(() => {
            console.log('Initializing SortableJS after tab shown');
            initializeSortable();
        }, 200);
    }
}

function handleTabHidden(e) {
    console.log('Tab hidden:', e.target.id);
}

function initDropdowns() {
    console.log('initDropdowns called');
    try {
        let elements = setupDependentDropdowns();

        if (elements) {
            console.log('Elements found, attaching listeners');
            attachEventListeners(elements);
            // Areas will be loaded when city is selected
        } else {
            console.log('Elements not found, trying fallback...');
            setupFallbackDropdowns();
            // Areas will be loaded when city is selected
        }
    } catch (error) {
        console.error('Error in initDropdowns:', error);
        setupFallbackDropdowns();
        // Areas will be loaded when city is selected
    }
}

// Fallback approach - find elements by name attribute
function setupFallbackDropdowns() {
    try {
        console.log('Setting up fallback dropdowns...');

        const countrySelect = document.querySelector('select[name="country_id"]');
        const stateSelect = document.querySelector('select[name="state_id"]');
        const citySelect = document.querySelector('select[name="city_id"]');

        console.log('Fallback - Country select:', countrySelect);
        console.log('Fallback - State select:', stateSelect);
        console.log('Fallback - City select:', citySelect);

        if (countrySelect && stateSelect && citySelect) {
            attachEventListeners({ countrySelect, stateSelect, citySelect });
        } else {
            console.error('Fallback approach also failed - elements not found');
        }
    } catch (error) {
        console.error('Error in fallback setup:', error);
    }
}

function attachEventListeners({ countrySelect, stateSelect, citySelect }) {
    try {
        console.log('Attaching event listeners...');

        // Check if event listeners are already attached to prevent duplicates
        if (countrySelect.hasAttribute('data-listeners-attached')) {
            console.log('Event listeners already attached, skipping...');
            return;
        }

        // Mark as having listeners attached
        countrySelect.setAttribute('data-listeners-attached', 'true');

    // Test click event first
    countrySelect.addEventListener('click', function() {
        console.log('Country select clicked!');
    });

    // Handle country change
    console.log('Adding event listener to country select...');
    countrySelect.addEventListener('change', function() {
        const countryId = this.value;
        console.log('Country selected:', countryId);

        // Clear and disable dependent dropdowns
        stateSelect.innerHTML = '<option value="">Select Province/State</option>';
        citySelect.innerHTML = '<option value="">Select City</option>';
        stateSelect.disabled = true;
        citySelect.disabled = true;

        if (countryId) {
            // Show loading state
            stateSelect.innerHTML = '<option value="">Loading states...</option>';

            console.log('Fetching states for country:', countryId);

            // Fetch states for selected country
            fetch(`/api/states/${countryId}`, {
                method: 'GET',
                credentials: 'same-origin',
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                    'Accept': 'application/json',
                    'Content-Type': 'application/json'
                }
            })
                .then(response => {
                    console.log('Response status:', response.status);
                    return response.json();
                })
                .then(data => {
                    console.log('States data:', data);
                    stateSelect.innerHTML = '<option value="">Select Province/State</option>';
                    data.forEach(state => {
                        const option = document.createElement('option');
                        option.value = state.id;
                        option.textContent = state.name;
                        stateSelect.appendChild(option);
                    });
                    stateSelect.disabled = false;
                })
                .catch(error => {
                    console.error('Error fetching states:', error);
                    stateSelect.innerHTML = '<option value="">Error loading states</option>';
                    showAlert('error', 'Failed to load states');
                });
        }
    });

    // Handle state change
    stateSelect.addEventListener('change', function() {
        const stateId = this.value;
        console.log('State selected:', stateId);

        // Clear and disable city dropdown
        citySelect.innerHTML = '<option value="">Select City</option>';
        citySelect.disabled = true;

        if (stateId) {
            // Show loading state
            citySelect.innerHTML = '<option value="">Loading cities...</option>';

            console.log('Fetching cities for state:', stateId);

            // Fetch cities for selected state
            fetch(`/api/cities/${stateId}`, {
                method: 'GET',
                credentials: 'same-origin',
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                    'Accept': 'application/json',
                    'Content-Type': 'application/json'
                }
            })
                .then(response => {
                    console.log('Cities response status:', response.status);
                    return response.json();
                })
                .then(data => {
                    console.log('Cities data:', data);
                    citySelect.innerHTML = '<option value="">Select City</option>';
                    data.forEach(city => {
                        const option = document.createElement('option');
                        option.value = city.id;
                        option.textContent = city.name;
                        citySelect.appendChild(option);
                    });
                    citySelect.disabled = false;
                })
                .catch(error => {
                    console.error('Error fetching cities:', error);
                    citySelect.innerHTML = '<option value="">Error loading cities</option>';
                    showAlert('error', 'Failed to load cities');
                });
        }
    });

    // Handle completed status change - show/hide completed_month
    const completedStatusSelect = document.querySelector('select[name="completed_status_id"]');
    if (completedStatusSelect) {
        completedStatusSelect.addEventListener('change', function() {
            const completedStatusId = this.value;
            console.log('Completed status changed to:', completedStatusId);
            handleCompletedMonthDisplay(completedStatusId);
        });
    }

    // Handle city change - load areas
    citySelect.addEventListener('change', function() {
        const cityId = this.value;
        console.log('City changed to:', cityId);

        // Set the current city ID globally
        window.currentCityId = cityId;

        // Enable/disable Add Area button based on city selection
        const addAreaBtn = document.getElementById('addAreaBtn');
        if (addAreaBtn) {
            addAreaBtn.disabled = !cityId;
        }

        // Make direct AJAX call to fetch areas for the city
        if (cityId) {
            console.log('Making AJAX call to fetch areas for city:', cityId);
            fetch(`/api/areas/${cityId}`)
                .then(response => response.json())
                .then(data => {
                    console.log('Areas fetched successfully:', data);
                    // Load areas into regular dropdown
                    loadAreasIntoDropdown(data);
                })
                .catch(error => {
                    console.error('Error fetching areas:', error);
                });
        } else {
            // Clear area dropdown if no city selected
            clearAreaDropdown();
        }
    });

    // Handle property type change - load sub-types
    const propertyTypeSelect = document.querySelector('select[name="property_type_id"]');
    const propertySubTypeSelect = document.querySelector('select[name="property_sub_type_id"]');
    const commercialOptions = document.getElementById('commercial-options');
    const propertySubType2Select = document.querySelector('select[name="property_sub_type_id2"]');

    if (propertyTypeSelect && propertySubTypeSelect) {
        propertyTypeSelect.addEventListener('change', function() {
            const propertyTypeId = this.value;
            console.log('Property type changed to:', propertyTypeId);

            // Clear and disable sub-type dropdowns
            propertySubTypeSelect.innerHTML = '<option value="">Select Sub Type</option>';
            propertySubTypeSelect.disabled = true;

            if (propertySubType2Select) {
                propertySubType2Select.innerHTML = '<option value="">Select Commercial Sub Type</option>';
                propertySubType2Select.disabled = true;
            }

            // Show/hide commercial options based on property type
            if (commercialOptions) {
                if (propertyTypeId === '29' || propertyTypeId === '24') { // Commercial or Plot types
                    commercialOptions.style.display = '';
                } else {
                    commercialOptions.style.display = 'none';
                }
            }

            // Handle area section conditional display
            handleAreaSectionDisplay(propertyTypeId);

            // Handle building details section conditional display
            handleBuildingDetailsDisplay(propertyTypeId);

            if (propertyTypeId) {
                prepopulateSubTypes(propertyTypeId);
            }
        });
    }
    } catch (error) {
        console.error('Error attaching event listeners:', error);
    }
}

// Fetch and populate sub-types, and preselect saved values
function prepopulateSubTypes(propertyTypeId, selectedSubTypeId = null, selectedSubTypeId2 = null) {
    const propertySubTypeSelect = document.querySelector('select[name="property_sub_type_id"]');
    const propertySubType2Select = document.querySelector('select[name="property_sub_type_id2"]');
    const commercialOptions = document.getElementById('commercial-options');

    if (!propertySubTypeSelect) return;

    propertySubTypeSelect.innerHTML = '<option value="">Loading sub-types...</option>';
    if (propertySubType2Select) {
        propertySubType2Select.innerHTML = '<option value="">Loading sub-types...</option>';
    }

    fetch(`/api/property-sub-types/${propertyTypeId}`, {
        method: 'GET',
        credentials: 'same-origin',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
            'Accept': 'application/json',
            'Content-Type': 'application/json'
        }
    })
        .then(response => response.json())
        .then(data => {
            propertySubTypeSelect.innerHTML = '<option value="">Select Sub Type</option>';
            if (Array.isArray(data)) {
                data.forEach(subType => {
                    const option = document.createElement('option');
                    option.value = subType.id;
                    option.textContent = subType.name;
                    propertySubTypeSelect.appendChild(option);
                });
                propertySubTypeSelect.disabled = false;

                if (selectedSubTypeId) {
                    propertySubTypeSelect.value = String(selectedSubTypeId);
                }

                // If commercial options are visible (type 24 or 29), populate secondary select too
                if (commercialOptions && commercialOptions.style.display !== 'none' && propertySubType2Select) {
                    propertySubType2Select.innerHTML = '<option value="">Select Commercial Sub Type</option>';
                    data.forEach(subType => {
                        const option = document.createElement('option');
                        option.value = subType.id;
                        option.textContent = subType.name;
                        propertySubType2Select.appendChild(option);
                    });
                    propertySubType2Select.disabled = false;
                    if (selectedSubTypeId2) {
                        propertySubType2Select.value = String(selectedSubTypeId2);
                    }
                }
            } else {
                propertySubTypeSelect.innerHTML = '<option value="">No sub-types available</option>';
                if (propertySubType2Select) {
                    propertySubType2Select.innerHTML = '<option value="">No sub-types available</option>';
                }
            }
        })
        .catch(error => {
            console.error('Error fetching sub-types:', error);
            propertySubTypeSelect.innerHTML = '<option value="">Error loading sub-types</option>';
            if (propertySubType2Select) {
                propertySubType2Select.innerHTML = '<option value="">Error loading sub-types</option>';
            }
            showAlert('error', 'Failed to load sub-types');
        });
}

// Handle Details form submission
document.addEventListener('DOMContentLoaded', function() {
    const detailsForm = document.getElementById('detailsForm');
    if (detailsForm) {
        detailsForm.addEventListener('submit', function(e) {
            e.preventDefault();

            const formData = new FormData(this);

            fetch('{{ route("properties.update", $property->id) }}', {
                method: 'POST',
                body: formData,
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                    'Accept': 'application/json',
                    'X-Requested-With': 'XMLHttpRequest'
                }
            })
            .then(response => {
                // Always try to parse JSON, even for error responses
                return response.json().then(data => {
                    // Check if response is ok (status 200-299)
                    if (!response.ok) {
                        throw { data, status: response.status };
                    }
                    return data;
                });
            })
            .then(data => {
                if (data && data.success) {
                    showAlert('success', data.message);
                } else {
                    // Show validation errors if available
                    if (data.errors) {
                        const errorMessages = Object.values(data.errors).flat().join('<br>');
                        showAlert('error', errorMessages);
                    } else {
                        showAlert('error', data.message || 'Failed to update property details');
                    }
                }
            })
            .catch(error => {
                console.error('Error:', error);
                console.error('Error data:', error.data);
                // Show validation errors if available
                if (error.data) {
                    if (error.data.errors) {
                        const errorMessages = Object.values(error.data.errors).flat().join('<br>');
                        showAlert('error', errorMessages);
                    } else if (error.data.message) {
                        showAlert('error', error.data.message);
                    } else {
                        showAlert('error', 'Validation failed. Please check the form fields.');
                    }
                } else {
                    showAlert('error', error.message || 'An error occurred while updating');
                }
            });
        });
    }
});

// Update form actions with property ID
function updateFormActions() {
    if (currentPropertyId) {
        const forms = {
            'descriptionsForm': `/properties/${currentPropertyId}/descriptions`,
            'pricingForm': `/properties/${currentPropertyId}/pricing`,
            'featuresForm': `/properties/${currentPropertyId}/features`,
            'documentsForm': `/properties/${currentPropertyId}/documents`,
            'addressForm': `/properties/${currentPropertyId}/address`,
            'contactsForm': `/properties/${currentPropertyId}/contacts`
        };

        // Update form actions only if forms exist
        Object.keys(forms).forEach(formId => {
            const form = document.getElementById(formId);
            if (form) {
                form.action = forms[formId];
            }
        });

        // Note: picturesForm no longer exists - images are uploaded via AJAX
    }
}

// Handle documents form submission separately (needs special handling for file uploads and table updates)
const documentsForm = document.getElementById('documentsForm');
if (documentsForm) {
    documentsForm.addEventListener('submit', function(e) {
        e.preventDefault();

        if (!currentPropertyId) {
            showAlert('error', 'Please complete the Details tab first');
            return;
        }

        const documentTypeId = document.getElementById('document_type_id').value;
        const documentFile = document.getElementById('document').files[0];

        if (!documentTypeId) {
            showAlert('error', 'Please select a document type');
            return;
        }

        if (!documentFile) {
            showAlert('error', 'Please select a document to upload');
            return;
        }

        const formData = new FormData();
        formData.append('document_type_id', documentTypeId);
        formData.append('document', documentFile);
        formData.append('_token', document.querySelector('meta[name="csrf-token"]').getAttribute('content'));

        const uploadBtn = document.getElementById('uploadDocumentBtn');
        const originalBtnText = uploadBtn.innerHTML;
        uploadBtn.disabled = true;
        uploadBtn.innerHTML = '<span class="spinner-border spinner-border-sm me-1"></span>Uploading...';

        fetch(`/properties/${currentPropertyId}/documents`, {
            method: 'POST',
            body: formData,
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                showAlert('success', data.message);
                // Add document to table
                addDocumentToTable(data.document);
                // Reset form
                documentsForm.reset();
            } else {
                showAlert('error', data.message || 'Failed to upload document');
            }
        })
        .catch(error => {
            console.error('Error:', error);
            showAlert('error', 'An error occurred while uploading document');
        })
        .finally(() => {
            uploadBtn.disabled = false;
            uploadBtn.innerHTML = originalBtnText;
        });
    });
}

// Function to add document to table
function addDocumentToTable(docData) {
    const tbody = document.getElementById('documentsTableBody');
    if (!tbody) return;

    // Remove "no documents" message if present
    const emptyRow = tbody.querySelector('tr td[colspan="5"]');
    if (emptyRow) {
        emptyRow.parentElement.remove();
    }

    // Create new row
    const row = document.createElement('tr');
    row.setAttribute('data-document-id', docData.id);

    const documentTypes = @json($documentTypes);
    const documentTypeName = documentTypes[docData.document_type_id] || docData.document_type_name || 'Unknown';
    const documentUrl = docData.url || `/storage/properties/${currentPropertyId}/documents/${docData.document}`;

    row.innerHTML = `
        <td>${documentTypeName}</td>
        <td>${docData.document}</td>
        <td>${docData.document_file_type.toUpperCase()}</td>
        <td>${docData.document_size}</td>
        <td>
            <a href="${documentUrl}"
               target="_blank"
               class="btn btn-sm btn-primary">
                <i class="mdi mdi-download me-1"></i> Download
            </a>
        </td>
    `;

    tbody.appendChild(row);
}

// Handle other form submissions
['descriptionsForm', 'pricingForm', 'featuresForm', 'addressForm', 'contactsForm'].forEach(formId => {
    const form = document.getElementById(formId);
    if (form) {
        form.addEventListener('submit', function(e) {
            e.preventDefault();

            if (!currentPropertyId) {
                showAlert('error', 'Please complete the Details tab first');
                return;
            }

        const formData = new FormData(this);
        
        // For pricing form, ensure checkbox values are sent (Y or N)
        if (formId === 'pricingForm') {
            const checkboxes = [
                'is_for_sale', 'is_for_rent', 'is_for_rent_lt', 'is_for_rent_st',
                'bank_guarantee_required', 'references_required', 'smoking_allowed', 'pets_allowed'
            ];
            checkboxes.forEach(checkboxName => {
                const checkbox = form.querySelector(`[name="${checkboxName}"]`);
                if (checkbox) {
                    // Remove existing value if unchecked
                    if (!checkbox.checked) {
                        formData.delete(checkboxName);
                        formData.append(checkboxName, 'N');
                    } else {
                        formData.set(checkboxName, 'Y');
                    }
                } else {
                    // If checkbox doesn't exist, default to 'N'
                    formData.append(checkboxName, 'N');
                }
            });
        }

        fetch(this.action, {
            method: 'POST',
            body: formData,
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                'Accept': 'application/json',
                'X-Requested-With': 'XMLHttpRequest'
            }
        })
        .then(response => {
            // Always try to parse JSON, even for error responses
            return response.json().then(data => {
                // Check if response is ok (status 200-299)
                if (!response.ok) {
                    throw { data, status: response.status };
                }
                return data;
            });
        })
        .then(data => {
            if (data.success) {
                showAlert('success', data.message);
            } else {
                // Show validation errors if available
                if (data.errors) {
                    const errorMessages = Object.values(data.errors).flat().join('<br>');
                    showAlert('error', errorMessages);
                } else {
                    showAlert('error', data.message || 'Failed to save data');
                }
            }
        })
        .catch(error => {
            console.error('Error:', error);
            console.error('Error data:', error.data);
            // Show validation errors if available
            if (error.data) {
                if (error.data.errors) {
                    const errorMessages = Object.values(error.data.errors).flat().join('<br>');
                    showAlert('error', errorMessages);
                } else if (error.data.message) {
                    showAlert('error', error.data.message);
                } else {
                    showAlert('error', 'Validation failed. Please check the form fields.');
                }
            } else {
                showAlert('error', error.message || 'An error occurred while saving');
            }
        });
        });
    }
});

// Image preview functionality is now handled by the drag-and-drop interface in initializeImageUpload()

// Show alert function
function showAlert(type, message) {
    const alertDiv = document.createElement('div');
    alertDiv.className = `alert alert-${type === 'success' ? 'success' : 'danger'} alert-dismissible fade show`;
    alertDiv.innerHTML = `
        ${message}
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    `;

    const container = document.querySelector('.container-fluid');
    container.insertBefore(alertDiv, container.firstChild);

    // Auto remove after 5 seconds
    setTimeout(() => {
        alertDiv.remove();
    }, 5000);
}

// Google Maps and Places Autocomplete integration
let map = null;
let marker = null;
let autocomplete = null;
let geocoder = null;
let googleMapsInitialized = false;
const googleMapsApiKey = @json($googleMapsApiKey ?? '');

// Initialize Google Maps and Places Autocomplete
function initGoogleMaps() {
    if (googleMapsInitialized) {
        console.log('Google Maps already initialized');
        return;
    }

    // Find the address input element
    const addressInput = document.getElementById('addressInput') ||
                         document.querySelector('#addressForm input[name="address"]') ||
                         document.querySelector('#addressAutocompleteContainer input[name="address"]');
    const mapContainer = document.getElementById('mapContainer');
    const mapDiv = document.getElementById('map');

    if (!addressInput) {
        console.log('Address input not found');
        return;
    }

    // Verify it's an HTMLInputElement
    if (!(addressInput instanceof HTMLInputElement)) {
        console.error('Address element is not an HTMLInputElement:', addressInput);
        console.error('Found element type:', addressInput.constructor.name);
        console.error('Found element:', addressInput);
        return;
    }

    if (typeof google === 'undefined' || !google.maps || !google.maps.places) {
        console.error('Google Maps API not loaded');
        return;
    }

    console.log('Initializing Google Maps and Places Autocomplete');

    // Initialize geocoder
    geocoder = new google.maps.Geocoder();

    // Use the new PlaceAutocompleteElement API (recommended) or fallback to legacy Autocomplete
    if (google.maps.places.PlaceAutocompleteElement) {
        console.log('Using new PlaceAutocompleteElement API');
        try {
            // Create the autocomplete element
            const autocompleteElement = new google.maps.places.PlaceAutocompleteElement({
                requestedResultTypes: ['address'],
                fields: ['formatted_address', 'geometry', 'place_id', 'name']
            });

            // Get the container
            const container = document.getElementById('addressAutocompleteContainer');
            if (container) {
                // Clear and add the autocomplete element
                container.innerHTML = '';
                container.appendChild(autocompleteElement);

                // Get the input from the autocomplete element
                const autocompleteInput = autocompleteElement.querySelector('input');
                if (autocompleteInput) {
                    // Copy attributes from original input
                    autocompleteInput.id = 'addressInput';
                    autocompleteInput.name = 'address';
                    autocompleteInput.className = 'form-control';
                    autocompleteInput.placeholder = 'Start typing an address...';
                    autocompleteInput.required = true;
                    if (addressInput.value) {
                        autocompleteInput.value = addressInput.value;
                    }
                }

                // Listen for place selection
                autocompleteElement.addEventListener('gmp-placeselect', function(event) {
                    const place = event.place;
                    handlePlaceSelection(place, mapContainer, mapDiv);
                });
            }
        } catch (error) {
            console.error('Error initializing PlaceAutocompleteElement:', error);
            // Fallback to legacy API
            initLegacyAutocomplete(addressInput, mapContainer, mapDiv);
        }
    } else {
        console.log('Using legacy Autocomplete API');
        initLegacyAutocomplete(addressInput, mapContainer, mapDiv);
    }

    googleMapsInitialized = true;
}

// Legacy Autocomplete initialization (fallback)
function initLegacyAutocomplete(addressInput, mapContainer, mapDiv) {
    try {
        autocomplete = new google.maps.places.Autocomplete(addressInput, {
            types: ['address'],
            fields: ['formatted_address', 'geometry', 'place_id', 'name']
        });

        // When a place is selected from autocomplete
        autocomplete.addListener('place_changed', function() {
            const place = autocomplete.getPlace();
            handlePlaceSelection(place, mapContainer, mapDiv);
        });
    } catch (error) {
        console.error('Error initializing legacy Autocomplete:', error);
    }
}

// Handle place selection (shared function)
function handlePlaceSelection(place, mapContainer, mapDiv) {
    if (!place.geometry || !place.geometry.location) {
        console.log('No details available for the selected place');
        return;
    }

    // Update hidden fields
    document.getElementById('formatted_address').value = place.formatted_address || '';
    document.getElementById('place_id').value = place.place_id || '';

    const addressInput = document.getElementById('addressInput') || document.querySelector('input[name="address"]');
    if (addressInput) {
        addressInput.value = place.name || place.formatted_address || '';
    }

    // Get coordinates
    const lat = place.geometry.location.lat();
    const lng = place.geometry.location.lng();

    // Update latitude and longitude fields
    document.getElementById('latitude').value = lat;
    document.getElementById('longitude').value = lng;

    // Show map container
    if (mapContainer) {
        mapContainer.style.display = 'block';
    }

    // Initialize or update map
    if (!map && mapDiv) {
        map = new google.maps.Map(mapDiv, {
            zoom: 15,
            center: { lat: lat, lng: lng },
            mapTypeControl: true,
            streetViewControl: true,
            fullscreenControl: true
        });
    } else if (map) {
        map.setCenter({ lat: lat, lng: lng });
        map.setZoom(15);
    }

    // Remove existing marker if any
    if (marker) {
        marker.setMap(null);
    }

    // Create draggable marker
    if (map) {
        marker = new google.maps.Marker({
            position: { lat: lat, lng: lng },
            map: map,
            draggable: true,
            animation: google.maps.Animation.DROP
        });

        // Update coordinates when marker is dragged
        marker.addListener('dragend', function(event) {
            const newLat = event.latLng.lat();
            const newLng = event.latLng.lng();

            document.getElementById('latitude').value = newLat;
            document.getElementById('longitude').value = newLng;

            // Reverse geocode to update address if needed
            if (geocoder) {
                geocoder.geocode({ location: { lat: newLat, lng: newLng } }, function(results, status) {
                    if (status === 'OK' && results[0]) {
                        document.getElementById('formatted_address').value = results[0].formatted_address;
                        const addressInput = document.getElementById('address');
                        if (addressInput) {
                            addressInput.value = results[0].formatted_address;
                        }
                    }
                });
            }
        });

        // Also allow clicking on map to move marker
        map.addListener('click', function(event) {
            const clickLat = event.latLng.lat();
            const clickLng = event.latLng.lng();

            document.getElementById('latitude').value = clickLat;
            document.getElementById('longitude').value = clickLng;

            // Move marker to clicked location
            if (marker) {
                marker.setPosition({ lat: clickLat, lng: clickLng });
            }

            // Reverse geocode
            if (geocoder) {
                geocoder.geocode({ location: { lat: clickLat, lng: clickLng } }, function(results, status) {
                    if (status === 'OK' && results[0]) {
                        document.getElementById('formatted_address').value = results[0].formatted_address;
                        const addressInput = document.getElementById('address');
                        if (addressInput) {
                            addressInput.value = results[0].formatted_address;
                        }
                        if (results[0].place_id) {
                            document.getElementById('place_id').value = results[0].place_id;
                        }
                    }
                });
            }
        });
    }
}

// Initialize map with existing address data
function initMapWithExistingAddress() {
    const propertyAddress = @json($property->addresses()->first());
    const mapContainer = document.getElementById('mapContainer');
    const mapDiv = document.getElementById('map');

    if (propertyAddress && propertyAddress.latitude && propertyAddress.longitude && mapDiv) {
        mapContainer.style.display = 'block';

        const lat = parseFloat(propertyAddress.latitude);
        const lng = parseFloat(propertyAddress.longitude);

        map = new google.maps.Map(mapDiv, {
            zoom: 15,
            center: { lat: lat, lng: lng },
            mapTypeControl: true,
            streetViewControl: true,
            fullscreenControl: true
        });

        marker = new google.maps.Marker({
            position: { lat: lat, lng: lng },
            map: map,
            draggable: true,
            animation: google.maps.Animation.DROP
        });

        // Update coordinates when marker is dragged
        marker.addListener('dragend', function(event) {
            const newLat = event.latLng.lat();
            const newLng = event.latLng.lng();

            document.getElementById('latitude').value = newLat;
            document.getElementById('longitude').value = newLng;

            // Reverse geocode
            if (geocoder) {
                geocoder.geocode({ location: { lat: newLat, lng: newLng } }, function(results, status) {
                    if (status === 'OK' && results[0]) {
                        document.getElementById('formatted_address').value = results[0].formatted_address;
                        document.getElementById('address').value = results[0].formatted_address;
                    }
                });
            }
        });

        // Allow clicking on map to move marker
        map.addListener('click', function(event) {
            const clickLat = event.latLng.lat();
            const clickLng = event.latLng.lng();

            document.getElementById('latitude').value = clickLat;
            document.getElementById('longitude').value = clickLng;

            marker.setPosition({ lat: clickLat, lng: clickLng });

            if (geocoder) {
                geocoder.geocode({ location: { lat: clickLat, lng: clickLng } }, function(results, status) {
                    if (status === 'OK' && results[0]) {
                        document.getElementById('formatted_address').value = results[0].formatted_address;
                        document.getElementById('address').value = results[0].formatted_address;
                        if (results[0].place_id) {
                            document.getElementById('place_id').value = results[0].place_id;
                        }
                    }
                });
            }
        });
    }
}

// Load Google Maps API
function loadGoogleMapsAPI() {
    if (!googleMapsApiKey) {
        console.error('Google Maps API key is not configured');
        return;
    }

    if (typeof google !== 'undefined' && google.maps && google.maps.places) {
        // API already loaded
        console.log('Google Maps API already loaded');
        initGoogleMaps();
        initMapWithExistingAddress();
        return;
    }

    // Check if script is already being loaded
    if (document.querySelector('script[src*="maps.googleapis.com"]')) {
        console.log('Google Maps script already loading');
        return;
    }

    console.log('Loading Google Maps API...');
    // Load the script with the new Places API
    const script = document.createElement('script');
    script.src = `https://maps.googleapis.com/maps/api/js?key=${googleMapsApiKey}&libraries=places&loading=async&callback=initGoogleMapsCallback`;
    script.async = true;
    script.defer = true;
    script.onerror = function() {
        console.error('Failed to load Google Maps API');
    };
    document.head.appendChild(script);
}

// Callback function for Google Maps API
window.initGoogleMapsCallback = function() {
    console.log('Google Maps API loaded successfully');
    initGoogleMaps();
    initMapWithExistingAddress();
};

// Initialize when address tab is shown
function initializeAddressTab() {
    const addressTab = document.getElementById('address-tab');
    if (addressTab) {
        addressTab.addEventListener('shown.bs.tab', function() {
            console.log('Address tab shown');
            if (typeof google === 'undefined' || !google.maps || !google.maps.places) {
                loadGoogleMapsAPI();
            } else {
                initGoogleMaps();
                initMapWithExistingAddress();
            }
        });
    }
}

// Initialize on page load
document.addEventListener('DOMContentLoaded', function() {
    console.log('DOM loaded, initializing address tab');
    initializeAddressTab();

    // Also try to initialize if address tab is already active
    const addressTabPane = document.getElementById('address');
    if (addressTabPane && addressTabPane.classList.contains('active')) {
        console.log('Address tab is active, loading Google Maps');
        loadGoogleMapsAPI();
    }
});

// Use global variable for city ID
window.currentCityId = {{ $property->city_id }};


// City change handling is already done in attachEventListeners function

// Function to load areas into the regular dropdown
function loadAreasIntoDropdown(areas) {
    const areaSelect = document.querySelector('select[name="area_id"]');
    if (!areaSelect) return;

    // Clear existing options
    areaSelect.innerHTML = '<option value="">Select Area</option>';

    // Add areas as options
    if (areas && Array.isArray(areas)) {
        areas.forEach(function(area) {
            const option = document.createElement('option');
            option.value = area.id;
            option.textContent = area.name;
            areaSelect.appendChild(option);
        });
        areaSelect.disabled = false;
    }
}

// Function to clear area dropdown
function clearAreaDropdown() {
    const areaSelect = document.querySelector('select[name="area_id"]');
    if (areaSelect) {
        areaSelect.innerHTML = '<option value="">Select Area</option>';
        areaSelect.disabled = true;
    }
}

// Add Area Modal functionality
document.addEventListener('DOMContentLoaded', function() {
    const addAreaBtn = document.getElementById('addAreaBtn');
    const addAreaModal = document.getElementById('addAreaModal');
    const addAreaForm = document.getElementById('addAreaForm');
    const saveAreaBtn = document.getElementById('saveAreaBtn');
    const newAreaName = document.getElementById('newAreaName');
    const areaNameError = document.getElementById('areaNameError');
    const areaSpinner = document.getElementById('areaSpinner');
    const saveAreaText = document.getElementById('saveAreaText');

    // Open modal when Add Area button is clicked
    if (addAreaBtn) {
        addAreaBtn.addEventListener('click', function() {
            if (!window.currentCityId) {
                showAlert('error', 'Please select a city first');
                return;
            }

            // Clear form and reset validation
            addAreaForm.reset();
            newAreaName.classList.remove('is-invalid');
            areaNameError.textContent = '';

            // Show modal
            const modal = new bootstrap.Modal(addAreaModal);
            modal.show();
        });
    }

    // Handle form submission
    if (saveAreaBtn) {
        saveAreaBtn.addEventListener('click', function() {
            const areaName = newAreaName.value.trim();

            // Validate area name
            if (!areaName) {
                newAreaName.classList.add('is-invalid');
                areaNameError.textContent = 'Area name is required';
                return;
            }

            // Clear previous validation errors
            newAreaName.classList.remove('is-invalid');
            areaNameError.textContent = '';

            // Show loading state
            saveAreaBtn.disabled = true;
            areaSpinner.classList.remove('d-none');
            saveAreaText.textContent = 'Saving...';

            // Prepare form data
            const formData = new FormData();
            formData.append('name', areaName);
            formData.append('description', document.getElementById('newAreaDescription').value.trim());
            formData.append('city_id', window.currentCityId);
            formData.append('_token', document.querySelector('meta[name="csrf-token"]').getAttribute('content'));

            // Make AJAX request to create area
            fetch('/api/areas', {
                method: 'POST',
                body: formData,
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                }
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    // Close modal
                    const modal = bootstrap.Modal.getInstance(addAreaModal);
                    modal.hide();

                    // Refresh areas dropdown
                    refreshAreasDropdown();

                    // Select the newly created area
                    setTimeout(() => {
                        const areaSelect = document.querySelector('select[name="area_id"]');
                        if (areaSelect) {
                            areaSelect.value = data.area.id;
                        }
                    }, 100);

                    showAlert('success', 'Area created successfully!');
                } else {
                    // Show validation errors
                    if (data.errors && data.errors.name) {
                        newAreaName.classList.add('is-invalid');
                        areaNameError.textContent = data.errors.name[0];
                    } else {
                        showAlert('error', data.message || 'Failed to create area');
                    }
                }
            })
            .catch(error => {
                console.error('Error creating area:', error);
                showAlert('error', 'An error occurred while creating the area');
            })
            .finally(() => {
                // Reset button state
                saveAreaBtn.disabled = false;
                areaSpinner.classList.add('d-none');
                saveAreaText.textContent = 'Save Area';
            });
        });
    }
});

// Function to refresh areas dropdown
function refreshAreasDropdown() {
    if (window.currentCityId) {
        fetch(`/api/areas/${window.currentCityId}`)
            .then(response => response.json())
            .then(data => {
                loadAreasIntoDropdown(data);
            })
            .catch(error => {
                console.error('Error refreshing areas:', error);
            });
    }
}

// Function to handle area section conditional display
function handleAreaSectionDisplay(propertyTypeId) {
    console.log('Handling area section display for property type:', propertyTypeId);

    // Get area field groups
    const areaTerraceGroup = document.getElementById('area_terrace_group');
    const areaTotalGroup = document.getElementById('area_total_group');
    const areaFloorGroup = document.getElementById('area_floor_group');
    const areaPlotGroup = document.getElementById('area_plot_group');

    // Get the area plot label
    const areaPlotLabel = areaPlotGroup ? areaPlotGroup.querySelector('label') : null;

    if (propertyTypeId === '24') { // Plot property type
        console.log('Property type is Plot - hiding terrace, total, and floor fields');

        // Hide the specified fields
        if (areaTerraceGroup) {
            areaTerraceGroup.style.display = 'none';
        }
        if (areaTotalGroup) {
            areaTotalGroup.style.display = 'none';
        }
        if (areaFloorGroup) {
            areaFloorGroup.style.display = 'none';
        }

        // Change the area_plot label to "Plot"
        if (areaPlotLabel) {
            areaPlotLabel.textContent = 'Plot';
        }
    } else {
        console.log('Property type is not Plot - showing all fields');

        // Show all fields
        if (areaTerraceGroup) {
            areaTerraceGroup.style.display = 'block';
        }
        if (areaTotalGroup) {
            areaTotalGroup.style.display = 'block';
        }
        if (areaFloorGroup) {
            areaFloorGroup.style.display = 'block';
        }

        // Change the area_plot label to "Garden/Plot"
        if (areaPlotLabel) {
            areaPlotLabel.textContent = 'Garden/Plot';
        }
    }
}

// Function to handle building details section conditional display
function handleBuildingDetailsDisplay(propertyTypeId) {
    console.log('Handling building details section display for property type:', propertyTypeId);

    // Get building details section
    const buildingDetailsSection = document.getElementById('building-details-section');
    const buildingBedsBathsSection = document.getElementById('building-beds-baths-section');
    const energySection = document.getElementById('energy-section');

    if (propertyTypeId === '24') { // Plot property type
        console.log('Property type is Plot - hiding building details section');

        // Hide the entire building details section
        if (buildingDetailsSection) {
            buildingDetailsSection.style.display = 'none';
            buildingBedsBathsSection.style.display = 'none';
            energySection.style.display = 'none';
        }
    } else {
        console.log('Property type is not Plot - showing building details section');

        // Show the building details section
        if (buildingDetailsSection) {
            buildingDetailsSection.style.display = '';
            buildingBedsBathsSection.style.display = '';
            energySection.style.display = '';
        }
    }
}

// Function to handle completed month field conditional display
function handleCompletedMonthDisplay(completedStatusId) {
    console.log('Handling completed month display for status:', completedStatusId);

    // Get completed month group
    const completedMonthGroup = document.getElementById('completed_month_group');

    if (completedStatusId === '2' || completedStatusId === '3') { // Under Construction or Off Plan
        console.log('Status is Under Construction or Off Plan - showing completed month field');

        // Show the completed month field
        if (completedMonthGroup) {
            completedMonthGroup.style.display = '';
        }
    } else {
        console.log('Status is Completed or other - hiding completed month field');

        // Hide the completed month field
        if (completedMonthGroup) {
            completedMonthGroup.style.display = 'none';
        }
    }
}

// Image Upload Functionality
let imageUploadInitialized = false;
const propertyId = {{ $property->id }};
let isUploading = false; // Prevent duplicate uploads

function initializeImageUpload() {
    const dropZone = document.getElementById('imageDropZone');
    const imageInput = document.getElementById('imageInput');
    const uploadProgress = document.getElementById('uploadProgress');
    const progressBar = document.getElementById('progressBar');
    const uploadStatus = document.getElementById('uploadStatus');
    const imagesGrid = document.getElementById('imagesGrid');

    console.log('Initializing image upload...', {
        dropZone: !!dropZone,
        imageInput: !!imageInput,
        uploadProgress: !!uploadProgress,
        imagesGrid: !!imagesGrid,
        alreadyInitialized: imageUploadInitialized
    });

    if (!dropZone || !imageInput) {
        console.error('Image upload elements not found! Will retry when tab is shown.');
        return;
    }

    // If already initialized, remove old listeners first
    if (imageUploadInitialized) {
        console.log('Already initialized, skipping to prevent duplicate listeners');
        return;
    }

    imageUploadInitialized = true;

    // Get reference to file input
    const currentImageInput = imageInput;

    // Prevent defaults function
    function preventDefaults(e) {
        e.preventDefault();
        e.stopPropagation();
    }

    // Handle drop function
    function handleDrop(e) {
        const dt = e.dataTransfer;
        const files = dt.files;
        handleFiles(files);
    }

    // Drag and Drop Events
    if (dropZone) {
        // Prevent defaults for all drag events
        ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
            dropZone.addEventListener(eventName, preventDefaults, false);
        });

        // Visual feedback on drag enter/over
        const dragEnterHandler = () => {
            dropZone.style.backgroundColor = '#e9ecef';
            dropZone.style.borderColor = '#007bff';
        };

        const dragLeaveHandler = () => {
            dropZone.style.backgroundColor = '#f8f9fa';
            dropZone.style.borderColor = '#dee2e6';
        };

        dropZone.addEventListener('dragenter', dragEnterHandler, false);
        dropZone.addEventListener('dragover', dragEnterHandler, false);
        dropZone.addEventListener('dragleave', dragLeaveHandler, false);
        dropZone.addEventListener('drop', function(e) {
            dragLeaveHandler();
            handleDrop(e);
        }, false);

        // Click to select files
        const dropZoneClickHandler = () => {
            currentImageInput.click();
        };
        dropZone.addEventListener('click', dropZoneClickHandler, false);
    }

    // File Input Change - use once to prevent duplicates
    if (currentImageInput) {
        console.log('Attaching change event to image input');
        const fileInputChangeHandler = function(e) {
            console.log('File input changed, files selected:', e.target.files.length);
            if (e.target.files && e.target.files.length > 0) {
                handleFiles(e.target.files);
                // Clear the input to allow selecting the same file again
                e.target.value = '';
            } else {
                console.log('No files selected');
            }
        };
        currentImageInput.addEventListener('change', fileInputChangeHandler, false);
        fileInputListener = fileInputChangeHandler;
        console.log('Image input event listener attached successfully');
    } else {
        console.error('Image input element not found after initialization!');
    }

    // Handle Files
    function handleFiles(files) {
        console.log('handleFiles called with', files.length, 'files');

        // Prevent duplicate uploads
        if (isUploading) {
            console.log('Upload already in progress, ignoring duplicate call');
            return;
        }

        if (!files || files.length === 0) {
            console.log('No files provided');
            return;
        }

        const validFiles = Array.from(files).filter(file => {
            console.log('Checking file:', file.name, 'Type:', file.type, 'Size:', file.size);
            if (!file.type.startsWith('image/')) {
                alert(`${file.name} is not an image file.`);
                return false;
            }
            if (file.size > 10 * 1024 * 1024) {
                alert(`${file.name} is larger than 10MB.`);
                return false;
            }
            return true;
        });

        console.log('Valid files:', validFiles.length);

        if (validFiles.length > 0) {
            uploadImages(validFiles);
        } else {
            alert('No valid image files selected.');
        }
    }

    // Upload Images with Progress
    function uploadImages(files) {
        // Prevent duplicate uploads
        if (isUploading) {
            console.log('Upload already in progress, ignoring duplicate call');
            return;
        }

        console.log('Starting upload for', files.length, 'files');

        isUploading = true;

        const formData = new FormData();
        files.forEach(file => {
            formData.append('images[]', file);
        });

        // Get CSRF token
        const csrfToken = document.querySelector('meta[name="csrf-token"]');
        if (!csrfToken) {
            alert('CSRF token not found. Please refresh the page.');
            isUploading = false;
            return;
        }

        uploadProgress.style.display = 'block';
        progressBar.style.width = '0%';
        progressBar.textContent = '0%';
        uploadStatus.textContent = 'Uploading images...';

        const xhr = new XMLHttpRequest();

        xhr.upload.addEventListener('progress', function(e) {
            if (e.lengthComputable) {
                const percentComplete = (e.loaded / e.total) * 100;
                progressBar.style.width = percentComplete + '%';
                progressBar.textContent = Math.round(percentComplete) + '%';
            }
        });

        xhr.addEventListener('load', function() {
            console.log('Upload response status:', xhr.status);
            console.log('Upload response:', xhr.responseText);

            if (xhr.status === 200) {
                try {
                    const response = JSON.parse(xhr.responseText);
                    if (response.success) {
                        progressBar.style.width = '100%';
                        progressBar.textContent = '100%';
                        uploadStatus.textContent = 'Upload complete!';

                        // Add uploaded images to grid
                        if (response.images && response.images.length > 0) {
                            response.images.forEach(image => {
                                addImageToGrid(image);
                            });
                        }

                        // Reset after 2 seconds
                        setTimeout(() => {
                            uploadProgress.style.display = 'none';
                            isUploading = false;
                        }, 2000);
                    } else {
                        alert('Error: ' + (response.message || 'Unknown error'));
                        uploadProgress.style.display = 'none';
                        isUploading = false;
                    }
                } catch (e) {
                    console.error('Error parsing response:', e);
                    alert('Error parsing server response. Please check console.');
                    uploadProgress.style.display = 'none';
                    isUploading = false;
                }
            } else if (xhr.status === 422) {
                // Validation error
                try {
                    const response = JSON.parse(xhr.responseText);
                    let errorMsg = 'Validation failed:\n';
                    if (response.errors) {
                        Object.keys(response.errors).forEach(key => {
                            errorMsg += response.errors[key].join('\n') + '\n';
                        });
                    } else {
                        errorMsg += response.message || 'Unknown validation error';
                    }
                    alert(errorMsg);
                } catch (e) {
                    alert('Validation error. Please check the console.');
                    console.error('Validation error response:', xhr.responseText);
                }
                uploadProgress.style.display = 'none';
                isUploading = false;
            } else {
                alert('Upload failed with status: ' + xhr.status + '. Please try again.');
                console.error('Upload failed:', xhr.responseText);
                uploadProgress.style.display = 'none';
                isUploading = false;
            }
        });

        xhr.addEventListener('error', function() {
            console.error('XHR error event fired');
            alert('Upload error. Please check your connection and try again.');
            uploadProgress.style.display = 'none';
            isUploading = false;
        });

        xhr.addEventListener('abort', function() {
            console.log('Upload aborted');
            uploadProgress.style.display = 'none';
            isUploading = false;
        });

        const url = `/properties/${propertyId}/images`;
        console.log('Uploading to:', url);

        xhr.open('POST', url);
        xhr.setRequestHeader('X-CSRF-TOKEN', csrfToken.content);
        xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
        xhr.send(formData);
    }

    // Add Image to Grid
    function addImageToGrid(image) {
        const col = document.createElement('div');
        col.className = 'col-md-3 mb-3 image-item';
        col.setAttribute('data-image-id', image.id);
        col.setAttribute('data-position', image.position);

        const isDefault = image.is_default === 'Y' ? 'btn-success' : 'btn-outline-secondary';
        const starIcon = image.is_default === 'Y' ? 'mdi-star' : 'mdi-star-outline';
        const title = image.is_default === 'Y' ? 'Primary Image' : 'Set as Primary';

        col.innerHTML = `
            <div class="card position-relative" style="cursor: move;">
                <img src="${image.url}"
                     class="card-img-top"
                     alt="Property Image"
                     style="height: 200px; object-fit: cover;">
                <div class="card-body p-2">
                    <div class="d-flex justify-content-between align-items-center">
                        <button type="button"
                                class="btn btn-sm ${isDefault} set-default-btn"
                                data-image-id="${image.id}"
                                title="${title}">
                            <i class="mdi ${starIcon}"></i>
                        </button>
                        <button type="button"
                                class="btn btn-sm btn-danger delete-image-btn"
                                data-image-id="${image.id}"
                                title="Delete Image">
                            <i class="mdi mdi-delete"></i>
                        </button>
                    </div>
                    <small class="text-muted d-block text-center mt-2">Position: <span class="position-number">${image.position}</span></small>
                </div>
            </div>
        `;

        const imagesGrid = document.getElementById('imagesGrid');
        if (imagesGrid) {
            imagesGrid.appendChild(col);
            attachImageEventListeners(col);
            // Reinitialize SortableJS after adding new image
            if (typeof initializeSortable === 'function') {
                initializeSortable();
            }
        }
    }

    // Set Default Image
    function attachImageEventListeners(element) {
        const setDefaultBtn = element.querySelector('.set-default-btn');
        const deleteBtn = element.querySelector('.delete-image-btn');

        if (setDefaultBtn) {
            setDefaultBtn.addEventListener('click', function() {
                const imageId = this.getAttribute('data-image-id');
                setDefaultImage(imageId);
            });
        }

        if (deleteBtn) {
            deleteBtn.addEventListener('click', function() {
                const imageId = this.getAttribute('data-image-id');
                if (confirm('Are you sure you want to delete this image?')) {
                    deleteImage(imageId, element);
                }
            });
        }
    }

    // Attach event listeners to existing images
    document.querySelectorAll('.image-item').forEach(item => {
        attachImageEventListeners(item);
    });

    // Set Default Image Function
    function setDefaultImage(imageId) {
        fetch(`/properties/${propertyId}/images/${imageId}/set-default`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                // Update all buttons
                document.querySelectorAll('.set-default-btn').forEach(btn => {
                    btn.className = 'btn btn-sm btn-outline-secondary set-default-btn';
                    btn.querySelector('i').className = 'mdi mdi-star-outline';
                    btn.setAttribute('title', 'Set as Primary');
                });

                // Update clicked button
                const clickedBtn = document.querySelector(`.set-default-btn[data-image-id="${imageId}"]`);
                if (clickedBtn) {
                    clickedBtn.className = 'btn btn-sm btn-success set-default-btn';
                    clickedBtn.querySelector('i').className = 'mdi mdi-star';
                    clickedBtn.setAttribute('title', 'Primary Image');
                }
            } else {
                alert('Error: ' + data.message);
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('Error setting default image.');
        });
    }

    // Delete Image Function
    function deleteImage(imageId, element) {
        fetch(`/properties/${propertyId}/images/${imageId}`, {
            method: 'DELETE',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                element.remove();
                updatePositions();
            } else {
                alert('Error: ' + data.message);
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('Error deleting image.');
        });
    }

}

// Update Positions (for drag and drop reordering) - Global function
function updatePositions() {
    const imagesGrid = document.getElementById('imagesGrid');
    if (!imagesGrid) {
        console.warn('imagesGrid not found for updatePositions');
        return;
    }

    const positions = [];
    document.querySelectorAll('#imagesGrid .image-item').forEach((item, index) => {
        const newPosition = index + 1;
        positions.push({
            id: parseInt(item.getAttribute('data-image-id')),
            position: newPosition
        });
        item.setAttribute('data-position', newPosition);
        const positionNumber = item.querySelector('.position-number');
        if (positionNumber) {
            positionNumber.textContent = newPosition;
        }
    });

    if (positions.length > 0) {
        fetch(`/properties/${currentPropertyId}/images/update-positions`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
            },
            body: JSON.stringify({ positions: positions })
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                console.log('Positions updated successfully');
            } else {
                console.error('Error updating positions:', data.message);
            }
        })
        .catch(error => {
            console.error('Error:', error);
        });
    }
}

// Initialize SortableJS for drag and drop reordering - Global function
let sortableInstance = null;
function initializeSortable() {
    console.log('initializeSortable called');
    const imagesGrid = document.getElementById('imagesGrid');
    if (!imagesGrid) {
        console.warn('imagesGrid not found, cannot initialize SortableJS');
        return;
    }

    // Check if SortableJS is loaded
    if (typeof Sortable === 'undefined') {
        console.error('SortableJS is not loaded! Make sure the script is included.');
        return;
    }

    // Destroy existing instance if it exists
    if (sortableInstance) {
        console.log('Destroying existing SortableJS instance');
        sortableInstance.destroy();
        sortableInstance = null;
    }

    // Initialize SortableJS
    console.log('Initializing SortableJS on imagesGrid');
    sortableInstance = new Sortable(imagesGrid, {
        animation: 150,
        // No handle specified - entire image-item is draggable
        filter: '.set-default-btn, .delete-image-btn', // Prevent dragging when clicking buttons
        preventOnFilter: true,
        draggable: '.image-item', // Specify which children are draggable
        ghostClass: 'sortable-ghost',
        chosenClass: 'sortable-chosen',
        dragClass: 'sortable-drag',
        onStart: function(evt) {
            console.log('Drag started on item:', evt.item);
        },
        onEnd: function(evt) {
            console.log('Drag ended, updating positions. Old index:', evt.oldIndex, 'New index:', evt.newIndex);
            updatePositions();
        }
    });
    console.log('SortableJS initialized successfully');
}

// Start Calculating Sale Comission
// Existing blur events
document.getElementById("sale_price").addEventListener('blur', function(){
    calc_sale_comission('comission');
});
document.getElementById("comission").addEventListener('blur', function(){
    calc_sale_comission('comission');
});
document.getElementById("comission_percentage").addEventListener('blur', function(){
    calc_sale_comission('comission_percentage');
});

// New blur events for listing and selling agents
document.getElementById("listing_agent_comission").addEventListener('blur', function(){
    calc_sale_comission('listing_agent_comission');
});
document.getElementById("listing_agent_percentage").addEventListener('blur', function(){
    calc_sale_comission('listing_agent_percentage');
});
document.getElementById("selling_agent_comission").addEventListener('blur', function(){
    calc_sale_comission('selling_agent_comission');
});
document.getElementById("selling_agent_percentage").addEventListener('blur', function(){
    calc_sale_comission('selling_agent_percentage');
});

function calc_sale_comission(from)
{
    let sale_price = parseFloat(document.getElementById("sale_price").value) || 0;
    let comission = parseFloat(document.getElementById("comission").value) || 0;
    let comission_percentage = parseFloat(document.getElementById("comission_percentage").value) || 0;
    let listing_agent_comission = parseFloat(document.getElementById("listing_agent_comission").value) || 0;
    let listing_agent_percentage = parseFloat(document.getElementById("listing_agent_percentage").value) || 0;
    let selling_agent_comission = parseFloat(document.getElementById("selling_agent_comission").value) || 0;
    let selling_agent_percentage = parseFloat(document.getElementById("selling_agent_percentage").value) || 0;

    // Calculate commission and percentage
    if(from == 'comission')
    {
        comission_percentage = ((comission / sale_price) * 100).toFixed(2);
        document.getElementById("comission_percentage").value = comission_percentage;

        // Distribute equally between agents
        listing_agent_comission = Math.round(comission / 2);
        selling_agent_comission = Math.round(comission / 2);
        listing_agent_percentage = 50;
        selling_agent_percentage = 50;

        document.getElementById("listing_agent_comission").value = listing_agent_comission;
        document.getElementById("selling_agent_comission").value = selling_agent_comission;
        document.getElementById("listing_agent_percentage").value = listing_agent_percentage;
        document.getElementById("selling_agent_percentage").value = selling_agent_percentage;
    }
    else if(from == 'comission_percentage')
    {
        comission = ((comission_percentage / 100) * sale_price);
        document.getElementById("comission").value = comission;

        // Distribute equally between agents
        listing_agent_comission = Math.round(comission / 2);
        selling_agent_comission = Math.round(comission / 2);
        listing_agent_percentage = 50;
        selling_agent_percentage = 50;

        document.getElementById("listing_agent_comission").value = listing_agent_comission;
        document.getElementById("selling_agent_comission").value = selling_agent_comission;
        document.getElementById("listing_agent_percentage").value = listing_agent_percentage;
        document.getElementById("selling_agent_percentage").value = selling_agent_percentage;
    }
    // Calculate based on listing agent commission
    else if(from == 'listing_agent_comission')
    {
        if(comission > 0) {
            listing_agent_percentage = ((listing_agent_comission / comission) * 100).toFixed(2);
            document.getElementById("listing_agent_percentage").value = listing_agent_percentage;

            selling_agent_comission = Math.round(comission - listing_agent_comission);
            selling_agent_percentage = ((selling_agent_comission / comission) * 100).toFixed(2);

            document.getElementById("selling_agent_comission").value = selling_agent_comission;
            document.getElementById("selling_agent_percentage").value = selling_agent_percentage;
        }
    }
    // Calculate based on listing agent percentage
    else if(from == 'listing_agent_percentage')
    {
        if(comission > 0) {
            listing_agent_comission = Math.round((listing_agent_percentage / 100) * comission);
            document.getElementById("listing_agent_comission").value = listing_agent_comission;

            selling_agent_percentage = (100 - listing_agent_percentage).toFixed(2);
            selling_agent_comission = Math.round((selling_agent_percentage / 100) * comission);

            document.getElementById("selling_agent_comission").value = selling_agent_comission;
            document.getElementById("selling_agent_percentage").value = selling_agent_percentage;
        }
    }
    // Calculate based on selling agent commission
    else if(from == 'selling_agent_comission')
    {
        if(comission > 0) {
            selling_agent_percentage = ((selling_agent_comission / comission) * 100).toFixed(2);
            document.getElementById("selling_agent_percentage").value = selling_agent_percentage;

            listing_agent_comission = Math.round(comission - selling_agent_comission);
            listing_agent_percentage = ((listing_agent_comission / comission) * 100).toFixed(2);

            document.getElementById("listing_agent_comission").value = listing_agent_comission;
            document.getElementById("listing_agent_percentage").value = listing_agent_percentage;
        }
    }
    // Calculate based on selling agent percentage
    else if(from == 'selling_agent_percentage')
    {
        if(comission > 0) {
            selling_agent_comission = Math.round((selling_agent_percentage / 100) * comission);
            document.getElementById("selling_agent_comission").value = selling_agent_comission;

            listing_agent_percentage = (100 - selling_agent_percentage).toFixed(2);
            listing_agent_comission = Math.round((listing_agent_percentage / 100) * comission);

            document.getElementById("listing_agent_comission").value = listing_agent_comission;
            document.getElementById("listing_agent_percentage").value = listing_agent_percentage;
        }
    }

    document.getElementById("net_price").value = Math.round(sale_price - comission);
}
// End Calculating Sale Comission

// Initialize when DOM is ready
document.addEventListener('DOMContentLoaded', function() {
    // Try to initialize immediately (in case tab is already visible)
    setTimeout(() => {
        initializeImageUpload();
        // Also initialize SortableJS if Pictures tab is already visible
        const picturesTab = document.getElementById('pictures');
        if (picturesTab && picturesTab.classList.contains('show')) {
            initializeSortable();
        }
    }, 500);
});

</script>

@endsection