@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">
                        <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 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">
                                            For Sale
                                        </button>
                                    </h2>
                                    <div id="collapseForSale" class="accordion-collapse collapse show" aria-labelledby="headingForSale" data-bs-parent="#pricesAccordion">
                                        <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="€" />
                                                </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="€" />
                                                </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="€" />
                                                </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="€" />
                                                </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="%" />
                                                </div>
                                                <div class="col-md-4">
                                                    <x-form.input name="listing_agent_percentage" type="number" :min="0" :step="0.01" class="w-50" append="%" />
                                                </div>
                                                <div class="col-md-4">
                                                    <x-form.input name="selling_agent_percentage" type="number" :min="0" :step="0.01" class="w-50" append="%" />
                                                </div>
                                            </div>

                                            <div class="row">
                                                <div class="col-md-12">
                                                    <x-form.textarea name="comission_notes" label="Comission Notes" :rows="3" />
                                                </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" label="Net Price" type="number" :min="0" :step="0.01" append="€" />
                                                </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)" />
                                                </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="€" />
                                                </div>
                                                <div class="col-md-4">
                                                    <x-form.input name="valution_year" label="Valution Year" type="number" :min="0" />
                                                </div>
                                                <div class="col-md-4">
                                                    <x-form.input name="deed_value" label="Deed Value" type="number" :min="0" :step="0.01" append="€" />
                                                </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" />
                                                </div>
                                                <div class="col-md-4 mb-3">
                                                    <x-form.input name="garage_tax" label="Garage Tax" type="number" :min="0" :step="0.01" append="€ / year" />
                                                </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" />
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- For Rent Accordion -->
                                <div class="accordion-item">
                                    <h2 class="accordion-header" id="headingForRent">
                                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseForRent" aria-expanded="false" aria-controls="collapseForRent">
                                            For Rent
                                        </button>
                                    </h2>
                                    <div id="collapseForRent" class="accordion-collapse collapse" aria-labelledby="headingForRent" data-bs-parent="#pricesAccordion">
                                        <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" id="headingRentLT">
                                                        <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseRentLT" aria-expanded="true" aria-controls="collapseRentLT">
                                                            For Rent - Long Term
                                                        </button>
                                                    </h2>
                                                    <div id="collapseRentLT" class="accordion-collapse collapse show" aria-labelledby="headingRentLT" data-bs-parent="#rentSubAccordion">
                                                        <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" />
                                                                </div>
                                                                <div class="col-md-4">
                                                                    <x-form.input name="security_deposit_lt" label="Security Deposit" append="€" type="number" :min="0" :step="0.01" />
                                                                </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" />
                                                                </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" />
                                                                </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" />
                                                                </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" />
                                                                </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" />
                                                                </div>

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

                                                            </div>

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

                                                <!-- Short Term -->
                                                <div class="accordion-item">
                                                    <h2 class="accordion-header" id="headingRentST">
                                                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseRentST" aria-expanded="false" aria-controls="collapseRentST">
                                                            For Rent - Short Term
                                                        </button>
                                                    </h2>
                                                    <div id="collapseRentST" class="accordion-collapse collapse" aria-labelledby="headingRentST" data-bs-parent="#rentSubAccordion">
                                                        <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="€" />
                                                                </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="€" />
                                                                </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="€" />
                                                                </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="€" />
                                                                </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="%" />
                                                                </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="%" />
                                                                </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="%" />
                                                                </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="€" />
                                                                </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="€" />
                                                                </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="€" />
                                                                </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="€" />
                                                                </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="%" />
                                                                </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="%" />
                                                                </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="%" />
                                                                </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" />
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </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>
                                    <div class="row">
                                        @foreach($features as $feature)
                                            <div class="col-md-3 mb-2">
                                                <x-form.checkbox
                                                    name="features[]"
                                                    :value="$feature->id"
                                                    :label="$feature->name"
                                                    :id="'feature_' . $feature->id"
                                                />
                                            </div>
                                        @endforeach
                                    </div>
                                </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">


                        <x-form.form id="picturesForm" method="POST" :files="true">
                            <div class="row">
                                <div class="col-md-12">
                                    <h6 class="mb-3">Property Images</h6>
                                    <x-form.file
                                        name="images"
                                        :multiple="true"
                                        accept="image/*"
                                        help="Select multiple images. First image will be set as primary."
                                        :preview="true"
                                    />

                                    <div id="imagePreview" class="row">
                                        <!-- Image previews will be shown here -->
                                    </div>
                                </div>
                            </div>

                            <div class="text-end">
                                <x-form.button
                                    type="submit"
                                    variant="primary"
                                    icon="mdi mdi-upload"
                                >
                                    Upload Images
                                </x-form.button>
                            </div>
                        </x-form.form>


                    </div>

                    <!-- Tab 6: Documents -->
                    <div class="tab-pane fade" id="documents" role="tabpanel" aria-labelledby="documents-tab">


                        <x-form.form id="documentsForm" method="POST" :files="true">
                            <div class="row">
                                <div class="col-md-12">
                                    <h6 class="mb-3">Property Documents</h6>
                                    <div class="row">
                                        <div class="col-md-6">
                                            <x-form.select
                                                name="document_type"
                                                label="Document Type"
                                                placeholder="Select Type"
                                                :options="[
                                                    'floor_plan' => 'Floor Plan',
                                                    'brochure' => 'Brochure',
                                                    'contract' => 'Contract',
                                                    'other' => 'Other'
                                                ]"
                                            />
                                        </div>
                                        <div class="col-md-6">
                                            <x-form.file
                                                name="documents"
                                                label="Documents"
                                                :multiple="true"
                                                accept=".pdf,.doc,.docx"
                                            />
                                        </div>
                                    </div>
                                    <x-form.textarea
                                        name="description"
                                        label="Description"
                                        :rows="3"
                                        placeholder="Document description..."
                                    />
                                </div>
                            </div>

                            <div class="text-end">
                                <x-form.button
                                    type="submit"
                                    variant="primary"
                                    icon="mdi mdi-upload"
                                >
                                    Upload Documents
                                </x-form.button>
                            </div>
                        </x-form.form>


                    </div>

                    <!-- Tab 7: Address -->
                    <div class="tab-pane fade" id="address" role="tabpanel" aria-labelledby="address-tab">


                        <x-form.form id="addressForm" method="POST">
                            <div class="row">
                                <div class="col-md-8">
                                    <x-form.input
                                        name="street_address"
                                        label="Street Address"
                                        placeholder="Enter full street address"
                                    />
                                </div>
                                <div class="col-md-4">
                                    <x-form.input
                                        name="postal_code"
                                        label="Postal Code"
                                        placeholder="Postal code"
                                    />
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-6">
                                    <x-form.input
                                        name="latitude"
                                        label="Latitude"
                                        type="number"
                                        :step="'any'"
                                        placeholder="e.g., 40.4168"
                                    />
                                </div>
                                <div class="col-md-6">
                                    <x-form.input
                                        name="longitude"
                                        label="Longitude"
                                        type="number"
                                        :step="'any'"
                                        placeholder="e.g., -3.7038"
                                    />
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-12">
                                    <x-form.group label="Google Maps" help="Click on the map to set the exact location">
                                        <div id="map" style="height: 300px; width: 100%; border: 1px solid #ddd; border-radius: 5px;"></div>
                                    </x-form.group>
                                </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">


                        <x-form.form id="contactsForm" method="POST">
                            <div class="row">
                                <div class="col-md-6">
                                    <x-form.input
                                        name="contact_name"
                                        label="Contact Name"
                                        placeholder="Contact person name"
                                    />
                                </div>
                                <div class="col-md-6">
                                    <x-form.input
                                        name="contact_email"
                                        label="Contact Email"
                                        type="email"
                                        placeholder="contact@example.com"
                                    />
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-6">
                                    <x-form.input
                                        name="contact_phone"
                                        label="Contact Phone"
                                        type="tel"
                                        placeholder="+34 123 456 789"
                                    />
                                </div>
                                <div class="col-md-6">
                                    <x-form.select
                                        name="listed_by"
                                        label="Listed By"
                                        placeholder="Select Agent"
                                        :options="$users->pluck('name', 'name')->toArray()"
                                    />
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-12">
                                    <x-form.textarea
                                        name="contact_notes"
                                        label="Contact Notes"
                                        :rows="3"
                                        placeholder="Additional contact information..."
                                    />
                                </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')

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

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')
                }
            })
            .then(response => {
                if (response.redirected) {
                    window.location.href = response.url;
                    return;
                }
                return response.json();
            })
            .then(data => {
                if (data && data.success) {
                    showAlert('success', data.message);
                } else if (data && !data.success) {
                    showAlert('error', data.message || 'Failed to update property details');
                }
            })
            .catch(error => {
                console.error('Error:', error);
                showAlert('error', 'An error occurred while updating');
            });
        });
    }
});

// Update form actions with property ID
function updateFormActions() {
    if (currentPropertyId) {
        document.getElementById('descriptionsForm').action = `/properties/${currentPropertyId}/descriptions`;
        document.getElementById('pricingForm').action = `/properties/${currentPropertyId}/pricing`;
        document.getElementById('featuresForm').action = `/properties/${currentPropertyId}/features`;
        document.getElementById('picturesForm').action = `/properties/${currentPropertyId}/images`;
        document.getElementById('documentsForm').action = `/properties/${currentPropertyId}/documents`;
        document.getElementById('addressForm').action = `/properties/${currentPropertyId}/address`;
        document.getElementById('contactsForm').action = `/properties/${currentPropertyId}/contacts`;
    }
}

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

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

        const formData = new FormData(this);

        fetch(this.action, {
            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);
            } else {
                showAlert('error', 'Failed to save data');
            }
        })
        .catch(error => {
            console.error('Error:', error);
            showAlert('error', 'An error occurred while saving');
        });
    });
});

// Image preview functionality
document.getElementById('images').addEventListener('change', function(e) {
    const files = Array.from(e.target.files);
    const preview = document.getElementById('imagePreview');
    preview.innerHTML = '';

    files.forEach((file, index) => {
        if (file.type.startsWith('image/')) {
            const reader = new FileReader();
            reader.onload = function(e) {
                const col = document.createElement('div');
                col.className = 'col-md-3 mb-3';
                col.innerHTML = `
                    <div class="card">
                        <img src="${e.target.result}" class="card-img-top" style="height: 150px; object-fit: cover;">
                        <div class="card-body p-2">
                            <small class="text-muted">${file.name}</small>
                            ${index === 0 ? '<span class="badge bg-primary">Primary</span>' : ''}
                        </div>
                    </div>
                `;
                preview.appendChild(col);
            };
            reader.readAsDataURL(file);
        }
    });
});

// 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 integration (you'll need to add your API key)
function initMap() {
    const map = new google.maps.Map(document.getElementById("map"), {
        zoom: 10,
        center: { lat: 40.4168, lng: -3.7038 }, // Madrid coordinates
    });

    let marker = null;

    map.addListener("click", (event) => {
        if (marker) {
            marker.setMap(null);
        }

        marker = new google.maps.Marker({
            position: event.latLng,
            map: map,
        });

        document.getElementById('latitude').value = event.latLng.lat();
        document.getElementById('longitude').value = event.latLng.lng();
    });
}

// Initialize map when address tab is shown
document.getElementById('address-tab').addEventListener('shown.bs.tab', function() {
    if (typeof google !== 'undefined') {
        initMap();
    }
});

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

</script>

@endsection