<%
Set Area_cmd = Server.CreateObject ("ADODB.Command")
Area_cmd.ActiveConnection = MM_Loja_STRING
Area_cmd.CommandText = "SELECT * FROM areas Where GrupoId = 2 ORDER BY AreaOrdem ASC" 
Area_cmd.Prepared = true
Set Area = Area_cmd.Execute
%>
    
    <footer class="py-4">
		<div class="container border-bottom border-primary-subtle">
			<div class="row align-items-center text-center">
				<div class="col-md-2 text-lg-start"><a href="<%=Caminho%>"><img src="<%=Caminho%>img/logo-rodape.png" class="img-fluid py-4" style="max-width: 120px;"></a></div>
				<div class="col-md-10">

					<nav>
                        <%while not Area.eof%>
						<a href="<%=(Area.Fields.Item("AreaLink").Value)%>" class="text-decoration-none text-white p-3 d-inline-block link-footer"><%=Area.Fields.Item("AreaNome").Value%></a>
                        <%
					Area.Movenext()
					Wend
					%>
					</nav>
					
				</div>
			</div>
		</div>
		<div class="container text-white" style="font-size: 14px;">
			<div class="instale-app text-lg-start text-center  py-4">
				Instale nosso app: 
				<img src="<%=Caminho%>img/icon-apple.png" style="max-width: 100px;">
				<img src="<%=Caminho%>img/icon-google-store.png" style="max-width: 100px;">
			</div>
			<div class=" row align-items-center">
				<div class="col-md-10 py-4">
					Rua Conselheiro Saraiva, 317 | Vila Ercilia | São José do Rio Preto - SP | Fones: 0xx (17) 3203-0077 | Diretor Presidente - Sergio da Silva Paranhos
				</div>
				<div class="col-md-2 py-4 text-lg-end text-center">
					<a href="#"><img src="<%=Caminho%>img/icon-instagram-light.png" class="m-1" style="max-width: 30px;"></a>
					<a href="#"><img src="<%=Caminho%>img/icon-facebook-light.png"   class="m-1" style="max-width: 30px;"></a>
				</div>
			</div>

			<div class="row align-items-center">
				<div class="col-md-6 text-lg-start text-center pb-2">Sindicato SETH. Todos os direitos reservados</div>
				<div class="col-md-6 text-lg-end text-center  pb-2">Desenvolvido por <a href="https://www.maquinaweb.com.br" target="_blank"><img src="<%=Caminho%>img/logo-maquinaweb.png" style="max-height: 20px;" class="ps-2"></a></div>
			</div>
		</div>
	</footer>



<script>
	//CAROUSEL ---------------------------------------------------------
	document.querySelectorAll('[data-carousel]').forEach(carousel => {
		const id = carousel.id;
		const track = carousel.querySelector('.carousel-custom-track');
		const items = carousel.querySelectorAll('.carousel-item-custom');
		const nextBtn = document.querySelector(`#${id}-next`);
		const prevBtn = document.querySelector(`#${id}-prev`);
		let currentIndex = 0;
		let autoplayInterval;
	
		const update = () => {
		const itemWidth = items[0].offsetWidth;
		track.style.transform = `translateX(-${currentIndex * itemWidth}px)`;
		};
	
		const visibleCount = () => {
		const containerWidth = carousel.offsetWidth;
		const itemWidth = items[0].offsetWidth;
		return Math.floor(containerWidth / itemWidth);
		};
	
		const next = () => {
		if (currentIndex < items.length - visibleCount()) {
			currentIndex++;
			update();
		}
		};
	
		const prev = () => {
		if (currentIndex > 0) {
			currentIndex--;
			update();
		}
		};
	
		nextBtn.addEventListener('click', () => {
		next();
		resetAutoplay();
		});
	
		prevBtn.addEventListener('click', () => {
		prev();
		resetAutoplay();
		});
	
		// Autoplay
		const startAutoplay = () => {
		autoplayInterval = setInterval(() => {
			if (currentIndex < items.length - visibleCount()) {
			currentIndex++;
			} else {
			currentIndex = 0; // volta pro início
			}
			update();
		}, 3000); // muda a cada 3 segundos
		};
	
		const resetAutoplay = () => {
		clearInterval(autoplayInterval);
		startAutoplay();
		};
	
		// Swipe - touch support
		let startX = 0;
		let endX = 0;
	
		track.addEventListener('touchstart', e => {
		startX = e.touches[0].clientX;
		});
	
		track.addEventListener('touchmove', e => {
		endX = e.touches[0].clientX;
		});
	
		track.addEventListener('touchend', () => {
		const deltaX = endX - startX;
		if (deltaX > 50) {
			prev();
			resetAutoplay();
		} else if (deltaX < -50) {
			next();
			resetAutoplay();
		}
		});
	
		window.addEventListener('resize', update);
		update();
		//startAutoplay();
	});


	//MODAL SEARCH ----------------------------------------------------
$(document).ready(function () {
  let timer;

  $('#searchModal input[type="text"]').on('input', function () {
    clearTimeout(timer); // debounce

    const query = $(this).val().trim();

    timer = setTimeout(() => {
      $.ajax({
        url: '<%=Caminho%>buscar.php', // coloque aqui sua URL de API
        method: 'GET',
        data: { q: query },
        dataType: 'json',
        success: function (data) {
          $('#search-results').html('');

          const limit = 4;
          const showMore = data.length > limit;

		  if (data.length == 0) {
			$('#search-results').html('<div class="text-center"><p class="text-muted small">Nenhum resultado encontrado</p></div>');
		  }

          data.slice(0, limit).forEach(item => {
            const card = `
              <a href="${item.url}" class="card card-horizontal my-4 text-decoration-none border border-0">
                <div class="row g-0">
                  <div class="col-md-3">
                    <div class="card-img aspect-video">
                        <img src="${item.imagem}" class="img-fluid rounded-start aspect-video" alt="...">
                    </div>
                  </div>
                  <div class="col-md-9">
                    <div class="card-body pt-0">
                      <p class="card-text mb-1">
                        <span class="badge text-bg-default me-2">${item.categoria}</span>
                        <small class="text-body-secondary">${item.data}</small>
                      </p>
                      <h5 class="card-title mt-0 fs-6">${item.titulo}</h5>
                      <p class="card-subtitle">${item.descricao}</p>
                    </div>
                  </div>
                </div>
              </a>`;
            $('#search-results').append(card);
          });

          if (showMore) {
            $('#search-results').append('<div class="text-center"><a href="<%=Caminho%>noticias?Busca='+query+'" class="btn btn-outline-primary btn-sm">Ver mais resultados</a></div>');
          }
        },
        error: function () {
          $('#search-results').html('<p class="text-danger">Erro ao buscar resultados.</p>');
        }
      });
    }, 300); // 300ms debounce
  });
});

</script>
	  


</body>
</html>