@extends('layouts.account', ['title' => $title.' | RaseedNow'])

@section('account_content')
    <div class="kd-page-head">
        <div>
            <h1>{{ $title }}</h1>
            <p>{{ $subtitle }}</p>
        </div>
    </div>

    <section class="kd-account-catalog">
        @if($categories->count() && ! $offersOnly)
            <div class="kd-catalog-tabs" aria-label="الأقسام">
                <a href="{{ url()->current() }}" @class(['is-active' => $selectedCategory === ''])>الكل</a>
                @foreach($categories as $category)
                    <a href="{{ request()->fullUrlWithQuery(['category' => $category->slug, 'page' => null]) }}" @class(['is-active' => $selectedCategory === $category->slug])>
                        <span style="--tab-color: {{ $category->color }}"></span>
                        {{ $category->name_ar }}
                        <b>{{ $category->games_count }}</b>
                    </a>
                @endforeach
            </div>
        @endif

        @if($products->count())
            <div class="kd-product-grid">
                @foreach($products as $product)
                    @php
                        $game = $product->game;
                        $image = $game?->image_path ? asset($game->image_path) : asset('images/kroti/product-108.webp');
                        $visibleOffer = $product->offers
                            ->filter(fn ($offer) => $offer->appliesToUser(auth()->user()))
                            ->sortByDesc('discount_percent')
                            ->first();
                        $basePrice = max((int) $product->price_minor, 1);
                        $salePrice = $visibleOffer ? $visibleOffer->salePriceMinor() : $product->sale_price_minor;
                        $discount = $visibleOffer ? (int) round($visibleOffer->discount_percent) : ($salePrice ? max(1, round((($basePrice - $salePrice) / $basePrice) * 100)) : null);
                    @endphp
                    <article class="kd-product-card">
                        <a class="kd-product-art" href="{{ route('products.show', $product) }}">
                            <img src="{{ $image }}" alt="{{ $game?->name_ar ?: $product->name_ar }}" loading="lazy" decoding="async">
                            @if($discount)
                                <em>{{ $discount }}% خصم</em>
                            @elseif($product->is_best_seller)
                                <em>الأكثر طلبًا</em>
                            @endif
                        </a>
                        <div class="kd-product-info">
                            <span>{{ $game?->category?->name_ar ?: 'منتج' }}</span>
                            <h2>{{ $product->name_ar }}</h2>
                            <p>{{ $game?->name_ar }}</p>
                        </div>
                        <div class="kd-product-foot">
                            <strong>{{ $visibleOffer ? number_format($salePrice / 100, 2).' '.($product->currency_code ?: 'EGP') : $product->displayPrice() }}</strong>
                            <a href="{{ route('checkout.show', $product) }}">اشحن الآن</a>
                        </div>
                    </article>
                @endforeach
            </div>

            <div class="kd-pagination">
                {{ $products->links() }}
            </div>
        @else
            <div class="kd-empty">
                <h3>{{ $emptyMessage }}</h3>
                <p>ارجع لاحقًا، أو جرّب قسمًا آخر من القائمة.</p>
            </div>
        @endif
    </section>
@endsection