{% extends 'website/home/base.html' %}
{% load static %}
{% block title %} Akmam Shop | Smart Ecommerce in Bangladesh {% endblock %}

{% block content %}
<!-- HERO / BANNER -->
<section class="hero" style="margin-top:5px">
  <div class="container">
    <div class="row g-3 align-items-center">
      <div class="col-12">
        <div id="heroCarousel" class="carousel slide rounded overflow-hidden" data-bs-ride="carousel">

          <!-- Indicators -->
          <div class="carousel-indicators">
            {% for slider in slider_list %}
              <button type="button" data-bs-target="#heroCarousel" 
                      data-bs-slide-to="{{ forloop.counter0 }}" 
                      class="{% if forloop.first %}active{% endif %}" 
                      aria-current="{% if forloop.first %}true{% else %}false{% endif %}" 
                      aria-label="Slide {{ forloop.counter }}">
              </button>
            {% endfor %}
 
          </div>

          <!-- Carousel Inner -->
          <div class="carousel-inner">
            
            {% for slider in slider_list %}
              {% if forloop.counter == 1 %} 
                <div class="carousel-item active">
                  <img src="{{slider.image.url}}" class="d-block w-100" alt="{{slider.title}}">
                </div>
              {% else %} 
                <div class="carousel-item">
                  <img src="{{slider.image.url}}" class="d-block w-100" alt="{{slider.title}}">
                </div>
              {% endif %}
            {% endfor %}
          </div>

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



<section class="customer-features features py-3">
  <div class="container">
    <div class="row g-3 text-center text-md-start">

      <!-- Feature 1 -->
      <div class="col-6 col-md-3">
        <div class="feature-box p-3 h-100 d-flex align-items-center">
          
          <div class="icon me-3 text-danger fs-2">
            <i class="fas fa-truck"></i>
          </div>
          <div>
            <h6 class="fw-bold mb-1">Cash on Delivery</h6>
            <p class="small text-muted mb-0">Cash on Delivery available all over Bangladesh.</p>
          </div>
        </div>
      </div>

      <!-- Feature 2 -->
      <div class="col-6 col-md-3">
        <div class="feature-box p-3 h-100 d-flex align-items-center">
          <div class="icon me-3 text-danger fs-2">
            <i class="fas fa-clock"></i>
          </div>
          <div>
            <h6 class="fw-bold mb-1">24 x 7 Service</h6>
            <p class="small text-muted mb-0">Online Service For 24 x 7</p>
          </div>
        </div>
      </div>

      <!-- Feature 3 -->
      <div class="col-6 col-md-3">
        <div class="feature-box p-3 h-100 d-flex align-items-center">
          <div class="icon me-3 text-danger fs-2">
            <i class="fas fa-credit-card"></i>
          </div>
          <div>
            <h6 class="fw-bold mb-1">Online Pay</h6>
            <p class="small text-muted mb-0">Online Payment Available</p>
          </div>
        </div>
      </div>

      <!-- Feature 4 -->
      <div class="col-6 col-md-3">
        <div class="feature-box p-3 h-100 d-flex align-items-center">
          <div class="icon me-3 text-danger fs-2">
            <i class="fas fa-sync-alt"></i>
          </div>
          <div>
            <h6 class="fw-bold mb-1">100% Original</h6>
            <p class="small text-muted mb-0">100% Money Back</p>
          </div>
        </div>
      </div>

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


<!-- Exclusive Categories -->
<section class="py-3">
  <div class="container">
    <h3 class="section-title mb-4">Exclusive Categories</h3>

    <div class="categories-slider" style="padding:10px;background:#f5f5f5">
      <!-- Category card -->
      {% for cate in categories %}
      <div class="card category-card text-center">
        <a href="/{{cate.pk}}/allproducts" class="text-decoration-none text-dark">
          <img src="/media/{{cate.image}}" class="card-img-top" alt="{{cate.name}}">
          <h6 class="mb-0">{{cate.name}}</h6>
        </a>
      </div>
      {% endfor %}

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


<!--Category Wise PRODUCT GRID -->
{% for item in category_products %}
<section class="py-4 bg-white">
  <div class="container">
    <div class="section-title d-flex justify-content-between align-items-center mb-4">
      <h4 class="fw-bold">{{ item.category.name }}</h4>
      <a href="/{{item.category.id}}/allproducts" class="btn btn-sm btn-outline-danger">View All</a>
    </div>

    <div class="row g-3" id="product-grid-{{ item.category.id }}">
      {% for product in item.products %}
      <div class="col-6 col-md-4 col-lg-custom mb-2" data-aos="zoom-in">
        <div class="card product-card h-100 shadow-sm border-0">
          <a href="/product/{{product.id}}/{{product.slug}}">
            <div class="product-image position-relative">
              {% if product.product_image %}
                <img src="{{product.product_image.url}}" class="card-img-top" alt="{{product.name_english}}">
              {% else %}
                <img src="/static/img/no-image.png" class="card-img-top" alt="No Image">
              {% endif %}

              {% if product.discount > 0 %}
                <span class="badge bg-success position-absolute top-0 end-0 m-2">
                  -{{product.discount|floatformat:0}}%
                </span>
              {% endif %}
            </div>
            <div class="card-body productTitleAndPrice">
              <h6 class="card-title fw-semibold">{{product.name_english}}</h6>
              <p class="price mb-1 text-success fw-bold product_price_tag">
                <span>৳</span> {{product.discount_price}}
                {% if product.discount_price < product.unit_price %}
                  <del>{{product.unit_price}}</del>
                {% endif %}
              </p>

              {% if product.stock_status == '1' %}
              <h5><i class="fa-solid fa-circle-check"></i> In Stock</h5>
              {% else %}
              <h5 class="stockout"><i class="fa-solid fa-circle-xmark"></i> Stock Out</h5>
              {% endif %}
            </div>
          </a>
        </div>
      </div>
      {% endfor %}
    </div>
  </div>
</section>
{% endfor %}


<!-- ================== Offer Section ================== -->
<section class="bg-light py-5">
<div class="container">
 
  <div class="row g-4">
    <!-- Offer 1 -->
    <div class="col-md-4 offer-banner">
      <div class="card border-0 shadow-sm h-100">
        <img src="https://images.othoba.com/images/thumbs/1229704_Smart Phone Small Web 480_274_1200.jpeg" class="card-img-top rounded" alt="Smartphone Sale">
      </div>
    </div>
    <!-- Offer 2 -->
    <div class="col-md-4 offer-banner">
      <div class="card border-0 shadow-sm h-100">
        <img src="https://images.othoba.com/images/thumbs/1229707_Rfl Rack Small Web 480_274_1200.jpeg" class="card-img-top rounded" alt="Rack Offer">
      </div>
    </div>
    <!-- Offer 3 -->
    <div class="col-md-4 offer-banner">
      <div class="card border-0 shadow-sm h-100">
        <img src="https://images.othoba.com/images/thumbs/1229709_Air Fryer small web480_274__1200.jpeg" class="card-img-top rounded" alt="Air Fryer Clearance">
      </div>
    </div>
  </div>
</div>
</section>
<!-- ================== End Offer Section ================== -->


<!-- Trending Products -->
<section class="py-4 bg-white">
  <div class="container">  

    <div class="section-title d-flex justify-content-between align-items-center mb-4">
      <h4 class="fw-bold">Trending Products</h4>
      <a href="#" class="btn btn-sm btn-outline-danger">View All</a>
    </div>

    <div class="row g-3" id="product-grid">
      <!-- Product card -->
      {% for product in product_list|slice:15 %} 
      <div class="col-6 col-md-4 col-lg-custom mb-2" data-aos="zoom-in">
        <div class="card product-card h-100 shadow-sm border-0">
          <a href="/product/{{product.id}}/{{product.slug}}">
            <div class="product-image position-relative">
              <img src="{{product.product_image.url}}" class="card-img-top" alt="Product"> 
               {% if product.discount > 0 %}
              <span class="badge bg-success position-absolute top-0 end-0 m-2">-{{product.discount|floatformat:0}}%</span>
              {% endif %}
            </div>
            <div class="card-body productTitleAndPrice">
              <h6 class="card-title fw-semibold">{{product.name_english}}</h6>
              <p class="price mb-1 text-success fw-bold product_price_tag"><span>৳</span> {{product.discount_price}}
                <del> {{product.unit_price}}</del></p>
              {% if product.stock_status == '1' %}
              <h5><i class="fa-solid fa-circle-check"></i> In Stock</h5>
              {% else %}
              <h5 class="stockout"><i class="fa-solid fa-circle-xmark"></i> Stock Out</h5>
              {% endif %}
            </div>
          </a>
        </div>
      </div>
      {% endfor %}
  
    </div> 
  </div>
  </div>
</section>


{% if recent_viewed_products %}


<section class="py-4 bg-white"> 
    <img src="https://images.othoba.com/images/thumbs/1189995_Grocery%20cat%20banner%20for%20web%20(1).jpeg" class="w-100"  alt="">
     
</section>



<!-- Recent Products For You -->
<section class="recommended py-5 bg-white">
  <div class="container">
    <div class="section-title d-flex justify-content-between align-items-center mb-4">
      <h4 class="fw-bold">Recent Products For You</h4> 
    </div>

    <div class="row g-3">

      <!-- Product 1 -->
       {% for item in recent_viewed_products %}
      <div class="col-6 col-md-4 col-lg-2">
        <div class="card product-card h-100 shadow-sm border-0">
          <div class="product-image position-relative">
            <img src="{{ item.product.product_image.url }}" class="card-img-top" alt="{{ item.product.name_english }}">
            <!-- <span class="badge bg-success position-absolute top-0 start-0 m-2">Hot</span> -->
          </div>
          <div class="card-body text-center">
            <h6 class="card-title fw-semibold">{{ item.product.name_english }}</h6>
            <p class="price text-success fw-bold mb-1">৳ {{ item.product.discount_price }}</p>
            <a href="/product/{{ item.product.id }}/{{ item.product.slug }}" class="btn btn-sm btn-outline-danger">View Details</a>
          </div>
        </div>
      </div>
      {% endfor %}

       

    </div>
  </div>
</section>
{% endif %}



<div id="offerPopup">
    <div class="modal-dialog">
        <div class="modal-content">
            <button class="btn-close" id="closeOffer">&times;</button>
            <h3>🎉 Special Offer!</h3>
            <p>Today only! Get <strong>20% OFF</strong> on all products.</p>
            <button class="btn btn-primary mt-3" id="closeOfferBtn">Got it!</button>
        </div>
    </div>
</div>


<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
  document.addEventListener("DOMContentLoaded", function() {
      var showOffer = {{ show_offer|yesno:"true,false" }};
      if(!showOffer) return;

      setTimeout(function() {
          var popup = document.getElementById("offerPopup");
          popup.classList.add("show");
      }, 10000); // 10 seconds

      function hidePopup() {
          var popup = document.getElementById("offerPopup");
          popup.classList.remove("show");

          // AJAX to save session
          fetch("{% url 'offer_shown' %}", {
              method: "POST",
              headers: {
                  "X-CSRFToken": "{{ csrf_token }}",
                  "Content-Type": "application/json"
              },
              body: JSON.stringify({shown: true})
          });
      }

      document.getElementById("closeOffer").addEventListener("click", hidePopup);
      document.getElementById("closeOfferBtn").addEventListener("click", hidePopup);
  });
  </script>





{% endblock %}