{% extends 'booking/user/base.html' %}
{% load static %}


{% block extra_css %}
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
{% endblock extra_css %}

{% block side_text %}
    <div class="booking-cta">
        <h1>{{title}}</h1>
        <p>{{description}}</p>
    </div>
{% endblock side_text %}

{% block steps %}
{% include 'booking/admin/components/show_errors.html' %}

<input type="hidden" id="available_booking_months" value="{{booking_settings.available_booking_months}}" />
<input type="hidden" id="disable_weekend" value="{{booking_settings.disable_weekend}}" />

<!-- steps START -->
<div class="tab-pane fade show active" id="pills-date" role="tabpanel" aria-labelledby="pills-date-tab">
    <h1 class="text-muted h2">{{wizard.steps.current}}</h1>
    <p class="text-muted">Please fill in the booking {{wizard.steps.current}}:</p>
    <hr>
    {{ wizard.management_form }}
    <div class="row">
        {% for field in wizard.form %}
            <div class="col-md-6 mb-3">
                <div class="form-floating {% if field.is_hidden %}d-none{% endif %}">
                    {{ field }}
                    <label for="{{field.id_for_label}}">{{ field.label }}</label>
                </div>
            </div>
            {% if wizard.steps.current == "Time" %}
                <!-- Time List START -->
                <div id="time-list" class="container row g-2">
                    {% for item in get_available_time %}
                        <p class="border mx-1 col-2 py-3 text-center bg-{% if item.is_taken %}secondary {% elif item.time == field.value %}primary text-white {% else%}light {% endif %}">{{item.time}}</p>
                    {% endfor %}
                </div>
                <!-- Time List End -->
            {% endif %}
        {% endfor %}
    </div>
</div>
<!-- steps END -->

</div>


{% endblock steps %}

{% block extra_script %}
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>

<script>
    // time functions START
    document.querySelectorAll("#time-list .bg-light, #time-list .bg-primary").forEach(timeBtn => {
        timeBtn.addEventListener("click", timeBtnClicked.bind(this, timeBtn))
    })

    function timeBtnClicked(item) {
        document.querySelectorAll("#time-list .bg-primary").forEach(item => {
            item.classList.remove("bg-primary", "text-white")
            item.classList.add("bg-light")
        })
        item.classList.remove("bg-light")
        item.classList.add("bg-primary", "text-white")

        document.querySelector("#id_Time-time").value = item.innerHTML
    }
    // time functions END

    // Date Functions START
    var d = new Date();
    d.setMonth(d.getMonth() + document.querySelector("#available_booking_months").value);

    const disable_weekend = document.querySelector("#disable_weekend").value;
    function rmWeekend(date) {
        if (disable_weekend == "False") return ""
        return (date.getDay() === 0 || date.getDay() === 6);
    }

    flatpickr("#id_Date-date", {
            minDate: "today",
            maxDate: d,
            disable: [rmWeekend],
            shorthand: true,
            "locale": {
                "firstDayOfWeek": 1 // start week on Monday
            }
        })
        // Date Functions END
</script>
{% endblock extra_script %}
