IPA/ipa-customer/pages/appointments.php

<?php $currentPage = 'appointments' ?>
<?php include( '../components/header-after-login.php' ) ?>

<!-- BEGIN PAGE LEVEL STYLE -->
<link href='../src/plugins/src/fullcalendar/fullcalendar.min.css' rel='stylesheet' type='text/css' />

<link href='../src/plugins/css/light/fullcalendar/custom-fullcalendar.css' rel='stylesheet' type='text/css' />
<link href='../src/assets/css/light/components/modal.css' rel='stylesheet' type='text/css'>

<link href='../src/plugins/css/dark/fullcalendar/custom-fullcalendar.css' rel='stylesheet' type='text/css' />
<!-- END PAGE LEVEL STYLE -->

<div class='main_content'>
    <div class='row'>
        <div class='col-md-3'>
            <?php include( '../components/sidebar.php' ) ?>
        </div>
        <div class='col-md-9'>
            <div class='inner_contents'>
                <div class='appoint_page'>
                    <div class='head_btns'>
                        <div class='h_para'>
                            <h2>Appointments</h2>
                            <p>There is the latest update for the last 7 days.</p>
                        </div>
                        <div>
                            <button class="yellow-btn" data-bs-toggle="modal" data-bs-target="#Schedule-time-date">
                                Add New Appointment
                            </button>
                        </div>
                    </div>

                </div>

                <div class="appoint_req card-shadow">
                    <p class="h6">Appointment request</p>
                    <div class="name_time">
                        <p>
                            <img loading="lazy" src="../assets/images/profile.svg" alt="profile">
                            <span>John doe</span>
                        </p>
                        <span>|</span>
                        <p>Time : 5:20 pm</p>
                    </div>
                    <div class="name_time Accept">
                        <button type="button" class="active btn-primary">Accept appointment</button>
                        <button type="button" class="btn-primary">Reject appointment</button>
                    </div>
                </div>
                <div class='calendar-container'>
                    <div class='calendar'></div>
                </div>

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


<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Add new Appointment</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">

                <div class="row">
                    <div class="col-md-12">
                        <div class="">
                            <label class="form-label">Enter Title</label>
                            <input id="event-title" type="text" class="form-control">
                        </div>
                    </div>

                    <div class="col-md-12 d-none">
                        <div class="">
                            <label class="form-label">Enter Start Date</label>
                            <input id="event-start-date" type="text" class="form-control">
                        </div>
                    </div>

                    <div class="col-md-12 d-none">
                        <div class="">
                            <label class="form-label">Enter End Date</label>
                            <input id="event-end-date" type="text" class="form-control">
                        </div>
                    </div>

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

                        <div class="d-flex mt-4">
                            <div class="n-chk">
                                <div class="form-check form-check-primary form-check-inline">
                                    <input class="form-check-input" type="radio" name="event-level" value="Work"
                                        id="rwork">
                                    <label class="form-check-label" for="rwork">Work</label>
                                </div>
                            </div>
                            <div class="n-chk">
                                <div class="form-check form-check-warning form-check-inline">
                                    <input class="form-check-input" type="radio" name="event-level" value="Travel"
                                        id="rtravel">
                                    <label class="form-check-label" for="rtravel">Travel</label>
                                </div>
                            </div>
                            <div class="n-chk">
                                <div class="form-check form-check-success form-check-inline">
                                    <input class="form-check-input" type="radio" name="event-level" value="Personal"
                                        id="rPersonal">
                                    <label class="form-check-label" for="rPersonal">Personal</label>
                                </div>
                            </div>
                            <div class="n-chk">
                                <div class="form-check form-check-danger form-check-inline">
                                    <input class="form-check-input" type="radio" name="event-level" value="Important"
                                        id="rImportant">
                                    <label class="form-check-label" for="rImportant">Important</label>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn" data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn btn-success btn-update-event" data-fc-event-public-id="">Update
                    changes</button>
                <button type="button" class="btn btn-primary btn-add-event">Add Event</button>
            </div>
        </div>
    </div>
</div>

<!-- modal end  -->

<?php include( '../components/footer-link.php' ) ?>

<!-- BEGIN PAGE LEVEL SCRIPTS -->
<script src="../src/plugins/src/fullcalendar/fullcalendar.min.js"></script>
<script src="../src/plugins/src/uuid/uuid4.min.js"></script>
<!-- END PAGE LEVEL SCRIPTS -->

<!--  BEGIN CUSTOM SCRIPTS FILE  -->
<script src="../src/plugins/src/fullcalendar/custom-fullcalendar.js"></script>
<!--  END CUSTOM SCRIPTS FILE  -->


<?php include( '../components/footer.php' ) ?>