@php
    $is_rtl = 'false';
@endphp
@if (\Mcamara\LaravelLocalization\Facades\LaravelLocalization::getCurrentLocaleDirection() == 'rtl')
    @php
        $is_rtl = 'true';
    @endphp
@else
    @php
        $is_rtl = 'false';
    @endphp
@endif

@extends('frontend.layouts.master')
@section('content')
    @include('frontend.home.partials.entry-popup', ['entryPopup' => $entryPopup])

    {{-- ADS Banner --}}
    @if ($adsBanner && $adsBanner->getMedia(Helper::ADS_COLLECTION) !== '')
        <section class="p-0 m-0 border-0 section">
            <div>
                <div class="bg-transparent slider-container rev_slider_wrapper">
                    <div id="revolutionSlider" class="overflow-visible slider rev_slider manual" data-version="5.4.8">
                        <ul>
                            @foreach ($adsBanner->getMedia(Helper::ADS_COLLECTION) as $key => $mediaItem)
                                <li style="cursor:pointer;" data-transition="fade"
                                    onclick="redirectToAdsBannerLink('{{ $mediaItem?->getCustomProperty('link') }}')">
                                    <img src="{{ $mediaItem->getUrl() }}" alt="" data-bgposition="center center"
                                        data-bgfit="cover" data-bgrepeat="no-repeat" data-bgparallax="0" class="rev-slidebg"
                                        loading="lazy" data-no-retina>
                                </li>
                            @endforeach


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


    {{-- popular categories --}}
    @if (count($popularCategories) > 0)
        <section class="py-2 m-0 bg-transparent border-0 section">
            <div class="container-xxl">
                <div class="row">
                    <div class="px-1 col">
                        <div class="card">
                            <div class="px-1 pt-2 pb-0 card-body">
                                <h3 class="pb-2 mb-2 fw-bold custom-border">
                                    {{ __('routes.POPULAR CATEGORIES') }}
                                </h3>
                                <div class="row">
                                    @foreach ($popularCategories as $key => $category)
                                        <div class="mb-3 col-lg-2 col-md-3 col-sm-4 col-4">
                                            <span class="text-center d-flex flex-column">
                                                <a href="{{ route('category.show', $category->slug) }}">
                                                    <img alt="" class="custom-overlay category-circle"
                                                        @if (empty($category->getFirstMediaUrl(Helper::POPULAR_CATEGORY_COLLECTION)) ||
                                                                is_null($category->getFirstMediaUrl(Helper::POPULAR_CATEGORY_COLLECTION))) src="{{ asset('logo/logo.png') }}">
                                                        @else
                                                        src="{{ $category->getFirstMediaUrl(Helper::POPULAR_CATEGORY_COLLECTION) ?? asset('logo/logo.png') }}
                                                        "> @endif
                                                        </a>
                                                    <a href="{{ route('category.show', $category->slug) }}"
                                                       style="filter: drop-shadow(1px 1px rgba(0,0,0,0.2))"
                                                        class="text-center text-truncate">
                                                        {{ $category->name }}
                                                    </a>
                                            </span>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    @endif

    @if (count($offers) >= 2)
    <div class="py-2 m-0 bg-transparent border-0 section">
        <div class="container-xl">
            <div class="row">
                @foreach($offers as $offerKey => $offer)
                    <div class="col-lg-6 col-md-6 col-sm-12 col-12 mb-3">
                        <a href="{{route('offers.show', $offer->slug)}}" title="{{ $offer->title }}">
                            <img class="img-fluid offer-item rounded-4" src="{{ $offer->image }}" alt="{{ $offer->title }}"
                                 style="width: 100%; aspect-ratio: 4/2; object-fit: cover"/>
                        </a>
                    </div>
                @endforeach

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

    {{-- Products --}}
    @if ($newProducts->where('number_of_sales', '>=', 5)->isNotEmpty())
        <section class="py-2 m-0 bg-transparent border-0 section">
            <div class="container-xxl">
                <div class="row">
                    <div class="px-1 col">
                        <div class="card">
                            <div class="px-1 pt-2 pb-0 card-body">
                                <h3 class="pb-2 mb-2 fw-bold custom-border">
                                    @if (auth()->check() && auth()->user()->hasRole('user'))
                                        {{ __('routes.On Sale') }}
                                    @elseif(auth()->check() && auth()->user()->hasRole('wholesale'))
                                        {{ __('routes.Packages') }}
                                    @else
                                        {{ __('routes.On Sale') }}
                                    @endif
                                </h3>

                                <div class="row">
                                    <div class="col">
                                        <div class="owl-carousel owl-theme show-nav-title"
                                            data-plugin-options="{'responsive': {'0': {'items': 2}, '479': {'items': 2}, '768': {'items': 2}, '979': {'items': 5}, '1199': {'items': 5}}, 'margin': 10, 'loop': false, 'nav': true, 'dots': false, 'stagePadding': 0, 'rtl': false, 'lazyLoad': true}">

                                            @if (!auth()->check() && auth()->user()->hasRole('user'))
                                                @foreach ($newProducts as $newProduct)
                                                    <div>
                                                        <x-product-component :product="$newProduct" />
                                                    </div>
                                                @endforeach
                                            @elseif(auth()->check() && auth()->user()->hasRole('wholesale'))
                                                @foreach ($packages as $package)
                                                    <div>
                                                        <x-package-component :package="$package" />
                                                    </div>
                                                @endforeach
                                            @else
                                                @foreach ($newProducts as $newProduct)
                                                    <div>
                                                        <x-product-component :product="$newProduct" />
                                                    </div>
                                                @endforeach
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    @endif


    {{-- newinProducts --}}
    <livewire:frontend.newin-products />

    {{-- Featured Products --}}
    <livewire:frontend.featured-products />

    {{-- All Reviews --}}
    @if (count($reviews) > 0)
        <section class="py-2 m-0 bg-transparent border-0 section">
            <div class="container-xxl">
                <div class="row">
                    <div class="px-1 col">
                        <div class="card">
                            <div class="px-1 pt-2 pb-0 card-body">
                                <h3 class="pb-2 mb-2 fw-bold custom-border">
                                    {{ __('routes.Customer reviews') }}
                                </h3>

                                <div class="row">
                                    <div class="col">
                                        <div class="pb-3 mb-4 owl-carousel carousel-center-active-item-2 nav-style-4"
                                            data-plugin-options="{'items': 1, 'loop': true, 'nav': true, 'dots': false}">

                                            @foreach ($reviews as $review)
                                                <div>
                                                    <div
                                                        class="mb-4 d-flex flex-column flex-md-row justify-content-between">
                                                        <div class="author d-flex align-items-center">
                                                            <img src="{{ $review->user->getFirstMediaUrl('profile') }}"
                                                                alt="{{ $review->user->first_name }}"
                                                                class="rounded-circle me-2"
                                                                style="width: 30px; height: 30px;">
                                                            <div>
                                                                <h4 class="mb-0 text-5">{{ $review->user->first_name }}
                                                                    {{ $review->user->last_name }}</h4>
                                                            </div>
                                                        </div>

                                                        <span class="star-rating">
                                                            @php
                                                                $fullStars = floor($review->rate);
                                                                $hasHalfStar = $review->rate - $fullStars >= 0.5;
                                                                $emptyStars = 5 - $fullStars - ($hasHalfStar ? 1 : 0);
                                                            @endphp

                                                            @for ($i = 0; $i < $fullStars; $i++)
                                                                <i class="fas fa-star text-color-dark"></i>
                                                            @endfor

                                                            @if ($hasHalfStar)
                                                                <i class="fas fa-star-half-alt text-color-dark"></i>
                                                            @endif

                                                            @for ($i = 0; $i < $emptyStars; $i++)
                                                                <i class="far fa-star text-muted"></i>
                                                            @endfor
                                                        </span>
                                                    </div>


                                                    <span class="opacity-7">{{ $review->product->name }}</span>
                                                    <p class="mb-0">"{{ $review->review }}"</p>
                                                    {{-- @if ($review->getFirstMediaUrl(Helper::PRODUCT_REVIEW_COLLECTION)) --}}
                                                    <div class="mb-3 package-review-image">
                                                        <img src="{{ $review->getFirstMediaUrl(Helper::PRODUCT_REVIEW_COLLECTION) }}"
                                                            alt="imagereview"
                                                            style="width: 20%; max-width: 100px; border-radius: 8px;">
                                                    </div>
                                                    {{-- @endif --}}
                                                </div>
                                            @endforeach

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

    {{-- Testimonials --}}
    @if (count($testimonials) > 0)
        <section class="py-2 m-0 bg-transparent border-0 section">
            <div class="container-xxl">
                <h3 class="pb-2 mb-2 fw-bold custom-border">
                    {{ __('routes.testimonials') }}
                </h3>
                <div class="pb-5 row">

                    <div class="pb-3 mb-4 owl-carousel carousel-center-active-item-2 nav-style-4"
                        data-plugin-options="{'items': 1, 'loop': true, 'nav': true, 'dots': false}">
                        @foreach ($testimonials as $testimonial)
                            <div class="bg-white w-100">
                                <p class="mb-0" style="color: black !important;">"{{ $testimonial->description }}"</p>
                                <div class="text-center w-100 d-flex justify-content-center">
                                    <img alt="Testimonials img" style="width: 100%; height: 300px; object-fit: contain;"
                                        src="{{ $testimonial->getFirstMediaUrl(Helper::TESTIMONIALS_COLLECTION) }}"
                                        class="img-fluid rounded-3" />
                                </div>
                            </div>
                        @endforeach
                    </div>

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

@endsection
@section('script')
    <script>




        // Slider
        $('#revolutionSlider').revolution({
            sliderType: 'standard',
            carousel: {
                maxVisibleItems: 1,
                stretch: 'on',
            },
            sliderLayout: 'auto',
            delay: 5000,
            gridwidth: 1400,
            gridheight: 380,
            spinner: 'on',
            disableProgressBar: 'on',
            parallax: {
                type: "on",
                levels: [5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 70, 75, 80, 85],
                origo: "enterpoint",
                speed: 400,
                bgparallax: "on",
                disable_onmobile: "off"
            },
            navigation: {
                keyboardNavigation: "off",
                keyboard_direction: "horizontal",
                mouseScrollNavigation: "off",
                onHoverStop: "on",
                touch: {
                    touchenabled: "on",
                    swipe_threshold: 75,
                    swipe_min_touches: 1,
                    swipe_direction: "horizontal",
                    drag_block_vertical: false
                },
                bullets: {
                    enable: true,
                    hide_onmobile: false,
                    hide_under: 778,
                    style: "hermes",
                    tmp: '<span class="tp-bullet-inner"></span>',
                    hide_onleave: false,
                    direction: "horizontal",
                    h_align: "center",
                    v_align: "bottom",
                    h_offset: 0,
                    v_offset: 30,
                    space: 7
                },
                arrows: {
                    enable: true, // Enables navigation arrows
                    style: "zeus", // You can choose other styles like "zeus", "persephone", "metis" etc.
                    hide_onmobile: false,
                    hide_under: 778,
                    hide_onleave: false,
                    left: {
                        h_align: "left",
                        v_align: "center",
                        h_offset: -25,
                        v_offset: 0
                    },
                    right: {
                        h_align: "right",
                        v_align: "center",
                        h_offset: -25,
                        v_offset: 0
                    }
                }
            }
        });


        function redirectToAdsBannerLink(link) {
            if (link != null) {
                window.location.href = link;
            }
        }
    </script>
@endsection