{% extends BASE_TEMPLATE %}
{% load i18n %}
{% load static %}

{% block customCSS %}
    <link rel="stylesheet" type="text/css" href="{% static 'css/app_admin/unavailabilities.css' %}"/>
    <!-- additional CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
          integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
          crossorigin="anonymous" referrerpolicy="no-referrer"/>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.2/css/bootstrap.min.css"
          integrity="sha512-rt/SrQ4UNIaGfDyEXZtNcyWvQeOq0QLygHluFQcSjaGB04IxWhal71tKuzP6K8eYXYB6vJV4pHkXcmFGGQ1/0w=="
          crossorigin="anonymous" referrerpolicy="no-referrer"/>
    <link rel="stylesheet"
          href="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.39.0/css/tempusdominus-bootstrap-4.min.css"
          integrity="sha512-3JRrEUwaCkFUBLK1N8HehwQgu8e23jTH4np5NHOmQOobuC4ROQxFwFgBLTnhcnQRMs84muMh0PnnwXlPq5MGjg=="
          crossorigin="anonymous" referrerpolicy="no-referrer"/>
{% endblock %}

{% block body %}
    <section class="content content-wrapper">
        <div class="unvailabilities-form-wrapper">
            <div class="do-form-content">
                <h2>{% trans "Manage Unavailabilities" %}</h2>

                <form method="post" action="" id="unavailabilityForm"
                    data-action="{% if entity_instance %}update{% else %}create{% endif %}"
                    data-unavailability-id="
                        {% if entity_instance %}{{ entity_instance.id }}{% else %}0{% endif %}"
                    data-staff-user-id="{% if staff_user_id %}{{ staff_user_id }}{% else %}0{% endif %}">
                    {% csrf_token %}

                    {% if error_message %}
                        <script type="text/javascript">
                            document.addEventListener("DOMContentLoaded", function () {
                                showErrorModal("{{ error_message }}");
                            });
                        </script>
                    {% endif %}
                    <!-- Staff Member -->
                    {% if unavailability_form.staff_member %}
                        <div class="form-group">
                            <label for="{{ unavailability_form.staff_member.id_for_label }}">{% trans 'Staff Member' %}:</label>
                            {{ unavailability_form.staff_member }}
                        </div>
                    {% endif %}

                    <!-- Date Display -->
                    <div class="form-group">
                        <label for="{{ unavailability_form.date.id_for_label }}_display">{% trans 'Date' %}:</label>
                        <div class="input-group date" id="datepicker" data-target-input="nearest">
                            <input type="text" class="form-control datetimepicker-input" data-toggle="datetimepicker"
                                    data-target="#datepicker" name="{{ unavailability_form.date.name }}"
                                    value="{{ unavailability_form.date.value }}"
                                    id="{{ unavailability_form.date.id_for_label }}">
                            <div class="input-group-append" data-toggle="datetimepicker"
                                    data-target="#datepicker">
                                <div class="input-group-text"><i class="far fa-calendar"></i></div>
                            </div>
                        </div>
                        <!-- Actual value to be submitted -->
                        <input type="hidden" name="{{ unavailability_form.date.name }}_raw"
                            value="{{ unavailability_form.date.value }}"
                            id="{{ unavailability_form.date.id_for_label }}_raw">
                    </div>

                    <!-- Start Datetime Display -->
                    <div class="form-group">
                        <label for="{{ unavailability_form.start_time.id_for_label }}_display">{% trans 'Start time' %}:</label>
                        <div class="input-group date" id="start-timepicker" data-target-input="nearest">
                            <input type="text" class="form-control datetimepicker-input" data-toggle="datetimepicker"
                                    data-target="#start-timepicker" name="{{ unavailability_form.start_time.name }}"
                                    value="{{ unavailability_form.start_time.value }}"
                                    id="{{ unavailability_form.start_time.id_for_label }}">
                            <div class="input-group-append" data-toggle="datetimepicker"
                                    data-target="#start-timepicker">
                                <div class="input-group-text"><i class="far fa-clock"></i></div>
                            </div>
                        </div>
                        <!-- Actual value to be submitted -->
                        <input type="hidden" name="{{ unavailability_form.start_time.name }}_raw"
                            value="{{ unavailability_form.start_time.value }}"
                            id="{{ unavailability_form.start_time.id_for_label }}_raw">
                    </div>

                    <!-- End Datetime Display -->
                    <div class="form-group">
                        <label for="{{ unavailability_form.end_time.id_for_label }}_display">{% trans 'End time' %}:</label>
                        <div class="input-group date" id="end-timepicker" data-target-input="nearest">
                            <input type="text" class="form-control datetimepicker-input" data-toggle="datetimepicker"
                                    data-target="#end-timepicker" name="{{ unavailability_form.end_time.name }}"
                                    value="{{ unavailability_form.end_time.value }}"
                                    id="{{ unavailability_form.end_time.id_for_label }}">
                            <div class="input-group-append" data-toggle="datetimepicker"
                                    data-target="#end-timepicker">
                                <div class="input-group-text"><i class="far fa-clock"></i></div>
                            </div>
                        </div>
                        <!-- Actual value to be submitted -->
                        <input type="hidden" name="{{ unavailability_form.end_time.name }}_raw"
                            value="{{ unavailability_form.end_time.value }}"
                            id="{{ unavailability_form.end_time.id_for_label }}_raw">
                    </div>


                    <div class="form-group">
                        <label for="{{ unavailability_form.description.id_for_label }}">{% trans 'Description' %}:</label>
                        <input type="text" id="{{ unavailability_form.description.id_for_label }}"
                               name="{{ unavailability_form.description.name }}" value="{{ unavailability_form.description.value }}">
                    </div>


                    <button type="submit" class="btn btn-primary">{{ button_text }}</button>
                    <input type="hidden" id="addUnavailabilityUrl"
                           value="{% url 'appointment:add_unavailability_id' staff_user_id|default:user.id %}">
                    <input type="hidden" id="updateUnavailabilityUrl"
                           value="{% url 'appointment:update_unavailability_id' entity_id|default:0 staff_user_id|default:user.id %}">

                </form>
                <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>
                {% include 'modal/error_modal.html' %}
            </div>
        </div>
    </section>
{% endblock %}

{% block customJS %}
    <!-- JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"
            integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g=="
            crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <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">
        function ensureMomentLocale(distant_locale) {
            distant_locale = distant_locale.toLowerCase();

            //Ensure the locale need to be loaded
            if (moment.locales().includes(distant_locale)) {
                moment.locale(distant_locale);
                return Promise.resolve();
            }

            return new Promise((resolve, reject) => {
                const script = document.createElement('script');

                script.src =
                    `https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.30.1/locale/${distant_locale}.js`;

                script.onload = () => {
                    moment.locale(distant_locale);
                    resolve();
                };

                script.onerror = () => {
                    reject(new Error(`Locale Moment.js inconnue : ${distant_locale}`));
                };

                document.head.appendChild(script);
            });
        }

        const errorTxt = "{% trans 'Error' %}";
        const addUnavailabilityUrl = $('#addUnavailabilityUrl').val();
        const updateUnavailabilityUrl = $('#updateUnavailabilityUrl').val();

        const datepicker_display_format = '{{ localized_formats.js_datepicker_display_format }}';
        const timepicker_display_format = '{{ localized_formats.js_timepicker_display_format }}';
        const timepicker_locale = '{{ locale }}';

        $(async function () {
            try {
                await ensureMomentLocale(timepicker_locale);
            } catch (error) {
                console.warn('Invalid locale for Moment.js :', error);
                console.warn('Fallback to \'En\' locale.');
                moment.locale('en');
            }

            const dateInput = $('#{{ unavailability_form.date.id_for_label }}');
            const dateInputRaw = $('#{{ unavailability_form.date.id_for_label }}_raw');
            const startTimeInput = $('#{{ unavailability_form.start_time.id_for_label }}');
            const startTimeInputRaw = $('#{{ unavailability_form.start_time.id_for_label }}_raw');
            const endTimeInput = $('#{{ unavailability_form.end_time.id_for_label }}');
            const endTimeInputRaw = $('#{{ unavailability_form.end_time.id_for_label }}_raw');
            const datePicker = $('#datepicker');
            const startTimePicker = $('#start-timepicker');
            const endTimePicker = $('#end-timepicker');
            const defaultDate = dateInput.val() ? moment(dateInput.val(), datepicker_display_format) : moment().hour(0).minute(0);
            const defaultStartTime = startTimeInput.val() ? moment(startTimeInput.val(), timepicker_display_format) : moment().hour(12).minute(0);
            const defaultEndTime = endTimeInput.val() ? moment(endTimeInput.val(), timepicker_display_format) : moment().hour(13).minute(0);
            dateInputRaw.val(defaultDate.format("YYYY-MM-DD"));
            startTimeInputRaw.val(defaultStartTime.format("HH:mm:ss"));
            endTimeInputRaw.val(defaultEndTime.format("HH:mm:ss"));

            datePicker.datetimepicker({
                locale: timepicker_locale,
                format: datepicker_display_format,
                icons: {
                    date: 'far fa-calendar'
                },
                defaultDate: defaultDate
            });

            startTimePicker.datetimepicker({
                locale: timepicker_locale,
                format: timepicker_display_format,
                icons: {
                    time: 'far fa-clock'
                },
                pickSeconds: false,
                defaultDate: defaultStartTime
            });

            endTimePicker.datetimepicker({
                locale: timepicker_locale,
                format: timepicker_display_format,
                icons: {
                    time: 'far fa-clock'
                },
                pickSeconds: false,
                defaultDate: defaultEndTime
            });

            datePicker.on('change.datetimepicker', function (e) {
                dateInput.val(e.date.format(timepicker_display_format));
                dateInputRaw.val(e.date.format("YYYY-MM-DD"));
            });

            startTimePicker.on('change.datetimepicker', function (e) {
                startTimeInput.val(e.date.format(timepicker_display_format));
                startTimeInputRaw.val(e.date.format("HH:mm:ss"));
            });

            endTimePicker.on('change.datetimepicker', function (e) {
                endTimeInput.val(e.date.format(timepicker_display_format));
                endTimeInputRaw.val(e.date.format("HH:mm:ss"));
            });
        });

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

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

            if (action === 'create') {
                postUrl = addUnavailabilityUrl;
            } else if (action === 'update') {
                postUrl = updateUnavailabilityUrl;
            }

            $.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 %}