<turbo-frame id="formuleContainer">
<div class="table-responsive mb-4 border rounded-1">
    <form
        id="updateFormuleForm"
        class="form-horizontal"
        action="{{ path('formule_add') }}"
        method="post"
        data-controller="form formule-deduction formule-types"
        data-action="turbo:submit-start->form#submitStart
                    turbo:submit-end->form#submitEnd
                    turbo:submit-error->form#submitError"
        data-turbo-frame="formuleContainer"
        novalidate
    >
        <table class="table  mb-0 align-middle" id="tableFormules">
            <thead>
                <tr>
                    <th style="width:33%;"></th>
                    <th class="text-center fw-normal"  style="width:33%;">
                        <div class="formule-header">
                            <input type="hidden" class="form-control" name="projet" id="projet" value="{{projet.idtoken}}" required>
                            <input type="hidden" class="form-control" name="deductionFiscale" id="deductionFiscale" value="0" required data-formule-deduction-target="deductionField">
                            <input type="text" class="form-control fs-4 w-semibold" name="nom" id="nom" placeholder="Nom de la formule" required>

                            <select class="form-control select2 mt-4" name="type" id="type" data-field="type" required data-formule-deduction-target="type" data-action="change->formule-deduction#calculate">
                                <option value="mécénat">Mécénat</option>
                                <option value="sponsoring">Sponsoring</option>
                        </select>
                        </div>

                    </th>

                </tr>
            </thead>
            <tbody>

                <tr>
                    <td>
                        <span class="fs-5 fw-medium">Valeur</span><br/>
                        <small>Déduction fiscale</small>
                    </td>
                    <td class="text-center">
                        <span class="fs-5 fw-medium">
                            <div class="input-group mb-3">
                                <input type="number" min="0" step="1" class="form-control" name="valeur" id="valeur" placeholder="Valeur de la formule" required data-formule-deduction-target="valeur" data-action="input->formule-deduction#calculate">
                                <span class="input-group-text">
                                <i class="ti ti-currency-euro fs-5"></i>
                                </span>
                            </div>
                        <small><span id="deduction" data-formule-deduction-target="deduction"> - </span> €</small>
                    </td>
                    <td></td>
                </tr>
                <tr>
                    <td>
                        <span class="fs-5 fw-medium">Formule flexible</span><br/>
                        <small>Crédits de contreparties</small>
                    </td>
                    <td class="text-center">
                        <div class="form-check form-switch d-flex justify-content-center mb-2">
                            <input class="form-check-input" type="checkbox" name="flex" value="1">
                        </div>
                        <div class="input-group mb-2">
                            <input type="number" min="0" step="1" class="form-control" name="valeurContrepartie" placeholder="Valeur de contreparties">
                            <span class="input-group-text">
                                <i class="ti ti-currency-euro fs-5"></i>
                            </span>
                        </div>
                    </td>
                    <td></td>
                </tr>

                {% for categorie, items in groupedTypes %}

                    {# --- LIGNE DE CATÉGORIE --- #}
                    <tr class="table-category bg-light fw-bold">
                        <td class="bg-light" colspan="3">
                            <h5 class="my-1">{{ categorie }}</h5>
                        </td>
                    </tr>

                    {# --- LIGNES DES TYPES --- #}
                    {% for type in items %}
                        <tr data-type-id="{{ type.idtoken }}" data-formule-types-target="row">
                            <td>{{ type.nom }}</td>

                            <td class="text-center" data-type-id="{{ type.idtoken }}">
                                <input type="hidden" name="type-{{type.idtoken}}" id="type-{{type.idtoken}}" data-formule-types-hidden>
                                <input type="hidden" name="type-{{type.idtoken}}-mode" data-formule-types-mode>
                                <input type="hidden" name="type-{{type.idtoken}}-unit" data-formule-types-unit-hidden>
                                <div class="d-none" data-formule-types-fields>
                                    <div class="d-flex align-items-center justify-content-end gap-2 mb-2">
                                        <div class="btn-group btn-group-sm" role="group" aria-label="Type de champ">
                                            <button type="button" class="btn btn-outline-secondary" data-formule-types-type="text" data-formule-types-type-param="text" data-action="click->formule-types#selectType">
                                                <i class="ti ti-text-size"></i>
                                            </button>
                                            <button type="button" class="btn btn-outline-secondary" data-formule-types-type="number" data-formule-types-type-param="number" data-action="click->formule-types#selectType">
                                                <i class="ti ti-list-numbers"></i>
                                            </button>
                                            <button type="button" class="btn btn-outline-secondary" data-formule-types-type="boolean" data-formule-types-type-param="boolean" data-action="click->formule-types#selectType">
                                                <i class="ti ti-toggle-right"></i>
                                            </button>
                                        </div>
                                    </div>

                                    <div data-formule-types-group="text">
                                        <input type="text" class="form-control" data-formule-types-text data-action="input->formule-types#syncText">
                                    </div>
                                    <div class="d-none" data-formule-types-group="number">
                                        <div class="input-group">
                                            <input type="number" min="0" step="1" class="form-control" data-formule-types-number data-action="input->formule-types#syncNumber">
                                            <select class="form-select" data-formule-types-unit data-action="change->formule-types#syncNumber">
                                                <option value="EUR">EUR</option>
                                                <option value="%">%</option>
                                                <option value="jours">jours</option>
                                                <option value="mois">mois</option>
                                                <option value="ans">ans</option>
                                                <option value="unites">unites</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="d-none" data-formule-types-group="boolean">
                                        <div class="form-check form-switch d-flex justify-content-center">
                                            <input class="form-check-input" type="checkbox" data-formule-types-switch data-action="change->formule-types#syncSwitch">
                                        </div>
                                    </div>
                                </div>
                            </td>
                            <td class="text-center">
                                <div class="form-check form-switch d-flex justify-content-center">
                                    <input class="form-check-input" type="checkbox" data-formule-types-toggle data-action="formule-types#toggleRow">
                                </div>
                                <div class="mt-2">
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="checkbox" name="flex-option-{{ type.idtoken }}" value="1">
                                        <label class="form-check-label fs-2">Sélectionnable</label>
                                    </div>
                                    <div class="form-check form-check-inline d-none">
                                        <input class="form-check-input" type="checkbox" name="flex-option-{{ type.idtoken }}-required" value="1" checked>
                                        <label class="form-check-label fs-2">Obligatoire</label>
                                    </div>
                                </div>
                            </td>
                        </tr>
                    {% endfor %}

                {% endfor %}

                <tr>
                    <th style="width:33%;"></th>
                    <th class="text-center fw-normal"  style="width:33%;">
                        <div>
                            <button type="submit" class="btn btn-sm btn-outline-primary mt-2">Enregistrer</button>
                            <a
                                class="btn btn-sm btn-outline-warning mt-2"
                                href="{{ path('projet_formules_ajax_view', { id: projet.idtoken }) }}"
                                data-turbo-frame="formuleContainer"
                            >
                                Annuler
                            </a>
                        </div>
                    </th>

                </tr>
            </tbody>

        </table>
    </form>

</div>
</turbo-frame>
