{{ form_start(form) }}
<div class="show-container facture">
    <div class="show-container_title">
        <div class="show-container_title-left">
            <h2>
                Facture pour le Dossier <a  href="{{ path('dossier_show', {'id' : dossier.id}) }}" title="Details du dossier" target="_blank">{{ dossier.codeAction }}</a>
            </h2>
        </div>
        <div class="facture-main-body-unit" style="margin:15px; display: flex">
            <h2>Encaissé: </h2> {{ form_widget(form.paiement) }}
        </div>
        <div style="margin:15px ; display: flex"">
            <h2> le:</h2>
            {{ form_widget(form.date_encaissement) }}
        </div>
        <div>
            <button class="save-btn btn btn-success btn-lg">
                {{ button_label|default('Enregistrer') }}
            </button>
        </div>
    </div>
    <div class="facture-global">
        <div class="facture-header">
            <div class="facture-header-left">
                <div class="facture-logo">
                    AGROPE
                </div>
                <div class="facture-action">
                    {{ agrope.action }}
                </div>
                <div class="facture-address">
                    <div class="facture-address-top">
                        {{ agrope.addresse }}
                    </div>
                    <div class="facture-address-btm">
                        {{ agrope.cp }} {{ agrope.ville }}
                    </div>
                </div>
                <div class="facture-tel">
                    Tel: {{ agrope.telephone }}
                </div>
                <div class="facture-mail">
                    Email: {{ agrope.mail }}
                </div>
            </div>
            <div class="facture-header-right">
                <div class="facture-title">
                    FACTURE
                </div>
                <div class="facture-number">
                    <span class="f-label-sm">N° Fact</span><span class="f-value f-value-sm">{{
              form_widget(form.code_facture)
            }}</span>
                </div>
                <div class="facture-date">
                    <span class="f-label-sm">Date</span><span class="f-value f-value-sm">{{
              form_widget(form.date_creation)
            }}</span>
                </div>
                <div class="facture-client">
                    <div class="facture-client-top">
                        Client
                    </div>
                    <div class="facture-client-btm">
                        {{ dossier.nomCompte }}
                    </div>
                </div>
                <div class="facture-command">
                    <span class="f-label-lg">Bon de commande</span><span class="f-value f-value-lg">{{ dossier.bonCommande}}</span>
                </div>
            </div>
        </div>
        <div class="facture-body">
            <div class="facture-description">
                <div class="facture-description-top">
                    DESCRIPTION
                </div>
                <div class="facture-description-btm">
                    {{ dossier.intituleFormation }}
                </div>
            </div>
            <table class="facture-main">
                <thead class="facture-main-head">
                    <tr>
                        <th class="facture-main-code">
                            Code
                        </th>
                        <th class="facture-main-designation">
                            Designation
                        </th>
                        <th class="facture-main-unit">
                            Unité
                        </th>
                        <th class="facture-main-quantity">
                            Qtté
                        </th>
                        <th class="facture-main-price">
                            PU
                        </th>
                        <th class="facture-main-amount">
                            Montant
                        </th>
                    </tr>
                </thead>
                <tbody class="facture-main-body">
                    <tr>
                        <td class="facture-main-body-code">
                            {{ form_widget(form.code_ligne) }}
                        </td>
                        <td class="facture-main-body-designation">
                            <div class="facture-main-body-designation-top">
                                {{ form_widget(form.designation_1) }}
                            </div>
                            <div class="facture-main-body-designation-btm">
                                {{ form_widget(form.designation_2) }}
                            </div>
                        </td>
                        <td class="facture-main-body-unit">
                            {{ form_widget(form.unite) }}
                        </td>
                        <td class="facture-main-body-quantity">
                            {{ form_widget(form.quantite) }}
                        </td>
                        <td class="facture-main-body-price" id="facture-main-body-price">
                            {{ dossier.tarifContracte }}
                        </td>
                        <td class="facture-main-body-amount" id="facture-main-body-amount"></td>
                    </tr>
                </tbody>
            </table>
            <div class="facture-main-foot">
                <div class="facture-total">
                    <div class="facture-total-title">
                        TOTAL HT FACTURE
                    </div>
                    <div class="facture-total-value">
                        {{ form_widget(form.total_ht) }}
                    </div>
                </div>
                <div class="facture-total_VAT">
                    <div class="facture-total_VAT-title">
                        <span>Montant TVA</span><span>{{ form_widget(form.tva) }}%</span>
                    </div>
                    <div class="facture-total_VAT-value" id="facture-total_VAT-value"></div>
                </div>
                <div class="facture-total_global">
                    <div class="facture-total_global-title">
                        TOTAL TTC FACTURE
                    </div>
                    <div class="facture-total_global-value" id="facture-total_global-value">
                        0.00 €
                    </div>
                </div>
            </div>
        </div>
        <div class="facture-footer">
            <div class="facture-observation">
                <div class="facture-observation-top">
                    Observation
                </div>
                <div class="facture-observation-btm">
                    {{ form_widget(form.observation) }}
                </div>
            </div>
            <div class="facture-condition">
                <div class="facture-condition-top">
                    Condition
                </div>
                <div class="facture-condition-btm">
                    {{ agrope.conditionsGenerales }}
                </div>
            </div>
        </div>
        <hr />
        <div class="facture-society_denomination">
            <h6 style="text-align: center">
                {{ agrope.denomination }}&nbsp;
                <span style="color:#d29d40 ">Siège social : </span> {{ agrope.siege }}
            </h6>
            <h6 style="text-align: center">
                <span style="color:#d29d40 ">RSC LIBOURNE :</span> {{ agrope.rcsLibourne }}&nbsp;
                <span style="color:#d29d40 ">N° Activité : </span> {{ agrope.agreementFormation }}&nbsp;
                <span style="color:#d29d40 ">APE : </span> {{ agrope.ape }}
            </h6>

        </div>
    </div>
</div>


{{ form_end(form) }}

<script>

    const tva = document.getElementById('facture_tva');
    const tva_val = document.getElementById('facture-total_VAT-value');
    const qtte = document.getElementById('facture_quantite');
    const price = document.getElementById('facture-main-body-price');
    const totalNoTva = document.getElementById('facture-main-body-amount');
    const totalNoTva2 = document.getElementById('facture_total_ht');
    const totalWTva = document.getElementById('facture-total_global-value');
    tva.setAttribute('min', 0);
    tva.setAttribute('max', 100);
    tva.value = (20).toFixed(1);

    totalNoTva2.value = (0).toFixed(2);
    totalNoTva2.setAttribute('readonly', true)

    qtte.setAttribute('min', 0);

    qtte.addEventListener('input', e => {
        calculateTotal()
    });
    qtte.addEventListener('change', e => {
        calculateTotal()
    });
    tva.addEventListener('input', e => {
        //tva.value = parseFloat(tva.value).toFixed(2)
        calculateTotal()
    });
    tva.addEventListener('change', e => {
        let fixed = tva.value
        tva.value = parseFloat(fixed).toFixed(2)
        calculateTotal()
    });


    function calculateTotal() {
        let total = qtte.value * parseFloat(price.innerText);
        totalNoTva.innerText = total.toFixed(2).toString().replace(/\B(?<!\.\d*)(?=(\d{3})+(?!\d))/g, " " )+ ' €' ;
        totalNoTva2.value = total.toFixed(2);
        tva_val.innerText = (parseFloat((total * ((parseFloat(tva.value).toFixed(2))/100))).toFixed(2)).toString().replace(/\B(?<!\.\d*)(?=(\d{3})+(?!\d))/g, " " );
        total += total * ((parseFloat(tva.value).toFixed(2)) / 100);

        totalWTva.innerText = total.toFixed(2).toString().replace(/\B(?<!\.\d*)(?=(\d{3})+(?!\d))/g, " ") + ' €';
    }
</script>