{% set frame_prefix = 'convention-' ~ convention.idtoken %}
{% set id_prefix = frame_prefix ~ '-' %}

<div class="row">
  <div class="col-lg-12">
    <h5>Résumé des apports de sponsoring</h5>

    <div class="card bg-light">
      <div class="card-body">
        <turbo-frame id="{{ frame_prefix }}-resume" src="{{ path('projet_view_convention_turbo_resume', { id: convention.projet.idtoken, conventionId: convention.idtoken, frame: frame_prefix ~ '-resume', prefix: id_prefix }) }}" loading="lazy" data-prefetch-frame>
          Chargement du résumé...
        </turbo-frame>
      </div>
    </div>

    <div class="card border mt-4">
      <div class="card-header d-flex align-items-center justify-content-between py-3">
        <h5 class="mb-0 d-flex align-items-center text-uppercase">
          <iconify-icon icon="solar:file-text-outline" class="me-2 text-muted"></iconify-icon>
          Convention & formule
        </h5>
        <span class="badge bg-success-subtle text-success fs-3 px-3 py-2">
          {{ convention.document ? convention.document.statut : convention.statut }}
        </span>
      </div>
      <div class="card-body">
        <div class="d-flex flex-wrap gap-2 justify-content-end mb-3">
          {% if (convention.document is null or convention.document.statut == 'Créée') and permissionAccess.can('PERSONNALISER_FORMULE') %}
            <a href="{{ path('projet_view_convention_turbo_personnalise_formule', { id: convention.projet.idtoken, conventionId: convention.idtoken, frame: frame_prefix }) }}"
               class="btn btn-rounded btn-outline-primary btn-sm"
               data-turbo-frame="modal-frame">
              <i class="ti ti-wand fs-4 me-2"></i>
              Personnaliser cette formule
            </a>
          {% endif %}

          {% if convention.document is null and permissionAccess.can('EDITER_CONVENTION') %}
            <a href="{{ path('projet_view_convention_turbo_edit', { id: convention.projet.idtoken, conventionId: convention.idtoken }) }}"
               class="btn btn-rounded btn-outline-primary btn-sm"
               data-turbo-frame="modal-frame">
              <i class="ti ti-edit fs-4 me-2"></i>
              Éditer une convention
            </a>
          {% endif %}
        </div>

        <div class="bg-light-subtle rounded-3 p-3 mb-4">
          <turbo-frame id="{{ frame_prefix }}-formule-table" src="{{ path('projet_view_convention_table_formule', { id: convention.projet.idtoken, conventionId: convention.idtoken, frame: frame_prefix ~ '-formule-table' }) }}" loading="lazy" data-prefetch-frame>
            Chargement de la formule...
          </turbo-frame>
        </div>

        {% if convention.document is not null %}
          <div class="bg-light-subtle rounded-3 p-3">
            <div class="d-flex align-items-center justify-content-between border rounded-3 p-3 bg-white">
              <div class="d-flex align-items-center">
                <div class="bg-danger-subtle text-danger rounded-3 d-flex align-items-center justify-content-center me-3" style="width: 52px; height: 52px;">
                  <iconify-icon icon="solar:file-text-linear" class="fs-7"></iconify-icon>
                </div>
                <div>
                  <div class="fw-semibold fs-6">{{ convention.document.nom }}</div>
                  <div class="text-muted">Créé le {{ convention.document.createdAt | date('d/m/Y à H:i') }}</div>
                </div>
              </div>
              <div class="d-flex align-items-center gap-2">
                <span class="badge bg-primary-subtle text-primary">{{ convention.document.statut }}</span>
                {% if convention.document.statut == 'Créée' or convention.document.statut == 'Éditée' %}
                  {% if permissionAccess.can('EDITER_CONVENTION') %}
                    <a href="{{path('projet_view_convention_document', {'id': convention.projet.idtoken, 'conventionid': convention.idtoken})}}" class="btn mb-0 bg-success-subtle rounded-circle round-30 btn-sm d-inline-flex align-items-center justify-content-center">
                      <iconify-icon icon="solar:pen-new-square-linear" class="fs-5"></iconify-icon>
                    </a>
                  {% endif %}
                  {% if permissionAccess.can('SUPPRIMER_CONVENTION') %}
                    <button type="button" data-id="{{convention.idtoken}}" data-type="document" class="delete btn mb-0 bg-danger-subtle rounded-circle round-30 btn-sm d-inline-flex align-items-center justify-content-center">
                      <iconify-icon icon="solar:trash-bin-trash-broken" class="fs-5"></iconify-icon>
                    </button>
                  {% endif %}
                {% elseif convention.document.statut == 'En attente de signature' %}
                  <a href="{{path('projet_view_convention_signature', {'id': convention.projet.idtoken, 'conventionid': convention.idtoken})}}" class="btn mb-0 bg-info-subtle rounded-circle round-30 btn-sm d-inline-flex align-items-center justify-content-center">
                    <iconify-icon icon="solar:document-add-broken" class="fs-5"></iconify-icon>
                  </a>
                {% else %}
                  <a href="{{path('projet_view_convention_document', {'id': convention.projet.idtoken, 'conventionid': convention.idtoken})}}" class="btn mb-0 bg-success-subtle rounded-circle round-30 btn-sm d-inline-flex align-items-center justify-content-center">
                    <iconify-icon icon="solar:eye-broken" class="fs-5"></iconify-icon>
                  </a>
                {% endif %}
              </div>
            </div>
          </div>
        {% else %}
          <div class="alert alert-warning text-warning mb-0" role="alert">
            <i class="ti ti-info-circle fs-4 me-2"></i> Aucune convention n'a pas été créée
          </div>
        {% endif %}
      </div>
    </div>

    <div class="card border mt-4">
      <div class="card-header d-flex align-items-center justify-content-between py-3">
        <h5 class="mb-0 d-flex align-items-center text-uppercase">
          <iconify-icon icon="solar:wallet-money-linear" class="me-2 text-muted"></iconify-icon>
          Apports & paiements
        </h5>
        <div>
          {% if convention.recu is null and permissionAccess.can('CREER_APPORT') %}
            <a href="{{ path('convention_ajax_add_apport', { id: convention.idtoken, frame: frame_prefix }) }}"
               class="btn btn-rounded btn-success btn-sm"
               data-turbo-frame="modal-frame">
              <i class="ti ti-plus fs-4 me-2"></i>
              Ajouter un apport
            </a>
          {% endif %}
        </div>
      </div>
      <div class="card-body">
        <div class="bg-light-subtle rounded-3 p-3">
          <turbo-frame id="{{ frame_prefix }}-apports-table" src="{{ path('projet_view_convention_table_apports', { id: convention.projet.idtoken, conventionId: convention.idtoken, frame: frame_prefix ~ '-apports-table' }) }}" loading="lazy" data-prefetch-frame>
            Chargement des apports...
          </turbo-frame>
        </div>
      </div>
    </div>

    <div class="card border mt-4">
      <div class="card-header d-flex align-items-center justify-content-between py-3">
        <h5 class="mb-0 d-flex align-items-center text-uppercase">
          <iconify-icon icon="solar:bill-list-linear" class="me-2 text-muted"></iconify-icon>
          Factures
        </h5>
        <div>
          <turbo-frame id="facture-action-frame" src="{{ path('convention_ajax_facture_action', { id: convention.idtoken }) }}">
            {% if permissionAccess.can('CREER_FACTURE') %}
              <a href="{{ path('convention_ajax_add_facture', { id: convention.idtoken }) }}"
                 class="btn btn-rounded btn-success btn-sm"
                 data-turbo-frame="modal-frame"
                 {% if convention.apports | length > 0 %} style="display:block;"{% else %}style="display:none;"{% endif %}>
                <i class="ti ti-plus fs-4 me-2"></i>
                Ajouter une facture
              </a>
            {% endif %}
          </turbo-frame>
        </div>
      </div>
      <div class="card-body">
        <div class="table-responsive mb-0 border rounded-3">
          <table class="table text-nowrap mb-0 align-middle">
            <thead class="text-dark fs-4">
              <tr>
                <th><h6 class="fs-4 fw-semibold mb-0">Document</h6></th>
                <th><h6 class="fs-4 fw-semibold mb-0">Apport</h6></th>
                <th><h6 class="fs-4 fw-semibold mb-0">Statut</h6></th>
                <th><h6 class="fs-4 fw-semibold mb-0">Montant HT</h6></th>
                <th><h6 class="fs-4 fw-semibold mb-0">Montant TTC</h6></th>
                <th></th>
              </tr>
            </thead>
            <tbody>
              {% for facture in factures %}
                {% if facture.statut == 'Temporaire' %}
                  {% set bg = 'primary' %}
                {% else %}
                  {% set bg = 'success' %}
                {% endif %}
                <tr>
                  <td>{{ facture.displayId }}</td>
                  <td>
                    Apport de {{ facture.apport.montant }} €<br/>
                    <small>du {{ facture.apport.createdAt | date('d/m/Y') }}</small>
                  </td>
                  <td><span class="badge bg-{{ bg }}-subtle text-{{ bg }}">{{ facture.statut }}</span></td>
                  <td>{{ facture.totalHT }} €</td>
                  <td>{{ facture.totalTTC }} €</td>
                  <td>
                    {% if facture.statut == 'Temporaire' and permissionAccess.can('SUPPRIMER_FACTURE') %}
                      <button type="button" data-id="{{ facture.idtoken }}" data-type="factureprojet" class="delete btn mb-1 bg-danger-subtle rounded-circle round-30 btn-sm d-inline-flex align-items-center justify-content-center">
                        <iconify-icon icon="solar:trash-bin-trash-broken" class="fs-5"></iconify-icon>
                      </button>
                    {% else %}
                      <a href="{{ path('projet_facture_view_pdf', { id: facture.idtoken }) }}" target="_blank" class="btn mb-1 bg-success-subtle rounded-circle round-30 btn-sm d-inline-flex align-items-center justify-content-center">
                        <iconify-icon icon="solar:eye-broken" class="fs-5"></iconify-icon>
                      </a>
                    {% endif %}
                  </td>
                </tr>
              {% else %}
                <tr>
                  <td colspan="6" class="text-center text-muted py-4">Aucune facture disponible.</td>
                </tr>
              {% endfor %}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>