{% extends 'base.html.twig' %}

{% block title %}Les trésors de Luna - Accueil{% endblock %}

{% block body %}

<div class="cookies-warning hide">
  <p>
    Utilisation des cookies<br>
    Ce site utilise des cookies essentiels pour le bon fonctionnement de certaines fonctionnalités, comme la gestion de la session utilisateur. En poursuivant votre navigation, vous acceptez leur utilisation.
    <br>
    Pour plus d'informations, consultez notre 
    <a href="{{ path('politique_confidentialite') }}" target="_blank">Politique de Confidentialité</a>.
  </p>
  <button class="cookies-accept" id="cookies-accept">J'accepte</button>
</div>


<section id="banner" style="background: #F9F3EC;">
    <div class="container">
      <div class="swiper main-swiper">
        <div class="swiper-wrapper">

          <div class="swiper-slide py-5">
            <div class="row banner-content align-items-center">
              <div class="img-wrapper col-md-5">
                <img src="{{asset('images/logo_2.png')}}" class="img-fluid">{#était: images/banner-img#}
              </div>
              <div class="content-wrapper col-md-7 p-5 mb-5">
                {#<div class="secondary-font text-primary text-uppercase mb-4">Save 10 - 20 % off</div>#}
                <h2 class="banner-title display-1 fw-normal">Les meilleurs affaires pour <span class="text-primary">
                    vous</span>
                </h2>
                <a href="{{path('products_filter')}}" class="btn btn-outline-dark btn-lg text-uppercase fs-6 rounded-1">
                  La boutique
                  <svg width="24" height="24" viewBox="0 0 24 24" class="mb-1">
                    <use xlink:href="#arrow-right"></use>
                  </svg></a>
              </div>

            </div>
          </div>

        </div>

        <div class="swiper-pagination mb-5"></div>

      </div>
    </div>
</section>


<section id="categories">
    <div class="container my-3 py-5">
      <div class="row my-5">
        <div class="col text-center">
          <a href="#" class="categories-item">
            <iconify-icon class="category-icon" icon="ph:sketch-logo"></iconify-icon>
            <h5>Bijoux</h5>
          </a>
        </div>
        <div class="col text-center">
          <a href="#" class="categories-item">
            <iconify-icon class="category-icon" icon="material-symbols:floor-lamp-outline"></iconify-icon>
            <h5>Décorations</h5>
          </a>
        </div>
        <div class="col text-center">
          <a href="#" class="categories-item">
            <iconify-icon class="category-icon" icon="material-symbols:apparel-outline"></iconify-icon>
            <h5>Vêtements</h5>
          </a>
        </div>
        <div class="col text-center">
          <a href="{{path('products_filter', {'category': 2})}}" class="categories-item">
            <iconify-icon class="category-icon" icon="material-symbols:coffee-outline"></iconify-icon>
            <h5>Mugs</h5>
          </a>
        </div>
        {#
        <div class="col text-center">
          <a href="#" class="categories-item">
            <iconify-icon class="category-icon" icon="ph:cat"></iconify-icon>
            <h5>Cat Shop</h5>
          </a>
        </div>
        #}
      </div>
    </div>
</section>

{% if app.user and app.user.isVerified %}
  

{% endif %}

{% if categories %}

  {% for category in categories %}

    {% if category.product is not empty and category.indexVisible is not same as(false) and category.indexVisible is not null %}
    
      <section id="{{category.name}}" class="my-5 overflow-hidden">
        <div class="container pb-5">
  
          <div class="section-header d-md-flex justify-content-between align-items-center mb-3">
            <h2 class="display-3 fw-normal">{{category.name}}</h2>
            <div>
              <a href="{{path('products_filter', {'category': category.id})}}" class="btn btn-outline-dark btn-lg text-uppercase fs-6 rounded-1">
                Voir plus
                <svg width="24" height="24" viewBox="0 0 24 24" class="mb-1">
                  <use xlink:href="#arrow-right"></use>
                </svg></a>
            </div>
          </div>
  
          <div class="products-carousel swiper">
            <div class="swiper-wrapper">
  
              {% for product in category.product|slice(0, 10) %}
  
                <div class="swiper-slide">
                  <div class="card position-relative">
                    {% if is_granted("ROLE_ADMIN") %}
                    <a class="product-image" href="{{path('admin_edit_product', {'id': product.id})}}">
                      <img src="{{asset('uploads/product_images/' ~ product.mainImageLink)}}" class="img-fluid rounded-4" style="object-fit:cover;" alt="image">
                    </a>
                      {% else %}
                      <a class="product-image" href="{{path('product', {'id': product.id})}}">
                        <img src="{{asset('uploads/product_images/' ~ product.mainImageLink)}}" class="img-fluid rounded-4" style="object-fit:cover;" alt="image">
                      </a>
                    {% endif %}
                    <div class="card-body p-0">
                      <a href="{{path('product', {'id': product.id})}}">
                        <h3 class="card-title pt-4 m-0">{{product.name}}</h3>
                      </a>
  
                      <div class="card-text">
    
  
                        <h3 class="secondary-font text-primary">{{product.price}}€</h3>
                        
                        {% if product.stock != 0 %}
                          <div class="btn-cart-wrapper d-flex flex-wrap mt-3" >
                            <a href="{{path('product', {'id': product.id})}}" class="btn-cart btn-outline-primary me-3 px-4 pt-3 pb-3">
                              <h5 class="text-uppercase m-0">Ajouter au panier</h5>
                            </a>

                          </div>
                        {% else %}
                          <p class="alert-stock">Produit indisponible</p>
                        {% endif %}
  
  
                      </div>
  
                    </div>
                  </div>
                </div>

  
              {% endfor %}
            </div>
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
            <div class="swiper-pagination swiper-pagination-products mb-5"></div>
          </div>
          <!-- / products-carousel -->
  
  
        </div>
      </section>

    {% endif %}

    
  {% endfor %}

  {% else %}
    
    <div id="no_categories_message" class="container d-flex justify-content-center align-items-center">
      <p class="m-3">Aucune catégories existante, veuillez en créer une ou plusieurs</p>
    </div>
  
{% endif %}

{% block javascripts %}

  <script type="module" src="{{asset('js/classes/Cart.js')}}"></script>
  <script type="module" src="{{asset('js/buying.js')}}"></script>
  <script>
    window.addEventListener('load', () => {
      messageFlashHide()
      cookiesAccept()

      function cookiesAccept()
      {
        const container = document.querySelector('.cookies-warning')
        const acceptButton = document.querySelector('.cookies-accept')

        if (document.cookie.indexOf('cookies_accepted=true') !== -1)
        {
          container.classList.add('hide')
        }
        else
        {
          container.classList.remove('hide')
        }

        acceptButton.addEventListener('click', () => {
          document.cookie = "cookies_accepted=true; path=/; max-age=" + 60 * 60 * 24 * 365;
          container.classList.add('hide')
        })

      }

      function messageFlashHide()
      {
        const messageFlash = document.querySelector('.alert')
  
        if (messageFlash)
        {
  
          setTimeout(()=> {
            messageFlash.style.transition = "opacity 1500ms ease-out"
            messageFlash.style.opacity = "0"
  
            setTimeout(() =>  {
                messageFlash.remove()
            }, 1500)
          }, 1500)
        }
      }  
    })
  </script>

{% endblock javascripts %}

{% endblock %}