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

{% block subheader %}
  <div class="badge-titre crm-title-bar d-flex justify-content-between align-items-center flex-wrap w-100 mb-3">
    <div>
      <h3 class="badge-title-main crm-title-main mb-0">FICHE PACK</h3>
      <div class="text-muted small mt-1">
        {{ pack.name }}{% if pack.reference %} | {{ pack.reference }}{% endif %}
      </div>
    </div>
    <div class="d-flex gap-2">
      <a href="#" class="btn btn-primary btn-sm modalEditPack" data-url="{{ path('pack_edit', { id: pack.id }) }}">
        <i class="fa fa-edit me-1"></i> Modifier
      </a>
      <a href="{{ path('pack_index') }}" class="btn btn-secondary btn-sm">
        <i class="fa fa-arrow-left me-1"></i> Retour
      </a>
    </div>
  </div>
{% endblock %}

{% block bodycontent %}
  <style>
    #pack-left-summary .pack-card {
      border: 1px solid #e6ecf2;
      border-radius: 12px;
      background: #fff;
      box-shadow: 0 1px 2px rgba(0,0,0,.03);
      overflow: hidden;
    }
    #pack-left-summary .pack-card-head {
      padding: 14px;
      border-bottom: 1px solid #eef2f7;
      background: #f8fafc;
    }
    #pack-left-summary .pack-meta-label {
      font-size: .78rem;
      color: #64748b;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .03em;
    }
    #pack-left-summary .pack-reference {
      margin: 2px 0 0;
      font-size: 1.1rem;
      font-weight: 800;
      color: #0f172a;
      word-break: break-word;
    }
    #pack-left-summary .pack-name {
      margin-top: 6px;
      font-size: .95rem;
      color: #334155;
      font-weight: 600;
    }
    #pack-left-summary .pack-badges {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-top: 8px;
    }
    #pack-left-summary .pack-body {
      padding: 14px;
    }
    #pack-left-summary .pack-kv {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 8px;
      margin-bottom: 8px;
      font-size: .88rem;
    }
    #pack-left-summary .pack-kv .k {
      color: #64748b;
      font-weight: 600;
    }
    #pack-left-summary .pack-kv .v {
      color: #111827;
      font-weight: 700;
      text-align: right;
    }
    #pack-left-summary .pack-price-box {
      border: 1px solid #e5e7eb;
      border-radius: 10px;
      background: #fff;
      padding: 10px 12px;
      margin-bottom: 10px;
    }
    #pack-left-summary .pack-price-old {
      color: #64748b;
      font-size: .84rem;
    }
    #pack-left-summary .pack-price-final {
      font-size: 1.35rem;
      font-weight: 800;
      color: #111827;
      line-height: 1.2;
    }
    #pack-left-summary .pack-main-image {
      margin-top: 12px;
      text-align: center;
    }
    #pack-left-summary .pack-main-image img {
      max-width: 100%;
      max-height: 220px;
      border: 1px solid #e5e7eb;
      border-radius: 10px;
      object-fit: cover;
    }
    #pack-left-summary .pack-main-placeholder {
      border: 1px dashed #dbe3ee;
      border-radius: 10px;
      padding: 18px;
      color: #6b7280;
      font-size: .84rem;
      background: #f8fafc;
    }
  </style>
  <div class="row mt-3">
    <div class="col-12 col-xl-3">
      <div id="pack-left-summary" class="mb-3">
        <div class="pack-card">
          <div class="pack-card-head">
            <div class="pack-meta-label">Reference pack</div>
            <div class="pack-reference">{{ pack.reference ?: '-' }}</div>
            <div class="pack-name">{{ pack.name ?: '-' }}</div>
            <div class="pack-badges">
              <span class="badge bg-light text-dark border">Produits: {{ pack.items|length }}</span>
              {% if pack.showInWebsite %}
                <span class="badge bg-success">Visible site</span>
              {% else %}
                <span class="badge bg-secondary">Cache site</span>
              {% endif %}
            </div>
          </div>

          <div class="pack-body">
            <div class="pack-price-box">
              <div class="pack-price-old">Prix TTC: {{ (pack.priceTtc ?? 0)|number_format(3, '.', ' ') }} TND</div>
              <div class="pack-price-old">Remise: {{ (pack.remise ?? 0)|number_format(2, '.', ' ') }}%</div>
              <div class="pack-price-final">{{ (pack.finalPriceTtc ?? 0)|number_format(3, '.', ' ') }} TND</div>
            </div>

            <div class="pack-kv">
              <span class="k">Date creation</span>
              <span class="v">{{ pack.createdAt ? pack.createdAt|date('d/m/Y H:i') : '-' }}</span>
            </div>


            <div id="packMainImageBlock" class="pack-main-image">
              {% set mainImage = null %}
              {% for item in pack.picture %}
                {% if item.isSelected %}
                  {% set mainImage = item %}
                {% endif %}
              {% endfor %}

              {% if mainImage %}
                <img id="packMainImagePreview" src="{{ app.request.getSchemeAndHttpHost() }}{{ vich_uploader_asset(mainImage, 'file') }}" alt="Image principale pack">
              {% else %}
                <div id="packMainImageEmpty" class="pack-main-placeholder">
                  <i class="fa fa-image me-1"></i>Aucune image principale
                </div>
              {% endif %}
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="col-12 col-xl-9">
      <div class="card shadow-sm">
        <div class="card-body">
          <ul class="nav nav-tabs" role="tablist">
            <li class="nav-item"><a class="nav-link active" data-bs-toggle="tab" href="#pack_infos">Infos</a></li>
            <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#pack_images">Images</a></li>
            <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#pack_stats">Statistiques</a></li>
            <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#pack_documents">Documents</a></li>
            <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#pack_comments">Commentaires</a></li>
            <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#pack_history">Historique</a></li>
          </ul>

          <div class="tab-content pt-3">
            <div class="tab-pane fade show active" id="pack_infos">
              {% include 'admin/pack/_tab/tab_infos.html.twig' %}
            </div>

            <div class="tab-pane fade" id="pack_images">
              {% include 'admin/pack/_tab/tab_images.html.twig' %}
            </div>

            <div class="tab-pane fade" id="pack_stats">
              {% include 'admin/pack/_tab/tab_statistiques.html.twig' %}
            </div>

            <div class="tab-pane fade" id="pack_documents">
              {% include 'admin/pack/_tab/tab_documents.html.twig' %}
            </div>

            <div class="tab-pane fade" id="pack_comments">
              {% include 'admin/pack/_tab/tab_commentaires.html.twig' %}
            </div>

            <div class="tab-pane fade" id="pack_history">
              {% include 'admin/pack/_tab/tab_historiques.html.twig' %}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="modal fade" id="m_modal_ajax" role="dialog">
    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
      <div class="modal-content" id="modal_content"></div>
    </div>
  </div>
{% endblock %}

{% block js %}
  {{ parent() }}
  <script src="{{ asset('js/admin/product-functions.js') }}"></script>
  <script>
  function openPackEditModal(url) {
    $('#m_modal_ajax').modal('show');

    $('#modal_content').load(url, function () {
      $('.select2').select2({ width: '100%' });

      if (window.initPackModal) {
        window.initPackModal('#modal_content');
        return;
      }

      $.getScript('{{ asset("js/admin/pack-modal.js") }}')
        .done(function () {
          if (window.initPackModal) window.initPackModal('#modal_content');
        });
    });
  }

  $(document).on('click', 'a.modalEditPack', function (e) {
    e.preventDefault();
    openPackEditModal($(this).data('url'));
  });
</script>


{% endblock %}