{% 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) }}
            </div>

            <div class="col-md-6 mb-3">
                {{ form_label(form.scopeType) }}
                {{ form_widget(form.scopeType) }}
            </div>

            <div class="col-md-12 mb-3">
                {{ form_label(form.scopeId) }}
                {{ form_widget(form.scopeId) }}
                <div id="scopeLoader" class="mt-1 text-muted" style="display:none;">Chargement...</div>
                <input type="hidden" id="currentScopeId" value="{{ form.vars.value.scopeId }}">
            </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');
    const idSelect   = document.getElementById('financial_scope_scopeId');
    const loader     = document.getElementById('scopeLoader');
    const currentId  = document.getElementById('currentScopeId').value;

    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;

                    // Préselection automatique
                    if (parseInt(currentId) === item.id) {
                        opt.selected = true;
                    }

                    idSelect.appendChild(opt);
                });

                loader.style.display = 'none';
            },
            error: function() {
                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 %}