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

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

{% block body %}  

<div class="mt-4 text-center"><h1>Gestion des Affaires</h1></div>
<div class="card mt-4" id="affaire-list" class="card" data-list='{
      "valueNames": ["o-client", "o-chantier", "o-dateLivraison", "o-dateImport", "o-adresseChantier", "o-statuts", "o-nbLc", "o-planifies","o-dejaColles"],
      "page": 25,
      "pagination": true
    }'>

    <div class="card-header">
      <!-- Form -->
        <form>
          <div class="input-group input-group-flush input-group-merge input-group-reverse">
            <input class="form-control list-search" type="search" placeholder="Rechercher">
            <span class="input-group-text">
              <i class="fe fe-search"></i>
            </span>
          </div>
        </form>
        <a class="btn btn-primary" href="{{ path('import_excel') }}"><i class="fe fe-plus-circle"></i> Importer une Affaire</a>
    </div>
    <div class="card-body">
      <div class="table-responsive">
        <table class="table table-sm table-nowrap card-table">
          <thead>
            <tr>                      
              <th><a href="#" class="text-body-secondary list-sort" data-sort="o-client">Client</a></th>
              <th><a href="#" class="text-body-secondary list-sort" data-sort="o-chantier">Chantier</a></th>
              <th><a href="#" class="text-body-secondary list-sort" data-sort="o-adresseChantier">Adresse Chantier</a></th>
              <th><a href="#" class="text-body-secondary list-sort" data-sort="o-dateImport">Date Importation</a></th>
              <th><a href="#" class="text-body-secondary list-sort" data-sort="o-dateMiseDispo">Date Mise à Dispo.</a></th>
              <th><a href="#" class="text-body-secondary list-sort" data-sort="o-semPlanif">Sem. Planif.</a></th>
              <th><a href="#" class="text-body-secondary list-sort" data-sort="o-nbLc">Nb LC</a></th>
              <th><a href="#" class="text-body-secondary list-sort" data-sort="o-planifies">Planifiés</a></th>
              <th><a href="#" class="text-body-secondary list-sort" data-sort="o-dejaColles">Collés</a></th>
              <th>Actions</th>
              {# <th>
                <a href="#" class="text-body-secondary list-sort" data-sort="o-statuts">
                  Regroupements
                </a>
              </th> #}
                                 
            </tr>
          </thead>
          <tbody class="list">
          {% for affaire in affaires %}
            {% set stat = statsRegroupee[affaire.id]|default({'regroupees': 0, 'total': 0}) %}
            <tr>                      
                <td class="o-client">{{ affaire.client }}</td>
                <td class="o-chantier">{{ affaire.nomChantier }}</td>
                <td class="o-adresseChantier">{{ affaire.adresseChantier }}</td>
                <td class="o-dateImport">{{affaire.dateImport|date('d-m-Y')}}</td>   
                <td class="o-dateMiseDispo">{{affaire.dateMiseDispo|date('d-m-Y')}}</td>
                <td class="o-dateMiseDispo">{{affaire.numeroSemainePlanification}}</td>
                <td  class="o-nbLc">{{ stats[affaire.id].totalPoutres }}</td>                   
                <td class="o-planifies" data-value="{% if stats[affaire.id] is defined and stats[affaire.id].totalPoutres > 0 %}
                  {{ (stats[affaire.id].dansPlan / stats[affaire.id].totalPoutres * 100) | round(1) }}
                {% else %}
                  0
                {% endif %}">
                {% set ratio = 0 %}
                    {% if stats[affaire.id] is defined and stats[affaire.id].totalPoutres > 0 %}
                      {% set ratio = (stats[affaire.id].dansPlan / stats[affaire.id].totalPoutres * 100)|round(0, 'floor') %}
                    {% endif %}
                    <h3>
                    {% if ratio == 100 %}
                      <span class="badge bg-success">
                    {% elseif ratio >= 80 %}
                      <span class="badge bg-primary">
                    {% elseif ratio >= 30 %}
                      <span class="badge bg-info">
                    {% elseif ratio >= 10 %}
                      <span class="badge bg-warning">
                    {% else %}
                      <span class="badge bg-danger">
                    {% endif %}
                    {{ratio}} %  ({{ stats[affaire.id].dansPlan }})</span></h3></td>
                <td class="o-dejaColles" data-value="{% if stats[affaire.id] is defined and stats[affaire.id].totalPoutres > 0 %}
                  {{ (stats[affaire.id].dejaCollees / stats[affaire.id].totalPoutres * 100) | round(1) }}
                {% else %}
                  0
                {% endif %}">
                {% set ratio = 0 %}
                    {% if stats[affaire.id] is defined and stats[affaire.id].totalPoutres > 0 %}
                      {% set ratio = (stats[affaire.id].dejaCollees / stats[affaire.id].totalPoutres * 100)|round(0, 'floor') %}
                    {% endif %}
                    <h3>
                    {% if ratio == 100 %}
                      <span class="badge bg-success">
                    {% elseif ratio >= 80 %}
                      <span class="badge bg-primary">
                    {% elseif ratio >= 30 %}
                      <span class="badge bg-info">
                    {% elseif ratio >= 10 %}
                      <span class="badge bg-warning">
                    {% else %}
                      <span class="badge bg-danger">
                    {% endif %}
                    {{ratio}} %  ({{ stats[affaire.id].dejaCollees }})</span></h3></td>
                
                {# <td class="o-statuts" data-value="{% if statsRegroupee[affaire.id] is defined and statsRegroupee[affaire.id].total > 0 %}
                  {{ (statsRegroupee[affaire.id].regroupees / statsRegroupee[affaire.id].total * 100) | round(1) }}
                {% else %}
                  0
                {% endif %}">
                    {% set ratio = 0 %}
                    {% if statsRegroupee[affaire.id] is defined and statsRegroupee[affaire.id].total > 0 %}
                    {% set ratio = (statsRegroupee[affaire.id].regroupees / statsRegroupee[affaire.id].total * 100)|round(0, 'floor') %}
                    {% endif %}
                    {% if ratio == 100 %}
                      <span class="badge bg-success">
                    {% elseif ratio >= 50 %}
                      <span class="badge bg-warning">
                    {% elseif ratio > 0 %}
                      <span class="badge bg-primary">
                    {% else %}
                      <span class="badge bg-danger">
                    {% endif %}
                    {{ stat.regroupees }} / {{ stat.total }}</span>                  
                </td> #}
                
                <td class="text-end">
                    <a href="{{ path('app_affaire_modifier', {'id': affaire.id}) }}"
                    class="btn btn-sm btn-light me-2" title="Modifier">
                        <i class="fe fe-edit"></i>
                    </a>
                    
                    <a href="{{ path('app_regroupement_detail_affaire', {'id': affaire.id}) }}"
                    class="btn btn-sm btn-light me-2 bg-warning" title="Regrouper">
                        <i class="fe fe-link"></i>
                    </a>

                    <a href="#"
                    class="btn btn-sm btn-light bg-danger text-white"
                    title="Supprimer"
                    data-bs-toggle="modal"
                    data-bs-target="#deleteModal"
                    data-id="{{ affaire.id }}"
                    data-name="{{ affaire.nomChantier }}">
                        <i class="fe fe-trash"></i>
                    </a>                  
                </td>
            </tr>
          {% endfor %}
        </tbody>
      </table>
      <!-- Pagination -->
      <ul class="pagination justify-content-center listjs-pagination"></ul>
    </div>
  </div>
</div>
  

<div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header bg-danger text-white">
        <h5 class="modal-title" id="deleteModalLabel">Confirmer la suppression</h5>
        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Fermer"></button>
      </div>
      <div class="modal-body">
        <p>Vous allez supprimer l'affaire "<strong id="affaireName"></strong>". Souhaitez-vous continuer ?</p>
      </div>
      <div class="modal-footer">
        <form method="post" id="deleteForm">
          <input type="hidden" name="_token" id="csrfToken" value="">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
          <button type="submit" class="btn btn-danger">Supprimer</button>
        </form>
      </div>
    </div>
  </div>
</div>
{% endblock %}
{% block script %}
  {{ parent() }}

  <script type="text/javascript">
    document.addEventListener('DOMContentLoaded', function () {
      var deleteModal = document.getElementById('deleteModal');
      deleteModal.addEventListener('show.bs.modal', function (event) {
        var button = event.relatedTarget;
        var affaireId = button.getAttribute('data-id');
        var affaireName = button.getAttribute('data-name');

        // Mettre à jour le nom du affaire dans la modale
        var modalAffaireName = deleteModal.querySelector('#affaireName');
        modalAffaireName.textContent = affaireName;

        // Mettre à jour l'action du formulaire
        var deleteForm = deleteModal.querySelector('#deleteForm');
        deleteForm.action = '/prod/affaire/' + affaireId + '/delete';

        // Mettre à jour le token CSRF
        fetch('/prod/affaire/' + affaireId + '/delete-token')
          .then(response => response.json())
          .then(data => {
            var csrfTokenInput = deleteModal.querySelector('#csrfToken');
            csrfTokenInput.value = data.token;
          });
      });
      

      const listContainer = document.getElementById('affaire-list');
      if (listContainer) {
        new List('affaire-list', JSON.parse(listContainer.getAttribute('data-list')));
      }

    });

  </script>
{% endblock %}