{# === Onglet Infos déclinaison === #}
<div class="tab-pane fade {{ ((app.request.get('tab') is defined and app.request.get('tab') == 'content_informations') or app.request.get('tab') is empty) ? 'show active' : '' }}"
     id="content_informations"
     role="tabpanel">

  <div class="crm-panel p-3 p-md-4 mb-3">
    <div class="d-flex align-items-center justify-content-between flex-wrap gap-2 mb-3 pb-2"
         style="border-bottom:1px dashed var(--crm-border);">
      <div class="d-flex align-items-center gap-2">
        <span class="crm-badge"><i class="fa fa-info-circle"></i></span>
        <h5 class="mb-0 fw-bold">Informations de la déclinaison</h5>
      </div>
      <div class="small text-muted">
        Réf: <strong class="text-dark">{{ declinaison.reference }}</strong>
      </div>
    </div>

    <form method="POST"
          action="{{ path('produit_dec_info_edit', {'id': declinaison.id }) }}"
          enctype="multipart/form-data"
          class="position-relative js-declination-info-form">

      <div class="row g-3">
        <div class="col-12 col-lg-6">
          <label for="form_info_name" class="form-label fw-semibold">Nom commercial</label>
          <input type="text"
                 id="form_info_name"
                 name="form_info[name]"
                 class="form-control"
                 placeholder="Nom de la déclinaison"
                 value="{{ declinaison.name }}"
                 required>
        </div>

        <div class="col-12 col-lg-6">
          <label for="form_info_barcode" class="form-label fw-semibold">Code-barres</label>
          <input type="text"
                 id="form_info_barcode"
                 name="form_info[barcode]"
                 class="form-control"
                 placeholder="Code-barres declinaison"
                 value="{{ declinaison.barcode ?? '' }}">
        </div>

        <div class="col-12 col-lg-6">
          <label class="form-label fw-semibold">Produit parent</label>
          <div class="form-control bg-light d-flex align-items-center gap-2" style="min-height:38px;">
            <i class="fa fa-box text-primary"></i>
            <a href="{{ path('produit_show', {'id': declinaison.produit.id }) }}"
               target="_blank"
               class="fw-semibold text-decoration-none">
              {{ declinaison.produit.reference }} - {{ declinaison.produit.name }}
            </a>
          </div>
        </div>

        <div class="col-12">
          <label class="form-label fw-semibold mb-2">Valeurs de déclinaison</label>
          <div class="d-flex flex-wrap gap-2">
            {% for gv in declinaison.groupDeclinationValues %}
              <span class="badge badge-light border px-2 py-1">
                <strong>{{ gv.declination.name }}:</strong> {{ gv.value.name }}
              </span>
            {% else %}
              <span class="text-muted small">Aucune valeur</span>
            {% endfor %}
          </div>
        </div>

        <div class="col-12">
          <label for="item_notes" class="form-label fw-semibold">Description</label>
          <textarea id="item_notes"
                    name="form_info[description]"
                    rows="6"
                    class="form-control redactor lightButtons translatable lang_0"
                    placeholder="Description de la déclinaison">{{ declinaison.description }}</textarea>
        </div>
      </div>

      {% if "PRODUIT_UPDATE" in rights %}
        <div class="d-flex justify-content-center mt-4 pt-2" style="border-top:1px dashed var(--crm-border);">
          <button type="button" class="btn btn-dark px-5 js-declination-info-save" data-direct-handler="1" onclick="window.DeclinaisonTabs && window.DeclinaisonTabs.submitInfoForm && window.DeclinaisonTabs.submitInfoForm(); return false;">
            <i class="fa fa-save me-1"></i> Enregistrer
          </button>
        </div>
      {% endif %}
    </form>
  </div>
</div>

<script>
  (function () {
    var $doc = window.jQuery ? window.jQuery(document) : null;
    if (!$doc) {
      return;
    }

    function submitDeclinationInfoForm(formRef) {
      var $form = formRef && formRef.jquery ? formRef : window.jQuery(formRef);
      if (!$form.length) {
        return;
      }

      var $submit = $form.find('.js-declination-info-save');
      if (window.declinaisonInfoEditor && typeof window.declinaisonInfoEditor.getData === 'function') {
        var $textarea = $form.find('#item_notes');
        if ($textarea.length) {
          $textarea.val(window.declinaisonInfoEditor.getData());
        }
      }

      window.jQuery.ajax({
        url: $form.attr('action'),
        method: ($form.attr('method') || 'POST').toUpperCase(),
        data: $form.serialize(),
        headers: { 'X-Requested-With': 'XMLHttpRequest' },
        beforeSend: function () {
          $submit.prop('disabled', true);
        }
      })
        .done(function (response) {
          if (window.DeclinaisonTabs && typeof window.DeclinaisonTabs.refreshTabAndSummary === 'function') {
            window.DeclinaisonTabs.refreshTabAndSummary('content_informations', function () {
              if (typeof toastr !== 'undefined') {
                toastr.success((response && response.message) ? response.message : 'Informations de la declinaison mises a jour.');
              }
            });
            return;
          }

          if (typeof toastr !== 'undefined') {
            toastr.success((response && response.message) ? response.message : 'Informations de la declinaison mises a jour.');
          }
        })
        .fail(function (xhr) {
          var message = 'Erreur lors de l enregistrement des informations.';
          if (xhr.responseJSON && xhr.responseJSON.message) {
            message = xhr.responseJSON.message;
          }
          if (typeof Swal !== 'undefined') {
            Swal.fire({
              icon: 'error',
              title: 'Enregistrement impossible',
              text: message
            });
          } else {
            alert(message);
          }
        })
        .always(function () {
          $submit.prop('disabled', false);
        });
    }

    window.DeclinaisonTabs = window.DeclinaisonTabs || {};
    window.DeclinaisonTabs.submitInfoForm = function () {
      submitDeclinationInfoForm(window.jQuery('form.js-declination-info-form').first());
    };

    $doc
      .off('submit.declinationInfo', 'form.js-declination-info-form')
      .on('submit.declinationInfo', 'form.js-declination-info-form', function (e) {
        e.preventDefault();
        e.stopImmediatePropagation();
        submitDeclinationInfoForm(window.jQuery(this));
        return false;
      });

    $doc
      .off('click.declinationInfoSave', '.js-declination-info-save')
      .on('click.declinationInfoSave', '.js-declination-info-save', function (e) {
        if (this.getAttribute('data-direct-handler') === '1') return;
        e.preventDefault();
        e.stopImmediatePropagation();
        submitDeclinationInfoForm(window.jQuery(this).closest('form.js-declination-info-form'));
        return false;
      });
  })();
</script>