@extends('layouts.admin', ['title' => 'تنفيذ '.$order->order_number])

@section('content')
    <section class="lc-page-shell">
        <div class="surface p-6">
            @if(session('status'))
                <div class="mb-4 rounded border border-green-200 bg-green-50 p-3 text-sm text-green-700">{{ session('status') }}</div>
            @endif
            @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

            <div class="section-heading">
                <div>
                    <span>Fulfillment</span>
                    <h1>{{ $order->order_number }}</h1>
                </div>
                <a class="secondary-button" href="{{ route('admin.fulfillment.index') }}">Workbench</a>
            </div>

            <div class="mt-6 grid gap-4 md:grid-cols-4">
                <div class="metric-card"><span>الدفع</span><strong>{{ $order->payment_status }}</strong></div>
                <div class="metric-card"><span>التنفيذ</span><strong>{{ $order->fulfillment_status }}</strong></div>
                <div class="metric-card"><span>المسؤول</span><strong>{{ $order->assignee?->display_name ?? $order->assignee?->name ?? 'غير مستلم' }}</strong></div>
                <div class="metric-card"><span>الإجمالي</span><strong>{{ number_format($order->total_minor / 100, 2) }}</strong></div>
            </div>

            <div class="mt-6 grid gap-5 lg:grid-cols-[1fr_360px]">
                <div>
                    <h2 class="text-xl font-black text-[#17264d]">بنود الطلب</h2>
                    <div class="mt-3 overflow-hidden rounded border border-[#e7e9ef]">
                        @foreach($order->items as $item)
                            <div class="admin-row">
                                <span>
                                    {{ $item->name_snapshot }} - {{ $item->sku_snapshot }}
                                    @if($item->stockCodes->isNotEmpty())
                                        <small class="block text-xs text-[#6e7488]">
                                            @foreach($item->stockCodes as $code)
                                                <a class="underline" href="{{ route('admin.stock-codes.show', $code) }}">{{ $code->maskedCode() }}</a>@if(! $loop->last)، @endif
                                            @endforeach
                                        </small>
                                    @endif
                                    @if($item->latestProviderAttempt)
                                        <small class="block text-xs text-[#6e7488]">
                                            Provider: {{ $item->latestProviderAttempt->reference }} / {{ $item->latestProviderAttempt->status }}
                                        </small>
                                    @endif
                                </span>
                                <strong>{{ $item->delivery_method_snapshot }}</strong>
                                <em>{{ $item->fulfillment_status }}</em>
                            </div>
                        @endforeach
                    </div>

                    <h2 class="mt-6 text-xl font-black text-[#17264d]">بيانات العميل Masked</h2>
                    <pre class="mt-3 overflow-auto rounded bg-[#17264d] p-4 text-xs text-white">{{ json_encode($order->maskedCustomerFields(), JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE) }}</pre>
                </div>

                <aside class="space-y-3">
                    <form method="POST" action="{{ route('admin.fulfillment.claim', $order) }}" class="surface p-4">
                        @csrf
                        <button class="primary-button w-full" type="submit">استلام الطلب</button>
                    </form>
                    <form method="POST" action="{{ route('admin.orders.paid', $order) }}" class="surface p-4">
                        @csrf
                        <button class="secondary-button w-full" type="submit">تعليم كمدفوع</button>
                    </form>
                    <form method="POST" action="{{ route('admin.fulfillment.complete', $order) }}" class="surface p-4">
                        @csrf
                        <label class="form-field">
                            <span>ملاحظة التنفيذ</span>
                            <input name="note" placeholder="Proof / staff note">
                        </label>
                        <button class="primary-button mt-3 w-full" type="submit">تم التنفيذ</button>
                    </form>
                    <form method="POST" action="{{ route('admin.fulfillment.provider-mock', $order) }}" class="surface p-4">
                        @csrf
                        <button class="primary-button w-full" type="submit">تنفيذ API تجريبي</button>
                        <p class="mt-2 text-xs leading-6 text-[#6e7488]">ينفذ البنود من نوع API أو Hybrid فقط بعد الدفع.</p>
                    </form>
                    <form method="POST" action="{{ route('admin.fulfillment.request-info', $order) }}" class="surface p-4">
                        @csrf
                        <label class="form-field">
                            <span>المعلومة المطلوبة</span>
                            <input name="note" required placeholder="مثال: رقم اللاعب غير صحيح">
                        </label>
                        <button class="secondary-button mt-3 w-full" type="submit">طلب معلومات</button>
                    </form>
                    <form method="POST" action="{{ route('admin.fulfillment.fail', $order) }}" class="surface p-4">
                        @csrf
                        <label class="form-field">
                            <span>سبب الفشل</span>
                            <input name="reason" required placeholder="سبب واضح">
                        </label>
                        <button class="secondary-button mt-3 w-full" type="submit">فشل الطلب</button>
                    </form>
                </aside>
            </div>

            <section class="mt-8">
                <h2 class="text-xl font-black text-[#17264d]">Timeline</h2>
                <div class="mt-3 overflow-hidden rounded border border-[#e7e9ef]">
                    @forelse($order->timelines->sortByDesc('id') as $timeline)
                        <div class="admin-row">
                            <span>{{ $timeline->title }}<small class="block text-xs text-[#6e7488]">{{ $timeline->note }}</small></span>
                            <strong>{{ $timeline->actor?->display_name ?? $timeline->actor?->name ?? 'System' }}</strong>
                            <em>{{ $timeline->created_at->format('Y-m-d H:i') }}</em>
                        </div>
                    @empty
                        <div class="p-4 text-sm text-[#6e7488]">لا توجد أحداث بعد.</div>
                    @endforelse
                </div>
            </section>

            <section class="mt-8">
                <h2 class="text-xl font-black text-[#17264d]">Notification Log</h2>
                <div class="mt-3 overflow-hidden rounded border border-[#e7e9ef]">
                    @forelse($order->notificationDeliveries->sortByDesc('id') as $delivery)
                        <div class="admin-row">
                            <span>{{ $delivery->subject ?? $delivery->body }}<small class="block text-xs text-[#6e7488]">{{ $delivery->recipient }}</small></span>
                            <strong>{{ $delivery->channel }}</strong>
                            <em>{{ $delivery->status }}</em>
                        </div>
                    @empty
                        <div class="p-4 text-sm text-[#6e7488]">لا توجد رسائل بعد.</div>
                    @endforelse
                </div>
            </section>
        </div>
    </section>
@endsection