{% extends '@App/partials/base.html.twig' %}

{% block content %}
  <div class="body-wrapper">
    <div class="container-fluid">
      <div class="card card-body py-3 mb-4">
        <div class="d-flex align-items-center justify-content-between">
          <div>
            <div class="text-muted small mb-2">Partenariat &gt; Contreparties</div>
            <h3 class="mb-1">Choisir mes contreparties</h3>
            <div class="text-muted">Composez votre formule en sélectionnant des contreparties dans le catalogue.</div>
          </div>
          <a href="{{ path('portail_proposition_view', { prospectionId: proposition.prospection.idtoken }) }}" class="btn btn-outline-secondary">Retour</a>
        </div>
      </div>

      {% if formule.flex %}
        {% set creditsAvailable = ((creditsTotal - formule.valeurUtilisee) > 0 ? (creditsTotal - formule.valeurUtilisee) : 0) %}
        {% set selectionInitial = creditsAvailable - creditsRemaining %}
        {% set categories = {'Tous': 'Tous'} %}
        {% for option in options %}
          {% set type = option.typeContrepartie %}
          {% set cat = type and type.categorie ? type.categorie.nom : 'Autres' %}
          {% set categories = categories|merge({ (cat): cat }) %}
        {% endfor %}
        {% for label, messages in app.flashes %}
          {% for message in messages %}
            <div class="alert alert-{{ label == 'error' ? 'danger' : label }} mb-3">{{ message }}</div>
          {% endfor %}
        {% endfor %}
        <div
          data-controller="flex-contrepartie flex-catalog"
          data-flex-contrepartie-credits-total-value="{{ creditsAvailable }}"
        >
        <div class="card border-primary-subtle bg-primary-subtle mb-4">
          <div class="card-body py-4">
            <div class="row g-4">
              <div class="col-md-4">
                <div class="text-muted">Crédit total</div>
                <div class="fw-bold fs-8">{{ creditsTotal|separate_thousands }}€</div>
              </div>
              <div class="col-md-4">
                <div class="text-muted">Consommé</div>
                <div class="fw-bold fs-8 text-danger"><span data-flex-contrepartie-target="used">{{ selectionInitial|separate_thousands }}</span>€</div>
              </div>
              <div class="col-md-4">
                <div class="text-muted">Restant</div>
                <div class="fw-bold fs-8 text-success"><span data-flex-contrepartie-target="remaining">{{ creditsRemaining|separate_thousands }}</span>€</div>
              </div>
            </div>
            {% set progress = creditsAvailable > 0 ? (selectionInitial / creditsAvailable * 100) : 0 %}
            <div class="progress mt-4" style="height:10px;">
              <div class="progress-bar" role="progressbar" style="width: {{ progress > 100 ? 100 : progress }}%" data-flex-contrepartie-target="progress"></div>
            </div>
            <div class="text-muted small mt-3"><i class="ti ti-info-circle me-1"></i>Vous ne pouvez pas dépasser votre crédit.</div>
          </div>
        </div>

        <form
          method="post"
          action="{{ path('portail_proposition_flex_submit', { id: proposition.idtoken }) }}"
        >
          <input type="hidden" name="redirect_to" value="{{ path('portail_proposition_detail', { id: proposition.idtoken }) }}">
          <div class="row g-4">
            <div class="col-lg-8">
              <div class="card mb-3">
                <div class="card-body">
                  <div class="d-flex flex-wrap align-items-center justify-content-between gap-3 mb-4">
                    <h4 class="mb-0">Catalogue</h4>
                    <div class="d-flex align-items-center gap-2">
                      <div class="input-group" style="min-width: 320px;">
                        <span class="input-group-text bg-white"><i class="ti ti-search"></i></span>
                        <input type="text" class="form-control" placeholder="Rechercher une contrepartie..." data-flex-catalog-target="search" data-action="input->flex-catalog#filter">
                      </div>
                      <select class="form-select" style="max-width: 180px;" data-flex-catalog-target="sort" data-action="change->flex-catalog#sort">
                        <option value="name">Nom</option>
                        <option value="value_asc">Valeur croissante</option>
                        <option value="value_desc">Valeur décroissante</option>
                      </select>
                    </div>
                  </div>

                  <div class="d-flex flex-wrap gap-2 mb-4">
                    {% for category in categories %}
                      <button
                        type="button"
                        class="btn btn-sm {{ category == 'Tous' ? 'btn-primary' : 'btn-light border' }} rounded-pill"
                        data-flex-catalog-target="categoryChip"
                        data-category="{{ category }}"
                        data-action="click->flex-catalog#selectCategory"
                      >
                        {{ category }}
                      </button>
                    {% endfor %}
                  </div>

                  <div class="d-grid gap-3">
                    {% for option in options %}
                      {% set type = option.typeContrepartie %}
                      {% set available = type.nombreMax - type.nombreActivation %}
                      {% set isRequired = option.obligatoire %}
                      {% set currentQty = selectionMap[type.idtoken].quantite|default(isRequired ? 1 : 0) %}
                      {% set categoryName = type.categorie ? type.categorie.nom : 'Autres' %}
                      <div
                        class="card border"
                        data-flex-catalog-target="card"
                        data-category="{{ categoryName }}"
                        data-name="{{ type.nom }}"
                        data-description="{{ type.description|default('') }}"
                        data-value="{{ type.valeur }}"
                      >
                        <div class="card-body">
                          <div class="d-flex align-items-start justify-content-between gap-3">
                            <div class="d-flex gap-3">
                              <div class="rounded-2 bg-light p-3 text-primary"><i class="ti ti-megaphone fs-6"></i></div>
                              <div>
                                <h5 class="mb-1">{{ type.nom }}</h5>
                                {% if type.description is defined and type.description %}
                                  <p class="text-muted mb-2">{{ type.description }}</p>
                                {% endif %}
                                <div class="d-flex flex-wrap gap-2">
                                  {% if isRequired %}<span class="badge bg-success-subtle text-success">Inclus</span>{% endif %}
                                  <span class="badge bg-light text-dark border">Dispo : {{ available }}</span>
                                  <span class="badge bg-light text-dark border">{{ categoryName }}</span>
                                </div>
                              </div>
                            </div>
                            <div class="text-end">
                              <div class="fw-bold fs-7">{{ type.valeur|separate_thousands }}€</div>
                              <small class="text-muted">/ unité</small>
                            </div>
                          </div>
                          <div class="d-flex flex-wrap justify-content-between align-items-center mt-3 pt-3 border-top">
                            {% if isRequired %}
                              <span class="badge bg-success-subtle text-success">Inclus dans la formule</span>
                            {% else %}
                              <button
                                type="button"
                                class="btn btn-sm btn-primary"
                                data-flex-contrepartie-target="addButton"
                                data-type="{{ type.idtoken }}"
                                data-unit="{{ type.valeur }}"
                                data-action="click->flex-contrepartie#add"
                                {% if currentQty > 0 %}disabled{% endif %}
                              >
                                {{ currentQty > 0 ? 'Ajouté' : 'Ajouter' }}
                              </button>
                            {% endif %}
                          </div>
                        </div>
                      </div>
                    {% else %}
                      <div class="text-center text-muted py-4">Aucune contrepartie sélectionnable.</div>
                    {% endfor %}
                  </div>
                </div>
              </div>
            </div>

            <div class="col-lg-4">
              <div class="card">
                <div class="card-body">
                  <h4 class="mb-3">Votre sélection</h4>
                  <div class="d-grid gap-3 mb-3">
                    {% for option in options %}
                      {% set type = option.typeContrepartie %}
                      {% set available = type.nombreMax - type.nombreActivation %}
                      {% set isRequired = option.obligatoire %}
                      {% set currentQty = selectionMap[type.idtoken].quantite|default(isRequired ? 1 : 0) %}
                      <div class="border rounded-2 p-3 {{ currentQty > 0 ? '' : 'd-none' }}" data-flex-contrepartie-target="line" data-selection-line="{{ type.idtoken }}" data-flex-unit="{{ type.valeur }}">
                        <div class="fw-semibold mb-2">{{ type.nom }}</div>
                        <div class="d-flex align-items-center justify-content-between gap-2">
                          <small class="text-muted">{{ type.valeur|separate_thousands }}€ / unité</small>
                          <div class="d-flex align-items-center gap-2">
                            <button type="button" class="btn btn-sm btn-outline-secondary" data-action="flex-contrepartie#decrement">-</button>
                            <input
                              class="form-control form-control-sm text-center"
                              style="max-width: 64px;"
                              type="number"
                              min="{{ isRequired ? 1 : 0 }}"
                              max="{{ available }}"
                              name="qty-{{ type.idtoken }}"
                              value="{{ currentQty }}"
                              data-flex-qty
                              data-action="input->flex-contrepartie#change"
                            >
                            <button type="button" class="btn btn-sm btn-outline-secondary" data-flex-plus data-action="flex-contrepartie#increment">+</button>
                          </div>
                        </div>
                      </div>
                    {% endfor %}
                  </div>
                  <div class="d-flex justify-content-between py-2 border-bottom">
                    <span>Sélection actuelle</span>
                    <strong><span data-flex-contrepartie-target="used">{{ selectionInitial|separate_thousands }}</span>€</strong>
                  </div>
                  <div class="d-flex justify-content-between py-2 border-bottom">
                    <span>Crédit restant</span>
                    <strong class="text-success"><span data-flex-contrepartie-target="remaining">{{ creditsRemaining|separate_thousands }}</span>€</strong>
                  </div>
                  <div class="progress mt-3 mb-3" style="height:8px;">
                    <div class="progress-bar" role="progressbar" style="width: 0%;" data-flex-contrepartie-target="progress"></div>
                  </div>
                  <button type="submit" class="btn btn-primary w-100" data-flex-contrepartie-target="submit">Soumettre ma sélection</button>
                </div>
              </div>
            </div>
          </div>
        </form>
        </div>
      {% else %}
        <div class="card">
          <div class="card-body">
            <h4 class="mb-3">Formule : {{ formule.nom }}</h4>
            <p class="text-muted">Cette formule n'est pas flexible.</p>
            <a class="btn btn-outline-primary" href="{{ path('portail_proposition_detail', { id: proposition.idtoken }) }}" data-turbo-frame="modal-frame">Voir le détail</a>
          </div>
        </div>
      {% endif %}
    </div>
  </div>
{% endblock %}