@extends('layouts.admin.main')
@section('main-section')
<div id="layoutSidenav_content" class=" position-relative d-flex flex-column min-vh-100 justify-content-between flex-grow-1 " style="min-width: 0;">
    <main>
        <nav class="sb-topnav navbar navbar-expand justify-content-between py-3 px-3 px-md-5">
            <div class="order-1 order-lg-0">
                <a class=" me-lg-0 text-dark bg-transparent d-lg-none" id="sidebarToggle" href="#!"><i class="bi bi-justify-right font-20px"></i></a>
            </div>

            <div class="logo-sm d-block d-lg-none">
HolidayHomes            </div>
            <div class="d-none d-lg-block">
                <div class="d-flex align-items-center justify-content-between gap-3 flex-wrap">
                    <h2 class=" font-28px fw-600 m-0">Settings > Property Info</h2>
                </div>
            </div>
            @include('layouts.admin.adminProfileDropdown')
        </nav>
        <div class="cover-all-content">
            <div class="d-block d-lg-none mb-3">
                <div class="d-flex align-items-center justify-content-between gap-3 flex-wrap">
                    <h2 class="font-22px font-md-28px fw-600">Settings > Property Info</h2>
                </div>
            </div>


            <div class="p-5 border bg-white rounded-2">
                <div class="row justify-content-around g-5">
                    <div class="col-md-3 me-auto">
                        <div class="nav flex-column nav-pills me-3 gap-3" id="v-pills-tab" role="tablist" aria-orientation="vertical" style="--bs-nav-link-color: #828282; position: sticky; top: 20px; left: 0;">
                            <button class="nav-link text-center py-3 font-15px lh-1 active" id="Property-tab" data-bs-toggle="pill" data-bs-target="#Property" type="button" role="tab" aria-controls="Property" aria-selected="true">Property Info</button>
                            <button class="nav-link text-center py-3 font-15px lh-1" id="Description-tab" data-bs-toggle="pill" data-bs-target="#Description" type="button" role="tab" aria-controls="Description" aria-selected="false" tabindex="-1">Description</button>
                            <button class="nav-link text-center py-3 font-15px lh-1" id="Location-tab" data-bs-toggle="pill" data-bs-target="#Location" type="button" role="tab" aria-controls="Location" aria-selected="false" tabindex="-1">Location</button>
                            <button class="nav-link text-center py-3 font-15px lh-1" id="Image-tab" data-bs-toggle="pill" data-bs-target="#Image" type="button" role="tab" aria-controls="Image" aria-selected="false" tabindex="-1">Image</button>
                        </div>
                    </div>
                    <hr class=" d-md-none">
                    <div class="col-md-8 mx-auto">
                        <div class="tab-content" id="v-pills-tabContent">
                            <div class="tab-pane fade active show" id="Property" role="tabpanel" aria-labelledby="Property-tab" tabindex="0">
                                <form action="">
                                    <div class="row g-4">
                                        <div class="col-12">
                                            <div class="form-group">
                                                <label for="">Title</label>
                                                <input type="text" class=" form-control" placeholder="Enter your property here...">
                                            </div>
                                        </div>
                                        <div class="col-lg-6">
                                            <div>
                                                <label for="">Room</label>
                                                <select name="" id="" class="select-box form-control" data-placeholder="Select Room Qty." data-minimum-results-for-search="Infinity">
                                                    <option></option>
                                                    <option>1 Room</option>
                                                    <option>2 Room</option>
                                                    <option>3 Room</option>
                                                    <option>4 Room</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-lg-6">
                                            <div>
                                                <label for="">Bath</label>
                                                <select name="" id="" class="select-box form-control" data-placeholder="Select Bath Qty." data-minimum-results-for-search="Infinity">
                                                    <option></option>
                                                    <option>1 Bath</option>
                                                    <option>2 Bath</option>
                                                    <option>3 Bath</option>
                                                    <option>4 Bath</option>
                                                </select>
                                            </div>
                                        </div>

                                        <div class="col-lg-6">
                                            <div>
                                                <label for="">Room Size (in Sqr.Ft)</label>
                                                <input type="text" name="" id="" placeholder="Enter Room Size (in Sqr.Ft)" class="form-control">
                                            </div>
                                        </div>
                                        <div class="col-lg-6">
                                            <div>
                                                <label for="">No. Of Guests</label>
                                                <select name="" id="" class="select-box form-control" data-placeholder="Select Guests Qty." data-minimum-results-for-search="Infinity">
                                                    <option></option>
                                                    <option>5 Guest</option>
                                                    <option>2 Guest</option>
                                                    <option>3 Guest</option>
                                                    <option>10 Guest</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-lg-6">
                                            <div>
                                                <label for="">Property Type</label>
                                                <select name="" id="" class="select-box form-control" data-placeholder="Select Property Type" data-minimum-results-for-search="Infinity">
                                                    <option></option>
                                                    <option>Property Type</option>
                                                    <option>Property Type</option>
                                                    <option>Property Type</option>
                                                    <option>Property Type</option>
                                                </select>
                                            </div>
                                        </div>
                                        {{-- <div class="col-lg-6">
                                            <div>
                                                <label for="">Tax</label>
                                                <select name="" id="" class="select-box form-control" data-placeholder="Select Tax" data-minimum-results-for-search="Infinity">
                                                    <option></option>
                                                    <option>Tax 1</option>
                                                    <option>Tax 2</option>
                                                    <option>Tax 3</option>
                                                    <option>Tax 4</option>
                                                </select>
                                            </div>
                                        </div> --}}
                                    </div>
                                    <div class="text-center mt-5">
                                        <button class="btn btn-primary extra-btn-padding-25 font-16px fw-600">Update Property</button>
                                    </div>
                                </form>
                            </div>
                            <div class="tab-pane fade" id="Description" role="tabpanel" aria-labelledby="Description-tab" tabindex="0">

                                <div class=" border-bottom pb-4 mb-4">
                                    <label for="">Property Description:</label>
                                    <textarea class="editor" placeholder="Type here..."></textarea>
                                </div>
                                <div class="border-bottom mb-4 pb-4">
                                    <h4 class=" font-20px fw-600 mb-4">Price Info:</h4>
                                    <div class="row g-4">
                                        {{-- <div class="col-lg-6">
                                            <label for="" class=" font-16px fw-600">Cleaning Fee:</label>
                                            <input type="text" class=" form-control" placeholder="Enter Cleaning Fees">
                                        </div>
                                        <div class="col-lg-6">
                                            <label for="" class=" font-16px fw-600">City Tax Fee:</label>
                                            <input type="text" class=" form-control" placeholder="Enter City Tax">
                                        </div> --}}
                                        {{-- <div class="col-lg-6">
                                            <label for="" class=" font-16px fw-600">Minimum no of nights:</label>
                                            <input type="text" class=" form-control" placeholder="Enter no. of nights">
                                        </div> --}}
                                        <div class="col-lg-12">
                                            <label for="" class=" font-16px fw-600">Security deposit: :</label>
                                            <input type="text" class=" form-control" placeholder="Enter security deposit">
                                        </div>
                                    </div>
                                </div>
                                <div class="border-bottom mb-4 pb-4">
                                    <h4 class=" font-20px fw-600 mb-4">Details:</h4>
                                    <div class="row g-4">
                                        {{-- <div class="col-lg-6">
                                            <label for="" class=" font-16px fw-600">Property Size:</label>
                                            <input type="text" class=" form-control" placeholder="Enter Cleaning Fees">
                                        </div>
                                        <div class="col-lg-6">
                                            <label for="" class=" font-16px fw-600">Bathroom</label>
                                            <div>
                                                <select name="" id="" class="select-box form-control" data-placeholder="Select Bathroom Qty." data-minimum-results-for-search="Infinity">
                                                    <option></option>
                                                    <option>1 Room</option>
                                                    <option>2 Room</option>
                                                    <option>3 Room</option>
                                                    <option>4 Room</option>
                                                </select>
                                            </div>
                                        </div> --}}
                                        <div class="col-lg-6">
                                            <label for="" class=" font-16px fw-600">Check-In Hour:</label>
                                            <input type="text" class=" selectDate form-control" placeholder="Check-In Hour">
                                        </div>
                                        <div class="col-lg-6">
                                            <label for="" class=" font-16px fw-600">Check-Out Hour:</label>
                                            <input type="text" class=" selectDate form-control" placeholder="Check-Out Hour">
                                        </div>

                                    </div>
                                </div>




                                <div class="border-bottom mb-4 pb-4">
                                    <h4 class=" font-20px fw-600 mb-5">Features:</h4>
                                    <label for="" class=" font-16px fw-600">Other Features:</label>
                                    <div class="card">
                                        <h5 class="card-header bg-transparent ">
                                            <div class="w-100 d-flex align-items-center justify-content-between">
                                                <h5 class="m-0">Air Conditioners</h5>
                                                <ul>
                                                    <li><a href="#" class=" btn btn-primary font-16px fw-500 extra-btn-padding-20 rounded-0">Add</a></li>
                                                </ul>
                                            </div>
                                        </h5>
                                        <div class="card-body">
                                            <ul class="d-flex align-items-center flex-wrap gap-2">
                                                <li class="border rounded-2 p-1 font-14px fw-400 d-flex align-items-center gap-3 px-2" style="background: #FAFAFA;"><img src="https://cdn-icons-png.flaticon.com/512/6394/6394423.png" style="width: 16px; height: 16px;" alt=""> Balcony/Terrace <a href="#"><i class="bi bi-x font-20px"></i></a></li>
                                                <li class="border rounded-2 p-1 font-14px fw-400 d-flex align-items-center gap-3 px-2" style="background: #FAFAFA;"><img src="https://cdn-icons-png.flaticon.com/512/6394/6394423.png" style="width: 16px; height: 16px;" alt=""> Balcony/Terrace <a href="#"><i class="bi bi-x font-20px"></i></a></li>
                                                <li class="border rounded-2 p-1 font-14px fw-400 d-flex align-items-center gap-3 px-2" style="background: #FAFAFA;"><img src="https://cdn-icons-png.flaticon.com/512/6394/6394423.png" style="width: 16px; height: 16px;" alt=""> Balcony/Terrace <a href="#"><i class="bi bi-x font-20px"></i></a></li>
                                                <li class="border rounded-2 p-1 font-14px fw-400 d-flex align-items-center gap-3 px-2" style="background: #FAFAFA;"><img src="https://cdn-icons-png.flaticon.com/512/6394/6394423.png" style="width: 16px; height: 16px;" alt=""> Balcony/Terrace <a href="#"><i class="bi bi-x font-20px"></i></a></li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>



                                <div class="border-bottom mb-4 pb-4">
                                    <h4 class=" font-20px fw-600 mb-5">Terms & Conditions:</h4>
                                    <label for="" class=" font-16px fw-600">Allow & Deny List:</label>
                                    <div class="card">
                                        <h5 class="card-header bg-transparent ">
                                            <div class="w-100 d-flex align-items-center justify-content-between">
                                                <h5 class="m-0">Children Allowed</h5>
                                                <ul class="d-flex align-items-center">
                                                    <li><a href="#" class=" btn btn-danger font-16px fw-500 extra-btn-padding-20 rounded-0"><i class="bi bi-x font-20px"></i></a></li>
                                                    <li><a href="#" class=" btn btn-success font-16px fw-500 extra-btn-padding-20 rounded-0"><i class="bi bi-check-lg font-20px"></i></a></li>
                                                </ul>
                                            </div>
                                        </h5>
                                        <div class="card-body">
                                            <ul class="d-flex align-items-center flex-wrap gap-2">
                                                <li class="border rounded-2 p-1 font-14px fw-400 d-flex align-items-center gap-3 px-2" style="background: #FAFAFA;"> <i class="bi bi-x font-20px text-danger"></i> Smoking Allowed <a href="#"><i class="bi bi-x font-20px"></i></a></li>
                                                <li class="border rounded-2 p-1 font-14px fw-400 d-flex align-items-center gap-3 px-2" style="background: #FAFAFA;"><i class="bi bi-x font-20px text-danger"></i> Pets Allowed <a href="#"><i class="bi bi-x font-20px"></i></a></li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>

                                <div class="text-center">
                                    <button class=" btn btn-primary extra-btn-padding-20 font-16px fw-600">Save & Continue</button>
                                </div>

                            </div>




                            <div class="tab-pane fade" id="Location" role="tabpanel" aria-labelledby="Location-tab" tabindex="0">
                                <h3 class=" font-24px fw-600">Present Address:</h3>
                                <div class="row g-4">
                                    <div class="col-12">
                                        <div class="form-group">
                                            <label for="" class=" font-16px fw-600">Address:</label>
                                            <input type="text" class=" form-control" placeholder="Enter Street Address">
                                        </div>
                                    </div>
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label for="" class=" font-16px fw-600">Area:</label>
                                            <div>
                                                <select name="" id="" class="select-box form-control" data-placeholder="Select Your State" data-minimum-results-for-search="Infinity">
                                                    <option></option>
                                                    <option>1 State</option>
                                                    <option>2 State</option>
                                                    <option>3 State</option>
                                                    <option>4 State</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                    {{-- <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="" class=" font-16px fw-600">City:</label>
                                            <div>
                                                <select name="" id="" class="select-box form-control" data-placeholder="Select Your City " data-minimum-results-for-search="Infinity">
                                                    <option></option>
                                                    <option>1 City</option>
                                                    <option>2 City</option>
                                                    <option>3 City</option>
                                                    <option>4 City</option>
                                                </select>
                                            </div>
                                        </div> --}}
                                    </div>
                                    {{-- <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="" class=" font-16px fw-600">City:</label>
                                            <input type="text" class=" form-control" placeholder="Enter Zip Code">
                                        </div>
                                    </div> --}}
                                </div>

                                <div class="text-center mt-7">
                                    <button class=" btn btn-primary extra-btn-padding-25 font-16px fw-600">Save & Continue</button>
                                </div>
                            </div>





                            <div class="tab-pane fade" id="Image" role="tabpanel" aria-labelledby="Image-tab" tabindex="0">
                                <h3 class=" font-24px fw-600 mb-5">Upload Image</h3>

                                <div>
                                    <h4 class=" font-16px fw-600">Add Photos (10/20)</h4>
                                    <div class=" border p-3 border-primary rounded-2" style="--bs-border-style: dashed; --bs-border-width: 2px;">
                                        <ul class="d-flex align-items-center gap-3 flex-wrap">
                                                                                            <li class=" d-grid">
                                                    <label for="pImageRow-1" class="productImageUpload position-relative overflow-hidden hover-opacity-07 mb-0 border border-primary rounded-2" style="width: 108px; height: 108px;" role="button">
                                                        <div class="position-absolute top-50 start-50 translate-middle text-center">
                                                            <i class="bi bi-camera font-32px text-primary"></i>
                                                            <p class="m-0 text-primary font-12px text-nowrap">Select Image</p>
                                                        </div>
                                                        <img id="pImage-1" alt="" class=" position-absolute top-50 start-50 translate-middle h-100 z-index1" style="object-fit: cover;" draggable="false" loading="lazy">


                                                        <input type="file" id="pImageRow-1" hidden="" onchange="document.getElementById('pImage-1').src = window.URL.createObjectURL(this.files[0])">

                                                        <a href="#" class=" position-absolute bg-primary rounded-circle d-flex align-items-center justify-content-center p-2 " onclick="document.getElementById('pImage-1').removeAttribute('src'), document.getElementById('pImageRow-1').value = null" style="width: 18px; height: 18px; top: 5px; right: 5px;">
                                                            <i class="bi bi-trash text-white font-10px"></i>
                                                        </a>

                                                    </label>
                                                </li>
                                                                                            <li class=" d-grid">
                                                    <label for="pImageRow-2" class="productImageUpload position-relative overflow-hidden hover-opacity-07 mb-0 border border-primary rounded-2" style="width: 108px; height: 108px;" role="button">
                                                        <div class="position-absolute top-50 start-50 translate-middle text-center">
                                                            <i class="bi bi-camera font-32px text-primary"></i>
                                                            <p class="m-0 text-primary font-12px text-nowrap">Select Image</p>
                                                        </div>
                                                        <img id="pImage-2" alt="" class=" position-absolute top-50 start-50 translate-middle h-100 z-index1" style="object-fit: cover;" draggable="false" loading="lazy">


                                                        <input type="file" id="pImageRow-2" hidden="" onchange="document.getElementById('pImage-2').src = window.URL.createObjectURL(this.files[0])">

                                                        <a href="#" class=" position-absolute bg-primary rounded-circle d-flex align-items-center justify-content-center p-2 " onclick="document.getElementById('pImage-2').removeAttribute('src'), document.getElementById('pImageRow-2').value = null" style="width: 18px; height: 18px; top: 5px; right: 5px;">
                                                            <i class="bi bi-trash text-white font-10px"></i>
                                                        </a>

                                                    </label>
                                                </li>
                                                                                            <li class=" d-grid">
                                                    <label for="pImageRow-3" class="productImageUpload position-relative overflow-hidden hover-opacity-07 mb-0 border border-primary rounded-2" style="width: 108px; height: 108px;" role="button">
                                                        <div class="position-absolute top-50 start-50 translate-middle text-center">
                                                            <i class="bi bi-camera font-32px text-primary"></i>
                                                            <p class="m-0 text-primary font-12px text-nowrap">Select Image</p>
                                                        </div>
                                                        <img id="pImage-3" alt="" class=" position-absolute top-50 start-50 translate-middle h-100 z-index1" style="object-fit: cover;" draggable="false" loading="lazy">


                                                        <input type="file" id="pImageRow-3" hidden="" onchange="document.getElementById('pImage-3').src = window.URL.createObjectURL(this.files[0])">

                                                        <a href="#" class=" position-absolute bg-primary rounded-circle d-flex align-items-center justify-content-center p-2 " onclick="document.getElementById('pImage-3').removeAttribute('src'), document.getElementById('pImageRow-3').value = null" style="width: 18px; height: 18px; top: 5px; right: 5px;">
                                                            <i class="bi bi-trash text-white font-10px"></i>
                                                        </a>

                                                    </label>
                                                </li>
                                                                                            <li class=" d-grid">
                                                    <label for="pImageRow-4" class="productImageUpload position-relative overflow-hidden hover-opacity-07 mb-0 border border-primary rounded-2" style="width: 108px; height: 108px;" role="button">
                                                        <div class="position-absolute top-50 start-50 translate-middle text-center">
                                                            <i class="bi bi-camera font-32px text-primary"></i>
                                                            <p class="m-0 text-primary font-12px text-nowrap">Select Image</p>
                                                        </div>
                                                        <img id="pImage-4" alt="" class=" position-absolute top-50 start-50 translate-middle h-100 z-index1" style="object-fit: cover;" draggable="false" loading="lazy">


                                                        <input type="file" id="pImageRow-4" hidden="" onchange="document.getElementById('pImage-4').src = window.URL.createObjectURL(this.files[0])">

                                                        <a href="#" class=" position-absolute bg-primary rounded-circle d-flex align-items-center justify-content-center p-2 " onclick="document.getElementById('pImage-4').removeAttribute('src'), document.getElementById('pImageRow-4').value = null" style="width: 18px; height: 18px; top: 5px; right: 5px;">
                                                            <i class="bi bi-trash text-white font-10px"></i>
                                                        </a>

                                                    </label>
                                                </li>
                                                                                            <li class=" d-grid">
                                                    <label for="pImageRow-5" class="productImageUpload position-relative overflow-hidden hover-opacity-07 mb-0 border border-primary rounded-2" style="width: 108px; height: 108px;" role="button">
                                                        <div class="position-absolute top-50 start-50 translate-middle text-center">
                                                            <i class="bi bi-camera font-32px text-primary"></i>
                                                            <p class="m-0 text-primary font-12px text-nowrap">Select Image</p>
                                                        </div>
                                                        <img id="pImage-5" alt="" class=" position-absolute top-50 start-50 translate-middle h-100 z-index1" style="object-fit: cover;" draggable="false" loading="lazy">


                                                        <input type="file" id="pImageRow-5" hidden="" onchange="document.getElementById('pImage-5').src = window.URL.createObjectURL(this.files[0])">

                                                        <a href="#" class=" position-absolute bg-primary rounded-circle d-flex align-items-center justify-content-center p-2 " onclick="document.getElementById('pImage-5').removeAttribute('src'), document.getElementById('pImageRow-5').value = null" style="width: 18px; height: 18px; top: 5px; right: 5px;">
                                                            <i class="bi bi-trash text-white font-10px"></i>
                                                        </a>

                                                    </label>
                                                </li>
                                                                                            <li class=" d-grid">
                                                    <label for="pImageRow-6" class="productImageUpload position-relative overflow-hidden hover-opacity-07 mb-0 border border-primary rounded-2" style="width: 108px; height: 108px;" role="button">
                                                        <div class="position-absolute top-50 start-50 translate-middle text-center">
                                                            <i class="bi bi-camera font-32px text-primary"></i>
                                                            <p class="m-0 text-primary font-12px text-nowrap">Select Image</p>
                                                        </div>
                                                        <img id="pImage-6" alt="" class=" position-absolute top-50 start-50 translate-middle h-100 z-index1" style="object-fit: cover;" draggable="false" loading="lazy">


                                                        <input type="file" id="pImageRow-6" hidden="" onchange="document.getElementById('pImage-6').src = window.URL.createObjectURL(this.files[0])">

                                                        <a href="#" class=" position-absolute bg-primary rounded-circle d-flex align-items-center justify-content-center p-2 " onclick="document.getElementById('pImage-6').removeAttribute('src'), document.getElementById('pImageRow-6').value = null" style="width: 18px; height: 18px; top: 5px; right: 5px;">
                                                            <i class="bi bi-trash text-white font-10px"></i>
                                                        </a>

                                                    </label>
                                                </li>
                                                                                    </ul>
                                    </div>

                                    <div class="text-center mt-7">
                                        <button class=" btn btn-primary extra-btn-padding-25 font-16px fw-600">Save & Continue</button>
                                    </div>
                                </div>
                            </div>

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

        </div>
    </main>
</div>
@endsection