@extends('layouts.store', ['title' => 'الدفع التجريبي | RaseedNow'])

@section('content')
    <section class="lc-page-shell">
        <div class="grid gap-5 lg:grid-cols-[1fr_360px]">
            <div class="surface p-6">
                @if($errors->any())
                    <div class="mb-4 rounded border border-red-200 bg-red-50 p-3 text-sm text-red-700">{{ $errors->first() }}</div>
                @endif

                <span class="eyebrow dark">Mock Gateway</span>
                <h1 class="mt-3 text-3xl font-black text-[#17264d]">بوابة الدفع التجريبية</h1>
                <p class="mt-3 text-sm leading-7 text-[#6e7488]">
                    هذه شاشة محلية لمحاكاة بوابة دفع حقيقية أثناء التطوير. لا توجد أي عملية مالية خارجية.
                </p>

                <div class="mt-6 grid gap-3 md:grid-cols-3">
                    <div class="metric-card"><span>الطلب</span><strong>{{ $order->order_number }}</strong></div>
                    <div class="metric-card"><span>المرجع</span><strong>{{ $attempt->reference }}</strong></div>
                    <div class="metric-card"><span>الحالة</span><strong>{{ $attempt->status }}</strong></div>
                </div>

                <div class="mt-6 rounded-2xl border border-[#e0e8e3] bg-[#f7f8fb] p-5">
                    <span class="text-sm font-black text-[#6e7488]">المبلغ المطلوب</span>
                    <strong class="mt-2 block text-4xl font-black text-[#17264d]">{{ number_format($attempt->amount_minor / 100, 2) }} {{ $attempt->currency_code }}</strong>
                </div>

                <div class="mt-6 flex flex-wrap gap-3">
                    <form method="POST" action="{{ route('payments.mock.confirm', $attempt) }}">
                        @csrf
                        <button class="primary-button" type="submit">تأكيد الدفع</button>
                    </form>
                    <form method="POST" action="{{ route('payments.mock.fail', $attempt) }}">
                        @csrf
                        <button class="secondary-button" type="submit">فشل الدفع</button>
                    </form>
                    <a class="secondary-button" href="{{ route('orders.show', $order) }}">رجوع للطلب</a>
                </div>
            </div>

            <aside class="surface p-5">
                <h2 class="text-xl font-black text-[#17264d]">مراجعة الطلب</h2>
                <div class="mt-4 overflow-hidden rounded border border-[#e7e9ef]">
                    @foreach($order->items as $item)
                        <div class="admin-row">
                            <span>{{ $item->name_snapshot }}</span>
                            <strong>{{ number_format($item->total_minor / 100, 2) }}</strong>
                            <em>{{ $item->delivery_method_snapshot }}</em>
                        </div>
                    @endforeach
                </div>
            </aside>
        </div>
    </section>
@endsection