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

    <main>

        <!-- Start Header -->
        <header class="header section">
            <div class="container">
                <div class="row align-items-center">
                    <div class="col-lg-7">
                        <div class="txt_box">
                            <img src="{{url('')}}/assets/web/images/icon.svg" class="icon" alt="" />
                            <h1 class="title  color-secondary mb-5 mt-4 font_ruqah" >
                                {!! $page->title !!}
                            </h1>
                            <div class="p col-lg-11">
                                {!! $page->description !!}
                            </div>
                            <a href="{{route('web.product')}}" class="butn secondary_butn mt-5" > {{__('web.shop_now')}} </a>
                        </div>
                    </div>
                    <div class="col-lg-5">
                        <div class="img_box">
                            <img src="{{asset($page->image)}}" class="img secImg" alt="" />
                        </div>
                    </div>
                </div>
            </div>
        </header>

        <!-- Start section -->
        <section class="banners_sec section">
            <div class="container">
                <div class="row justify-content-center">
                    @foreach($sliders as $row)
                        <div class="col-lg-5">
                            <a href="{{$row->link}}">
                                <div class="banner_card">
                                    <img src="{{asset($row->image)}}" class="secImg" alt="">
                                </div>
                            </a>
                        </div>
                    @endforeach
                </div>
            </div>
        </section>

        <!-- Start section -->
        <section class="products_sec section">
            <div class="container">
                <div class="sec_head has_border text-center mb-5">
                    <h1 class="title_head fw-bold mb-4"> {!! $section_1->title !!}  </h1>
                    <h6 class="subtitle_head"> {!! $section_1->description !!} </h6>
                </div>
                <ul class="nav justify-content-center nav-pills mb-5" id="pills-tab" role="tablist">
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" onclick="showProducts(this)" type-id="newest" id="pills-tab1-tab" data-bs-toggle="pill" data-bs-target="#pills-tab1" type="button" role="tab" aria-controls="pills-tab1" aria-selected="true">
                            {{__('web.new_comming')}}
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" onclick="showProducts(this)" type-id="sold" id="pills-tab2-tab" data-bs-toggle="pill" data-bs-target="#pills-tab2" type="button" role="tab" aria-controls="pills-tab2" aria-selected="false">
                            {{__('web.most_selling')}}
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" onclick="showProducts(this)" type-id="rate" id="pills-tab3-tab" data-bs-toggle="pill" data-bs-target="#pills-tab3" type="button" role="tab" aria-controls="pills-tab3" aria-selected="false">
                            {{__('web.special_products')}}
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" onclick="showProducts(this)" type-id="discount" id="pills-tab4-tab" data-bs-toggle="pill" data-bs-target="#pills-tab4" type="button" role="tab" aria-controls="pills-tab4" aria-selected="false">
                            {{__('web.discounts')}}
                        </button>
                    </li>
                </ul>
                <div class="swiper-container prod_swiper">
                    <div class="swiper-wrapper" id="products_home">
                    </div>
                </div>
            </div>
            <!-- Arrows -->
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
        </section>

        <!-- Start section -->
        <section class="banner_shopping section">
            <div class="container">
                <div class="inner">
                    <div class="row align-items-center zi-5">
                        <div class="col-lg-7">
                            <div class="txt_box">
                                <h1 class="title fw-bold color-primary"> {!! $banner->title !!} </h1>
                                <div class="p my-3">
                                    {!! $banner->description !!}
                                </div>
                                <a href="{{route('web.product')}}" class="butn primary_butn mx-auto fs-4 mt-4">{{__('web.shop_now')}} </a>
                            </div>
                        </div>
                        <div class="col-lg-5">
                            <img src="{{asset($banner->image)}}" class="secImg" alt="">
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Start section -->
        <section class="categ_sec section">
            <div class="container">
                <div class="sec_head has_border text-center mb-5">
                    <h1 class="title_head fw-bold mb-4"> {!! $section_2->title !!}      </h1>
                    <h6 class="subtitle_head"> {!! $section_2->description !!}       </h6>
                </div>
                <div class="row mx-auto justify-content-around">
                    @foreach($categories as $row)
                        <div class="col-lg-3">
                            <a href="{{route('web.product').'?category_id='.$row->id}}">
                                <div class="categ_card">
                                    <div class="img_box">
                                        <img src="{{asset($row->image)}}" class="secImg" alt="" />
                                    </div>
                                    <h5 class="categ_name"> {{$row->title}} </h5>
                                </div>
                            </a>
                        </div>
                    @endforeach
                </div>
            </div>
        </section>

        <!-- Start section -->
        <section class="products_sec2 products_sec section">
            <div class="container">
                <h1 class="title_w_border fw-bold mb-5" >{{__('web.special_products')}} </h1>
                <div class="swiper-container prod_swiper2">
                    <div class="swiper-wrapper">
                        @foreach($product_specials as $row)
                            <div class="swiper-slide">
                                @foreach($row as $product)
                                    @include('web.pages.components.products.card',['product'=>$product,'special'=>true,'type'=>'product_specials'])
                                @endforeach
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
            <!-- Arrows -->
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
        </section>

        <!-- Start section -->
    @include('web.pages.components.cards',['cards'=>$cards])

        <!-- Start section -->
        <section class="products_sec section">
            <div class="container">
                <div class="sec_head has_border text-center mb-5">
                    <h1 class="title_head fw-bold mb-4"> {!! $section_3->title !!}     </h1>
                    <h6 class="subtitle_head"> {!! $section_3->description !!}       </h6>
                </div>

                <div class="swiper-container prod_swiper">
                    <div class="swiper-wrapper">
                        @foreach($offer_products as $row)
                            <div class="swiper-slide">
                                @foreach($row as $product)
                                    @include('web.pages.components.products.card',['product'=>$product,'type'=>'offer_products'])
                                @endforeach
                            </div>
                        @endforeach

                    </div>
                </div>
            </div>
            <!-- Arrows -->
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
        </section>

        <!-- Start section -->
        <section class="newsletter_sec section pt-2">
            <div class="container">
                <div class="inner">
                    <div class="row gx-0">
                        <div class="col-lg-7">
                            <div class="feedback_box">
                                <div class="swiper-container feedback_swiper">
                                    <div class="swiper-wrapper">
                                        @foreach($reviews as $row)
                                            <div class="swiper-slide">
                                                <div class="feedback_card">
                                                    <div class="stars">
                                                        @include('web.pages.components.products.rate',['product'=>$row])
                                                    </div>
                                                    <div class="p my-4">
                                                        {!! $row->description !!}
                                                    </div>
                                                    <div class="prof_data">
                                                        <img src="{{asset($row->image)}}" class="avatar" alt="" />
                                                        <h5 class="name">  {!! $row->user !!} </h5>
                                                    </div>
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-5">
                            <div class="newsletter_box">
                                <h1 class="subtitle  color-primary mb-3 mt-4 font_ruqah" >
                                    {!! $newsletter->title !!}
                                </h1>
                                <h1 class="title fw-bold my-4">{!! $newsletter->description !!} </h1>
                                <form method="post" action="{{route('web.newsletter')}}" onsubmit="formAction(this)">
                                    @CSRF
                                    <div class="form-group mt-3">
                                        <input type="email" name="email" class="form-control" placeholder=" {{__('web.email')}}"/>
                                        <button class="submit_butn"> <i class="fa-light fa-paper-plane"></i> </button>
                                    </div>
                                </form>

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


    </main>

@endsection

@section('inject_js')
    <script>
        let url_show_products = "{{route('web.products.show')}}"
    </script>
    <script src="{{url('')}}/assets/web/js/custom/index.js"></script>
@endsection
