@extends('layouts.portal')

@section('title', 'Withdrawals')
@section('portal_title', 'Withdrawal Requests')
@section('portal_subtitle', 'Request wallet withdrawals and track admin payment approval.')

@section('portal_content')
@php
    $balance = (float) ($wallet['balance'] ?? 0);
    $availableBalance = (float) ($wallet['available_balance'] ?? $balance);
    $pendingWithdrawals = (float) ($wallet['pending_withdrawals'] ?? 0);
    $withdrawals = $wallet['withdrawals'] ?? [];
@endphp

<div class="grid gap-6 lg:grid-cols-[0.9fr_1.1fr]">
    <section class="rounded-lg border border-primary-100 bg-white p-6 shadow-sm">
        <p class="text-sm font-bold uppercase tracking-wide text-primary-600">Withdrawal Balance</p>
        <strong class="mt-3 block text-4xl font-extrabold text-slate-900">${{ number_format($availableBalance, 2) }}</strong>
        <div class="mt-5 grid gap-3 sm:grid-cols-2">
            <div class="rounded-lg bg-slate-50 p-4">
                <p class="text-xs font-bold uppercase text-slate-500">Wallet Balance</p>
                <p class="mt-2 text-lg font-extrabold text-slate-900">${{ number_format($balance, 2) }}</p>
            </div>
            <div class="rounded-lg bg-amber-50 p-4">
                <p class="text-xs font-bold uppercase text-amber-700">Pending Withdrawals</p>
                <p class="mt-2 text-lg font-extrabold text-amber-800">${{ number_format($pendingWithdrawals, 2) }}</p>
            </div>
        </div>
    </section>

    <section class="rounded-lg border border-slate-200 bg-white p-6 shadow-sm">
        <h2 class="text-xl font-extrabold text-primary-700">Place Withdrawal</h2>
        <form action="{{ url('/portal/withdrawal') }}" method="POST" class="mt-5 space-y-5">
            @csrf
            <div>
                <label for="amount" class="mb-2 block text-sm font-bold text-slate-700">Withdrawal Amount</label>
                <input id="amount" name="amount" type="number" min="1" step="0.01" max="{{ $availableBalance }}" required placeholder="Enter amount in USD" class="w-full rounded-lg border border-slate-200 bg-slate-50 px-4 py-3 text-sm outline-none transition focus:border-primary-500 focus:bg-white focus:ring-4 focus:ring-primary-100" value="{{ old('amount') }}">
                @error('amount')
                    <p class="mt-2 text-sm font-bold text-red-600">{{ $message }}</p>
                @enderror
            </div>

            <div>
                <label for="withdrawal_method" class="mb-2 block text-sm font-bold text-slate-700">Withdrawal Method</label>
                <select id="withdrawal_method" name="withdrawal_method" required class="w-full rounded-lg border border-slate-200 bg-slate-50 px-4 py-3 text-sm outline-none transition focus:border-primary-500 focus:bg-white focus:ring-4 focus:ring-primary-100">
                    <option value="">Select withdrawal method</option>
                    @foreach (['Bank Transfer', 'Crypto Wallet', 'Contact Support for Payment'] as $method)
                        <option value="{{ $method }}" @selected(old('withdrawal_method') === $method)>{{ $method }}</option>
                    @endforeach
                </select>
                @error('withdrawal_method')
                    <p class="mt-2 text-sm font-bold text-red-600">{{ $message }}</p>
                @enderror
            </div>

            <div>
                <label for="account_details" class="mb-2 block text-sm font-bold text-slate-700">Payment Details</label>
                <textarea id="account_details" name="account_details" rows="4" required placeholder="Bank name, account number, account name, or wallet address" class="w-full rounded-lg border border-slate-200 bg-slate-50 px-4 py-3 text-sm outline-none transition focus:border-primary-500 focus:bg-white focus:ring-4 focus:ring-primary-100">{{ old('account_details') }}</textarea>
                @error('account_details')
                    <p class="mt-2 text-sm font-bold text-red-600">{{ $message }}</p>
                @enderror
            </div>

            <div>
                <label for="note" class="mb-2 block text-sm font-bold text-slate-700">Note</label>
                <textarea id="note" name="note" rows="3" placeholder="Optional withdrawal note" class="w-full rounded-lg border border-slate-200 bg-slate-50 px-4 py-3 text-sm outline-none transition focus:border-primary-500 focus:bg-white focus:ring-4 focus:ring-primary-100">{{ old('note') }}</textarea>
            </div>

            <button type="submit" class="w-full rounded-lg bg-primary-600 px-5 py-3.5 text-sm font-extrabold text-white shadow-lg shadow-primary-700/20 transition hover:bg-primary-700">
                Submit Withdrawal Request
            </button>
        </form>
    </section>
</div>

<section class="mt-6 rounded-lg border border-slate-200 bg-white p-6 shadow-sm">
    <h2 class="text-xl font-extrabold text-primary-700">Withdrawal History</h2>
    <div class="mt-5 overflow-hidden rounded-lg border border-slate-200">
        <div class="grid grid-cols-4 bg-slate-50 px-4 py-3 text-xs font-extrabold uppercase text-slate-500">
            <span>Date</span>
            <span>Method</span>
            <span>Status</span>
            <span class="text-right">Amount</span>
        </div>
        @forelse ($withdrawals as $withdrawal)
            @php
                $status = $withdrawal['status'] ?? 'Pending Withdrawal Review';
                $statusClass = match ($status) {
                    'Withdrawal Paid' => 'bg-emerald-50 text-emerald-700',
                    'Withdrawal Rejected' => 'bg-red-50 text-red-700',
                    default => 'bg-amber-50 text-amber-700',
                };
            @endphp
            <div class="grid grid-cols-4 gap-3 border-t border-slate-100 px-4 py-4 text-sm font-semibold text-slate-600">
                <span>{{ $withdrawal['submitted_at'] ?? '-' }}</span>
                <span>{{ $withdrawal['withdrawal_method'] ?? 'Not selected' }}</span>
                <span><span class="rounded-full px-3 py-1 text-xs font-extrabold {{ $statusClass }}">{{ $status }}</span></span>
                <span class="text-right">${{ number_format((float) ($withdrawal['amount'] ?? 0), 2) }}</span>
            </div>
        @empty
            <div class="grid grid-cols-4 px-4 py-4 text-sm font-semibold text-slate-600">
                <span>-</span>
                <span>No withdrawal yet</span>
                <span>Pending</span>
                <span class="text-right">$0.00</span>
            </div>
        @endforelse
    </div>
</section>
@endsection