{% extends '@admin/base.html.twig' %}

{% block stylesheets %}
  {{ parent() }}
  <style>
    [data-bs-toggle="modal"] {
      cursor: pointer;
    }

    .chip {
      display: inline-flex;
      align-items: center;
      padding: 0.15rem 0.5rem;
      border-radius: 999px;
      font-size: 0.78rem;
      font-weight: 600;
      background: #f1f3f5;
      color: #333;
      border: 1px solid #e2e6ea;
      margin-right: 0.35rem;
    }

    .chip i {
      font-size: 0.8rem;
      margin-right: 0.35rem;
      opacity: 0.8;
    }

    .levels-legend {
      background: #fafbfc;
      border: 1px solid #e9ecef;
      border-radius: 0.75rem;
      padding: 0.75rem 0.9rem;
      margin-bottom: 0.8rem;
    }

    .levels-legend .title {
      font-weight: 700;
      margin-bottom: 0.35rem;
      display: flex;
      align-items: center;
    }

    .levels-legend .title i {
      margin-right: 0.4rem;
    }

    .levels-tree {
      font-size: 0.86rem;
      margin: 0;
    }

    .levels-tree ul {
      list-style: none;
      padding-left: 1.1rem;
      margin: 0;
    }

    .levels-tree li {
      position: relative;
      margin: 0.15rem 0;
    }

    .levels-tree li::before {
      content: "";
      position: absolute;
      left: -0.7rem;
      top: 0.6rem;
      width: 0.5rem;
      height: 1px;
      background: #cfd4da;
    }

    .levels-tree li::after {
      content: "";
      position: absolute;
      left: -0.7rem;
      top: -0.3rem;
      width: 1px;
      height: 0.9rem;
      background: #cfd4da;
    }

    .hover-show-delete:hover .delete-icon,
    .hover-show-delete:hover .modalEditDeclinaisonValue {
      display: inline !important;
    }

    .chip-value {
      min-width: 70px;
      text-align: center;
      display: inline-block;
    }

    .decli-help-header {
      border-bottom: 1px solid #eef1f5;
    }

    .decli-help-icon {
      width: 44px;
      height: 44px;
      border-radius: 14px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
      color: #2563eb;
      font-size: 1.05rem;
      flex-shrink: 0;
    }

    .decli-help-subtitle {
      font-size: 0.84rem;
      color: #6b7280;
      margin-top: 0.15rem;
      line-height: 1.45;
    }

    .decli-help-note {
      border: 1px solid #dbe7ff;
      background: #f8fbff;
      border-radius: 14px;
      padding: 0.95rem 1rem;
    }

    .decli-help-note-title {
      font-size: 0.92rem;
      font-weight: 700;
      color: #1f2937;
      margin-bottom: 0.35rem;
    }

    .decli-help-level-card {
      border: 1px solid #e9edf3;
      border-radius: 14px;
      background: #fff;
      padding: 1rem;
      height: 100%;
    }

    .decli-help-level-card h6 {
      font-size: 0.92rem;
      font-weight: 700;
      margin-bottom: 0.5rem;
      color: #1f2937;
    }

    .decli-help-level-card p {
      font-size: 0.83rem;
      color: #6b7280;
      margin-bottom: 0;
      line-height: 1.5;
    }

    .decli-help-example-card {
      border: 1px solid #e9edf3;
      border-radius: 14px;
      background: #fff;
      padding: 1rem;
      height: 100%;
    }

    .decli-help-example-title {
      font-size: 0.9rem;
      font-weight: 700;
      color: #1f2937;
      margin-bottom: 0.65rem;
    }
  </style>
{% endblock %}

{% block subheader %}
  <div class="badge-titre d-flex justify-content-between align-items-center flex-wrap w-100" style="padding: 1rem;">
    <h3 class="m-subheader__title m-subheader__title--separator d-flex align-items-center mb-0">
      <i class="fa fa-truck me-2 text-primary" style="font-size: 1.5rem;"></i> Declinaisons
    </h3>

    <div class="d-flex align-items-center">
      <a href="javascript:void(0)"
         class="btn btn-secondary btn-sm me-2"
         data-bs-toggle="modal"
         data-bs-target="#helpDeclinaisonModal">
        <i class="fa fa-info-circle me-1"></i> Aide
      </a>

      <a href="javascript:void(0)" class="btn btn-success btn-sm modalNewDeclinaison">
        <i class="fa fa-plus-circle me-1"></i> Ajouter une declinaison
      </a>
    </div>
  </div>
{% endblock %}

{% block bodycontent %}
  <div class="row">
    <div class="col-12">
      <div class="card shadow-sm">
        <div class="card-body px-2 py-2">
          <div class="table-responsive">
            <table id="declinaisonsTable" class="table table-striped table-hover table-bordered w-100">
              <thead>
                <tr>
                  <th>Nom</th>
                  <th>Niveau</th>
                  <th>Liste des valeurs</th>
                  <th>Actions</th>
                </tr>
              </thead>
              <tbody></tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="modal fade" id="m_modal_add_declinaison" role="dialog">
    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
      <div class="modal_edit_content" id="modal_add_declinaison_content"></div>
    </div>
  </div>

  <div class="modal fade" id="m_modal_edit_declinaison" role="dialog">
    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
      <div class="modal_edit_content" id="modal_edit_declinaison_content"></div>
    </div>
  </div>

  <div class="modal fade" id="m_modal_edit_declinaison_value" role="dialog">
    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
      <div class="modal_edit_content" id="modal_edit_declinaison_value_content"></div>
    </div>
  </div>

  <div class="modal fade" id="m_modal_add_value_declinaison" role="dialog">
    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
      <div class="modal_edit_content" id="modal_add_value_declinaison_content"></div>
    </div>
  </div>

  <div class="modal fade" id="helpDeclinaisonModal" tabindex="-1" role="dialog" aria-labelledby="helpDeclinaisonModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
      <div class="modal-content">
        <div class="modal-header decli-help-header">
          <div class="d-flex align-items-start gap-3">
            <span class="decli-help-icon">
              <i class="fa fa-sitemap"></i>
            </span>
            <div>
              <h5 class="modal-title mb-0" id="helpDeclinaisonModalLabel">Guide des declinaisons</h5>
              <div class="decli-help-subtitle">
                Comprenez rapidement comment organiser les niveaux et construire des combinaisons produit propres.
              </div>
            </div>
          </div>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer"></button>
        </div>

        <div class="modal-body">
          <div class="decli-help-note mb-4">
            <div class="decli-help-note-title">
              <i class="fa fa-lightbulb text-warning me-2"></i>Principe general
            </div>
            <div class="small text-muted">
              Une declinaison correspond a un axe de variation produit. Une SKU finale est construite a partir
              d'une combinaison de valeurs sur un ou plusieurs niveaux.
            </div>
          </div>

          <div class="row g-3 mb-4">
            <div class="col-md-4">
              <div class="decli-help-level-card">
                <h6><i class="fa fa-layer-group text-primary me-2"></i>Niveau 1</h6>
                <p>Famille principale de variation, par exemple <em>Couleur</em>, <em>Taille</em> ou <em>Matiere</em>.</p>
              </div>
            </div>
            <div class="col-md-4">
              <div class="decli-help-level-card">
                <h6><i class="fa fa-level-down-alt text-info me-2"></i>Niveau 2</h6>
                <p>Valeur ou sous-famille rattachee au niveau 1, par exemple <em>Bleu</em>, <em>Rouge</em>, <em>36</em> ou <em>38</em>.</p>
              </div>
            </div>
            <div class="col-md-4">
              <div class="decli-help-level-card">
                <h6><i class="fa fa-stream text-secondary me-2"></i>Niveau 3</h6>
                <p>Precision optionnelle si necessaire, par exemple <em>Bleu clair</em>, <em>Bleu fonce</em> ou une finition specifique.</p>
              </div>
            </div>
          </div>

          <div class="levels-legend mb-4">
            <div class="title"><i class="fa fa-sitemap text-secondary"></i>Lecture rapide des niveaux</div>
            <div class="mb-0">
              <span class="chip"><i class="fa fa-layer-group"></i>Niveau 1</span>
              <span class="chip"><i class="fa fa-level-down-alt"></i>Niveau 2</span>
              <span class="chip"><i class="fa fa-stream"></i>Niveau 3 optionnel</span>
            </div>
          </div>

          <div class="row g-3">
            <div class="col-md-4">
              <div class="decli-help-example-card">
                <div class="decli-help-example-title"><i class="fa fa-tag me-2 text-primary"></i>Exemple 1 : Couleur et Taille</div>
                <div class="levels-tree">
                  <ul>
                    <li>Couleur
                      <ul>
                        <li>Bleu
                          <ul>
                            <li>Bleu clair</li>
                            <li>Bleu fonce</li>
                          </ul>
                        </li>
                        <li>Rouge</li>
                      </ul>
                    </li>
                    <li>Taille
                      <ul>
                        <li>36</li>
                        <li>38</li>
                        <li>40</li>
                      </ul>
                    </li>
                  </ul>
                </div>
              </div>
            </div>

            <div class="col-md-4">
              <div class="decli-help-example-card">
                <div class="decli-help-example-title"><i class="fa fa-tshirt me-2 text-info"></i>Exemple 2 : Matiere et Coupe</div>
                <div class="levels-tree">
                  <ul>
                    <li>Matiere
                      <ul>
                        <li>Coton
                          <ul>
                            <li>Coton bio</li>
                            <li>Coton peigne</li>
                          </ul>
                        </li>
                        <li>Lin</li>
                        <li>Viscose</li>
                      </ul>
                    </li>
                    <li>Coupe
                      <ul>
                        <li>Droite</li>
                        <li>Oversize</li>
                        <li>Evasee</li>
                      </ul>
                    </li>
                  </ul>
                </div>
              </div>
            </div>

            <div class="col-md-4">
              <div class="decli-help-example-card">
                <div class="decli-help-example-title"><i class="fa fa-utensils me-2 text-success"></i>Exemple 3 : Type et Gout</div>
                <div class="levels-tree">
                  <ul>
                    <li>Type de produit
                      <ul>
                        <li>Biscuit
                          <ul>
                            <li>Sec</li>
                            <li>Fourre</li>
                          </ul>
                        </li>
                        <li>Chocolat</li>
                      </ul>
                    </li>
                    <li>Gout
                      <ul>
                        <li>Vanille</li>
                        <li>Chocolat</li>
                        <li>Fraise</li>
                      </ul>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>

          <div class="alert alert-light border mt-4 mb-0">
            <strong>Bon usage :</strong> gardez des noms simples, coherents et reutilisables. Creez seulement un niveau 3 si une precision produit est vraiment utile.
          </div>
        </div>
      </div>
    </div>
  </div>
{% endblock %}

{% block javascripts %}
  {{ parent() }}
  <script>
document.addEventListener('DOMContentLoaded', function () {
  if (window.jQuery && typeof jQuery.fn.popover === 'function') {
    jQuery('[data-bs-toggle="popover"]').popover({
      container: 'body',
      html: true,
      trigger: 'focus',
      placement: 'bottom',
      sanitize: false
    });
  }

  if (window.bootstrap && bootstrap.Popover) {
    document.querySelectorAll('[data-bs-toggle="popover"]').forEach(function (el) {
      new bootstrap.Popover(el, { container: 'body', html: true, trigger: 'click', placement: 'bottom' });
    });
  }
});
</script>
{% endblock %}