{% extends "UserTemplates/dash.html" %} {% block body %}
{% load static %}
{% block list %}

{% endblock list %}
<script src="https://cdn.lordicon.com/bhenfmcm.js"></script>
<script>
  window.addEventListener('DOMContentLoaded', (event) => {
    const productElements = document.getElementsByClassName('product-names');

    for (let i = 0; i < productElements.length; i++) {
      const productName = productElements[i].innerHTML.trim();
      const words = productName.split(' ');
      let truncatedName = '';

      for (let j = 0; j < words.length; j++) {
        if ((truncatedName + words[j]).length <= 15) {
          truncatedName += words[j] + ' ';
        } else {
          break;
        }
      }

      const remainingText = words.slice(truncatedName.trim().split(' ').length).join(' ');
      const formattedName = truncatedName.trim() + '<br>' + remainingText;
      productElements[i].innerHTML = formattedName;
      productElements[i].classList.add('formatted-name');
    }
  });
</script>
<script>
  $(document).ready(function () {
    // 	setTestimonialCarousel();
    // });
    // function setTestimonialCarousel() {
    const direct = $("html").attr("dir");
    const items = 1;
    $(".slideTestimonial").each(function () {
      const sliderOptions = {
        loop: false,
        nav: true,
        navText: [
          '<i class="fa fa-caret-left"></i>',
          '<i class="fa fa-caret-right"></i>',
        ],
        dots: false,
        items: items,
        autoplay: true,
        autoplayTimeout: 3000,
        responsiveRefreshRate: 200,
        responsive: {
          0: { items: 1 },
          1201: { items: 1 },
        },
      };

      if (direct == "rtl") sliderOptions["rtl"] = true;
      $(this).owlCarousel(sliderOptions);
    });
  });
          //-->
</script>
{% for i in banners %}

{% if i.top_left_banner == 'top_left_banner' %}
{% else %}

<div class="swiper-viewport">
  <div id="banner0" class="swiper-container">
    <div class="swiper-wrapper">


      <!-- top_left_banner -->
      <div class="swiper-slide">
        <a href="#"><img src="{{i.top_left_banner.url}}" alt="Left Banner" class="img-responsive" /></a>
      </div>


    </div>

  </div>
</div>

{% endif %}

{% endfor %}
<script>

  if ($("#banner0 .swiper-slide").length > 1) {
    $("#banner0").swiper({
      effect: "fade",
      autoplay: 2500,
      autoplayDisableOnInteraction: false,
    });
  }

</script>

<div class="box all-products special left-vertical-product">
  <div class="box-heading">
    <div class="box-content">
      <div class="page-title toggled">
        <h3>Special Products</h3>
      </div>
      <div class="block_box">
        <div id="special-carousel" class="box-product vertical-carousel clearfix" data-items="1">
          {% if specials %}

          {% for special in specials %}

          <div class="product-layout col-xs-12">
            <div class="product-thumb transition clearfix">
              <div class="image">
                <a href="#">
                  <img src="{{special.product_image.url}}" alt="iPhone" title="iPhone" class="img-responsive" />
                  <img class="img-responsive hover-img" src="{{special.product_image.url}}" title="iPhone"
                    alt="iPhone" />
                </a>
                <!-- <div class="sale-text">
                  <span class="section-sale">On Sale!</span>
                </div> -->
              </div>
              <div class="thumb-description clearfix">
                <div class="caption">
                  <h4 class="product-title">
                    <a href="{% url 'view' special.id %}" id="product-name"
                      style="font-weight: bold">{{special.product_name}}</a>
                  </h4>
                  <p class="price">
                    <span class="price-new" style="font-weight: bolder;font-size: 18px;">QAR{{special.price}}</span>
                    <!-- <span class="price-old">{{special.price}}</span> -->
                  </p>
                  <div class="rating">
                    <span class="fa fa-stack"></span>
                  </div>

                  <div class="btn-all" style="display: flex; justify-content: center; align-items: center;">
                    <a href="{% url 'add_to_cart_form' special.id %}"
                      style="display: inline-block; padding: 4px 8px; background-color: transparent; color: #4d94ff; text-decoration: none; border-radius: 4px; transition: background-color 0.3s ease; font-size: 14px;"
                      onmouseover="this.style.backgroundColor='#4d94ff'; this.style.color='white';"
                      onmouseout="this.style.backgroundColor='transparent'; this.style.color='black';">
                      ADD TO CART
                    </a>
                  </div>
                </div>
              </div>
            </div>
          </div>
          {% endfor %}
          {% else %}
          <center>
            <h5>No Special Products</h5>
          </center>
          {% endif %}
        </div>
      </div>
    </div>
  </div>
</div>
</aside>

<div id="content" class="col-sm-6">

  <div class="slideshow">
    <div class="swiper-viewport">
      <div id="slideshow0" class="swiper-container">
        <div class="swiper-wrapper">
          {% for i in carousal %}
          <div class="swiper-slide text-center Main-banner1">
            <a href="#"><img src="{{i.carousal_home_main.url}}" alt="Main-banner1" class="img-responsive" /></a>
          </div>
          {% endfor %}
        </div>
        <div class="swiper-pager hidden">
          <div class="swiper-button-prev">
            <i class="fa fa-caret-left"></i>
          </div>
          <div class="swiper-button-next">
            <i class="fa fa-caret-right"></i>
          </div>
        </div>
      </div>
    </div>
  </div>

  <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
  <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
  <script>
    var swiper = new Swiper('#slideshow0', {
      loop: true,
      autoplay: {
        delay: 3000, // Autoplay duration in milliseconds
      },
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
    });
  </script>
  <script>
    window.addEventListener('DOMContentLoaded', (event) => {
      const productElements = document.getElementsByClassName('product-name');

      for (let i = 0; i < productElements.length; i++) {
        const productName = productElements[i].innerHTML.trim();
        const words = productName.split(' ');
        let truncatedName = '';

        for (let j = 0; j < words.length; j++) {
          if ((truncatedName + words[j]).length <= 15) {
            truncatedName += words[j] + ' ';
          } else {
            break;
          }
        }

        const remainingText = words.slice(truncatedName.trim().split(' ').length).join(' ');
        const formattedName = truncatedName.trim() + '<br>' + remainingText;
        productElements[i].innerHTML = formattedName;
        productElements[i].classList.add('formatted-name');
      }
    });
  </script>


  <div class="box all-products latest">
    <div class="box-heading">
      <div class="box-content">
        <div class="page-title toggled">
          <h3>Specials</h3>
        </div>
        <div class="block_box row">
          <div id="latest-carousel" class="box-product product-carousel clearfix" data-items="4">
            {% if specials %}
            {% for product in specials %}
            <div class="product-content">
              <div class="product-layout col-xs-12">
                <div class="product-thumb transition clearfix" style="height: 420px;">
                  <div class="image">
                    <div class="sale-text">
                      <span class="section-sale" style="color: blue;">special!</span>
                    </div>
                    <a href="{% url 'view' product.id %}">
                      <img src="{{product.product_image.url}}" alt="{{product.product_name}}"
                        title="{{product.product_name}}" class="img-responsive" />
                      <img class="img-responsive hover-img" src="{{product.product_image.url}}"
                        title="{{product.product_name}}" alt="{{product.product_name}}" />
                    </a>
                  </div>
                  <div class="thumb-description clearfix">
                    <div class="caption">
                      <h4 class="product-title">
                        <a href="{% url 'view' product.id %}" id="product-names"
                          style="font-weight: bold">{{product.product_name}}</a>
                      </h4>

                      <div class="rating">
                        <span class="fa fa-stack"></span>
                      </div>

                    </div>
                  </div>
                  <p class="price">
                    <span class="price-new"
                      style="display: flex; justify-content: center; align-items: flex-end; position: absolute; bottom: 60px; width: 100%;">QAR{{product.price}}</span>
                  </p>
                  <div class="btn-all"
                    style="display: flex; justify-content: center; align-items: flex-end; position: absolute; bottom: 20px; width: 100%;">
                    <a href="{% url 'add_to_cart_form' product.id %}"
                      style="display: inline-block; padding: 4px 8px; background-color: transparent; color: #4d94ff; text-decoration: none; border-radius: 4px; transition: background-color 0.3s ease; font-size: 14px;"
                      onmouseover="this.style.backgroundColor='#4d94ff'; this.style.color='white';"
                      onmouseout="this.style.backgroundColor='transparent'; this.style.color='black';">
                      ADD TO CART
                    </a>
                  </div>
                </div>
              </div>
            </div>

            {% endfor %}
            {% else %}
            <h4 style="margin-left: 10%;">No Specials to show</h4>
            {% endif %}
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="box carousel brand" style="padding-bottom: 2%;">
    <div class="page-title"><br>
      <h3>Brand Logo</h3>
    </div>
    <div class="brand-main">
      <div class="row">


        <div class="swiper-viewport">
          <div id="carousel0" class="swiper-container">
            <div class="swiper-wrapper">
              {% for brand in brands %}
              <div class="swiper-slide col-sm-12">

                <div class="text-center">

                  <img src="{{brand.brand_image.url}}" alt="Starbucks" class="img-responsive m-auto" />

                </div>

              </div>
              {% endfor %}
            </div>
          </div>
          <div class="swiper-pagination carousel0"></div>
          <div class="swiper-pager">
            <div class="swiper-button">
              <i class="fa fa-caret-left"></i>
            </div>
            <div class="swiper-button">
              <i class="fa fa-caret-right"></i>
            </div>
          </div>
        </div>



      </div>
    </div>
  </div>
  <script>

    $("#carousel0").swiper({
      mode: "horizontal",
      slidesPerView: 5,
      paginationClickable: false,
      nextButton: ".swiper-button-next",
      prevButton: ".swiper-button-prev",
      loop: false,
      autoplay: false,
      autoplayDisableOnInteraction: true,
      breakpoints: {
        1340: {
          slidesPerView: 4,
          spaceBetween: 0,
        },
        1199: {
          slidesPerView: 3,
          spaceBetween: 0,
        },
        991: {
          slidesPerView: 4,
          spaceBetween: 0,
        },
        540: {
          slidesPerView: 3,
          spaceBetween: 0,
        },
        425: {
          slidesPerView: 2,
          spaceBetween: 0,
        },
        300: {
          slidesPerView: 1,
          spaceBetween: 0,
        },
      },
    });

  </script>
</div>
<aside id="column-right" class="col-sm-3 hidden-xs">

  {% for i in banners %}

  {% if i.top_right_banner == 'top_right_banner' %}
  {% else %}
  <div class="swiper-viewport">
    <div id="banner1" class="swiper-container">
      <div class="swiper-wrapper">

        <!-- top_right_banner -->
        <div class="swiper-slide">
          <a href="#"><img src="{{i.top_right_banner.url}}" alt="Right Banner" class="img-responsive" /></a>
        </div>

      </div>
    </div>
  </div>
  {% endif %}
  {% endfor %}
  <script>
    if ($("#banner1 .swiper-slide").length > 1) {
      $("#banner1").swiper({
        effect: "fade",
        autoplay: 2500,
        autoplayDisableOnInteraction: false,
      });
    }
  </script>

  <div class="service-box">
    <div class="page-title toggled">
      <h3>Our Services</h3>
    </div>
    <div class="service-desc block-content clearfix">
      <div class="service-item">
        <div class="service">
          <div class="service-icon">
            <lord-icon src="https://cdn.lordicon.com/uetqnvvg.json" trigger="loop"
              colors="primary:#121331,secondary:#3080e8" style="width:55px;height:50px">
            </lord-icon>
          </div>
          <div class="service-content">
            <h4 class="promo-title">Shipping Available</h4>
            <span class="promo-desc"></span>
          </div>
        </div>
      </div>
      <div class="service-item">
        <div class="service">
          <div class="service-icon">
            <lord-icon src="https://cdn.lordicon.com/twprnhsj.json" trigger="hover"
              colors="primary:#121331,secondary:#3080e8" style="width:55px;height:50px">
            </lord-icon>
          </div>
          <div class="service-content">
            <h4 class="promo-title">Cash On Delivery</h4>
            <span class="promo-desc"></span>
          </div>
        </div>
      </div>
      <div class="service-item">
        <div class="service">
          <div class="service-icon">
            <lord-icon src="https://cdn.lordicon.com/mjmrmyzg.json" trigger="hover"
              colors="primary:#121331,secondary:#3080e8" style="width:55px;height:50px">
            </lord-icon>
          </div>
          <div class="service-content">
            <h4 class="promo-title">Professional Support</h4>
            <span class="promo-desc"></span>
          </div>
        </div>
      </div>
    </div>
  </div>

  {% if dotd %}

  <div class="special-countdown left-vertical-product">
    <div class="countdown-carousel list-products">
      <div class="page-title">
        <h3>Deal of the day</h3>
      </div>
      <div class="countdown-inner">
        <div id="special-count" class="box-product special-count-carousel clearfix">
          <div class="product-layout col-xs-12">
            <div class="product-thumb transition">
              <div class="image countdown-images">
                <div class="special-image">
                  <a href="{% url 'view' dotd.id %}">
                    {% for image in dotd.productimage_set.all %}
                    {% if image.fea_img == 1 %}
                    <img src="{{image.product_image.url}}" alt="Microwaves" title="Microwaves"
                      class="img-responsive" />
                    <img class="img-responsive hover-img" src="{{image.product_image.url}}" title="Microwaves"
                      alt="Microwaves" />
                      {% endif %}
                      {% endfor %}
                  </a>
                  <!-- <div class="sale-text">
                    <span class="section-sale">On Sale!</span>
                  </div> -->
                </div>
              </div>

              <div class="thumb-description">
                <div class="caption">
                  <div class="desc-inner">
                    <h4 class="product-title">
                      <a href="{% url 'view' dotd.id %}" id="product-name"
                        style="font-weight: bold">{{dotd.product_name}}</a>
                    </h4>
                    <div class="price">
                      <span class="price-new" style="font-weight: bolder;font-size: 18px;">QAR{{dotd.price}}</span>
                    </div>

                    <div class="rating">
                      <span class="fa fa-stack"></span>
                    </div>
                    <div class="btn-all" style="display: flex; justify-content: center; align-items: center;">
                      <a href="{% url 'add_to_cart_form' dotd.id %}"
                        style="display: inline-block; padding: 4px 8px; background-color: transparent; color: #4d94ff; text-decoration: none; border-radius: 4px; transition: background-color 0.3s ease; font-size: 14px;"
                        onmouseover="this.style.backgroundColor='#4d94ff'; this.style.color='white';"
                        onmouseout="this.style.backgroundColor='transparent'; this.style.color='black';">
                        ADD TO CART
                      </a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  {% else %}

  {% endif %}

  <script type="text/javascript">

    $(document).ready(function () {
      deal();
    });
    function deal() {
      const additional1 = $("html").attr("dir");

      $(".special-count-carousel").each(function () {
        // if ($(this).closest('#column-left').length == 0 && $(this).closest('#column-right').length == 0) {
        $(this).addClass("owl-carousel owl-theme");
        const items = $(this).data("items") || 1;
        const sliderOptions = {
          loop: false,
          nav: true,
          navText: [
            '<i class="fa fa-caret-left"></i>',
            '<i class="fa fa-caret-right"></i>',
          ],
          dots: false,
          items: items,
          responsiveRefreshRate: 200,
          responsive: {
            0: { items: 1 },
            481: { items: items + 1 > 1 ? items + 1 : 1 },
            601: { items: items + 2 > 1 ? items + 2 : 1 },
            992: { items: items },
          },
        };
        if (additional1 == "rtl") sliderOptions["rtl"] = true;
        $(this).owlCarousel(sliderOptions);
        // }
      });
    }


  </script>
  {% for i in banners %}

  {% if i.bottom_right_banner == 'bottom_right_banner' %}
  {% else %}
  <div class="swiper-viewport">
    <div id="banner2" class="swiper-container">
      <!-- bottom_right_banner -->
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <a href="#"><img src="{{i.bottom_right_banner.url}}" alt="Right Banner2" class="img-responsive" /></a>
        </div>
      </div>
    </div>
  </div>
  {% endif %}
  {% endfor %}
  <script>
    if ($("#banner2 .swiper-slide").length > 1) {
      $("#banner2").swiper({
        effect: "fade",
        autoplay: 2500,
        autoplayDisableOnInteraction: false,
      });
    }
  </script>
</aside>
</div>
</div>
</div>

{% endblock body %}