@extends('layouts.madar')

@section('title', 'الاشتراك والدفع')
@section('page_title', 'الاشتراك والدفع')

@section('content')
<div class="grid gap-8 lg:grid-cols-2">
    <form method="POST" action="{{ route('web.billing.store') }}" enctype="multipart/form-data" class="glass-card space-y-4 p-6">
        @csrf
        <h2 class="font-bold">طلب اشتراك جديد</h2>
        <div>
            <label class="mb-1 block text-xs text-zinc-400">الخطة</label>
            <select name="subscription_plan_id" required class="madar-input">
                @foreach ($plans as $plan)
                    <option value="{{ $plan->id }}">{{ $plan->name }} — {{ number_format($plan->price, 0) }} د.ع</option>
                @endforeach
            </select>
        </div>
        <div>
            <label class="mb-1 block text-xs text-zinc-400">طريقة الدفع</label>
            <select name="payment_method_id" required class="madar-input">
                @foreach ($methods as $m)
                    <option value="{{ $m->id }}">{{ $m->name_ar }}</option>
                @endforeach
            </select>
        </div>
        <div>
            <label class="mb-1 block text-xs text-zinc-400">رقم العملية / المرجع</label>
            <input type="text" name="payer_reference" required class="madar-input" placeholder="رقم ZainCash أو التحويل">
        </div>
        <div>
            <label class="mb-1 block text-xs text-zinc-400">صورة الوصل</label>
            <input type="file" name="proof" accept="image/*,.pdf" class="madar-input">
        </div>
        <div>
            <label class="mb-1 block text-xs text-zinc-400">ملاحظة</label>
            <textarea name="payer_note" rows="2" class="madar-input"></textarea>
        </div>
        <button type="submit" class="neon-btn w-full">إرسال الطلب</button>
    </form>
    <div>
        <h2 class="mb-4 font-bold">سجل الطلبات</h2>
        <div class="space-y-3">
            @forelse ($history as $h)
                <div class="glass-card p-4 text-sm">
                    <div class="flex justify-between">
                        <span class="font-bold">{{ $h->subscriptionPlan?->name ?? '—' }}</span>
                        <span class="rounded-full px-2 py-0.5 text-xs {{ $h->status === 'approved' ? 'bg-emerald-500/20 text-emerald-300' : ($h->status === 'rejected' ? 'bg-red-500/20 text-red-300' : 'bg-amber-500/20 text-amber-300') }}">
                            {{ $h->status }}
                        </span>
                    </div>
                    <p class="mt-1 text-zinc-500">{{ $h->paymentMethod?->name_ar }} · {{ number_format($h->amount, 0) }} د.ع</p>
                    <p class="text-xs text-zinc-600">{{ $h->created_at?->format('Y-m-d H:i') }}</p>
                </div>
            @empty
                <p class="text-zinc-500">لا طلبات دفع بعد.</p>
            @endforelse
        </div>
    </div>
</div>
@endsection