@extends('layouts.app')

@section('title', 'Payment Management - PropTrader Pro')

@section('content')
<div class="min-h-screen bg-gray-100 dark:bg-dark-bg">
    <div class="flex">
        <!-- Sidebar -->
        <aside class="w-64 bg-white dark:bg-dark-surface shadow-lg min-h-screen">
            <div class="p-6">
                <h2 class="text-xl font-bold text-gray-900 dark:text-white mb-6">Payment Management</h2>
                
                <nav class="space-y-2">
                    <a href="/dashboard/payments" class="flex items-center px-4 py-2 text-sm font-medium rounded-lg bg-primary text-white">
                        <svg class="w-5 h-5 mr-3" fill="currentColor" viewBox="0 0 20 20">
                            <path d="M4 4a2 2 0 00-2 2v1h16V6a2 2 0 00-2-2H4z"/>
                            <path fill-rule="evenodd" d="M18 9H2v5a2 2 0 002 2h14a2 2 0 002-2V9zM4 13a1 1 0 00-1 1v1a1 1 0 001 1h1a1 1 0 001-1v-1zm16 0a1 1 0 00-1 1v1a1 1 0 001 1h1a1 1 0 001-1v-1z" clip-rule="evenodd"/>
                        </svg>
                        Overview
                    </a>
                    <a href="/dashboard/payments/pending" class="flex items-center px-4 py-2 text-sm font-medium rounded-lg text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-dark-card">
                        <svg class="w-5 h-5 mr-3" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-11a1 1 0 10-2 0v3a1 1 0 102 0V7a1 1 0 10-2 0zm-1 4a1 1 0 100 2h4a1 1 0 100-2h-4z" clip-rule="evenodd"/>
                        </svg>
                        Pending Withdrawals
                    </a>
                    <a href="/dashboard/payments/suspicious" class="flex items-center px-4 py-2 text-sm font-medium rounded-lg text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-dark-card">
                        <svg class="w-5 h-5 mr-3" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"/>
                        </svg>
                        Suspicious Activity
                    </a>
                    <a href="/dashboard/payments/settings" class="flex items-center px-4 py-2 text-sm font-medium rounded-lg text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-dark-card">
                        <svg class="w-5 h-5 mr-3" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M11.49 3.17c-.38-1.56-2.6-1.56-3.82 0l-5.48 5.48c-.59.59-.59 1.54 0 2.12l5.48 5.48c1.26 1.26 3.26 1.26 3.82 0l5.48-5.48c.59-.59.59-1.54 0-2.12zM12 1l-4 4 4-4V6z" clip-rule="evenodd"/>
                        </svg>
                        Settings
                    </a>
                </nav>
            </div>
        </aside>

        <!-- Main Content -->
        <main class="flex-1 p-8">
            <!-- Header -->
            <div class="mb-8">
                <h1 class="text-3xl font-bold text-gray-900 dark:text-white">Payment Management</h1>
                <p class="text-gray-600 dark:text-gray-400 mt-2">Monitor and manage all payment transactions</p>
            </div>

            <!-- Statistics Cards -->
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
                <div class="glass-effect rounded-xl p-6 border-l-4 border-green-500">
                    <div class="flex items-center justify-between">
                        <div>
                            <p class="text-sm font-medium text-gray-600 dark:text-gray-400">Total Deposits</p>
                            <p class="text-2xl font-bold text-gray-900 dark:text-white" id="totalDeposits">$0.00</p>
                        </div>
                        <div class="w-12 h-12 bg-green-500 rounded-full flex items-center justify-center">
                            <svg class="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 20 20">
                                <path d="M4 4a2 2 0 00-2 2v1h16V6a2 2 0 00-2-2H4z"/>
                            </svg>
                        </div>
                    </div>
                </div>

                <div class="glass-effect rounded-xl p-6 border-l-4 border-red-500">
                    <div class="flex items-center justify-between">
                        <div>
                            <p class="text-sm font-medium text-gray-600 dark:text-gray-400">Total Withdrawals</p>
                            <p class="text-2xl font-bold text-gray-900 dark:text-white" id="totalWithdrawals">$0.00</p>
                        </div>
                        <div class="w-12 h-12 bg-red-500 rounded-full flex items-center justify-center">
                            <svg class="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 20 20">
                                <path d="M4 4a2 2 0 00-2 2v1h16V6a2 2 0 00-2-2H4z"/>
                            </svg>
                        </div>
                    </div>
                </div>

                <div class="glass-effect rounded-xl p-6 border-l-4 border-yellow-500">
                    <div class="flex items-center justify-between">
                        <div>
                            <p class="text-sm font-medium text-gray-600 dark:text-gray-400">Pending Payments</p>
                            <p class="text-2xl font-bold text-gray-900 dark:text-white" id="pendingPayments">0</p>
                        </div>
                        <div class="w-12 h-12 bg-yellow-500 rounded-full flex items-center justify-center">
                            <svg class="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-11a1 1 0 10-2 0v3a1 1 0 102 0V7a1 1 0 10-2 0zm-1 4a1 1 0 100 2h4a1 1 0 100-2h-4z" clip-rule="evenodd"/>
                            </svg>
                        </div>
                    </div>
                </div>

                <div class="glass-effect rounded-xl p-6 border-l-4 border-orange-500">
                    <div class="flex items-center justify-between">
                        <div>
                            <p class="text-sm font-medium text-gray-600 dark:text-gray-400">Suspicious Activity</p>
                            <p class="text-2xl font-bold text-gray-900 dark:text-white" id="suspiciousActivity">0</p>
                        </div>
                        <div class="w-12 h-12 bg-orange-500 rounded-full flex items-center justify-center">
                            <svg class="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"/>
                            </svg>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Recent Transactions Table -->
            <div class="glass-effect rounded-xl p-6 mb-8">
                <div class="flex items-center justify-between mb-6">
                    <h2 class="text-xl font-bold text-gray-900 dark:text-white">Recent Transactions</h2>
                    <div class="flex space-x-4">
                        <select id="typeFilter" class="px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent">
                            <option value="">All Types</option>
                            <option value="deposit">Deposits</option>
                            <option value="withdrawal">Withdrawals</option>
                            <option value="challenge_purchase">Challenge Purchases</option>
                        </select>
                        <select id="statusFilter" class="px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent">
                            <option value="">All Status</option>
                            <option value="pending">Pending</option>
                            <option value="completed">Completed</option>
                            <option value="failed">Failed</option>
                        </select>
                        <input type="text" id="searchInput" placeholder="Search transactions..." class="px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent">
                    </div>
                </div>

                <div class="overflow-x-auto">
                    <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
                        <thead class="bg-gray-50 dark:bg-dark-card">
                            <tr>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Transaction ID</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">User</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Type</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Amount</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Gateway</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Status</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Created</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Actions</th>
                            </tr>
                        </thead>
                        <tbody id="transactionsTable" class="bg-white dark:bg-dark-surface divide-y divide-gray-200 dark:divide-gray-700">
                            <!-- Transactions will be loaded here -->
                        </tbody>
                    </table>
                </div>

                <!-- Pagination -->
                <div class="mt-6 flex items-center justify-between">
                    <div class="text-sm text-gray-700 dark:text-gray-400">
                        Showing <span id="showingStart">0</span> to <span id="showingEnd">0</span> of <span id="totalCount">0</span> results
                    </div>
                    <div class="flex space-x-2" id="pagination">
                        <!-- Pagination buttons will be loaded here -->
                    </div>
                </div>
            </div>
        </main>
    </div>
</div>

<!-- Transaction Details Modal -->
<div id="transactionModal" class="fixed inset-0 z-50 hidden">
    <div class="modal-overlay fixed inset-0 bg-black/70 backdrop-blur-sm" onclick="closeTransactionModal()"></div>
    <div class="fixed inset-0 flex items-center justify-center p-4">
        <div class="glass-effect rounded-2xl p-8 max-w-2xl w-full max-h-[90vh] overflow-y-auto">
            <div class="flex items-center justify-between mb-6">
                <h3 class="text-2xl font-bold text-gray-900 dark:text-white">Transaction Details</h3>
                <button onclick="closeTransactionModal()" class="text-gray-400 hover:text-gray-600">
                    <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L10 10.414l-4.293 4.293a1 1 0 01-1.414 0l-4.293-4.293a1 1 0 010-1.414l4.293-4.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
                    </svg>
                </button>
            </div>

            <div id="transactionDetails" class="space-y-6">
                <!-- Transaction details will be loaded here -->
            </div>
        </div>
    </div>
</div>

<style>
    .glass-effect {
        background: rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.2);
    }
    
    .dark .glass-effect {
        background: rgba(0, 0, 0, 0.3);
        border: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    .modal-overlay {
        background: rgba(0, 0, 0, 0.7);
        backdrop-filter: blur(5px);
    }
</style>

<script>
// Payment Management JavaScript
class PaymentManager {
    constructor() {
        this.currentPage = 1;
        this.filters = {
            type: '',
            status: '',
            search: ''
        };
        this.init();
    }

    async init() {
        await this.loadDashboard();
        this.setupEventListeners();
        this.startAutoRefresh();
    }

    async loadDashboard() {
        try {
            const response = await api.get('/admin/payments/dashboard');
            const data = response.data.data;
            
            this.updateStatistics(data.stats);
            this.updateRecentTransactions(data.recent_payments);
        } catch (error) {
            console.error('Failed to load dashboard:', error);
            this.showNotification('Failed to load dashboard data', 'error');
        }
    }

    updateStatistics(stats) {
        document.getElementById('totalDeposits').textContent = '$' + (stats.total_deposits || 0).toFixed(2);
        document.getElementById('totalWithdrawals').textContent = '$' + (stats.total_withdrawals || 0).toFixed(2);
        document.getElementById('pendingPayments').textContent = stats.pending_payments || 0;
        document.getElementById('suspiciousActivity').textContent = stats.suspicious_transactions || 0;
    }

    updateRecentTransactions(transactions) {
        const tbody = document.getElementById('transactionsTable');
        tbody.innerHTML = '';

        if (transactions.length === 0) {
            tbody.innerHTML = `
                <tr>
                    <td colspan="8" class="px-6 py-4 text-center text-gray-500 dark:text-gray-400">
                        No transactions found
                    </td>
                </tr>
            `;
            return;
        }

        transactions.forEach(transaction => {
            const row = this.createTransactionRow(transaction);
            tbody.appendChild(row);
        });
    }

    createTransactionRow(transaction) {
        const row = document.createElement('tr');
        row.className = 'hover:bg-gray-50 dark:hover:bg-dark-card';
        
        const statusColor = this.getStatusColor(transaction.status);
        const typeIcon = this.getTypeIcon(transaction.type);
        
        row.innerHTML = `
            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-white">
                ${transaction.transaction_id}
            </td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-white">
                <div class="flex items-center">
                    <div class="w-8 h-8 bg-gray-300 rounded-full mr-3 flex items-center justify-center">
                        <span class="text-xs font-bold text-gray-700">${transaction.user?.name?.charAt(0).toUpperCase() || 'U'}</span>
                    </div>
                    <div>
                        <div class="text-sm font-medium text-gray-900 dark:text-white">${transaction.user?.name || 'Unknown'}</div>
                        <div class="text-xs text-gray-500 dark:text-gray-400">${transaction.user?.email || ''}</div>
                    </div>
                </div>
            </td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-white">
                <div class="flex items-center">
                    ${typeIcon}
                    <span class="ml-2">${transaction.type}</span>
                </div>
            </td>
            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-white">
                $${parseFloat(transaction.amount || 0).toFixed(2)}
            </td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-white">
                ${transaction.gateway || 'N/A'}
            </td>
            <td class="px-6 py-4 whitespace-nowrap">
                <span class="px-2 py-1 text-xs font-medium rounded-full ${statusColor}">
                    ${transaction.status}
                </span>
            </td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-white">
                ${new Date(transaction.created_at).toLocaleString()}
            </td>
            <td class="px-6 py-4 whitespace-nowrap text-sm">
                <button onclick="paymentManager.viewTransaction(${transaction.id})" class="text-primary hover:text-primary-dark font-medium">
                    View
                </button>
                ${transaction.status === 'pending' && transaction.type === 'withdrawal' ? `
                    <button onclick="paymentManager.approveWithdrawal(${transaction.id})" class="ml-2 text-green-600 hover:text-green-700 font-medium">
                        Approve
                    </button>
                    <button onclick="paymentManager.rejectWithdrawal(${transaction.id})" class="ml-2 text-red-600 hover:text-red-700 font-medium">
                        Reject
                    </button>
                ` : ''}
            </td>
        </tr>
        `;
        
        return row;
    }

    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',
            'cancelled': 'bg-gray-100 text-gray-800',
            'processing': 'bg-blue-100 text-blue-800'
        };
        return colors[status] || 'bg-gray-100 text-gray-800';
    }

    getTypeIcon(type) {
        const icons = {
            'deposit': '<svg class="w-4 h-4 text-green-500" fill="currentColor" viewBox="0 0 20 20"><path d="M4 4a2 2 0 00-2 2v1h16V6a2 2 0 00-2-2H4z"/></svg>',
            'withdrawal': '<svg class="w-4 h-4 text-red-500" fill="currentColor" viewBox="0 0 20 20"><path d="M4 4a2 2 0 00-2 2v1h16V6a2 2 0 00-2-2H4z"/></svg>',
            'challenge_purchase': '<svg class="w-4 h-4 text-blue-500" fill="currentColor" viewBox="0 0 20 20"><path d="M9 2a1 1 0 000 2v2a1 1 0 001 1h2a1 1 0 001-1V4a1 1 0 10-2-2H9z"/></svg>',
            'refund': '<svg class="w-4 h-4 text-yellow-500" fill="currentColor" viewBox="0 0 20 20"><path d="M9 2a1 1 0 000 2v2a1 1 0 001 1h2a1 1 0 001-1V4a1 1 0 10-2-2H9z"/></svg>'
        };
        return icons[type] || '';
    }

    setupEventListeners() {
        // Filter controls
        document.getElementById('typeFilter').addEventListener('change', (e) => {
            this.filters.type = e.target.value;
            this.loadTransactions();
        });

        document.getElementById('statusFilter').addEventListener('change', (e) => {
            this.filters.status = e.target.value;
            this.loadTransactions();
        });

        document.getElementById('searchInput').addEventListener('input', (e) => {
            clearTimeout(this.searchTimeout);
            this.searchTimeout = setTimeout(() => {
                this.filters.search = e.target.value;
                this.loadTransactions();
            }, 500);
        });
    }

    async loadTransactions() {
        try {
            const response = await api.get('/admin/payments', {
                params: {
                    ...this.filters,
                    page: this.currentPage,
                    limit: 20
                }
            });

            const data = response.data.data;
            this.updateRecentTransactions(data);
            this.updatePagination(response.data.pagination);
        } catch (error) {
            console.error('Failed to load transactions:', error);
            this.showNotification('Failed to load transactions', 'error');
        }
    }

    updatePagination(pagination) {
        document.getElementById('showingStart').textContent = (pagination.current_page - 1) * pagination.per_page + 1;
        document.getElementById('showingEnd').textContent = Math.min(pagination.current_page * pagination.per_page, pagination.total);
        document.getElementById('totalCount').textContent = pagination.total;

        const paginationDiv = document.getElementById('pagination');
        paginationDiv.innerHTML = '';

        // Previous button
        if (pagination.current_page > 1) {
            const prevBtn = document.createElement('button');
            prevBtn.className = 'px-3 py-1 bg-gray-300 text-gray-700 rounded hover:bg-gray-400';
            prevBtn.textContent = 'Previous';
            prevBtn.onclick = () => this.goToPage(pagination.current_page - 1);
            paginationDiv.appendChild(prevBtn);
        }

        // Page numbers
        const startPage = Math.max(1, pagination.current_page - 2);
        const endPage = Math.min(pagination.last_page, pagination.current_page + 2);
        
        for (let i = startPage; i <= endPage; i++) {
            const pageBtn = document.createElement('button');
            pageBtn.className = i === pagination.current_page 
                ? 'px-3 py-1 bg-primary text-white rounded' 
                : 'px-3 py-1 bg-gray-300 text-gray-700 rounded hover:bg-gray-400';
            pageBtn.textContent = i;
            pageBtn.onclick = () => this.goToPage(i);
            paginationDiv.appendChild(pageBtn);
        }

        // Next button
        if (pagination.current_page < pagination.last_page) {
            const nextBtn = document.createElement('button');
            nextBtn.className = 'px-3 py-1 bg-gray-300 text-gray-700 rounded hover:bg-gray-400';
            nextBtn.textContent = 'Next';
            nextBtn.onclick = () => this.goToPage(pagination.current_page + 1);
            paginationDiv.appendChild(nextBtn);
        }
    }

    goToPage(page) {
        this.currentPage = page;
        this.loadTransactions();
    }

    async viewTransaction(transactionId) {
        try {
            const response = await api.get(`/admin/payments/${transactionId}`);
            const transaction = response.data.data;
            
            this.showTransactionModal(transaction);
        } catch (error) {
            console.error('Failed to load transaction:', error);
            this.showNotification('Failed to load transaction details', 'error');
        }
    }

    showTransactionModal(transaction) {
        const modal = document.getElementById('transactionModal');
        const details = document.getElementById('transactionDetails');
        
        details.innerHTML = `
            <div class="grid grid-cols-2 gap-6">
                <div>
                    <h4 class="font-semibold text-gray-900 dark:text-white mb-2">Transaction Information</h4>
                    <div class="space-y-2">
                        <div><span class="text-gray-600 dark:text-gray-400">Transaction ID:</span> <span class="font-medium">${transaction.transaction_id}</span></div>
                        <div><span class="text-gray-600 dark:text-gray-400">Type:</span> <span class="font-medium">${transaction.type}</span></div>
                        <div><span class="text-gray-600 dark:text-gray-400">Amount:</span> <span class="font-medium">$${parseFloat(transaction.amount || 0).toFixed(2)}</span></div>
                        <div><span class="text-gray-600 dark:text-gray-400">Fee:</span> <span class="font-medium">$${parseFloat(transaction.fee || 0).toFixed(2)}</span></div>
                        <div><span class="text-gray-600 dark:text-gray-400">Net Amount:</span> <span class="font-medium">$${parseFloat(transaction.net_amount || 0).toFixed(2)}</span></div>
                        <div><span class="text-gray-600 dark:text-gray-400">Status:</span> <span class="px-2 py-1 text-xs font-medium rounded-full ${this.getStatusColor(transaction.status)}">${transaction.status}</span></div>
                        <div><span class="text-gray-600 dark:text-gray-400">Gateway:</span> <span class="font-medium">${transaction.gateway}</span></div>
                        <div><span class="text-gray-600 dark:text-gray-400">Created:</span> <span class="font-medium">${new Date(transaction.created_at).toLocaleString()}</span></div>
                    </div>
                </div>
                
                <div>
                    <h4 class="font-semibold text-gray-900 dark:text-white mb-2">User Information</h4>
                    <div class="space-y-2">
                        <div><span class="text-gray-600 dark:text-gray-400">Name:</span> <span class="font-medium">${transaction.user?.name || 'Unknown'}</span></div>
                        <div><span class="text-gray-600 dark:text-gray-400">Email:</span> <span class="font-medium">${transaction.user?.email || ''}</span></div>
                        <div><span class="text-gray-600 dark:text-gray-400">IP Address:</span> <span class="font-medium">${transaction.ip_address || 'N/A'}</span></div>
                        <div><span class="text-gray-600 dark:text-gray-400">Risk Score:</span> <span class="font-medium ${transaction.risk_score === 'high' ? 'text-red-500' : transaction.risk_score === 'medium' ? 'text-yellow-500' : 'text-green-500'}">${transaction.risk_score || 'low'}</span></div>
                    </div>
                </div>
            </div>
            
            ${transaction.gateway_response ? `
                <div class="mt-6">
                    <h4 class="font-semibold text-gray-900 dark:text-white mb-2">Gateway Response</h4>
                    <pre class="bg-gray-100 dark:bg-dark-card p-4 rounded-lg text-xs overflow-x-auto">${JSON.stringify(transaction.gateway_response, null, 2)}</pre>
                </div>
            ` : ''}
            
            ${transaction.admin_notes ? `
                <div class="mt-6">
                    <h4 class="font-semibold text-gray-900 dark:text-white mb-2">Admin Notes</h4>
                    <p class="text-gray-700 dark:text-gray-300">${transaction.admin_notes}</p>
                </div>
            ` : ''}
        `;
        
        modal.classList.remove('hidden');
    }

    closeTransactionModal() {
        document.getElementById('transactionModal').classList.add('hidden');
    }

    async approveWithdrawal(paymentId) {
        if (!confirm('Are you sure you want to approve this withdrawal?')) {
            return;
        }

        try {
            const response = await api.post(`/admin/payments/${paymentId}/approve`);
            
            if (response.success) {
                this.showNotification('Withdrawal approved successfully', 'success');
                this.loadDashboard();
                this.loadTransactions();
            } else {
                this.showNotification('Failed to approve withdrawal', 'error');
            }
        } catch (error) {
            console.error('Failed to approve withdrawal:', error);
            this.showNotification('Failed to approve withdrawal', 'error');
        }
    }

    async rejectWithdrawal(paymentId) {
        const reason = prompt('Please enter rejection reason:');
        if (!reason) {
            return;
        }

        try {
            const response = await api.post(`/admin/payments/${paymentId}/reject`, {
                reason: reason
            });
            
            if (response.success) {
                this.showNotification('Withdrawal rejected successfully', 'success');
                this.loadDashboard();
                this.loadTransactions();
            } else {
                this.showNotification('Failed to reject withdrawal', 'error');
            }
        } catch (error) {
            console.error('Failed to reject withdrawal:', error);
            this.showNotification('Failed to reject withdrawal', 'error');
        }
    }

    showNotification(message, type = 'info') {
        const notification = document.createElement('div');
        notification.className = `fixed top-4 right-4 p-4 rounded-lg text-white z-50 transition-all transform translate-x-full`;
        
        if (type === 'success') {
            notification.classList.add('bg-green-500');
        } else if (type === 'error') {
            notification.classList.add('bg-red-500');
        } else {
            notification.classList.add('bg-blue-500');
        }
        
        notification.textContent = message;
        document.body.appendChild(notification);
        
        setTimeout(() => {
            notification.classList.remove('translate-x-full');
        }, 100);
        
        setTimeout(() => {
            if (notification.parentNode) {
                notification.parentNode.removeChild(notification);
            }
        }, 3000);
    }

    startAutoRefresh() {
        setInterval(() => {
            this.loadDashboard();
        }, 30000); // Refresh every 30 seconds
    }
}

// Initialize payment manager
const paymentManager = new PaymentManager();

// Global functions for onclick handlers
function closeTransactionModal() {
    paymentManager.closeTransactionModal();
}
</script>
@endsection