@php
    $isEnglish = app()->getLocale() === 'en';
    $serviceName = $isEnglish ? $service->name_en : $service->name_ar;
    $serviceDescription = $isEnglish ? $service->description_en : $service->description_ar;
@endphp

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

@section('content')
    @php
        $fallbackNumber = 108 + (($service->id - 1) % 36);
        $serviceImage = $service->image_path ? asset($service->image_path) : asset('images/kroti/product-'.$fallbackNumber.'.webp');
        $selectedName = $isEnglish ? $selectedVariant->name_en : $selectedVariant->name_ar;
        $categoryName = $isEnglish ? $service->category->name_en : $service->category->name_ar;
    @endphp

    <section class="kr-product-page rn-product-pro">
        <div class="rn-product-breadcrumb">
            <a href="{{ route('home') }}">{{ $isEnglish ? 'Home' : 'الرئيسية' }}</a>
            <span>/</span>
            <a href="{{ route('home', ['category' => $service->category->slug]) }}">{{ $categoryName }}</a>
            <span>/</span>
            <b>{{ $serviceName }}</b>
        </div>

        <div class="rn-product-layout">
            <aside class="rn-product-visual">
                <div class="rn-product-image-card">
                    <img src="{{ $serviceImage }}" alt="{{ $serviceName }}">
                </div>
                <h1>{{ $serviceName }}</h1>
                <p>{{ $serviceDescription ?: ($isEnglish ? 'Choose the package that fits your order and complete checkout in a few secure steps.' : 'اختر الباقة المناسبة لك وأكمل الطلب بخطوات بسيطة وآمنة.') }}</p>
            </aside>

            <section class="rn-product-options">
                <div class="rn-product-options-head">
                    <span>{{ $isEnglish ? $variants->count().' available options' : $variants->count().' خيارات متاحة' }}</span>
                    <h2>{{ $isEnglish ? 'Choose package' : 'اختر فئة الشحن' }}</h2>
                </div>

                <div class="rn-product-variant-grid">
                    @foreach($variants as $variant)
                        @php
                            $variantName = $isEnglish ? $variant->name_en : $variant->name_ar;
                            $variantBaseAmount = ($variant->sale_price_minor ?? $variant->price_minor) / 100;
                        @endphp
                        <a href="{{ route('games.show', ['game' => $service->slug, 'variant' => $variant->id]) }}" class="rn-product-variant @if($variant->is($selectedVariant)) is-selected @endif">
                            <span>{{ $variantName }}</span>
                            <strong data-rn-price data-rn-price-amount="{{ $variantBaseAmount }}" data-rn-price-currency="{{ $variant->currency_code ?: 'EGP' }}">{{ $variant->displayPrice() }}</strong>
                        </a>
                    @endforeach
                </div>

                <div class="rn-product-accordion">
                    <details open>
                        <summary>{{ $isEnglish ? 'Overview' : 'نظرة عامة' }}</summary>
                        <p>{{ $serviceDescription ?: ($isEnglish ? 'This service supports multiple packages. Each package can have its own price, stock and fulfillment method from the admin panel.' : 'الخدمة تعمل بنظام باقات متعددة. كل باقة لها سعر ومخزون وطريقة تسليم مستقلة من لوحة الإدارة.') }}</p>
                    </details>
                    <details>
                        <summary>{{ $isEnglish ? 'How to use' : 'كيفية الاستخدام' }}</summary>
                        <p>{{ $isEnglish ? 'Select a package, continue to checkout, enter the required account details, then track fulfillment from your account.' : 'اختار الباقة، أكمل صفحة الدفع، اكتب بيانات الحساب المطلوبة، ثم تابع التنفيذ من حسابك.' }}</p>
                    </details>
                    <details>
                        <summary>{{ $isEnglish ? 'How long does it take?' : 'كم يستغرق التنفيذ؟' }}</summary>
                        <p>{{ $isEnglish ? 'Most digital orders are prepared instantly or shortly after payment confirmation depending on stock and provider status.' : 'معظم الطلبات الرقمية يتم تجهيزها فورياً أو بعد تأكيد الدفع بفترة قصيرة حسب المخزون وحالة المزود.' }}</p>
                    </details>
                    <details>
                        <summary>{{ $isEnglish ? 'Reviews' : 'التقييمات' }}</summary>
                        <p>{{ $isEnglish ? 'There are no reviews yet.' : 'لا توجد تقييمات بعد.' }}</p>
                    </details>
                </div>
            </section>

            <aside class="rn-product-buy-card">
                <div class="rn-selected-package">
                    <span>{{ $isEnglish ? 'Selected package' : 'الباقة المختارة' }}</span>
                    <strong>{{ $selectedName }}</strong>
                    <b data-rn-price data-rn-price-amount="{{ ($selectedVariant->sale_price_minor ?? $selectedVariant->price_minor) / 100 }}" data-rn-price-currency="{{ $selectedVariant->currency_code ?: 'EGP' }}">{{ $selectedVariant->displayPrice() }}</b>
                </div>

                <a href="{{ route('checkout.show', $selectedVariant) }}" class="rn-buy-primary">{{ $isEnglish ? 'Buy now' : 'شراء مباشر' }}</a>

                <form method="POST" action="{{ route('cart.add', $selectedVariant) }}" data-rn-ajax-form>
                    @csrf
                    <input type="hidden" name="quantity" value="1">
                    <button type="submit" class="rn-buy-secondary" data-rn-add-cart-label>{{ $isEnglish ? 'Add to cart' : 'أضف للسلة' }}</button>
                </form>

                <div class="rn-trust-grid">
                    <span>
                        <svg viewBox="0 0 24 24" fill="none"><path d="M12 3 5 6v5c0 4.5 2.8 8.4 7 10 4.2-1.6 7-5.5 7-10V6l-7-3Z" stroke="currentColor" stroke-width="1.8"/></svg>
                        {{ $isEnglish ? 'Secure' : 'آمن' }}
                    </span>
                    <span>
                        <svg viewBox="0 0 24 24" fill="none"><path d="m13 2-8 12h6l-1 8 9-13h-6l0-7Z" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/></svg>
                        {{ $isEnglish ? 'Fast' : 'فوري' }}
                    </span>
                    <span>
                        <svg viewBox="0 0 24 24" fill="none"><path d="M20 7 10 17l-5-5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
                        {{ $isEnglish ? 'Trusted' : 'موثوق' }}
                    </span>
                </div>

                <p>{{ $isEnglish ? 'Instant digital delivery after payment confirmation.' : 'توصيل رقمي سريع بعد تأكيد الدفع.' }}</p>
            </aside>
        </div>
    </section>
@endsection