@extends('web.layouts.app')

@section('title', transWord('الرئيسية'))
@description(Str::limit(strip_tags(getSetting('desc_seo', app()->getLocale())), 160))
@keywords(implode(',', json_decode(getSetting('keyword', app()->getLocale()))))
@image(asset('storage/' . getSetting('logo')))

@section('content')
    <!-- start hero  -->
    <section class="hero">
        <div class="main-container h-100">
            <div class="owl-carousel owl-theme h-100 d-flex align-items-center" id="slider-hero">

                @foreach ($banners as $banner)
                    <div class="item">
                        <div class="slider-hero">
                            <div class="row align-items-center">
                                <div class="col-lg-6">
                                    <div class="text-slider-hero">
                                        <h2> {{ $banner->name }} </h2>
                                        <a href="{{ route('web.supply.product-details', $banner->product->slug) }}"
                                            class="ctm-btn w-btn"> {{ transWord('تسوق الآن') }} </a>
                                    </div>
                                </div>

                                <div class="col-lg-6">
                                    <div class="img-slider-hero">
                                        <img src="{{ asset('storage/' . $banner->image) }}" alt="{{ $banner->name }}">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach


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

    <!-- start advantages-index  -->
    <section class="advantages-index">
        <div class="main-container">
            @foreach ($features as $feature)
                <div class="sub-advantages-index">
                    <div class="img-advantages-index">
                        <img src="{{ asset('storage/' . $feature->image) }}" alt="{{ $feature->name }}">
                    </div>
                    <div class="text-advantages-index">
                        <h2> {{ $feature->name }} </h2>
                        <p>{{ $feature->desc }}</p>
                    </div>
                </div>
            @endforeach
        </div>
    </section>
    <!-- end advantages-index  -->

    <!-- start latest-products-index  -->
    <section class="latest-products-index mr-section">
        <div class="main-container">
            <div class="title-start">
                <h2>{{ transWord('أحدث المنتجات') }}</h2>
            </div>

            <div class="slider-product">
                <div class="owl-carousel owl-theme" id="slider-product">

                    @foreach ($products as $product)
                        <div class="item">
                            <div class="sub-product">
                                <div class="img-product">
                                    <img src="{{ asset('storage/' . $product->images[0]->image) }}"
                                        alt="{{ $product->name }}">

                                    @include('web.includes.favorite-button')

                                    <div class="new-product" style="background: {{ $product->label_color }}">
                                        {{ $product->label }} </div>
                                    <a href="{{ route('web.supply.product-details', $product->slug) }}"
                                        class="add-to-cart-product">
                                        {{ transWord('اضف للسلة') }}
                                    </a>

                                </div>

                                <div class="text-product">
                                    <a href="{{ route('web.supply.product-details', $product->slug) }}">

                                        <h2>{{ $product->name }}</h2>
                                        <div class="rate">
                                            @for ($i = 1; $i <= 5; $i++)
                                                <span
                                                    @if ($i <= $product->averageRate()) class="fa fa-star checked"  @else class="fa fa-star" @endif></span>
                                            @endfor
                                            <i>({{ $product->averageRate() }})</i>
                                        </div>
                                    </a>
                                </div>
                            </div>

                        </div>
                    @endforeach


                </div>
            </div>
        </div>
    </section>
    <!-- end latest-products-index  -->

    <!-- banner-index  1  -->
    <section class="banner-index-1 mr-section">
        <div class="main-container">
            <div class="row row-gap">
                @foreach ($ads->where('position', 'top') as $topAd)
                    <div class="col-lg-4 col-md-6">
                        <div class="sub-banner-index-1">
                            <div class="text-banner-index-1">
                                {!! $topAd->desc !!}
                                <a href="" class="ctm-btn mt-2"> {{ transWord('تسوق الآن') }} </a>
                            </div>
                            <div class="img-banner-index-1">
                                <img src="{{ asset('storage/' . $topAd->image) }}" alt="">
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </section>


    <!-- best-seller-index  -->
    <section class="best-seller-index mr-section">
        <div class="main-container">
            <div class="title-start">
                <h2>{{ transWord('الأكثر مبيعا') }} </h2>
                <a href="{{ route('web.supply.products.index') }}" class="ctm-link"> {{ transWord('المزيد') }} </a>
            </div>

            <div class="row">
                @foreach ($ads->where('position', 'right') as $rightAd)
                    <div class="col-lg-3 col-md-12">
                        <div class="sub-best-seller-index">
                            @if ($rightAd->label)
                                <div class="discount-best">
                                    {{ $rightAd->label }}
                                </div>
                            @endif

                            <div class="img-best-seller">
                                <img src="{{ asset('storage/' . $rightAd->image) }}" alt="">
                            </div>
                            <div class="text-best-seller">
                                {!! $rightAd->desc !!}
                                <a href="" class="ctm-btn"> {{ transWord('تسوق الآن') }} </a>
                            </div>
                        </div>
                    </div>
                @endforeach


                <div class="col-lg-9 col-md-12">
                    <div class="row pg-none">

                        @foreach ($products as $product)
                            <div class="col-lg-4 col-md-6 pg-none">
                                <div class="sub-product">
                                    <div class="img-product">
                                        <img src="{{ asset('storage/' . $product->images[0]->image) }}"
                                            alt="{{ $product->name }}">

                                        @include('web.includes.favorite-button')

                                        <div class="new-product" style="background: {{ $product->label_color }}">
                                            {{ $product->label }} </div>
                                        <a href="{{ route('web.supply.product-details', $product->slug) }}"
                                            class="add-to-cart-product">
                                            {{ transWord('اضف للسلة') }}
                                        </a>

                                    </div>

                                    <div class="text-product">
                                        <a href="{{ route('web.supply.product-details', $product->slug) }}">

                                            <h2>{{ $product->name }}</h2>
                                            <div class="rate">
                                                @for ($i = 1; $i <= 5; $i++)
                                                    <span
                                                        @if ($i <= $product->averageRate()) class="fa fa-star checked"  @else class="fa fa-star" @endif></span>
                                                @endfor
                                                <i>({{ $product->averageRate() }})</i>
                                            </div>
                                        </a>
                                    </div>
                                </div>


                            </div>
                        @endforeach


                    </div>
                </div>

            </div>
        </div>
    </section>
    <!-- end best-seller-index  -->

    <section class="banner-index mr-section">
        <div class="main-container">
            <div class="row row-gap">
                @php
                    $bgColors = ['#46BCBE', '#B3529A'];
                @endphp
                @foreach ($ads->where('position', 'bottom') as $key => $bottomAd)
                    <div class="col-lg-6">
                        <div class="sub-banner-index" style="background-color: {{ $bgColors[$key % count($bgColors)] }};">
                            <div class="img-banner-index">
                                <img src="{{ asset('storage/' . $bottomAd->image) }}" alt="">
                            </div>
                            <div class="text-banner-index">
                                {!! $bottomAd->desc !!}
                                <a href="" class="ctm-btn w-btn mt-2"> {{ transWord('تسوق الآن') }}</a>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </section>


    <!-- start customer-index  -->
    <section class="customer-index pg-section">
        <div class="main-container">
            <div class="title-start">
                <h2>{{ transWord('اراء عملاءنا') }} </h2>
            </div>

            <div class="owl-carousel owl-theme" id="slider-customer">

                @foreach ($feedbacks as $feedback)
                    <div class="item">
                        <div class="sub-customer-index">
                            <div class="img-customer-index">
                                <img src="{{ url('web') }}/imges/feedback.png" alt="{{ $feedback->name }}">
                            </div>
                            <div class="text-customer-index">
                                <p>{{ $feedback->review }}</p>
                                <h2>{{ $feedback->name }} </h2>
                                <h4>{{ $feedback->job_title }}</h4>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </section>
    <!-- end customer-index  -->

    <!-- newsletter -->
    <div class="newsletter mr-section">
        <div class="main-container">
            <div class="row align-items-center">
                <div class="col-lg-5">
                    <div class="title-newsletter">
                        <h2>{{ transWord('النشرة البريدية') }}</h2>
                        <p> {{ transWord('اشترك معنا الان ليصلك كل ما هو جديد') }} </p>
                    </div>
                </div>

                <div class="col-lg-7">
                    <form action="{{ route('web.solutions.subscription') }}" method="POST" id="subscriptionForm">
                        @csrf
                        <div class="form-newsletter">
                            <div class="input-form">
                                <input type="email" placeholder="{{ transWord('ادخل البريد الإلكتروني') }}"
                                    class="form-control" name="email" required>
                            </div>
                            <button class="ctm-btn w-btn"> {{ transWord('اشتراك الآن') }} </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>


    <!-- our-partners -->
    <section class="our-partners mr-section">
        <div class="main-container">
            <div class="title-center">
                <h2>{{ transWord('شركائنا') }} </h2>
            </div>

            <div class="owl-carousel owl-theme" id="slider-our-partners">
                @foreach ($partners as $partner)
                    <div class="item">
                        <div class="sub-our-partners">
                            <img src="{{ asset('storage/' . $partner->image) }}" alt="">
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </section>

    <!-- our-customers -->
    <section class="our-customers mr-section">
        <div class="title-center">
            <h2> {{ transWord('عملائنا') }}</h2>
        </div>
        <div class="main-our-customers">
            <div class="main-container">
                <div class="owl-carousel owl-theme" id="slider-our-customer">
                    @foreach ($clients as $client)
                        <div class="item">
                            <div class="sub-our-customers">
                                <img src="{{ asset('storage/' . $client->image) }}" alt="">
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    </section>

    @push('js')
        <script src="{{ asset('web/js/custom/validation/subscriptionForm.js') }}"></script>
    @endpush
@endsection