@extends('layouts.user-home')
  @section('content')  


    <!-- Main Slider Start -->
    <div class="ec-main-slider section section-space-p-30">
        <div class="ec-slider swiper-container main-slider-nav main-slider-dot">
            <!-- Main slider -->
            <div class="swiper-wrapper">
                @foreach($sliders as $slid)
                <div class="ec-slide-item swiper-slide d-flex slide-1" style="background-image:url({{asset('/uploads/sliders/'.$slid->s_image)}})">
                    <div class="overlay colo-main"></div>
                    <div class="container align-self-center">
                        <div class="row">
                            <div class="col-sm-12 align-self-center">
                                <div class="ec-slide-content slider-animation">

                                    <h1 class="ec-slide-title">{{ $slid->s_title }}</h1>
                                    <div class="ec-slide-desc">

                                        <p>{!! $slid->s_desc !!}</p>
                                        <a href="{{ $slid->s_link }}" class="btn btn-lg btn-primary">Explore Now </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                @endforeach
            </div>
            <div class="swiper-pagination swiper-pagination-white"></div>
            <div class="swiper-buttons">
                <div class="swiper-button-next"></div>
                <div class="swiper-button-prev"></div>
            </div>
        </div>
    </div>
    <!-- Main Slider End -->
    <!-- Product tab Area Start -->
    <section class="section ec-product-tab section-space-p">
        <div class="container" data-animation="fadeIn">
            <div class="row">
                <!-- Tab Start -->
                <div class="col-lg-12 col-md-12 ec-pro-tab">
                    <ul class="ec-pro-tab-nav nav w-100">
                        <li class="nav-item tab-box active"><a class="nav-link  active" data-bs-toggle="tab"
                                href="#all">
                                <img src="{{ asset('frontend/assets/images/home-tab-products/h-p-1.png') }}" class="img-fluid hide-sm"
                                    width="40px">All products</a></li>
                                    @foreach($category as $cats)
                        <li class="nav-item tab-box "><a class="nav-link " data-bs-toggle="tab" href="#catfilter{{ $cats->category_id }}">
                                <img src="{{ asset('/uploads/category_images/'.$cats->category_image) }}" class="img-fluid hide-sm"
                                    width="40px">{{ $cats->category_name }}</a></li>
                                    @endforeach
                    </ul>
                </div>
                <!-- Tab End -->
            </div>
            <div class="row margin-minus-b-15">
                <div class="col">
                    <div class="tab-content">
                        <!-- 1st Product tab start -->
                        <div class="tab-pane fade show active" id="all">
                            <div class="row">
                                @foreach($productsall as $randprod)
                                <div class="col-lg-3 col-md-6 col-sm-6 col-xs-6 col-5 ec-product-content">
                                    <div class="ec-product-inner">
                                        <div class="ec-pro-image-outer">
                                            <span class="heart ec-btn-group wishlist wishlist-cont{{$randprod->product_id}}" style="cursor:pointer;" onclick="add_wishlist_fn({{$randprod->product_id}})" id="heartwish">
                                                        <i class="fa @if($randprod->wish_list == 'true') fa-heart @else fa-heart-o @endif" aria-hidden="true"></i>
                                                    </span>
                                            <a href="{{$randprod->product_permalink}}" class="image text-center">
                                                <div class="ec-pro-image">

                                                    <img class="main-image text-center"
                                                        src="/uploads/product_img_1160x1600/{{$randprod->product_title_img}}" alt="Product" />

                                                </div>
                                            </a>
                                        </div>
                                        <div class="ec-pro-content">
                                            <a href="{{$randprod->product_permalink}}">
                                                <h6 class="ec-pro-stitle">{{ $randprod->brands->brand_name }}</h6>
                                            </a>
                                            <h5 class="ec-pro-title"><a href="{{$randprod->product_permalink}}">{{ $randprod->product_name_en }}</a></h5>
                                             
                                            
                                            <div class="ec-pro-rat-price">
                                                <span class="ec-price">
                                                    
                                                    
                                                    
                                                    <span class="new-price">QAR
                                                        @if($randprod->offer_datas)
                                                @php
                                                    $offer_details=$randprod->offer_datas;
                                                    $offer_price=$offer_details['product_offer_amount'];
                                                    $offer_percentage=$offer_details['product_offer_percentage'];
                                                                        
                                                @endphp

                                                    <s>{{$randprod->product_price}}</s> {{sprintf("%.2f",$offer_price)}}
                                                    @else
                                                        {{$randprod->product_price}}
                                                    @endif
                                                    </span>

                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                @endforeach
                            </div>
                        </div>
                        <!-- ec 1st Product tab end -->
                        <!-- ec 2nd Product tab start -->
                        @foreach($category as $catloop)
                        <div class="tab-pane fade" id="catfilter{{ $catloop->category_id }}">
                            <div class="row">
                                                        @foreach($productscatall as $prodvt)
                                @if($prodvt->product_category == $catloop->category_id)
                                                                <div class="col-lg-3 col-md-6 col-sm-6 col-xs-6 col-5 ec-product-content">
                                    <div class="ec-product-inner">
                                        <div class="ec-pro-image-outer">
                                            <span class="heart ec-btn-group wishlist wishlist-cont{{$prodvt->product_id}}" style="cursor:pointer;" onclick="add_wishlist_fn({{$prodvt->product_id}})" id="heartwish">
                                                        <i class="fa @if($prodvt->wish_list == 'true') fa-heart @else fa-heart-o @endif" aria-hidden="true"></i>
                                                    </span>
                                            <a href="{{$prodvt->product_permalink}}" class="image text-center">
                                                <div class="ec-pro-image">

                                                    <img class="main-image text-center"
                                                        src="/uploads/product_img_1160x1600/{{$prodvt->product_title_img}}" alt="Product" />


                                                </div>
                                            </a>
                                        </div>
                                        <div class="ec-pro-content">
                                            <a href="{{$prodvt->product_permalink}}">
                                                <h6 class="ec-pro-stitle">{{ $prodvt->brands->brand_name }}</h6>
                                            </a>
                                            <h5 class="ec-pro-title"><a href="{{$prodvt->product_permalink}}">{{ $prodvt->product_name_en }}</a></h5>
                                            
                                            <div class="ec-pro-rat-price">
                                                <span class="ec-price">
                                                    <span class="new-price">QAR
                                                        @if($prodvt->offer_datas)
                                                @php
                                                    $offer_details=$prodvt->offer_datas;
                                                    $offer_price=$offer_details['product_offer_amount'];
                                                    $offer_percentage=$offer_details['product_offer_percentage'];
                                                                        
                                                @endphp

                                                    <s>{{$prodvt->product_price}}</s> {{sprintf("%.2f",$offer_price)}}
                                                    @else
                                                        {{$prodvt->product_price}}
                                                    @endif
                                                    </span>

                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                @endif
                                @if($pri >= 4)
                                    @break
                                @endif
                                @endforeach
                            @if($pri == 0)
                            <div class="col-12 text-center mt-5 mb-5">
                                <h3><b><i>"No Products Found"</i></b></h3>
                            </div>
                            @endif
                                
                            </div>
                        </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- ec Product tab Area End -->
    <!--  offer Section Start -->
    @if(count($randcat)>0)
    @foreach($randcat as $catra)
    <section class="section ec-offer-section section-space-m">
        <div class="container-fluid">
            <div class="row ec-pos ec-ofr-bnr" data-animation="fadeIn" style="background-image: url(/uploads/category_banner/{{ $catra->category_banner }});">
                <div class="overlay colo-main"></div>
                <div class="container">
                    <div class="ec-offer-inner">
                        <div class="col-xl-5 col-md-6 col-sm-6 align-self-left ec-offer-content">
                            <h2 class="ec-offer-title">{{ $catra->category_name }}</h2>
                            <span class="ec-offer-desc">{{ $catra->category_description }} </span>
                            <span class="ec-offer-btn"><a href="{{ $catra->category_link }}" class="btn btn-lg btn-blue">Shop Now
                                </a></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    @endforeach
    @endif
    <!-- offer Section End -->
    <!--Start Recommended products section-->
    <section class="section">
        <div class="container">
            <div class="row">
                <div class="col-lg-12 col-md-12 col-12">
                    <h4>Recommended Products</h4>
                </div>
            </div>
            <div class="row">
                @foreach($productspopular as $mpop)
                <div class="col-lg-3 col-md-6 col-sm-6 col-xs-6 col-5 ec-product-content">
                    <div class="ec-product-inner">
                        <div class="ec-pro-image-outer">
                            <span class="heart ec-btn-group wishlist wishlist-cont{{$mpop->product_id}}" style="cursor:pointer;" onclick="add_wishlist_fn({{$mpop->product_id}})" id="heartwish">
                                    <i class="fa @if($mpop->wish_list == 'true') fa-heart @else fa-heart-o @endif" aria-hidden="true"></i>
                                </span>
                                <a href="{{$mpop->product_permalink}}" class="image text-center">
                            <div class="ec-pro-image">
                                    <img class="main-image text-center" src="/uploads/product_img_1160x1600/{{$mpop->product_title_img}}"
                                        alt="Product" />
                                
                            </div>
                                </a>
                        </div>
                        <div class="ec-pro-content">
                            <a href="{{$mpop->product_permalink}}">
                                <h6 class="ec-pro-stitle">{{ $mpop->brands->brand_name }}</h6>
                            </a>
                            <h5 class="ec-pro-title"><a href="{{$mpop->product_permalink}}">{{ $mpop->product_name_en }}</a></h5>
                            
                            <div class="ec-pro-rat-price">
                                <span class="ec-price">
                                    <span class="new-price">QAR
                                        @if($mpop->offer_datas)
                                         @php
                                             $offer_details=$mpop->offer_datas;
                                             $offer_price=$offer_details['product_offer_amount'];
                                             $offer_percentage=$offer_details['product_offer_percentage'];
                                                                 
                                         @endphp

                                             <s>{{$mpop->product_price}}</s> {{sprintf("%.2f",$offer_price)}}
                                             @else
                                                 {{$mpop->product_price}}
                                             @endif
                                    </span>

                                </span>
                            </div>
                        </div>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
    </section>
    <!--end section-->
    <!-- second offer Section Start -->
    @if(count($productsrandonly)>0)
    @foreach($productsrandonly as $prordonly)
    <section class="section ec-offer-section section-space-m">
        <div class="container-fluid">
            <div class="row ec-pos ec-ofr-bnr-1" data-animation="fadeIn">
                <div class="container">
                    <div class="ec-offer-inner">
                        <div class="col-xl-5 col-md-6 col-sm-6 align-self-left ec-offer-content">
                            <h2 class="ec-offer-title">
                                <!--{{ $prordonly->product_name_en }}-->
                                Ray-ban
                                </h2>
                            <p>{{ $prordonly->product_desc_en }}</p>

                            <span class="ec-offer-btn"><a href="{{$prordonly->product_permalink}}" class="btn btn-lg btn-blue">Shop Now
                                </a></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    @endforeach
    @endif
    <!-- offer Section End -->
    <!--Start last products section-->
    <section class="section">
        <div class="container">
            <div class="row">
                <div class="col-lg-12 col-md-12 col-12">
                    <h4>Popular Products</h4>
                </div>
            </div>
            <div class="row mb-4">
                @foreach($productsrand as $mpopnew)

                <div class="col-lg-3 col-md-6 col-sm-6 col-xs-6 col-5 ec-product-content">
                    <div class="ec-product-inner">
                        <div class="ec-pro-image-outer">
                                <span class="heart ec-btn-group wishlist wishlist-cont{{$mpopnew->product_id}}" style="cursor:pointer;" onclick="add_wishlist_fn({{$mpopnew->product_id}})" id="heartwish">
                                    <i class="fa @if($mpopnew->wish_list == 'true') fa-heart @else fa-heart-o @endif" aria-hidden="true"></i>
                                </span>
                                <a href="{{$mpopnew->product_permalink}}" class="image text-center">
                            <div class="ec-pro-image">
                                    <img class="main-image text-center" src="/uploads/product_img_1160x1600/{{$mpopnew->product_title_img}}"
                                        alt="Product" />
                            </div>
                                </a>
                        </div>
                        <div class="ec-pro-content">
                            <a href="{{$mpopnew->product_permalink}}">
                                <h6 class="ec-pro-stitle">{{ $mpopnew->brands->brand_name }}</h6>
                            </a>
                            <h5 class="ec-pro-title"><a href="{{$mpopnew->product_permalink}}">{{ $mpopnew->product_name_en }}</a></h5>
                            
                            <div class="ec-pro-rat-price">
                                <span class="ec-price">
                                    <span class="new-price">QAR
                                        @if($mpopnew->offer_datas)
                                         @php
                                             $offer_details=$mpopnew->offer_datas;
                                             $offer_price=$offer_details['product_offer_amount'];
                                             $offer_percentage=$offer_details['product_offer_percentage'];
                                                                 
                                         @endphp

                                             <s>{{$mpopnew->product_price}}</s> {{sprintf("%.2f",$offer_price)}}
                                             @else
                                                 {{$mpopnew->product_price}}
                                             @endif
                                    </span>

                                </span>
                            </div>
                        </div>
                    </div>
                </div>

                @endforeach
            </div>
        </div>
    </section>
    <!--end section-->
    <!--contact section start-->

    <!--end section-->



@endsection