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

{% block styles %}
  {{ parent() }}
  <style>
    .prospection-summary .summary-item + .summary-item {
      border-left: 1px solid rgba(0, 0, 0, 0.1);
    }
    .kanban-board {
      display: grid;
      grid-auto-flow: column;
      grid-auto-columns: minmax(300px, 1fr);
      gap: 16px;
      overflow-x: auto;
      padding-bottom: 8px;
    }
    .kanban-column {
      min-height: 240px;
    }
    .kanban-card {
      background-color: #fff;
    }
  </style>
{% endblock %}

{% block script %}
  {{ parent() }}
  <script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"></script>
{% endblock %}

{% block content %}

      <div class="body-wrapper">
        <div class="container-fluid">

         <div class="card card-body py-3">
            <div class="row align-items-center">
              <div class="col-12">
                <h5>Prospection</h5>
                <div class="d-sm-flex align-items-center justify-space-between">
                  
                  <a href="{{path('app_index')}}" class="p-2"><iconify-icon icon="solar:home-2-broken" class="fs-6"></iconify-icon> </a> >
                  <a href="{{path('projet_index')}}" class="p-2">Projets </a> >
                  <a href="{{path('projet_view', {'id': projet.idtoken})}}" class="p-2">{{projet.titre}} </a> >
                  <a href="{{path('projet_view_prospection', {'id': projet.idtoken})}}" class="p-2">Prospection </a>
                  
                </div>
              </div>
            </div>
          </div>

          <div class="card mb-4">
            <div class="card-body prospection-summary">
              <div class="row">
                <div class="col-md-4 summary-item">
                  <div class="d-flex align-items-center">
                    <iconify-icon icon="solar:clipboard-broken" class="fs-7 text-muted"></iconify-icon>
                    <div class="ms-3">
                      <h6 class="fs-4 fw-semibold mb-0">Propositions créées</h6>
                    </div>
                  </div>
                  <h4 class="mb-0 mt-1 text-nowrap fs-5 fw-bolder">
                    <span id="prospection-summary-propositions">{{ propositionCount }}</span>
                  </h4>
                </div>

                <div class="col-md-4 summary-item">
                  <div class="d-flex align-items-center">
                    <iconify-icon icon="solar:hand-money-broken" class="fs-7 text-muted"></iconify-icon>
                    <div class="ms-3">
                      <h6 class="fs-4 fw-semibold mb-0">Valeur acceptée</h6>
                    </div>
                  </div>
                  <h4 class="mb-0 mt-1 text-nowrap fs-5 fw-bolder">
                    <span id="prospection-summary-accepted">{{ acceptedPropositionValue|separate_thousands }}</span> €
                  </h4>
                </div>

                <div class="col-md-4 summary-item">
                  <div class="d-flex align-items-center">
                    <iconify-icon icon="solar:hourglass-line-broken" class="fs-7 text-muted"></iconify-icon>
                    <div class="ms-3">
                      <h6 class="fs-4 fw-semibold mb-0">En attente de proposition</h6>
                    </div>
                  </div>
                  <h4 class="mb-0 mt-1 text-nowrap fs-5 fw-bolder">
                    <span id="prospection-summary-waiting">{{ waitingProspections }}</span>
                  </h4>
                </div>
              </div>
            </div>
          </div>

          <div class="card">
            <ul class="nav nav-pills user-profile-tab" id="prospection-tab" role="tablist">
              <li class="nav-item" role="presentation">
                <button class="nav-link position-relative rounded-0 d-flex align-items-center justify-content-center bg-transparent fs-3 py-3 active" id="pills-prospection-table-tab" data-bs-toggle="pill" data-bs-target="#pills-prospection-table" type="button" role="tab" aria-controls="pills-prospection-table" aria-selected="true">
                  <i class="ti ti-layout-rows me-2 fs-6"></i>
                  <span class="d-none d-md-block">Tableau</span>
                </button>
              </li>
              <li class="nav-item" role="presentation">
                <button class="nav-link position-relative rounded-0 d-flex align-items-center justify-content-center bg-transparent fs-3 py-3" id="pills-prospection-kanban-tab" data-bs-toggle="pill" data-bs-target="#pills-prospection-kanban" type="button" role="tab" aria-controls="pills-prospection-kanban" aria-selected="false" tabindex="-1">
                  <i class="ti ti-columns-2 me-2 fs-6"></i>
                  <span class="d-none d-md-block">Kanban</span>
                </button>
              </li>
            </ul>
            <div class="card-body">
              <div class="tab-content" id="prospection-tabContent">
                <div class="tab-pane fade show active" id="pills-prospection-table" role="tabpanel" aria-labelledby="pills-prospection-table-tab" tabindex="0">
                  <div class="datatables">
                    <div class="card">
                      <div class="card-body">

                        <div class="text-end">
                            <a href="{{path('projet_view_prospection_marketplace', {id: projet.idtoken})}}" class="btn btn-secondary">
                                Accès la marketplace de partenaires
                            </a>

                            <a
                              class="btn btn-light"
                              href="{{ path('projet_ajax_add_proposition', { id: projet.idtoken, meceneId: '0' }) }}"
                              data-turbo-frame="modal-frame"
                            >
                                Ajouter une proposition
                            </a>
                        </div>

                        <turbo-frame id="prospection-table" src="{{ path('projet_prospection_table', { id: projet.idtoken }) }}" loading="lazy" data-prefetch-frame>
                          Chargement des propositions...
                        </turbo-frame>
                      </div>
                    </div>
                  </div>
                </div>

                <div class="tab-pane fade" id="pills-prospection-kanban" role="tabpanel" aria-labelledby="pills-prospection-kanban-tab" tabindex="0">
                  <turbo-frame id="prospection-kanban" src="{{ path('projet_prospection_kanban', { id: projet.idtoken }) }}" loading="lazy" data-prefetch-frame>
                    Chargement du kanban...
                  </turbo-frame>
                </div>
              </div>
            </div>
          </div>

        </div>
      </div>

{% endblock  %}