@extends('layouts.member')

@section('title', 'Withdrawals - ElevateWell Worldwide')

@section('content')
<div class="space-y-6">
    <!-- Header -->
    <div>
        <h1 class="text-2xl font-bold text-slate-800 dark:text-white">Withdrawals & Encashment</h1>
        <p class="text-xs text-slate-500">Request payout disbursements to your GCash, Maya, or Bank account.</p>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-12 gap-6">
        <!-- Request Withdrawal Form Card -->
        <div class="lg:col-span-5 bg-white dark:bg-slate-800 rounded-2xl p-6 border border-slate-200 dark:border-slate-700 shadow-sm"
             x-data="{
                amount: {{ $minWithdrawal }},
                fee: {{ $fee }},
                balance: {{ $user->balance }},
                get netAmount() {
                    return Math.max(0, this.amount - this.fee);
                }
             }">
            <h2 class="text-base font-bold text-slate-900 dark:text-white mb-4 flex items-center gap-2">
                <i data-lucide="wallet-cards" class="w-5 h-5 text-sky-600"></i>
                <span>Request Encashment</span>
            </h2>

            <div class="p-3.5 bg-sky-50 dark:bg-sky-950/40 border border-sky-100 dark:border-sky-900/50 rounded-xl mb-4 text-xs flex items-center justify-between">
                <span class="text-sky-950 dark:text-sky-200 font-semibold">Available Wallet Balance:</span>
                <span class="text-base font-black text-sky-700 dark:text-sky-300">₱{{ number_format($user->balance, 2) }}</span>
            </div>

            <form method="POST" action="{{ route('income.withdraw.request') }}" class="space-y-4">
                @csrf

                <!-- Amount -->
                <div>
                    <label for="amount" class="block text-xs font-semibold text-slate-700 dark:text-slate-300 mb-1.5">Amount (Min: ₱{{ number_format($minWithdrawal, 2) }})</label>
                    <div class="relative">
                        <span class="absolute inset-y-0 left-0 pl-3.5 flex items-center text-slate-400 font-bold text-sm">₱</span>
                        <input type="number" id="amount" name="amount" x-model.number="amount" min="{{ $minWithdrawal }}" max="{{ $user->balance }}" step="100" required
                            class="w-full pl-8 pr-4 py-2.5 bg-slate-50 dark:bg-slate-700/50 border border-slate-200 dark:border-slate-600 rounded-xl text-sm font-bold text-slate-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-sky-600">
                    </div>
                </div>

                <!-- Payout Channel -->
                <div>
                    <label for="payout_method" class="block text-xs font-semibold text-slate-700 dark:text-slate-300 mb-1.5">Payout Method</label>
                    <select id="payout_method" name="payout_method" required
                        class="w-full px-3 py-2.5 bg-slate-50 dark:bg-slate-700/50 border border-slate-200 dark:border-slate-600 rounded-xl text-xs text-slate-800 dark:text-slate-200 focus:outline-none focus:ring-2 focus:ring-sky-600">
                        <option value="gcash">GCash</option>
                        <option value="maya">Maya</option>
                        <option value="bank">Bank Transfer</option>
                    </select>
                </div>

                <!-- Account Name -->
                <div>
                    <label for="account_name" class="block text-xs font-semibold text-slate-700 dark:text-slate-300 mb-1.5">Account Name</label>
                    <input type="text" id="account_name" name="account_name" value="{{ old('account_name', $user->full_name) }}" required
                        class="w-full px-3 py-2.5 bg-slate-50 dark:bg-slate-700/50 border border-slate-200 dark:border-slate-600 rounded-xl text-xs text-slate-800 dark:text-slate-200 focus:outline-none focus:ring-2 focus:ring-sky-600">
                </div>

                <!-- Account Number -->
                <div>
                    <label for="account_number" class="block text-xs font-semibold text-slate-700 dark:text-slate-300 mb-1.5">Account / Mobile Number</label>
                    <input type="text" id="account_number" name="account_number" value="{{ old('account_number', $user->phone) }}" placeholder="09xxxxxxxxx" required
                        class="w-full px-3 py-2.5 bg-slate-50 dark:bg-slate-700/50 border border-slate-200 dark:border-slate-600 rounded-xl text-xs font-mono text-slate-800 dark:text-slate-200 focus:outline-none focus:ring-2 focus:ring-sky-600">
                </div>

                <!-- Calculation breakdown -->
                <div class="p-3 bg-slate-50 dark:bg-slate-700/30 rounded-xl space-y-1 text-xs text-slate-500">
                    <div class="flex justify-between">
                        <span>Admin / Processing Fee:</span>
                        <span>₱{{ number_format($fee, 2) }}</span>
                    </div>
                    <div class="flex justify-between font-bold text-slate-800 dark:text-white pt-1 border-t border-slate-200 dark:border-slate-600">
                        <span>Net Disbursement:</span>
                        <span class="text-sky-600 dark:text-sky-400 font-extrabold" x-text="'₱' + netAmount.toFixed(2)"></span>
                    </div>
                </div>

                <button type="submit" :disabled="amount > balance || balance < {{ $minWithdrawal }}"
                    class="w-full py-3 bg-gradient-to-r from-sky-600 to-blue-700 hover:from-sky-700 hover:to-blue-800 disabled:opacity-50 disabled:cursor-not-allowed text-white text-sm font-semibold rounded-xl shadow transition">
                    Submit Withdrawal Request
                </button>
            </form>
        </div>

        <!-- Withdrawal History Table -->
        <div class="lg:col-span-7 bg-white dark:bg-slate-800 rounded-2xl p-6 border border-slate-200 dark:border-slate-700 shadow-sm">
            <h2 class="text-base font-bold text-slate-900 dark:text-white mb-4">Encashment History</h2>

            <div class="overflow-x-auto">
                <table class="w-full text-left text-xs">
                    <thead class="bg-slate-50 dark:bg-slate-700/50 text-slate-600 dark:text-slate-300 font-bold">
                        <tr>
                            <th class="px-4 py-3">Ref Number</th>
                            <th class="px-4 py-3">Gross</th>
                            <th class="px-4 py-3">Net</th>
                            <th class="px-4 py-3">Method</th>
                            <th class="px-4 py-3">Status</th>
                            <th class="px-4 py-3">Date</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-100 dark:divide-slate-700 text-slate-700 dark:text-slate-300">
                        @forelse($withdrawals as $w)
                            <tr class="hover:bg-slate-50 dark:hover:bg-slate-700/30">
                                <td class="px-4 py-3 font-mono font-semibold">{{ $w->reference_number }}</td>
                                <td class="px-4 py-3">₱{{ number_format($w->amount, 2) }}</td>
                                <td class="px-4 py-3 font-bold text-emerald-600">₱{{ number_format($w->net_amount, 2) }}</td>
                                <td class="px-4 py-3 uppercase text-[10px] font-bold text-slate-500">{{ $w->payout_method }}</td>
                                <td class="px-4 py-3">
                                    @if($w->status === 'released')
                                        <span class="px-2 py-0.5 bg-emerald-100 text-emerald-800 rounded-full font-bold text-[10px]">Released</span>
                                    @elseif($w->status === 'approved')
                                        <span class="px-2 py-0.5 bg-blue-100 text-blue-800 rounded-full font-bold text-[10px]">Approved</span>
                                    @elseif($w->status === 'rejected')
                                        <span class="px-2 py-0.5 bg-rose-100 text-rose-800 rounded-full font-bold text-[10px]">Rejected</span>
                                    @else
                                        <span class="px-2 py-0.5 bg-amber-100 text-amber-800 rounded-full font-bold text-[10px]">Pending</span>
                                    @endif
                                </td>
                                <td class="px-4 py-3 text-slate-500">{{ $w->created_at->format('M d, Y') }}</td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="6" class="px-4 py-8 text-center text-slate-400">
                                    No withdrawal requests yet.
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            @if($withdrawals->hasPages())
                <div class="mt-4 pt-4 border-t border-slate-100 dark:border-slate-700">
                    {{ $withdrawals->links() }}
                </div>
            @endif
        </div>
    </div>
</div>
@endsection