@extends('layouts.app')
@section('content')
<!-- Slideshow  -->
  <div class="main-slideshow">
    <div id="rev_slider_116_1_wrapper" class="rev_slider_wrapper fullwidthbanner-container" data-alias="layer-animations" style="margin:0px auto;background-color:transparent;padding:0px;margin-top:0px;margin-bottom:0px;"> 
      <!-- START REVOLUTION SLIDER 5.0.7 auto mode -->
      <div id="rev_slider_116_1" class="rev_slider fullwidthabanner" style="display:none;" data-version="5.0.7">
        <ul>
          <li data-index="Electronics" data-transition="parallaxhorizontal" data-slotamount="default"  data-easein="default" data-easeout="default" data-masterspeed="default"  data-thumb="images/slider/t-slider-bg2.jpg"  data-rotate="0"  data-fstransition="fade" data-fsmasterspeed="1500" data-fsslotamount="7" data-saveperformance="off"  data-title="Electronics" data-description=""> 
            <!-- MAIN IMAGE --> 
            <img src="images/slider/slider-bg1.png"  alt="html Template"  data-bgposition="center center" data-bgfit="cover" data-bgrepeat="no-repeat" class="rev-slidebg" data-no-retina> 
            <!-- LAYER NR. 1 --> 
            <i class="tp-caption layer1 tp-resizeme" 
                                    id="slide1-layer1" 
                                    data-x="center" data-hoffset="" 
                                    data-y="300" data-voffset="-150" 
                                    data-width="['auto','auto','auto','auto']"
                                    data-height="['auto','auto','auto','auto']"
                                    data-transform_idle="o:1;"
                                    data-transform_in="x:[105%];z:0;rX:45deg;rY:0deg;rZ:90deg;sX:1;sY:1;skX:0;skY:0;s:2000;e:Power4.easeInOut;" 
                                    data-transform_out="s:1000;e:Power2.easeInOut;s:1000;e:Power2.easeInOut;" 
                                    data-mask_in="x:0px;y:0px;s:inherit;e:inherit;" 
                                    data-start="1000" 
                                    data-splitin="chars" 
                                    data-splitout="none" 
                                    data-responsive_offset="on" 
                                    data-elementdelay="0.05" 
                                    style="font-size:24px; letter-spacing:1px; text-transform:uppercase; font-style:normal; color:#f8f8f8;"></i> 
            <!-- LAYER NR. 2 -->
            <div class="tp-caption layer2 tp-resizeme" 
                                    id="slide1-layer2" 
                                    data-x="center" data-hoffset="" 
                                    data-y="330" data-voffset="" 
                                    data-width="['auto','auto','auto','auto']"
                                    data-height="['auto','auto','auto','auto']"
                                    data-transform_idle="o:1;tO:0% 50%;"
                                    data-transform_in="x:[-175%];y:0px;z:0;rX:0;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;opacity:0.01;s:3000;e:Power3.easeOut;" 
                                    data-transform_out="s:1000;e:Power3.easeInOut;s:1000;e:Power3.easeInOut;" 
                                    data-mask_in="x:[100%];y:0;s:inherit;e:inherit;" 
                                    data-start="2000" 
                                    data-splitin="none" 
                                    data-splitout="none" 
                                    data-responsive_offset="on" 
                                    data-elementdelay="0.05" 
                                    style="font-size:55px;letter-spacing:1px; text-transform:uppercase;">Easter Collection</div>
            <!-- LAYER NR. 3 --> 
            <i class="tp-caption layer3 tp-resizeme" 
                                    id="slide1-layer3" 
                                    data-x="center" data-hoffset="" 
                                    data-y="420" data-voffset="" 
                                    data-width="['auto','auto','auto','auto']"
                                    data-height="['auto','auto','auto','auto']"
                                    data-transform_idle="o:1;"
                                    data-transform_in="y:[-100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;s:1500;e:Power3.easeInOut;" 
                                    data-transform_out="s:1000;e:Power3.easeInOut;s:1000;e:Power3.easeInOut;" 
                                    data-mask_in="x:0px;y:0px;s:inherit;e:inherit;" 
                                    data-start="3000" 
                                    data-splitin="none" 
                                    data-splitout="none" 
                                    data-responsive_offset="on" 
                                    style="font-size:20px; letter-spacing:1px;padding:5px 20px; text-transform:uppercase; font-style:normal; font-weight:500; color:#fff;">For every battery you buy</i> 
            <!-- LAYER NR. 4 --> 
            <a href="#" class="tp-caption layer4 tp-resizeme rs-parallaxlevel-9" 
                                    id="slide1-layer4" 
                                    data-x="center" data-hoffset="" 
                                    data-y="500" data-voffset="" 
                                    data-width="['auto','auto','auto','auto']"
                                    data-height="['auto','auto','auto','auto']"
                                    data-transform_idle="o:1;"
                                    data-transform_in="y:[-100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;s:1500;e:Power3.easeInOut;" 
                                    data-transform_out="s:1000;e:Power3.easeInOut;s:1000;e:Power3.easeInOut;" 
                                    data-mask_in="x:0px;y:0px;s:inherit;e:inherit;" 
                                    data-start="3300" 
                                    data-splitin="none" 
                                    data-splitout="none" 
                                    data-responsive_offset="on" 
                                    style="font-size:15px; font-weight:600; padding:10px 25px; text-transform:uppercase;">Get Free Installation</a> </li>
                                    <li data-index="Electronics" data-transition="parallaxhorizontal" data-slotamount="default"  data-easein="default" data-easeout="default" data-masterspeed="default"  data-thumb="images/slider/t-slider-bg2.jpg"  data-rotate="0"  data-fstransition="fade" data-fsmasterspeed="1500" data-fsslotamount="7" data-saveperformance="off"  data-title="Electronics" data-description=""> 
            <!-- MAIN IMAGE --> 
            <img src="images/slider/slider-bg1.png"  alt="html Template"  data-bgposition="center center" data-bgfit="cover" data-bgrepeat="no-repeat" class="rev-slidebg" data-no-retina> 
            <!-- LAYER NR. 1 --> 
            <i class="tp-caption layer1 tp-resizeme" 
                                    id="slide1-layer1" 
                                    data-x="center" data-hoffset="" 
                                    data-y="300" data-voffset="-150" 
                                    data-width="['auto','auto','auto','auto']"
                                    data-height="['auto','auto','auto','auto']"
                                    data-transform_idle="o:1;"
                                    data-transform_in="x:[105%];z:0;rX:45deg;rY:0deg;rZ:90deg;sX:1;sY:1;skX:0;skY:0;s:2000;e:Power4.easeInOut;" 
                                    data-transform_out="s:1000;e:Power2.easeInOut;s:1000;e:Power2.easeInOut;" 
                                    data-mask_in="x:0px;y:0px;s:inherit;e:inherit;" 
                                    data-start="1000" 
                                    data-splitin="chars" 
                                    data-splitout="none" 
                                    data-responsive_offset="on" 
                                    data-elementdelay="0.05" 
                                    style="font-size:24px; letter-spacing:1px; text-transform:uppercase; font-style:normal; color:#f8f8f8;"></i> 
            <!-- LAYER NR. 2 -->
            <div class="tp-caption layer2 tp-resizeme" 
                                    id="slide1-layer2" 
                                    data-x="center" data-hoffset="" 
                                    data-y="330" data-voffset="" 
                                    data-width="['auto','auto','auto','auto']"
                                    data-height="['auto','auto','auto','auto']"
                                    data-transform_idle="o:1;tO:0% 50%;"
                                    data-transform_in="x:[-175%];y:0px;z:0;rX:0;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;opacity:0.01;s:3000;e:Power3.easeOut;" 
                                    data-transform_out="s:1000;e:Power3.easeInOut;s:1000;e:Power3.easeInOut;" 
                                    data-mask_in="x:[100%];y:0;s:inherit;e:inherit;" 
                                    data-start="2000" 
                                    data-splitin="none" 
                                    data-splitout="none" 
                                    data-responsive_offset="on" 
                                    data-elementdelay="0.05" 
                                    style="font-size:55px;letter-spacing:1px; text-transform:uppercase;">Easter Collection</div>
            <!-- LAYER NR. 3 --> 
            <i class="tp-caption layer3 tp-resizeme" 
                                    id="slide1-layer3" 
                                    data-x="center" data-hoffset="" 
                                    data-y="420" data-voffset="" 
                                    data-width="['auto','auto','auto','auto']"
                                    data-height="['auto','auto','auto','auto']"
                                    data-transform_idle="o:1;"
                                    data-transform_in="y:[-100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;s:1500;e:Power3.easeInOut;" 
                                    data-transform_out="s:1000;e:Power3.easeInOut;s:1000;e:Power3.easeInOut;" 
                                    data-mask_in="x:0px;y:0px;s:inherit;e:inherit;" 
                                    data-start="3000" 
                                    data-splitin="none" 
                                    data-splitout="none" 
                                    data-responsive_offset="on" 
                                    style="font-size:20px; letter-spacing:1px;padding:5px 20px; text-transform:uppercase; font-style:normal; font-weight:500; color:#fff;">For every battery you buy</i> 
            <!-- LAYER NR. 4 --> 
            <a href="#" class="tp-caption layer4 tp-resizeme rs-parallaxlevel-9" 
                                    id="slide1-layer4" 
                                    data-x="center" data-hoffset="" 
                                    data-y="500" data-voffset="" 
                                    data-width="['auto','auto','auto','auto']"
                                    data-height="['auto','auto','auto','auto']"
                                    data-transform_idle="o:1;"
                                    data-transform_in="y:[-100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;s:1500;e:Power3.easeInOut;" 
                                    data-transform_out="s:1000;e:Power3.easeInOut;s:1000;e:Power3.easeInOut;" 
                                    data-mask_in="x:0px;y:0px;s:inherit;e:inherit;" 
                                    data-start="3300" 
                                    data-splitin="none" 
                                    data-splitout="none" 
                                    data-responsive_offset="on" 
                                    style="font-size:15px; font-weight:600; padding:10px 25px; text-transform:uppercase;">Get Free Installation</a> </li>
          {{-- <li data-index="Fashion" data-transition="parallaxhorizontal" data-slotamount="default"  data-easein="default" data-easeout="default" data-masterspeed="default"  data-thumb="images/slider/t-slider-bg1.jpg"  data-rotate="0"  data-fstransition="fade" data-fsmasterspeed="1500" data-fsslotamount="7" data-saveperformance="off"  data-title="Fashion" data-description=""> 
            <!-- MAIN IMAGE --> 
            <img src="images/slider/slider-bg1.png"  alt="html Template"  data-bgposition="center center" data-bgfit="cover" data-bgrepeat="no-repeat" class="rev-slidebg" data-no-retina> 
            <!-- LAYER NR. 1 --> 
            <i class="tp-caption layer1 tp-resizeme" 
                                    id="slide3-layer1" 
                                     data-x="100" data-hoffset="" 
                                     data-y="250" data-voffset="-70" 
                                    data-width="['auto','auto','auto','auto']"
                                    data-height="['auto','auto','auto','auto']"
                                    data-transform_idle="o:1;tO:0% 50%;" 
                                     data-transform_in="x:-50px;rY:-90deg;opacity:0;s:2000;e:Back.easeOut;" 
                                     data-transform_out="s:1000;e:Power2.easeInOut;s:1000;e:Power2.easeInOut;" 
                                    data-start="2000" 
                                    data-splitin="lines" 
                                    data-splitout="none" 
                                    data-responsive_offset="on" 
                                    data-elementdelay="0.05" 
                                    style="font-size:24px; letter-spacing:1px;  text-transform:uppercase; color:#f8f8f8; font-style:normal;">Special offer sale up to 50% off</i> 
            <!-- LAYER NR. 2 -->
            <div class="tp-caption layer2 tp-resizeme" 
                                    id="slide3-layer2" 
                                    data-x="0" data-hoffset="" 
                                    data-y="280" data-voffset="" 
                                    data-width="['auto','auto','auto','auto']"
                                    data-height="['auto','auto','auto','auto']"
                                    data-transform_idle="o:1;tO:0% 50%;"
                                    data-transform_in="x:[-175%];y:0px;z:0;rX:0;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;opacity:0.01;s:3000;e:Power3.easeOut;" 
                                    data-transform_out="s:1000;e:Power3.easeInOut;s:1000;e:Power3.easeInOut;" 
                                    data-mask_in="x:[100%];y:0;s:inherit;e:inherit;" 
                                    data-start="2000" 
                                    data-splitin="none" 
                                    data-splitout="none" 
                                    data-responsive_offset="on" 
                                    data-elementdelay="0.05" 
                                    style="font-size:55px;letter-spacing:1px; text-transform:uppercase; color:#fff;">For All purchases beyond 5M</div>
            <!-- LAYER NR. 3 --> 
            <i class="tp-caption layer7 tp-resizeme" 
                                    id="slide3-layer3" 
                                    data-x="100" data-hoffset="" 
                                    data-y="360" data-voffset="" 
                                    data-width="['auto','auto','auto','auto']"
                                    data-height="['auto','auto','auto','auto']"
                                    data-transform_idle="o:1;"
                                    data-transform_in="y:[-100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;s:1500;e:Power3.easeInOut;" 
                                    data-transform_out="s:1000;e:Power3.easeInOut;s:1000;e:Power3.easeInOut;" 
                                    data-mask_in="x:0px;y:0px;s:inherit;e:inherit;" 
                                    data-start="3000" 
                                    data-splitin="none" 
                                    data-splitout="none" 
                                    data-responsive_offset="on" 
                                    style="font-size:20px; letter-spacing:1px;padding:5px 20px; font-style:normal; font-weight:600;  text-transform:uppercase; color:#f5f5f5;">Starting 1st March - 1<sup>st</sup> April</i> 
            <!-- LAYER NR. 4 --> 
            <a href="#" class="tp-caption layer4 tp-resizeme rs-parallaxlevel-9" 
                                    id="slide3-layer4" 
                                    data-x="250" data-hoffset="" 
                                    data-y="410" data-voffset="" 
                                    data-width="['auto','auto','auto','auto']"
                                    data-height="['auto','auto','auto','auto']"
                                    data-transform_idle="o:1;"
                                    data-transform_in="y:[-100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;s:1500;e:Power3.easeInOut;" 
                                    data-transform_out="s:1000;e:Power3.easeInOut;s:1000;e:Power3.easeInOut;" 
                                    data-mask_in="x:0px;y:0px;s:inherit;e:inherit;" 
                                    data-start="3300" 
                                    data-splitin="none" 
                                    data-splitout="none" 
                                    data-responsive_offset="on" 
                                    style="font-size:15px; font-weight:500; padding:10px 25px; text-transform:uppercase;">You Get 10% for every next 1M</a> </li>
          <li data-index="Men" data-transition="parallaxhorizontal" data-slotamount="default"  data-easein="default" data-easeout="default" data-masterspeed="default"  data-thumb="images/slider/t-slider-bg4.jpg"  data-rotate="0"  data-fstransition="fade" data-fsmasterspeed="1500" data-fsslotamount="7" data-saveperformance="off"  data-title="Men" data-description=""> 
            <!-- MAIN IMAGE --> 
            <img src="images/slider/slider-bg4.jpg"  alt="html Template"  data-bgposition="center center" data-bgfit="cover" data-bgrepeat="no-repeat" class="rev-slidebg" data-no-retina>
            <div class="tp-caption layer2 tp-resizeme" 
                                    id="slide6-layer2" 
                                    data-x="0" data-hoffset="" 
                                    data-y="270" data-voffset="" 
                                    data-width="['auto','auto','auto','auto']"
                                    data-height="['auto','auto','auto','auto']"
                                    data-transform_idle="o:1;" 
                                     data-transform_in="x:{-50,50};y:{-5,50};rX:{-90,90};rY:{-90,90};rZ:{-360,360};sX:0;sY:0;opacity:0;s:2000;e:Power4.easeInOut;" 
                                     data-transform_out="s:1000;e:Power2.easeInOut;s:1000;e:Power2.easeInOut;" 
                                    data-start="3490" 
                                    data-splitin="chars" 
                                    data-splitout="none" 
                                    data-responsive_offset="on" 
                                    data-elementdelay="0.05"                                    style="font-size:50px;letter-spacing:0; color:#ff3366; text-transform:uppercase;">Super support</div>
            <!-- LAYER NR. 3 -->
            <div class="tp-caption layer7 tp-resizeme" 
                                    id="slide6-layer3" 
                                     data-x="0" data-hoffset="" 
                                     data-y="340" data-voffset="-70" 
                                    data-width="['auto','auto','auto','auto']"
                                    data-height="['auto','auto','auto','auto']"
                                    data-transform_idle="o:1;"
                                     data-transform_in="x:[-105%];z:0;rX:0deg;rY:0deg;rZ:-90deg;sX:1;sY:1;skX:0;skY:0;s:2000;e:Power4.easeInOut;" 
                                     data-transform_out="s:1000;e:Power2.easeInOut;s:1000;e:Power2.easeInOut;" 
                                     data-mask_in="x:0px;y:0px;s:inherit;e:inherit;" 
                                    data-start="2000" 
                                    data-splitin="chars" 
                                    data-splitout="none" 
                                    data-responsive_offset="on" 
                                    data-elementdelay="0.05" 
                                    style="font-size:24px; letter-spacing:2px; text-transform:uppercase; color:#333;">Get instant on-site and on-call support</div>
            <!-- LAYER NR. 4 --> 
            <a href="#" class="tp-caption layer9 tp-resizeme rs-parallaxlevel-9" 
                                    id="slide6-layer4" 
                                    data-x="0" data-hoffset="" 
                                    data-y="400" data-voffset="" 
                                    data-width="['auto','auto','auto','auto']"
                                    data-height="['auto','auto','auto','auto']"
                                    data-transform_idle="o:1;"
                                    data-transform_in="y:[-100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;s:1500;e:Power3.easeInOut;" 
                                    data-transform_out="s:1000;e:Power3.easeInOut;s:1000;e:Power3.easeInOut;" 
                                    data-mask_in="x:0px;y:0px;s:inherit;e:inherit;" 
                                    data-start="3300" 
                                    data-splitin="none" 
                                    data-splitout="none" 
                                    data-responsive_offset="on" 
                                    style="font-size:15px; font-weight:600; padding:10px 25px; text-transform:uppercase;">Call Now</a> 
            
            <!-- LAYER NR. 5 --> 
            <a href="#" class="tp-caption layer4 tp-resizeme rs-parallaxlevel-9" 
                                    id="slide6-layer5" 
                                    data-x="160" data-hoffset="" 
                                    data-y="400" data-voffset="" 
                                    data-width="['auto','auto','auto','auto']"
                                    data-height="['auto','auto','auto','auto']"
                                    data-transform_idle="o:1;"
                                    data-transform_in="y:[-100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;s:1500;e:Power3.easeInOut;" 
                                    data-transform_out="s:1000;e:Power3.easeInOut;s:1000;e:Power3.easeInOut;" 
                                    data-mask_in="x:0px;y:0px;s:inherit;e:inherit;" 
                                    data-start="3600" 
                                    data-splitin="none" 
                                    data-splitout="none" 
                                    data-responsive_offset="on" 
                                    style="font-size:15px; font-weight:600; padding:10px 25px; text-transform:uppercase;">Book Vist</a> </li> --}}
        </ul>
      </div>
    </div>
  </div>
  
  <!-- All products-->
  
  <div class="container">
    <div class="home-tab">
      <div class="tab-title text-center">
        <h2>Top Trending</h2>
      </div>
      <div class="title-divider"><span></span></div>
      <p class="sub-title text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      <ul class="nav home-nav-tabs home-product-tabs">
        <li class="active"><a href="#all" data-toggle="tab" aria-expanded="false">All</a></li>
        @foreach($trending as $trend)
          <li><a href="#{{'trend'.$trend->id}}" data-toggle="tab" aria-expanded="false">{{ $trend->name }}</a></li>
        @endforeach
      </ul>
      <div id="productTabContent" class="tab-content">
        <div class="tab-pane active in" id="all">
          <div class="featured-pro">
            <div class="slider-items-products">
              <div id="all-slider" class="product-flexslider hidden-buttons">
                <div class="slider-items slider-width-col4">
                  @foreach($trending as $trend)
                    @foreach($trend->trending as $item)
                      <div class="product-item">
                    <div class="item-inner">
                      <div class="product-thumbnail">
                        <div class="icon-sale-label sale-left">Sale</div>
                        <div class="icon-new-label new-right">New</div>
                        <div class="pr-img-area"> <a title="{{ $item->name }}" href="{{ url('items/'.$item->id) }}">
                          <figure> <img class="first-img" src="{{ asset('storage/items/'.$item->pic) }}" alt="{{ $item->name }}" onerror="this.onerror=null;this.src='{{ asset('storage/items/logo.png') }}';"> <img class="hover-img" src="{{ asset('storage/items/'.$item->pic) }}" alt="{{ $item->name }}"  onerror="this.onerror=null;this.src='{{ asset('storage/items/logo.png') }}';"></figure>
                          </a> </div>
                        <div class="pr-info-area">
                          <div class="pr-button">
                            <div class="mt-button add_to_wishlist"> <a href="wishlist.html"> <i class="fa fa-heart"></i> </a> </div>
                            <div class="mt-button add_to_compare"> <a href="compare.html"> <i class="fa fa-signal"></i> </a> </div>
                            <div class="mt-button quick-view"> <a href="quick_view.html"> <i class="fa fa-search"></i> </a> </div>
                          </div>
                        </div>
                      </div>
                      <div class="item-info">
                        <div class="info-inner">
                          <div class="item-title"> <a title="Ipsums Dolors Untra" href="{{ url('items/'.$item->id) }}">{{ $item->name }} </a> </div>
                          <div class="item-content">
                            <div class="rating"> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star-o"></i> <i class="fa fa-star-o"></i> </div>
                            <div class="item-price">
                              <div class="price-box"> <span class="regular-price"> <span class="price">UGX {{ number_format($item->rate) }}</span> </span> </div>
                            </div>
                            <div class="pro-action">
                              <button type="button" class="add-to-cart" id="item_{{ $item->id }}" item-id="{{ $item->id }}" item-pic="{{ $item->pic }}" item-name="{{ $item->name }}" item-pic="{{ $item->pic }}" item-price="{{ (is_null($item->discounted_rate) ? $item->rate : $item->discounted_rate ) }}"> <i class="fa fa-shopping-basket"></i><span> Add to Cart</span> </button>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                    @endforeach
                  @endforeach
                </div>
              </div>
            </div>
          </div>
        </div>
        @foreach($trending as $trend)
          <div class="tab-pane fade" id="{{ 'trend'.$trend->id}}">
          <div class="top-sellers-pro">
            <div class="slider-items-products">
              <div id="women-slider" class="product-flexslider hidden-buttons">
                <div class="slider-items slider-width-col4 ">
                  @foreach($trend->trending as $item)
                    <div class="product-item">
                    <div class="item-inner">
                      <div class="product-thumbnail">
                        <div class="icon-sale-label sale-left">Sale</div>
                        <div class="icon-new-label new-right">New</div>
                        <div class="pr-img-area"> <a title="{{ $item->name }}" href="{{ url('items/'.$item->id) }}">
                          <figure> <img class="first-img" src="{{ asset('storage/items/'.$item->pic) }}" alt="{{ $item->name }}" onerror="this.onerror=null;this.src='{{ asset('storage/items/logo.png') }}';"> <img class="hover-img" src="{{ asset('storage/items/'.$item->pic) }}" alt="{{ $item->name }}" onerror="this.onerror=null;this.src='{{ asset('storage/items/logo.png') }}';"></figure>
                          </a> </div>
                        <div class="pr-info-area">
                          <div class="pr-button">
                            <div class="mt-button add_to_wishlist"> <a href="wishlist.html"> <i class="fa fa-heart"></i> </a> </div>
                            <div class="mt-button add_to_compare"> <a href="compare.html"> <i class="fa fa-signal"></i> </a> </div>
                            <div class="mt-button quick-view"> <a href="quick_view.html"> <i class="fa fa-search"></i> </a> </div>
                          </div>
                        </div>
                      </div>
                      <div class="item-info">
                        <div class="info-inner">
                          <div class="item-title"> <a title="Ipsums Dolors Untra" href="single_product.html">{{ $item->name }} </a> </div>
                          <div class="item-content">
                            <div class="rating"> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star-o"></i> <i class="fa fa-star-o"></i> </div>
                            <div class="item-price">
                              <div class="price-box"> <span class="regular-price"> <span class="price">UGX {{ number_format($item->rate) }}</span> </span> </div>
                            </div>
                            <div class="pro-action">
                              <button type="button" class="add-to-cart" id="item_{{ $item->id }}" item-id="{{ $item->id }}" item-name="{{ $item->name }}" item-pic="{{ $item->pic }}" item-price="{{ (is_null($item->discounted_rate) ? $item->rate : $item->discounted_rate ) }}"> <i class="fa fa-shopping-basket"></i><span> Add to Cart</span> </button>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  @endforeach
                </div>
              </div>
            </div>
          </div>
        </div>
        @endforeach
      </div>
    </div>
  </div>
  <div class="inner-box">
    <div class="container">
      <div class="row"> 
        <!-- Banner -->
        <div class="col-md-3 top-banner hidden-sm">
          <div class="jtv-banner3">
            <div class="jtv-banner3-inner"><a href="#"><img src="images/invertor.jpg" alt="HTML template"></a>
              <div class="hover_content">
                <div class="hover_data">
                  <div class="title"> Invetors </div>
                  <div class="desc-text">Season On Sale</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- Best Sale -->
        <div class="col-sm-12 col-md-9 jtv-best-sale">
          <div class="jtv-best-sale-list">
            <div class="wpb_wrapper">
              <div class="best-title text-left">
                <h2>New Arrival</h2>
              </div>
              <p class="sub-title text-left">Some of our products that have just arrived this month</p>
            </div>
            <div class="slider-items-products">
              <div id="jtv-best-sale-slider" class="product-flexslider">
                <div class="slider-items">
                  @foreach($arrivals as $arrival)
                    <ul class="products-grid">
                    @foreach($arrival as $item)
                      <li class="item col-lg-6 col-md-6 col-sm-6 col-xs-12">
                      <div class="item-inner">
                        <div class="item-img"> <a class="product-image" title="{{ $item->name }}" href="{{ url('items/'.$item->id) }}"> <img alt="{{ $item->name }}" src="{{ asset('storage/items/'.$item->pic) }}" onerror="this.onerror=null;this.src='{{ asset('storage/items/logo.png') }}';"> </a> </div>
                        <div class="item-info">
                          <div class="info-inner">
                            <div class="item-title"> <a title="{{ $item->name }}" href="{{ url('items/'.$item->id) }}">{{ $item->name }} </a> </div>
                            <div class="rating"><span class="price-label">{{ $item->availability }}</span>
                            </div>
                            <div class="item-price">
                              <div class="price-box">
                                <p class="special-price"> <span class="price-label">Special Price</span> <span class="price"> {{ isset($item->discounted_rate) ? number_format($item->discounted_rate) : '' }} </span> </p>
                                <p class="old-price"> 
                                  @if(isset($item->discounted_rate))
                                  <span class="price-label">Regular Price:</span> <span class="price"> {{ number_format($item->rate) }} </span>
                                  @endif
                                </p>
                              </div>
                            </div>
                            <div class="pro-action">
                              <button type="button" class="add-to-cart"> <i class="fa fa-shopping-basket"></i><span> Add to Cart</span></button>
                            </div>
                            <div class="pr-button-hover">
                              <div class="mt-button add_to_wishlist"> <a href="wishlist.html"> <i class="fa fa-heart-o"></i> </a> </div>
                              <div class="mt-button add_to_compare"> <a href="compare.html"> <i class="fa fa-link"></i> </a> </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </li>
                    @endforeach
                  </ul>
                  @endforeach
                  
                  {{-- <ul class="products-grid">
                    <li class="item col-lg-6 col-md-6 col-sm-6 col-xs-12">
                      <div class="item-inner">
                        <div class="item-img"> <a class="product-image" title="Retis lapen casen" href="product_detail.html"> <img alt="HTML template" src="images/products/product-fashion-15.jpg"> </a> </div>
                        <div class="item-info">
                          <div class="info-inner">
                            <div class="item-title"> <a title="Product title here" href="single_product.html">Product title here </a> </div>
                            <div class="rating"> <i class="fa fa-star-o"></i> <i class="fa fa-star-o"></i> <i class="fa fa-star-o"></i> <i class="fa fa-star-o"></i> <i class="fa fa-star-o"></i> </div>
                            <div class="item-price">
                              <div class="price-box"> <span class="regular-price"> <span class="price">$125.00</span> </span> </div>
                            </div>
                            <div class="pro-action">
                              <button type="button" class="add-to-cart"> <i class="fa fa-shopping-basket"></i><span> Add to Cart</span></button>
                            </div>
                            <div class="pr-button-hover">
                              <div class="mt-button add_to_wishlist"> <a href="wishlist.html"> <i class="fa fa-heart-o"></i> </a> </div>
                              <div class="mt-button add_to_compare"> <a href="compare.html"> <i class="fa fa-link"></i> </a> </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </li>
                    <li class="item col-lg-6 col-md-6 col-sm-6 col-xs-12">
                      <div class="item-inner">
                        <div class="item-img"> <a class="product-image" title="Retis lapen casen" href="product_detail.html"> <img alt="HTML template" src="images/products/product-fashion-17.jpg"> </a> </div>
                        <div class="item-info">
                          <div class="info-inner">
                            <div class="item-title"> <a title="Product title here" href="single_product.html">Product title here </a> </div>
                            <div class="rating"> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star-o"></i> <i class="fa fa-star-o"></i> <i class="fa fa-star-o"></i> </div>
                            <div class="item-price">
                              <div class="price-box">
                                <p class="special-price"> <span class="price-label">Special Price</span> <span class="price"> $456.00 </span> </p>
                                <p class="old-price"> <span class="price-label">Regular Price:</span> <span class="price"> $567.00 </span> </p>
                              </div>
                            </div>
                            <div class="pro-action">
                              <button type="button" class="add-to-cart"> <i class="fa fa-shopping-basket"></i><span> Add to Cart</span></button>
                            </div>
                            <div class="pr-button-hover">
                              <div class="mt-button add_to_wishlist"> <a href="wishlist.html"> <i class="fa fa-heart-o"></i> </a> </div>
                              <div class="mt-button add_to_compare"> <a href="compare.html"> <i class="fa fa-link"></i> </a> </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </li>
                    <li class="item col-lg-6 col-md-6 col-sm-6 col-xs-12">
                      <div class="item-inner">
                        <div class="item-img"> <a class="product-image" title="Retis lapen casen" href="product_detail.html"> <img alt="HTML template" src="images/products/product-fashion-19.jpg"> </a> </div>
                        <div class="item-info">
                          <div class="info-inner">
                            <div class="item-title"> <a title="Product title here" href="single_product.html">Product title here </a> </div>
                            <div class="rating"> <i class="fa fa-star-o"></i> <i class="fa fa-star-o"></i> <i class="fa fa-star-o"></i> <i class="fa fa-star-o"></i> <i class="fa fa-star-o"></i> </div>
                            <div class="item-price">
                              <div class="price-box"> <span class="regular-price"> <span class="price">$99.99</span> </span> </div>
                            </div>
                            <div class="pro-action">
                              <button type="button" class="add-to-cart"> <i class="fa fa-shopping-basket"></i><span> Add to Cart</span></button>
                            </div>
                            <div class="pr-button-hover">
                              <div class="mt-button add_to_wishlist"> <a href="wishlist.html"> <i class="fa fa-heart-o"></i> </a> </div>
                              <div class="mt-button add_to_compare"> <a href="compare.html"> <i class="fa fa-link"></i> </a> </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </li>
                    <li class="item col-lg-6 col-md-6 col-sm-6 col-xs-12">
                      <div class="item-inner">
                        <div class="item-img"> <a class="product-image" title="Retis lapen casen" href="product_detail.html"> <img alt="HTML template" src="images/products/product-fashion-8.jpg"> </a> </div>
                        <div class="item-info">
                          <div class="info-inner">
                            <div class="item-title"> <a title="Product title here" href="single_product.html">Product title here </a> </div>
                            <div class="rating"> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star-o"></i> <i class="fa fa-star-o"></i> <i class="fa fa-star-o"></i> </div>
                            <div class="item-price">
                              <div class="price-box">
                                <p class="special-price"> <span class="price-label">Special Price</span> <span class="price"> $399.00 </span> </p>
                                <p class="old-price"> <span class="price-label">Regular Price:</span> <span class="price"> $499.00 </span> </p>
                              </div>
                            </div>
                            <div class="pro-action">
                              <button type="button" class="add-to-cart"> <i class="fa fa-shopping-basket"></i><span> Add to Cart</span></button>
                            </div>
                            <div class="pr-button-hover">
                              <div class="mt-button add_to_wishlist"> <a href="wishlist.html"> <i class="fa fa-heart-o"></i> </a> </div>
                              <div class="mt-button add_to_compare"> <a href="compare.html"> <i class="fa fa-link"></i> </a> </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </li>
                  </ul>
                  <ul class="products-grid">
                    <li class="item col-lg-6 col-md-6 col-sm-6 col-xs-12">
                      <div class="item-inner">
                        <div class="item-img"> <a class="product-image" title="Retis lapen casen" href="product_detail.html"> <img alt="HTML template" src="images/products/product-fashion-2.jpg"> </a> </div>
                        <div class="item-info">
                          <div class="info-inner">
                            <div class="item-title"> <a title="Product title here" href="single_product.html">Product title here </a> </div>
                            <div class="rating"> <i class="fa fa-star-o"></i> <i class="fa fa-star-o"></i> <i class="fa fa-star-o"></i> <i class="fa fa-star-o"></i> <i class="fa fa-star-o"></i> </div>
                            <div class="item-price">
                              <div class="price-box"> <span class="regular-price"> <span class="price">$125.00</span> </span> </div>
                            </div>
                            <div class="pro-action">
                              <button type="button" class="add-to-cart"> <i class="fa fa-shopping-basket"></i><span> Add to Cart</span></button>
                            </div>
                            <div class="pr-button-hover">
                              <div class="mt-button add_to_wishlist"> <a href="wishlist.html"> <i class="fa fa-heart-o"></i> </a> </div>
                              <div class="mt-button add_to_compare"> <a href="compare.html"> <i class="fa fa-link"></i> </a> </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </li>
                    <li class="item col-lg-6 col-md-6 col-sm-6 col-xs-12">
                      <div class="item-inner">
                        <div class="item-img"> <a class="product-image" title="Retis lapen casen" href="product_detail.html"> <img alt="HTML template" src="images/products/product-fashion-3.jpg"> </a> </div>
                        <div class="item-info">
                          <div class="info-inner">
                            <div class="item-title"> <a title="Product title here" href="single_product.html">Product title here </a> </div>
                            <div class="rating"> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star-o"></i> <i class="fa fa-star-o"></i> <i class="fa fa-star-o"></i> </div>
                            <div class="item-price">
                              <div class="price-box">
                                <p class="special-price"> <span class="price-label">Special Price</span> <span class="price"> $456.00 </span> </p>
                                <p class="old-price"> <span class="price-label">Regular Price:</span> <span class="price"> $567.00 </span> </p>
                              </div>
                            </div>
                            <div class="pro-action">
                              <button type="button" class="add-to-cart"> <i class="fa fa-shopping-basket"></i><span> Add to Cart</span></button>
                            </div>
                            <div class="pr-button-hover">
                              <div class="mt-button add_to_wishlist"> <a href="wishlist.html"> <i class="fa fa-heart-o"></i> </a> </div>
                              <div class="mt-button add_to_compare"> <a href="compare.html"> <i class="fa fa-link"></i> </a> </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </li>
                    <li class="item col-lg-6 col-md-6 col-sm-6 col-xs-12">
                      <div class="item-inner">
                        <div class="item-img"> <a class="product-image" title="Retis lapen casen" href="product_detail.html"> <img alt="HTML template" src="images/products/product-fashion-3.jpg"> </a> </div>
                        <div class="item-info">
                          <div class="info-inner">
                            <div class="item-title"> <a title="Product title here" href="single_product.html">Product title here </a> </div>
                            <div class="rating"> <i class="fa fa-star-o"></i> <i class="fa fa-star-o"></i> <i class="fa fa-star-o"></i> <i class="fa fa-star-o"></i> <i class="fa fa-star-o"></i> </div>
                            <div class="item-price">
                              <div class="price-box"> <span class="regular-price"> <span class="price">$99.99</span> </span> </div>
                            </div>
                            <div class="pro-action">
                              <button type="button" class="add-to-cart"> <i class="fa fa-shopping-basket"></i><span> Add to Cart</span></button>
                            </div>
                            <div class="pr-button-hover">
                              <div class="mt-button add_to_wishlist"> <a href="wishlist.html"> <i class="fa fa-heart-o"></i> </a> </div>
                              <div class="mt-button add_to_compare"> <a href="compare.html"> <i class="fa fa-link"></i> </a> </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </li>
                    <li class="item col-lg-6 col-md-6 col-sm-6 col-xs-12">
                      <div class="item-inner">
                        <div class="item-img"> <a class="product-image" title="Retis lapen casen" href="product_detail.html"> <img alt="HTML template" src="images/products/product-fashion-4.jpg"> </a> </div>
                        <div class="item-info">
                          <div class="info-inner">
                            <div class="item-title"> <a title="Product title here" href="single_product.html">Product title here </a> </div>
                            <div class="rating"> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star-o"></i> <i class="fa fa-star-o"></i> <i class="fa fa-star-o"></i> </div>
                            <div class="item-price">
                              <div class="price-box">
                                <p class="special-price"> <span class="price-label">Special Price</span> <span class="price"> $399.00 </span> </p>
                                <p class="old-price"> <span class="price-label">Regular Price:</span> <span class="price"> $499.00 </span> </p>
                              </div>
                            </div>
                            <div class="pro-action">
                              <button type="button" class="add-to-cart"> <i class="fa fa-shopping-basket"></i><span> Add to Cart</span></button>
                            </div>
                            <div class="pr-button-hover">
                              <div class="mt-button add_to_wishlist"> <a href="wishlist.html"> <i class="fa fa-heart-o"></i> </a> </div>
                              <div class="mt-button add_to_compare"> <a href="compare.html"> <i class="fa fa-link"></i> </a> </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </li>
                  </ul> --}}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="daily-deal-section daily-deal-parallax">
    <div class="container">
      <div class="row"> 
        
        <!-- daily deal section-->
        <div class="col-md-12">
          <div class="daily-deal">
            <h3 class="deal-title">Deals of the Week</h3>
            <div class="title-divider"><span></span></div>
            <p>Grab one of the best deals we have this week. </p>
            <div class="box-timer">
              <div class="time" data-countdown="countdown" data-date="09-30-2025-10-20-50"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="inner-box featured-products">
    <div class="container">
      <div class="row"> 
        
        <!-- Best Sale -->
        <div class="col-sm-12 col-md-9 jtv-best-sale">
          <div class="jtv-best-sale-list">
            <div class="wpb_wrapper">
              <div class="best-title text-right">
                <h2>Featured Products</h2>
              </div>
              <p class="sub-title text-right">Some of our featured products</p>
            </div>
            <div class="slider-items-products">
              <div id="featured-products-slider" class="product-flexslider">
                <div class="slider-items">
                  @foreach($featureds as $featured)
                    <ul class="products-grid">
                    @foreach($featured as $item)
                      <li class="item col-lg-6 col-md-6 col-sm-6 col-xs-12">
                      <div class="item-inner">
                        <div class="item-img"> <a class="product-image" title="{{ $item->name }}" href="{{ url('items/'.$item->id) }}"> <img alt="{{ $item->name }}" src="{{ asset('storage/items/'.$item->pic) }}" onerror="this.onerror=null;this.src='{{ asset('storage/items/logo.png') }}';"> </a> </div>
                        <div class="item-info">
                          <div class="info-inner">
                            <div class="item-title"> <a title="{{ $item->name }}" href="{{ url('items/'.$item->id) }}">{{ $item->name }} </a> </div>
                            <div class="rating"><span class="price-label">{{ $item->availability }}</span>
                            </div>
                            <div class="item-price">
                              <div class="price-box">
                                <p class="special-price"> <span class="price-label">Special Price</span> <span class="price"> {{ isset($item->discounted_rate) ? number_format($item->discounted_rate) : '' }} </span> </p>
                                <p class="old-price"> 
                                  @if(isset($item->discounted_rate))
                                  <span class="price-label">Regular Price:</span> <span class="price"> {{ number_format($item->rate) }} </span>
                                  @endif
                                </p>
                              </div>
                            </div>
                            <div class="pro-action">
                              <button type="button" class="add-to-cart"> <i class="fa fa-shopping-basket"></i><span> Add to Cart</span></button>
                            </div>
                            <div class="pr-button-hover">
                              <div class="mt-button add_to_wishlist"> <a href="wishlist.html"> <i class="fa fa-heart-o"></i> </a> </div>
                              <div class="mt-button add_to_compare"> <a href="compare.html"> <i class="fa fa-link"></i> </a> </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </li>
                    @endforeach
                  </ul>
                  @endforeach
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- Banner -->
        <div class="col-md-3 top-banner hidden-sm">
          <div class="jtv-banner3">
            <div class="jtv-banner3-inner"><a href="#"><img src="images/heater.jpg" alt="HTML template"></a>
              <div class="hover_content">
                <div class="hover_data">
                  <div class="title"> Heaters </div>
                  <div class="desc-text">New Collection 17 </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <!-- our clients Slider -->
  
  <div class="container">
    <div class="row">
      <div class="col-md-12 col-xs-12">
        <div class="our-clients">
          <div class="slider-items-products">
            <div id="our-clients-slider" class="product-flexslider hidden-buttons">
              <div class="slider-items slider-width-col6">
                <div class="item"><a href="#"><img src="images/brands/vision.png" alt="Image"></a> </div>
                <div class="item"><a href="#"><img src="images/brands/moil.png" alt="Image"></a> </div>
                <div class="item"><a href="#"><img src="images/brands/apa.png" alt="Image"></a> </div>
                <div class="item"><a href="#"><img src="images/brands/shel.png" alt="Image"></a> </div>
                <div class="item"><a href="#"><img src="images/brands/soliton.png" alt="Image"></a></div>
                <div class="item"><a href="#"><img src="images/brands/finix.png" alt="Image"></a> </div>
           {{--      <div class="item"><a href="#"><img src="images/brand7.png" alt="Image"></a> </div>
                <div class="item"><a href="#"><img src="images/brand8.png" alt="Image"></a> </div>
                <div class="item"><a href="#"><img src="images/brand9.png" alt="Image"></a> </div>
                <div class="item"><a href="#"><img src="images/brand10.png" alt="Image"></a> </div>
                <div class="item"><a href="#"><img src="images/brand11.png" alt="Image"></a> </div> --}}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- Bottom section -->
  <div class="bottom-section">
    <div class="container">
      <{{-- div class="row"> 
        <!-- Blog -->
        <div class="col-sm-12 col-md-12 col-xs-12 news">
          <div id="latest-news">
            <div class="page-header text-center">
              <h2>From The Blog</h2>
            </div>
            <div class="title-divider"><span></span></div>
            <p class="sub-title text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <div class="slider-items-products">
              <div id="latest-news-slider" class="product-flexslider hidden-buttons">
                <div class="slider-items slider-width-col6"> 
                  
                  <!-- Item -->
                  <div class="item">
                    <div class="jtv-blog">
                      <div class="blog-img"> <a href="blog_single_post.html"> <img class="primary-img" src="images/blog-img1.jpg" alt="HTML template"></a> <span class="moretag"></span> </div>
                      <div class="blog-content-jtv">
                        <h2><a href="blog_single_post.html">Sed do eiusmod sit amet</a></h2>
                        <span class="jtv-entry-meta"><span class="date">28 January, 2017</span> <i class="fa fa-heart-o"></i> 149 likes <span class="blog-comments"><i class="fa fa-comments-o"></i> 80 comments</span></span>
                        <p>Aliquam erat volutpat. Duis ac turpis. Donec sit amet eros. Lorem ipsum dolor sit amet, Mauris fermentum dictum magna. Sed laoreet aliquam leo. Ut tellus dolor, dapibus eget, elementum vel, cursus eleifend, elit.</p>
                        <div class="blog-action"> <a class="read-more" href="blog_single_post.html">read more <i class="fa fa-angle-right"></i></a> </div>
                      </div>
                    </div>
                  </div>
                  <!-- End Item -->
                  <div class="item">
                    <div class="jtv-blog">
                      <div class="blog-img"> <a href="blog_single_post.html"><img class="primary-img" src="images/blog-img2.jpg" alt="HTML template"></a> </div>
                      <div class="blog-content-jtv">
                        <h2><a href="blog_single_post.html">Lorem ipsum dolor sit amet</a></h2>
                        <span class="jtv-entry-meta"><span class="date">14 February, 2017</span> <i class="fa fa-heart-o"></i> 50 likes <span class="blog-comments"><i class="fa fa-comments-o"></i> 99 comments</span></span>
                        <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis. Dolor sit amet, Mauris fermentum dictum magna. Sed laoreet aliquam leo. Ut tellus dolor, dapibus eget, elementum vel.</p>
                        <div class="blog-action"> <a class="read-more" href="blog_single_post.html">read more <i class="fa fa-angle-right"></i></a> </div>
                      </div>
                    </div>
                  </div>
                  <!-- Item -->
                  <div class="item">
                    <div class="jtv-blog">
                      <div class="blog-img"> <a href="blog_single_post.html"><img class="primary-img" src="images/blog-img3.jpg" alt="HTML template"></a> </div>
                      <div class="blog-content-jtv">
                        <h2><a href="blog_single_post.html">Integer scelerisque diam vitae</a></h2>
                        <span class="jtv-entry-meta"><span class="date">5 March, 2017</span> <i class="fa fa-heart-o"></i> 29 likes <span class="blog-comments"><i class="fa fa-comments-o"></i> 44 comments</span></span>
                        <p>Ut sit amet turpis. In est arcu, sollicitudin eu, vehicula venenatis.  Aenean auctor wisi et urna. Aliquam erat volutpat. Duis ac turpis aliquam leo. Ut tellus dolor, dapibus eget, elementum vel.</p>
                        <div class="blog-action"> <a class="read-more" href="blog_single_post.html">read more <i class="fa fa-angle-right"></i></a> </div>
                      </div>
                    </div>
                  </div>
                  <!-- End Item --> 
                  
                  <!-- Item -->
                  <div class="item">
                    <div class="jtv-blog">
                      <div class="blog-img"> <a href="blog_single_post.html"> <img class="primary-img" src="images/blog-img1.jpg" alt="HTML template"></a> <span class="moretag"></span> </div>
                      <div class="blog-content-jtv">
                        <h2><a href="blog_single_post.html">Sed do eiusmod sit amet</a></h2>
                        <span class="jtv-entry-meta"><span class="date">15 April, 2017</span> <i class="pe-7s-like"></i> 5 likes <span class="blog-comments"><i class="pe-7s-comment"></i> 20 comments</span></span>
                        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam venenatis.  Aenean auctor wisi et urna. Aliquam erat volutpat. Duis ac turpis aliquam leo. Ut tellus dolor, dapibus eget, elementum vel, cursus eleifend, elit.</p>
                        <div class="blog-action"> <a class="read-more" href="blog_single_post.html">read more <i class="fa fa-angle-right"></i></a> </div>
                      </div>
                    </div>
                  </div>
                  <!-- End Item --> 
                  
                </div>
              </div>
            </div>
          </div>
        </div>
      </div> --}}
    </div>
  </div>
  <div class="footer-newsletter">
    <div class="container">
      <div class="row">
        <div class="col-md-12 col-sm-12">
          <form id="newsletter-validate-detail" method="post" action="#">
            <h3>Join Our Newsletter</h3>
            <div class="title-divider"><span></span></div>
            <p class="sub-title text-center">Get 25% off</p>
            <div class="newsletter-inner">
              <input class="newsletter-email" name='Email' placeholder='Enter Your Email'/>
              <button class="button subscribe" type="submit" title="Subscribe">Subscribe</button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
  <!-- service section -->
  <div class="jtv-service-area">
    <div class="container">
      <div class="row">
        <div class="col col-md-3 col-sm-6 col-xs-12">
          <div class="block-wrapper ship">
            <div class="text-des">
              <div class="icon-wrapper"><i class="fa fa-paper-plane"></i></div>
              <div class="service-wrapper">
                <h3>World-Wide Shipping</h3>
                <p>On order over $99</p>
              </div>
            </div>
          </div>
        </div>
        <div class="col col-md-3 col-sm-6 col-xs-12 ">
          <div class="block-wrapper return">
            <div class="text-des">
              <div class="icon-wrapper"><i class="fa fa-rotate-right"></i></div>
              <div class="service-wrapper">
                <h3>100% secure payments</h3>
                <p>Credit/ Debit Card/ Banking </p>
              </div>
            </div>
          </div>
        </div>
        <div class="col col-md-3 col-sm-6 col-xs-12">
          <div class="block-wrapper support">
            <div class="text-des">
              <div class="icon-wrapper"><i class="fa fa-umbrella"></i></div>
              <div class="service-wrapper">
                <h3>Support 24/7</h3>
                <p>Call us: ( +123 ) 456 789</p>
              </div>
            </div>
          </div>
        </div>
        <div class="col col-md-3 col-sm-6 col-xs-12">
          <div class="block-wrapper user">
            <div class="text-des">
              <div class="icon-wrapper"><i class="fa fa-tags"></i></div>
              <div class="service-wrapper">
                <h3>Member Discount</h3>
                <p>25% on order over $199</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <!-- Static Banner -->
  <div class="banner-static">
    <div class="container">
      <div class="row"> 
        <!-- Customers Box -->
        <div class="col-sm-6 col-xs-12">
          <div class="testimonials">
            <div class="page-header">
              <h2>What Our Customers Say</h2>
            </div>
            <div class="slider-items-products">
              <div id="testimonials-slider" class="product-flexslider hidden-buttons home-testimonials">
                <div class="slider-items slider-width-col4 ">
                  <div class="holder">
                    <blockquote>I am extremely satisfied with my purchase of your battery. Your customer service was excellent and I would highly recommend your products to anyone in need of a reliable battery</blockquote>
                    <div class="thumb"> <img  alt="testimonials img"> </div>
                    <div class="holder-info"> <strong class="name">Oboth Micheal</strong> <strong class="designation">CEO, Tasha Consults</strong></div>
                  </div>
                  <div class="holder">
                    <blockquote> I just wanted to express my sincere thanks for the outstanding products and service I received from your Blison energy. I am extremely satisfied and will definitely be a returning customer.</blockquote>
                    <div class="thumb"> <img src="images/testimonials-sasa.jpg" alt="testimonials img"> </div>
                    <div class="holder-info"> <strong class="name">Robert Kabushenga</strong> <strong class="designation">Former CEO, Vision Group</strong> </div>
                  </div>
                  <div class="holder">
                    <blockquote>I'm so impressed with the quality of the products I received from your company. Thank you for the excellent service and for providing such great products. I'll definitely be a repeat customer. </blockquote>
                    <div class="thumb"> <img src="images/testionials-img2.jpg" alt="testimonials img"> </div>
                    <div class="holder-info"><strong class="name">Musisi Fred</strong> <strong class="designation">CEO, Angus Technologies</strong></div>
                  </div>
                  <div class="holder">
                    <blockquote>I'm extremely satisfied with my recent purchase! The product exceeded my expectations, and the service was exceptional. I'll definitely be a repeat customer. Thank you so much</blockquote>
                    <div class="thumb"> <img src="images/estimonials-img4.jpg" alt="testimonials img"> </div>
                    {{-- <div class="holder-info"> <strong class="name">Vince Roy</strong> <strong class="designation">CEO, XYZ Softwear</strong></div> --}}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="col-sm-3 col-sms-12">
          <div class="banner-box banner-box2"> <a href="#"><img src="images/heater_static.png" alt="HTML template"></a>
            <div class="box-hover">
              <div class="banner-title">Heaters</div>
              <div class="line"></div>
              <span>Save up to 10% off</span> </div>
          </div>
        </div>
        <div class="col-sm-3 col-sms-12">
          <div class="banner-box banner-box1"> <a href="#"><img src="images/invertor_static.png" alt="HTML template"></a>
            <div class="box-hover">
              <div class="banner-title">Invertors</div>
              <div class="line"></div>
              <span>Save up to 10% off</span> </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  
@endsection