@extends('website.layouts.app')

@section('content')

    <!-- main slider start -->
    <section class="bg-light position-relative">
        <div class="main-slider dots-style theme3" @if(getLang() == 'ar') dir="ltr" @endif>


            @foreach ($sliders as $slider)
                <div class="slider-item bg-img xxxx"
                    style="background-image: url('{{ getImage('slider', $slider->image) }}'); background-size: contain;">
                    <div class="container">
                        <div class="row align-items-center slider-height">
                            <div class="col-12">
                                <div class="slider-content d-inline-block text-center">
                                    <p class="text text-lighten text-uppercase animated mb-25"
                                        data-animation-in="fadeInDown">
                                        {{ $slider['name_' . getLang()] }}
                                    </p>
                                    <h4 class="title text-dark animated text-capitalize mb-25"
                                        data-animation-in="fadeInLeft" data-delay-in="1">
                                        {{ $slider['content_' . getLang()] }}
                                    </h4>
                                    {{-- <h2 class="sub-title text-dark animated"
                                        data-animation-in="fadeInRight" data-delay-in="2">
                                        Moisture Glow Oil</h2> --}}
                                    @if ($slider->link)
                                        <a href="{{ $slider->link }}"
                                            class="btn btn-success"
                                            data-animation-in="zoomIn" data-delay-in="3">{{ trans('home.Shop now') }}</a>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            @endforeach

        </div>
        <!-- slick-progress -->
        <div class="slick-progress">
            <span></span>
        </div>
        <!-- slick-progress end-->
    </section>
    <!-- main slider end -->

    <!-- common banner  start -->
    <div class="common-banner bg-white pt-80">
        <div class="container">
            <div class="row">
                <div class="col-md-6 mb-30">
                    <div class="banner-thumb">
                        <a href="{{ strip_tags(getLayout('link_home_banner_1')['content_' . getLang()]) }}" class="zoom-in d-block overflow-hidden">
                            <img src="{{ getImage('layouts', getLayout('home_banner1')->image) }}" alt="banner-thumb-naile">
                        </a>
                    </div>
                </div>
                <div class="col-md-6 mb-30">
                    <div class="banner-thumb mb-30">
                        <a href="{{ strip_tags(getLayout('link_home_banner_2')['content_' . getLang()]) }}" class="zoom-in d-block overflow-hidden">
                            <img src="{{ getImage('layouts', getLayout('home_banner2')->image) }}" alt="banner-thumb-naile">
                        </a>
                    </div>
                    <div class="banner-thumb">
                        <a href="{{ strip_tags(getLayout('link_home_banner_3')['content_' . getLang()]) }}" class="zoom-in d-block overflow-hidden">
                            <img src="{{ getImage('layouts', getLayout('home_banner3')->image) }}" alt="banner-thumb-naile">
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- common banner  end -->


    <!-- product tab start -->
    <section class="product-tab theme3 bg-white pt-50 pb-80">
        <div class="container">
            <div class="product-tab-nav mb-35">
                <div class="row align-items-center">
                    <div class="col-12">
                        <div class="section-title text-center mb-30">
                            <h2 class="title text-dark text-capitalize">{{ trans('home.Our products') }}</h2>
                            {{-- <p class="text mt-10">Add our products to weekly line up</p>
                            --}}
                        </div>
                    </div>


                    <div class="col-12">
                        <nav class="product-tab-menu">
                            <ul class="nav nav-pills justify-content-center" id="pills-tab" role="tablist">
                                @foreach ($r_categorys as $key => $r_cat)

                                    <li class="nav-item">
                                        <a class="nav-link {{ $loop->first ? 'active' : '' }}" id="pills-{{ $key }}-tab"
                                            data-toggle="pill" href="#pills-{{ $key }}" role="tab"
                                            aria-controls="pills-{{ $key }}"
                                            aria-selected="true">{{ $r_cat['name_' . getLang()] }}</a>
                                    </li>
                                @endforeach

                                {{-- <li class="nav-item">
                                    <a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile"
                                        role="tab" aria-controls="pills-profile" aria-selected="false">Camera & Photo</a>
                                </li>

                                <li class="nav-item">
                                    <a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact"
                                        role="tab" aria-controls="pills-contact" aria-selected="false">Smart Electronics</a>
                                </li> --}}

                            </ul>
                        </nav>
                    </div>


                </div>
            </div>
            <!-- product-tab-nav end -->
            <div class="row">
                <div class="col-12">
                    <div class="tab-content" id="pills-tabContent">

                        @foreach ($r_categorys as $key => $r_cat)

                            <!-- first tab-pane -->
                            <div class="tab-pane fade {{ $loop->first ? 'show active ' : '' }}" id="pills-{{ $key }}"
                                role="tabpanel" aria-labelledby="pills-{{ $key }}-tab">
                                <div class="product-slider-init slick-nav" @if(getLang() == 'ar') dir="ltr" @endif>

                                    @foreach ($r_cat->products as $r_cat_product)
                                        <div class="slider-item">
                                            <div class="card product-card">
                                                <div class="card-body p-0">
                                                    <div class="media flex-column">
                                                        <div class="product-thumbnail position-relative">
                                                            {{-- <span
                                                                class="badge badge-danger top-right">New</span>
                                                            --}}
                                                            <span
                                                                class="badge badge-success top-left">{{ $r_cat_product->offer() }}</span>
                                                            <a href="{{ $r_cat_product->url }}">
                                                                <img class="first-img"
                                                                    src="{{ getImage('products', $r_cat_product->image) }}"
                                                                    alt="thumbnail">
                                                            </a>
                                                            <!-- product links -->
                                                            <ul class="product-links d-flex justify-content-center">
                                                                <li>
                                                                    <a
                                                                        href="{{ route('set.Wishlist', $r_cat_product->id) }}">
                                                                        <span data-toggle="tooltip" data-placement="bottom"
                                                                            title="add to wishlist" class="icon-heart">
                                                                        </span>
                                                                    </a>
                                                                </li>
                                                                {{-- <li>
                                                                    <a href="#" data-toggle="modal" data-target="#compare">
                                                                        <span data-toggle="tooltip" data-placement="bottom"
                                                                            title="Add to compare"
                                                                            class="icon-shuffle"></span>
                                                                    </a>
                                                                </li> --}}
                                                                <li>
                                                                    <a href="#" data-toggle="modal" class="quick_button"
                                                                        data-target="#quick-view"
                                                                        data-url="{{ route('get.productView', $r_cat_product->id) }}">
                                                                        <span data-toggle="tooltip" data-placement="bottom"
                                                                            title="Quick view"
                                                                            class="icon-magnifier"></span>
                                                                    </a>
                                                                </li>
                                                            </ul>
                                                            <!-- product links end-->
                                                        </div>
                                                        <div class="media-body">
                                                            <div class="product-desc">
                                                                <h3 class="title">
                                                                    <a
                                                                        href="{{ $r_cat_product->url }}">{{ $r_cat_product['name_' . getLang()] }}</a>

                                                                </h3>
                                                                <div class="star-rating">
                                                                    @for ($i = 1; $i <= 5; $i++)
                                                                        <span
                                                                            class="ion-ios-star{{ $i > $r_cat_product->avgrate ? '-o' : '' }} "></span>
                                                                    @endfor
                                                                </div>

                                                                <div
                                                                    class="d-flex align-items-center justify-content-between">
                                                                    <h6 class="product-price">{{ $r_cat_product->price }}
                                                                    </h6>
                                                                    <button class="pro-btn add_to_cart">
                                                                        <i class="icon-basket"
                                                                            data-id="{{ $r_cat_product->id }}"
                                                                            data-url="{{ route('setToCart', $r_cat_product->id) }}"></i></button>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        @endforeach

                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- product tab end -->
    <!-- new arrival section start -->
    <section class="theme3 bg-white pb-80">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="section-title text-center mb-30">
                        <h2 class="title text-dark text-capitalize">{{ trans('home.New Arrivals') }}</h2>
                        {{-- <p class="text mt-10">Add new products to weekly line up</p>
                        --}}
                    </div>
                </div>
                <div class="col-12">
                    <div class="product-slider-init slick-nav" @if(getLang() == 'ar') dir="ltr" @endif>

                        @foreach ($latest_products as $l_product)
                            <div class="slider-item">
                                <div class="card product-card">
                                    <div class="card-body p-0">
                                        <div class="media flex-column">
                                            <div class="product-thumbnail position-relative">
                                                {{-- <span
                                                    class="badge badge-danger top-right">New</span>
                                                --}}
                                                <span class="badge badge-success top-left">{{ $l_product->offer() }}</span>
                                                <a href="{{ $l_product->url }}">
                                                    <img class="first-img"
                                                        src="{{ getImage('products', $l_product->image) }}" alt="thumbnail">
                                                </a>
                                                <!-- product links -->
                                                <ul class="product-links d-flex justify-content-center">
                                                    <li>
                                                        <a href="{{ route('set.Wishlist', $l_product->id) }}">
                                                            <span data-toggle="tooltip" data-placement="bottom"
                                                                title="add to wishlist" class="icon-heart">
                                                            </span>
                                                        </a>
                                                    </li>
                                                    {{-- <li>
                                                        <a href="#" data-toggle="modal" data-target="#compare">
                                                            <span data-toggle="tooltip" data-placement="bottom"
                                                                title="Add to compare" class="icon-shuffle"></span>
                                                        </a>
                                                    </li> --}}
                                                    <li>
                                                        <a href="#" data-toggle="modal" class="quick_button"
                                                            data-target="#quick-view"
                                                            data-url="{{ route('get.productView', $l_product->id) }}">
                                                            <span data-toggle="tooltip" data-placement="bottom"
                                                                title="Quick view" class="icon-magnifier"></span>
                                                        </a>
                                                    </li>
                                                </ul>
                                                <!-- product links end-->
                                            </div>
                                            <div class="media-body">
                                                <div class="product-desc">
                                                    <h3 class="title">
                                                        <a
                                                            href="{{ $l_product->url }}">{{ $l_product['name_' . getLang()] }}</a>

                                                    </h3>
                                                    <div class="star-rating">
                                                        @for ($i = 1; $i <= 5; $i++)
                                                            <span class="ion-ios-star{{ $i > $l_product->avgrate ? '-o' : '' }} "></span>
                                                        @endfor
                                                    </div>

                                                    <div class="d-flex align-items-center justify-content-between">
                                                        <h6 class="product-price">{{ $l_product->price }}
                                                        </h6>
                                                        <button class="pro-btn add_to_cart">
                                                            <i class="icon-basket" data-id="{{ $l_product->id }}"
                                                                data-url="{{ route('setToCart', $l_product->id) }}"></i></button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endforeach



                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- new arrival section end -->
    <!-- popular-section  start -->
    <div class="popular-section bg-lighten theme3 bg-white pt-80 pb-80">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="section-title text-center mb-30">
                        <h2 class="title text-dark text-capitalize">{{ trans('home.Popular Categories') }}</h2>
                        {{-- <p class="text mt-10">Some of our popular categories include
                            cosmetic</p> --}}
                    </div>
                </div>
                <div class="col-12">
                    <div class="popular-slider-init dots-style" @if(getLang() == 'ar') dir="ltr" @endif>

                        @foreach ($categorys as $cat)
                            <div class="slider-item">
                                <div class="card popular-card zoom-in">
                                    <div class="card-body">
                                        <a href="{{ route('get.category', [$cat->id, preg_replace('/\s+/', '-', $cat['name_' . getLang()])]) }}"
                                            class="thumb-naile d-block overflow-hidden"> <img class="d-block mx-auto"
                                                src="{{ getImage('category', $cat->image) }}" alt="img"></a>
                                        <h3 class="popular-title">
                                            <a href="#"> {{ $cat['name_' . getLang()] }}
                                                <span>({{ $cat->products->count() }})</span></a>
                                        </h3>
                                    </div>
                                </div>
                            </div>
                        @endforeach


                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- popular-section  end -->

    <!-- brand slider start -->
    <div class="brand-slider-section theme3 bg-white py-60">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="brand-init theme2 slick-nav-brand" @if(getLang() == 'ar') dir="ltr" @endif>

                        @foreach ($brands as $brand)

                            <div class="slider-item">
                                <div class="single-brand">
                                    <a href="{{ route('get.brand', [$brand->id, preg_replace('/\s+/', '-', $brand['name_' . getLang()])]) }}"
                                        class="brand-thumb">
                                        <img src="{{ getImage('brand', $brand->image) }}" alt="brand-thumb-nail">
                                    </a>
                                </div>
                            </div>
                            <!-- slider-item end -->
                        @endforeach



                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- brand slider end -->


    <!-- common banner  start -->
    <div class="common-banner bg-white pb-50">
        <div class="container">
            <div class="row">
                <div class="col-lg-6 mb-30">
                    <div class="banner-thumb common-bthumb1">
                        <a href="{{ strip_tags(getLayout('link_home_banner_4')['content_' . getLang()]) }}" class="zoom-in d-block overflow-hidden">
                            <img src="{{ getImage('layouts', getLayout('home_banner4')->image) }}" alt="banner-thumb-naile">
                        </a>
                    </div>
                </div>
                <div class="col-lg-6 mb-30">
                    <div class="banner-thumb common-bthumb1">
                        <a href="{{ strip_tags(getLayout('link_home_banner_5')['content_' . getLang()]) }}" class="zoom-in d-block overflow-hidden">
                            <img src="{{ getImage('layouts', getLayout('home_banner5')->image) }}" alt="banner-thumb-naile">
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- common banner  end -->


    <!-- featured  slider start-->
    <section class="featured-slider theme3 pb-80">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="section-title mb-30">
                        <h2 class="title text-dark text-capitalize">{{ trans('home.featuredProduct') }} </h2>
                    </div>
                </div>
                <div class="col-12">
                    <div class="featured-init slick-nav" @if(getLang() == 'ar') dir="ltr" @endif>
                        @foreach ($featured as $chunked_products)
                        
                            <div class="slider-item">

                                @foreach ($chunked_products as $f_product)

                                    <div class="product-list mb-30">

                                        <div class="card product-card no-shadow">
                                            <div class="card-body p-0">
                                                <div class="media">
                                                    <div class="product-thumbnail">
                                                        {{-- <span
                                                            class="badge badge-danger top-right">New</span>
                                                        --}}
                                                        <span
                                                            class="badge badge-success top-left">{{ $f_product->offer() }}</span>
                                                        <a href="{{ $f_product->url }}">
                                                            <img class="first-img"
                                                                src="{{ getImage('products', $f_product->image) }}"
                                                                alt="thumbnail">
                                                        </a>
                                                 
                                                    </div>
                                                    <div class="media-body">
                                                        <div class="product-desc">
                                                            <h3 class="title">
                                                                <a
                                                                    href="{{ $f_product->url }}">{{ $f_product['name_' . getLang()] }}</a>

                                                            </h3>
                                                            <div class="star-rating">
                                                                @for ($i = 1; $i <= 5; $i++)
                                                                    <span
                                                                        class="ion-ios-star{{ $i > $f_product->avgrate ? '-o' : '' }} "></span>
                                                                @endfor
                                                            </div>

                                                            <div class="d-flex align-items-center justify-content-between">
                                                                <h6 class="product-price">{{ $f_product->price }}
                                                                </h6>
                                                                <button class="pro-btn add_to_cart">
                                                                    <i class="icon-basket" data-id="{{ $f_product->id }}"
                                                                        data-url="{{ route('setToCart', $f_product->id) }}"></i></button>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach



                            </div>

                        @endforeach


                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- featured  slider end-->


    <!-- staic media start -->
    <section class="static-media-section theme-bg3 py-45">
        <div class="container">
            <div class="static-media-wrap p-0">
                <div class="row">
                    <div class="col-lg-3 col-sm-6 py-3">
                        <div class="d-flex static-media2 flex-column flex-sm-row">
                            <img class="align-self-center mb-2 mb-sm-0 mr-auto  mr-sm-3" src="{{ url('public') }}/assets/img/icon/2.png"
                                alt="icon">
                            <div class="media-body">
                                <h4 class="title text-capitalize text-white">{{ trans('home.freeShipping') }}</h4>
                                <p class="text text-white">{{ trans('home.freeShipping99') }}</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3 col-sm-6 py-3">
                        <div class="d-flex static-media2 flex-column flex-sm-row">
                            <img class="align-self-center mb-2 mb-sm-0 mr-auto  mr-sm-3" src="{{ url('public') }}/assets/img/icon/3.png"
                                alt="icon">
                            <div class="media-body">
                                <h4 class="title text-capitalize text-white">{{ trans('home.FreeReturns') }}</h4>
                                <p class="text text-white">{{ trans('home.FreeReturns_desc') }}</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3 col-sm-6 py-3">
                        <div class="d-flex static-media2 flex-column flex-sm-row">
                            <img class="align-self-center mb-2 mb-sm-0 mr-auto  mr-sm-3" src="{{ url('public') }}/assets/img/icon/5.png"
                                alt="icon">
                            <div class="media-body">
                                <h4 class="title text-capitalize text-white">{{ trans('home.onlineSupport') }}</h4>
                                <p class="text text-white">{{ trans('home.onlineSupport24') }}</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3 col-sm-6 py-3">
                        <div class="d-flex static-media2 flex-column flex-sm-row">
                            <img class="align-self-center mb-2 mb-sm-0 mr-auto  mr-sm-3" src="{{ url('public') }}/assets/img/icon/4.png"
                                alt="icon">
                            <div class="media-body">
                                <h4 class="title text-capitalize text-white">{{ trans('home.moneyBack') }}</h4>
                                <p class="text text-white">{{ trans('home.moneyBack100') }}.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- staic media end -->

@endsection