@extends('layouts.app')

@section('title', 'Withdrawal Approval')
@section('description', 'Approve or reject withdrawal requests')

@section('content')
<div class="min-h-screen bg-gray-50 dark:bg-gray-900 py-8">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <!-- Header -->
        <div class="mb-8">
            <h1 class="text-3xl font-bold text-gray-900 dark:text-white">Withdrawal Requests</h1>
            <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">Review and process withdrawal requests</p>
        </div>

        <!-- Status Tabs -->
        <div class="mb-6 border-b border-gray-200 dark:border-gray-700">
            <nav class="-mb-px flex space-x-8">
                <a href="?status=pending_admin_approval" 
                   class="@if($status == 'pending_admin_approval') border-indigo-500 text-indigo-600 dark:text-indigo-400 @else border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 @endif whitespace-nowrap pb-4 px-1 border-b-2 font-medium text-sm">
                    Pending Approval
                </a>
                <a href="?status=approved" 
                   class="@if($status == 'approved') border-indigo-500 text-indigo-600 dark:text-indigo-400 @else border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 @endif whitespace-nowrap pb-4 px-1 border-b-2 font-medium text-sm">
                    Approved
                </a>
                <a href="?status=processing" 
                   class="@if($status == 'processing') border-indigo-500 text-indigo-600 dark:text-indigo-400 @else border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 @endif whitespace-nowrap pb-4 px-1 border-b-2 font-medium text-sm">
                    Processing
                </a>
                <a href="?status=completed" 
                   class="@if($status == 'completed') border-indigo-500 text-indigo-600 dark:text-indigo-400 @else border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 @endif whitespace-nowrap pb-4 px-1 border-b-2 font-medium text-sm">
                    Completed
                </a>
                <a href="?status=rejected" 
                   class="@if($status == 'rejected') border-indigo-500 text-indigo-600 dark:text-indigo-400 @else border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 @endif whitespace-nowrap pb-4 px-1 border-b-2 font-medium text-sm">
                    Rejected
                </a>
            </nav>
        </div>

        <!-- Withdrawals List -->
        <div class="space-y-4">
            @forelse($withdrawals as $withdrawal)
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm overflow-hidden">
                <div class="p-6">
                    <div class="flex items-center justify-between">
                        <div class="flex items-center space-x-4">
                            <img class="h-12 w-12 rounded-full" src="https://ui-avatars.com/api/?name={{ urlencode($withdrawal->client->name ?? 'User') }}&background=6366f1&color=fff" alt="">
                            <div>
                                <h3 class="text-lg font-semibold text-gray-900 dark:text-white">
                                    {{ $withdrawal->client->name ?? 'N/A' }}
                                </h3>
                                <p class="text-sm text-gray-500 dark:text-gray-400">
                                    {{ $withdrawal->client->email ?? 'N/A' }}
                                </p>
                            </div>
                        </div>
                        
                        <div class="text-right">
                            <div class="text-2xl font-bold text-gray-900 dark:text-white">
                                {{ $withdrawal->getFormattedAmount() }}
                            </div>
                            <div class="text-sm text-gray-500 dark:text-gray-400">
                                Fee: {{ $withdrawal->getFormattedFee() }}
                            </div>
                        </div>
                    </div>

                    <div class="mt-4 grid grid-cols-2 md:grid-cols-4 gap-4">
                        <div>
                            <p class="text-xs text-gray-500 dark:text-gray-400">Bank</p>
                            <p class="text-sm font-medium text-gray-900 dark:text-white">{{ $withdrawal->bank_name }}</p>
                        </div>
                        <div>
                            <p class="text-xs text-gray-500 dark:text-gray-400">Account</p>
                            <p class="text-sm font-medium text-gray-900 dark:text-white">{{ $withdrawal->getMaskedAccountNumber() }}</p>
                        </div>
                        <div>
                            <p class="text-xs text-gray-500 dark:text-gray-400">Requested</p>
                            <p class="text-sm font-medium text-gray-900 dark:text-white">{{ $withdrawal->created_at->diffForHumans() }}</p>
                        </div>
                        <div>
                            <p class="text-xs text-gray-500 dark:text-gray-400">Status</p>
                            @if($withdrawal->status === 'pending_admin_approval')
                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800 dark:bg-yellow-800 dark:text-yellow-100">
                                    Pending
                                </span>
                            @elseif($withdrawal->status === 'approved')
                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800 dark:bg-green-800 dark:text-green-100">
                                    Approved
                                </span>
                            @elseif($withdrawal->status === 'rejected')
                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800 dark:bg-red-800 dark:text-red-100">
                                    Rejected
                                </span>
                            @else
                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800 dark:bg-blue-800 dark:text-blue-100">
                                    {{ ucfirst($withdrawal->status) }}
                                </span>
                            @endif
                        </div>
                    </div>

                    @if($withdrawal->status === 'pending_admin_approval')
                    <div class="mt-4 flex justify-end space-x-3">
                        <button onclick="openRejectModal('{{ $withdrawal->id }}')" 
                                class="px-4 py-2 border border-red-600 text-red-600 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-lg font-medium transition">
                            Reject
                        </button>
                        <button onclick="openApproveModal('{{ $withdrawal->id }}')" 
                                class="px-4 py-2 bg-green-600 hover:bg-green-700 text-white rounded-lg font-medium transition">
                            Approve
                        </button>
                        <a href="{{ route('withdrawal.show', $withdrawal->id) }}" 
                           class="px-4 py-2 bg-indigo-600 hover:bg-indigo-700 text-white rounded-lg font-medium transition">
                            View Details
                        </a>
                    </div>
                    @endif

                    @if($withdrawal->status === 'processing')
                    <div class="mt-4 flex justify-end">
                        <button onclick="openCompleteModal('{{ $withdrawal->id }}')" 
                                class="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg font-medium transition">
                            Mark as Completed
                        </button>
                    </div>
                    @endif
                </div>
            </div>
            @empty
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-12 text-center">
                <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
                </svg>
                <p class="mt-4 text-sm text-gray-500 dark:text-gray-400">No withdrawal requests found</p>
            </div>
            @endforelse
        </div>

        <!-- Pagination -->
        @if($withdrawals->hasPages())
        <div class="mt-6">
            {{ $withdrawals->appends(['status' => $status])->links() }}
        </div>
        @endif
    </div>
</div>

<!-- Approve Modal -->
<div id="approveModal" class="hidden fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50">
    <div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white dark:bg-gray-800">
        <form id="approveForm" method="POST">
            @csrf
            <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-4">Approve Withdrawal</h3>
            <div class="mb-4">
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Admin Notes (Optional)</label>
                <textarea name="admin_notes" rows="3" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white"></textarea>
            </div>
            <div class="flex justify-end space-x-3">
                <button type="button" onclick="closeModal('approveModal')" class="px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700">
                    Cancel
                </button>
                <button type="submit" class="px-4 py-2 bg-green-600 hover:bg-green-700 text-white rounded-lg">
                    Approve
                </button>
            </div>
        </form>
    </div>
</div>

<!-- Reject Modal -->
<div id="rejectModal" class="hidden fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50">
    <div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white dark:bg-gray-800">
        <form id="rejectForm" method="POST">
            @csrf
            <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-4">Reject Withdrawal</h3>
            <div class="mb-4">
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Rejection Reason *</label>
                <textarea name="rejection_reason" rows="3" required class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white"></textarea>
            </div>
            <div class="flex justify-end space-x-3">
                <button type="button" onclick="closeModal('rejectModal')" class="px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700">
                    Cancel
                </button>
                <button type="submit" class="px-4 py-2 bg-red-600 hover:bg-red-700 text-white rounded-lg">
                    Reject
                </button>
            </div>
        </form>
    </div>
</div>

<!-- Complete Modal -->
<div id="completeModal" class="hidden fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50">
    <div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white dark:bg-gray-800">
        <form id="completeForm" method="POST">
            @csrf
            <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-4">Complete Withdrawal</h3>
            <div class="mb-4">
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Bank Transfer Reference *</label>
                <input type="text" name="external_payment_reference" required class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white">
            </div>
            <div class="mb-4">
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Payment Proof URL (Optional)</label>
                <input type="url" name="payment_proof" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white">
            </div>
            <div class="flex justify-end space-x-3">
                <button type="button" onclick="closeModal('completeModal')" class="px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700">
                    Cancel
                </button>
                <button type="submit" class="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg">
                    Mark Complete
                </button>
            </div>
        </form>
    </div>
</div>

<script>
function openApproveModal(id) {
    document.getElementById('approveForm').action = `/admin/withdrawal/${id}/approve`;
    document.getElementById('approveModal').classList.remove('hidden');
}

function openRejectModal(id) {
    document.getElementById('rejectForm').action = `/admin/withdrawal/${id}/reject`;
    document.getElementById('rejectModal').classList.remove('hidden');
}

function openCompleteModal(id) {
    document.getElementById('completeForm').action = `/admin/withdrawal/${id}/complete`;
    document.getElementById('completeModal').classList.remove('hidden');
}

function closeModal(modalId) {
    document.getElementById(modalId).classList.add('hidden');
}
</script>
@endsection