@extends('admin.layout')

@section('title', 'Payments & Transactions')

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

<div class="mb-4">
    <a href="/admin/cashout-requests" class="inline-flex items-center px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-md text-sm font-medium">
        Open Cashout Requests
    </a>
</div>

<div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
    <div class="bg-white p-4 rounded-lg shadow">
        <h3 class="text-sm text-gray-600">Total Earnings</h3>
        <p id="totalEarnings" class="text-2xl font-bold">-</p>
    </div>
    <div class="bg-white p-4 rounded-lg shadow">
        <h3 class="text-sm text-gray-600">Total Withdrawals</h3>
        <p id="totalWithdrawals" class="text-2xl font-bold">-</p>
    </div>
    <div class="bg-white p-4 rounded-lg shadow">
        <h3 class="text-sm text-gray-600">Pending Withdrawals</h3>
        <p id="pendingWithdrawals" class="text-2xl font-bold">-</p>
    </div>
    <div class="bg-white p-4 rounded-lg shadow">
        <h3 class="text-sm text-gray-600">Failed Transactions</h3>
        <p id="failedTransactions" class="text-2xl font-bold">-</p>
    </div>
</div>

<div class="bg-white rounded-lg shadow overflow-hidden relative z-10">
    <div class="overflow-x-auto">
        <table class="min-w-full divide-y divide-gray-200 relative">
            <thead class="bg-gray-50">
                <tr>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">ID</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">Type</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">Date</th>
                </tr>
            </thead>
            <tbody id="transactionsTable" 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 loadStats() {
    const data = await window.apiCall('/payments/stats');
    if (data && data.success) {
        document.getElementById('totalEarnings').textContent = '$' + data.data.total_earnings;
        document.getElementById('totalWithdrawals').textContent = '$' + data.data.total_withdrawals;
        document.getElementById('pendingWithdrawals').textContent = '$' + data.data.pending_withdrawals;
        document.getElementById('failedTransactions').textContent = data.data.failed_transactions;
    }
}

async function loadTransactions() {
    const data = await window.apiCall('/payments/transactions');
    if (data && data.success) {
        const tbody = document.getElementById('transactionsTable');
        tbody.innerHTML = data.data.data.map(t => `
            <tr class="hover:bg-gray-50">
                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">#${t.id}</td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${t.barber?.user?.first_name || '-'}</td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${t.type}</td>
                <td class="px-6 py-4 whitespace-nowrap text-sm font-semibold text-gray-900">$${parseFloat(t.amount || 0).toFixed(2)}</td>
                <td class="px-6 py-4 whitespace-nowrap text-sm">
                    <span class="px-2 py-1 text-xs font-semibold rounded-full ${getStatusColor(t.status)}">${t.status}</span>
                </td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${new Date(t.created_at).toLocaleDateString()}</td>
            </tr>
        `).join('');
    }
}

function getStatusColor(status) {
    const colors = {
        completed: 'bg-green-100 text-green-800',
        pending: 'bg-yellow-100 text-yellow-800',
        failed: 'bg-red-100 text-red-800'
    };
    return colors[status] || 'bg-gray-100 text-gray-800';
}

loadStats();
loadTransactions();
</script>
@endsection