haikal/templates/appointment/appointments.html

{% extends BASE_TEMPLATE %}
{% load i18n %}
{% load static %}
{% block customCSS %}
    <link rel="stylesheet" type="text/css" href="{% static 'css/appt-common.css' %}"/>
    <link rel="stylesheet" type="text/css" href="{% static 'css/appointments.css' %}"/>
{% endblock %}
{% block title %}
    {{ page_title }}
{% endblock %}
{% block description %}
    {{ page_description }}
{% endblock %}
{% block body %}

    <div class="row">
        <div class="col-xl-12">
            <h3 class="page-title">
                {% if page_header %}{{ page_header }}{% else %}{{ service.name }}{% endif %} </h3>
            <small class="page-description">
                {% trans "Check out our availability and book the date and time that works for you" %}
            </small>

            <hr>

            <div class="djangoAppt_page-body">
                <div class="djangoAppt_appointment-calendar">
                    <div class="djangoAppt_appointment-calendar-title-timezone">
                        <div class="djangoAppt_title">
                            {% trans "Select a date and time" %}
                        </div>
                        <div class="djangoAppt_timezone-details">
                            {% trans "Timezone" %}:&nbsp;{{ timezoneTxt }}
                        </div>
                    </div>
                    <hr class="djangoAppt_second-part">
                    <div class="djangoAppt_calendar-and-slot">
                        <div class="djangoAppt_calendar" id="calendar">
                        </div>
                        <div class="djangoAppt_slot">
                            <div class="djangoAppt_date_chosen">{{ date_chosen }}</div>
                            <div class="slot-container">
                                <div class="error-message"></div>
                                <ul id="slot-list" class="djangoAppt_slot-list">
                                        <!-- Slot list will be updated dynamically by the AJAX request -->
                                </ul>
                            </div>

                        </div>
                    </div>
                    {% if rescheduled_date %}
                        <div class="form-group" style="margin-top: 10px">
                            <label for="reason_for_rescheduling">{% trans "Reason for rescheduling" %}:</label>
                            <textarea name="reason_for_rescheduling" id="reason_for_rescheduling"
                                      class="form-control" rows="1" required></textarea>
                        </div>
                    {% endif %}
                </div>
                <div class="djangoAppt_service-description">
                    <form method="post" action="{% url 'appointment:appointment_request_submit' %}"
                          class="appointment-form">
                        {% csrf_token %}
                        <div class="staff-members-list">
                            <label class="djangoAppt_item-name" for="staff_id">{{ label }}</label>
                            <select name="staff_member" id="staff_id">
                                {% if not staff_member %}
                                    <option value="none"
                                            selected>{% trans 'Please select a staff member' %}</option>
                                {% endif %}
                                {% for sf in all_staff_members %}
                                    <option value="{{ sf.id }}"
                                            {% if staff_member and staff_member.id == sf.id %}selected{% endif %}>{{ sf.get_staff_member_name }}</option>
                                {% endfor %}
                            </select>
                        </div>

                        <div>{% trans "Service Details" %}</div>
                        <hr class="djangoAppt_second-part">
                        <div class="djangoAppt_service-description-content">
                            <p class="djangoAppt_item-name">{{ service.name }}</p>
                            <p id="service-datetime-chosen" class="service-datetime-chosen">{{ date_chosen }}</p>
                            <p>{{ service.get_duration }}</p>
                            <p>{{ service.get_price_text }}</p>
                            <button type="submit"
                                    class="btn btn-phoenix-primary btn-submit-appointment"
                                    disabled>{% trans 'Next' %}</button>
                        </div>
                    </form>
                </div>
            </div>
            {% if messages %}
                {% for message in messages %}
                    <div class="alert alert-dismissible {% if message.tags %}alert-{% if message.level == DEFAULT_MESSAGE_LEVELS.ERROR %}danger{% else %}{{ message.tags }}{% endif %}{% endif %}"
                         role="alert">{{ message }}</div>
                {% endfor %}
            {% endif %}
        </div>
    </div>

{% endblock %}

{% block customJS %}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.30.1/moment.js"
            integrity="sha512-3CuraBvy05nIgcoXjVN33mACRyI89ydVHg7y/HMN9wcTVbHeur0SeBzweSd/rxySapO7Tmfu68+JlKkLTnDFNg=="
            crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.45/moment-timezone-with-data.min.js"
            integrity="sha512-t/mY3un180WRfsSkWy4Yi0tAxEDGcY2rAEx873hb5BrkvLA0QLk54+SjfYgFBBoCdJDV1H86M8uyZdJhAOHeyA=="
            crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/6.1.10/index.global.min.js"
            integrity="sha512-JCQkxdym6GmQ+AFVioDUq8dWaWN6tbKRhRyHvYZPupQ6DxpXzkW106FXS1ORgo/m3gxtt5lHRMqSdm2OfPajtg=="
            crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script>
        const timezone = "{{ timezoneTxt }}";
        const locale = "{{ locale }}";
        const availableSlotsAjaxURL = "{% url 'appointment:available_slots_ajax' %}";
        const requestNextAvailableSlotURLTemplate = "{% url 'appointment:request_next_available_slot' service_id=0 %}";
        const getNonWorkingDaysURL = "{% url 'appointment:get_non_working_days_ajax' %}";
        const serviceId = "{{ service.id }}";
        const serviceDuration = parseInt("{{ service.duration.total_seconds }}") / 60;
        const rescheduledDate = "{{ rescheduled_date }}";
        const appointmentRequestId = "{{ ar_id_request }}";
        const appointmentRequestSubmitURL = "{% url 'appointment:appointment_request_submit' %}";
        const appointmentRescheduleURL = "{% url 'appointment:reschedule_appointment_submit' %}";
    </script>
    <script>
        const requestNonAvailableSlotBtnTxt = "{% trans 'Request next available slot' %}";
        const noStaffMemberSelectedTxt = "{% trans 'No staff member selected.' %}";
        const selectTimeSlotWarningTxt = "{% trans 'Please select a time slot before submitting the appointment request.' %}";
        const dateInPastErrorTxt = "{% trans 'Date is in the past.' %}";
        const selectDateAndTimeAlertTxt = "{% trans 'Please select a date and time' %}";
    </script>
    <script src="{% static 'js/appointments.js' %}"></script>
    <script src="{% static 'js/app_admin/staff_index.js' %}"></script>
    <script src="{% static 'js/js-utils.js' %}"></script>
{% endblock %}