{% extends 'base.html.twig' %}

{% block title %} = {{title}}{% endblock %}

{% block localstyle %}
<style>
    td {
        vertical-align: middle;
    }

</style>

{% endblock %}

{% block body %}
    <h1>{{title}}</h1>
    

    {{ form_start(form) }}
        {{ form_widget(form.submit) }}
        <a href="{{ path(routecancel) }}" class="btn btn-secondary ms-1">Annuler</a>
        {%if mode=="update" %}<a href="{{ path(routedelete,{id:form.vars.value.id}) }}" class="btn btn-danger float-end" onclick="return confirm('Confirmez-vous la suppression de cet enregistrement ?')">Supprimer</a>{%endif%}

        {% include('include/error.html.twig') %}

        <div class="row">
            <div class="col-md-6 mx-auto">
                <div class="card mt-3">
                    <div class="card-header">Information</div>
                    <div class="card-body">
                        {{ form_row(form.billDate) }}
                        {{ form_row(form.clientName) }}
                        {{ form_row(form.clientAddress) }}
                        {{ form_row(form.bill) }}
                        {{ form_row(form.total) }}

                    </div>
                </div>
            </div>
        </div>
        <div class="row mt-3">
            <div class="col-md-12 mx-auto">

                <table class="table table-bordered">
                    <thead>
                        <tr>
                            <th style="width:100px">N°</th>
                            <th>Description</th>
                            <th style="width:100px">Qte</th>
                            <th style="width:100px">PU</th>
                            <th style="width:100px">Rem</th>
                            <th style="width:100px">Total</th>
                            <th style="width:100px"></th>
                        </tr>
                    </thead>
                    <tbody id="bill_details" style="zoom:80%"
                        data-prototype='
                            <tr class="bill-detail">
                                <td>{{ form_widget(form.billDetails.vars.prototype.rowOrder)|e('html_attr') }}</td>
                                <td>{{ form_widget(form.billDetails.vars.prototype.description)|e('html_attr') }}</td>
                                <td>{{ form_widget(form.billDetails.vars.prototype.quantity)|e('html_attr') }}</td>
                                <td>{{ form_widget(form.billDetails.vars.prototype.price)|e('html_attr') }}</td>
                                <td>{{ form_widget(form.billDetails.vars.prototype.discount)|e('html_attr') }}</td>
                                <td>{{ form_widget(form.billDetails.vars.prototype.total)|e('html_attr') }}</td>
                                <td><button type="button" class="btn btn-danger remove-item">X</button></td>
                            </tr>
                        '>

                        {% for detailForm in form.billDetails %}
                            <tr class="bill-detail">
                                <td>{{ form_widget(detailForm.rowOrder) }}</td>
                                <td>{{ form_widget(detailForm.description) }}</td>
                                <td>{{ form_widget(detailForm.quantity) }}</td>
                                <td>{{ form_widget(detailForm.price) }}</td>
                                <td>{{ form_widget(detailForm.discount) }}</td>
                                <td>{{ form_widget(detailForm.total) }}</td>
                                <td>
                                    <button type="button" class="btn btn-danger remove-item">X</button>
                                </td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>

                <button type="button" class="btn btn-primary" id="add_item">Ajouter une ligne</button>
            </div>
        </div>

        {{ form_rest(form) }}


        <div style="display:none;">
            {{ form_rest(form) }}
        </div>
    {{ form_end(form, { render_rest: false }) }}

{% endblock %}

{% block localscript %}
    <script>
        $(document).ready(function() {
            $("#accounting_billDate").focus();            
        });
    </script>

<script>
document.addEventListener('DOMContentLoaded', () => {
    const container = document.getElementById('bill_details');
    const addButton = document.getElementById('add_item');
    let index = container.querySelectorAll('.bill-detail').length;

    function recalc(row) {
        const qty = parseFloat(row.querySelector('[name$="[quantity]"]').value) || 0;
        const price = parseFloat(row.querySelector('[name$="[price]"]').value) || 0;
        const discount = parseFloat(row.querySelector('[name$="[discount]"]').value) || 0;

        let total = qty * price;
        if (discount > 0) {
            total = total - (total * (discount / 100));
        }
        row.querySelector('[name$="[total]"]').value = total.toFixed(0);
    }
    function recalcGlobal() {
        let sum = 0;
        container.querySelectorAll('[name$="[total]"').forEach(input => {
            sum += parseFloat(input.value) || 0;
        });
        console.log(sum);
        console.log(sum.toFixed(0))
        $('#bill_total').val(sum.toFixed(0));
    }    
    container.addEventListener('input', (e) => {
        if (e.target.matches('[name$="[quantity]"], [name$="[price]"], [name$="[discount]"]')) {
            const row = e.target.closest('.bill-detail');
            if (row) {
                recalc(row);
                recalcGlobal();
            }
        }
    });
        
    addButton.addEventListener('click', () => {
        const prototype = container.dataset.prototype.replace(/__name__/g, index);
        const tr = document.createElement('tr');
        tr.classList.add('bill-detail');
        tr.innerHTML = prototype;
        container.appendChild(tr);
        index++;
    });

    container.addEventListener('click', (e) => {
        if (e.target.classList.contains('remove-item')) {
            e.target.closest('tr').remove();
        }
    });
});

</script>
{% endblock %}