svg

templates/bill/edit.html.twig

@@ -0,0 +1,159 @@
+{% 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 %}