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

{% block title %}Affaires - James Gestion de Production{% endblock %}
  {% block cssPersonnalise %}
<style>
    .handle {
        cursor: grab;
    }

    .handle:active {
        cursor: grabbing;
    }
</style>
{% endblock %}

{% block body %}
    <div class="mt-4">
        <h2>Ordre de Collage du {{ date|date('d/m/Y') }}</h2>
        <div class="table-responsive">
            <table class="table table-hover align-middle text-center">
                <thead class="table-light">
                    <tr>
                        <th style="width: 40px;">⇅</th>
                        <th>N° Série</th>
                        <th>Ordre</th>                    
                        <th>Empl.</th>
                        <th>GL</th>
                        <th>Client</th>
                        <th colspan="2">Section<br/>Brute</th>
                        <th colspan="2">Section<br/>Finale</th>
                        <th>Forme</th>
                        <th>Longueur lame</th>
                        <th>Longueur collage (ml)</th>
                        <th>Surf encollée (m2)</th>
                        <th>Vol. Brut (m3)</th>
                        <th>Vol Réel (m3)</th>
                    </tr>
                </thead>
                <tbody id="sortable">        
                    {% for p in positions %}
                        <tr data-id="{{ p.id }}" class="sortable-row">
                            <td class="handle text-muted">::</td>
                            <td>{{ p.numeroSerie }}</td>
                            <td class="ordre">{{ loop.index }}</td>                        
                            <td class="table-warning">{{ p.plan.banc.designation }}</td>
                            <td class="table-warning">{% if p.poutre.gl28h == 1 %}28{% elseif p.poutre.gl24h == 1 %}24{% endif %}</td>
                            <td>{{ p.poutre.affaire.nomChantier }}</td>
                            <td class="table-warning">{{ p.poutre.sectionLameLargeur }}</td> 
                            <td class="table-warning">{{ p.poutre.sectionLameHauteur }}</td>
                            <td>{{ p.poutre.epaisseurRabotee }}</td> 
                            <td>{{ p.poutre.sectionLameHauteur - 10 }}</td>
                            <td class="table-warning">{{ p.poutre.droit == 1 ? 'Droit' : '' }}{{ p.poutre.ctf != null ? 'CTF ' ~  p.poutre.ctf: '' }}</td>
                            <td>{{ p.longueur / 1000 }}</td>
                            <td>{{ p.longueur * p.poutre.nbLame / 1000}}</td>                            
                            <td>{{ p.longueur * p.poutre.nbLame * p.poutre.sectionLameLargeur / 100000}}</td>
                            <td>{{p.poutre.volumeBoisAbouteNonRabote}}</td>
                            <td>{{p.poutre.volumeFini}}</td>
                        </tr>
                    {% endfor %}
                    <tr class="table-success fw-bold">
                        <td colspan="11" class="text-end">Totaux :</td>
                        <td>
                            {{
                                positions|reduce((acc, p) => acc + (p.longueur / 1000), 0) | number_format(2, ',', ' ')
                            }}
                        </td>
                        <td>
                            {{
                                positions|reduce((acc, p) => acc + (p.longueur * p.poutre.nbLame / 1000), 0) | number_format(2, ',', ' ')
                            }}
                        </td>
                        <td>
                            {{
                                positions|reduce((acc, p) => acc + (p.longueur * p.poutre.nbLame * p.poutre.sectionLameLargeur / 100000), 0) | number_format(2, ',', ' ')
                            }}
                        </td>
                        <td>
                            {{
                                positions|reduce((acc, p) => acc + p.poutre.volumeBoisAbouteNonRabote, 0) | number_format(2, ',', ' ')
                            }}
                        </td>
                        <td>
                            {{
                                positions|reduce((acc, p) => acc + p.poutre.volumeFini, 0) | number_format(2, ',', ' ')
                            }}
                        </td>
                    </tr>

                </tbody>
            </table>
        </div>
        <button id="save" class="btn btn-primary">Enregistrer l’ordre</button>
        <button id="save" class="btn btn-success">Enregistrer et valider Plan de Collage</button>
    </div
{% endblock %}
{% block script %} 
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">

    <script>
    

    function updateOrdres() {
        $('#sortable tr').each(function(index) {
            $(this).find('.ordre').text(index + 1);
        });
    }

    $(function () {
        $("#sortable").sortable({
            handle: ".handle",
            placeholder: "table-active",
            update: updateOrdres
        });

        updateOrdres(); // initial update

        $('#save').click(function () {
            let ordre = [];
            $('#sortable tr').each(function () {
                ordre.push($(this).data('id'));
            });

            $.ajax({
                url: '{{ path('ordre_plan_jour_save', {'date': date|date('Y-m-d')}) }}',
                type: 'POST',
                contentType: 'application/json',
                data: JSON.stringify({ ordre: ordre }),
                success: function () {
                    alert('Ordre enregistré !');
                },
                error: function () {
                    alert('Erreur !');
                }
            });
        });
    });

</script>
{% endblock %}