<div class="modal" id="addListingModal" data-keyboard="false" data-backdrop="static">
    <div class="modal-dialog modal-lg" style="max-width: 100%; margin: 0">
        <div class="modal-content border-primary">
            <div class="modal-header bg-primary">
                <h5 class="modal-title text-white">Add new Listing</h5>
                <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body" style="padding: 0;">
                <ul class="nav nav-tabs nav-tabs-success" style="margin-bottom: 20px">
                    <li class="nav-item">
                        <a class="nav-link sbs_details_tabs active" data-toggle="tab" href="#add-details"><i
                                class="fa fa-edit"></i>
                            <span class="hidden-xs">Basic Details</span></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link sbs_details_tabs" data-toggle="tab" href="#add-media"><i
                                class="fa fa-image"></i>
                            <span class="hidden-xs">Media</span></a>
                    </li>
                </ul>
                <div class="tab-content">
                    <div id="add-details" class="container-fluid tab-pane active">
                        <form data-toggle="validator" enctype="multipart/form-data" class="form-styled"
                              id="create_listing_form">
                            <div class="row">
                                <div class="col-xs-12 col-lg-12">
                                    <div class="form-group">
                                        <label for="listing_title" class="control-label">Title*</label>
                                        <input type="text" id="listing_title" maxlength="300" required
                                               data-minlength="3" data-error="Must be at least 3 characters"
                                               class="form-control">
                                        <span class="help-block with-errors"></span>
                                    </div>
                                </div>
                                <div class="col-xs-12 col-lg-6">
                                    <div class="form-group">
                                        <label class="control-label">Project*</label>
                                        <select required data-live-search="true" id="listing_project"
                                                class="form-control selectpicker show-tick">
                                            <option value="">Select Project</option>
                                        </select>
                                        <span class="help-block with-errors"></span>
                                    </div>
                                </div>
                                <div class="col-xs-12 col-lg-6">
                                    <div class="form-group">
                                        <label class="control-label">Contacts</label>
                                        <select data-live-search="true" id="listing_contacts"
                                                class="form-control selectpicker show-tick" multiple="multiple">
                                            @foreach (auth()->user()->contacts()->orderBy('name')->get() as $attr)
                                                <option value="{{ $attr->id }}">
                                                    {{ $attr->name }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="col-xs-12 col-lg-4">
                                    <div class="form-group">
                                        <label class="control-label">Purpose*</label>
                                        <select required data-live-search="true" id="listing_purpose"
                                                class="form-control selectpicker show-tick">
                                            <option value="">Select Purpose</option>
                                            @foreach (App\Models\Attribute::where('type', 'purpose')->get() as $attr)
                                                <option value="{{ $attr->id }}">{{ $attr->name }}</option>
                                            @endforeach
                                        </select>
                                        <span class="help-block with-errors"></span>
                                    </div>
                                </div>
                                <div class="col-xs-12 col-lg-4">
                                    <div class="form-group">
                                        <label class="control-label">Developer</label>
                                        <select data-live-search="true" id="listing_developer"
                                                class="form-control selectpicker show-tick">
                                            <option value="">Select Developer</option>
                                            @foreach (App\Models\Attribute::where('type', 'developer')->get() as $attr)
                                                <option value="{{ $attr->id }}">{{ $attr->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="col-xs-12 col-lg-4">
                                    <div class="form-group">
                                        <label class="control-label">Property Type</label>
                                        <select data-live-search="true" id="listing_property_type"
                                                class="form-control selectpicker show-tick">
                                            <option value="">Select Property Type</option>
                                            @foreach (App\Models\Attribute::orderBy('name')->with('parent')->where('type', 'propertyType')->whereNotNull('parent_id')->get() as $attr)
                                                <option value="{{ $attr->id }}">
                                                    {{ $attr->parent ? $attr->name . ' (' . $attr->parent->name . ')' : $attr->name }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="col-xs-12 col-lg-4">
                                    <div class="form-group">
                                        <label class="control-label">Unit Type</label>
                                        <select data-live-search="true" id="listing_unit_type"
                                                class="form-control selectpicker show-tick">
                                            <option value="">Select Unit Type</option>
                                            @foreach (App\Models\Attribute::orderBy('name')->where('type', 'unitType')->get() as $attr)
                                                <option value="{{ $attr->id }}">{{ $attr->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="col-xs-12 col-lg-4">
                                    <div class="form-group">
                                        <label class="control-label">Features / Amenities</label>
                                        <select data-live-search="true" id="listing_features"
                                                class="form-control selectpicker show-tick" multiple="multiple">
                                            @foreach (App\Models\Attribute::orderBy('name')->with('parent')->where('type', 'feature')->whereNotNull('parent_id')->get() as $attr)
                                                <option value="{{ $attr->id }}">
                                                    {{ $attr->parent ? $attr->name . ' (' . $attr->parent->name . ')' : $attr->name }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="col-xs-12 col-lg-4">
                                    <div class="form-group">
                                        <label class="control-label">Completion Status</label>
                                        <select data-live-search="true" id="listing_completion_status"
                                                class="form-control selectpicker show-tick">
                                            <option value="">Select Completion Status</option>
                                            @foreach (App\Models\Attribute::where('type', 'completionStatus')->get() as $attr)
                                                <option value="{{ $attr->id }}">{{ $attr->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="col-xs-12 col-lg-4">
                                    <div class="form-group">
                                        <label class="control-label">Ownership Status</label>
                                        <select data-live-search="true" id="listing_ownership_status"
                                                class="form-control selectpicker show-tick">
                                            <option value="">Select Ownership Status</option>
                                            @foreach (App\Models\Attribute::where('type', 'ownershipStatus')->get() as $attr)
                                                <option value="{{ $attr->id }}">{{ $attr->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="col-xs-12 col-lg-4">
                                    <div class="form-group">
                                        <label class="control-label">Development Status</label>
                                        <select data-live-search="true" id="listing_development_status"
                                                class="form-control selectpicker show-tick">
                                            <option value="">Select Development Status</option>
                                            @foreach (App\Models\Attribute::where('type', 'developmentStatus')->get() as $attr)
                                                <option value="{{ $attr->id }}">{{ $attr->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="col-xs-12 col-lg-4">
                                    <div class="form-group">
                                        <label class="control-label">Sale Status</label>
                                        <select data-live-search="true" id="listing_sale_status"
                                                class="form-control selectpicker show-tick">
                                            <option value="">Select Sale Status</option>
                                            @foreach (App\Models\Attribute::where('type', 'saleStatus')->get() as $attr)
                                                <option value="{{ $attr->id }}">{{ $attr->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="col-xs-12 col-lg-4">
                                    <div class="form-group">
                                        <label class="control-label">Rent Frequency</label>
                                        <select data-live-search="true" id="listing_rent_frequency"
                                                class="form-control selectpicker show-tick">
                                            <option value="">Select Rent Frequency</option>
                                            @foreach (App\Models\Attribute::where('type', 'rentFrequency')->get() as $attr)
                                                <option value="{{ $attr->id }}">{{ $attr->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="col-xs-12 col-lg-4">
                                    <div class="form-group">
                                        <label class="control-label">Cheque</label>
                                        <select data-live-search="true" id="listing_cheque"
                                                class="form-control selectpicker show-tick">
                                            <option value="">Select Cheque</option>
                                            @foreach (App\Models\Attribute::where('type', 'cheque')->get() as $attr)
                                                <option value="{{ $attr->id }}">{{ $attr->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="col-xs-12 col-lg-4">
                                    <div class="form-group">
                                        <label class="control-label">Price</label>
                                        <input type="text" id="listing_price" maxlength="10"
                                               class="form-control">
                                    </div>
                                </div>
                                <div class="col-xs-12 col-lg-4">
                                    <div class="form-group">
                                        <label class="control-label">Area</label>
                                        <input type="text" id="listing_area" maxlength="10" class="form-control">
                                    </div>
                                </div>
                                <div class="col-xs-12 col-lg-4">
                                    <div class="form-group">
                                        <label class="control-label">Beds</label>
                                        <input type="text" id="listing_beds" maxlength="10" class="form-control">
                                    </div>
                                </div>
                                <div class="col-xs-12 col-lg-4">
                                    <div class="form-group">
                                        <label class="control-label">Baths</label>
                                        <input type="text" id="listing_baths" maxlength="5"
                                               class="form-control">
                                    </div>
                                </div>
                                <div class="col-xs-12 col-lg-4">
                                    <div class="form-group">
                                        <label class="control-label">Latitude</label>
                                        <input type="text" id="listing_lat" maxlength="50" class="form-control">
                                    </div>
                                </div>
                                <div class="col-xs-12 col-lg-4">
                                    <div class="form-group">
                                        <label class="control-label">Longitude</label>
                                        <input type="text" id="listing_lng" maxlength="50" class="form-control">
                                    </div>
                                </div>
                                <div class="col-xs-12 col-lg-4">
                                    <div class="form-group">
                                        <label class="control-label">Project Completion Date</label>
                                        <input type="text" maxlength="20" id="listing_pcd" class="form-control">
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-xs-12 col-lg-12">
                                    <div class="form-group">
                                        <label class="control-label">SEO Meta Title</label>
                                        <input type="text" id="listing_meta_title" maxlength="300"
                                               class="form-control">
                                    </div>
                                </div>
                                <div class="col-xs-12 col-lg-12">
                                    <div class="form-group">
                                        <label class="control-label">SEO Meta Keywords</label>
                                        <input type="text" id="listing_meta_keywords" maxlength="300"
                                               class="form-control">
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-xs-12 col-lg-12">
                                    <div class="form-group">
                                        <label class="control-label">SEO Meta Description</label>
                                        <input type="text" id="listing_meta_description" maxlength="300"
                                               class="form-control">
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-xs-12 col-lg-12">
                                    <div class="form-group">
                                        <label class="control-label">Full Description</label>
                                        <textarea type="text" id="listing_full_description" class="form-control content_area"></textarea>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-xs-12 col-lg-12">
                                    <div class="form-group">
                                        <button type="submit" class="btn btn-success" id="submit_btn"><i
                                                class="fa fa-check-square-o"></i> Save
                                        </button>
                                        <button type="button" class="btn btn-danger" data-dismiss="modal"><i
                                                class="fa fa-times"></i>
                                            Close
                                        </button>
                                        <div class="alert alert-danger add_errors" style="display: none">
                                            <ul></ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div id="add-media" class="container-fluid tab-pane">
                        <div class="row">
                            <div class="col-lg-6">
                                <div class="card">
                                    <div class="card-header text-uppercase">Thumbnail image</div>
                                    <div class="card-body">
                                        <form id="thumbnail_listings_dropzone">
                                            @csrf
                                            <div class="row">
                                                <div class="col-xs-12 col-lg-12">
                                                    <div class="fallback">
                                                        <input name="file" type="file">
                                                    </div>
                                                </div>
                                            </div>
                                        </form>
                                        <div class="alert alert-danger thumbnail_add_image_errors"
                                             style="display: none">
                                            <ul></ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="card">
                                    <div class="card-header text-uppercase">Preview</div>
                                    <div class="card-body" style="background-color: #eee">
                                        <div class="thumbnail_add_image_pre_block pre_block">
                                            <input type="hidden" id="thumbnail_add_image_id">
                                            <img src="/public/images/banner-placeholder.jpg" alt="image"
                                                 id="thumbnail_add_image_pre" class="img-fluid">
                                            <button type="button" id="thumbnail_delete_uploaded_image_btn"
                                                    class="btn btn-danger" style="display: none">
                                                <i class="fa fa-times"></i>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-6">
                                <div class="card">
                                    <div class="card-header text-uppercase">Brochure</div>
                                    <div class="card-body">
                                        <form id="primary_listings_dropzone">
                                            @csrf
                                            <div class="row">
                                                <div class="col-xs-12 col-lg-12">
                                                    <div class="fallback">
                                                        <input name="file" type="file">
                                                    </div>
                                                </div>
                                            </div>
                                        </form>
                                        <div class="alert alert-danger primary_add_image_errors"
                                             style="display: none">
                                            <ul></ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="card">
                                    <div class="card-header text-uppercase">Preview</div>
                                    <div class="card-body" style="background-color: #eee">
                                        <div class="primary_add_image_pre_block pre_block">
                                            <input type="hidden" id="primary_add_image_id">
                                            <a target="_blank" href="" id="primary_add_image_pre"
                                               style="display: none;">View</a>
                                            <button type="button" id="primary_delete_uploaded_image_btn"
                                                    class="btn btn-danger" style="display: none">
                                                <i class="fa fa-times"></i>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-12">
                                <div class="card">
                                    <div class="card-header text-uppercase">Gallery images</div>
                                    <div class="card-body">
                                        <form id="gallery_listings_dropzone">
                                            @csrf
                                            <div class="row">
                                                <div class="col-xs-12 col-lg-12">
                                                    <div class="fallback">
                                                        <input name="file" type="file">
                                                    </div>
                                                </div>
                                            </div>
                                        </form>
                                        <div class="alert alert-danger gallery_add_image_errors"
                                             style="display: none">
                                            <ul></ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row" id="gallery_images"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
