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

{% block title %}Affaires - James Gestion de Production{% endblock %}

{% block body %}  

<div class="mt-4 text-center"><h1>Affaire : {{affaire.client}} - {{affaire.nomChantier}}</h1></div>
<div class="card mt-4">
    <div class="card-header">
    <h3>Regroupements</h3>
    </div>
    <div class="card-body">
      <div class="row">  
        {% for regroupement in regroupements %}
            <div class="mb-2 border rounded p-2 col-2">
                <strong>Regroupement #{{ regroupement.id }}</strong> <span class="badge bg-success"> Qté: {{regroupement.quantite}} x  Final : {{ regroupement.longueurFinale }} m</span><br/> 
                {{regroupement.volumeTotal}} m³ <br/>
                <small>
                {% for p in regroupement.poutres %}
                    <span class="badge bg-secondary">Ref {{ p.designation }}<br/>{{ p.sectionLargeur }} x {{ p.sectionHauteur }}</span>
                {% endfor %}
                </small>
                <form method="post" action="{{ path('regroupement_supprimer', {id: regroupement.id}) }}" onsubmit="return confirm('Supprimer ce regroupement ?');">
                <button class="btn btn-sm btn-danger mt-1">Supprimer</button>
                </form>
            </div>
          {% endfor %}
      </div>
       
        <div class="row mb-3 mt-2 border rounded sticky-top bg-white p-3">
          <div class="inline-form">    
            <label>Quantité : <input type="number" id="quantite" min="1" value="1"></label>
            <label class="ms-3">Longueur finale (mm) : <input type="number" id="longueurFinale" min="0" value="0"></label>
          </div>
          <div class="alert alert-light mt-2">
            Longueur totale : <span id="total-longueur">0</span> m &mdash; Volume total : <span id="total-volume">0</span> m³
          </div>
          <div id="info-section" class="alert alert-warning mt-2 d-none"></div>
          <div id="success-notification" class="alert alert-success mt-2 d-none">Regroupement enregistré avec succès !</div>               
          <button id="valider-regroupement" disabled class="col-1 btn btn-success"><i class="fe fe-link"></i> Regrouper</button>
        </div>
      
        <table id="table-poutres" class="table table-sm">
            <thead>                
                <tr>
                  <th>#</th>
                  <th><a href="#" class="text-body-secondary" data-sortOLD="o-nbpiece">Nb<br/>Pièces</a></th>
                  <th><a href="#" class="text-body-secondary" data-sortOLD="o-usinage">Usinage</a></th>
                  <th><a href="#" class="text-body-secondary" data-sortOLD="o-designation">Designation</a></th>
                  <th><a href="#" class="text-body-secondary" data-sortOLD="o-ctf">Ctf</a></th>
                  <th><a href="#" class="text-body-secondary" data-sortOLD="o-sectionLargeur">Sect<br/>Largeur</a></th>
                  <th><a href="#" class="text-body-secondary" data-sortOLD="o-sectionHauteur">Sect.<br/>Hauteur</a></th>
                  <th><a href="#" class="text-body-secondary" data-sortOLD="o-longueurArrondie">Long.<br/>Arrondie</a></th>
                  <th><a href="#" class="text-body-secondary" data-sortOLD="o-droit">droit</a></th>
                  <th><a href="#" class="text-body-secondary" data-sortOLD="o-lamelisation">Lameli°</a></th>
                  <th><a href="#" class="text-body-secondary" data-sortOLD="o-longueurProduction">Long.<br/>Production</a></th>                
                  <th><a href="#" class="text-body-secondary" data-sortOLD="o-sectionLameLargeur">Sect Lame<br/>Larg.</a></th>
                  <th><a href="#" class="text-body-secondary" data-sortOLD="o-sectionLameHauteur">Section Lame<br/>Haut. </a></th>
                  <th><a href="#" class="text-body-secondary" data-sortOLD="o-epaisseurRabotee">Epaisseur<br/>Rabotée</a></th>
                  <th><a href="#" class="text-body-secondary" data-sortOLD="o-nbLame">Nb<br/>Lame</a></th>
                  <th><a href="#" class="text-body-secondary" data-sortOLD="o-longueurLameAboutee">Long. Lame<br/>Aboutée</a></th>
                  <th><a href="#" class="text-body-secondary" data-sortOLD="o-volumeFini">Volume<br/>Fini</a></th>
                  <th><a href="#" class="text-body-secondary" data-sortOLD="o-remarque">Remarque</a></th>
                  <th><a href="#" class="text-body-secondary" data-sortOLD="o-bois">Bois</a></th>
                  <th><a href="#" class="text-body-secondary" data-sortOLD="o-longueurLameAbouteeTotal">Long. Lames<br/>Aboutées Total</a></th>
                  <th><a href="#" class="text-body-secondary" data-sortOLD="o-volumeBoisAbouteNonRabote">Volume Bois<br/>Abouté non-raboté</a></th>                  
                </tr>
            </thead>
            <tbody>
                {% for poutre in poutres %}
                  {# <tr {% if poutre.bkgColor != 'FFFFFF' %} style="background-color:#{{poutre.bkgColor}};"{% endif %} data-id="{{ poutre.id }}" data-longueur="{{ poutre.longueurProduction }}"> #}
                  <tr {% if poutre.bkgColor != 'FFFFFF' %} style="background-color:#{{poutre.bkgColor}};"{% endif %} data-id="{{ poutre.id }}" data-longueur="{{ poutre.longueurProduction }}" data-volume="{{ poutre.volumefini }}" data-largeur="{{ poutre.sectionLargeur }}" data-hauteur="{{ poutre.sectionHauteur }}">
                    <td><input type="checkbox" class="select-poutre"></td>
                    <td class="o-nbPiece">{{ poutre.nbPiece }}</td>
                    <td class="o-usinage">{{ poutre.usinage }}</td>
                    <td class="o-designation">{{ poutre.designation }}</td>
                    <td class="o-ctf">{% if poutre.ctf %}<span class="badge bg-success">Oui</span>{% else %}<span class="badge bg-secondary">Non</span>{% endif %}</td>
                    <td class="o-sectionLargeur">{{ poutre.sectionLargeur }}</td>
                    <td class="o-sectionHauteur">{{ poutre.sectionHauteur }}</td>                            
                    <td class="o-longueurArrondie">{{ poutre.longueurArrondie }}</td>
                    <td class="o-droit">{% if poutre.droit %}<span class="badge bg-success">Oui</span>{% else %}<span class="badge bg-secondary">Non</span>{% endif %}</td>                            
                    <td class="o-droit">{% if poutre.lamelisation %}<span class="badge bg-success">Oui</span>{% else %}<span class="badge bg-secondary">Non</span>{% endif %}</td>              
                    <td class="o-longueurProduction">{{ poutre.longueurProduction }}</td>
                    <td class="o-sectionLameLargeur">{{ poutre.sectionLameLargeur }}</td>
                    <td class="o-sectionLameHauteur">{{ poutre.sectionLameHauteur }}</td>
                    <td class="o-epaisseurRabotee">{{ poutre.epaisseurRabotee }}</td>
                    <td class="o-nbLame">{{ poutre.nbLame }}</td>
                    <td class="o-longueurLameAboutee">{{ poutre.longueurLameAboutee }}</td>
                    <td class="o-volumeFini">{{ poutre.volumeFini }}</td>
                    <td class="o-remarque">{{ poutre.remarque }}</td>
                    <td class="o-bois">
                      {% if poutre.tac %}<span class="badge bg-success">TAC</span><br/>{% endif %}
                      {% if poutre.gl28h %}<span class="badge bg-secondary">GL 28 H</span><br/>{% endif %}
                      {% if poutre.gl24h %}<span class="badge bg-primary">GLL 24 H</span><br/>{% endif %}
                      {% if poutre.glxxhsRefile %}<span class="badge bg-warning">GLxxhs (Refilé)</span><br/>{% endif %}
                      {% if poutre.controleDimensionnel %}<span class="badge bg-success">Contrôle Dim.</span><br/>{% endif %}
                    </td>
                    <td class="o-longueurLameAbouteeTotal">{{ poutre.longueurLameAbouteeTotal }}</td>
                    <td class="o-volumeBoisAbouteeNonRabote">{{ poutre.volumeBoisAbouteNonRabote}}</td>
                  </tr>
                {% endfor %}
            </tbody>
        </table>             
    </div>
</div>
{% endblock %}
{% block script %}
    {{ parent() }}

    <script type="text/javascript">
        document.addEventListener('DOMContentLoaded', function () {
          const btn = document.getElementById('valider-regroupement');
          const rows = document.querySelectorAll('#table-poutres tbody tr');
          const totalEl = document.getElementById('total-longueur');
          const volumeEl = document.getElementById('total-volume');
          const sectionInfo = document.getElementById('info-section');
          const notif = document.getElementById('success-notification');
          const longueurFinaleInput = document.getElementById('longueurFinale');
          const quantiteInput = document.getElementById('quantite');

          function update() {
            let total = 0;
            let volume = 0;
            let ids = [];
            let sections = new Set();

            rows.forEach(row => {
              if (row.classList.contains('table-primary')) {
                total += parseFloat(row.dataset.longueur);
                volume += parseFloat(row.dataset.volume);
                sections.add(`${row.dataset.largeur}x${row.dataset.hauteur}`);
                ids.push(row.dataset.id);                
              }
            });

            totalEl.textContent = (total / 1000).toFixed(2);
            volumeEl.textContent = volume.toFixed(2);
            longueurFinaleInput.value = Math.ceil(total);

            if (sections.size > 1) {
              sectionInfo.textContent = '⚠️ Sections différentes détectées parmi les poutres sélectionnées.';
              sectionInfo.classList.remove('d-none');
            } else {
              sectionInfo.classList.add('d-none');
            }

            btn.disabled = ids.length < 1;
            btn.dataset.ids = ids.join(',');
          }

          rows.forEach(row => {
            const checkbox = row.querySelector('.select-poutre');

            row.addEventListener('click', (e) => {
              if (e.target.tagName.toLowerCase() !== 'input') {
                row.classList.toggle('table-primary');
                checkbox.checked = row.classList.contains('table-primary');
                update();
              }
            });

            checkbox.addEventListener('change', () => {
              row.classList.toggle('table-primary', checkbox.checked);
              update();
            });
          });

          btn.addEventListener('click', () => {
            const ids = btn.dataset.ids;
            const quantite = parseInt(document.getElementById('quantite').value);
            const longueurFinale = parseInt(document.getElementById('longueurFinale').value);

            fetch('/prod/regroupement/creer', {
              method: 'POST',
              headers: { 'Content-Type': 'application/json' },
              body: JSON.stringify({ poutres: ids.split(','), nbPieces: quantite, longueurFinale: longueurFinale })
            })
            .then(res => res.json())
            .then(data => {
              if (data.success) {
                // Réinitialise la sélection
                rows.forEach(row => {
                  row.classList.remove('table-primary');
                  row.querySelector('.select-poutre').checked = false;
                });
                totalEl.textContent = '0';
                volumeEl.textContent = '0';
                quantiteInput.value = '1';
                longueurFinaleInput.value = '0';
                sectionInfo.classList.add('d-none');
                btn.disabled = true;
                
                
                notif.classList.remove('d-none');
                setTimeout(() => notif.classList.add('d-none'), 12000);
                window.location.reload();
              }
            });
          });
        });

    </script>
{% endblock %}