{# Modal Catalogue Produits - UI BS5 Pro #}

<style>
  /* largeur modal + polish */
  .modal-xl.custom-large { max-width: 1100px; }
  .catalogue-toolbar .select2-container { width: 100% !important; }
  .catalogue-toolbar .select2-container .select2-selection--single,

  .catalogue-toolbar .field-col { display: flex; flex-direction: column; }
  .catalogue-table thead th { font-weight: 600; }
  .imageCatalogue { width: 56px; height: 56px; object-fit: cover; border-radius: .5rem; }
  .qty-input { max-width: 88px; }
  .modal-header .btn-close { margin: -0.25rem -0.25rem -0.25rem auto; }


</style>

<div class="modal fade" id="m_modal_catalogue_produit" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-xl custom-large modal-dialog-centered modal-dialog-scrollable">
    <div class="modal-content border-0 shadow">

      <div class="modal-header bg-light">
        <div class="d-flex align-items-center gap-2">
          <span class="badge bg-primary-subtle text-primary border border-primary-subtle">
            Catalogue
          </span>
          <h5 class="modal-title mb-0">Ajouter des articles au document</h5>
        </div>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer"></button>
      </div>

      <div class="modal-body p-3 p-lg-4">
        <div class="catalogue-toolbar border rounded-3 p-3 bg-white mb-3">
          <div class="row g-3 align-items-end">
            <div class="col-12 col-md-3 field-col">
              <label class="form-label mb-1">Produit</label>
              <select class="form-select form-select-sm select2" id="catalogue_select" name="catalogue_produit"></select>
            </div>

            <div class="col-12 col-md-6 field-col">
              <label class="form-label mb-1">Couleurs</label>
              <select class="form-select form-select-sm w-100 select2" id="color_select" name="catalogue_color[]" multiple>
                <option value="all" class="fw-semibold text-primary">Tous</option>
                {% for value in declinationCouleur.valueDeclinations %}
                  <option value="{{ value.id }}">{{ value.name }}</option>
                {% endfor %}
              </select>
            </div>

            <div class="col-6 col-md-1">
              <label class="form-label mb-1 text-center w-100">Qté</label>
              <input type="number" min="1" value="1" id="default_qty"
                     class="form-control form-control-sm text-center qty-input">
            </div>

            <div class="col-6 col-md-2">
              <button type="button"
                      class="btn btn-dark btn-sm w-100"
                      id="appliquer_catalogue"
                      data-category="{{ document.category }}">
                <i class="fa fa-rotate me-1"></i> Charger
              </button>
            </div>
          </div>
        </div>

        <div class="border rounded-3 overflow-hidden">
          <div class="table-responsive generated_declinations_container">
            <table id="tableCatalogue" class="table table-hover align-middle mb-0 catalogue-table">
              <thead class="table-light">
                <tr class="small text-uppercase">
                  <th style="width:80px;">Image</th>
                  <th>Référence</th>
                  <th>Nom commercial</th>
                  <th class="text-nowrap">Prix Achat TTC</th>
                  <th class="text-center" style="width:110px;">Qté</th>
                  <th class="text-end" style="width:90px;">Action</th>
                </tr>
              </thead>

              <tbody>
                {# Row template (cachée) #}
                <tr class="firstRow d-none">
                  <td>
                    <img class="imageCatalogue border" src="{{ asset('/images/galery_placeholder_200.png') }}" alt="Produit">

                    <input class="catalogue-item-id" value="0" type="hidden">
                    <input class="catalogue-item-json" value="" type="hidden">

                    {# optionnel: si tu préfères stocker en champs séparés #}
                    <input class="catalogue-item-reference" value="" type="hidden">
                    <input class="catalogue-item-name" value="" type="hidden">
                    <input class="catalogue-item-buyingPriceTtc" value="" type="hidden">
                    <input class="catalogue-item-tva-id" value="" type="hidden">
                    <input class="catalogue-item-tva" value="" type="hidden">
                    <input class="catalogue-item-promo-type" value="" type="hidden">
                    <input class="catalogue-item-promo-value" value="" type="hidden">
                  </td>
                  <td class="referenceCatalogue"></td>
                  <td class="nameCatalogue"></td>
                  <td class="purchaseAmountCatalogue text-nowrap"></td>
                  <td class="text-center">
                    <input class="form-control form-control-sm text-center input-quantity-catalogue"
                           type="number" min="1" value="1" placeholder="Qté">
                  </td>
                  <td class="text-end">
                    <button type="button" class="btn btn-outline-danger btn-sm"
                            onclick="removeItemDec($(this));" title="Supprimer">
                      <i class="fa fa-trash"></i>
                    </button>
                  </td>
                </tr>

                {# Placeholder state #}
                <tr class="catalogue-empty">
                  <td colspan="6" class="text-center py-4 text-muted">
                    <i class="fa fa-circle-info me-1"></i>
                    Aucun article chargé. Choisis un produit et une couleur, puis clique sur <strong>Charger</strong>.
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>

      </div>

      <div class="modal-footer bg-light justify-content-between">
         <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">
            Fermer
          </button>


        <div class="d-flex gap-2">
          <button type="button" class="btn btn-outline-danger btn-sm" id="reset-catalogue">
            <i class="fa fa-broom me-1"></i> Réinitialiser
          </button>

          <button type="button" class="btn btn-success btn-sm"
                  id="save-catalogue"
                  data-category="{{ document.category }}"
                  disabled>
            <i class="fa fa-plus me-1"></i> Ajouter au document
          </button>
        </div>
      </div>

    </div>
  </div>
</div>

{% block javascripts %}
<script>
document.addEventListener('DOMContentLoaded', function () {

  var btnCharger = document.getElementById('appliquer_catalogue');
  var defaultQtyInput = document.getElementById('default_qty');
  var resetBtn = document.getElementById('reset-catalogue');
  var colorSelect = document.getElementById('color_select');

  function hideEmptyRowIfNeeded() {
    var emptyRow = document.querySelector('#tableCatalogue tbody .catalogue-empty');
    var rows = document.querySelectorAll('#tableCatalogue tbody tr:not(.firstRow):not(.catalogue-empty)');
    if (!emptyRow) return;
    emptyRow.style.display = (rows.length > 0) ? 'none' : '';
  }

  /**
   * Applique la quantité par défaut à tous les champs
   */
  function updateQuantiteCatalogue() {
    var defaultQty = parseFloat(defaultQtyInput.value) || 1;
    document.querySelectorAll('.input-quantity-catalogue').forEach(function (input) {
      input.value = defaultQty;
    });
  }

  /**
   * Charge les déclinaisons d'un produit pour une couleur donnée
   */
  function loadDeclinaisonsParCouleur(colorId) {
    var produitId = $('#catalogue_select').val();
    var category = $('#appliquer_catalogue').data('category');

    if (!produitId || !colorId) return;

    $.ajax({
      url: Routing.generate('get_group_produit'),
      type: "POST",
      data: { "produit": produitId, "color": colorId },
      success: function (response) {
        createTable(response, category);
        $('#save-catalogue').prop('disabled', false);
        updateQuantiteCatalogue();
        hideEmptyRowIfNeeded();
      },
      error: function () {
        console.error("Erreur lors du chargement de la couleur : " + colorId);
      }
    });
  }

  /**
   * Événement : Chargement déclinaisons
   */
  if (false && btnCharger && defaultQtyInput && colorSelect) {
    btnCharger.addEventListener('click', function () {
      var selectedOptions = Array.from(colorSelect.selectedOptions).map(opt => opt.value);

      var colorIds = [];
      if (selectedOptions.includes('all')) {
        colorIds = Array.from(colorSelect.options)
          .filter(opt => opt.value !== 'all')
          .map(opt => opt.value);
      } else {
        colorIds = selectedOptions;
      }

      colorIds = colorIds.filter(id => id !== '' && id !== null && id !== undefined);
      colorIds = [...new Set(colorIds)];

      var delay = 0;
      colorIds.forEach(colorId => {
        setTimeout(() => { loadDeclinaisonsParCouleur(colorId); }, delay);
        delay += 100;
      });
    });
  }

  /**
   * Réinitialiser le tableau
   */
  if (resetBtn) {
    resetBtn.addEventListener('click', function () {
      var tbody = document.querySelector('#tableCatalogue tbody');
      if (tbody) {
        tbody.querySelectorAll('tr:not(.firstRow):not(.catalogue-empty)').forEach(row => row.remove());
      }
      $('#save-catalogue').prop('disabled', true);
      hideEmptyRowIfNeeded();
    });
  }

  /**
   * Init Select2
   */
  $('#color_select').select2({
    placeholder: "Sélectionner une ou plusieurs couleurs",
    width: '100%'
  });

  /**
   * Reset modal on close
   */
  $('#m_modal_catalogue_produit').on('hidden.bs.modal', function () {
    var tbody = document.querySelector('#tableCatalogue tbody');
    if (tbody) {
      tbody.querySelectorAll('tr:not(.firstRow):not(.catalogue-empty)').forEach(row => row.remove());
    }

    $('#catalogue_select').val(null).trigger('change');
    $('#color_select').val(null).trigger('change');
    $('#default_qty').val(1);

    $('#save-catalogue').removeData('data');
    if (typeof selectedColorOrder !== 'undefined') {
      selectedColorOrder = [];
    }

    $('#save-catalogue').prop('disabled', true);
    hideEmptyRowIfNeeded();
  });

  hideEmptyRowIfNeeded();
});
</script>
{% endblock %}