@extends('layouts.store', ['title' => 'RaseedNow | شحن ألعاب وبطاقات رقمية'])

@section('content')
    @php
        $isEnglish = app()->getLocale() === 'en';
        $defaultHeroSlides = collect(['hero-gaming-original.png', 'hero-digital-original.png'])->map(fn ($slide) => asset('images/hero/'.$slide));
        $heroSlides = $banners->whereNotNull('image_path')->pluck('image_path')->map(fn ($path) => asset($path))->values();
        $heroSlides = $heroSlides->isNotEmpty() ? $heroSlides : $defaultHeroSlides;
        $categoryImages = ['category-100.png', 'category-101.png', 'category-102.png', 'category-103.png', 'category-104.png', 'category-105.png', 'category-106.png', 'category-107.png'];
        $productImages = collect(range(108, 143))->map(fn ($number) => 'product-'.$number.'.webp')->values();
        $heroSideServices = $services->filter(fn ($service) => in_array($service->slug, ['pubg-mobile', 'free-fire', 'clash-of-clans', 'jawaker']))->values();
        $heroSideServices = $heroSideServices->count() >= 4 ? $heroSideServices : $services->take(4)->values();
        $categoryLabels = $isEnglish
            ? ['Game top-up', 'Game cards', 'E-payment', 'Social media', 'Activation keys', 'Shopping', 'Telecom cards', 'App subscriptions']
            : ['شحن الألعاب', 'بطاقات الالعاب', 'الدفع الإلكتروني', 'سوشيال ميديا', 'مفاتيح التفعيل', 'التسوق', 'بطاقات الإتصالات', 'اشتراكات التطبيقات'];
        $sections = [
            ['title' => $isEnglish ? 'Game top-up' : 'شحن الألعاب', 'slug' => 'games'],
            ['title' => $isEnglish ? 'Game cards' : 'بطاقات الألعاب', 'slug' => 'gift-cards'],
            ['title' => $isEnglish ? 'E-payment' : 'الدفع الإلكتروني', 'slug' => 'deals'],
            ['title' => $isEnglish ? 'App subscriptions' : 'اشتراكات التطبيقات', 'slug' => 'subscriptions'],
        ];
    @endphp

    <section class="kr-hero-stage" aria-label="العروض الرئيسية">
        <div class="kr-hero-side">
            @foreach($heroSideServices as $service)
                @php($sideImage = $service->image_path ? asset($service->image_path) : asset('images/kroti/'.$productImages[$loop->index % $productImages->count()]))
                <a href="{{ route('games.show', $service->slug) }}">
                    <img src="{{ $sideImage }}" alt="{{ $service->name_ar }}">
                    <span class="kr-hero-side-label" style="white-space: normal !important; overflow: visible !important; text-overflow: clip !important;">{{ $isEnglish ? $service->name_en : $service->name_ar }}</span>
                </a>
            @endforeach
        </div>

        <div class="kr-hero-carousel">
            @foreach($heroSlides as $slide)
                <a href="#catalog" class="kr-hero-slide @if($loop->first) is-active @endif">
                    <img src="{{ $slide }}" alt="{{ $isEnglish ? 'RaseedNow offer' : 'عرض RaseedNow' }}">
                </a>
            @endforeach
            @if($heroSlides->count() > 1)
                <button type="button" class="rn-hero-arrow rn-hero-prev" data-rn-hero-prev aria-label="{{ $isEnglish ? 'Previous offer' : 'العرض السابق' }}">
                    <svg viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="m15 18-6-6 6-6" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
                </button>
                <button type="button" class="rn-hero-arrow rn-hero-next" data-rn-hero-next aria-label="{{ $isEnglish ? 'Next offer' : 'العرض التالي' }}">
                    <svg viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="m9 6 6 6-6 6" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
                </button>
                <div class="kr-hero-dots" data-rn-hero-dots>
                    @foreach($heroSlides as $slide)
                        <button type="button" @class(['is-active' => $loop->first]) data-rn-hero-dot aria-label="{{ ($isEnglish ? 'Show offer ' : 'عرض رقم ').$loop->iteration }}"></button>
                    @endforeach
                </div>
            @endif
        </div>
    </section>

    <section class="rn-scroll-section rn-category-scroll-section" aria-label="{{ $isEnglish ? 'Categories' : 'الفئات' }}">
        <button type="button" class="rn-scroll-btn rn-scroll-prev" data-rn-scroll-prev aria-label="{{ $isEnglish ? 'Previous' : 'السابق' }}">
            <svg viewBox="0 0 24 24" fill="none"><path d="m15 18-6-6 6-6" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg>
        </button>
        <div class="kr-category-strip rn-mobile-carousel" data-rn-scroll-track>
            @foreach($categoryLabels as $label)
                <a href="{{ route('home') }}" class="kr-category-tile">
                    <img src="{{ asset('images/kroti/'.$categoryImages[$loop->index]) }}" alt="">
                    <span class="kr-category-label" style="white-space: normal !important; overflow: visible !important; text-overflow: clip !important;">{{ $label }}</span>
                </a>
            @endforeach
        </div>
        <button type="button" class="rn-scroll-btn rn-scroll-next" data-rn-scroll-next aria-label="{{ $isEnglish ? 'Next' : 'التالي' }}">
            <svg viewBox="0 0 24 24" fill="none"><path d="m9 6 6 6-6 6" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg>
        </button>
    </section>

    <main id="catalog" class="kr-page">
        @if($query)
            <section class="kr-section">
                <div class="kr-section-head">
                    <h2>{{ $isEnglish ? 'Search results' : 'نتائج البحث' }}</h2>
                    <a href="{{ route('home') }}">{{ $isEnglish ? 'View all' : 'عرض الكل' }}</a>
                </div>
                <div class="rn-scroll-section">
                    <button type="button" class="rn-scroll-btn rn-scroll-prev" data-rn-scroll-prev aria-label="{{ $isEnglish ? 'Previous' : 'السابق' }}">
                        <svg viewBox="0 0 24 24" fill="none"><path d="m15 18-6-6 6-6" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg>
                    </button>
                    <div class="kr-service-grid rn-mobile-carousel" data-rn-scroll-track>
                    @forelse($services->take(6) as $service)
                        @include('store.partials.kroti-product-card', [
                            'service' => $service,
                            'image' => $productImages[($loop->iteration - 1) % $productImages->count()],
                        ])
                    @empty
                        <div class="kr-empty">
                            <h3>{{ $isEnglish ? 'No matching results' : 'لا توجد نتائج مطابقة' }}</h3>
                            <p>{{ $isEnglish ? 'Try another service or game name.' : 'جرب اسم خدمة أو لعبة مختلفة.' }}</p>
                        </div>
                    @endforelse
                    </div>
                    <button type="button" class="rn-scroll-btn rn-scroll-next" data-rn-scroll-next aria-label="{{ $isEnglish ? 'Next' : 'التالي' }}">
                        <svg viewBox="0 0 24 24" fill="none"><path d="m9 6 6 6-6 6" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg>
                    </button>
                </div>
            </section>
        @endif

        @foreach($sections as $section)
            @php($sectionServices = $services->filter(fn ($service) => optional($service->category)->slug === $section['slug'])->values())
            <section class="kr-section">
                <div class="kr-section-head">
                    <h2>{{ $section['title'] }}</h2>
                    <a href="{{ route('home', ['category' => $section['slug']]) }}">{{ $isEnglish ? 'View all' : 'عرض الكل' }}</a>
                </div>
                <div class="rn-scroll-section">
                    <button type="button" class="rn-scroll-btn rn-scroll-prev" data-rn-scroll-prev aria-label="{{ $isEnglish ? 'Previous' : 'السابق' }}">
                        <svg viewBox="0 0 24 24" fill="none"><path d="m15 18-6-6 6-6" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg>
                    </button>
                    <div class="kr-service-grid rn-mobile-carousel" data-rn-scroll-track>
                        @foreach(($sectionServices->isNotEmpty() ? $sectionServices : $services)->take(6) as $service)
                            @include('store.partials.kroti-product-card', [
                                'service' => $service,
                                'image' => $productImages[($loop->iteration + $loop->parent->iteration + 6) % $productImages->count()],
                            ])
                        @endforeach
                    </div>
                    <button type="button" class="rn-scroll-btn rn-scroll-next" data-rn-scroll-next aria-label="{{ $isEnglish ? 'Next' : 'التالي' }}">
                        <svg viewBox="0 0 24 24" fill="none"><path d="m9 6 6 6-6 6" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg>
                    </button>
                </div>
            </section>
        @endforeach
    </main>
@endsection