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

@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">Add Property</h4>
    </div>

    <div class="text-end">
        <ol class="breadcrumb m-0 py-0">
            <li class="breadcrumb-item"><a href="/dashboard/index">Dashboard</a></li>
            <li class="breadcrumb-item"><a href="{{ route('properties.index') }}">Properties</a></li>
            <li class="breadcrumb-item active">Add Property</li>
        </ol>
    </div>
</div>

<!-- Flash Messages -->
@if(session('success'))
    <div class="alert alert-success alert-dismissible fade show" role="alert">
        {{ session('success') }}
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
@endif

@if(session('error'))
    <div class="alert alert-danger alert-dismissible fade show" role="alert">
        {{ session('error') }}
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
@endif

<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 disabled" 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 disabled" 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 disabled" 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 disabled" 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 disabled" 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 disabled" 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 disabled" 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.details') }}">
                            <div class="row">
                                <div class="col-md-6">
                                    <x-form.input 
                                        name="ref_id" 
                                        label="Reference ID" 
                                        :required="true"
                                        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"
                                    />
                                </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"
                                    />
                                </div>
                                <div class="col-md-6">
                                    <x-form.select 
                                        name="state_id" 
                                        label="Province/State"
                                        placeholder="Select Province/State"
                                        :options="[]"
                                        :disabled="true"
                                        :required="true"
                                    />
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-6">
                                    <x-form.select 
                                        name="city_id" 
                                        label="City"
                                        placeholder="Select City"
                                        :options="[]"
                                        :disabled="true"
                                        :required="true"
                                    />
                                </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="[]"
                                                :disabled="true"
                                                :required="true"
                                            />
                                        </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" disabled>
                                                <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"
                                    />
                                </div>
                                <div class="col-md-6">
                                    <x-form.select 
                                        name="property_sub_type_id" 
                                        label="Sub Type"
                                        placeholder="Select Sub Type"
                                        :options="[]"
                                        :disabled="true"
                                    />
                                </div>
                            </div>

                            <!-- Commercial Options Row (only visible when Commercial is selected) -->
                            <div id="commercial-options" class="row" style="display: 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"
                                                {{ old('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"
                                                {{ old('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" disabled>
                                            <option value="">Select Commercial Sub Type</option>
                                        </select>
                                    </div>
                                </div>
                            </div>


                            <div id="building-beds-baths-section">

                                <div class="row">
                                    <div class="col-md-3">
                                        <x-form.input 
                                            name="beds" 
                                            label="Bedrooms" 
                                            type="number"
                                            :min="0"
                                        />
                                    </div>
                                    <div class="col-md-3">
                                        <x-form.input 
                                            name="baths" 
                                            label="Bathrooms" 
                                            type="number"
                                            :min="0"
                                        />
                                    </div>
                                    <div class="col-md-3">
                                        <x-form.select 
                                            name="completed_status_id" 
                                            label="Completion Status"
                                            :options="$completedStatuses"
                                            placeholder="Select Status"
                                        />
                                    </div>
                                    <div class="col-md-3">
                                        <x-form.select 
                                            name="completed_year" 
                                            label="Year Built"
                                            :options="$builtYears"
                                            placeholder="Select Year"
                                        />
                                    </div>
                                    
                                </div>
                                <div class="row" id="completed_month_group" style="display: 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"
                                        />
                                    </div>
                                </div>

                            </div>

                            <!-- Building Details Section -->
                            <div id="building-details-section">
                                <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"
                                        />
                                    </div>
                                    <div class="col-md-3">
                                        <x-form.input 
                                            name="levels" 
                                            label="Levels" 
                                            type="number"
                                            :min="0"
                                        />
                                    </div>
                                    <div class="col-md-3">
                                        <x-form.input 
                                            name="storeys" 
                                            label="Storeys" 
                                            type="number"
                                            :min="0"
                                        />
                                    </div>

                                    <div class="col-md-3">
                                        <x-form.input 
                                            name="properties_in_building" 
                                            label="No. Of Properties In Building" 
                                            type="number"
                                            :min="0"
                                        />
                                    </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"
                                        />
                                    </div>

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

                                    <div class="col-md-6 mb-3" id="area_terrace_group">
                                        <x-form.input 
                                            name="area_terrace" 
                                            label="Terrace" 
                                            type="number"
                                            :min="0"
                                        />
                                    </div>

                                    <div class="col-md-6 mb-3" id="area_total_group">
                                        <x-form.input 
                                            name="area_total" 
                                            label="Total Size" 
                                            type="number"
                                            :min="0"
                                        />
                                    </div>

                                    <div class="col-md-6 mb-3" id="area_plot_group">
                                        <x-form.input 
                                            name="area_plot" 
                                            label="Garden/Plot" 
                                            type="number"
                                            :min="0"
                                        />
                                    </div>

                                    <div class="col-md-6 mb-3" id="area_floor_group">
                                        <x-form.input 
                                            name="area_floor" 
                                            label="Int. Floor Space" 
                                            type="number"
                                            :min="0"
                                        />
                                    </div>
                                </div>
                            </div>








                            <!-- Energy Section -->
                            <div id="energy-section">
                                <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"
                                        />
                                    </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"
                                        />
                                    </div>

                                    <div class="col-md-6 mb-3">
                                        <x-form.input 
                                            name="energy_consumption" 
                                            label="Energy Consumption" 
                                            type="number"
                                            :min="0"
                                        />
                                    </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"
                                        />
                                    </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"
                                            />
                                        </div>
                                        <div class="col-md-2">
                                            <x-form.checkbox 
                                                name="is_featured" 
                                                label="Featured"
                                            />
                                        </div>

                                        <div class="col-md-2">
                                            <x-form.checkbox 
                                                name="nota_simple" 
                                                label="Nota Simple"
                                            />
                                        </div>
                                        <div class="col-md-2">
                                            <x-form.checkbox 
                                                name="ibi_receipt" 
                                                label="IBI Receipt"
                                            />
                                        </div>
                                        <div class="col-md-4">
                                            <x-form.checkbox 
                                                name="first_occupancy_licence" 
                                                label="First Occupancy Licence / AFO"
                                            />
                                        </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" 
                                    />
                                </div>
                                <div class="col-md-3">
                                    <x-form.input 
                                        name="long_term_ref" 
                                        label="Long Term Ref" 
                                    />
                                </div>
                                <div class="col-md-3">
                                    <x-form.input 
                                        name="short_term_ref" 
                                        label="Short Term Ref" 
                                    />
                                </div>
                                <div class="col-md-3">
                                    <x-form.input 
                                        name="rental_license_ref" 
                                        label="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"
                                    />
                                </div>
                            </div>

                            <div class="text-end">
                                <x-form.button 
                                    type="submit" 
                                    variant="primary"
                                    icon="mdi mdi-content-save"
                                >
                                    Save & Continue
                                </x-form.button>
                            </div>
                        </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 = 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'));
    
    // 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();
    
    // 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') { // Commercial property type
                    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) {
                // Show loading state
                propertySubTypeSelect.innerHTML = '<option value="">Loading sub-types...</option>';
                
                console.log('Fetching sub-types for property type:', propertyTypeId);
                
                // Fetch sub-types for selected property type
                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 => {
                        console.log('Sub-types response status:', response.status);
                        return response.json();
                    })
                    .then(data => {
                        console.log('Sub-types data:', data);
                        propertySubTypeSelect.innerHTML = '<option value="">Select Sub Type</option>';
                        
                        if (data && data.length > 0) {
                            data.forEach(subType => {
                                const option = document.createElement('option');
                                option.value = subType.id;
                                option.textContent = subType.name;
                                propertySubTypeSelect.appendChild(option);
                            });
                            propertySubTypeSelect.disabled = false;
                            
                            // If commercial options are visible, populate the duplicate dropdown
                            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;
                            }
                        } 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');
                    });
            }
        });
    }
    } catch (error) {
        console.error('Error attaching event listeners:', error);
    }
}

// Handle Details form submission - now redirects to edit view
// No need for AJAX since we're redirecting to edit view

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


// 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');
alert('here i am');
    // 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