{% 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="d-sm-flex align-items-center justify-space-between mt-4">
      <h5>Formule</h5>
      <div class="ms-auto">
         {% if convention.document is null or convention.document.statut == 'Créée'  %}
          <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 mb-2"
             data-turbo-frame="modal-frame">
            <i class="ti ti-wand fs-4 me-2"></i>
            Personnaliser cette formule
          </a>
        {% endif %}
      </div>
    </div>

    <div class="row justify-content-center">
      <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>

    <div class="d-sm-flex align-items-center justify-space-between mt-4">
      <h5>Convention</h5>
      <div class="ms-auto">
        {% if convention.document is null %}
          <a href="{{ path('projet_view_convention_turbo_edit', { id: convention.projet.idtoken, conventionId: convention.idtoken }) }}"
             class="btn btn-rounded btn-outline-primary btn-sm mb-2"
             data-turbo-frame="modal-frame">
            <i class="ti ti-edit fs-4 me-2"></i>
            Éditer une convention
          </a>
        {% endif %}
      </div>
    </div>

    {% if convention.document is not null %}
        <div class="table-responsive mb-4 border rounded-1">

            <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">Statut</h6>
                        </th>
                        <th>
                            <h6 class="fs-4 fw-semibold mb-0">Crée le</h6>
                        </th>
                        <th>
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>
                            {{convention.document.nom}}
                        </td>
                        <td>
                            <span class="badge bg-primary-subtle text-primary">{{convention.document.statut}}</span>
                        </td>
                        <td>
                            {{convention.document.createdAt | date('d/m/Y H:i')}}
                        </td>
                          <td class="text-end">
                            {% if convention.document.statut == 'Créée' or convention.document.statut == 'Éditée' %}
                              <a href="{{path('projet_view_convention_document', {'id': convention.projet.idtoken, 'conventionid': convention.idtoken})}}" 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:pen-new-square-linear" class="fs-5"></iconify-icon>
                              </a>
                              <button type="button" data-id="{{convention.idtoken}}" data-type="document" 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>
                            {% 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-1 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-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>
                </tbody>
            </table>

        </div>
    {% else %}
        <div class="alert alert-warning text-warning" role="alert">
            <i class="ti ti-info-circle fs-4 me-2"></i> Aucune convention n'a pas été créée
        </div>
    {% endif %}

    <div class="d-sm-flex align-items-center justify-space-between mt-4">
      <h5>Apports</h5>
      <div class="ms-auto">
      {% if convention.recu is  null %}
        <a href="{{ path('convention_ajax_add_apport', { id: convention.idtoken, frame: frame_prefix }) }}"
           class="btn btn-rounded btn-outline-primary btn-sm mb-2"
           data-turbo-frame="modal-frame">
          <i class="ti ti-coins fs-4 me-2"></i>
          Ajouter un apport
        </a>
      {% endif %}
      </div>
    </div>

    <div class="row justify-content-center">
      <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 class="d-sm-flex align-items-center justify-space-between mt-4">
      <h5>Factures</h5>
      
      <div class="ms-auto">
          <a href="{{ path('convention_ajax_add_facture', { id: convention.idtoken }) }}"
             class="btn btn-rounded btn-outline-primary btn-sm mb-2"
             {% if convention.apports | length > 0 %} style="display:block;"{% else %}style="display:none;"{% endif %}
             data-turbo-frame="modal-frame">
            <i class="ti ti-edit fs-4 me-2"></i>
              Ajouter une facture
          </a>
      </div>
    </div>

    <div class="table-responsive mb-4 border rounded-1">
        <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' %}
                        <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>
              {% endfor %}
            </tbody>
        </table>
    </div>

  </div>

</div>