{% extends BASE_TEMPLATE %}
{% load i18n %}
{% load static %}
{% load custom_filters %}
{% block customCSS %}<!-- additional CSS -->{% endblock %}
{% block content %}
    <div class="row">
        <div class="col-6">
            <h3>{% trans "Manage Working Hours" %}</h3>
            <form class="form"
                  method="post"
                  action=""
                  id="workingHoursForm"
                  data-action="{% if working_hours_instance %}
                                   update
                               {% else %}
                                   create
                               {% endif %}"
                  data-working-hours-id="
                                         {% if working_hours_instance %}
                                             {{ working_hours_instance.id }}
                                         {% else %}
                                             0
                                         {% endif %}"
                  data-staff-user-id="{% if staff_user_id %}
                                          {{ staff_user_id }}
                                      {% else %}
                                          0
                                      {% endif %}">
                {% csrf_token %}
                {% if working_hours_form.staff_member %}
                    <div class="form-group mb-3">
                        <label class="form-label"
                               for="{{ working_hours_form.staff_member.id_for_label }}">
                            {% trans 'Staff Member' %}:
                        </label>
                        {{ working_hours_form.staff_member }}
                    </div>
                {% endif %}
                <div class="form-group mb-3">
                    <label class="form-label"
                           for="{{ working_hours_form.day_of_week.id_for_label }}">{% trans 'Day of Week' %}:</label>
                    {{ working_hours_form.day_of_week|add_class:"form-select form-select-sm" }}
                </div>
                <div class="form-group mb-3">
                    <label class="form-label"
                           for="{{ working_hours_form.start_time.id_for_label }}">{% trans 'Start time' %}:</label>
                    <div class="input-group time24hr"
                         id="start-timepicker"
                         data-target-input="nearest">
                        <input type="text"
                               class="form-control form-control-sm datetimepicker-input"
                               data-toggle="datetimepicker"
                               data-target="#start-timepicker"
                               name="{{ working_hours_form.start_time.name }}"
                               value="{{ working_hours_form.start_time.value|default:'09:00 AM' }}"
                               id="{{ working_hours_form.start_time.id_for_label }}">
                        <div class="input-group-text"
                             data-toggle="datetimepicker"
                             data-target="#start-timepicker">
                            <i class="far fa-clock"></i>
                        </div>
                    </div>
                </div>
                <div class="form-group mb-3">
                    <label class="form-label"
                           for="{{ working_hours_form.end_time.id_for_label }}">{% trans 'End time' %}:</label>
                    <div class="input-group date"
                         id="end-timepicker"
                         data-target-input="nearest">
                        <input type="text"
                               class="form-control form-control-sm datetimepicker-input"
                               data-toggle="datetimepicker"
                               data-target="#end-timepicker"
                               name="{{ working_hours_form.end_time.name }}"
                               value="{{ working_hours_form.end_time.value|default:'05:00 PM' }}"
                               id="{{ working_hours_form.end_time.id_for_label }}">
                        <div class="input-group-text"
                             data-toggle="datetimepicker"
                             data-target="#end-timepicker">
                            <i class="far fa-clock"></i>
                        </div>
                    </div>
                </div>
                <button type="submit" class="btn btn-sm btn-phoenix-primary">{{ button_text }}</button>
                <input type="hidden"
                       id="addWorkingHoursUrl"
                       value="{% url 'appointment:add_working_hours_id' staff_user_id|default:user.id %}">
                <input type="hidden"
                       id="updateWorkingHoursUrl"
                       value="{% url 'appointment:update_working_hours_id' working_hours_id|default:0 staff_user_id|default:user.id %}">
            </form>
            {% include 'modal/error_modal.html' %}
            <div class="messages" style="margin: 20px 0">
                {% 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>
    </div>
{% endblock %}
{% block customJS %}
    <!-- JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.11.8/umd/popper.min.js"
            integrity="sha512-TPh2Oxlg1zp+kz3nFA0C5vVC6leG/6mm1z9+mA81MI5eaUVqasPLO8Cuk4gMF4gUfP5etR73rgU/8PNMsSesoQ=="
            crossorigin="anonymous"
            referrerpolicy="no-referrer"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.2/js/bootstrap.min.js"
            integrity="sha512-7rusk8kGPFynZWu26OKbTeI+QPoYchtxsmPeBqkHIEXJxeun4yJ4ISYe7C6sz9wdxeE1Gk3VxsIWgCZTc+vX3g=="
            crossorigin="anonymous"
            referrerpolicy="no-referrer"></script>
    <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/tempusdominus-bootstrap-4/5.39.0/js/tempusdominus-bootstrap-4.min.js"
            integrity="sha512-k6/Bkb8Fxf/c1Tkyl39yJwcOZ1P4cRrJu77p83zJjN2Z55prbFHxPs9vN7q3l3+tSMGPDdoH51AEU8Vgo1cgAA=="
            crossorigin="anonymous"
            referrerpolicy="no-referrer"></script>
    <script type="text/javascript">
        const addWorkingHoursUrl = $('#addWorkingHoursUrl').val();
        const updateWorkingHoursUrl = $('#updateWorkingHoursUrl').val();

        $(function () {
            const startTimeInput = $('#start-timepicker input');
            const endTimeInput = $('#end-timepicker input');
            const startTimePicker = $('#start-timepicker');
            const endTimePicker = $('#end-timepicker');

            const defaultStartTime = startTimeInput.val() ? moment(startTimeInput.val(), 'hh:mm A') : moment().hour(12).minute(0);
            const defaultEndTime = endTimeInput.val() ? moment(endTimeInput.val(), 'hh:mm A') : moment().hour(13).minute(0);

            startTimePicker.datetimepicker({
                format: 'hh:mm A',
                icons: {
                    time: 'far fa-clock'
                },
                pick12HourFormat: false,
                pickSeconds: false,
                defaultDate: defaultStartTime
            });

            endTimePicker.datetimepicker({
                format: 'hh:mm A',
                icons: {
                    time: 'far fa-clock'
                },
                pick12HourFormat: false,
                pickSeconds: false,
                defaultDate: defaultEndTime
            });

            startTimePicker.on('change.datetimepicker', function (e) {
                startTimeInput.val(e.date.format('hh:mm A'));
            });

            endTimePicker.on('change.datetimepicker', function (e) {
                endTimeInput.val(e.date.format('hh:mm A'));
            });
        });

        $(document).on('submit', '#workingHoursForm', function (e) {
            e.preventDefault();

            const form = $(this);
            const action = form.data('action');
            let postUrl = '';

            if (action === 'create') {
                postUrl = addWorkingHoursUrl;
            } else if (action === 'update') {
                postUrl = updateWorkingHoursUrl;
            }

            $.ajax({
                url: postUrl,
                type: 'POST',
                data: form.serialize(),
                success: function (response) {
                    if (response.success) {
                        window.location.href = response.redirect_url;
                    } else {
                        showErrorModal(response.message)
                    }
                },
                error: function (error) {
                    showErrorModal(error.responseJSON.message)
                }
            });
        });
    </script>
    <script src="{% static 'js/modal/error_modal.js' %}"></script>
    <script src="{% static 'js/js-utils.js' %}"></script>
{% endblock %}