{% extends 'base.html' %}
{% load static %}
{% load files %}
{% load currency %}
{% load util %}
{% block content %}
	<div class="content-inner">
		<div class=" shadow pt-4 container px-3">
			<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
				<div class="carousel-indicators">
					{% for banner in banners %}
						{% with forloop.counter0 as index %}
							<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="{{ index }}" {% if index == 0 %} class="active" aria-current="true" {% endif %} aria-label="Slide {{ index }}"></button>
						{% endwith %}
					{% endfor %}
				</div>
				<div class="carousel-inner">
					{% for banner in banners %}
						<div class="carousel-item {% if forloop.first %}active{% endif %}">
							<img src="/media/{{ banner.image }}" class="d-block w-100" style="aspect-ratio: 16/5; background-position: center; background-size: contain; background-repeat: no-repeat;" alt="">
							<div class="carousel-caption d-none d-md-flex flex-column justify-content-center w-50">
								<span class="v7 fw-semibold">{{ banner.name }}</span>
								<span class="v11">{{ banner.product.name }}</span>
								<span class="v14 v16-t text-muted my-2">{{ banner.description }}</span>
								<a type="button" href="{% url 'main:product/index' productName=banner.product.name|split:' '|join:'-' productId=banner.product.id %}" class="btn btn-danger px-3 py-1 v16 w-25 text-nowrap mt-1">LEARN MORE</a>
							</div>
						</div>
					{% endfor %}
				</div>
				<button class="carousel-control-prev d-none d-md-block" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
					<span class="carousel-control-prev-icon" aria-hidden="true"></span>
					<span class="visually-hidden">Previous</span>
				</button>
				<button class="carousel-control-next d-none d-md-block" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
					<span class="carousel-control-next-icon" aria-hidden="true"></span>
					<span class="visually-hidden">Next</span>
				</button>
			</div>
			<div class="my-4">
				<h1 class="text-white">Popular Products</h1>
			</div>
			<div class="row px-3 px-md-0">
				{% if products.0 %}
					<div class="col-12 col-lg-6">
						<div class="card">
							<div class="d-flex  flex-column flex-md-row align-items-center justify-content-start h-100 mx-2 px-3 px-md-0 py-3 py-md-5">
								<div class="d-inline-block mb-3 w-auto">
									<img class="img-fluid" src="{{ products.0.images.first.image.url }}" alt="">
								</div>
								<div class="d-flex flex-column w-md-50 gap-2 align-items-center align-items-md-start text-center text-md-start">
									<a href="{% url 'main:product/index' productName=products.0.name|split:' '|join:'-' productId=products.0.id %}"><span class="product-name text-white lh-1 v8 v9-l v10-t fw-semibold">{{ products.0.name }}</span></a>
									<span class="text-danger fw-semibold v10 v11-l v12-t">{{ products.0.price | currency_format }}</span>
									<span class="text-muted flex-wrap lh-1 v14">{{ products.0.description }}</span>
									<a class="btn btn-danger py-1 px-4 mt-2 text-white w-50 text-nowrap v14 v15-t" href="{% url 'main:product/index' productName=products.0.name|split:' '|join:'-' productId=products.0.id %}">View Product</a>
								</div>
							</div>
						</div>
					</div>
				{% endif %}
				{% for product in products|slice:"1:7" %}
					<div class="col-12 col-md-4 col-lg-3">
						<div class="card card-body px-3">
							<div class="d-flex flex-column align-items-center justify-content-center h-100 w-100">
								<div class="d-inline-block mb-3">
									<img class="img-fluid" src="{{ product.images.first.image.url }}" width="150" height="150" alt="">
								</div>
								<div class="d-flex flex-column gap-md-3 text-center">
									<a href="{% url 'main:product/index' productName=product.name|split:' '|join:'-' productId=product.id %}"><h5 class="product-name text-white lh-1 v12 v13-t">{{ product.name }}</h5></a>
									<span class="text-danger fw-semibold v12  v13-t">{{ product.price | currency_format }}</span>
								</div>
							</div>
						</div>
					</div>
				{% endfor %}
			</div>
			<div class=" mt-5 mb-4">
				<div id="carouselExampleGrid" class="carousel slide" data-bs-ride="carousel">
					<div class="carousel-inner row px-3">
						<div class="carousel-item active">
							<div class="hscroll-view" style="scrollbar-width: none;">
								{% for brand in brands %}
									<div class="slider-item px-3">
										<img src="/media/{{ brand.image }}" style="object-fit: contain;" alt="{{ brand.name }}" width="125" height="125">
									</div>
								{% endfor %}
							</div>
						</div>
					</div>
					<button id="prev-btn" class="carousel-control-prev w-auto d-none d-md-flex" type="button" data-bs-target="#carouselExampleGrid" data-bs-slide="prev">
						<i class="bi bi-chevron-left" style="font-size: 18px;"></i>
						<span class="visually-hidden">Previous</span>
					</button>
					<button id="next-btn" class="carousel-control-next w-auto d-none d-md-flex" type="button" data-bs-target="#carouselExampleGrid" data-bs-slide="next">
						<i class="bi bi-chevron-right" style="font-size: 18px;"></i>
						<span class="visually-hidden">Next</span>
					</button>
				</div>
			</div>
			<div class="mb-4">
				<h1 class="text-white">Popular Products</h1>
			</div>
			<div class="row px-3 px-md-0">
				{% for product in products|slice:"7:11" %}
					<div class="col-12 col-md-4 col-lg-3">
						<div class="card card-body px-3">
							<div class="d-flex flex-column align-items-center justify-content-center h-100 w-100">
								<div class="d-inline-block mb-3">
									<img class="img-fluid" src="{{ product.images.first.image.url }}" width="150" height="150" alt="">
								</div>
								<div class="d-flex flex-column gap-md-3 text-center">
									<a href="{% url 'main:product/index' productName=product.name|split:' '|join:'-' productId=product.id %}"><h5 class="text-white lh-1 v12 v13-t">{{ product.name }}</h5></a>
									<span class="text-danger fw-semibold v12  v13-t">{{ product.price | currency_format }}</span>
								</div>
							</div>
						</div>
					</div>
				{% endfor %}
			</div>
		</div>
	</div>
{% endblock %}
{% block js %}
	<script nonce="{{ nonce }}">
		document.addEventListener("DOMContentLoaded", function() {
			const scrollContainer = document.querySelector(".hscroll-view");
			const scrollItems = document.querySelectorAll(".slider-item");
			const itemWidth = scrollItems[0].offsetWidth + parseInt(window.getComputedStyle(scrollItems[0]).marginRight); // Item width + margin
			let scrollPosition = 0;
			let scrollSpeed = 1000;
			let interval;
			function autoScroll() {
				scrollPosition += itemWidth;
				if (scrollPosition >= scrollContainer.scrollWidth - scrollContainer.clientWidth + itemWidth) {
					setTimeout(() => {
						scrollPosition = 0;
						scrollContainer.scrollTo({
							left: scrollPosition,
							behavior: 'smooth'
						});
					}, scrollSpeed);
				} else {
					scrollContainer.scrollTo({
						left: scrollPosition,
						behavior: 'smooth'
					});
				}
			}
			function startAutoScroll() {
				interval = setInterval(autoScroll, scrollSpeed);
			}
			function stopAutoScroll() {
				clearInterval(interval);
			}
			document.getElementById("next-btn").addEventListener("click", function() {
				stopAutoScroll();
				scrollPosition += itemWidth;
				if (scrollPosition >= scrollContainer.scrollWidth - scrollContainer.clientWidth + itemWidth) {
					scrollPosition = 0;
				}
				scrollContainer.scrollTo({
					left: scrollPosition,
					behavior: 'smooth'
				});

				startAutoScroll();
			});
			document.getElementById("prev-btn").addEventListener("click", function() {
				stopAutoScroll();
				scrollPosition -= itemWidth;
				if (scrollPosition < 0) {
					scrollPosition = scrollContainer.scrollWidth - scrollContainer.clientWidth;
				}
				scrollContainer.scrollTo({
					left: scrollPosition,
					behavior: 'smooth'
				});
				startAutoScroll();
			});
			startAutoScroll();
		});
	</script>
{% endblock %}