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

{% block styles %}
  {{ parent() }}
  <link rel="stylesheet" href="{{ asset('assets/css/wizard.css') }}">

  <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="d-flex flex-wrap align-items-start justify-content-between gap-2 mb-4">
            <div>
              <h2 class="mb-1 fw-bold">Prospection</h2>
              <p class="text-muted mb-0">Identifiez vos opportunités, organisez vos démarches et suivez l’avancement de votre prospection en un seul endroit</p>
            </div>

            <div class="d-flex gap-2">
              {% if projet.statut == 'Ouvert' %}
                <div class="text-end">
                     <a
                        class="btn btn-rounded btn-outline-primary"
                        href="{{ path('projet_prospection_modal_step1', { id: projet.idtoken }) }}"
                        data-turbo-frame="modal-frame"
                      >
                          Ajouter une proposition
                      </a>
                </div>
              {% endif %}
            </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 d-none">
                            <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_prospection_modal_step1', { id: projet.idtoken }) }}"
                              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  %}