@extends('layouts.app')

@section('title', env('APP_NAME'))

@section('content')

<!-- Start Slider Area -->
<div class="slider__container slider--four">
    <div class="slider__activation__wrap owl-carousel owl-theme">
        @php
            $slides = [
                ['image' => 'storage/images/general/push2.jpg', 'title' => 'home.slide1_title'],
            ];
        @endphp
        @foreach($slides as $slide)
        <div class="slide slider__fixed--height" style="background: rgba(0, 0, 0, 0) url({{ asset($slide['image']) }}) no-repeat scroll center center / cover ;">
            <div class="container">
                <div class="row">
                    <div class="col-lg-7 col-xl-6 ms-auto col-md-10 col-12">
                        <div class="slider__content">
                            <div class="slider__inner">
                                <h1>{{ __($slide['title']) }}</h1>
                                <div class="slider__btn">
                                    <a class="htc__btn" href="{{ route('shop') }}">{{ __('home.shop_now') }}</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        @endforeach
    </div>
</div>
<!-- End Slider Area -->

<div class="custop__container bg__cat--2 mt--100">
    <div class="popular__product--2 product-hover-4 pb--80">
        <div class="container-fluid">
            <div class="row">
                <div class="col-12">
                    <div class="section__title section__title--2 text-center">
                        <h2 class="title__line">{{ __('home.popular_products') }}</h2>
                        <p>{{ __('home.popular_intro') }}</p>
                    </div>
                </div>
            </div>

            <div class="htc__product__container product__with__filter pb--20">
                @if($products->isNotEmpty())
                <div class="row mt--70">
                    <div class="col-md-12 col-lg-12 col-sm-12 col-12">
                        <div class="filter__menu__container">
                            <div class="product__menu">
                                <button data-filter="*" class="is-checked">{{ __('home.all') }}</button>
                                @foreach ($mainCategories as $category)
                                <button data-filter=".cat-{{ $category->id }}">{{ $category->name }}</button>
                                @endforeach
                            </div>
                            <div class="filter__box">
                                <a href="{{ route('shop') }}">{{ __('home.view_shop') }}</a>
                            </div>
                        </div>
                    </div>
                </div>
                @endif

                <div class="row">
                    <div class="col-md-12">
                        <div class="popular__product__container product__list clearfix">
                            @forelse ($products as $product)
                            @php
                                $filterClasses = $product->categories->flatMap(function ($category) {
                                    $classes = ['cat-'.$category->id];
                                    if ($category->parent_id) {
                                        $classes[] = 'cat-'.$category->parent_id;
                                    }
                                    return $classes;
                                })->unique()->implode(' ');

                                $thumb = $product->mainImage?->image
                                    ? asset('storage/images/products/'.$product->id.'/thumb/'.$product->mainImage->image)
                                    : asset('assets/images/product/1.jpg');
                            @endphp
                            <div class="single__pro {{ $filterClasses }}">
                                <div class="product">
                                    <div class="product__inner">
                                        <div class="pro__thumb">
                                            <a href="{{ route('shop.product', $product->slug) }}">
                                                <img src="{{ $thumb }}" alt="{{ $product->name }}">
                                            </a>
                                        </div>
                                        <div class="popular__product__hover__info">
                                            <ul class="product__action">
                                                <li>
                                                    <a href="javascript:void(0);"
                                                        data-url="{{ route('product.quickview', ['id' => $product->id, 'locale' => app()->getLocale()]) }}"
                                                        class="quick-view modal-view detail-link"
                                                        data-id="{{ $product->id }}"
                                                        title="Quick View"><span class="ti-plus"></span></a>
                                                </li>
                                                <li>
                                                    <a href="javascript:void(0);"
                                                        data-url="{{ route('cart.add', ['id' => $product->id, 'locale' => app()->getLocale()]) }}"
                                                        class="add-to-cart-link modal-view"
                                                        title="{{ __('shop.addtocart') }}"><span class="ti-shopping-cart"></span></a>
                                                </li>
                                                <li>
                                                    <a href="{{ route('shop.product', $product->slug) }}"
                                                        title="{{ __('shop.viewproduct') }}"><span class="ti-eye"></span></a>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                    <div class="product__details">
                                        <h2><a href="{{ route('shop.product', $product->slug) }}">{{ $product->name }}</a></h2>
                                        @if($product->discounted_price < $product->price)
                                            <span class="popular__pro__prize"><del>{{ $product->price }} €</del> {{ $product->discounted_price }} €</span>
                                        @else
                                            <span class="popular__pro__prize">{{ $product->discounted_price }} €</span>
                                        @endif
                                    </div>
                                </div>
                            </div>
                            @empty
                            <div class="col-12 text-center py-5">
                                <p>{{ __('home.no_products') }}</p>
                            </div>
                            @endforelse
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @include('layouts.footer')
</div>

<div id="quickview-wrapper">
    <div class="modal fade" id="productModal" tabindex="-1" role="dialog">
        <div class="modal-dialog modal-lg modal-dialog-centered modal__container1" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="modal-product1 row">
                        <div class="col-md-5 product-images1">
                            <div class="main-image images">
                                <img alt="" src="">
                            </div>
                        </div>
                        <div class="col-md-7 product-info">
                            <div class="price-box-3">
                                <div class="s-price-box">
                                    <span class="new-price"></span>
                                    <span class="old-price"></span>
                                </div>
                            </div>
                            <div class="quick-desc">
                                <div class="spinner-border" role="status">
                                    <span class="visually-hidden">Loading...</span>
                                </div>
                            </div>
                            <div class="addtocart-btn">
                                <a href="#">{{ __('shop.addtocart') }}</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<x-site.toasts message="{{ __('shop.product_added') }}" />

@endsection

@section('embed_footer')
@endsection

@section('scripts')
<script src="{{ asset('assets/js/product.js') }}"></script>
@endsection