  <!--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> Create Check List </h3>
                </div>

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



                <form class="row">
                    <!-- Title Field -->
                    <div class="col-md-12 my-2">
                        <input type="text" name="title" id="title" class="form-control FormInput" placeholder="Title">
                    </div>

                    <!-- Frequency Dropdown -->
                    <div class="col-md-6 my-2 align-self-end">
                        <select name="frequency" id="frequency" class="form-select Formselet"
                            onchange="toggleDateFields()">
                            <option value="" selected>Select Frequency</option>
                            <option value="daily">Daily</option>
                            <option value="weekly">Weekly</option>
                            <option value="monthly">Monthly</option>
                            <option value="hourly">Hourly</option>
                        </select>
                    </div>

                    <!-- Start Date and Finish Date -->
                    <div class="col-md-6 my-2 align-self-end" id="startDateDiv" style="display: none;">
                        <label class="form-label">Start Date</label>
                        <input type="date" name="start_date" id="start_date" class="form-control FormInput"
                            placeholder="Start Date">
                    </div>
                    <div class="col-md-6 my-2 align-self-end" id="finishDateDiv" style="display: none;">
                        <label class="form-label">End Date</label>
                        <input type="date" name="finish_date" id="finish_date" class="form-control FormInput"
                            placeholder="Finish Date">
                    </div>

                    <!-- Hourly - From Hour & To Hour -->
                    <div class="col-md-6 my-2 align-self-end" id="fromHourDiv" style="display: none;">
                        <label class="form-label">From (Hour)</label>
                        <input type="time" name="from_hour" id="from_hour" class="form-control FormInput"
                            placeholder="From Hour">
                    </div>
                    <div class="col-md-6 my-2 align-self-end" id="toHourDiv" style="display: none;">
                        <label class="form-label">To(Hour)</label>
                        <input type="time" name="to_hour" id="to_hour" class="form-control FormInput"
                            placeholder="To Hour">
                    </div>

                    <!-- Area to Check Section -->
                    <div class="col-md-12 my-2" id="areas-container">
                        <div class="d-flex gap-3 align-items-center my-3">
                            <h5>Area to Check</h5> <button type="button" class="btn btn-success"
                                onclick="addArea()">+</button>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <input type="text" class="form-control me-2 FormInput" name="area[]"
                                    placeholder="Area Name">
                            </div>
                            <div class="row justify-content-end mt-2">
                                <div class="col-md-11">
                                    <div id="area-check-container">

                                        <div class="d-flex align-items-center mb-2">
                                            <input type="text" class="form-control me-2 FormInput" name="instruction[]"
                                                placeholder="Enter instruction">
                                            <button type="button" class="btn btn-success"
                                                onclick="addInstruction()">+</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>

                    <!-- Common Areas Check -->
                    <!-- <div class="col-md-12 my-2">
                        <h5>Common Areas Check</h5>
                        <div id="common-areas-container">
                            <div class="d-flex align-items-center mb-2">
                                <input type="text" class="form-control me-2 FormInput" name="common_area[]"
                                    placeholder="Enter area">
                                <button type="button" class="btn btn-success" onclick="addCommonArea()">+</button>
                            </div>
                        </div>
                    </div> -->
                    <div class="col-m-12 my-2">
                        <h5>Upload Image</h5>
                        <div class="brower2 d-flex justify-content-center align-items-center">
                            <div class="d-flex flex-column align-items-center">
                                <img src="<?php echo base_url(); ?>assets/images/up2.png" alt="" width="20px">
                                <small>Drage and Drop here or <label for="file" class="text-primary"
                                        style="cursor: pointer;">Browse Files</label></small>
                                <input class="d-none" type="image" name="file" id="file">
                            </div>
                        </div>
                    </div>
                    <!-- Submit Button -->
                    <div class="col-md-12 my-2 text-center">
                        <button type="submit" class="btn guestBtn px-5">Submit</button>
                    </div>
                </form>
                <!-- button for attahmnts -->



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

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

