@extends('admin.layout')

@section('title', 'Payout Requests')

@section('content')
<h1 class="text-2xl font-bold mb-6">Payout Requests</h1>

<div class="bg-white rounded-lg shadow overflow-hidden">
    <div class="overflow-x-auto">
        <table class="min-w-full divide-y divide-gray-200">
            <thead class="bg-gray-50">
                <tr>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Request</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Barber</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Bank Details</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Amount</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
                </tr>
            </thead>
            <tbody id="payoutRequestsTable" class="bg-white divide-y divide-gray-200">
                <tr><td colspan="6" class="px-6 py-4 text-center text-gray-500">Loading...</td></tr>
            </tbody>
        </table>
    </div>
</div>
@endsection

@section('scripts')
<script>
async function loadPayoutRequests() {
    const data = await window.apiCall('/payments/payout-requests?status=pending');
    const tbody = document.getElementById('payoutRequestsTable');

    if (!data || !data.success) {
        tbody.innerHTML = '<tr><td colspan="6" class="px-6 py-4 text-center text-red-500">Failed to load payout requests</td></tr>';
        return;
    }

    const rows = data.data.data || [];
    if (!rows.length) {
        tbody.innerHTML = '<tr><td colspan="6" class="px-6 py-4 text-center text-gray-500">No pending payout requests</td></tr>';
        return;
    }

    tbody.innerHTML = rows.map(row => `
        <tr class="hover:bg-gray-50">
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">#${row.id}</td>
            <td class="px-6 py-4 text-sm text-gray-700">
                <div class="font-medium">${row.barber?.name || '-'}</div>
                <div class="text-xs text-gray-500">${row.barber?.email || '-'}</div>
                <div class="text-xs text-gray-500">Balance: $${parseFloat(row.barber?.current_balance || 0).toFixed(2)}</div>
            </td>
            <td class="px-6 py-4 text-sm text-gray-700">
                <div>${row.barber?.account_holder_name || '-'}</div>
                <div class="text-xs text-gray-500">Routing: ${row.barber?.routing_number || '-'}</div>
                <div class="text-xs text-gray-500">Account: ${row.barber?.bank_account_number_masked || '-'}</div>
            </td>
            <td class="px-6 py-4 whitespace-nowrap text-sm font-semibold text-gray-900">$${parseFloat(row.amount || 0).toFixed(2)}</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm">
                <span class="px-2 py-1 rounded-full text-xs font-semibold bg-yellow-100 text-yellow-800">${row.status}</span>
            </td>
            <td class="px-6 py-4 whitespace-nowrap text-sm">
                <div class="flex gap-2">
                    <button onclick="releasePayoutRequest(${row.id})" class="px-3 py-1 rounded bg-green-600 hover:bg-green-700 text-white text-xs">Release</button>
                    <button onclick="cancelPayoutRequest(${row.id})" class="px-3 py-1 rounded bg-red-600 hover:bg-red-700 text-white text-xs">Cancel</button>
                </div>
            </td>
        </tr>
    `).join('');
}

async function releasePayoutRequest(id) {
    const payoutReference = prompt('Optional payout reference (leave blank for auto-generated):', '');
    const response = await window.apiCall(`/payments/payout-requests/${id}/release`, {
        method: 'POST',
        body: JSON.stringify({
            payout_reference: payoutReference || null
        })
    });

    if (!response || !response.success) {
        alert(response?.message || response?.errors?.payout_request?.[0] || 'Failed to release payout request');
        return;
    }

    alert('Payout request released successfully.');
    loadPayoutRequests();
}

async function cancelPayoutRequest(id) {
    const reason = prompt('Cancellation reason (optional):', '');
    const response = await window.apiCall(`/payments/payout-requests/${id}/cancel`, {
        method: 'POST',
        body: JSON.stringify({
            reason: reason || null
        })
    });

    if (!response || !response.success) {
        alert(response?.message || response?.errors?.payout_request?.[0] || 'Failed to cancel payout request');
        return;
    }

    alert('Payout request cancelled.');
    loadPayoutRequests();
}

loadPayoutRequests();
</script>
@endsection