@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="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>{{ sprintf('%.2f', $randprod->product_price) }}</s>
                                                                {{ sprintf('%.2f', $offer_price) }}
                                                            @else
                                                                {{ sprintf('%.2f', $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>{{ sprintf('%.2f', $prodvt->product_price) }}</s>
                                                                        {{ sprintf('%.2f', $offer_price) }}
                                                                    @else
                                                                        {{ sprintf('%.2f', $prodvt->product_price) }}
                                                                    @endif
                                                                </span>

                                                            </span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        @endif
                                        @if ($pri >= 4)
                                        @break
                                    @endif
                                @endforeach
                            </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="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>{{ sprintf('%.2f', $mpop->product_price) }}</s>
                                            {{ sprintf('%.2f', $offer_price) }}
                                        @else
                                            {{ sprintf('%.2f', $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 }}</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">
            @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>{{ sprintf('%.2f', $mpopnew->product_price) }}</s>
                                            {{ sprintf('%.2f', $offer_price) }}
                                        @else
                                            {{ sprintf('%.2f', $mpopnew->product_price) }}
                                        @endif
                                    </span>

                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    </div>
</section>
<!--end section-->
<!--contact section start-->
<section class="section contact-sec">
    <div class="container-fluid">
        <div class="row text-center">
            <h4>Contact for customer support</h4>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
                ut labore et dolore magna aliqua.
            </p>
            <p><a href="tel:+21-921123456789">+21-921123456789</a></p>
        </div>
    </div>
</section>
<!--end section-->



@endsection