{% extends 'opcalendar/base.html' %}
{% load django_bootstrap5 %}
{% load static %}
{% load i18n %}
{% get_current_language as LANGUAGE_CODE %}

{% block page_title %}{% trans "Edit Event" %}{% endblock page_title %}

{% block extra_css %}
    {% include 'bundles/jquery-datetimepicker-css.html' %}
    <style>
        .opcal-form .input-group-text {
            background: rgba(var(--bs-body-color-rgb), .08);
            color: var(--bs-body-color);
            border-color: var(--bs-border-color);
            width: 2.4rem;
            justify-content: center;
        }
        .opcal-form .opcal-section {
            border-left: 3px solid var(--bs-primary);
            padding: .5rem .9rem .1rem;
            margin-bottom: 1.25rem;
            background: rgba(var(--bs-body-color-rgb), .025);
            border-radius: 0 .25rem .25rem 0;
        }
        .opcal-form .opcal-section-label {
            font-size: .67rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: .09em;
            opacity: .45;
            margin-bottom: .5rem;
        }
        .opcal-form .opcal-important-check .form-check-label {
            font-weight: 600;
            color: var(--bs-warning);
        }
        .opcal-form .opcal-repeat-check .form-check-label {
            font-weight: 600;
        }
    </style>
{% endblock extra_css %}

{% block content %}
<div class="card">
    <div class="card-header">
        <i class="fas fa-calendar-alt me-1"></i> {% trans "Edit Event" %}
    </div>
    <div class="card-body">
        <form class="opcal-form" role="form" action="" method="POST">
            {% csrf_token %}

            {# ── Event ── #}
            <div class="opcal-section">
                <div class="opcal-section-label">{% trans "Event" %}</div>
                <div class="row g-2">
                    <div class="col-md-3">
                        {% bootstrap_field form.operation_type addon_before="<i class='fas fa-layer-group'></i>" %}
                    </div>
                    <div class="col-md-6">
                        {% bootstrap_field form.title addon_before="<i class='fas fa-heading'></i>" %}
                    </div>
                    <div class="col-md-3">
                        {% bootstrap_field form.fc addon_before="<i class='fas fa-user-tie'></i>" %}
                    </div>
                </div>
                <div class="row g-2 align-items-end">
                    <div class="col-md-4">
                        {% bootstrap_field form.host addon_before="<i class='fas fa-users'></i>" %}
                    </div>
                    <div class="col-md-4">
                        {% bootstrap_field form.event_visibility addon_before="<i class='fas fa-eye'></i>" %}
                    </div>
                    <div class="col-md-4 d-flex align-items-end pb-3">
                        <div class="opcal-important-check w-100">
                            {% bootstrap_field form.important %}
                        </div>
                    </div>
                </div>
            </div>

            {# ── Details ── #}
            <div class="opcal-section">
                <div class="opcal-section-label">{% trans "Details" %}</div>
                <div class="row g-2">
                    <div class="col-md-5">
                        {% bootstrap_field form.doctrine addon_before="<i class='fas fa-book'></i>" %}
                    </div>
                    <div class="col-md-5">
                        {% bootstrap_field form.formup_system addon_before="<i class='fas fa-map-marker-alt'></i>" %}
                    </div>
                </div>
                <div class="row g-2">
                    <div class="col-12">
                        {% bootstrap_field form.description addon_before="<i class='fas fa-align-left'></i>" %}
                    </div>
                </div>
            </div>

            {# ── Timing ── #}
            <div class="opcal-section">
                <div class="opcal-section-label">{% trans "Timing" %}</div>
                <div class="row g-2 align-items-start">
                    <div class="col-md-3">
                        {% bootstrap_field form.start_time addon_before="<i class='fas fa-calendar-alt'></i>" %}
                    </div>
                    <div class="col-md-3">
                        <div class="mb-3">
                            <label class="form-label">{% trans "End time" %}</label>
                            <div class="btn-group d-flex" role="group">
                                {% for widget in form.end_time_mode %}
                                <input type="radio" class="btn-check" name="end_time_mode"
                                       id="{{ widget.id_for_label }}" value="{{ widget.data.value }}"
                                       {% if widget.data.selected %}checked{% endif %} autocomplete="off">
                                <label class="btn btn-sm btn-outline-primary w-100" for="{{ widget.id_for_label }}">
                                    {{ widget.choice_label }}
                                </label>
                                {% endfor %}
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3" id="opcal-duration-col" style="display:none">
                        {% bootstrap_field form.duration addon_before="<i class='fas fa-hourglass-half'></i>" %}
                    </div>
                    <div class="col-md-3" id="opcal-endtime-col">
                        {% bootstrap_field form.end_time addon_before="<i class='fas fa-clock'></i>" %}
                    </div>
                </div>
            </div>

            {# ── Repeat ── #}
            <div class="opcal-section">
                <div class="opcal-section-label">{% trans "Repeat" %}</div>
                <div class="opcal-repeat-check">
                    {% bootstrap_field form.enable_repeat %}
                </div>
                <div id="opcal-repeat-options" style="display:none">
                    <div class="row g-2">
                        <div class="col-md-4">
                            {% bootstrap_field form.repeat_event addon_before="<i class='fas fa-redo'></i>" %}
                        </div>
                        <div class="col-md-3">
                            {% bootstrap_field form.repeat_interval addon_before="<i class='fas fa-hashtag'></i>" %}
                        </div>
                        <div class="col-md-3">
                            {% bootstrap_field form.repeat_times addon_before="<i class='fas fa-list-ol'></i>" %}
                        </div>
                    </div>
                </div>
            </div>

            {# ── Notifications ── #}
            <div class="opcal-section">
                <div class="opcal-section-label">{% trans "Discord Notifications" %}</div>
                {% bootstrap_field form.notification_timings %}
                <div id="opcal-custom-date-row" style="display:none">
                    {% bootstrap_field form.notification_custom_date addon_before="<i class='fas fa-bell'></i>" %}
                </div>
            </div>

            <button class="btn btn-lg btn-primary w-100" type="submit">
                <i class="fas fa-save me-1"></i> {% trans "Save Changes" %}
            </button>
        </form>
    </div>
</div>
{% endblock content %}

{% block extra_javascript %}
    {% include 'bundles/jquery-datetimepicker-js.html' %}
    <script>
        $(document).ready(() => {
            $('#id_start_time').datetimepicker({
                setlocale: '{{ LANGUAGE_CODE }}',
                mask: true, format: 'Y-m-d H:i', minDate: 0
            });
            $('#id_end_time').datetimepicker({
                setlocale: '{{ LANGUAGE_CODE }}',
                mask: true, format: 'Y-m-d H:i', minDate: 0
            });
            $('#id_notification_custom_date').datetimepicker({
                setlocale: '{{ LANGUAGE_CODE }}',
                mask: true, format: 'Y-m-d H:i', minDate: 0
            });

            /* ── Custom notification date ── */
            const $customTiming = $('input[name="notification_timings"][value="custom"]');
            const toggleCustomDate = () => $('#opcal-custom-date-row').toggle($customTiming.is(':checked'));
            toggleCustomDate();
            $customTiming.on('change', toggleCustomDate);

            /* ── End time mode ── */
            const toggleEndTimeMode = () => {
                const mode = $('input[name="end_time_mode"]:checked').val();
                $('#opcal-duration-col').toggle(mode === 'duration');
                $('#opcal-endtime-col').toggle(mode === 'custom');
            };
            toggleEndTimeMode();
            $('input[name="end_time_mode"]').on('change', toggleEndTimeMode);

            /* ── Repeat ── */
            const toggleRepeat = () => $('#opcal-repeat-options').toggle($('#id_enable_repeat').is(':checked'));
            toggleRepeat();
            $('#id_enable_repeat').on('change', toggleRepeat);

            /* ── Clear hidden datetime fields before submit ── */
            $('form.opcal-form').on('submit', function () {
                if ($('#opcal-endtime-col').is(':hidden')) {
                    $('#id_end_time').val('');
                }
                if ($('#opcal-custom-date-row').is(':hidden')) {
                    $('#id_notification_custom_date').val('');
                }
            });
        });
    </script>
{% endblock %}