{{-- Backup of carousel that is visible side to side of the webpage
<section class="products-type swiper" data-carousel-id="products-type-01">
  <h2 class="products-type">Bancos</h2>
  <div class="swiper-wrapper">
      </div>
  <menu class="swiper-navigation">
    <li class="swiper-button-prev" data-carousel-control-prev-id="products-type-01"></li>
    <li class="swiper-button-next" data-carousel-control-next-id="products-type-01"></li>
  </menu>
<!--    <div class="swiper-pagination" data-carousel-pagination-id="products-type-01"></div>-->
<!--    <div class="swiper-scrollbar" data-carousel-scrollbar-id="products-type-01"></div>-->
</section>
/Backup of carousel that is visible side to side of the webpage --}}


{{-- Backup DEV-CONTENT page Product
<section class="product-presentation swiper" data-carousel-id="product-presentation">
  <h2 style="display: none">Conheça o Produto</h2>
  <div class="swiper-wrapper">
        <div class="swiper-slide" style="column-gap: 80px">
      <picture id="" class="product media">
        <img id="" class="product media" alt=""
             crossorigin="anonymous" referrerpolicy="strict-origin-when-cross-origin"
             decoding="auto" loading="lazy" fetchpriority="auto"
             width="850" height="§" sizes=""
             srcset=""
             src="/assets/images/dev-products-slides/atlas-01.jpg"/>
      </picture>
            <h3 class="">Recortes <br/><strong>no Tempo</strong></h3>
                  <p class="">Se o mapa-múndi é a inspiração, o Buffet Atlas pode dar uma volta nas memórias, ser uma transição de espaços ou um ponto de partida a novos momentos.</p>
                  <a class="cta" target="_self" rel="" href="#§">Comprar</a>
          </div>
        <div class="swiper-slide" style="">
      <picture id="" class="product media">
        <img id="" class="product media" alt=""
             crossorigin="anonymous" referrerpolicy="strict-origin-when-cross-origin"
             decoding="auto" loading="lazy" fetchpriority="auto"
             width="850" height="§" sizes=""
             srcset=""
             src="/assets/images/dev-products-slides/atlas-02.jpg"/>
      </picture>
                  <p class="">A superfície em mármore é o reflexo das ranhuras do tempo. Já a combinação de materiais, uma viagem ao multissensorial.</p>
                  <a class="cta" target="_self" rel="" href="#§">Ambientar</a>
          </div>
        <div class="swiper-slide" style="">
      <picture id="" class="product media">
        <img id="" class="product media" alt=""
             crossorigin="anonymous" referrerpolicy="strict-origin-when-cross-origin"
             decoding="auto" loading="lazy" fetchpriority="auto"
             width="850" height="§" sizes=""
             srcset=""
             src="/assets/images/dev-products-slides/atlas-03.jpg"/>
      </picture>
                      </div>
        <div class="swiper-slide" style="">
      <picture id="" class="product media">
        <img id="" class="product media" alt=""
             crossorigin="anonymous" referrerpolicy="strict-origin-when-cross-origin"
             decoding="auto" loading="lazy" fetchpriority="auto"
             width="850" height="§" sizes=""
             srcset=""
             src="/assets/images/dev-products-slides/atlas-04.jpg"/>
      </picture>
                  <p class="">O recorte arredondado e a curvatura dos pés espelhados dão as coordenadas ao design.</p>
                  <a class="cta" target="_self" rel="" href="#§">Comprar</a>
          </div>
        <div class="swiper-slide" style="">
      <picture id="" class="product media">
        <img id="" class="product media" alt=""
             crossorigin="anonymous" referrerpolicy="strict-origin-when-cross-origin"
             decoding="auto" loading="lazy" fetchpriority="auto"
             width="850" height="§" sizes=""
             srcset=""
             src="/assets/images/dev-products-slides/atlas-05.jpg"/>
      </picture>
                      </div>
        <div class="swiper-slide" style="">
      <picture id="" class="product media">
        <img id="" class="product media" alt=""
             crossorigin="anonymous" referrerpolicy="strict-origin-when-cross-origin"
             decoding="auto" loading="lazy" fetchpriority="auto"
             width="850" height="§" sizes=""
             srcset=""
             src="/assets/images/dev-products-slides/atlas-06.jpg"/>
      </picture>
                  <p class="">Perpendicular, paralelo ou meridional. Posicione como e onde quiser. Explore um mundo de combinações com cores e texturas que valorizam a laminação.</p>
                  <a class="cta" target="_self" rel="" href="#§">Ambientar</a>
          </div>
      </div>
  <div class="swiper-ui">
    <menu class="swiper-navigation">
      <li class="swiper-button-prev" data-carousel-control-prev-id="product-presentation">
        <svg id="" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 59.95 27.04">
          <defs>
            <style>
              *.cls-1{
                fill: none;
                stroke: #151a31;
              }
            </style>
          </defs>
          <g id="" data-name="">
            <path class="cls-1 is-animated" id="arrow-head-bottom-half" d="m.35 13.45 13.24 13.24"></path>
            <path class="cls-1 is-animated" id="arrow-head-top-half" d="M13.45.35.35 13.45"></path>
            <path class="cls-1 is-animated" id="arrow-body" d="M.35 13.45h59.6"></path>
          </g>
        </svg>
      </li>
      <li class="swiper-button-next" data-carousel-control-next-id="product-presentation">
        <svg id="" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 59.95 27.04">
          <defs>
            <style>
              *.cls-1{
                fill: none;
                stroke: #151a31;
              }
            </style>
          </defs>
          <g id="" data-name="">
            <path class="cls-1 is-animated" id="arrow-head-bottom-half" d="m.35 13.45 13.24 13.24"></path>
            <path class="cls-1 is-animated" id="arrow-head-top-half" d="M13.45.35.35 13.45"></path>
            <path class="cls-1 is-animated" id="arrow-body" d="M.35 13.45h59.6"></path>
          </g>
        </svg>
      </li>
    </menu>
    <div class="swiper-pagination" data-carousel-pagination-id="product-presentation"></div>
<!--    <div class="swiper-scrollbar" data-carousel-scrollbar-id="product-presentation"></div>-->
  </div>
<!-- PORPERLY POSITION THIS! -->
<script>
  window.addEventListener(`load`, (event) => {
    const carouselIdAA = `product-presentation`;
    const carouselProductPresentation = new Swiper(`*[data-carousel-id="${ carouselIdAA }"]`, {
    slidesPerView: `auto`,                                      // `auto`
slidesOffsetBefore: 400,
    spaceBetween: 45,                                           // Distance between slides in px. If you use "margin" css property to the elements which go into Swiper in which you pass "spaceBetween" into, navigation might not work properly!
    centeredSlides: true,                                       // 
    direction: `horizontal`,                                    // §[ `horizontal` | `vertical` ]§
    effect: `slide`,                                            // §[ `slide` | `fade` | `flip` | `coverflow` | `cube` | `creative` ]§ = Transition effect.
    speed: 300,                                                 // number = Duration of transition between slides (in ms)
    fadeEffect: {
      crossFade: true                                           // boolean = Enables slides cross fade, in order to avoid seeing content behind or underneath.
    },
    flipEffect: {},                                             //
    coverflowEffect: {},                                        //
    cubeEffect: {},                                             //
    creativeEffect: {},                                         //
    preventClicks: true,                                        // boolean = Set to true to prevent accidental unwanted clicks on links during swiping
    preventClicksPropagation: true,                             // boolean = Set to true to stop clicks event propagation on links during swiping
    initialSlide: 0,                                            // number = Index number of initial slide.
    rewind: false,                                              // USE LOOP OR REWIND! NOT BOTH
    loop: false,                                                // USE LOOP OR REWIND! NOT BOTH
    autoplay: false, /* {
      delay: 3000,                                              // number = Delay between transitions (in ms). If this parameter is not specified, auto play will be disabled
      disableOnInteraction: true,                               // boolean = Set to false and autoplay will not be disabled after user interactions (swipes), it will be restarted every time after interaction.
      pauseOnMouseEnter: false,                                 // boolean = When enabled autoplay will be paused on pointer (mouse) enter over Swiper container.
      reverseDirection:	false,                                  // boolean = Enables autoplay in reverse direction
      stopOnLastSlide: false,                                   // boolean = Enable this parameter and autoplay will be stopped when it reaches last slide (has no effect in loop mode)
      waitForTransition: true,                                  // boolean = When enabled autoplay will wait for wrapper transition to continue. Can be disabled in case of using Virtual Translate when your slider may not have transition
      // If you need to specify different delay for specific slides you can do it by using data-swiper-autoplay (in ms) attribute on slide: <div class="swiper-slide" data-swiper-autoplay="2000">
    }, */
    freeMode: {
      enabled: true,                                            // boolean = To enable/disable, indicated to be used with breakpoints or conditions.
      sticky: false,                                            // boolean = To enable/disable snap to slides positions in free mode
      momentum: true,                                           // boolean = If enabled, then slide will keep moving for a while after you release it
      minimumVelocity: 0.02,                                    // number = Minimum touchmove-velocity required to trigger free mode momentum
      momentumRatio: 1,                                         // number = Higher value produces larger momentum distance after you release slider
      momentumVelocityRatio: 1,                                 // number = Higher value produces larger momentum velocity after you release slider
      momentumBounce: true,                                     // boolean = Set to false if you want to disable momentum bounce in free mode
      momentumBounceRatio: 1,                                   // number = Higher value produces larger momentum bounce effect
    },
    allowTouchMove: true,                                       // boolean = If `false`, then the only way to switch the slide is use of external API functions like slidePrev or slideNext
    grabCursor: true,                                           // boolean = This option may improve a little desktop usability. If true, user will see the "grab" cursor when hover on Swiper.
    navigation: {
      enabled: true,                                            // boolean = To enable/disable, indicated to be used with breakpoints or conditions.
      nextEl: `*[data-carousel-control-next-id="${ carouselIdAA }"]`, // string = CSS selector
      prevEl: `*[data-carousel-control-prev-id="${ carouselIdAA }"]`, // string = CSS selector
      // [...]
    },
    pagination: {
      enabled: true,                                            // boolean = To enable/disable, indicated to be used with breakpoints or conditions.
      el: `*[data-carousel-pagination-id="${ carouselIdAA }"]`, // string = CSS selector or HTML element of the container with pagination.
      type: `fraction`,                                         // §[ `progressbar` | `bullets` | `fraction` | `custom` ]§ = Type of pagination.
      clickable: false,                                         // boolean = If true then clicking on pagination button will cause transition to appropriate slide. Only for bullets pagination type!
      clickableClass: 'swiper-pagination-clickable',            // CSS class name set to pagination when it is clickable.
//      renderBullet: function(index, className) {
////        return `<span class="${ className }">${ index + 1 }</span>`;
//        return `<span class="${ className }"><div>${ index + startingYear }</div><div class="yearLineCall"></div></span>`;
//      }
      // [...]
      renderFraction: function (currentClass, totalClass) {
        return '<span class="' + currentClass + '"></span>' +
          '<span class="divider"></span>' +
          '<span class="' + totalClass + '"></span>';
      },
      formatFractionCurrent: function (number) {
//        return ('0' + number).slice(-2);
        return ('0' + number);
      },
      formatFractionTotal: function (number) {
//        return ('0' + number).slice(-2);
        return ('0' + number);
      },
    },
    scrollbar: {
      enabled: false,                                            // boolean = To enable/disable, indicated to be used with breakpoints or conditions.
      el: `*[data-carousel-scrollbar-id="${ carouselIdAA }"]`,  // string = CSS selector or HTML element of the container with scrollbar.
      hide: true,                                               // boolean = Hide scrollbar automatically after user interaction.
      draggable: false,                                         // boolean = Set to true to enable make scrollbar draggable that allows you to control slider position.
      snapOnRelease: false,                                     // boolean = Set to true to snap slider position to slides when you release scrollbar.
      dragSize: `auto`,                                         // §[ `auto` | number ]§ = Size of scrollbar draggable element in px.
      scrollbarDisabledClass: `swiper-scrollbar-disabled`,     // string = CSS class name added on swiper container and scrollbar element when scrollbar is disabled by breakpoint.
      lockClass: `swiper-scrollbar-lock`,                       // string = Scrollbar element additional CSS class when it is disabled.
      dragClass: `swiper-scrollbar-drag`,                       // string = Scrollbar draggable element CSS class.
      horizontalClass: `swiper-scrollbar-horizontal`,           // string = CSS class name set to scrollbar in horizontal Swiper.
      verticalClass: `swiper-scrollbar-vertical`,               // string = CSS class name set to scrollbar in vertical Swiper.
    },
//    on: {                                                       // Register event handlers
//      slideChange: removeHeadingFromSection,
//      reachBeginning: showHeadingFromSection,
////      reachEnd: someFunction,
//    },
//    breakpoints: {                                              // Responsive breakpoints parameters, which override the defaults
//      320: { // when viewport width is >= 320px
//        slidesPerView: 2,
//        spaceBetween: 20,
//        allowTouchMove: true
//      },
//      480: { // when viewport width is >= 480px
//        slidesPerView: 3,
//        spaceBetween: 30,
//        allowTouchMove: true
//      },
//      768: { // when viewport width is >= 768px
//        slidesPerView: 4,
//        spaceBetween: 40,
//        allowTouchMove: true
//      },
//      1024: { // when viewport width is >= 1024px
//        slidesPerView: 4,
//        spaceBetween: 40,
//        allowTouchMove: false
//      },
//      1280: { // when viewport width is >= 1280px
//        slidesPerView: 4,
//        spaceBetween: 40,
//        allowTouchMove: false
//      },
//      1920: { // when viewport width is >= 1920px
//        slidesPerView: 4,
//        spaceBetween: 40,
//        allowTouchMove: false
//      }
//    }
    });
  });
</script>
</section>
/Backup DEV-CONTENT --}}

{{-- Backup DEV-CONTENT page Product
<section id="notas-do-designer" class="product-designer-notes">
  <h2><strong>Notas</strong> do Designer</h2>
  <div class="product-designer-notes">
    <p>Somos um escritório de design que leva em consideração os sonhos de muitos corações. Seja dar educação a um filho, seja construir uma casa, seja ir pra um destino almejado.</p>
    <p>Somos corações que sonham e mãos que realizam, com critério técnico. Pés nas nuvens e corações enraizados na terra.</p>
  </div>
  <div class="product-designer card">
    <picture id="" class="product-designer">
      <img id="" class="product-designer" alt=""
           crossorigin="anonymous" referrerpolicy="strict-origin-when-cross-origin"
           decoding="auto" loading="lazy" fetchpriority="auto"
           width="600" height="§" sizes=""
           srcset=""
           src="/assets/images/dev-designers/01-dua.jpg"/>
    </picture>
    <a class="product-designer name social-network instagram" target="_blank" rel="external" href="#§">
<!--    <span class="product-designer name">dua</span>-->
    <span class="social-network instagram">Instagram</span>
    </a>
    <a class="product-designer products" target="_self" rel="" href="#§">Ver peças</a>
  </div>
  <div class="product-designer name gigantic">
    <span class="product-designer name">dua</span>
  </div>
</section>
/Backup DEV-CONTENT --}}


{{-- Trial of Custom <select> for page Acquisition
<style>
*#user-state-tezztt{
  text-align: center;
  text-transform: uppercase;
  color: var(--unnamed-color-011434, #011434);
  font: normal normal 100 normal 250px/350px "acumin-pro-wide", sans-serif;
  letter-spacing: 0px;
  
  overflow: hidden;
  transition: all 1s ease 0s;
  
  display: grid;
  grid-template:
    "above" auto
    "selected" auto
    "below" 100px / auto;
}
*#user-state-tezztt option{
  display: none;
}
*#user-state-tezztt option.selected{
  grid-area: selected;
}
*#user-state-tezztt:hover{
  overflow: hidden auto;
  height: 200px;
}
*#user-state-tezztt:hover option{
  display: unset;
}
</style>
<div id="user-state-tezztt" name="state" class="" title="" data-raveled="state" required="required">
  <option value="AC">AC</option>
  <option value="AL">AL</option>
  <option value="AP">AP</option>
  <option value="AM">AM</option>
  <option value="BA">BA</option>
  <option value="CE">CE</option>
  <option value="DF">DF</option>
  <option value="ES">ES</option>
  <option value="GO">GO</option>
  <option value="MA">MA</option>
  <option value="MT">MT</option>
  <option value="MS">MS</option>
  <option value="MG">MG</option>
  <option value="PA">PA</option>
  <option value="PB">PB</option>
  <option value="PR">PR</option>
  <option value="PE">PE</option>
  <option value="PI">PI</option>
  <option value="RJ">RJ</option>
  <option value="RN">RN</option>
  <option value="RS">RS</option>
  <option value="RO">RO</option>
  <option value="RR">RR</option>
  <option value="SC">SC</option>
  <option value="SP">SP</option>
  <option value="SE">SE</option>
  <option value="TO">TO</option>
</div>
/Trial of Custom <select> for page Acquisition DEV-CONTENT --}}

{{-- Pesquisa de Representante Comercial em <select> nativo
<section id="representante-comercial" class="commercial-representatives">
  <form id="" class="commercial-representative" name=""
        accept-charset="UTF-8" method="GET" enctype="application/x-www-form-urlencoded"
        target="_self" rel="§[  ]§" action="§[ The URL that processes the form submission. ]§">
    <select id="user-state" name="state" class="" title="" data-raveled="state" required="required">
      <option value="AC">AC</option>
      <option value="AL">AL</option>
      <option value="AP">AP</option>
      <option value="AM">AM</option>
      <option value="BA">BA</option>
      <option value="CE">CE</option>
      <option value="DF">DF</option>
      <option value="ES">ES</option>
      <option value="GO">GO</option>
      <option value="MA">MA</option>
      <option value="MT">MT</option>
      <option value="MS">MS</option>
      <option value="MG">MG</option>
      <option value="PA">PA</option>
      <option value="PB">PB</option>
      <option value="PR">PR</option>
      <option value="PE">PE</option>
      <option value="PI">PI</option>
      <option value="RJ">RJ</option>
      <option value="RN">RN</option>
      <option value="RS">RS</option>
      <option value="RO">RO</option>
      <option value="RR">RR</option>
      <option value="SC">SC</option>
      <option value="SP">SP</option>
      <option value="SE">SE</option>
      <option value="TO">TO</option>
    </select>  
  <button type="submit" name="">Enviar</button>
</form>
  
  <p class="pingfeng cta explanation-text animate__animated">Selecione seu estado e encontre o representante mais próximo</p>
  <div class="swiper animate__animated" data-carousel-id="commercial-representatives">
    <div class="swiper-wrapper">
      {{-- DEVELOPMENT
      <div class="swiper-slide commercial-representative card">
        <h3>Demario Representações – Maderavendas</h3>
        <span class="overseer">Fernando Demario</span>
        <span class="street-address">Regiões de Campinas, Baixada Santista e Vale do Paraíba</span>
        <a class="telephone">(19) 99701-8616</a>
        <a class="email">demariorep@gmail.com</a>
      </div>
      DEVELOPMENT--}}
    </div>
    <div class="swiper-button-prev" data-carousel-control-prev-id="commercial-representatives"></div>
    <div class="swiper-button-next" data-carousel-control-next-id="commercial-representatives"></div>
<!--    <div class="swiper-pagination" data-carousel-pagination-id="commercial-representatives"></div>-->
<!--    <div class="swiper-scrollbar" data-carousel-scrollbar-id="commercial-representatives"></div>-->
  </div>
</section>
<script defer="defer">
const jsonData = [
  {
    "id": null,
    "official_name": "J Brandelli Representações",
    "overseer": "Adair Brandelli",
    "federated_unit": "RS",
    "actuation_description": "Rio Grande do Sul (Serra, Norte, Vale do Taquari e Santa Maria)",
    "telephone": "(54) 99114-3130",
    "email": "adair@cvars.com.br"
  },
  {
    "id": null,
    "official_name": "Saolli Representações",
    "overseer": "Samuel Oliveira",
    "federated_unit": "RS",
    "actuation_description": "Rio Grande do Sul (Grande Porto Alegre Vale dos Sinos, Região Sul, Vale do Paranhana, Litoral Norte, Vale do Caí e São Jerônimo",
    "telephone": "(51) 99977-4440",
    "email": "pedidos@saollidecor.com "
  }
];

function generateCarouselItems(data) {
  const carouselItems = data.map(item => {
    const slide = document.createElement('div');
    slide.classList.add('swiper-slide', 'commercial-representative', 'card');

    slide.innerHTML = `
      <h3>${item.official_name}</h3>
      <span class="overseer">${item.overseer}</span>
      <span class="street-address">${item.actuation_description}</span>
      <a class="telephone">${item.telephone}</a>
      <a class="email">${item.email}</a>
    `;

    return slide;
  });

  return carouselItems;
}

// Example of how to use the function:
const generatedSlides = generateCarouselItems(jsonData);

//Now you need to append the generatedSlides to the swiper container.
//Example, if you have a container with the id "mySwiper":

//window.addEventListener(`load`, (event) => {
//  const swiperContainer = document.querySelector(`div[data-carousel-id="commercial-representatives"] > *.swiper-wrapper`);
//
//  generatedSlides.forEach(slide =>{
//    swiperContainer.appendChild(slide);
//  })
//});
  
  
  
function fetchAndGenerateCarousel(url) {
  fetch(url)
    .then(response => {
      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
      }
      return response.json();
    })
    .then(jsonData => {
      const generatedSlides = jsonData.map(item => {
        const slide = document.createElement('div');
        slide.classList.add('swiper-slide', 'commercial-representative', 'card');

        slide.innerHTML = `
          <h3>${item.official_name}</h3>
          <span class="overseer">${item.overseer}</span>
          <span class="street-address">${item.actuation_description}</span>
          <a class="telephone">${item.telephone}</a>
          <a class="email">${item.email}</a>
        `;

        return slide;
      });

      const slidesContainer = document.querySelector(`div[data-carousel-id="commercial-representatives"] > *.swiper-wrapper`);
      slidesContainer.innerHTML = ''; // Clear previous content

      generatedSlides.forEach(slide => { // Insert new content
        slidesContainer.appendChild(slide);
      });
      
      document.querySelector(`section.commercial-representatives *.pingfeng`).classList.add(`animate__fadeOutLeft`);
      document.querySelector(`section.commercial-representatives div[data-carousel-id="commercial-representatives"]`).classList.add(`animate__fadeInRightBig`);
      carouselCommercialRepresentatives.update();
      carouselCommercialRepresentatives.classList.add(`animate__fadeInLeft`);
    })
    .catch(error => {
      console.error('Error fetching JSON:', error);
    });
}

//window.addEventListener(`load`, (event) => {
//// Example usage:
//const jsonUrl = `/determine-commercial-representative-by-state?state=RS`; // Replace with your JSON URL
//
//fetchAndGenerateCarousel(jsonUrl);
//});
  
window.addEventListener(`load`, (event) => {
// Example usage:
const selectElement = document.getElementById('user-state'); // Replace with your select ID

selectElement.addEventListener('change', function (){
  const selectedValue = this.value; // Get the selected value

  // Construct the JSON URL based on the selected value
  const jsonUrl = `/determine-commercial-representative-by-state?state=${selectedValue}`; // Adjust the path as needed, or to an API endpoint.

  fetchAndGenerateCarousel(jsonUrl);
});
});
  
  
</script>  
/Pesquisa de Representante Comercial em <select> nativo  --}}
  
  
{{-- Teste de coookie
@if ($data->webpage_products_visitation_count)
<section>
  SESSION "webpage-products-visitation-count" SETADO!
</section>
@endif
@if ($data->webpage_products_visitation_count == 0)
<section>
  SESSION "webpage-products-visitation-count" ZERADO!
</section>
@endif
@if ($data->webpage_products_visitation_count == 1)
<section>
  SESSION "webpage-products-visitation-count" É 1!
</section>
@endif
@if ($data->webpage_products_visitation_count >= 2)
<section>
  SESSION "webpage-products-visitation-count" É MAIOR OU IGUAL A 2!
</section>
@endif
  
@if (Cookie::get('webpage-products-visitation-count') !== null)
<section>
  Cookie "webpage-products-visitation-count" SETADO!
</section>
@endif
  
  
@if ($data->webpage_products_visitation_count >= 2)
<script type="text/javascript" defer="defer">
  // script para pular a seção: usuário já está pela segunda vez na webpage.
</script>
@endif
/Teste de coookie--}}