 <!--start main wrapper-->
    <main class="main-wrapper">
        <div class="main-content">
            <button class="btn guestBtn d-flex gap-2 align-items-center" id="backBtn"><img
                    src="<?php echo base_url(); ?>assets/images/arowleft.svg" alt="" width="15px"> Back</button>
            <div class="row">
                <div class="col-md-8 my-2">
                    <h3 class="fmon fw-bold"><i class="fa fa-plus"></i> Add Ammenity</h3>
                </div>

            </div>
            <div class="modal-body">


                <form class="row" id="reservationForm" method="post" action="<?php echo base_url(); ?>site/addAmmenityData">
                    <!-- Name -->
                    <div class="col-md-6 my-2">
                        <label class="form label" for="name">Name</label>
                        <input type="text" name="name" id="name" class="form-control FormInput"
                            placeholder="Amenity Name" required>
                    </div>

                    <!-- Description -->
                    <div class="col-md-12 my-2">
                        <label class="form label" for="description">Description</label>
                        <textarea class="form-control FormInput" name="description" id="description"
                            placeholder="Description (Max 2000 characters)" maxlength="2000"></textarea>
                        <small id="descCount" class="form-text text-muted">0/2000</small>
                    </div>

                    <!-- Image Upload & Default Selection -->
                    <div class="col-md-12 my-2">
                        <label>Upload Image or Choose Default</label>
                        <div class="row">
                            <div class="col-md-6">
                                <input type="file" id="imageUpload" class="form-control FormInput" accept="image/*">
                            </div>
                        </div>


                        <div class="row">
                            <label>Choose an image:</label>
                            <div class="col-md-2 my-2">
                                <input type="radio" name="defaultImage" class="default-image form-check-input"
                                    value="<?php echo base_url(); ?>assets/images/gallery/Image33.png">
                                <img class="img-select" src="<?php echo base_url(); ?>assets/images/gallery/Image33.png">
                            </div>
                            <div class="col-md-2 my-2">
                                <input type="radio" name="defaultImage" class="default-image form-check-input"
                                    value="<?php echo base_url(); ?>assets/images/gallery/Image34.png">
                                <img class="img-select" src="<?php echo base_url(); ?>assets/images/gallery/Image34.png">
                            </div>
                            <div class="col-md-2 my-2">
                                <input type="radio" name="defaultImage" class="default-image form-check-input"
                                    value="<?php echo base_url(); ?>assets/images/gallery/Image35.png">
                                <img class="img-select" src="<?php echo base_url(); ?>assets/images/gallery/Image35.png">
                            </div>
                            <div class="col-md-2 my-2">
                                <input type="radio" name="defaultImage" class="default-image form-check-input"
                                    value="<?php echo base_url(); ?>assets/images/gallery/Image36.png">
                                <img class="img-select" src="<?php echo base_url(); ?>assets/images/gallery/Image36.png">
                            </div>
                            <div class="col-md-2 my-2">
                                <input type="radio" name="defaultImage" class="default-image form-check-input"
                                    value="<?php echo base_url(); ?>assets/images/gallery/Image37.png">
                                <img class="img-select" src="<?php echo base_url(); ?>assets/images/gallery/Image37.png">
                            </div>
                            <div class="col-md-2 my-2">
                                <input type="radio" name="defaultImage" class="default-image form-check-input"
                                    value="<?php echo base_url(); ?>assets/images/gallery/Image38.png">
                                <img class="img-select" src="<?php echo base_url(); ?>assets/images/gallery/Image38.png">
                            </div>
                            <div class="col-md-2 my-2">
                                <input type="radio" name="defaultImage" class="default-image form-check-input"
                                    value="<?php echo base_url(); ?>assets/images/gallery/Image39.png">
                                <img class="img-select" src="<?php echo base_url(); ?>assets/images/gallery/Image39.png">
                            </div>
                            <div class="col-md-2 my-2">
                                <input type="radio" name="defaultImage" class="default-image form-check-input"
                                    value="<?php echo base_url(); ?>assets/images/gallery/Image40.png">
                                <img class="img-select" src="<?php echo base_url(); ?>assets/images/gallery/Image40.png">
                            </div>
                            <div class="col-md-2 my-2">
                                <input type="radio" name="defaultImage" class="default-image form-check-input"
                                    value="<?php echo base_url(); ?>assets/images/gallery/Image41.png">
                                <img class="img-select" src="<?php echo base_url(); ?>assets/images/gallery/Image41.png">
                            </div>
                            <div class="col-md-2 my-2">
                                <input type="radio" name="defaultImage" class="default-image form-check-input"
                                    value="<?php echo base_url(); ?>assets/images/gallery/Image42.png">
                                <img class="img-select" src="<?php echo base_url(); ?>assets/images/gallery/Image42.png">
                            </div>
                            <div class="col-md-2 my-2">
                                <input type="radio" name="defaultImage" class="default-image form-check-input"
                                    value="<?php echo base_url(); ?>assets/images/gallery/Image43.png">
                                <img class="img-select" src="<?php echo base_url(); ?>assets/images/gallery/Image43.png">
                            </div>
                            <div class="col-md-2 my-2">
                                <input type="radio" name="defaultImage" class="default-image form-check-input"
                                    value="<?php echo base_url(); ?>assets/images/gallery/Image44.png">
                                <img class="img-select" src="<?php echo base_url(); ?>assets/images/gallery/Image44.png">
                            </div>
                            <div class="col-md-2 my-2">
                                <input type="radio" name="defaultImage" class="default-image form-check-input"
                                    value="<?php echo base_url(); ?>assets/images/gallery/Image45.png">
                                <img class="img-select" src="<?php echo base_url(); ?>assets/images/gallery/Image45.png">
                            </div>
                            <div class="col-md-2 my-2">
                                <input type="radio" name="defaultImage" class="default-image form-check-input"
                                    value="<?php echo base_url(); ?>assets/images/gallery/Image46.png">
                                <img class="img-select" src="<?php echo base_url(); ?>assets/images/gallery/Image46.png">
                            </div>
                            <div class="col-md-2 my-2">
                                <input type="radio" name="defaultImage" class="default-image form-check-input"
                                    value="<?php echo base_url(); ?>assets/images/gallery/Image47.png">
                                <img class="img-select" src="<?php echo base_url(); ?>assets/images/gallery/Image47.png">
                            </div>

                            <div class="col-md-2 my-2">
                                <input type="radio" name="defaultImage" class="default-image form-check-input"
                                    value="<?php echo base_url(); ?>assets/images/gallery/Image48.png">
                                <img class="img-select" src="<?php echo base_url(); ?>assets/images/gallery/Image48.png">
                            </div>
                            <div class="col-md-2 my-2">
                                <input type="radio" name="defaultImage" class="default-image form-check-input"
                                    value="<?php echo base_url(); ?>assets/images/gallery/Image49.png">
                                <img class="img-select" src="<?php echo base_url(); ?>assets/images/gallery/Image49.png">
                            </div>


                            <div class="col-md-2 my-2">
                                <input type="radio" name="defaultImage" class="default-image form-check-input"
                                    value="<?php echo base_url(); ?>assets/images/gallery/Image50.png">
                                <img class="img-select" src="<?php echo base_url(); ?>assets/images/gallery/Image50.png">
                            </div>
                            <div class="col-md-2 my-2">
                                <input type="radio" name="defaultImage" class="default-image form-check-input"
                                    value="<?php echo base_url(); ?>assets/images/gallery/Image51.png">
                                <img class="img-select" src="<?php echo base_url(); ?>assets/images/gallery/Image51.png">
                            </div>
                            <div class="col-md-2 my-2">
                                <input type="radio" name="defaultImage" class="default-image form-check-input"
                                    value="<?php echo base_url(); ?>assets/images/gallery/Image52.png">
                                <img class="img-select" src="<?php echo base_url(); ?>assets/images/gallery/Image52.png">
                            </div>

                            <div class="col-md-2 my-2">
                                <input type="radio" name="defaultImage" class="default-image form-check-input"
                                    value="<?php echo base_url(); ?>assets/images/gallery/Image53.png">
                                <img class="img-select" src="<?php echo base_url(); ?>assets/images/gallery/Image53.png">
                            </div>
                            <div class="col-md-2 my-2">
                                <input type="radio" name="defaultImage" class="default-image form-check-input"
                                    value="<?php echo base_url(); ?>assets/images/gallery/Image54.png">
                                <img class="img-select" src="<?php echo base_url(); ?>assets/images/gallery/Image54.png">
                            </div>
                            <div class="col-md-2 my-2">
                                <input type="radio" name="defaultImage" class="default-image form-check-input"
                                    value="<?php echo base_url(); ?>assets/images/gallery/Image55.png">
                                <img class="img-select" src="<?php echo base_url(); ?>assets/images/gallery/Image55.png">
                            </div>
                            <div class="col-md-2 my-2">
                                <input type="radio" name="defaultImage" class="default-image form-check-input"
                                    value="<?php echo base_url(); ?>assets/images/gallery/Image56.png">
                                <img class="img-select" src="<?php echo base_url(); ?>assets/images/gallery/Image56.png">
                            </div>






                            <input type="hidden" id="selectedImage" name="selectedImage">
                        </div>

                    </div>
                    <!-- Start Date -->
                    <div class="col-md-6 my-2">
                        <label class="form-label" for="startDate">Start Date</label>
                        <input type="date" name="startDate" id="startDate" class="form-control FormInput" required>
                    </div>

                    <!-- End Date -->
                    <div class="col-md-6 my-2">
                        <label class="form-label" for="endDate">End Date</label>
                        <input type="date" name="endDate" id="endDate" class="form-control FormInput" required>
                    </div>


                    <!-- Calendar Type -->
                    <div class="col-md-6 my-2">
                        <label class="form label" for="calendarType">Type of calendar</label>
                        <select name="calendarType" id="calendarType" class="form-select Formselet  ">
                            <option value="" selected>Select Type</option>
                            <option value="hourly">Hourly</option>
                            <option value="day_night">Day & Night</option>
                            <option value="once_day">Once a Day</option>
                            <option value="custom_slots">Custom Slots</option>
                        </select>
                    </div>

                    <!-- Time Fields (Dynamic) -->
                    <div class="col-md-6 my-2" id="timeFields"></div>

                    <!-- Advance Booking Time -->
                    <div class="col-md-6 my-2">
                        <label class="form label" for="advanceBooking">Advance Booking time </label>
                        <select name="advanceBooking" id="advanceBooking" class="form-select Formselet  ">
                            <option value="any">Any Time</option>
                            <option value="24">24 Hours</option>
                            <option value="week">1 Week</option>
                            <option value="month">1 Month</option>
                        </select>
                    </div>

                    <!-- Payment Required -->
                    <div class="col-md-6 my-2 align-self-center">
                        <div>
                            <label><input type="checkbox" class="form-check-input" name="paymentRequired" id="paymentRequired"> Payment
                                Required?</label>
                            <label><input type="checkbox" class="form-check-input" name="capacityLimit" id="capacityLimit"> Enable Capacity
                                Limit?</label>
                            <label><input type="checkbox" class="form-check-input" name="approvalRequired" id="approvalRequired"> Approval
                                Required?</label>
                        </div>
                    </div>
                    <div class="col-md-6 my-2" id="paymentFields" style="display: none;">
                        <input type="text" name="price" id="price" class="form-control FormInput" placeholder="Price">
                        <select name="currency" id="currency" class="form-select Formselet   mt-2">
                            <option value="usd">USD</option>
                            <option value="eur">EUR</option>
                        </select>
                    </div>


                    <div class="col-md-6 my-2" id="capacityField" style="display: none;">
                        <input type="number" name="maxPeople" id="maxPeople" class="form-control FormInput"
                            placeholder="Max People">
                    </div>



                    <!-- Reservation Limits -->
                    <div class="col-md-6 my-2">
                        <label class="form label" for="limitPerDay">Limit of reservations per day</label>
                        <select name="limitPerDay" id="limitPerDay" class="form-select Formselet    ">
                            <option value="no_limit">No Limit</option>
                            <option value="1">1</option>
                            <option value="2">2</option>
                        </select>
                    </div>
                    <div class="col-md-6 my-2">
                        <label class="form label" for="limitPerWeek">Limit of reservations per week</label>
                        <select name="limitPerWeek" id="limitPerWeek" class="form-select Formselet  ">
                            <option value="no_limit">No Limit</option>
                            <option value="1">1</option>
                            <option value="2">2</option>
                        </select>
                    </div>
                    <div class="col-md-6 my-2">
                        <input type="text" name="display_orders" id="display_orders" class="form-control FormInput"
                            placeholder="Display Orders">
                    </div>
                    <!-- Terms & Conditions -->
                    <div class="col-md-12 my-2">
                        <label>Upload Terms & Conditions (PDF)</label>
                        <input type="file" id="termsFile" class="form-control FormInput" name="termsFile" required accept="application/pdf">
                    </div>

                    <!-- Submit Button -->
                    <div class="col-md-12 my-2 text-center">
                        <button type="submit" class="btn autBtn py-2">Add Ammenity</button>
                    </div>
                </form>
<!--
                <script>
                    // Default Images for Selection
                    document.addEventListener("DOMContentLoaded", function () {
                        const defaultImages = document.querySelectorAll(".default-image");
                        const fileInput = document.getElementById("imageUpload");
                        const selectedImageInput = document.getElementById("selectedImage");

                        // Handle default image selection
                        defaultImages.forEach((radio) => {
                            radio.addEventListener("change", function () {
                                if (this.checked) {
                                    fileInput.value = ""; // Clear file upload if default selected
                                    fileInput.disabled = true;
                                    selectedImageInput.value = this.value; // Store selected default image
                                }
                            });
                        });

                        // Handle file upload
                        fileInput.addEventListener("change", function () {
                            if (this.files.length > 0) {
                                // Clear default selection when uploading a file
                                defaultImages.forEach((radio) => (radio.checked = false));
                                selectedImageInput.value = this.files[0].name; // Store uploaded file name
                            }
                        });
                    });


                    // Handle Calendar Type Selection
                    // const timeFields = document.getElementById('timeFields');
                    // document.getElementById('calendarType').addEventListener('change', function () {
                    //     const type = this.value;
                    //     timeFields.innerHTML = '';
                    //     if (type === 'hourly') {
                    //         timeFields.innerHTML = `<input type="time" name="openTime" class="form-control FormInput" placeholder="Opening Time">
                    //                             <input type="time" name="closeTime" class="form-control FormInput mt-2" placeholder="Closing Time">`;
                    //     } else if (type === 'day_night') {
                    //         timeFields.innerHTML = `<input type="time" name="dayOpen" class="form-control FormInput" placeholder="Day Opening Time">
                    //                             <input type="time" name="dayClose" class="form-control FormInput mt-2" placeholder="Day Closing Time">
                    //                             <input type="time" name="nightOpen" class="form-control FormInput mt-2" placeholder="Night Opening Time">
                    //                             <input type="time" name="nightClose" class="form-control FormInput mt-2" placeholder="Night Closing Time">`;
                    //     } else if (type === 'custom_slots') {
                    //         timeFields.innerHTML = '<div id="customSlots"></div><button type="button" onclick="addCustomSlot()" class="btn btn-sm btn-secondary mt-2">+ Add Slot</button>';
                    //     }
                    // });

                    const timeFields = document.getElementById('timeFields');
                    document.getElementById('calendarType').addEventListener('change', function () {
                        const type = this.value;
                        timeFields.innerHTML = '';
                        if (type === 'hourly') {
                            timeFields.innerHTML = `
            <label for="openTime">Opening Time</label>
            <input type="time" id="openTime" name="openTime" class="form-control FormInput" placeholder="Opening Time">
            <label for="closeTime" class="mt-2">Closing Time</label>
            <input type="time" id="closeTime" name="closeTime" class="form-control FormInput mt-2" placeholder="Closing Time">
        `;
                        } else if (type === 'day_night') {
                            timeFields.innerHTML = `
            <label for="dayOpen">Day Opening Time</label>
            <input type="time" id="dayOpen" name="dayOpen" class="form-control FormInput" placeholder="Day Opening Time">
            <label for="dayClose" class="mt-2">Day Closing Time</label>
            <input type="time" id="dayClose" name="dayClose" class="form-control FormInput mt-2" placeholder="Day Closing Time">
            <label for="nightOpen" class="mt-2">Night Opening Time</label>
            <input type="time" id="nightOpen" name="nightOpen" class="form-control FormInput mt-2" placeholder="Night Opening Time">
            <label for="nightClose" class="mt-2">Night Closing Time</label>
            <input type="time" id="nightClose" name="nightClose" class="form-control FormInput mt-2" placeholder="Night Closing Time">
        `;
                        } else if (type === 'custom_slots') {
                            timeFields.innerHTML = '<div id="customSlots"></div><button type="button" onclick="addCustomSlot()" class="btn btn-sm btn-secondary mt-2">+ Add Slot</button>';
                        }
                    });

                    // Add Custom Slots
                    function addCustomSlot() {
                        const slotDiv = document.createElement('div');
                        slotDiv.innerHTML = `
                         <label for="">From</label>
                        <input type="time" name="fromTime[]" class="form-control FormInput" placeholder="From">
                          <label for="">To</label>
                                         <input type="time" name="toTime[]" class="form-control FormInput mt-2" placeholder="To">`;
                        document.getElementById('customSlots').appendChild(slotDiv);
                    }

                    // Show/Hide Payment Fields
                    const paymentToggle = document.getElementById('paymentRequired');
                    paymentToggle.addEventListener('change', function () {
                        document.getElementById('paymentFields').style.display = this.checked ? 'block' : 'none';
                    });

                    // Show/Hide Capacity Fields
                    document.getElementById('capacityLimit').addEventListener('change', function () {
                        document.getElementById('capacityField').style.display = this.checked ? 'block' : 'none';
                    });

                    document.getElementById('description').addEventListener('input', function () {
                        const count = this.value.length;
                        document.getElementById('descCount').textContent = `${count}/2000`;
                    });
                </script>
-->
            </div>
        </div>
        </div>

    </main>
    
    <!--end main wrapper-->