@extends('layouts.app')
@section('contentSection')
    <section id="property-city" class="property-city offplan-main-sec pb60"
        style="background-image: url({{ asset('assets/images/home/banner.webp') }})" alt="Buy and Rent Property in Dubai | Lux Realty LLC">
        <div class="container">
            <div class="row">
                <div class="col-md-1"></div>
                <div class="col-md-10">
                    <div class="theme-title">
                        <h1>Dubai Off-Plan Property</h1>
                    </div>
                    <h2 class="text-white" style="font-size: 21px;    text-align: center;">Our Real Estate Company has a number of luxury and
                        exclusive listings that are perfect for international clients. </h2>
                </div>
                <div class="col-md-1"></div>
            </div><br>
            <div class="row">
                <div class="col-md-1"></div>
                <div class="col-md-10">
                    <form action="/offplan-search-results" method="get">
                        <div class="row">
                            <div class="col-md-4 form-group">
                                <select name="developer" class="form-control">
                                    <option value="">Developer Name</option>
                                    @foreach (App\Models\Attribute::whereType('developer')->orderBy('name')->get() as $attr)
                                        <option value="{{ $attr->name }}">{{ $attr->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-4 form-group">
                                <select id="userlocation" name="project" data-live-search="true"
                                    class="form-control selectpicker custom-selectpick">
                                    <option value="">Project Name</option>
                                </select>
                            </div>
                            <div class="col-md-4 form-group">
                                <select name="development_status" class="form-control">
                                    <option value="">Developmet Status</option>
                                    @foreach (App\Models\Attribute::whereType('developmentStatus')->orderBy('name')->get() as $attr)
                                        <option value="{{ $attr->name }}">{{ $attr->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-4 form-group">
                                <select name="city" class="form-control">
                                    <option value="">State</option>
                                    @foreach (App\Models\Attribute::whereType('city')->orderBy('name')->get() as $attr)
                                        <option value="{{ $attr->slug }}">{{ $attr->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-4 form-group">
                                <select name="district" data-live-search="true"
                                    class="form-control selectpicker custom-selectpick">
                                    <option value="">Area</option>
                                    @foreach (App\Models\Attribute::whereType('district')->orderBy('name')->get() as $attr)
                                        <option value="{{ $attr->name }}">{{ $attr->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-4 form-group">
                                <select name="unit_type" class="form-control">
                                    <option value="">Unit Type</option>
                                    @foreach (App\Models\Attribute::whereType('unitType')->orderBy('name')->get() as $attr)
                                        <option value="{{ $attr->name }}">{{ $attr->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-4 form-group">
                                <select name="completion_date" class="form-control">
                                    <option value="">Project completion date</option>
                                    <option class="2q-2023" value="2Q 2023">2Q 2023</option>
                                    <option class="3q-2023" value="3Q 2023">3Q 2023</option>
                                    <option class="4q-2023" value="4Q 2023">4Q 2023</option>
                                    <option class="1q-2024" value="1Q 2024">1Q 2024</option>
                                    <option class="2q-2024" value="2Q 2024">2Q 2024</option>
                                    <option class="3q-2024" value="3Q 2024">3Q 2024</option>
                                    <option class="4q-2024" value="4Q 2024">4Q 2024</option>
                                    <option class="2025" value="2025">2025</option>
                                    <option class="2026" value="2026">2026</option>
                                    <option class="2027" value="2027">2027</option>
                                    <option class="2028" value="2028">2028</option>
                                    <option class="2029" value="2029">2029</option>
                                </select>
                            </div>
                            <div class="col-md-4 form-group">
                                <input maxlength="10" onkeypress="return onlyNumberKey(event)" type="text"
                                    name="max_price" class="form-control" placeholder="Price">
                            </div>
                            <div class="col-md-4 form-group">
                                <input maxlength="10" onkeypress="return onlyNumberKey(event)" type="text"
                                    name="max_area" class="form-control" placeholder="Unit Area (sqft)">
                            </div>
                            <div class="col-md-4 form-group">
                                <button type="submit" class="btn btn-block theme-btn-inverse">Search</button>
                            </div>
                            <div class="col-md-4 form-group">
                                <button type="reset" class="btn btn-block theme-btn-inverse">Reset</button>
                            </div>
                        </div>
                    </form>
                     <h3 class="text-white" style="font-size: 35px; text-align: center; color: #ffffff; background-color: #d19c15; padding: 10px;"> Search all available Dubai Off plan projects in 1 place.</h3>
  
           
                </div>
                <div class="col-md-1"></div>
                
            </div>
             
            </div>
                
    </section>
@endsection
@section('pageSpecificScripts')
    <script>
        $('button[type="reset"]').click(function(e) {
            e.preventDefault();
            $('select.selectpicker').val('').selectpicker('refresh');
            $(this).closest('form').trigger('reset');
        });
    </script>
@endsection