{% extends 'layout/backEndLayout.html.twig' %}

{% block title 'Attribuer un droit financier' %}

{% block content %}
<div class="container mt-4">

    <h2>Attribuer un droit financier</h2>

    {% for label, messages in app.flashes %}
        {% for message in messages %}
            <div class="alert alert-{{ label }} alert-dismissible fade show">
                {{ message }}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        {% endfor %}
    {% endfor %}

    <div class="card shadow-sm p-4 mt-3">

        {{ form_start(form) }}

        <div class="row">
            <div class="col-md-6 mb-3">
                {{ form_label(form.financialManager) }}
                {{ form_widget(form.financialManager, {'attr': {'class': 'form-select'}}) }}
            </div>

            <div class="col-md-6 mb-3">
                {{ form_label(form.scopeType) }}
                {{ form_widget(form.scopeType, {'attr': {'class': 'form-select', 'id': 'scopeTypeSelector'}}) }}
            </div>

            <div class="col-md-12 mb-3">
                {{ form_label(form.scopeId) }}
                {{ form_widget(form.scopeId, {'attr': {'class': 'form-select', 'id': 'scopeIdSelector'}}) }}
                <div id="scopeLoader" class="mt-1 text-muted" style="display:none;">
                    Chargement...
                </div>
            </div>
        </div>

        <button class="btn btn-success">
            <i class="bi bi-check-circle"></i> Enregistrer
        </button>

        {{ form_end(form) }}
    </div>

</div>
{% endblock %}

{% block javascripts %}
{{ parent() }}

<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {

    const typeSelect = document.getElementById('financial_scope_scopeType'); // ID généré par Symfony
    const idSelect   = document.getElementById('financial_scope_scopeId');   // ID généré par Symfony
    const loader     = document.getElementById('scopeLoader');               // ton div de chargement


    if (!typeSelect || !idSelect) return;

    function loadItems(type) {
        loader.style.display = 'block';
        idSelect.innerHTML = '<option>Chargement...</option>';

        $.ajax({
            type: "GET",
            url: "{{ path('financial_scope_items', {'type': 'TYPE_PLACEHOLDER'}) }}".replace('TYPE_PLACEHOLDER', type),
            dataType: "json",
            success: function(data) {
                idSelect.innerHTML = "";
                data.forEach(function(item) {
                    let opt = document.createElement("option");
                    opt.value = item.id;
                    opt.textContent = item.name;
                    idSelect.appendChild(opt);
                });
                loader.style.display = 'none';
            },
            error: function(xhr, status, error) {
                console.error("Erreur AJAX:", error);
                loader.style.display = 'none';
                idSelect.innerHTML = '<option>Erreur de chargement</option>';
            }
        });
    }

    // Charger au changement
    typeSelect.addEventListener('change', function() {
        loadItems(this.value);
    });

    // Charger au démarrage si pré-rempli
    if (typeSelect.value) {
        loadItems(typeSelect.value);
    }

});
</script>
{% endblock javascripts %}