   <!--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 Reservation</h3>
                </div>

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


                <!-- <form class="row">


                    <div class="col-md-6 my-2">

                        <select name="reservation_for" id="reservation_for" class="form-select Formselet">
                            <option value="#" selected>
                                Select Reservation for
                            </option>
                        </select>
                    </div>


                    <div class="col-md-6 my-2">

                        <select name="reservation_day" id="reservation_day" class="form-select Formselet">
                            <option value="#" selected>
                                Select The Day You Want To Reserve
                            </option>
                        </select>
                    </div>
                    <div class="col-md-6 my-2">

                        <input type="text" name="price" id="price" class="form-control FormInput"
                            placeholder="Price:$2500.00">
                    </div>
                    <div class="col-md-6 my-2">

                        <input type="text" name="reservation_date" id="reservation_date" class="form-control FormInput"
                            placeholder="Reservation date: Tuesday 16 April,2024">
                    </div>

                    <div class="col-md-6 my-2">

                        <input type="text" name="time_frame" id="time_frame" class="form-control FormInput"
                            placeholder="Time Frame: One reservation per day">
                    </div>
                    <div class="col-md-6 my-2">

                        <select name="reservation_slots" id="reservation_slots" class="form-select Formselet">
                            <option value="#" selected>
                                Reservation/Slots left: 2
                            </option>
                        </select>
                    </div>




                    <div class="col-md-12 my-2">

                        <textarea class="form-control FormInput" name="note" id="note" placeholder="Note"></textarea>
                    </div>
                    <div class="col-md-12 my-2">
                        <div class="row d-flex justify-content-center mb-3">
                            <div class="col-md-12 my-2 d-flex justify-content-center">
                                <button submit class="btn autBtn py-2 px-5">Send Warning</button>
                            </div>
                        </div>
                    </div>
                </form> -->
                <!-- button for attahmnts -->

                <form class="row" id="reservationForm" method="post" action="<?php echo base_url(); ?>site/addreservations">

                    <!-- Amenity Selection -->
                    <div class="col-md-6 my-2">
                        <select name="amenity" id="amenity" class="form-select Formselet selectAmenity">
                            <option value="#" selected>Select Amenity</option>
                            <?php foreach($Ammenities as $k=>$Ammenity){ ?>
                            <option data-id="<?php echo $Ammenity['price']; ?>" value="<?php echo $k; ?>"><?php echo $Ammenity['name']; ?></option>
                            <?php } ?>
                        </select>
                    </div>

                    <!-- Unit with Autocomplete -->
                    <div class="col-md-6 my-2">
                    <select class="form-select FormInput" name="unitId" required id="units">
                            <option value="">Units</option>
                            <?php foreach($units as $k=> $unit){ ?>
                                <option  value="<?php echo $k; ?>"><?php echo $unit['unit']; ?></option>
                            <?php } ?>
                        </select>
                    </div>

                    <!-- Date (Calendar Picker) -->
                    <div class="col-md-6 my-2">
                        <input type="date" name="reservation_date" id="reservation_date" class="form-control FormInput">
                    </div>

                    <!-- Available Slots -->
                    <div class="col-md-6 my-2">
                        <select name="available_slots" id="available_slots" class="form-select Formselet">
                            <option value="#" selected>Select Available Slot</option>
                        </select>
                    </div>

                    <!-- Number of People -->
                    <div class="col-md-6 my-2" id="number_of_people_container">
                        <input type="number" name="number_of_people" id="number_of_people"
                            class="form-control FormInput" placeholder="Number of People" min="1">
                    </div>

                    <!-- Price (Based on Amenity Selection) -->
                    <div class="col-md-6 my-2">
                        <input type="text" name="price" id="price" class="form-control FormInput"
                            placeholder="Price: $0.00" readonly>
                    </div>

                    <!-- Notes (Max 5000 characters) -->
                    <div class="col-md-12 my-2">
                        <textarea class="form-control FormInput" name="note" id="note"
                            placeholder="Note (Max 5000 characters)" maxlength="5000"></textarea>
                        <small id="noteCount" class="form-text text-muted">0/5000</small>
                    </div>

                    <!-- Submit Button -->
                    <div class="col-md-12 my-2">
                        <div class="row d-flex justify-content-center mb-3">
                            <div class="col-md-12 my-2 d-flex justify-content-center">
                                <button type="submit" class="btn autBtn py-2 px-5">Add Reservation</button>
                            </div>
                        </div>
                    </div>

                </form>


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

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