@extends('web.layouts.layout')
@section('content')


    <main>


        <!-- ---------- head-banners ----------- -->
        @if($banners[0]->active_status == $true)
            <section class="banners-sec1">
                <div class="container">
                    <div class="row gx-3">

                        @for($i=0;$i<$banners[0]->count_photo;$i++)
                            <div class="col-lg-{{$banners[0]->count_photo == 2 ? ($i == 0 ? '8' : '4') : (12 / $banners[0]->count_photo)}} mt-3">
                                <a @if($banners[0]->photos[$i]->link) href="{{$banners[0]->photos[$i]->link}}" target="_blank" @endif class="banner d-block h-100 wow fadeInUp slow">
                                    <img src="{{asset($banners[0]->photos[$i]->image)}}" alt="" class="img-cover rounded-3">
                                </a>
                            </div>
                        @endfor

                    </div>
                </div>
            </section>
        @endif

        <!-- ---------- categories ----------- -->
        <section class="categories-sec py-4">
            <div class="container">
                <div class="categories">
                    @foreach($sub_categories as $row)
                        <a href="{{route('web.product').'?sub_category_id[]='.$row->id}}" class="item wow fadeInUp slow" data-wow-delay="0.1s">
                            <div class="img">
                                <img src="{{asset($row->image)}}" alt="">
                            </div>
                            <h6 class="cat-name"> {!! $row->title !!} </h6>
                        </a>
                    @endforeach
                </div>
            </div>
        </section>


        <!-- ---------- banners ----------- -->
        @if($banners[1]->active_status == $true)
            <section class="banners-sec2 pb-4">
                <div class="container">
                    <div class="row gx-3">
                        @for($i=0;$i<$banners[1]->count_photo;$i++)
                            <div class="col-lg-{{$banners[1]->count_photo == 2 ? ($i == 0 ? '8' : '4') : (12 / $banners[1]->count_photo)}} my-3">
                                <a @if($banners[1]->photos[$i]->link) href="{{$banners[1]->photos[$i]->link}}" target="_blank" @endif class="banner d-block h-100 wow fadeInUp slow" data-wow-delay="0.1s">
                                    <img src="{{asset($banners[1]->photos[$i]->image)}}" alt="" class="img-cover rounded-3">
                                </a>
                            </div>
                        @endfor
                    </div>
                </div>
            </section>
        @endif


        <!-- ---------- products   ----------- -->
        <section class="products py-4">
            <div class="container">
                <div class="line-title mb-4 wow fadeInUp slow" data-wow-delay="0.1s"> <h5 class="bg-light1 mx-auto px-2"> {{__('web.recommended_for_you')}} </h5> </div>
                <div class="products-slider position-relative overflow-hidden">
                    <div class="swiper-wrapper">
                        @foreach($recommended as $row)
                            <div class="swiper-slide">
                                @include('web.pages.components.products.card',['product'=>$row])
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </section>


        <!-- ---------- banners ----------- -->
        @if($banners[2]->active_status == $true)
            <section class="banners-sec3 py-4">
                <div class="container">
                    <div class="row">
                        @for($i=0;$i<$banners[2]->count_photo;$i++)
                            <div class="col-lg-{{$banners[2]->count_photo == 2 ? ($i == 0 ? '8' : '4') : (12 / $banners[2]->count_photo)}} my-3">
                                <a @if($banners[2]->photos[$i]->link) href="{{$banners[2]->photos[$i]->link}}" target="_blank" @endif class="banner d-block h-100 wow fadeInUp slow" data-wow-delay="0.1s">
                                    <img src="{{asset($banners[2]->photos[$i]->image)}}" alt="" class="img-cover rounded-3">
                                </a>
                            </div>
                        @endfor
                    </div>
                </div>
            </section>
        @endif


        <!-- ---------- banners ----------- -->
        @if($banners[3]->active_status == $true)
            <section class="banners-sec4 pb-4">
                <div class="container">
                    <div class="row gx-3">
                        @for($i=0;$i<$banners[3]->count_photo;$i++)
                            <div class="col-lg-{{$banners[3]->count_photo == 2 ? ($i == 0 ? '8' : '4') : (12 / $banners[3]->count_photo)}}">
                                <a @if($banners[3]->photos[$i]->link) href="{{$banners[3]->photos[$i]->link}}" target="_blank" @endif class="banner d-block h-100 wow fadeInUp slow" data-wow-delay="0.1s">
                                    <img src="{{asset($banners[3]->photos[$i]->image)}}" alt="" class="img-cover rounded-3">
                                </a>
                            </div>
                        @endfor
                    </div>
                </div>
            </section>
        @endif

        <!-- ---------- brands  ----------- -->
        <section class="brands pt-3">
            <div class="container">
                <div class="brands-box">
                    <div class="line-title mb-4 wow fadeInUp slow" data-wow-delay="0.1s"> <h5 class="bg-white mx-auto px-2"> {{__('web.best_brands')}} </h5> </div>
                    <div class="brands-slider">
                        <div class="swiper-wrapper">
                            @foreach($brands as $row)
                                <div class="swiper-slide">
                                    <a href="{{route('web.product').'?brand_id[]='.$row->id}}" class="brand wow zoomIn slow">
                                        <img src="{{asset($row->logo)}}" alt="">
                                    </a>
                                </div>
                            @endforeach

                        </div>
                    </div>
                </div>
            </div>
        </section>


        <!-- ---------- banners ----------- -->
        @if($banners[4]->active_status == $true)
            <section class="banners-sec5 pt-4">
                <div class="container">
                    <div class="row gx-3">
                        @for($i=0;$i<$banners[4]->count_photo;$i++)
                            <div class="col-lg-{{$banners[4]->count_photo == 2 ? ($i == 0 ? '8' : '4') : (12 / $banners[4]->count_photo)}} my-3 wow fadeInUp slow" data-wow-delay="0.1s">
                                <a @if($banners[4]->photos[$i]->link) href="{{$banners[4]->photos[$i]->link}}" target="_blank" @endif class="banner d-block h-100">
                                    <img src="{{asset($banners[4]->photos[$i]->image)}}" alt="" class="img-cover rounded-3">
                                </a>
                            </div>
                        @endfor
                    </div>
                </div>
            </section>
        @endif


        <!-- ---------- products   ----------- -->
        <section class="products-st2 py-4 pb-5">
            <div class="container">
                <div class="products-box">
                    <!--<div class="line-title mb-4 wow fadeInUp slow" data-wow-delay="0.1s"> <h5 class="bg-white mx-auto px-2"> {{__('web.beauty_needs')}}  <small class="cr-red"> {{__('web.most_sold')}} </small> </h5> </div>-->
                    <div class="line-title mb-4 wow fadeInUp slow" data-wow-delay="0.1s"> <h5 class="bg-white mx-auto px-2"> <small class="cr-red"> {{__('web.most_sold')}} </small> </h5> </div>
                    <div class="products-slider-st2 position-relative overflow-hidden">
                        <div class="swiper-wrapper">
                            @foreach($solds as $row)
                                <div class="swiper-slide">
                                    @include('web.pages.components.products.card',['product'=>$row])
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        </section>


        <!-- ---------- products   ----------- -->
        <!--<section class="products py-4">-->
        <!--    <div class="container" id="products">-->
        <!--        <div class="line-title mb-4 wow fadeInUp slow" data-wow-delay="0.1s"> <h5 class="bg-light1 mx-auto px-2">{{__('web.all_products')}}</h5> </div>-->
        <!--        <div id="products">-->

        <!--        </div>-->
        <!--    </div>-->
        <!--</section>-->

        <!-- ---------- banners ----------- -->
        @include('web.layouts.footer_banner')



    </main>

@endsection

@section('inject_js')

    <script>
        let url_fetch_products = "{{route('web.fetch.products')}}"
    </script>
    <script src="{{url('')}}/assets/web/js/custom/home.js"></script>

@endsection