{% extends 'base.html' %}
{% from "macros.html" import render_field, render_included_field %}

{% block title %}Create or Edit Tenant{% endblock %}

{% block content_title %}Create or Edit Tenant{% endblock %}
{% block content_description %}Create or Edit Tenant{% endblock %}

{% block content %}
    <form method="post">
        {{ form.hidden_tag() }}
        {%  set disabled_fields = [] %}
        {% set exclude_fields = [] %}
        {% for field in form %}
            {{ render_field(field, disabled_fields, exclude_fields) }}
        {% endfor %}

        <button type="submit" class="btn btn-primary">Save Tenant</button>
    </form>
{% endblock %}


{% block content_footer %}

{% endblock %}

{% block scripts %}
<script>
    // JavaScript om de gebruiker's timezone te detecteren
    document.addEventListener('DOMContentLoaded', (event) => {
        // Detect timezone
        const userTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone;

        // Send timezone to the server via a POST request
        fetch('/set_user_timezone', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ timezone: userTimezone })
        }).then(response => {
            if (response.ok) {
                console.log('Timezone sent to server successfully');
            } else {
                console.error('Failed to send timezone to server');
            }
        });

        $('#timezone').select2({
            placeholder: 'Selecteer een timezone...',
            allowClear: true,
            theme: 'bootstrap',
            width: '100%',
            dropdownAutoWidth: true,
            dropdownCssClass: 'timezone-dropdown', // Een custom class voor specifieke styling
            scrollAfterSelect: false,
            // Verbeterd scroll gedrag
            dropdownParent: $('body')
        });

        // Stel de huidige waarde in als de dropdown wordt geopend
        $('#timezone').on('select2:open', function() {
            if ($(this).val()) {
                setTimeout(function() {
                    let selectedOption = $('.select2-results__option[aria-selected=true]');
                    if (selectedOption.length) {
                        selectedOption[0].scrollIntoView({ behavior: 'auto', block: 'center' });
                    }
                }, 0);
            }
        });
    });
</script>

{% endblock %}