@extends('site.layout.layout')

@section('title',__('Home'))

@section('content')
    <main class="home_page">
        <!-- ------- BANNER ---------- -->
        <div class="home_banner container-fluid py-4 p-md-4" style="position: relative;">
            <div class="owl-slider owl-carousel owl-theme">
                @forelse($banners as $banner)
                    @if($banner->banner && Storage::disk('public')->exists($banner->banner))
                        <div class="item">
                            <div class="banner_img">
                                <img src="{{ Storage::disk('public')->url($banner->banner) }}" alt="" class="image-fluid">
                            </div>
                            <div class="caption pt-xxl-5 d-flex align-items-end">
                                <!-- <div class="w-100">
                                    <h2>{{ $banner->getTranslation('title',app()->getLocale()) }}</h2>
                                    <p class="mt-2">{{ $banner->getTranslation('description',app()->getLocale()) }}</p>
                                </div> -->
                                <a href="{{ $banner->banner_redirect_link ?? '#' }}" target="_blank" class="floatBtn mt-3 mt-md-4 mt-xxl-5 shop-now-btn" data-id="{{ $banner->id }}">
                                    <img src="{{ asset('site/img/light/buy-icon.png') }}" class="mx-1" alt> {{ __('Shop now') }}
                                </a>
                            </div>
                        </div>
                    @endif
                @empty
                    <div class="item">
                        <div class="banner_img">
                            <img src="{{ asset('site/img/home-banner.jpg') }}" alt="Gaming Store" class="image-fluid">
                        </div>
                        <div class="caption pt-xxl-5">
                            <div class="w-100">
                                <h2>{{ __('Level Up Your Gaming Setup!') }}</h2>
                                <p class="mt-2">{{ __('Discover the best deals on new and classic gaming products — from consoles to accessories.') }}</p>
                            </div>
                            <a href="{{ route('Site.NewProducts') }}" class="floatBtn mt-3 mt-md-4 mt-xxl-5">
                                <img src="{{ asset('img/light/buy-icon.png') }}" class="mx-1" alt>
                                {{ __('Shop now') }}
                            </a>
                        </div>
                    </div>
                @endforelse
            </div>
            <div class="owl-theme">
                <div class="owl-controls">
                    <div class="custom-nav owl-nav"></div>
                </div>
            </div>
        </div>
        <section class="categories_sec container py-5">
            <h5 class="section_title_sm fit_height_center w-100 mb-4"> {{ __('Categories') }} </h5>
            <h3 class="section_title"> {{ __('Browse by category') }}</h3>
            <div class="row mt-4">
                <div class="owl-carousel owl-theme">
                    @forelse($categories as $category)
                        <a href="{{ route('Site.ProductsByCategory',$category->id) }}" class="item fit_height_center justify-content-center">
                            <figure>
                                <div class="cat_logo mb-2">
                                    <img src="{{ Storage::disk('public')->url($category->image) }}" class="img-fluid" alt="">
                                </div>
                                <figcaption>{{ $category->getTranslation('title',app()->getLocale()) }}</figcaption>
                            </figure>
                        </a>
                    @empty
                    @endforelse
                </div>
            </div>
        </section>
        <section class="products_sec container py-5">
            <h5 class="section_title_sm fit_height_center w-100 mb-4"> {{ __('This Month') }}</h5>
            <div class="d-flex justify-content-between mb-4">
                <h3 class="section_title"> {{ __('Distinctive products') }}</h3>
                <a href="{{ route('Site.NewProducts') }}" class="primaryBorderBtn">{{ __('View all products') }}</a>
            </div>
            <div class="row mt-4">
                @forelse($distinctiveProducts as $distinctiveProduct)
                    <a href="{{ route('Site.ProductsDetails',$distinctiveProduct->id) }}" class="col-sm-6 col-lg-4 col-xl-3 mb-4">
                        <figure>
                            <div class="product_container">
                                <img src="{{ Storage::disk('public')->url($distinctiveProduct->images?->first()?->image) }}" class="img-fluid" alt="">
                            </div>
                            <figcaption class="fit_height_between p-2">
                                <div class="w-100">
                                    <p class="cat_name mb-2">{{ $distinctiveProduct->getTranslation('title',app()->getLocale()) }}</p>
                                    <!-- <p class="my-2">{{ $distinctiveProduct->getTranslation('description',app()->getLocale()) }}</p> -->
                                                                        <p><img src="{{ asset("site/img/{$distinctiveRating}stars.png") }}" alt="" style="margin-bottom: 5px;"> <span>( {{ number_format($distinctiveProduct->reviews?->avg('rating'),2) ?? 0 }} )</span> </p>
                                    <h4 class="my-2">{{ $distinctiveProduct->product_net_price }} <img src="{{ asset('site/img/light/sar.svg') }}" class="mode_icon" data-light="{{ asset('site/img/light/sar.svg') }}" data-dark="{{ asset('site/img/dark/sar.svg') }}" alt=""></h4>
                                </div>
                                <div class="buttons justify-content-between w-100 my-2">
                                    <button type="button" class="primaryBgBtn" onclick="handleFavAndCart(event,'cart',{{ $distinctiveProduct->id }})" id="cart{{ $distinctiveProduct->id }}">
                                        <img src="{{ asset('site/img/light/buy-icon.png') }}" class="mode_icon" data-light="{{ asset('site/img/light/buy-icon.png') }}" data-dark="{{ asset('site/img/dark/buy-icon.png') }}" alt=""> {{ __('Add to cart') }}
                                    </button>
                                    <button type="button" class="favBtn" onclick="handleFavAndCart(event,'fav',{{ $distinctiveProduct->id }})">
                                        @if($distinctiveProduct->myFavorite)
                                            <i class="fas fa-heart text-danger" id="fav{{ $distinctiveProduct->id }}"></i>
                                        @else
                                            <i class="far fa-heart" id="fav{{ $distinctiveProduct->id }}"></i>
                                        @endif
                                    </button>
                                </div>
                            </figcaption>
                        </figure>
                    </a>
                @empty
                    <div class="no_results fit_height_center justify-content-center">
                        <i class="fas fa-box-open bounce_icon"></i>
                        <h2 class="text-center w-100 pt-3"> {{ __('There are no products to display.') }}</h2>
                    </div>
                @endforelse
            </div>
        </section>

        @if(count($offerProducts) > 0)
        <section class="products_sec container py-5">
            <h5 class="section_title_sm fit_height_center w-100 mb-4"> {{ __('Recently added') }}</h5>
            <div class="d-flex justify-content-between mb-4">
                <h3 class="section_title"> {{ __('Product offers') }}</h3>
                <a href="{{ route('Site.OfferProducts') }}" class="primaryBorderBtn">{{ __('View all offers') }}</a>
            </div>
            <div class="row mt-4">
                @forelse($offerProducts as $offerProduct)
                    <a href="{{ route('Site.ProductsDetails',$offerProduct->id) }}" class="col-sm-6 col-lg-4 col-xl-3 mb-4">
                        <figure>
                           <p class="product_info sale">
                                <img src="{{ asset('site/img/discount-icon.png') }}" alt=""> 
                                {{ __('Discount') }} 
                                @if($offerProduct->offer?->discount_type == 1)
                                    {{ $offerProduct->offer?->discount }} <img src="{{ asset('site/img/light/sar.svg') }}" class="mode_icon" data-light="{{ asset('site/img/light/sar.svg') }}" data-dark="{{ asset('site/img/dark/sar.svg') }}" alt="">
                                @else
                                    {{ $offerProduct->offer?->discount }} %
                                @endif
                            </p>
                            <div class="product_container">
                                <img src="{{ Storage::disk('public')->url($offerProduct->images?->first()?->image) }}" class="img-fluid" alt="">
                            </div>
                            <figcaption class="fit_height_between p-2">
                                <div class="w-100">
                                    <p class="cat_name mb-2">{{ $offerProduct->getTranslation('title',app()->getLocale()) }}</p>
                                    <!-- <p class="my-2">{{ $offerProduct->getTranslation('description',app()->getLocale()) }}</p> -->
                                                                        <p><img src="{{ asset("site/img/{$distinctiveRating}stars.png") }}" alt="" style="margin-bottom: 5px;"> <span>( {{ number_format($offerProduct->reviews?->avg('rating'),2) ?? 0 }} )</span> </p>
                                    <h4 class="my-2 d-flex align-items-center gap-1">
                                        @if($offerProduct->price > $offerProduct->product_net_price)
                                            <span class="text-muted text-decoration-line-through oldPrice" style="{{ app()->getLocale() == 'en' ? 'margin-right:5px;' : 'margin-left:5px;' }}">
                                                {{ $offerProduct->price }}
                                            </span>
                                        @endif
                                        <span class="fw-bold text-danger">{{ $offerProduct->product_net_price }}</span>
                                        <img src="{{ asset('site/img/sar.svg') }}" data-light="{{ asset('site/img/sar.svg') }}" data-dark="{{ asset('site/img/sar.svg') }}" alt="SAR">
                                    </h4>
                                </div>
                                <div class="buttons justify-content-between w-100 my-2">
                                    <button type="button" class="primaryBgBtn" onclick="handleFavAndCart(event,'cart',{{ $offerProduct->id }})" id="cart{{ $offerProduct->id }}">
                                        <img src="{{ asset('site/img/light/buy-icon.png') }}" class="mode_icon" data-light="{{ asset('site/img/light/buy-icon.png') }}" data-dark="{{ asset('site/img/dark/buy-icon.png') }}" alt=""> {{ __('Add to cart') }}
                                    </button>
                                    <button type="button" class="favBtn" onclick="handleFavAndCart(event,'fav',{{ $offerProduct->id }})">
                                        @if($offerProduct->myFavorite)
                                            <i class="fas fa-heart text-danger" id="fav{{ $offerProduct->id }}"></i>
                                        @else
                                            <i class="far fa-heart" id="fav{{ $offerProduct->id }}"></i>
                                        @endif
                                    </button>
                                </div>
                            </figcaption>
                        </figure>
                    </a>
                @empty
                    <div class="no_results fit_height_center justify-content-center">
                        <i class="fas fa-box-open bounce_icon"></i>
                        <h2 class="text-center w-100 pt-3"> {{ __('There are no offers to display.') }}</h2>
                    </div>
                @endforelse
            </div>
        </section>
        @endif

        <section class="products_sec container py-5">
            <h5 class="section_title_sm fit_height_center w-100 mb-4"> {{ __('Recently added') }}</h5>
            <div class="d-flex justify-content-between mb-4">
                <h3 class="section_title"> {{ __('Used products') }}</h3>
                <a href="{{ route('Site.UsedProducts') }}" class="primaryBorderBtn">{{ __('View all products') }}</a>
            </div>
            <div class="row mt-4">
                @forelse($usedProducts as $usedProduct)
                    <a href="{{ route('Site.ProductsDetails',$usedProduct->id) }}" class="col-sm-6 col-lg-4 col-xl-3 mb-4">
                        <figure>
                            <p class="product_info"><img src="{{ asset('site/img/star-icon.png') }}" alt=""> 
                            {{ ($usedProduct->sale_status == 2 ? __('Open Box',[],app()->getLocale()) : ($usedProduct->sale_status == 3 ? __('Very Good',[],app()->getLocale()) : __('Good',[],app()->getLocale()) )) }}
                            </p>
                            <div class="product_container full_bg" style="background-image: url({{ Storage::disk('public')->url($usedProduct->images?->first()?->image) }});">
                            </div>
                            <figcaption class="fit_height_between p-2">
                                <div class="w-100">
                                    <p class="cat_name mb-2">{{ $usedProduct->getTranslation('title',app()->getLocale()) }}</p>
                                    <!-- <p class="my-2">{{ $usedProduct->getTranslation('description',app()->getLocale()) }}</p> -->
                                                                        <p><img src="{{ asset("site/img/{$usedRating}stars.png") }}" alt="" style="margin-bottom: 5px;"> <span>( {{ number_format($usedProduct->reviews?->avg('rating'),2) ?? 0 }} )</span> </p>
                                    <h4 class="my-2">{{ $usedProduct->product_net_price }} <img src="{{ asset('site/img/light/sar.svg') }}" class="mode_icon" data-light="{{ asset('site/img/light/sar.svg') }}" data-dark="{{ asset('site/img/dark/sar.svg') }}" alt=""></h4>
                                </div>
                                <div class="buttons justify-content-between w-100 my-2">
                                    <button type="button" class="primaryBgBtn" onclick="handleFavAndCart(event,'cart',{{ $usedProduct->id }})" id="cart{{ $usedProduct->id }}">
                                        <img src="{{ asset('site/img/light/buy-icon.png') }}" class="mode_icon" data-light="{{ asset('site/img/light/buy-icon.png') }}" data-dark="{{ asset('site/img/dark/buy-icon.png') }}" alt=""> {{ __('Add to cart') }}
                                    </button>
                                    <button type="button" class="favBtn" onclick="handleFavAndCart(event,'fav',{{ $usedProduct->id }})">
                                        @if($usedProduct->myFavorite)
                                            <i class="fas fa-heart text-danger" id="fav{{ $usedProduct->id }}"></i>
                                        @else
                                            <i class="far fa-heart" id="fav{{ $usedProduct->id }}"></i>
                                        @endif
                                    </button>
                                </div>
                            </figcaption>
                        </figure>
                    </a>
                @empty
                    <div class="no_results fit_height_center justify-content-center">
                        <i class="fas fa-box-open bounce_icon"></i>
                        <h2 class="text-center w-100 pt-3"> {{ __('There are no products to display.') }}</h2>
                    </div>
                @endforelse
            </div>
        </section>
        <section class="stores_sec container py-5">
            <h5 class="section_title_sm fit_height_center w-100 mb-4"> {{ __('Stores') }}</h5>
            @forelse($verifications ?? [] as $verification)
                <div class="d-flex justify-content-between align-items-center mb-4">
                    <h3 class="section_title"> {{ $verification->getTranslation('title',app()->getLocale()) }}</h3>
                    <a href="{{ route('Site.AllStores') }}" class="primaryBorderBtn">{{ __('View all stores') }}</a>
                </div>
                <div class="row mt-4">