@extends('admin.master_layout')
@section('title')
<title>{{__('admin.Edit property')}}</title>
@endsection
@section('admin-content')
<!-- Main Content -->
<div class="main-content">
    <section class="section">
        <div class="section-header">
        <h1>{{__('admin.Edit property')}}</h1>
        </div>


        <div class="section-body property_box">

            <div id="hidden-location-box" class="d-none">
                <div class="delete-dynamic-location">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="">{{__('admin.Nearest Location')}}</label>
                                <select name="nearest_locations[]" id="" class="form-control">
                                    <option value="">{{__('admin.Select')}}</option>
                                    @foreach ($nearest_locations as $nearest_location)
                                        <option value="{{ $nearest_location->id }}">{{ $nearest_location->location }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label for="">{{__('admin.Distance(km)')}}</label>
                                <input type="text" class="form-control" name="distances[]">
                            </div>
                        </div>
                        <div class="col-md-2">
                            <button type="button" class="btn btn-danger nearest-row-btn removeNearestPlaceRow plus_btn"><i class="fas fa-trash" aria-hidden="true"></i></button>
                        </div>
                    </div>
                </div>


            </div>

            <div id="hidden-addition-box" class="d-none">
                <div class="delete-dynamic-additio">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="">{{__('admin.Key')}}</label>
                                <input type="text" class="form-control" name="add_keys[]">
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label for="">{{__('admin.Value')}}</label>
                                <input type="text" class="form-control" name="add_values[]">
                            </div>
                        </div>
                        <div class="col-md-2">
                            <button type="button" class="btn btn-danger nearest-row-btn removeAdditioanRow plus_btn"><i class="fas fa-trash" aria-hidden="true"></i></button>
                        </div>
                    </div>
                </div>


            </div>

            <div id="hidden-plan-box" class="d-none">
                <div class="delete-dynamic-plan">

                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="">{{__('admin.Image')}}</label>
                                <input type="file" class="form-control-file" name="plan_images[]">
                            </div>
                        </div>

                        <div class="col-md-6">
                            <button type="button" class="btn btn-danger nearest-row-btn removePlanRow plus_btn"><i class="fas fa-trash" aria-hidden="true"></i> {{__('admin.Remove Plan')}}</button>
                        </div>

                        <div class="col-12">
                            <div class="form-group">
                                <label for="">{{__('admin.Title')}}</label>
                                <input type="text" class="form-control" name="plan_titles[]">
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="form-group">
                                <label for="">{{__('admin.Description')}}</label>
                                <textarea name="plan_descriptions[]" id="" class="form-control text-area-5" cols="30" rows="10"></textarea>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <a href="{{ route('admin.property.index') }}" class="btn btn-primary"><i class="fas fa-list"></i> {{__('admin.Own Properties')}}</a>
            <form action="{{ route('admin.property.update', $property->id) }}" method="POST" enctype="multipart/form-data">
                @csrf
                @method('PUT')
                <div class="row mt-4">
                    <div class="col-12">

                        <div class="card">
                            <div class="card-body" data-select2-id="select2-data-46-mub9">
                                <h4>{{__('Basic Information')}}</h4>
                                <hr>
                                <input type="hidden" name="owner_id" id="owner_id" value="0">
                               
                                <div class="row">
                                    <div class="col-md-6">
                                         <div class="form-group">
                                            <label for="title">{{__('admin.Title')}}<span class="text-danger">*</span></label>
                                            <input type="text" name="title" class="form-control" id="title" value="{{ html_decode($property->title) }}">                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="slug">{{__('admin.Slug')}} <span class="text-danger">*</span></label>
                                    <input type="text" name="slug" class="form-control" id="slug" value="{{ html_decode($property->slug) }}">
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="purpose">{{__('admin.Purpose')}} <span class="text-danger">*</span></label>
                                            <select name="purpose" id="purpose" class="form-control">
                                            <option {{ $property->purpose == 'sale' ? 'selected' : '' }} value="sale">{{__('admin.For Sale')}}</option>
                                                <option {{ $property->purpose == 'rent' ? 'selected' : '' }} value="rent">{{__('admin.For Rent')}}</option>
                                                <option {{ $property->purpose == 'either' ? 'selected' : '' }} value="rent">{{__('admin.For Either')}}</option>
                                            </select>
                                        </div>
                                    </div>

                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="multiple-select-tag">{{__('admin.Property Type')}} <span class="text-danger">*</span></label>
                                            <select class="form-control select2" id="property_type" name="property_type[]" multiple="multiple">  
                                            
                                            <option value="">{{__('admin.Select')}}</option>
                                                @foreach ($types as $type)
                                                <option {{ $property->property_type_id == $type->id ? 'selected' : '' }} value="{{ $type->id }}">{{ $type->name }}</option>
                                                @endforeach
                                            </select>
                                            
                                        </div>
                                    </div>

                                    
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="">{{__('admin.Category')}} <span class="text-danger">*</span></label>
                                            <select name="category_id" id="category_id" class="form-control">
                                                <option value="">{{__('admin.Select')}}</option>
                                                @foreach ($categories as $category)
                                                <option value="{{ $category->id }}">{{ $category->name }}</option>
                                                @endforeach

                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="">{{__('admin.Sub Category')}} <span class="text-danger">*</span></label>
                                            <div id="category_selector">
                                                <select name="subcategory_id" id="subcategory_id" class="form-control select2">
                                                    <option value="">{{__('admin.Select')}}</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
             

                        <div class="card">
                            <div class="card-body" data-select2-id="select2-data-46-mub9">
                                <h4>{{__('admin.Location')}}</h4>
                                <div class="row">

                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label for="">{{__('admin.State')}} <span class="text-danger">*</span></label>
                                            <select name="state_id" id="state_id" class="form-control">
                                                <option value="">{{__('admin.Select')}}</option>
                                                    @foreach ($states as $state)
                                                        <option value="{{ $state->state_id }}" {{ old('state_id', $property->state_id) == $state->state_id ? 'selected' : '' }}>{{ $state->name }}</option>
                                                    @endforeach

                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label for="">{{__('admin.County')}} <span class="text-danger">*</span></label>
                                            <div id="state_selector">
                                                <select name="county_id" id="county_id" class="form-control select2">
                                                    <option value="">{{__('admin.Select')}}</option>
                                                    @foreach ($counties as $county)
                                                        <option value="{{ $county->county_id }}" {{ old('county_id', $property->county_id) == $county->county_id ? 'selected' : '' }}>{{ $county->county_name }}</option>
                                                    @endforeach
                                                   
                                                </select>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label for="">{{__('admin.City')}} <span class="text-danger">*</span></label>
                                            <div id="county_selector">
                                                <select name="city_id" id="city_id" class="form-control " onchange="getZipCodes(this.value)">
                                                    <option value="">{{__('admin.Select')}}</option>
                                                    @foreach ($cities as $city)
                                                        <option value="{{ $city->city_id }}" {{ old('city_id', $property->city_id) == $city->city_id ? 'selected' : '' }}>{{ $city->city_name }}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label for="">{{__('admin.ZIP')}} <span class="text-danger">*</span></label>
                                            <div id="city_selector">
                                                <select name="zip_id" id="zip_id" class="form-control ">
                                                    @foreach ($zips as $zip)
                                                        <option value="{{ $zip->zip }}" {{ old('zip', $property->zip) == $zip->zip ? 'selected' : '' }}>{{ $zip->zip }}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-12">
                                        <div class="form-group">
                                            <label for="address">{{__('admin.Address')}} <span class="text-danger">*</span></label>
                                            <input type="text" name="address" class="form-control" id="address" value="{{ html_decode($property->address) }}">
                                            <ul id="results-list"></ul> <!-- Results list -->
                                        </div>
                                    </div>

                                    @if($setting->live_map == 'yes')
                                            <div class="col-12">
                                                <div class="form-group">
                                                    <label for="google_map">{{__('admin.Map')}} <span class="text-danger">*</span></label>
                                                    <div id="map">

                                                    </div>
                                                    <input type="hidden" id="lat" name="lat" value="{{$property->lat}}">
                                                    <input type="hidden" id="lng" name="lng" value="{{$property->lon}}">
                                                </div>
                                            </div>
                                        @else
                                            <div class="col-12">
                                                <div class="form-group">
                                                    <label for="google_map">{{__('admin.Google Map')}} <span class="text-danger">*</span></label>
                                                    <textarea name="google_map" class="form-control text-area-5" id="" cols="30" rows="10">{{ old('google_map') }}</textarea>
                                                </div>
                                            </div>
                                    @endif
                                    
                                </div>
                            </div>
                        </div>
                        
                        <div class="card">
                            <div class="card-body" data-select2-id="select2-data-46-mub9">
                                <h4>{{__('Space')}}</h4>
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                        <label for="">{{__('Allowed Zoning')}} </label>                                       
                                        <select class="form-control select2" id="allowed_zoning" name="allowed_zoning[]" multiple="multiple">                                          
                                        <option value="1" {{ in_array('1', old('allowed_zoning', explode(',', $property->allowed_zoning))) ? 'selected=selected' : '' }}>Zone 1</option>
                                                <option value="2" {{ in_array('2', old('allowed_zoning', explode(',', $property->allowed_zoning))) ? 'selected=selected' : '' }}>Zone 2</option>
                                                <option value="3" {{ in_array('3', old('allowed_zoning', explode(',', $property->allowed_zoning))) ? 'selected=selected' : '' }}>Zone 3</option>   
                                        </select>                                            
                                        </div>
                                    </div>
                                    <div class="col-md-6" id="service_type_div">
                                    <div class="form-group">
                                        <label for="">{{__('Is Divisible(Yes/No)')}} </label>
                                       
                                        <select class="form-control select2" id="divisible" name="divisible">                                           
                                                <option value="1">Yes</option>
                                                <option value="0">No</option>                   
                                           
                                        </select>                                            
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                        <label for="">{{__('Listing Status')}} <span class="text-danger">*</span></label>
                                        <select class="form-control" id="listing_status" name="listing_status">
                                                <option value="1">Active</option>
                                                <option value="2">Pending</option>
                                                <option value="3">Leased</option>
                                                <option value="4">Sold</option>
                                                <option value="5">On Hold</option>                                                                                    
                                        </select>                                            
                                        </div>
                                    </div>
                                   
                                    <!--div class="col-md-6">
                                        <div class="form-group">
                                            <label for="">{{__('Land (Acres or SF)')}}</label>
                                            <input type="number" name="land" class="form-control" value="{{ old('land') }}">
                                        </div>
                                    </div-->
                                </div>
                            </div>
                        </div>
                        <div class="card">
                            <div class="card-body" data-select2-id="select2-data-46-mub9">
                                <h4>{{__('Buildings')}}</h4>
                                <div class="row">     
                                    <div class="col-md-6">
                                    <div class="form-group">
                                            <label for="">{{__('Total Area(sq. ft)')}} <span class="text-danger">*</span></label>
                                            <input type="text" name="total_area" class="form-control" value="{{ html_decode($property->total_area) }}">
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="">{{__('Vacant(sq. ft.)')}}</label>
                                            <input type="number" name="available_space" class="form-control" value="{{ html_decode($property->available_space) }}">
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="">{{__('Max Config(sq. ft.)')}}</label>
                                            <input type="number" name="max_config_sf" class="form-control" value="{{ html_decode($property->max_config_sf) }}">
                                        </div>
                                    </div>                              
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="">{{__('Total Building SF(sq. ft)')}} <span class="text-danger">*</span></label>
                                            <input type="number" name="building_area" class="form-control" value="{{ html_decode($property->building_area) }}">
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="">{{__('Year Built(YYYY)')}}</label>
                                            <input type="number" maxlength="4" min="1900" max="2025" name="year_built" class="form-control" value="{{ html_decode($property->year_built) }}">
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="">{{__('Year Renovated(YYYY)')}}</label>
                                            <input type="number" maxlength="4" min="1900" max="2025" name="year_renovated" class="form-control" value="{{ html_decode($property->year_renovated) }}">
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                        <label for="">{{__('Building Class')}} </label>
                                        <select class="form-control select2" id="building_class" name="building_class" >
                                        <option value="A" {{ old('building_class', $property->building_class) == 'A' ? 'selected' : '' }}>A</option>
                                            <option value="B" {{ old('building_class', $property->building_class) == 'B' ? 'selected' : '' }}>B</option>      
                                            <option value="C" {{ old('building_class', $property->building_class) == 'C' ? 'selected' : '' }}>C</option>                                                   
                                        </select>                                            
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="">{{__('Building Height(Feet)')}}</label>
                                            <input type="number" name="building_height" class="form-control" value="{{ html_decode($property->building_height) }}">
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="">{{__('Parking spaces')}}</label>
                                            <input type="number" name="parking_space" class="form-control" value="{{ html_decode($property->parking_space) }}">
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                      <div class="form-group">
                                        <label for="">{{__('Tenant Type')}} </label>
                                        <select class="form-control select2" id="tenant_type" name="tenant_type" >
                                                <option value="1">Single Tenant</option>
                                                <option value="2">Multi Tenant</option>                                                                                                                             
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                    <div class="form-group">
                                            <label for="">{{__('Co-Tenants')}}</label>
                                            <input type="text" name="co_tenants" class="form-control" value="{{ html_decode($property->co_tenants) }}">
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                        <label for="">{{__('Building Amenities  ')}} <span class="text-danger">*</span></label>                                       
                                        <select class="form-control select2" id="facilities" name="facilities[]" multiple="multiple">
                                            @foreach ($aminities as $aminity)
                                                <option value="{{ $aminity->id }}">{{ $aminity->aminity }}</option>
                                            @endforeach  
                                        </select>
                                            
                                        </div>
                                    </div>
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label for="">{{__('Public Notes')}}</label>
                                            <textarea name="public_notes" id="public_notes" class="form-control summernote" cols="30" rows="4" value="{{ html_decode($property->public_notes) }}"></textarea>
                                            
                                        </div>
                                    </div>
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label for="">{{__('Nearby Intersections')}}</label>
                                            <textarea name="near_by_intersections" id="near_by_intersections" class="form-control summernote" cols="30" rows="4" value="{{ html_decode($property->near_by_intersections) }}"></textarea>
                                            
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="card" id="lease_section">
                            <div class="card-body" data-select2-id="select2-data-46-mub9">
                                <h4>{{__('Lease Information')}}</h4>
                                <div class="row">
                                    <div class="col-md-6" id="rate_type_div">
                                        <div class="form-group">
                                            <label for="">{{__('Rate Type')}} <span class="text-danger">*</span></label>                                       
                                            <select class="form-control select2" id="rate_type" name="rate_type">                                            
                                                    <option value="1">Per Year</option>
                                                    <option value="2">Per Month</option>                                                                                            
                                            </select>                                            
                                        </div>
                                    </div>
                                    <div class="col-md-6" id="rate_type_div">
                                        <div class="form-group">
                                            <label for="">{{__('Listing Type')}} <span class="text-danger">*</span></label>                                       
                                            <select class="form-control select2" id="listing_type" name="listing_type">                                            
                                                    <option value="Direct">Direct</option>
                                                    <option value="Sublet">Sublet</option>                                                                                            
                                            </select>                                            
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="">{{__('Rentable Sqft(%)')}}</label>
                                            <input type="number" name="cap_rate" class="form-control" value="{{ html_decode($property->near_by_intersections) }}">
                                            
                                        </div>
                                    </div>  
                                    <!--div class="col-md-6" id="rate_div">
                                        <div class="form-group">
                                            <label for="">{{__('Rate(Per Sqft.)')}} </label>
                                            <input type="text" name="rate" class="form-control" value="{{ old('rate') }}">
                                        </div>
                                    </div-->
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="">{{__('Total CAM(Per Sq. ft./Yard)')}} </label>
                                            <input type="number" name="CAM" class="form-control" value="{{ html_decode($property->CAM) }}">
                                        </div>
                                    </div>
                                    <!--div class="col-md-6">
                                        <div class="form-group">
                                            <label for="">{{__('Expense Rate (Per SF/YR)')}} </label>
                                            <input type="number" name="expense_rate" class="form-control" value="{{ old('expense_rate') }}">
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="">{{__('Total Rate (Per SF/YR)')}} </label>
                                            <input type="number" name="total_rate" class="form-control" value="{{ old('total_rate') }}">
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="">{{__('Total Monthly Rent')}} </label>
                                            <input type="number" name="total_monthly_rent" class="form-control" value="{{ old('total_monthly_rent') }}">
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="">{{__('Lease Term')}} </label>
                                            <input type="number" name="total_rate" class="form-control" value="{{ old('total_rate') }}">
                                        </div>
                                    </div-->
                                    <div class="col-md-6" id="budget_div">
                                        <div class="form-group">
                                            <label for="">{{__('Budget/Asking Rent Range')}}</label>
                                            <div class="slider-container">
                                                <div id="budgetRange" class="slider"></div>
                                                <input type="text" id="budget" name="budget" class="form-control readonly-input" readonly>
                                            </div>
                                        </div>
                                    </div> 
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="">{{__('Asking Rent')}} </label>
                                            <input type="number" name="asking_rent" class="form-control" value="{{ html_decode($property->asking_rent) }}">
                                        </div>
                                    </div> 
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="">{{__('Estimated CAM($)')}} <span class="text-danger">*</span></label>
                                            <input type="number" name="CAM" class="form-control" value="{{ old('CAM') }}">
                                        </div>
                                    </div>
                                    <!--div class="col-md-6">
                                        <div class="form-group">
                                            <label for="">{{__('Available Space Vacant(sq. ft.)')}}</label>
                                            <input type="number" name="available_space_vacant" class="form-control" value="{{ old('available_space_vacant') }}">
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="">{{__('Max Config(sq. ft.)')}}</label>
                                            <input type="number" name="max_config_lease" class="form-control" value="{{ old('max_config_lease') }}">
                                        </div>
                                    </div-->   
                                    <div class="col-md-6" id="service_type_div">
                                        <div class="form-group">
                                        <label for="">{{__('Service Type')}} <span class="text-danger">*</span></label>
                                       
                                        <select class="form-control select2" id="service_type" name="service_type">                                           
                                            <option value="1" {{ old('service_type', $property->service_type) == '1' ? 'selected' : '' }}>NNN</option>
                                            <option value="2" {{ old('service_type', $property->service_type) == '2' ? 'selected' : '' }}>Gross</option>
                                            <option value="3" {{ old('service_type', $property->service_type) == '3' ? 'selected' : '' }}>Modified Gross</option>
                                            <option value="4" {{ old('service_type', $property->service_type) == '4' ? 'selected' : '' }}>NN</option>
                                            <option value="5" {{ old('service_type', $property->service_type) == '5' ? 'selected' : '' }}>N</option>
                                            <option value="6" {{ old('service_type', $property->service_type) == '6' ? 'selected' : '' }}>Percentage Lease</option>
                                            <option value="7" {{ old('service_type', $property->service_type) == '7' ? 'selected' : '' }}>Ground Lease</option>
                                            <option value="8" {{ old('service_type', $property->service_type) == '8' ? 'selected' : '' }}>Bond Lease</option>
                                            <option value="9" {{ old('service_type', $property->service_type) == '9' ? 'selected' : '' }}>Indexed Lease</option>
                                            <option value="10" {{ old('service_type', $property->service_type) == '10' ? 'selected' : '' }}>Full-Service Lease</option>                                          
                                        </select>
                                            
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="">{{__('TI (If Applicable)')}}</label>
                                            <input type="number" name="ti" class="form-control" value="{{ html_decode($property->ti) }}">
                                        </div>
                                    </div>
                                    
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="">{{__('Vacancy Rate(%)')}}</label>
                                            <input type="number" name="vacancy_rate" class="form-control" value="{{ html_decode($property->vacancy_rate) }}">
                                        </div>
                                        </div>
                                    </div> 
                                    <div class="col-md-6">
                                        <div class="form-group">
                                        <label for="">{{__('Min Terms ')}} </label>
                                        <select class="form-control select2" id="min_terms" name="min_terms" multiple="multiple" >
                                                <option value="3">3 Years</option>
                                                <option value="5">5 Years</option>      
                                                <option value="7">7 Years</option>  
                                                <option value="10">10 Years</option>   
                                                <option value="0">Others</option>                                                                                                  
                                        </select>                                            
                                        </div>
                                    </div> 
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label for="">{{__('Leasing Highlights')}}</label>                                            
                                            <textarea name="highlights" id="highlights" class="form-control summernote" cols="30" rows="4">{{ html_decode($property->vacancy_rate) }}</textarea>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="card d-none" id="sales_section">
                            <div class="card-body">
                                <h4>{{__('Sales')}}</h4>
                                <hr>
                                <div class="row">
                                    <div class="col-md-6" id="list_price_div">   
                                        <div class="form-group">
                                            <label for="price">{{__('admin.List Price')}} <span class="text-danger">*</span></label>
                                            <input type="text" name="price" class="form-control" value="{{ html_decode($property->price) }}">
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                        <label for="">{{__('CAP Rate(%)')}}</label>
                                        <input type="number" name="cap_rate" class="form-control" value="{{ html_decode($property->cap_rate) }}">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                      <div class="card">
                            <div class="card-body">
                                <h4>{{__('admin.Image and Video')}}</h4>
                                <hr>
                                <div class="row">

                                    <div class="col-12">
                                        <div class="form-group">
                                            <label for="">{{__('admin.Existing Slider')}}</label>
                                            <div class="row">

                                                @foreach ($existing_sliders as $existing_slider)
                                                    <div class="col-lg-4 col-md-6 image-box mb-4">
                                                        <div class="property-slider-image">
                                                            <img src="{{ asset($existing_slider->image) }}" alt="">
                                                            <span data-id="{{ $existing_slider->id }}" class="remove_existing_image"><i class="fa fa-trash" aria-hidden="true"></i></span>
                                                        </div>
                                                    </div>
                                                @endforeach

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

                                    <div class="col-12">
                                        <div class="form-group">
                                            <label for="">{{__('admin.Slider Image')}} ({{__('admin.Multiple')}}) </label>
                                            <input type="file" name="slider_images[]" multiple class="form-control-file">
                                        </div>
                                    </div>

                                    <div class="col-12">
                                        <div class="form-group">
                                            <label for="">{{__('admin.Existing Thumbnail')}}</label>
                                            <div>
                                                <img class="w_300" src="{{ asset($property->thumbnail_image) }}" alt="">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-12">
                                        <div class="form-group">
                                            <label for="">{{__('admin.Thumbnail Image')}} </label>
                                            <input type="file" name="thumbnail_image" class="form-control-file">
                                        </div>
                                    </div>

                                    @if ($property->video_thumbnail)
                                        <div class="col-12">
                                            <div class="form-group">
                                                <label for="">{{__('admin.Existing Video Thumbnail')}}</label>
                                                <div>
                                                    <img class="w_300" src="{{ asset($property->video_thumbnail) }}" alt="">
                                                </div>
                                            </div>
                                        </div>
                                    @endif

                                    <div class="col-12">
                                        <div class="form-group">
                                            <label for="">{{__('admin.Video Thumbnail Image')}}</label>
                                            <input type="file" name="video_thumbnail" class="form-control-file">
                                        </div>
                                    </div>

                                    @if ($property->video_id)
                                        <div class="col-12">
                                            <div class="form-group">
                                                <label for="">{{__('admin.Existing Video')}}</label>
                                                <div>
                                                    <iframe width="300" height="150"
                                                    src="https://www.youtube.com/embed/{{ html_decode($property->video_id) }}">
                                                </iframe>
                                                </div>
                                            </div>
                                        </div>
                                    @endif

                                    <div class="col-12">
                                        <div class="form-group">
                                            <label for="">{{__('admin.Youtube video id')}} </label>
                                            <input type="text" name="video_id" class="form-control" value="{{ html_decode($property->video_id) }}">
                                        </div>
                                    </div>

                                    <div class="col-12">
                                        <div class="form-group">
                                            <label for="">{{__('admin.Video description')}} </label>
                                            <textarea name="video_description" class="form-control text-area-3" id="" cols="30" rows="10">{{ html_decode($property->video_description) }}</textarea>

                                        </div>
                                    </div>

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

                        <div class="card">
                            <div class="card-body">
                                <h4>{{__('admin.Property Plan')}}</h4>
                                <hr>
                                <div class="row">
                                    <div class="col-12" id="plan-box">
                                        <div class="row">

                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label for="">{{__('admin.Image')}}</label>
                                                    <input type="file" class="form-control-file" name="plan_images[]">
                                                </div>
                                            </div>

                                            <div class="col-md-6">
                                                <button id="addNewPlan" type="button" class="btn btn-success nearest-row-btn plus_btn"><i class="fas fa-plus" aria-hidden="true"></i> {{__('admin.New Plan')}}</button>
                                            </div>

                                            <div class="col-12">
                                                <div class="form-group">
                                                    <label for="">{{__('admin.Title')}}</label>
                                                    <input type="text" class="form-control" name="plan_titles[]">
                                                </div>
                                            </div>
                                            <div class="col-12">
                                                <div class="form-group">
                                                    <label for="">{{__('admin.Description')}}</label>
                                                    <textarea name="plan_descriptions[]" id="" class="form-control text-area-5" cols="30" rows="10"></textarea>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="card">
                            <div class="card-body">
                                <h4>{{__('Demographics')}}</h4>
                                <hr>
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                        <label for="">{{__('Population')}}</label>
                                        <input type="number" name="population" class="form-control" value="{{ html_decode($property->population) }}">
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                        <label for="">{{__('Households')}}</label>
                                        <input type="number" name="households" class="form-control" value="{{ html_decode($property->households) }}">
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                    <div class="form-group">
                                            <label for="">{{__('Median Age(Years) ')}}</label>
                                            <input type="number" name="median_age" class="form-control" value="{{ html_decode($property->median_age) }}">
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="">{{__('Median Income($)')}}</label>
                                            <input type="number" name="median_income" class="form-control" value="{{ html_decode($property->median_income) }}">
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="">{{__('Vehicles Per Day')}}</label>
                                            <input type="number" name="vehicles_per_day" class="form-control" value="{{ html_decode($property->vehicles_per_day) }}">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="card">
                            <div class="card-body">
                                <h4>{{__('admin.Nearest Location')}}</h4>
                                <hr>
                                <div class="row">
                                    <div class="col-12" id="nearest-place-box">
                                        <div class="row">
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                <label for="">{{__('admin.Nearest Location')}}</label>
                                                    <select name="nearest_locations[]" id="" class="form-control">
                                                        <option value="">{{__('admin.Select')}}</option>
                                                        @foreach ($nearest_locations as $nearest_location)
                                                            <option value="{{ $nearest_location->id }}">{{ $nearest_location->location }}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="col-md-4">
                                                <div class="form-group">
                                                <label for="">{{__('admin.Distance(km)')}}</label>
                                                <input type="text" class="form-control" name="distances[]">
                                                </div>
                                            </div>
                                            <div class="col-md-2">
                                            <button id="addNearestPlaceRow" type="button" class="btn btn-success nearest-row-btn plus_btn"><i class="fas fa-plus" aria-hidden="true"></i></button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="card">
                            <div class="card-body">
                                <h4>{{__('admin.Additional Information')}}</h4>
                                <hr>
                                <div class="row">
                                    <div class="col-12" id="additional-box">
                                        @foreach ($existing_add_informations as $existing_add_information)
                                            <div class="delete-dynamic-additio">
                                                <div class="row">
                                                    <div class="col-md-6">
                                                        <div class="form-group">
                                                            <label for="">{{__('admin.Key')}}</label>
                                                            <input type="text" class="form-control" name="existing_add_keys[]" value="{{ html_decode($existing_add_information->add_key) }}">
                                                        </div>
                                                    </div>
                                                    <div class="col-md-4">
                                                        <div class="form-group">
                                                            <label for="">{{__('admin.Value')}}</label>
                                                            <input type="text" class="form-control" name="existing_add_values[]" value="{{ html_decode($existing_add_information->add_value) }}">

                                                            <input type="hidden" class="form-control" name="existing_add_ids[]" value="{{ $existing_add_information->id }}">
                                                        </div>
                                                    </div>
                                                    <div class="col-md-2">
                                                        <button data-id="{{ $existing_add_information->id }}" type="button" class="btn btn-danger nearest-row-btn existingRemoveAdditioanRow plus_btn"><i class="fas fa-trash" aria-hidden="true"></i></button>
                                                    </div>
                                                </div>
                                            </div>
                                        @endforeach
                                        <div class="row">
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label for="">{{__('admin.Key')}}</label>
                                                    <input type="text" class="form-control" name="add_keys[]">
                                                </div>
                                            </div>
                                            <div class="col-md-4">
                                                <div class="form-group">
                                                    <label for="">{{__('admin.Value')}}</label>
                                                    <input type="text" class="form-control" name="add_values[]">
                                                </div>
                                            </div>
                                            <div class="col-md-2">
                                                <button id="addAdditionalRow" type="button" class="btn btn-success nearest-row-btn plus_btn"><i class="fas fa-plus" aria-hidden="true"></i></button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="card">
                            <div class="card-body">
                                <h4>{{__('admin.SEO Information and Others')}}</h4>
                                <hr>
                                <div class="row">


                                    <div class="col-12">
                                        <div class="form-group">
                                            <div class="control-label">{{__('admin.Status')}}</div>
                                            <label class=" mt-2">
                                              <input {{ $property->status == 'enable' ? 'checked' : '' }} type="checkbox" name="status" class="custom-switch-input">
                                              <span class="custom-switch-indicator"></span>
                                              <span class="custom-switch-description">{{__('admin.Enable / Disable')}}</span>
                                            </label>
                                        </div>
                                    </div>

                                    @if ($property->is_featured == 'enable')
                                        <div class="col-12">
                                            <div class="form-group">
                                                <div class="control-label">{{__('admin.Featured')}}</div>
                                                <label class=" mt-2">
                                                <input {{ $property->is_featured == 'enable' ? 'checked' : '' }} type="checkbox" name="is_featured" class="custom-switch-input">
                                                <span class="custom-switch-indicator"></span>
                                                <span class="custom-switch-description">{{__('admin.Enable / Disable')}}</span>
                                                </label>
                                            </div>
                                        </div>
                                    @else
                                        @if ($featured_property == 'enable')
                                            <div class="col-12">
                                                <div class="form-group">
                                                    <div class="control-label">{{__('admin.Featured')}}</div>
                                                    <label class=" mt-2">
                                                    <input {{ $property->is_featured == 'enable' ? 'checked' : '' }} type="checkbox" name="is_featured" class="custom-switch-input">
                                                    <span class="custom-switch-indicator"></span>
                                                    <span class="custom-switch-description">{{__('admin.Enable / Disable')}}</span>
                                                    </label>
                                                </div>
                                            </div>
                                        @endif
                                    @endif


                                    @if ($property->is_top == 'enable')
                                        <div class="col-12">
                                            <div class="form-group">
                                                <div class="control-label">{{__('admin.Top Property')}}</div>
                                                <label class=" mt-2">
                                                <input {{ $property->is_top == 'enable' ? 'checked' : '' }} type="checkbox" name="is_top" class="custom-switch-input">
                                                <span class="custom-switch-indicator"></span>
                                                <span class="custom-switch-description">{{__('admin.Enable / Disable')}}</span>
                                                </label>
                                            </div>
                                        </div>
                                    @else
                                        @if ($top_property == 'enable')
                                            <div class="col-12">
                                                <div class="form-group">
                                                    <div class="control-label">{{__('admin.Top Property')}}</div>
                                                    <label class=" mt-2">
                                                    <input {{ $property->is_top == 'enable' ? 'checked' : '' }} type="checkbox" name="is_top" class="custom-switch-input">
                                                    <span class="custom-switch-indicator"></span>
                                                    <span class="custom-switch-description">{{__('admin.Enable / Disable')}}</span>
                                                    </label>
                                                </div>
                                            </div>
                                        @endif
                                    @endif


                                    @if ($property->is_urgent == 'enable')
                                        <div class="col-12">
                                            <div class="form-group">
                                                <div class="control-label">{{__('admin.Urgent Property')}}</div>
                                                <label class=" mt-2">
                                                <input {{ $property->is_urgent == 'enable' ? 'checked' : '' }} type="checkbox" name="is_urgent" class="custom-switch-input">
                                                <span class="custom-switch-indicator"></span>
                                                <span class="custom-switch-description">{{__('admin.Enable / Disable')}}</span>
                                                </label>
                                            </div>
                                        </div>
                                    @else
                                        @if ($urgent_property == 'enable')
                                            <div class="col-12">
                                                <div class="form-group">
                                                    <div class="control-label">{{__('admin.Urgent Property')}}</div>
                                                    <label class=" mt-2">
                                                    <input {{ $property->is_urgent == 'enable' ? 'checked' : '' }} type="checkbox" name="is_urgent" class="custom-switch-input">
                                                    <span class="custom-switch-indicator"></span>
                                                    <span class="custom-switch-description">{{__('admin.Enable / Disable')}}</span>
                                                    </label>
                                                </div>
                                            </div>
                                        @endif
                                    @endif

                                    @if ($property->agent_id != 0)
                                        <div class="col-12">
                                            <div class="form-group">
                                                <label for="">{{__('admin.Moderator Status')}} </label>
                                            <select name="approve_by_admin" id="" class="form-control">
                                                <option {{ $property->approve_by_admin == 'pending' ? 'selected' : '' }} value="pending">{{__('admin.Awaiting')}}</option>
                                                <option {{ $property->approve_by_admin == 'approved' ? 'selected' : '' }}  value="approved">{{__('admin.Approved')}}</option>
                                                <option {{ $property->approve_by_admin == 'reject' ? 'selected' : '' }}  value="reject">{{__('admin.Reject')}}</option>
                                            </select>
                                            </div>
                                        </div>
                                    @endif

                                    <div class="col-12">
                                        <div class="form-group">
                                            <label for="">{{__('admin.SEO Title')}} </label>
                                            <input type="text" name="seo_title" class="form-control" value="{{ html_decode($property->seo_title) }}">
                                        </div>
                                    </div>

                                    <div class="col-12">
                                        <div class="form-group">
                                            <label for="">{{__('admin.SEO Meta Description')}} </label>
                                            <textarea name="seo_meta_description" class="form-control text-area-5" id="" cols="30" rows="10">{{ html_decode($property->seo_meta_description) }}</textarea>
                                        </div>
                                    </div>

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

                    <div class="col-12">
                        <button type="submit" class="btn btn-primary">{{__('admin.Update')}}</button>
                    </div>
                </div>

            </form>
        </div>
    </section>
</div>

<script src="{{ asset('backend/js/select2.min.js') }}"></script>
<script>
     $(document).ready(function() {
            var slider = document.getElementById('budgetRange');
            var priceValue = document.getElementById('budget');

            // Initialize noUiSlider
            noUiSlider.create(slider, {
                start: [100, 10000], // Default min and max values
                connect: true, // To create a connected range slider
                range: {
                    'min': 0,
                    'max': 10000
                },
                step: 10,
                format: {
                    to: function (value) {
                        return '$' + Math.round(value); // Format the value to display as currency
                    },
                    from: function (value) {
                        return value.replace('$', ''); // Remove the $ sign when the value is processed
                    }
                }
            });

            // Update the price value when the slider changes
            slider.noUiSlider.on('update', function(values, handle) {
                priceValue.value = values.join(' - ');
            });

            $('.select2').select2({
                placeholder: "Select options", // Placeholder text
                allowClear: true, // Allow clearing selected options
                width: '100%' // Set the width to 100%
            });
        });
    (function($) {
    "use strict";
    $(document).ready(function () {

        // slug generate and check

        $("#title").on("focusout",function(e){
            $("#slug").val(convertToSlug($(this).val()));
        })

        // slug generate and check

        // manage rent period price

        $("#purpose").on("change",function(){
            var purpose = $(this).val()
            if(purpose == 'rent'){
                $("#rend_period_box").removeClass('d-none');
            }else{
                $("#rend_period_box").addClass('d-none');
            }
        })

        // manage rent period price

        //start dynamic nearest place add and remove

        $("#addNearestPlaceRow").on("click",function(){
            var new_row=$("#hidden-location-box").html();
            $("#nearest-place-box").append(new_row)
        })

        $(document).on('click', '.removeNearestPlaceRow', function () {
            $(this).closest('.delete-dynamic-location').remove();
        });

        $(document).on('click', '.existingRemoveNearestPlaceRow', function () {

            let id = $(this).data('id');
            $(this).closest('.delete-dynamic-location').remove();

            $.ajax({
                type:"put",
                data: { _token : '{{ csrf_token() }}' },
                url:"{{url('/admin/remove-nearest-location/')}}"+"/"+id,
                success:function(response){},
                error:function(err){}
            })
        });

        //end dynamic nearest place add and remove

        //start additonal information add and remove

        $("#addAdditionalRow").on("click",function(){
            var new_row=$("#hidden-addition-box").html();
            $("#additional-box").append(new_row)
        })

        $(document).on('click', '.removeAdditioanRow', function () {
            $(this).closest('.delete-dynamic-additio').remove();
        });

        $(document).on('click', '.existingRemoveAdditioanRow', function () {

            var isDemo = "{{ env('APP_MODE') }}"
            if(isDemo == 'DEMO'){
                toastr.error('This Is Demo Version. You Can Not Change Anything');
                return;
            }

            let id = $(this).data('id');
            $(this).closest('.delete-dynamic-additio').remove();

            $.ajax({
                type:"put",
                data: { _token : '{{ csrf_token() }}' },
                url:"{{url('/admin/remove-add-infor/')}}"+"/"+id,
                success:function(response){},
                error:function(err){}
            })

        });

        //end additonal information add and remove

        //start dynamic plan add and remove

        $("#addNewPlan").on("click",function(){
            var new_row=$("#hidden-plan-box").html();
            $("#plan-box").append(new_row)
        })

        $(document).on('click', '.removePlanRow', function () {
            $(this).closest('.delete-dynamic-plan').remove();
        });

        $(document).on('click', '.existingRemovePlanRow', function () {
            var isDemo = "{{ env('APP_MODE') }}"
            if(isDemo == 'DEMO'){
                toastr.error('This Is Demo Version. You Can Not Change Anything');
                return;
            }

            let id = $(this).data('id');
            $(this).closest('.delete-dynamic-plan').remove();
            $.ajax({
                type:"put",
                data: { _token : '{{ csrf_token() }}' },
                url:"{{url('/admin/remove-plan/')}}"+"/"+id,
                success:function(response){

                },
                error:function(err){}
            })
        });

        //end dynamic plan  add and remove

        // remove existing slider

        $(".remove_existing_image").on("click", function(){

            var isDemo = "{{ env('APP_MODE') }}"
            if(isDemo == 'DEMO'){
                toastr.error('This Is Demo Version. You Can Not Change Anything');
                return;
            }

            let id = $(this).data('id');
            let parent_div =$(this).closest('.image-box').remove();

            $.ajax({
                type:"put",
                data: { _token : '{{ csrf_token() }}' },
                url:"{{url('/admin/remove-property-slider/')}}"+"/"+id,
                success:function(response){},
                error:function(err){}
            })
        })

        // remove existing slider

        $.get({
                url: "{{url('/')}}/admin/property/city/list/{{$property->country_id}}?city_id={{$property->city_id}}",
                dataType: 'json',
                data: {},
                beforeSend: function () {
                },
                success: function (response) {
                    $('#country_selector').html(response.template);
                },
                complete: function () {
                },
            });

    });

    })(jQuery);

    function convertToSlug(Text)
    {
        return Text
            .toLowerCase()
            .replace(/[^\w ]+/g,'')
            .replace(/ +/g,'-');
    }

    $("#state_id").change(function (){
            let id = this.value;
            let route = "{{ url('/admin/property/county/list/') }}/" + id;
            ajax_switch_state(route)
        });

        function ajax_switch_state(route) {
            $.get({
                url: route,
                dataType: 'json',
                data: {},
                beforeSend: function () {
                },
                success: function (response) {
                    $('#state_selector').html(response.template);
                },
                complete: function () {
                },
            });
        }
        $("#county_id").change(function (){
            let id = this.value;
            let route = "{{ url('/admin/property/city/list/') }}/" + id;
            ajax_switch_county(route)
        });

        function ajax_switch_county(route) {
            $.get({
                url: route,
                dataType: 'json',
                data: {},
                beforeSend: function () {
                },
                success: function (response) {
               
                    $('#county_selector').html(response.template);
                },
                complete: function () {
                },
            });
        }
        $("#city_id").change(function (){
            
            let id = this.value;
            let route = "{{ url('/admin/property/zip/list/') }}/" + id;
            ajax_switch_city(route)
        });

        function ajax_switch_city(route) {
           
            $.get({
                url: route,
                dataType: 'json',
                data: {},
                beforeSend: function () {
                },
                success: function (response) {
                    $('#city_selector').html(response.template);
                },
                complete: function () {
                },
            });
        }
        $("#category_id").change(function (){
            let id = this.value;
            let route = "{{ url('/admin/property/subcategory/list/') }}/" + id;
           
            ajax_switch_category(route)
        });
        $('#tenant_type').change(function(){
                var tenant_type = $(this).val();
                if(tenant_type == 2){
                    $('#co_tenants').prop('disabled', false);
                }else{
                    $('#co_tenants').prop('disabled', true);
                }
            }); 
        function ajax_switch_category(route) {
            $.get({
                url: route,
                dataType: 'json',
                data: {},
                beforeSend: function () {
                },
                success: function (response) {
                  
                    $('#category_selector').html(response.template);
                },
                complete: function () {
                },
            });
        }

        var editLat = "{{$property->lat}}";
        var editLon = "{{$property->lon}}";

        var initialLat = editLat ? parseFloat(editLat) : 28.602264;
        var initialLon = editLon ? parseFloat(editLon) : 77.197189;

        var map = L.map('map').setView([initialLat, initialLon], 13);
        L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        }).addTo(map);

        var currentMarker;

        currentMarker = L.marker([initialLat, initialLon]).addTo(map);

        map.on('click', function(e) {
            const lat = e.latlng.lat;
            const lng = e.latlng.lng;

            // Update hidden input fields
            document.getElementById('lat').value = lat;
            document.getElementById('lng').value = lng;

            // Update or create the marker
            if (currentMarker) {
                map.removeLayer(currentMarker); // Remove existing marker
            }
            currentMarker = L.marker([lat, lng]).addTo(map); // Add new marker

            // Fetch the address from the clicked coordinates
            fetch(`https://nominatim.openstreetmap.org/reverse?format=json&lat=${lat}&lon=${lng}`)
                .then(response => response.json())
                .then(data => {
                    if (data && data.display_name) {
                        document.getElementById('address').value = data.display_name; // Set the address input
                    } else {
                        document.getElementById('address').value = "Clicked Location"; // Fallback text
                    }
                });
        });


        function debounce(func, delay) {
            let timeout;
            return function(...args) {
                const context = this;
                clearTimeout(timeout);
                timeout = setTimeout(() => func.apply(context, args), delay);
            };
        }

        // Wait for the DOM to fully load
        document.addEventListener('DOMContentLoaded', function() {
            const addressInput = document.getElementById('address');
            const resultsElement = document.getElementById('results-list');

            if (addressInput) {
                addressInput.addEventListener(
                    'keyup',
                    debounce(function () {
                        const keyword = this.value;

                        if (keyword.length > 3) {
                            const xhr = new XMLHttpRequest();
                            const url = 'https://nominatim.openstreetmap.org/search?format=json&q=' + encodeURIComponent(keyword);
                            xhr.open('GET', url, true);
                            xhr.onload = function () {
                                if (xhr.status >= 200 && xhr.status < 400) {
                                    const data = JSON.parse(xhr.responseText);
                                    resultsElement.innerHTML = '';
                                    if (data.length > 0) {
                                        let resultsHTML = '';
                                        data.forEach(function (v) {
                                            resultsHTML += `<li data-lat="${v.lat}" data-lon="${v.lon}">${v.display_name}</li>`;
                                        });
                                        resultsElement.innerHTML = resultsHTML;
                                        resultsElement.style.display = 'block';

                                        resultsElement.addEventListener('click', function (event) {
                                            if (event.target.tagName.toLowerCase() === 'li') {
                                                const thatItem = event.target;
                                                const getLat = thatItem.getAttribute('data-lat');
                                                const getLon = thatItem.getAttribute('data-lon');
                                                const displayName = thatItem.textContent;

                                                // Update input values
                                                addressInput.value = displayName;
                                                document.getElementById('lat').value = getLat;
                                                document.getElementById('lng').value = getLon;

                                                // Set the map view to the selected coordinates
                                                map.setView([getLat, getLon], 13);

                                                // Update or create the marker
                                                if (currentMarker) {
                                                    map.removeLayer(currentMarker); // Remove existing marker
                                                }
                                                currentMarker = L.marker([getLat, getLon]).addTo(map); // Add new marker

                                                resultsElement.style.display = 'none'; // Hide results
                                            }
                                        });
                                    } else {
                                        resultsElement.style.display = 'none'; // No results found
                                    }
                                }
                            };
                            xhr.send();
                        } else {
                            resultsElement.style.display = 'none'; // Hide results if input is too short
                        }
                    }, 500) // 500ms debounce
                );

                // Hide results when clicking outside
                document.addEventListener('click', function (event) {
                    if (!addressInput.contains(event.target) && !resultsElement.contains(event.target)) {
                        resultsElement.style.display = 'none';
                    }
                });
            }
        });
        function getZipCodes(cityId) {
        if (cityId) {
            let route = "{{ url('/admin/property/zip/list/') }}/" + cityId;
            $.get({
                url: route,
                dataType: 'json',
                success: function (response) {
                    $('#zip_id').html(response.template);
                },
                error: function (xhr) {
                    console.log(xhr.responseText);
                }
            });
        } else {
            $('#zip_id').html('<option value="">Select</option>');
        }
    }
</script>
@endsection