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

    <main>

        <!-- Start Header -->
        <header class="header section py-0 header_2">
            <div class="swiper-container header_swiper">
                <div class="swiper-wrapper">
                    @foreach($sliders as $key => $row)
                        <div class="swiper-slide">
                            <div class="item">
                                <div class="container">
                                    <div class="row align-items-center justify-content-between">
                                        <div class="col-lg-6">
                                            <img src="{{asset($row->image)}}" class="sec-img" alt=""/>
                                        </div>
                                        <div class="col-lg-5">
                                            <div class="text_box">
                                                <h1 class="title fw-bold @if($key % 2 != 0) text-white @endif mb-3">
                                                    {{$row->name}}
                                                </h1>
                                                <h4 class="subtitle @if($key % 2 != 0) text-white @endif mb-4">
                                                    {!! $row->description !!}
                                                </h4>
                                                @if($row->link)
                                                    <a href="{{$row->link}}" class="butn primary_butn">{{ __('web.buy_now') }}</a>
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <img src="@if($key % 2 == 0) {{url('')}}/assets/web/images/head_back2.png @else {{url('')}}/assets/web/images/header_bg_1.svg @endif" class="bg" alt=""/>
                            </div>
                        </div>
                    @endforeach
                </div>
                <div class="swiper-button-next"></div>
                <div class="swiper-button-prev"></div>
            </div>
        </header>

        <!-- Start section -->
        <section class="partners_sec section">
            <div class="container">
                <h2 class="sec_title text-uppercase color-primary fw-bold text-center mb-5">
                    {{ __('web.brands') }}
                    <img src="{{url('')}}/assets/web/images/title_line.svg" class="d-block m-auto" alt=""/>
                </h2>
                <div class="swiper-container partners_swiper">
                    <div class="swiper-wrapper">
                        @foreach($brands as $row)
                            <a class="swiper-slide" href="{{route('search').'?brand='.$row->id}}">
                                <div >
                                        <img src="{{asset($row->image)}}" class="partner_logo" alt=""/>
                                </div>
                            </a>
                        @endforeach
                    </div>
                </div>
            </div>
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
        </section>

        <!-- Start section -->
        <section class="categ_sec section ">
            <div class="container">
                <h2 class="sec_title text-uppercase color-primary fw-bold text-center mb-5">
                    {{ __('web.categories') }}
                    <img src="{{url('')}}/assets/web/images/title_line.svg" class="d-block m-auto" alt=""/>
                </h2>
                <div class="row">
                    @foreach($categories as $row)
                        <div class="col-lg-4 col-6">
                        <a href="{{route('filter',$row->id)}}">
                            <div class="categ_card">
                                <h4 class="title fw-bold text-center text-white mb-0">{{$row->name}}</h4>
                                <img src="{{asset($row->image)}}" class="bg" alt=""/>
                            </div>
                        </a>
                    </div>
                    @endforeach
                </div>
            </div>
        </section>

        <!-- Start section -->
        <section class="products_sec section">
            <div class="container">
                <h2 class="sec_title text-uppercase color-primary fw-bold text-center mb-5">
                    {{ __('web.best_seller') }}
                    <img src="{{url('')}}/assets/web/images/title_line.svg" class="d-block m-auto" alt=""/>
                </h2>
                <div class="row">
                    @foreach($products as $product)
                        <div class="col-lg-3 col-md-4 col-6">
                            @include('web.pages.components.product.product',['product'=>$product])
                        </div>
                    @endforeach
                </div>
                <a href="{{route('products')}}" class="butn primary_butn m-auto mt-4">{{ __('web.view_more') }}</a>

            </div>
        </section>

        <!-- Start section -->
        <section class="offer_sec section pt-4 pb-0">
            <div class="container">
                <div class="inner">
                    <div class="row zi-5 align-items-center">
                        <div class="col-lg-5">
                            <div class="text_box">
                                <h2 class="title fw-bold text-white mb-3">
                                    {{$banner->name}}
                                </h2>
                                <h4 class="subtitle text-white mb-4">
                                    {!! $banner->description !!}
                                </h4>
                                <a href="{{$banner->link}}" class="butn secondary_butn">{{ __('web.buy_now') }}</a>
                            </div>
                        </div>
                        <div class="col-lg-7">
                            <img src="{{asset($banner->image)}}" class="sec-img" alt="">
                        </div>
                    </div>
                    <img src="{{url('')}}/assets/web/images/offer-bg.svg" class="bg" alt=""/>
                </div>
            </div>
        </section>

        <!-- Start section -->
        <section class="feedback_sec section">
            <div class="container">
                <h2 class="sec_title text-uppercase color-primary fw-bold text-center mb-5">
                    {{ __('web.testimonial') }}
                    <img src="{{url('')}}/assets/web/images/title_line.svg" class="d-block m-auto" alt=""/>
                </h2>
                <div class="swiper-container feedback_swiper">
                    <div class="swiper-wrapper pb-5">
                        @foreach($reviews as $row)
                            <div class="swiper-slide">
                            <div class="feedback_card d-flex">
                                <img src="{{asset($row->image)}}" class="avatar_img" alt=""/>
                                <div class="txt">
                                    <h6 class="title fw-bold color-primary text-capitalize">{{$row->user}}</h6>
                                    <p class="p mb-0">
                                        {!! $row->description !!}
                                    </p>
                                </div>
                            </div>
                        </div>
                        @endforeach
                    </div>
                    <div class="swiper-pagination"></div>
                </div>
            </div>
        </section>

        <!-- Start section -->
        <section class="features_sec section py-5">
            <div class="container">
                <div class="row">
                    @foreach($pages as $row)
                        <div class="col-lg-3 col-md-6">
                        <div class="item">
                            <h5 class="title">
                                <span class="icon">
                                    <!--<i class="fad fa-stars"></i>-->
                                    <img src="{{asset($row->image)}}" alt="">
                                </span>
                                {{$row->title}}
                            </h5>
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>
        </section>

        <!-- Start section -->
        @include('web.layouts.newsletter')

    </main>
    @if($show_popup)
        <div class="modal startingModal wow zoomIn" tabindex="1" id="startingModal">
            <div class="modal-dialog modal-dialog-centered modal-lg">
                <div class="modal-content">
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    <div class="modal-body">
                        <div class="row align-items-center">
                            <div class="col-lg-6">
                                <img src="{{asset($popup->image)}}" alt="" class="sec-img"/>
                            </div>
                            <div class="col-lg-6">
                                <div class="text-box py-3">
                                    <h2 class="title fw-bold color-primary mb-3">  {!! $popup->title !!}    </h2>
                                    <p class="det">
                                        {!! $popup->description !!}
                                    </p>
                                    <a href="{{route('products')}}" class="butn primary_butn mt-4">{{__('web.buy_now')}}</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @endif

    @section('inject_js')
        <script src="{{url('')}}/assets/web/js/custom/pages/homeAction.js"></script>
        @if($show_popup)
            <script>
                $('#startingModal').modal('show');
            </script>
        @endif
    @endsection

@stop
