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

@section('content')
    @php($baseAmount = ($product->sale_price_minor ?? $product->price_minor) / 100)
    <section class="lc-page-shell lc-checkout-layout">
        <form method="POST" action="{{ route('checkout.store', $product) }}" class="surface lc-form-card">
            @csrf
            <span class="eyebrow dark">Checkout</span>
            <h1>إكمال الطلب</h1>
            @if($errors->any())
                <div class="mt-5 rounded border border-red-200 bg-red-50 p-4 text-sm text-red-700">
                    {{ $errors->first() }}
                </div>
            @endif
            <div class="mt-6 grid gap-4 md:grid-cols-2">
                <label class="form-field">
                    <span>الاسم</span>
                    <input name="customer_name" value="{{ old('customer_name', auth()->user()->name ?? 'Raseed Player') }}" type="text" required>
                </label>
                <label class="form-field">
                    <span>البريد</span>
                    <input name="customer_email" value="{{ old('customer_email', auth()->user()->email ?? 'player@raseednow.test') }}" type="email">
                </label>
                <label class="form-field md:col-span-2">
                    <span>Player ID</span>
                    <input name="player_id" value="{{ old('player_id') }}" placeholder="مثال: 123456789" type="text">
                </label>
                <label class="form-field">
                    <span>الدولة</span>
                    <select name="server"><option value="egypt">مصر</option><option value="saudi">السعودية</option></select>
                </label>
                <label class="form-field">
                    <span>طريقة الدفع</span>
                    <select name="payment_method">
                        <option value="manual">دفع يدوي</option>
                        <option value="mock_gateway">بوابة تجريبية</option>
                        <option value="online_gateway">بوابة دفع إلكترونية</option>
                        <option value="wallet">محفظة RaseedNow</option>
                    </select>
                </label>
                <label class="form-field md:col-span-2">
                    <span>ملاحظات</span>
                    <input name="notes" value="{{ old('notes') }}" placeholder="أي تفاصيل إضافية للموظف" type="text">
                </label>
                <label class="form-field md:col-span-2">
                    <span>كود الخصم</span>
                    <input name="coupon_code" value="{{ old('coupon_code') }}" placeholder="اختياري" type="text">
                </label>
            </div>
            <div class="mt-6 rounded-2xl border border-[#dfe7e2] bg-[#f7faf8] p-4 text-sm leading-7 text-[#5f6e68]">
                يمكنك استخدام البوابة التجريبية لاختبار تدفق الدفع بدون أي عملية مالية خارجية.
            </div>
            <button type="submit" class="primary-button mt-5">إنشاء الطلب</button>
        </form>

        <aside class="surface lc-buy-box">
            <h2>ملخص الطلب</h2>
            <div class="mt-5 rounded-2xl p-4 text-white" style="background: {{ $product->game->cover_color }}">
                <span class="text-sm text-white/70">{{ $product->game->name_ar }}</span>
                <strong class="mt-2 block text-2xl">{{ $product->name_ar }}</strong>
            </div>
            <div class="mt-5 space-y-3">
                <div class="summary-row"><span>السعر</span><strong data-rn-price data-rn-price-amount="{{ $baseAmount }}" data-rn-price-currency="{{ $product->currency_code ?: 'EGP' }}">{{ $product->displayPrice() }}</strong></div>
                <div class="summary-row"><span>الخصم</span><strong>يحسب عند تأكيد الطلب</strong></div>
                <div class="summary-row total"><span>الإجمالي</span><strong data-rn-price data-rn-price-amount="{{ $baseAmount }}" data-rn-price-currency="{{ $product->currency_code ?: 'EGP' }}">{{ $product->displayPrice() }}</strong></div>
            </div>
        </aside>
    </section>
@endsection