{% include 'partials/header.html.twig' %}

 <script src="{{ asset('assets/libs/magnific-popup/dist/jquery.magnific-popup.min.js') }}"></script>
 <script src="{{ asset('assets/libs/magnific-popup/dist/jquery.magnific-popup.min.js') }}"></script>
  <script src="{{ asset('assets/js/plugins/magnific_popup_init.js') }}"></script>
  <link rel="stylesheet" href="{{ asset('assets/libs/magnific-popup/dist/magnific-popup.css') }}">

    <link rel="stylesheet" href="{{ asset('assets/libs/dropzone/dist/min/dropzone.min.css')}}">
    <script src="{{ asset('assets/libs/dropzone/dist/min/dropzone.min.js') }}"></script>

      <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">
                <div class="d-sm-flex align-items-center justify-space-between">
                  <h4 class="mb-4 mb-sm-0 card-title">Galerie : {{galerie.nom}}</h4>
                </div>
              </div>
            </div>
          </div>

          <div class="row">
            <div class="col-md-9 d-flex align-items-stretch">
              <div class="card col-md-12">
                
                <div class="card-body">
                  <div class="masonry-gallery" id="list-img">
                    {% for photo in photos %}
                        <div class="masonry-item" id="image{{ photo.idtoken }}">
                            <div class="card overflow-hidden">
                                <div class="el-card-item">
                                    <div class="el-card-avatar el-overlay-1 w-100 overflow-hidden position-relative text-center">

                                      
                                      {# Étoile si la galerie est marquée favorite #}
                                      <div id="star{{photo.idtoken}}" class="star position-absolute top-0 end-0 p-2" style="z-index: 25; 
                                        {% if galerie.photo is not null %}
                                          {% if photo.id != galerie.photo.id %}display: none;{% endif %}
                                        {% endif %}  
                                        ">
                                          <span class="mb-1 badge text-bg-warning"><i class="ti ti-star fs-4"></i> Favorite</span>
                                      </div>

                                        <img 
                                            src="{{ asset(photo.societe.dossier ~ '/galeries/' ~ photo.galerie.slug ~ '/' ~ photo.photo) }}" 
                                            class="d-block position-relative w-100" 
                                            alt="photo"
                                            loading="lazy"
                                        >
                                        <div class="el-overlay w-100 overflow-hidden">
                                            <ul class="list-style-none el-info text-white text-uppercase d-inline-block p-0">
                                                <li class="el-item d-inline-block my-0 mx-1">
                                                    <a class="btn default btn-outline image-popup el-link text-white border-white"
                                                      href="{{ asset(photo.societe.dossier ~ '/galeries/' ~ photo.galerie.slug ~ '/' ~ photo.photo) }}">
                                                        <i class="ti ti-search"></i>
                                                    </a>
                                                </li>
                                                <li class="el-item d-inline-block my-0 mx-1">
                                                    <a class="btn default btn-outline favorite el-link text-white border-white"
                                                      data-id="{{ photo.idtoken }}" data-galerie="{{ galerie.idtoken }}">
                                                        <i class="ti ti-star"></i>
                                                    </a>
                                                </li>
                                                <li class="el-item d-inline-block my-0 mx-1">
                                                    <a class="btn default btn-outline delete el-link text-white border-white"
                                                      data-id="{{ photo.idtoken }}" data-type="photo">
                                                        <i class="ti ti-trash"></i>
                                                    </a>
                                                </li>
                                            </ul>
                                        </div>

                                    </div>
                                </div>
                            </div>
                        </div>
                    {% endfor %}
                  </div>
                </div>
              </div>
            </div>

            <div class="col-md-3 d-flex align-items-stretch">
              <div class="card col-md-12">
                <div class="card-body">

                  <div class="comment-text w-100">
                    <div class="comment-footer mt-2">
                      <div class="d-flex align-items-center" id="titre-container">
                        <h5 id="titre-texte">{{galerie.nom}}</h5>
                        <span class="action-icons">
                          <a href="#" id="modifier-titre" class="ps-3">
                            <i class="ti ti-edit fs-5"></i>
                          </a>
                        </span>
                      </div>
                    </div>
                  </div>

                  <div class="comment-text w-100">
                    <div class="comment-footer mt-2">
                      <h6 class="fw-medium">Lieu</h6>
                      <div class="d-flex align-items-center" id="lieu-container">
                       <p class="mb-1 fs-4 text-muted" id="lieu-texte">{% if galerie.lieu is not null and galerie.lieu!='' %}{{galerie.lieu}}{% else %}Non renseigné{% endif %}</p>
                        <span class="action-icons">
                          <a href="#" id="modifier-lieu" class="ps-3">
                            <i class="ti ti-edit fs-5"></i>
                          </a>
                        </span>
                      </div>
                    </div>
                  </div>

                  <div class="comment-text w-100">
                    <div class="comment-footer mt-2">
                      <h6 class="fw-medium">Date</h6>
                      <div class="d-flex align-items-center" id="date-container">
                       <p class="mb-1 fs-4 text-muted" id="date-texte">{% if galerie.date is not null and galerie.date!='' %}{{galerie.date | date('d/m/Y')}} {% else %}Non renseignée{% endif %}</p>
                        <span class="action-icons">
                          <a href="#" id="modifier-date" class="ps-3">
                            <i class="ti ti-edit fs-5"></i>
                          </a>
                        </span>
                      </div>
                    </div>
                  </div>
                
                  {% if not galerie.publie %}
                  <div id="publieContainer">
                      <div class="d-flex mt-4">
                        <h6 class="me-4 fw-medium">Poster sur le mur</h6>

                        <div class="form-check form-switch text-center" style="display: flex;">
                            <input class="form-check-input switch-control" data-field="publieMur" id="publieMur" name="publieMur" type="checkbox" role="switch" checked>
                        </div>
                      </div>
                      
                      <div class="mt-4" id="commentaireContainer" style="display:none;">
                        <textarea class="form-control" id="commentaire" placeholder="Commentaire..."></textarea> 
                      </div>

                      <button type="button" class="btn btn-rounded btn-outline-primary mb-2 mt-4" id="publishButton" data-id="{{galerie.idtoken}}">
                        <i class="ti ti-send fs-4 me-2"></i>
                        Publier la galerie
                      </button>
                    </div>
                  {% endif %}               
                </div>
              </div>
           </div>

          <div class="card">
            <div class="card-body">

              <h6 class="mt-4">Déposez ici les photos de la galerie!</h6>

              <form action="#" class="dropzone galerieForm">
                  <div class="dz-message">Déposez vos fichiers ici</div>
                  <input type="hidden" id="galerieId" name="galerieId" value="{{galerie.idtoken}}">
              </form>

            </div>
          </div>
          

        </div>
      </div>


    </div>

<style>

.gallery {
  column-count: 4;         /* Nombre de colonnes */
  column-gap: 15px;        /* Espace entre les colonnes */
}

.gallery img {
  width: 100%;
  margin-bottom: 15px;
  display: block;
  border-radius: 8px;
  break-inside: avoid;     /* Évite que l'image soit coupée */
}




.masonry-gallery {
    column-count: 4;
    column-gap: 15px;
}

.masonry-item {
    break-inside: avoid;
    margin-bottom: 15px;
}

@media (max-width: 1200px) {
    .masonry-gallery { column-count: 3; }
}

@media (max-width: 768px) {
    .masonry-gallery { column-count: 2; }
}

@media (max-width: 480px) {
    .masonry-gallery { column-count: 1; }
}

.masonry-gallery img {
    opacity: 0.9;
    transition: opacity 0.5s ease;
}

.masonry-gallery img.is-loaded {
    opacity: 1;
}

.el-card-avatar {
    position: relative;
    margin-bottom: 0; /* supprime l'espace inutile */
}

.el-card-avatar img {
    display: block;
    width: 100%;
    height: auto;
    margin-bottom: 0;
    vertical-align: top;
}

.el-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.6);
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    display: flex;
    justify-content: center;
    align-items: center;
}

.el-card-avatar:hover .el-overlay {
    opacity: 1;
}

</style>



<script>
  const addPhoto = "{{path('galerie_add_photo')}}";
  const galerieId = "{{galerie.idtoken}}";
</script>
<script src="{{ asset('assets/js/projet/galerie.js') }}"></script>
{% include 'partials/modal/archive_modal.html.twig' %} 
{% include 'partials/modal/delete_modal.html.twig' %}    
{% include 'partials/footer.html.twig' %}