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

{% block content %}
      <div class="body-wrapper" id="page-projet-root"
           data-import-pending="{{ projet.import ? '0' : '1' }}"
           data-projet-id="{{ projet.idtoken }}"
           data-controller="projet-partner"
           data-projet-partner-projet-id-value="{{ projet.idtoken }}"
           data-projet-partner-select-type-url-value="{{ path('projet_ajax_select_type', { id: 'ID_PLACEHOLDER' }) }}">
        <div class="container-fluid">
          <div class="row">

            <div class="col-lg-8">
              <div class="card">
                <div class="card-body">

                  <div class="row">
                    <div class="col-6">
                      <h5 class="fs-8 mb-0 text-nowrap">{{projet.titre}}</h5>
                    </div>
                    <div class="col-2 border-start border-light">
                      <span>Date de début</span>
                      <h4 class="mb-0 text-black mt-1 text-nowrap fs-5 fw-bolder">{{projet.startDate|date('d/m/Y')}}</h4>
                    </div>
                    <div class="col-2 border-start border-light">
                      <span>Date de fin</span>
                      <h4 class="mb-0 text-black mt-1 text-nowrap fs-5 fw-bolder">{{projet.deadline|date('d/m/Y')}}</h4>
                    </div>
                    <div class="col-2 border-start border-light">
                      <span>Créé par</span>
                      <h4 class="mb-0 mt-1 text-nowrap fs-5 fw-bolder">{{projet.createdBy.prenom}} {{projet.createdBy.nom}}</h4>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div class="col-lg-4">
              <div class="card">
                <div class="card-body">

                  <div class="row">
                    <div class="col-8">
                      <span>Responsable du projet</span>
                      <h4 class="mb-0 text-black mt-1 text-nowrap fs-5 fw-bolder">{{projet.responsable.prenom}} {{projet.responsable.nom}}</h4>
                    </div>
                    <div class="col-4 border-start border-light text-center">
                      {% if projet.responsable.image is null %}
                          {% set initials = projet.responsable.prenom|slice(0, 1)|upper ~ projet.responsable.nom|slice(0, 1)|upper %}
                          <a href="javascript:void(0);" class="text-bg-primary text-white fs-6 round-40 rounded-circle me-n2 card-hover border border-2 border-white d-flex align-items-center justify-content-center">
                            {{initials}}
                          </a>
                      {% else %}
                          <img src="{{asset('uploads/profiles/user/' ~ projet.responsable.image )}}" alt="matdash-img" class="img-fluid rounded-circle" width="50" height="50" id="imgProfilApp">
                      {% endif %}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="d-flex flex-wrap align-items-start justify-content-between gap-2 mb-4">
            <div>
              <h2 class="mb-1 fw-bold">Tableau de bord</h2>
              <p class="text-muted mb-0">Gérez votre projet avec des indicateurs, des alertes et des raccourcis d’action</p>
            </div>
            <div class="d-flex gap-2">
              <button id="btnGroupDrop1" type="button" class="btn btn-rounded btn-outline-primary" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <i class="ti ti-playstation-circle fs-4 me-2"></i>
                Actions
              </button>
              <div class="dropdown-menu" aria-labelledby="btnGroupDrop1" style="">
                <a class="dropdown-item" href="{{ path('projet_update_view', { id: projet.idtoken }) }}" data-turbo-frame="modal-frame">
                  <i class="ti ti-edit fs-4 me-2"></i>Modifier le projet
                </a>
                <a class="dropdown-item" href="{{path('projet_view_presentation', {id: projet.idtoken})}}"><i class="ti ti-edit fs-4 me-2"></i>Présentation du projet</a>
                <a class="dropdown-item" href="{{ path('projet_view_outils', { id: projet.idtoken }) }}">
                  <i class="ti ti-tool fs-4 me-2"></i>Outils du projet
                </a>
                {% if projet.statut == 'Clôturé' %}
                  <a class="dropdown-item" href="{{ path('projet_confirm_open', { id: projet.idtoken }) }}" data-turbo-frame="modal-frame">
                    <i class="ti ti-refresh fs-4 me-2"></i>Ré-ouvrir le projet
                  </a>
                {% else %}
                  <a class="dropdown-item" href="{{ path('projet_confirm_close', { id: projet.idtoken }) }}" data-turbo-frame="modal-frame">
                    <i class="ti ti-circle-x fs-4 me-2"></i>Clôturer le projet
                  </a>
                {% endif %}
                <a class="dropdown-item" href="{{ path('projet_confirm_archive', { id: projet.idtoken }) }}" data-turbo-frame="modal-frame">
                  <i class="ti ti-archive fs-4 me-2"></i>Archiver le projet
                </a>
                <a class="dropdown-item" href="{{ path('projet_confirm_delete', { id: projet.idtoken }) }}" data-turbo-frame="modal-frame">
                  <i class="ti ti-trash fs-4 me-2"></i>Supprimer le projet
                </a>
              </div>
            </div>
          </div>

          {% if has_contrepartie | length == 0 %}
            <div class="alert alert-warning text-center text-warning">
                Avant d'ajouter un partenaires, il est indispensable de créer <strong>les contreparties du projet</strong>
                  <div class="text-center mt-6">
                    <a class="btn btn-rounded btn-outline-warning" href="{{ path('projet_view_contreparties', {'id' : projet.idtoken}) }}">Cliquez-ici</a>
                  </div>
            </div>
          {% elseif has_formule | length == 0 %}
            <div class="alert alert-warning text-center text-warning">
                Avant d'ajouter un partenaires, il est indispensable de créer <strong>les formules de partenariat du projet</strong>
                  <div class="text-center mt-6">
                    <a class="btn btn-rounded btn-outline-warning" href="{{ path('projet_view_formules', {'id' : projet.idtoken}) }}">Cliquez-ici</a>
                  </div>
            </div>
          {% endif %}

          <div class="card card-body py-0">
            <div class="row align-items-center">

              <div class="col-12">
                <ul class="nav nav-pills user-profile-tab" id="pills-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-convention-tab" data-bs-toggle="pill" data-bs-target="#pills-convention" type="button" role="tab" aria-controls="pills-convention" aria-selected="true">
                      <iconify-icon icon="material-symbols-light:view-in-ar-outline-rounded" class="fs-7 me-2"></iconify-icon>
                      <span class="d-none d-md-block">Vue d'ensemble</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-info-tab" data-bs-toggle="pill" data-bs-target="#pills-info" type="button" role="tab" aria-controls="pills-info" aria-selected="false" tabindex="-1">
                      <iconify-icon icon="material-symbols-light:contract-edit-outline" class="fs-7 me-2"></iconify-icon>
                      <span class="d-none d-md-block">Conventions</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-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false" tabindex="-1">
                      <iconify-icon icon="iconamoon:discount-thin" class="fs-7 me-2"></iconify-icon>
                      <span class="d-none d-md-block">Reçus fiscaux</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-formule-tab" data-bs-toggle="pill" data-bs-target="#pills-formule" type="button" role="tab" aria-controls="pills-formule" aria-selected="false" tabindex="-1">
                      <iconify-icon icon="stash:invoice-light" class="fs-7 me-2"></iconify-icon>
                      <span class="d-none d-md-block">Factures</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-activites-tab" data-bs-toggle="pill" data-bs-target="#pills-activites" type="button" role="tab" aria-controls="pills-activites" aria-selected="false" tabindex="-1">
                      <iconify-icon icon="solar:checklist-minimalistic-broken" class="fs-7 me-2"></iconify-icon>
                      <span class="d-none d-md-block">Activités</span>
                    </button>
                  </li>
                </ul>
              </div>
            </div>
          </div>

          <div class="card-body">
            <div class="tab-content" id="pills-tabContent">

              <div class="tab-pane fade active show" id="pills-convention" role="tabpanel" aria-labelledby="pills-convention-tab" tabindex="0">
                {% include '@Projet/projet/part/tab_vue_ensemble.html.twig' %}
              </div>


              <div class="tab-pane fade" id="pills-info" role="tabpanel" aria-labelledby="pills-info-tab" tabindex="0">
                {% include '@Projet/projet/part/tab_conventions.html.twig' %}
              </div>

              <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab" tabindex="0">
                {% include '@Projet/projet/part/tab_recus_fiscaux.html.twig' %}
              </div>

              <div class="tab-pane fade" id="pills-formule" role="tabpanel" aria-labelledby="pills-formule-tab" tabindex="0">
                {% include '@Projet/projet/part/tab_factures.html.twig' %}
              </div>

              <div class="tab-pane fade" id="pills-activites" role="tabpanel" aria-labelledby="pills-activites-tab" tabindex="0">
                <div class="card">
                  <div class="card-body">
                    <turbo-frame id="activites_projet_{{ projet.idtoken }}" src="{{ path('projet_activites_list', { id: projet.idtoken }) }}" loading="lazy" data-prefetch-frame>
                      Chargement des activités...
                    </turbo-frame>
                  </div>
                </div>
              </div>

            </div>
          </div>

          
        </div>
      </div>

<script>
      const ajaxTodolistRoute = "{{ path('todolist_load') }}";
      const tacheUpdateRoute = "{{ path('todolist_update', { 'id': 'ID_PLACEHOLDER' }) }}";
      
        function connectSociete() {
            let selectedSocieteId = document.getElementById('societeConnect').value;
            let form = document.getElementById('societeConnectForm');
            form.action = form.action.replace('0', selectedSocieteId);
            form.submit();
        }

const projetId = '{{projet.idtoken}}';

</script>
<script src="{{ asset('assets/libs/apexcharts/dist/apexcharts.min.js') }}"></script>

{% endblock %}