@extends('admin.master_layout')
@section('title')
<title>{{__('admin.Create property')}}</title>
@endsection
<style type="text/stylesheet">
    /* Flexbox container for slider and input */
.slider-container {
    display: flex;
    align-items: center; /* Vertically center align items */
    gap: 10px; /* Add spacing between slider and input */
}

/* Slider styling */
.slider {
    flex: 1; /* Allow the slider to take up remaining space */
}

/* Readonly input field styling */
.readonly-input {
    width: 150px; /* Set a fixed width for the input field */
    margin-left: 10px; /* Add spacing between slider and input */
}
</style>
@section('admin-content')
<!-- Main Content -->
<div class="main-content">
    <section class="section">
        <div class="section-header">
            <h1>{{__('admin.Create 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> {{__('Property Listing')}}</a>
            <form id="property_form" action="{{ route('admin.property.store') }}" method="POST" enctype="multipart/form-data">
                @csrf

                <div class="row mt-4">
                    <div class="col-12">

                        <div class="card">
                            <div class="card-body" data-select2-id="select2-data-46-mub9">
                                <h4>{{__('admin.Basic Information')}}</h4>
                                <hr>
                                <input type="hidden" name="owner_id" id="owner_id" value="0">
                                <!--div class="form-group">
                                    <label for="title">{{__('admin.Property Owner')}}<span class="text-danger">*</span></label>
                                    <select name="owner_id" id="owner_id" class="form-control select2">
                                        <option value="0">{{__('admin.Own Property')}}</option>
                                        @foreach ($agents as $agent)
                                            <option value="{{ $agent->id }}">{{ $agent->name }} - {{ $agent->phone }}</option>
                                        @endforeach
                                    </select>
                                </div-->
                                <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="{{ old('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="{{ old('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 value="lease">{{__('admin.For Lease')}}</option>
                                                <option value="purchase">{{__('admin.For Purchase')}}</option>
                                                <option value="either">{{__('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-multi-select" id="multiple-select-tag" multiple data-coreui-selection-type="tags" data-coreui-search="true">
                                                @foreach ($types as $type)
                                                <option 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 }}">{{ $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>
                                                   
                                                </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 select2" onchange="getZipCodes(this.value)">
                                                    <option value="">{{__('admin.Select')}}</option>
                                                    @foreach ($cities as $city)
                                                        <option value="{{ $city->id }}">{{ $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 select2">
                                                    <option value="">{{__('admin.Select')}}</option>
                                                </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" required>
                                            <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="">
                                                    <input type="hidden" id="lng" name="lng" value="">
                                                </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 class="col-12">
                                        <div class="form-group">
                                            <label for="address_description">{{__('admin.Address Details')}} <span class="text-danger">*</span></label>
                                            <textarea name="address_description" class="form-control text-area-5" id="" cols="30" rows="10">{{ old('address_description') }}</textarea>
                                        </div>
                                    </div-->
                                    
                                </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="Residential">Residential</option>
                                                <option value="Commercial">Commercial</option>
                                                <option value="Industrial">Industrial</option>     
                                                <option value="Agricultural">Agricultural</option> 
                                                <option value="Office">Office</option> 
                                                <option value="Institutional">Institutional</option> 
                                                <option value="Mixed-Use">Mixed-Use</option> 
                                                <option value="Planned Unit Development">Planned Unit Development</option> 
                                                <option value="Historic">Historic</option> 
                                                <option value="Overlay Zones">Overlay Zones</option> 
                                                <option value="Other">Other</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-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">"{{ old('public_notes') }}</textarea>
                                        </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="">{{__('Size(sq. ft.)')}}</label>
                                            <input type="number" name="total_area" class="form-control" value="{{ old('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="{{ old('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="{{ old('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="{{ old('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="{{ old('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="{{ old('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">A</option>
                                                <option value="B">B</option>      
                                                <option value="C">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="{{ old('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="{{ old('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" id="co_tenants"class="form-control" value="{{ old('co_tenants') }}" disabled="disabled">
                                        </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">"{{ old('public_notes') }}</textarea>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <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">"{{ old('near_by_intersections') }}</textarea>
                                            
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="card">
                            <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="0">Direct</option>
                                                    <option value="1">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="{{ old('cap_rate') }}">
                                        </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><!--asking rent-->
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="">{{__('Total CAM(Per Sq. ft./Yard)')}} </label>
                                            <input type="number" name="total_CAM" class="form-control" value="{{ old('total_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="">{{__('Lease Term')}} </label>
                                            <input type="number" name="asking_rent" class="form-control" value="{{ old('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">NNN</option>
                                                    <option value="2">Gross</option>
                                                    <option value="3">Modified Gross</option>
                                                    <option value="4">NN</option>
                                                    <option value="5">N</option>
                                                    <option value="6">Percentage Lease</option>
                                                    <option value="7">Ground Lease</option>
                                                    <option value="8">Bond Lease</option>
                                                    <option value="9">Indexed Lease</option>
                                                    <option value="10">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="{{ old('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="{{ old('vacancy_rate') }}">
                                        </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">"{{ old('highlights') }}</textarea>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="card">
                            <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="{{ old('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="{{ old('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.Thumbnail Image')}} <span class="text-danger">*</span></label>
                                            <input type="file" name="thumbnail_image" class="form-control-file">
                                        </div>
                                    </div>

                                    <div class="col-12">
                                        <div class="form-group">
                                            <label for="">{{__('admin.Slider Image')}} ({{__('admin.Multiple')}}) <span class="text-danger">*</span></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.Brouchurs')}} </label>
                                            <input type="file" name="brouchurs" class="form-control-file">
                                        </div>
                                    </div>

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

                                    <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="{{ old('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">{{ old('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>{{__('admin.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="{{ old('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="{{ old('households') }}">
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="">{{__('Median Age(Years) ')}}</label>
                                            <input type="number" maxlength="2" name="median_age" class="form-control" value="{{ old('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="{{ old('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="{{ old('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="number" 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">
                                        <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 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>

                                    <div class="col-12" id="featured_box">
                                        <div class="form-group">
                                            <div class="control-label">{{__('admin.Featured')}}</div>
                                            <label class=" mt-2">
                                              <input 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>

                                    <div class="col-12" id="top_box">
                                        <div class="form-group">
                                            <div class="control-label">{{__('admin.Top Property')}}</div>
                                            <label class=" mt-2">
                                              <input 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>

                                    <div class="col-12" id="urgent_box">
                                        <div class="form-group">
                                            <div class="control-label">{{__('admin.Urgent Property')}}</div>
                                            <label class=" mt-2">
                                              <input 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>

                                    <div class="col-12">
                                        <div class="form-group">
                                            <label for="">{{__('admin.SEO Title')}} </label>
                                            <input type="text" name="seo_title" class="form-control" value="{{ old('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">{{ old('seo_meta_description') }}</textarea>
                                        </div>
                                    </div>

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

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

<script src="{{ asset('backend/js/select2.min.js') }}"></script>
<script>

    (function($) {
    "use strict";
    $(document).ready(function () {

        // check agent package availability

        $("#owner_id").on("change", function(){
            let owner_id = $(this).val();

            if(owner_id != 0){
                $.ajax({
                    type:"get",
                    url:"{{url('/admin/agent-plan-availability/')}}"+"/"+owner_id,
                    success:function(response){

                        if(response.top_property == 'disable'){
                            $("#top_box").addClass('d-none');
                        }else{
                            $("#top_box").removeClass('d-none');
                        }

                        if(response.urgent_property == 'disable'){
                            $("#urgent_box").addClass('d-none');
                        }else{
                            $("#urgent_box").removeClass('d-none');
                        }

                        if(response.featured_property == 'disable'){
                            $("#featured_box").addClass('d-none');
                        }else{
                            $("#featured_box").removeClass('d-none');
                        }

                    },
                    error:function(err){
                        if(err.status == 403){
                            toastr.error(err.responseJSON.message);

                            $("#top_box").addClass('d-none');
                            $("#urgent_box").addClass('d-none');
                            $("#featured_box").addClass('d-none');

                        }
                    }
                })
            }else{
                $("#top_box").removeClass('d-none');
                $("#urgent_box").removeClass('d-none');
                $("#featured_box").removeClass('d-none');
            }

        })

        // check agent package availability

        // slug generate and check

        $("#title").on("keyup",function(e){
            let slug = convertToSlug($(this).val());
            $("#slug").val(slug);

            $.ajax({
                type:"get",
                url:"{{url('/admin/check-slug/')}}"+"/"+slug,
                success:function(response){

                },
                error:function(err){
                    if(err.status == 403){
                        toastr.error(err.responseJSON.message);
                    }
                }
            })
        })

        // slug generate and check

        // rent box handle

        $("#purpose").on("change",function(){
            var purpose = $(this).val()
            if(purpose == 'lease'){
                $("#list_price_div").addClass('d-none');
                $("#asking_rent_div").removeClass('d-none');
                $("#budget_div").removeClass('d-none');
                $("#service_type_div").removeClass('d-none');
            }else if(purpose == 'purchase'){
                $("#list_price_div").removeClass('d-none');
                $("#asking_rent_div").addClass('d-none');
                $("#budget_div").addClass('d-none');
                $("#service_type_div").addClass('d-none');
            }else{
                $("#list_price_div").removeClass('d-none');
                $("#asking_rent_div").removeClass('d-none');
                $("#budget_div").removeClass('d-none');
                $("#service_type_div").removeClass('d-none');
            }
        })

        // rent box handle

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

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

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

        //end dynamic plan  add and remove

    });

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

        function ajax_switch_category(route) {
            $.get({
                url: route,
                dataType: 'json',
                data: {},
                beforeSend: function () {
                },
                success: function (response) {
                  
                    $('#category_selector').html(response.template);
                },
                complete: function () {
                },
            });
        }
        var lat=28.602264;
        var long=77.197189;

        navigator.geolocation.getCurrentPosition(
            function(position) {
                lat = position.coords.latitude;
                long = position.coords.longitude;               
            },
            function(error) {
                console.error("Error Code = " + error.code + " - " + error.message);
            }
            );
        var map = L.map('map').setView([lat, long], 15);
        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;

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

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

    
   

    $(document).ready(function() {
        $('.summernote').summernote({
            height: 300,
            minHeight: 200,
            maxHeight: 500,
            focus: true,
            placeholder: "Enter property description...",
            toolbar: [
                ['style', ['bold', 'italic', 'underline', 'clear']],
                ['font', ['strikethrough', 'superscript', 'subscript']],
                ['fontsize', ['fontsize']],
                ['color', ['color']],
                ['para', ['ul', 'ol', 'paragraph']],
                ['height', ['height']],
                ['insert', ['link', 'picture', 'video']],
                ['view', ['fullscreen', 'codeview', 'help']]
            ],
            callbacks: {
                onImageUpload: function(files) {
                    var editor = $(this);
                    var data = new FormData();
                    data.append("file", files[0]);
                    data.append("_token", "{{ csrf_token() }}");

                    $.ajax({
                        url: "{{ route('admin.summernote.upload') }}",
                        method: "POST",
                        data: data,
                        processData: false,
                        contentType: false,
                        success: function(response) {
                            if (response.location) {
                                editor.summernote('insertImage', response.location);
                            }
                        }
                    });
                }
            }
        });
    });



    
</script>


    

@endsection