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

{% block content %}
<style>
    .modal{--bs-modal-zindex:1075;}
    .modal-backdrop{--bs-backdrop-zindex:1070;}
</style>


{% if showSelectModal %}
  <div class="modal" id="projetConnectModal" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false" role="dialog" aria-labelledby="projetConnectModalLabel" aria-hidden="true" data-controller="portail-select-modal">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="projetConnectModalLabel">Sélectionnez un espace partenaire</h5>
                </div>
                <div class="modal-body">
                    <form method="post" action="{{ path('portail_connect_projet', {'id': 0}) }}" id="societeConnectForm">
                        <div class="form-group">
                            <select class="form-control" id="societeConnect" name="societeConnect">
                                {% for espace in espaces %}
                                    <option value="{{ espace.idtoken }}">{{ espace.societe.nom }} / {{ espace.nom }}</option>
                                {% endfor %}
                            </select>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-action="portail-select-modal#submit">Se connecter</button>
                </div>
            </div>
        </div>
    </div>

{% else %}
  <div class="body-wrapper">
    <div class="container-fluid">

      <div class="row">

            <div class="col-lg-8">
              <div class="card">
                <div class="card-body">
                  <div class="d-flex align-items-center justify-content-between">
                    <h4>Espace Partenaires</h4>
                    {% if app.user and app.user.userType == 'staff' and espace is defined and app.user.societe is defined and espace.societe in app.user.societe %}
                      <a class="btn btn-sm btn-outline-primary" href="{{ path('portail_configuration_modal') }}" data-turbo-frame="modal-frame">
                        Configurer le portail
                      </a>
                    {% endif %}
                  </div>

                  {% if module_enabled('mur') %}
                    <!-- -------------------------------------------- -->
                    <!-- MUR D'ACTUALITÉS -->
                    <!-- -------------------------------------------- -->
                      <div class="mt-3r">
                        <h5>Mur d'actualités</h5>
                        <turbo-frame id="feed-composer">
                          <form
                            method="post"
                            action="{{ path('post_create_espace', { mur: espace.wall.id }) }}"
                            enctype="multipart/form-data"
                            data-turbo-stream="true"
                            data-controller="wall-composer"
                            data-action="turbo:submit-start->wall-composer#submitStart turbo:submit-end->wall-composer#submitted"
                          >
                            <input type="hidden" name="_token" value="{{ csrf_token('post_create_' ~ espace.wall.id) }}">
                            <input type="hidden" name="type" value="STATUS">

                            <div class="form-floating mb-3">
                              <textarea class="form-control h-140" placeholder="Exprimez-vous…" id="composerContent" name="content" data-wall-composer-target="content" data-action="input->wall-composer#toggleSubmit"></textarea>
                              <label for="composerContent">Partagez votre pensée</label>
                            </div>

                            <div class="d-flex align-items-center gap-3 flex-wrap">
                              <input
                                type="file"
                                name="media[]"
                                class="d-none"
                                accept="image/*"
                                multiple
                                data-wall-composer-target="fileInput"
                                data-action="change->wall-composer#preview"
                              >

                              <button
                                type="button"
                                class="d-flex align-items-center round-32 justify-content-center btn btn-primary rounded-circle"
                                title="Ajouter des photos"
                                data-action="wall-composer#pickPhotos"
                              >
                                <i class="ti ti-photo"></i>
                              </button>
                              <span class="text-dark link-primary pe-3 py-2">Photo(s)</span>

                              <button type="submit" class="btn btn-primary ms-auto" data-wall-composer-target="submit">Publier</button>
                            </div>

                            <div class="mt-3 js-composer-preview d-none" data-wall-composer-target="preview"></div>
                            <div class="form-text text-muted mt-1">Jusqu’à 10 photos, 5 Mo max chacune.</div>
                          </form>
                        </turbo-frame>

                      </div>
                  {% endif %}

                  
                    <!-- -------------------------------------------- -->
                    <!-- ANNONCES -->
                    <!-- -------------------------------------------- -->
                    <div class="mt-3r">
                    {% if module_enabled('annonce') %}
                      <h5>Annonces</h5>

                      <div class="row align-items-stretch">

                        {% set colors = {
                            "Offre d'emploi": 'success',
                            "Offre de stage": 'warning',
                            "Invitation": 'danger',
                            "Recherche": 'info',
                            "Offre d'alternance": 'light'
                        } %}

                        {% for annonce in annonces %}
                          <div class="col-lg-6">
                            <div class="card border" style="min-height: 230px;">
                                <div class="card-body p-4">
                                <span class="badge text-bg-{{ colors[annonce.type]|default('secondary') }} fs-2 py-1 px-2 lh-sm">{{annonce.type}}</span>
                                <a class="d-block mt-3 fs-5 text-dark fw-semibold link-primary" href="">{{annonce.titre}}</a>
                                {{annonce.texte | slice (0, 100) | raw}}...
                                <div class="d-flex align-items-center gap-4 mt-4">
                                    <div class="d-flex align-items-center gap-2">

                                    {% if annonce.createdBy.mecene is not null %}
                                        <img src="{{asset('uploads/mecenes/logos/' ~ annonce.createdBy.mecene.logo )}}" alt="matdash-img" class="img-fluid" width="40" height="40" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="{{annonce.createdBy.mecene.nom}}">
                                    {% else %}
                                        <img src="{{asset('uploads/societes/logos/' ~ annonce.espace.societe.logo )}}" alt="matdash-img" class="img-fluid" width="40" height="40" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="{{annonce.espace.societe.nom}}">
                                    {% endif %}
                                    </div>
                                    
                                    <div class="d-flex align-items-center fs-2 ms-auto">
                                      <a class="btn btn-outline-primary ms-auto small btn-sm" href="{{ path('portail_annonce_detail', { id: annonce.idtoken }) }}" data-turbo-frame="offcanvas-frame">Plus d'infos</a>
                                    </div>
                                </div>
                                </div>
                            </div>
                          </div>
                        {% endfor %}
                        
                      </div>
                      <div class="text-end">
                        <a href="{{path('portail_annonce_index')}}" class="btn btn-light ms-auto">Plus d'annonces</a>
                      </div>
                    {% endif %}

                    {% if globalVariable.parametresEspace['display_galerie'] is defined and globalVariable.parametresEspace['display_galerie'].valeur == '1' %}
                      <h5>Galeries photos</h5>
                      Les dernières photos
                      <div class="row">

                        {% for galerie in galeries %}
                          <div class="row el-element-overlay col-4" id="list-img" >
                            <div class="">
                              <div class="card overflow-hidden">
                                <div class="el-card-item ">
                                  <a href="{{path('portail_galerie_view', {id: galerie.idtoken})}}">
                                    <div class="el-card-avatar el-overlay-1 w-100 overflow-hidden position-relative text-center" style="height:150px !important;">
                                      {% if galerie.photo is not null %}
                                        <img src="{{ asset(galerie.societe.dossier ~ '/galeries/' ~ galerie.slug ~ '/' ~ galerie.photo.photo) }}" class="img-galerie d-block position-relative w-100" alt="user">
                                      {% endif %}
                                      <div class="el-overlay w-100 overflow-hidden" style="opacity:0.5;">
                                        
                                        <ul class="list-style-none el-info text-white text-uppercase d-inline-block p-0">

                                        </div>
                                        <div class="w-100 overflow-hidden" style="opacity:1;">
                                          
                                        <ul class="list-style-none el-info text-white text-uppercase d-inline-block p-0">
                                        <!-- Date en haut à gauche -->
                                          <span class="galerie-date">
                                            {{ galerie.date|date_fr }}
                                          </span>
                                          <br/>
                                          <!-- Nom centré -->
                                          <span class="galerie-nom w-100" style="top:50px !important; font-size: 20px;">
                                              {{ galerie.nom }}
                                          </span>
                                        </ul>
                                      </div>
                                    </div>
                                  </a>
                                </div>
                              </div>
                            </div>
                          </div>
                        {% endfor %}

                     
                      </div>
                     {% endif %}

                      {% if not module_enabled('mur') and module_enabled('annuaire') %}
                        
                            <h5>Annuaire des partenaires</h5>
                            Les 5 derniers partenaires
                            
                            <div class="row">
                              {% for mecene in last5mecenes %}
                                <div class="col-5">
                                  {% include '@App/partials/components/badge_partenaire_custom.html.twig' with {mecene: mecene, taille: 75, police: 5} %}
                                  <div class="d-flex align-items-center mt-4">
                                    <img src="{{ asset('uploads/mecenes/logos/' ~ mecene.logo) }}" style="height:auto; max-width:50px;">
                                    <div class="ms-3">
                                      <h6 class="fs-4 fw-semibold mb-0">{{mecene.nom}}</h6>
                                      <span class="fw-normal">{{mecene.secteur.nom}}</span>
                                    </div>
                                  </div>
                                </div>
                              {% endfor %}
                            </div>

                            <div class="text-end">
                              <a href="{{path('portail_annuaire')}}" class="btn btn-light ms-auto">Plus de partenaires</a>
                            </div>


                      {% endif %}
                  </div>
                </div>
              </div>
            </div>
            <div class="col-lg-4">

              <div class="card">
                <div class="card-body pb-4">
                  
                  <a class="nav-link position-relative" href="javascript:void(0)" id="espaceDropdown" data-bs-toggle="dropdown" aria-expanded="false">
                      {% if globalVariable.espace is not null and globalVariable.espace.societe.logo is not null %}
                          <img src="{{asset('uploads/societes/logos/' ~ globalVariable.espace.societe.logo)}}" {% if not is_mobile %}class="me-2" height="35"{% else %}class="me-2" height="35"{% endif %} alt="capsule-img" id="logoSocieteApp"/>

                    {% endif %}
                    {% if globalVariable.espace is not null and not is_mobile %} <span class="text-black fs-5 fw-semibold">{{globalVariable.espace.nom}}<span> {% endif %}
                    </a>

                    <div class="dropdown-menu content-dd dropdown-menu-end dropdown-menu-animate-up p-2" aria-labelledby="espaceDropdown">
                      <h6 class="p-2">Changer de portail partenaire</h6>
                      {% for espace in globalVariable.espaces %} 
                        <a href="{{path('admin_connect_espace',{'id': espace.idtoken})}}" class="nav-link position-relative" type="button">
                          <div class="d-flex align-items-center">
                            {% if espace.societe.logo is not null %}
                              <img src="{{asset('uploads/societes/logos/' ~ espace.societe.logo)}}" class="rounded-circle me-2" width="35" height="35" id="logoSocieteApp"/>
                            {% endif %}
                            <div class="ms-3">
                              <h6 class="fs-3 {% if espace.id == globalVariable.espace.id %}fw-semibold {% else %}fw-normal {% endif %}mb-0">{{espace.nom}}</h6>
                            </div>
                          </div>
                        </a>
                      {% endfor %}
                    </div>

                </div>
              </div>

              

              {% if partenaireMois %}
                <div class="card bg-primary">
                  <div class="card-body pb-4">
                    <h4 class="text-white">Le partenaire du mois</h4>

                      <div class="d-flex align-items-center mt-4">
                        <div style="width:80px; height:80px; background-color:white; border-radius:50%" class="d-flex align-items-center  justify-content-center mt-4">
                          <img src="{{ asset('uploads/mecenes/logos/' ~ partenaireMois.mecene.logo) }}" style="height:auto; max-width:50px;">
                        </div>
                        <div class="ms-3">
                          <h6 class="fs-5 fw-semibold mb-0 text-white">{{partenaireMois.mecene.nom}}</h6>
                          <span class="fw-normal">{{partenaireMois.mecene.secteur.nom}}</span>
                        </div>
                      </div>

                      <div class="text-white mt-4">
                        {{partenaireMois.description | raw}}
                      </div>

                      <div class="mt-4 text-end">
                        <a
                          class="btn btn-outline-light ms-auto small btn-sm"
                          href="{{ path('portail_annuaire_fiche', { id: partenaireMois.mecene.idtoken }) }}"
                          data-turbo-frame="offcanvas-frame"
                          data-controller="portail-partenaire"
                          data-portail-partenaire-track-url-value="{{ path('portail_partenance_add_clic', { id: partenaireMois.idtoken }) }}"
                          data-action="click->portail-partenaire#track"
                        >
                          Plus d'infos
                        </a>
                      </div>
                  </div>
                </div>
              {% endif %}

              {% if module_enabled('mur') %}
                <div class="card">
                  <div class="card-body pb-4">
                    <h5>Annuaire des partenaires</h5>
                    Les 5 derniers partenaires

                    {% for mecene in last5mecenes %}
                      {% include '@App/partials/components/badge_partenaire_custom.html.twig' with {mecene: mecene, taille: 75, police: 4, mt: 3} %}
                    {% endfor %}

                    <div class="text-end">
                      <a href="{{path('portail_annuaire')}}" class="btn btn-light ms-auto">Plus de partenaires</a>
                    </div>

                  </div>
                </div>
              {% endif %}
              
            </div>
             {% if module_enabled('offre') %}
              <div class="col-lg-12">
                <!-- -------------------------------------------- -->
                <!-- Your Performance -->
                <!-- -------------------------------------------- -->
                <div class="card">
                  <div class="card-body">
                    <h5>Les offres des partenaires</h5>
                    
                    <turbo-frame id="home-offres" class="row" src="{{ path('portail_home_ajax_offre') }}">
                      Chargement des offres...
                    </turbo-frame>

                    <div class="text-end">
                        <a href="{{path('portail_offre_index')}}" class="btn btn-light ms-auto">Plus d'offres</a>
                      </div>

                  </div>
                </div>
              </div>
             {% endif %}

            
            
          </div>
        </div>
    
        <div class="offcanvas offcanvas-40 offcanvas-end" tabindex="-1" id="homeOffcanvas" data-controller="turbo-offcanvas">
          <turbo-frame id="offcanvas-frame" data-action="turbo:frame-load->turbo-offcanvas#frameLoaded">
          </turbo-frame>
        </div>

  </div>
{% endif %}

{% if globalVariable.parametresEspace['display_galerie'] is defined and globalVariable.parametresEspace['display_galerie'].valeur == '1' %}
 <style>
.el-element-overlay .el-card-item .el-overlay-1 .el-info {
    top: 0 !important;
}

/* Étendre les colonnes à la même hauteur */
.el-element-overlay > .col-lg-3,
.el-element-overlay > .col-md-6 {
  display: flex;
  flex-direction: column;
}

/* S'assurer que la carte prend toute la hauteur */
.card.overflow-hidden {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Étendre la hauteur de .el-card-item */
.el-card-item {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Étendre la div contenant l'image */
.el-card-avatar {
  position: relative;
  /*display: flex;*/
  justify-content: center;
  align-items: center;
  height: 250px;
  overflow: hidden;
}

/* Date en haut à gauche */
.galerie-date {
  position: absolute;
  top: 20px;
  left: 12px;
  background: rgba(0,0,0,0.6);
  color: #fff;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 14px;
  text-transform: uppercase;   /* => "1 AOÛT 2025" */
  letter-spacing: .5px;
  z-index: 2;
}

.galerie-nom {
  position: absolute;
  top: 150px;
  left: 0px;
  color: #fff;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 24px;
  text-transform: uppercase;
  letter-spacing: .5px;
  z-index: 2;
}

/* Overlay + nom centré */
.el-overlay {
  position: absolute;
  inset: 0;                    /* top/right/bottom/left: 0 */
  display: flex;
  align-items: center;
  justify-content: center;
}

.el-overlay .el-info {
  text-align: center;
  color: #fff;
  font-weight: 700;
  font-size: 18px;
}

/* Uniformiser la hauteur des images + overlay */
.el-overlay {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* ou center selon le design souhaité */
}


</style>
{% endif %}

{% endblock %}