@extends('layouts.admin')

@section('page-title', 'Seller Payout Requests')

@section('content')
<div class="space-y-6">
    {{-- Header --}}
    <div>
        <h2 class="text-2xl font-bold text-gray-900">Seller Payouts</h2>
        <p class="text-gray-500 mt-1">You have total {{ $requests->total() }} payouts</p>
    </div>

    {{-- Table --}}
    <div class="bg-white rounded-xl shadow-sm border overflow-hidden">
        <div class="px-6 py-4 border-b">
            <h4 class="text-base font-semibold text-gray-800">Seller Payouts</h4>
        </div>
        <div class="overflow-x-auto">
            <table class="w-full text-sm">
                <thead class="bg-gray-50 border-b">
                    <tr>
                        <th class="text-left px-6 py-3 font-medium text-gray-500 w-12">#</th>
                        <th class="text-left px-6 py-3 font-medium text-gray-500">Seller</th>
                        <th class="text-left px-6 py-3 font-medium text-gray-500">Amount</th>
                        <th class="text-left px-6 py-3 font-medium text-gray-500">Message</th>
                        <th class="text-left px-6 py-3 font-medium text-gray-500">Account Details</th>
                        <th class="text-left px-6 py-3 font-medium text-gray-500">Status</th>
                        <th class="text-left px-6 py-3 font-medium text-gray-500">Option</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-100">
                    @forelse($requests as $index => $request)
                    <tr class="hover:bg-gray-50">
                        <td class="px-6 py-4 text-gray-500">{{ $requests->firstItem() + $index }}</td>
                        <td class="px-6 py-4">
                            <a href="{{ route('admin.vendors.show', $request->vendor) }}" class="font-medium text-indigo-600 hover:text-indigo-800">{{ $request->vendor->name }}</a>
                        </td>
                        <td class="px-6 py-4 font-semibold">${{ number_format($request->amount, 2) }}</td>
                        <td class="px-6 py-4 text-gray-600 max-w-xs truncate">{{ $request->notes ?: '-' }}</td>
                        <td class="px-6 py-4">
                            @if($request->payment_details)
                                <span class="text-xs bg-gray-100 px-2 py-1 rounded">{{ $request->payment_method ?? 'N/A' }}</span>
                            @else
                                <span class="text-gray-400">-</span>
                            @endif
                        </td>
                        <td class="px-6 py-4">
                            <span class="px-2 py-1 rounded-full text-xs font-medium capitalize
                                @if($request->status === 'pending') bg-amber-100 text-amber-700
                                @elseif($request->status === 'processed') bg-gray-100 text-gray-600
                                @elseif($request->status === 'accepted') bg-green-100 text-green-700
                                @elseif($request->status === 'rejected') bg-red-100 text-red-700
                                @else bg-gray-100 text-gray-600 @endif">{{ ucfirst($request->status) }}</span>
                        </td>
                        <td class="px-6 py-4">
                            @if($request->status === 'pending')
                            <button type="button" onclick="openPayoutModal({{ $request->id }}, '{{ $request->vendor->name }}', {{ $request->amount }})" class="px-3 py-1.5 bg-indigo-600 text-white text-xs rounded hover:bg-indigo-700 transition">
                                Process
                            </button>
                            @else
                            <span class="text-gray-400 text-xs">-</span>
                            @endif
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="7" class="px-6 py-12 text-center text-gray-400">
                            <svg class="w-12 h-12 mx-auto mb-3 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M2.25 18L9 11.25l4.306 4.307a11.95 11.95 0 015.814-5.519l2.74-1.22m0 0l-5.94-2.28m5.94 2.28l-2.28 5.941"/></svg>
                            No payout requests found
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        @if($requests->hasPages())
        <div class="px-6 py-4 border-t border-gray-200">
            {{ $requests->links() }}
        </div>
        @endif
    </div>
</div>

{{-- Process Payout Modal --}}
<div id="payout-modal" class="hidden fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4">
    <div class="bg-white rounded-xl shadow-xl max-w-md w-full">
        <div class="flex items-center justify-between px-6 py-4 border-b">
            <h5 class="text-lg font-semibold">Processed Payout Request</h5>
            <button onclick="closePayoutModal()" class="text-gray-400 hover:text-gray-600">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
            </button>
        </div>
        <form action="{{ route('admin.vendors.payout-process') }}" method="POST">
            @csrf
            <div class="p-6 space-y-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Select Account Type</label>
                    <select name="type" required class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
                        <option value="">Select Account Type</option>
                        <option value="cash">Cash</option>
                        <option value="bank">Bank Transfer</option>
                        <option value="mobile">Mobile Money</option>
                    </select>
                </div>
                <input type="hidden" name="payout_id" id="modal-payout-id">
                <div id="modal-info" class="text-sm text-gray-600 bg-gray-50 p-3 rounded-lg hidden"></div>
            </div>
            <div class="flex justify-end gap-3 px-6 py-4 border-t">
                <button type="button" onclick="closePayoutModal()" class="px-4 py-2 border border-gray-300 rounded-lg text-sm hover:bg-gray-50 transition">Cancel</button>
                <button type="submit" class="px-4 py-2 bg-indigo-600 text-white rounded-lg text-sm hover:bg-indigo-700 transition">Send</button>
            </div>
        </form>
    </div>
</div>

<script>
function openPayoutModal(id, name, amount) {
    document.getElementById('modal-payout-id').value = id;
    document.getElementById('modal-info').innerHTML = `<strong>${name}</strong> - $${amount.toFixed(2)}`;
    document.getElementById('modal-info').classList.remove('hidden');
    document.getElementById('payout-modal').classList.remove('hidden');
}

function closePayoutModal() {
    document.getElementById('payout-modal').classList.add('hidden');
}

document.getElementById('payout-modal')?.addEventListener('click', function(e) {
    if (e.target === this) closePayoutModal();
});
</script>
@endsection