@extends('webpages-templates.frontend-public-default')
@section('view-title', $data->headPageInfo->title)
@section('view-description', $data->headPageInfo->description)
@section('view-keywords', $data->headPageInfo->keywords)
@section('view-robots', $data->headPageInfo->robots)
@section('view-designer', $data->headPageInfo->designer)
@section('view-canonicalURL', $data->headPageInfo->canonicalURL)
@section('view-alternatesURL')
@foreach ($data->headPageInfo->alternatesURL as $langCode => $langURL)
<link rel="alternate" hreflang="{{ $langCode }}" href="{{ $langURL }}"/>
@endforeach
@endsection
@push('styles-head')
<!--<link rel="stylesheet" media="all" type="text/css" href="{{ $data->webpageIdentifier }}.css"/>-->
@endpush
@push('scripts-head')
<!--<script type="text/javascript" src="{{ $data->webpageIdentifier }}.js" defer="defer"></script>-->
<script type="text/javascript" src="main.js" defer="defer"></script>

@endpush
@section('webpage-structure')
<main>
<div id="webpage-acquisition" class="wrapper">
<nav class="webpage">
  <a class="homepage" target="_self" rel="" href="/">
  <picture id="" class="">
    <img id="" class="universum logotype logo" alt="UNIVERSUM"
         crossorigin="anonymous" referrerpolicy="strict-origin-when-cross-origin"
         decoding="sync" loading="eager" fetchpriority="high"
         width="§" height="§" sizes=""
         srcset=""
         src="/public_html/assets/images/dev-miscellaneous/universum-logotype-dark.svg"/>
  </picture>
  </a>
</nav>
<section id="main-acquaintances">
  <h2>Da <strong>Nossa Paixão</strong><br/> Para o Seu Espaço</h2>
  <video src="/public_html/assets/videos/banner-animado.mp4" type="video/mp4" poster="/public_html/assets/videos/banner-animado.jpg" width="1200" height="400" loop="loop" autoplay="autoplay" muted="muted">
    Sorry, your browser doesn't support HTML5 video tag.
  </video>
  <a class="email">vendas@universum.com.br</a>
  <a class="telephone">+55 (54) 3293.1488</a>
</section>
<script type="text/javascript" src="main.js" defer="defer"></script>
<script defer="defer">
  // Variável global para o carrossel de representantes
  let carouselCommercialRepresentatives = null;
</script>

<section id="representante-comercial" class="commercial-representatives">
  <div class="wrapper custom-select">
    <div class="swiper" data-carousel-id="custom-select-uf">
      <div class="swiper-wrapper">
              </div>
      <menu class="swiper-navigation">
        <li class="swiper-button-prev" data-carousel-control-prev-id="custom-select-uf">
          <svg 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>
              <path class="cls-1 is-animated" d="m.35 13.45 13.24 13.24"></path>
              <path class="cls-1 is-animated" d="M13.45.35.35 13.45"></path>
              <path class="cls-1 is-animated" d="M.35 13.45h59.6"></path>
            </g>
          </svg>
        </li>
        <li class="swiper-button-next" data-carousel-control-next-id="custom-select-uf">
          <svg 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>
              <path class="cls-1 is-animated" d="m.35 13.45 13.24 13.24"></path>
              <path class="cls-1 is-animated" d="M13.45.35.35 13.45"></path>
              <path class="cls-1 is-animated" d="M.35 13.45h59.6"></path>
            </g>
          </svg>
        </li>
      </menu>
    </div>
  </div>

  <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">
      <!-- Os representantes serão carregados dinamicamente via JavaScript -->
    </div>
    <menu class="swiper-navigation swiper-nav-horizont">
      <li class="swiper-button-prev" data-carousel-control-prev-id="commercial-representatives">
        <svg 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>
            <path class="cls-1 is-animated" d="m.35 13.45 13.24 13.24"></path>
            <path class="cls-1 is-animated" d="M13.45.35.35 13.45"></path>
            <path class="cls-1 is-animated" d="M.35 13.45h59.6"></path>
          </g>
        </svg>
      </li>
      <li class="swiper-button-next" data-carousel-control-next-id="commercial-representatives">
        <svg 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>
            <path class="cls-1 is-animated" d="m.35 13.45 13.24 13.24"></path>
            <path class="cls-1 is-animated" d="M13.45.35.35 13.45"></path>
            <path class="cls-1 is-animated" d="M.35 13.45h59.6"></path>
          </g>
        </svg>
      </li>
    </menu>
  </div>
</section>

<script defer="defer">
  window.addEventListener('load', (event) => {
    // Inicializa o carrossel de representantes
    const carouselRepId = 'commercial-representatives';
    carouselCommercialRepresentatives = new Swiper(`[data-carousel-id="${carouselRepId}"]`, {
      slidesPerView: 'auto',
      spaceBetween: 135,
      centeredSlides: false,
      direction: 'horizontal',
      effect: 'slide',
      speed: 300,
      fadeEffect: { crossFade: true },
      preventClicks: true,
      preventClicksPropagation: true,
      initialSlide: 0,
      rewind: false,
      loop: false,
      autoplay: false,
      freeMode: {
        enabled: true,
        sticky: true,
        momentum: true,
        minimumVelocity: 0.02,
        momentumRatio: 1,
        momentumVelocityRatio: 1,
        momentumBounce: true,
        momentumBounceRatio: 1,
      },
      allowTouchMove: true,
      grabCursor: true,
      navigation: {
        enabled: true,
        nextEl: `[data-carousel-control-next-id="${carouselRepId}"]`,
        prevEl: `[data-carousel-control-prev-id="${carouselRepId}"]`,
      },
      pagination: { enabled: false },
      scrollbar: { enabled: false }
    });

    // Inicializa o carrossel de seleção de UF
    const carouselSelectId = 'custom-select-uf';
    const carouselCustomSelect = new Swiper(`[data-carousel-id="${carouselSelectId}"]`, {
      slidesPerView: 'auto',
      spaceBetween: 0,
      centeredSlides: true,
      direction: 'vertical',
      effect: 'slide',
      speed: 300,
      fadeEffect: { crossFade: true },
      preventClicks: true,
      preventClicksPropagation: true,
      initialSlide: 0,
      rewind: false,
      loop: false,
      autoplay: false,
      freeMode: {
        enabled: true,
        sticky: true,
        momentum: true,
        minimumVelocity: 0.02,
        momentumRatio: 1,
        momentumVelocityRatio: 1,
        momentumBounce: true,
        momentumBounceRatio: 1,
      },
      allowTouchMove: true,
      grabCursor: true,
      navigation: {
        enabled: true,
        nextEl: `[data-carousel-control-next-id="${carouselSelectId}"]`,
        prevEl: `[data-carousel-control-prev-id="${carouselSelectId}"]`,
      },
      pagination: { enabled: false },
      scrollbar: { enabled: false },
      on: {
        init: function() {
          // Carrega os representantes do slide ativo inicial
          const initialSlide = this.slides[this.activeIndex];
          if (initialSlide) {
            const selectedValue = initialSlide.getAttribute('data-value');
            if (selectedValue) {
              loadRepresentatives(selectedValue);
            }
          }
        },
        slideChange: function() {
          handleSlideChange(this);
        }
      }
    });

    let slideChangeTimer;

    function handleSlideChange(swiper) {
      clearTimeout(slideChangeTimer);
      slideChangeTimer = setTimeout(() => {
        const activeSlide = swiper.slides[swiper.activeIndex];
        const selectedValue = activeSlide.getAttribute('data-value');
        if (selectedValue) {
          loadRepresentatives(selectedValue);
        }
      }, 500);
    }

    function loadRepresentatives(id) {
      // Filtra os representantes pela categoria selecionada
      const allRepresentatives = null;
      const filteredRepresentatives = allRepresentatives.filter(rep => rep.id_category == id);
      
      if (filteredRepresentatives.length > 0) {
        updateRepresentativesCarousel(filteredRepresentatives);
      } else {
        // Caso não haja representantes para a categoria selecionada
        const noRepMessage = [{
          title: "Nenhum representante encontrado",
          name: "Contate-nos diretamente",
          address: "Para esta região",
          phone: "",
          email: ""
        }];
        updateRepresentativesCarousel(noRepMessage);
      }
    }

    function updateRepresentativesCarousel(data) {
      const slidesContainer = document.querySelector('[data-carousel-id="commercial-representatives"] .swiper-wrapper');
      if (!slidesContainer) return;
      
      slidesContainer.innerHTML = '';

      data.forEach(item => {
        const slide = document.createElement('div');
        slide.classList.add('swiper-slide', 'commercial-representative', 'card');
        
        // Verifica e trata valores nulos ou indefinidos
        const phoneValue = item.phone ? item.phone : '';
        const emailValue = item.email ? item.email : '';
        
        slide.innerHTML = `
          <h3>${item.title || ''}</h3>
          <span class="overseer">${item.name || ''}</span>
          <span class="street-address">${item.address || ''}</span>
          ${phoneValue ? `<a href="tel:${phoneValue.replace(/\D/g, '')}" class="telephone">${phoneValue}</a>` : ''}
          ${emailValue ? `<a href="mailto:${emailValue}" class="email">${emailValue}</a>` : ''}
        `;
        slidesContainer.appendChild(slide);
      });

      // Animação
      const pingfengElement = document.querySelector('.commercial-representatives .pingfeng');
      const carouselElement = document.querySelector('[data-carousel-id="commercial-representatives"]');
      
      if (pingfengElement) {
        pingfengElement.classList.add('animate__fadeOutLeft');
      }
      
      if (carouselElement) {
        carouselElement.classList.add('animate__fadeInRightBig');
      }
      
      // Atualiza o carrossel
      if (carouselCommercialRepresentatives) {
        carouselCommercialRepresentatives.update();
        carouselCommercialRepresentatives.slideTo(0);
      }
    }
  });
</script>

<section id="pecas-e-fendas" class="cta">
  <h2><span><strong>Peças</strong> que Marcam <strong>Fendas</strong> no Tempo</span></h2>
  <a class="cta products" target="_self" rel="" href="{{ route('products.' . app()->getLocale(), []) }}">Ver Peças</a>
  <div class="text">
  </div>
</section>
@include("components.navigation-catalogs")
<section id="forms-section">
<script>
  function setTab(evt, cityName){
    let i, tabcontent, tablinks;

    // Get all elements with class="pageTab" and hide them
    tabcontent = document.getElementsByClassName("pageTab");
    for (i = 0; i < tabcontent.length; i++) {
      tabcontent[i].classList.add(`undisplay`);
    }

    // Get all elements with class="navTab" and remove the class "active"
    tablinks = document.getElementsByClassName("navTab");
    for (i = 0; i < tablinks.length; i++) {
      tablinks[i].className = tablinks[i].className.replace(" active", "");
    }

    // Show the current tab, and add an "active" class to the button that opened the tab
    document.getElementById(cityName).classList.remove(`undisplay`);
    document.getElementById(cityName).style.zIndex = "2";
    evt.currentTarget.className += " active";
    
    // ABOVE, COPIED FROM MARCHER
    // BELOW, NEW FOR UNIVERSUM
    if(cityName == "tab1"){
      document.querySelector(`picture#illustration-shopkeeper`).classList.remove(`animate__fadeOut`);
      document.querySelector(`picture#illustration-shopkeeper`).classList.add(`animate__fadeIn`);
      document.querySelector(`picture#illustration-careers`).classList.remove(`animate__fadeInLeft`);
      document.querySelector(`picture#illustration-careers`).classList.add(`animate__fadeOutLeft`);
    }
    else if(cityName == "tab2"){
      document.querySelector(`picture#illustration-shopkeeper`).classList.add(`animate__fadeOut`);
      document.querySelector(`picture#illustration-shopkeeper`).classList.remove(`animate__fadeIn`);
      document.querySelector(`picture#illustration-careers`).classList.add(`animate__fadeInLeft`);
      document.querySelector(`picture#illustration-careers`).classList.remove(`animate__fadeOutLeft`);
    }
  }
</script>
  <picture id="illustration-shopkeeper" class="animate__animated">
    <img id="" class="" alt=""
         crossorigin="anonymous" referrerpolicy="strict-origin-when-cross-origin"
         decoding="auto" loading="lazy" fetchpriority="auto"
         width="600" height="750" sizes=""
         srcset="/public_html/assets/images/dev-miscellaneous/abimad-best-in-show-awarded-product.600x750.jpg 600w,
                 /public_html/assets/images/dev-miscellaneous/abimad-best-in-show-awarded-product.1200x1500.jpg 1200w"
         src="/public_html/assets/images/dev-miscellaneous/abimad-best-in-show-awarded-product.600x750.jpg"/>
  </picture>
  <picture id="illustration-careers" class="animate__animated">
    <img id="" class="" alt=""
         crossorigin="anonymous" referrerpolicy="strict-origin-when-cross-origin"
         decoding="auto" loading="lazy" fetchpriority="auto"
         width="600" height="750" sizes=""
         srcset="/public_html/assets/images/dev-miscellaneous/trabalhe-conosco.600x750.jpg 600w,
                 /public_html/assets/images/dev-miscellaneous/trabalhe-conosco.1200x1500.jpg 1200w"
         src="/public_html/assets/images/dev-miscellaneous/trabalhe-conosco.600x750.jpg"/>
  </picture>
  <div>
    <menu class="tabs-control">
      <li><button id="" class="navTab active" data-tab="technicalSpecifications" onclick="setTab(event, 'tab1')">Seja um Lojista</button></li>
      <li><button id="" class="navTab" data-tab="advantages" onclick="setTab(event, 'tab2')">Trabalhe Conosco</button></li>
    </menu>
    <div id="tab1" class="tab pageTab" data-tab="technicalSpecifications">
      <h2>Tenha Universum na Sua Loja</h2>
      <form>
        <datalist id="brazil-federative-units">
          <option value="AC">Acre</option>
          <option value="AL">Alagoas</option>
          <option value="AP">Amapá</option>
          <option value="AM">Amazonas</option>
          <option value="BA">Bahia</option>
          <option value="CE">Ceará</option>
          <option value="DF">Distrito Federal</option>
          <option value="ES">Espírito Santo</option>
          <option value="GO">Goiás</option>
          <option value="MA">Maranhão</option>
          <option value="MT">Mato Grosso</option>
          <option value="MS">Mato Grosso do Sul</option>
          <option value="MG">Minas Gerais</option>
          <option value="PA">Pará</option>
          <option value="PB">Paraíba</option>
          <option value="PR">Paraná</option>
          <option value="PE">Pernambuco</option>
          <option value="PI">Piauí</option>
          <option value="RJ">Rio de Janeiro</option>
          <option value="RN">Rio Grande do Norte</option>
          <option value="RS">Rio Grande do Sul</option>
          <option value="RO">Rondônia</option>
          <option value="RR">Roraima</option>
          <option value="SC">Santa Catarina</option>
          <option value="SP">São Paulo</option>
          <option value="SE">Sergipe</option>
          <option value="TO">Tocantins</option>
        </datalist>
      <input type="text" name="contactRequest[uVisitor][name]" value="" placeholder="Nome completo" required="required"/>
      <input type="text" name="contactRequest[uVisitor][federative-unit]" value="" list="brazil-federative-units" minlength="2" maxlength="2" placeholder="Estado" required="required"/>
      <input type="text" name="contactRequest[uVisitor][city]" value="" list="" minlength="2" maxlength="255" placeholder="Cidade" required="required"/>
      <input type="text" name="contactRequest[uVisitor][phone]" value="" placeholder="Telefone" required="required"/>
        <input type="email" name="contactRequest[uVisitor][email]" value="" inputmode="email" spellcheck="false" autocomplete="email" list="" size="20" minlength="6" maxlength="254" pattern="^\S+@\S+\.\S{2,}$" placeholder="Email" required="required"/>
      <input type="text" name="contactRequest[uVisitor][cnpj]" value="" placeholder="CNPJ" required="required"/>
        <label class="attachment">
          <input type="checkbox" name="checkbox" value="value">
          Li e concordo com a <a class="privacy-policy" target="_self" rel="" href="#§">Política de Privacidade</a>
        </label>
        <button class="" type="submit" name="" value="">{{ __('cta.send') }}</button>
      </form>
    </div>
    <div id="tab2" class="tab pageTab undisplay" data-tab="advantages">
      <h2>Seja Parte da Equipe</h2>
      <form>
      <input type="text" name="contactRequest[uVisitor][name]" value="" placeholder="Nome completo" required="required"/>
      <input type="text" name="contactRequest[uVisitor][phone]" value="" placeholder="Telefone" required="required"/>
        <input type="email" name="contactRequest[uVisitor][email]" value="" inputmode="email" spellcheck="false" autocomplete="email" list="" size="20" minlength="6" maxlength="254" pattern="^\S+@\S+\.\S{2,}$" placeholder="Email" required="required"/>
      {{-- REMOVED ON 20250319 BY CLIENT'S REQUEST <input type="text" name="contactRequest[uVisitor][cnpj]" value="" placeholder="CPF" required="required"/> --}}
        <label>
          Anexar Currículo
          <input type="file" name="jobApplication[uApplicant][curriculumVitae]" accept="image/*,.pdf" required="required"/>
        </label>
        <label class="attachment">
          <input type="checkbox" name="checkbox" value="value">
          Li e concordo com a <a class="privacy-policy" target="_self" rel="" href="#§">Política de Privacidade</a>
        </label>
        <button class="" type="submit" name="" value="">{{ __('cta.send') }}</button>
      </form>
    </div>
  </div>
</section>
</div>
</main>
<style>
  div#webpage-acquisition.wrapper > section#pecas-e-fendas.cta {
      margin-top: 70px;
  } 
  div#webpage-acquisition.wrapper > section#representante-comercial div.commercial-representative.card {
      height: 400px;
  }
  div#webpage-acquisition.wrapper > section#pecas-e-fendas.cta {
      background: #795932 url(/public_html/assets/images/dev-miscellaneous/furniture-pattern-detail.1920x750.jpg) 0% 0% / cover no-repeat scroll padding-box border-box !important;
  }
 
  @media (max-width: 1300px){
  div#webpage-acquisition.wrapper > section#main-acquaintances {
        display: flex !important;
        width: 100% !important;
        padding: 0 20px !important;
        position: relative !important;
        flex-wrap: wrap !important;
        justify-content: space-between !important;
    }
    div#webpage-acquisition.wrapper > section#main-acquaintances > h2 {
        position: absolute !important;
        top: 130px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
    }
    div#webpage-acquisition.wrapper > section#main-acquaintances > video {
        width: 100% !important;
        height: 400px !important;
        object-fit: cover !important;
        overflow: hidden !important;
    }
    section#forms-section {
        grid-template:
        "gaPicture" auto
        "gaForm" auto / auto !important;
    }
    section#forms-section > picture {
        place-self: center !important;
        width: 50vw !important;
        max-width: 50vw !important;
        height: auto !important;
    }
    section#forms-section > div > menu {
        flex-flow: column wrap !important;
        place-content: center !important;
    }
    section#forms-section > div > div.tab > h2 {
        margin: auto !important;
        max-width: 260px !important;
        text-align: center !important;
    }
    section#forms-section > div > div.tab > form {
        place-self: center !important;
        margin: auto !important;
        width: 90% !important;
    }
  }

  @media (max-width: 900px){
    div#webpage-acquisition.wrapper > section#main-acquaintances > h2 {
        font: normal normal 100 normal 2rem / 1.4 "acumin-pro-wide", sans-serif !important;
        width: 100% !important;
        top: 150px !important;
    }
  }
  @media (max-width: 800px) {
    div#webpage-acquisition.wrapper > section#representante-comercial {
        gap: 30px !important;
        margin: 60px 0 !important;
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        padding: 0 20px !important;
        align-items: center !important;
        align-content: center !important;
    }
    div#webpage-acquisition.wrapper > section#representante-comercial div.wrapper.custom-select {
        grid-area: gaForm !important;
        overflow: hidden !important;
        z-index: 3 !important;
        text-align: center !important;
        text-transform: uppercase !important;
        color: var(--unnamed-color-011434, #011434) !important;
        font: normal normal 100 normal 250px / 1.4 "acumin-pro-wide", sans-serif !important;
        letter-spacing: 0px !important;
        line-height: 1 !important;
        height: 1lh !important;
        max-height: 100% !important;
        background: #BDB5B2 0% 0% no-repeat padding-box !important;
        width: 100% !important;
    }
    div#webpage-acquisition.wrapper > section#representante-comercial > div[data-carousel-id="commercial-representatives"] {
        padding: 0px !important;
        max-width: 300px !important;
    }
    .swiper-free-mode>.swiper-wrapper {
        padding-bottom: 50px !important;
    }
    div#webpage-acquisition.wrapper > section#representante-comercial div[data-carousel-id="custom-select-uf"] {
        grid-area: gaForm !important;
        width: 100% !important;
        max-width: 100vw !important;
        height: 1lh !important;
        display: flex !important;
        flex-flow: row nowrap !important;
        place-content: flex-end !important;
        place-items: center !important;
        width: fit-content !important;
        margin-left: auto !important;
        margin-right: auto !important;
        overflow: hidden !important;
    }
    div#webpage-acquisition.wrapper > section#representante-comercial > p.pingfeng.cta.explanation-text {
        display: none !important;
    }
    div#webpage-acquisition.wrapper > section#representante-comercial div.commercial-representative.card {
        display: flex !important;
        flex-flow: column nowrap !important;
        place-content: space-between !important;
        place-items: flex-start !important;
        gap: normal !important;
        width: 100% !important;
        text-align: start !important;
        height: 350px !important;  
    }
  }
   @media only screen and (min-width: 320px) and (max-width: 479px) {
    div#webpage-acquisition.wrapper > section#representante-comercial div[data-carousel-id="custom-select-uf"] div.swiper-slide {
        opacity: 0 !important;
        transition: 0.5s !important;
    }
    div#webpage-acquisition.wrapper > section#representante-comercial div[data-carousel-id="custom-select-uf"] div.swiper-slide.swiper-slide-active {
        font-weight: bold !important;
        opacity: 1 !important;
    }
    div#webpage-acquisition.wrapper > section#representante-comercial div[data-carousel-id="custom-select-uf"] div.swiper-slide.swiper-slide-prev {
        opacity: 1 !important;
    }
    div#webpage-acquisition.wrapper > section#representante-comercial div[data-carousel-id="custom-select-uf"] div.swiper-slide.swiper-slide-next {
        opacity: 1 !important;
    }
    div#webpage-acquisition.wrapper > section#representante-comercial {
        max-height: 100% !important;
    }
    .custom-select .swiper-free-mode>.swiper-wrapper {
        height: 190px !important;
    }
    #representante-comercial .swiper .swiper-nav-horizont{
          padding-top: 115px !important; 
    }
  }
</style>
@endsection