{% import _self as formMacros %}
{{ form_start(form) }}
{# {{ form_widget(form) }} #}
<div class="row">
    <div class="col-md-5">
        {{ form_label(form.name) }}
        {{ form_widget(form.name) }}
    </div>
    <div class="col-md-5">
        {{ form_label(form.reference) }}
        {{ form_widget(form.reference) }}
    </div>
    <div class="col-md-2">
        {{ form_label(form.date_payment) }}
        {{ form_widget(form.date_payment) }}
    </div>
</div>
<div class="row">
    <div class="col-md-3">
        {{ form_label(form.type) }}
        {{ form_widget(form.type) }}
    </div>
    <div class="col-md-3">
        {{ form_label(form.meanOfPayment) }}
        {{ form_widget(form.meanOfPayment) }}
    </div>
    <div class="col-md-3">
        {{ form_label(form.amount) }}
        {{ form_widget(form.amount) }}
        <span id="amount_error" class="error visually-hidden">Les montants ne correspondent pas</span>
    </div>
</div>
<h3>Lignes</h3>
<table class="paymentLines table" data-index="{{ form.paymentLines|length > 0 ? form.paymentLines|last.vars.name + 1 : 0 }}" data-prototype="{{ formMacros.printRow(form.paymentLines.vars.prototype)|e('html_attr') }}">
    <thead>
        <tr>
            <th>Nom</th>
            <th>Catégorie</th>
            <th>Montant</th>
            {# <th>Entité liée</th> #}
            <th>Description</th>
            <th>Actions</th>
        </tr>
    </thead>
    <tbody>
        {% for paymentLine in form.paymentLines %}
        {# {{ form_row(paymentLine) }} #}
        <tr>
            <td colspan="5">
                {{ form_errors(paymentLine) }}
            </td>
        </tr>
        <tr>
            <td>
                {{ form_widget(paymentLine.name) }}
            </td>
            <td>
                {{ form_widget(paymentLine.payment_category) }}
            </td>
            <td>
                {{ form_widget(paymentLine.amount) }}
            </td>{# <td>
                {{ form_widget(paymentLine.ptable) }}
                {{ form_widget(paymentLine.pid) }}
            </td> #}
            <td>
                {{ form_widget(paymentLine.description) }}
            </td>
            <td>
                <button type="button" class="btn btn-danger remove_item_link" data-collection-holder-class="paymentLines">
                    <i class="bi bi-x"></i>&nbsp;Supprimer
                </button>
            </td>
        </tr>
        {% endfor %}
    </tbody>
    <tfoot>
        <tr>
            <td><strong>Total</strong></td>
            <td id="payment_line_total">
            </td>
            <td colspan="2"></td>
            <td>
                <button type="button" class="btn btn-primary add_item_link" data-collection-holder-class="paymentLines">
                    <i class="bi bi-plus"></i>&nbsp;Ajouter une ligne
                </button>
            </td>
        </tr>
    </tfoot>
</table>
{{ form_label(form.description) }}
{{ form_widget(form.description) }}
<div class="d-flex flex-row-reverse bd-highlight">
    <button class="btn btn-success mt-2" type="submit">
        <i class="bi bi-save"></i>&nbsp;{{ button_label|default('Enregistrer') }}
    </button>
</div>
{{ form_end(form) }}
{% macro printRow(PaymentLineForm) %}
<table>
    <tbody>
        <tr>
            <td>
                {{ form_widget(PaymentLineForm.name) }}
            </td>
            <td>
                {{ form_widget(PaymentLineForm.payment_category) }}
            </td>
            <td>
                {{ form_widget(PaymentLineForm.amount) }}
            </td>
            <td>
                {{ form_widget(PaymentLineForm.description) }}
            </td>
            <td>
                <button type="button" class="btn btn-danger remove_item_link" data-collection-holder-class="paymentLines">
                    <i class="bi bi-x"></i>&nbsp;Supprimer
                </button>
            </td>
        </tr>
        <tr>
            <td colspan="5">
                {{ form_errors(PaymentLineForm) }}
            </td>
        </tr>
    </tbody>
</table>
{% endmacro %}
<script type="text/javascript">
function addFormToCollection(e) {
    const collectionHolder = document.querySelector('.' + e.currentTarget.dataset.collectionHolderClass);
    const collectionHolder2 = document.querySelector('.' + e.currentTarget.dataset.collectionHolderClass + ' tbody');

    const item = document.createElement('div');

    item.innerHTML = collectionHolder
        .dataset
        .prototype
        .replace(
            /__name__/g,
            collectionHolder.dataset.index
        );
    collectionHolder2.appendChild(item.children[0].children[0].children[0]);
    collectionHolder2.appendChild(item.children[0].children[0].children[0]);

    collectionHolder.dataset.index++;
    addEvent();
}

function removeFormFromCollection(e) {
    const collectionHolder2 = document.querySelector('.' + e.currentTarget.dataset.collectionHolderClass + ' tbody');
    const tr = e.currentTarget.parentNode.parentNode;
    const tr2 = tr.nextElementSibling;

    tr.remove();
    tr2.remove();
}

function addEvent() {
    document
        .querySelectorAll('.add_item_link')
        .forEach(btn => btn.addEventListener("click", addFormToCollection));

    document
        .querySelectorAll('.remove_item_link')
        .forEach(btn => btn.addEventListener("click", removeFormFromCollection));

    document
        .querySelectorAll('input[name="payment[amount]"]')
        .forEach(input => input.addEventListener("change", checkAmount));

    document
        .querySelector('form[name="payment"]').onsubmit = function() { return checkAmount(); }

    const regex = new RegExp(/payment\[paymentLines\]\[[0-9]+\]\[amount\]/, 'i');
    for (let input of document.querySelectorAll('input[name^="payment[paymentLines]"]')) {
        if (regex.test(input.name)) {
            input.addEventListener("change", checkAmount);
        }
    }
}

function checkAmount() {
    let ret = true;
    let amountInput = document.querySelector('input[name="payment[amount]"]');
    let amountError = document.querySelector('#amount_error');
    let totalLine = getAmountLine();
    let totalPayment = parseInt(amountInput.value);
    if (totalLine != totalPayment) {
        amountError.setAttribute('class', amountError.getAttribute('class').replace('visually-hidden', ''));
        ret = false;
    } else {
        amountError.setAttribute('class', amountError.getAttribute('class').concat('visually-hidden'));
    }
    document.querySelector('#payment_line_total').innerHTML = totalLine + ' €';
    return ret;
}

function getAmountLine() {
    let total = 0;
    const regex = new RegExp(/payment\[paymentLines\]\[[0-9]+\]\[amount\]/, 'i');
    for (let input of document.querySelectorAll('input[name^="payment[paymentLines]"]')) {
        if (regex.test(input.name)) { // or whatever attribute you want to search
            total = total + parseInt(input.value);
        }
    }
    return total;
}

addEvent();
checkAmount();
</script>