@extends('layouts.portal')

@section('title', 'Agent Invoices')

@section('sidebar')
    @include('admin.partials.sidebar', ['active' => 'agent-invoices'])
@endsection

@section('content')
<div class="max-w-7xl mx-auto" data-display-month="{{ $displayMonth }}">
    <div class="mb-6">
        <h1 class="text-2xl font-bold text-gray-800">Agent Commission Management</h1>
        <p class="text-gray-600 mt-1">View agent transactions by month and process payments directly</p>
        <p class="text-sm text-gray-500 mt-1">Currently showing: <strong>{{ \Carbon\Carbon::parse($displayMonth . '-01')->format('F Y') }}</strong></p>
    </div>

    <!-- Stats Cards -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-3">
        <div class="bg-gradient-to-br from-orange-50 to-orange-100 rounded-xl shadow-lg p-6 border border-orange-200 hover:shadow-xl transition-shadow">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm text-orange-700 font-semibold mb-1">Total Pending Amount</p>
                    <p class="text-3xl font-bold text-orange-600">RM{{ number_format($stats['total_pending'], 2) }}</p>
                </div>
                <div class="w-14 h-14 bg-orange-200 rounded-full flex items-center justify-center">
                    <i class="fas fa-clock text-orange-600 text-2xl"></i>
                </div>
            </div>
        </div>
        
        <div class="bg-gradient-to-br from-blue-50 to-blue-100 rounded-xl shadow-lg p-6 border border-blue-200 hover:shadow-xl transition-shadow">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm text-blue-700 font-semibold mb-1">Active Agents</p>
                    <div class="flex items-center gap-2">
                        <p class="text-3xl font-bold text-blue-700">{{ $stats['count_agents'] }}</p>
                        <i class="fas fa-check-circle text-green-600 text-xl" title="Agents with pending commissions"></i>
                    </div>
                </div>
                <div class="w-14 h-14 bg-blue-200 rounded-full flex items-center justify-center">
                    <i class="fas fa-users text-blue-700 text-2xl"></i>
                </div>
            </div>
        </div>
        
        <div class="bg-gradient-to-br from-green-50 to-green-100 rounded-xl shadow-lg p-6 border border-green-200 hover:shadow-xl transition-shadow">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm text-green-700 font-semibold mb-1">Average per Agent</p>
                    <p class="text-3xl font-bold text-green-600">RM{{ number_format($stats['avg_per_agent'], 2) }}</p>
                </div>
                <div class="w-14 h-14 bg-green-200 rounded-full flex items-center justify-center">
                    <i class="fas fa-chart-line text-green-600 text-2xl"></i>
                </div>
            </div>
        </div>
    </div>

    <!-- Filters Section -->
    <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 mb-6">
        <div class="flex items-center justify-between mb-6">
            <h3 class="text-lg font-bold text-gray-900">
                <i class="fas fa-filter text-blue-600 mr-2"></i>Filter Commissions
            </h3>
            <a href="{{ route('admin.agent-invoices') }}" class="text-sm text-blue-600 hover:text-blue-700 font-medium">
                <i class="fas fa-sync-alt mr-1"></i>Reset All
            </a>
        </div>

        <form action="{{ route('admin.agent-invoices') }}" method="GET" class="space-y-4">
            <!-- Row 1: Month, Year, Status, Commission Level -->
            <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
                <!-- Month Filter -->
                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-2">
                        <i class="fas fa-calendar mr-1 text-amber-500"></i>Month
                    </label>
                    <select name="month" class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent bg-white hover:border-gray-400 transition">
                        <option value="">All Months</option>
                        @for ($m = 1; $m <= 12; $m++)
                            <option value="{{ str_pad($m, 2, '0', STR_PAD_LEFT) }}" {{ request('month') == str_pad($m, 2, '0', STR_PAD_LEFT) ? 'selected' : '' }}>
                                {{ \Carbon\Carbon::createFromDate(null, $m, 1)->format('F') }}
                            </option>
                        @endfor
                    </select>
                </div>

                <!-- Year Filter -->
                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-2">
                        <i class="fas fa-year mr-1 text-green-500"></i>Year
                    </label>
                    <select name="year" class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent bg-white hover:border-gray-400 transition">
                        <option value="">All Years</option>
                        @php
                            $currentYear = now()->year;
                            for ($year = $currentYear; $year >= $currentYear - 5; $year--) {
                                echo '<option value="' . $year . '" ' . (request('year') == $year ? 'selected' : '') . '>' . $year . '</option>';
                            }
                        @endphp
                    </select>
                </div>

                <!-- Status Filter -->
                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-2">
                        <i class="fas fa-check-circle mr-1 text-purple-500"></i>Status
                    </label>
                    <select name="payment_status" class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent bg-white hover:border-gray-400 transition">
                        <option value="">All Status</option>
                        <option value="pending" {{ request('payment_status') == 'pending' ? 'selected' : '' }}>Pending</option>
                        <option value="paid" {{ request('payment_status') == 'paid' ? 'selected' : '' }}>Paid</option>
                    </select>
                </div>

                <!-- Commission Level Filter -->
                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-2">
                        <i class="fas fa-star mr-1 text-pink-500"></i>Commission Level
                    </label>
                    <select name="level" class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent bg-white hover:border-gray-400 transition">
                        <option value="">All Levels</option>
                        <option value="bronze" {{ request('level') == 'bronze' ? 'selected' : '' }}>Bronze (RM500+)</option>
                        <option value="silver" {{ request('level') == 'silver' ? 'selected' : '' }}>Silver (RM1000+)</option>
                        <option value="gold" {{ request('level') == 'gold' ? 'selected' : '' }}>Gold (RM3000+)</option>
                        <option value="platinum" {{ request('level') == 'platinum' ? 'selected' : '' }}>Platinum (RM5000+)</option>
                    </select>
                </div>
            </div>

            <!-- Row 2: Min Amount, Max Amount & Buttons -->
            <div class="grid grid-cols-1 md:grid-cols-4 gap-4 pt-4 border-t border-gray-200">
                <!-- Min Amount -->
                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-2">
                        <i class="fas fa-money-bill text-green-600 mr-1"></i>Min Amount (RM)
                    </label>
                    <input type="number" name="min_amount" value="{{ request('min_amount') }}" placeholder="0.00" step="0.01" class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent bg-white">
                </div>

                <!-- Max Amount -->
                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-2">
                        <i class="fas fa-money-bill text-blue-600 mr-1"></i>Max Amount (RM)
                    </label>
                    <input type="number" name="max_amount" value="{{ request('max_amount') }}" placeholder="0.00" step="0.01" class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent bg-white">
                </div>

                <!-- Apply Button -->
                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-2 invisible">Action</label>
                    <button type="submit" class="w-full px-6 py-2.5 bg-green-600 text-white rounded-lg hover:bg-green-700 font-bold transition-all shadow-md hover:shadow-lg flex items-center justify-center h-11">
                        <i class="fas fa-filter mr-2"></i>Apply
                    </button>
                </div>

                <!-- Clear Button -->
                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-2 invisible">Action</label>
                    <a href="{{ route('admin.agent-invoices') }}" class="w-full px-6 py-2.5 bg-gray-500 text-white rounded-lg hover:bg-gray-600 font-bold transition-all shadow-md hover:shadow-lg flex items-center justify-center h-11">
                        <i class="fas fa-redo mr-2"></i>Clear
                    </a>
                </div>
            </div>

            <!-- Row 3: Helper Text removed -->
        </form>
    </div>

    <!-- Stats Cards -->
 

    <!-- Bulk Actions Bar -->
    <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 mb-6">
        <div class="flex items-center justify-between flex-wrap gap-4">
            <div class="flex items-center gap-2">
                <input type="checkbox" id="selectAllCheckbox" class="w-5 h-5 rounded border-gray-300 cursor-pointer" onchange="toggleSelectAll(this)">
                <span class="text-sm font-medium text-gray-700" id="selectedCount">0 selected</span>
            </div>
            <div class="flex gap-3">
                <button id="bulkPaymentBtn" onclick="bulkProcessPayment()" class="px-6 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 font-bold transition-all shadow-md disabled:opacity-50 disabled:cursor-not-allowed" disabled>
                    <i class="fas fa-money-bill-wave mr-2"></i>Process Selected Payments
                </button>
                <button id="selectClearBtn" onclick="clearSelection()" class="px-6 py-2 bg-gray-500 text-white rounded-lg hover:bg-gray-600 font-bold transition-all shadow-md disabled:opacity-50 disabled:cursor-not-allowed" disabled>
                    <i class="fas fa-times mr-2"></i>Clear Selection
                </button>
            </div>
        </div>
    </div>

    <!-- Agents Table -->
    <div class="bg-white rounded-xl shadow-sm border border-gray-200">
        <div class="p-6 border-b border-gray-200">
            <h2 class="text-lg font-semibold text-gray-800">Agent Transactions</h2>
        </div>
        
        @if(count($agentSummary) > 0)
                <div class="overflow-x-auto">
                    <table class="w-full">
                        <thead class="bg-gray-50">
                            <tr>
                                <th class="px-6 py-4 text-left">
                                    <input type="checkbox" class="w-5 h-5 rounded border-gray-300 cursor-pointer" onchange="updateSelectAll(this)">
                                </th>
                                <th class="px-6 py-4 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">Agent Name</th>
                                <th class="px-6 py-4 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">Email</th>
                                <th class="px-6 py-4 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">Phone</th>
                                <th class="px-6 py-4 text-center text-xs font-semibold text-gray-600 uppercase tracking-wider">Transactions</th>
                                <th class="px-6 py-4 text-right text-xs font-semibold text-gray-600 uppercase tracking-wider">Commission Level</th>
                                <th class="px-6 py-4 text-right text-xs font-semibold text-gray-600 uppercase tracking-wider">Total Amount (RM)</th>
                                <th class="px-6 py-4 text-center text-xs font-semibold text-gray-600 uppercase tracking-wider">Status</th>
                                <th class="px-6 py-4 text-center text-xs font-semibold text-gray-600 uppercase tracking-wider">Actions</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-gray-100">
                            @foreach($agentSummary as $summary)
                                <tr class="hover:bg-gray-50 agent-row" data-agent-id="{{ $summary['agent']->id }}" data-agent-name="{{ $summary['agent']->name }}" data-agent-amount="{{ $summary['total_amount'] }}">
                                    <td class="px-6 py-4">
                                        <input type="checkbox" class="agent-checkbox w-5 h-5 rounded border-gray-300 cursor-pointer" value="{{ $summary['agent']->id }}" onchange="updateSelectCount()">
                                    </td>
                                    <td class="px-6 py-4 text-sm font-medium text-gray-900">
                                        <div class="flex items-center gap-3">
                                            <div class="w-8 h-8 bg-gradient-to-br from-blue-400 to-blue-600 rounded-full flex items-center justify-center text-white text-sm font-bold">
                                                {{ strtoupper(substr($summary['agent']->name, 0, 1)) }}
                                            </div>
                                            {{ $summary['agent']->name }}
                                        </div>
                                    </td>
                                    <td class="px-6 py-4 text-sm text-gray-600">{{ $summary['agent']->email }}</td>
                                    <td class="px-6 py-4 text-sm text-gray-600">{{ $summary['agent']->phone ?? 'N/A' }}</td>
                                    <td class="px-6 py-4 text-sm text-center">
                                        <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold bg-blue-100 text-blue-800">
                                            {{ $summary['transaction_count'] }}
                                        </span>
                                    </td>
                                    <td class="px-6 py-4 text-sm text-right">
                                        @php
                                            $commissionLevel = 'Standard';
                                            $levelColor = 'gray';
                                            $totalAmount = $summary['total_amount'];
                                            
                                            if ($totalAmount >= 5000) {
                                                $commissionLevel = 'Platinum';
                                                $levelColor = 'purple';
                                            } elseif ($totalAmount >= 3000) {
                                                $commissionLevel = 'Gold';
                                                $levelColor = 'yellow';
                                            } elseif ($totalAmount >= 1000) {
                                                $commissionLevel = 'Silver';
                                                $levelColor = 'gray';
                                            } elseif ($totalAmount >= 500) {
                                                $commissionLevel = 'Bronze';
                                                $levelColor = 'orange';
                                            }
                                        @endphp
                                        <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold 
                                            @if($levelColor === 'purple') bg-purple-100 text-purple-800
                                            @elseif($levelColor === 'yellow') bg-yellow-100 text-yellow-800
                                            @elseif($levelColor === 'orange') bg-orange-100 text-orange-800
                                            @else bg-gray-100 text-gray-800 @endif">
                                            {{ $commissionLevel }}
                                        </span>
                                    </td>
                                    <td class="px-6 py-4 text-sm font-semibold text-gray-900 text-right">
                                        RM{{ number_format($summary['total_amount'], 2) }}
                                    </td>
                                    <td class="px-6 py-4 text-center">
                                        @php
                                            $hasCompleted = $summary['commissions']->where('status', 'completed')->count() > 0;
                                            $hasPaid = $summary['commissions']->where('status', 'paid')->count() > 0;
                                            $hasPending = $summary['commissions']->where('status', 'pending')->count() > 0;
                                        @endphp
                                        @if($hasPending && !$hasCompleted && !$hasPaid)
                                            <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-orange-100 text-orange-800">
                                                Pending
                                            </span>
                                        @elseif(($hasCompleted || $hasPaid) && !$hasPending)
                                            <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800">
                                                <i class="fas fa-check-circle mr-1"></i>Completed
                                            </span>
                                        @elseif(($hasPending) && ($hasCompleted || $hasPaid))
                                            <div class="flex flex-col gap-1">
                                                <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800 justify-center">
                                                    <i class="fas fa-check-circle mr-1"></i>Completed
                                                </span>
                                                <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-orange-100 text-orange-800 justify-center">
                                                    Pending
                                                </span>
                                            </div>
                                        @endif
                                    </td>
                                    <td class="px-6 py-4 text-center">
                                        <div class="flex justify-center items-center gap-4">
                                            <button type="button" onclick="viewDetails({{ $summary['agent']->id }}, '{{ $summary['agent']->name }}')" 
                                                    class="text-blue-600 hover:text-blue-800 hover:scale-110 transition-all" title="View Details">
                                                <i class="fas fa-eye text-lg"></i>
                                            </button>
                                            <button type="button" onclick="singleProcessPayment({{ $summary['agent']->id }}, '{{ $summary['agent']->name }}', {{ $summary['total_amount'] }})" 
                                                    class="bg-green-600 hover:bg-green-700 text-white px-6 py-1 rounded text-xs font-semibold transition-colors shadow-md whitespace-nowrap">
                                                <i class="fas fa-credit-card mr-1"></i>Pay Now
                                            </button>
                                        </div>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            @else
                <div class="p-12 text-center text-gray-500">
                    <i class="fas fa-inbox text-5xl text-gray-300 mb-4 inline-block"></i>
                    <p class="text-lg">No pending agent commissions found</p>
                </div>
            @endif
        </div>
</div>

<!-- Details Modal -->
<div id="detailsModal" class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center z-50">
    <div class="bg-white rounded-xl p-6 w-full max-w-2xl mx-4 max-h-96 overflow-y-auto">
        <div class="flex justify-between items-center mb-4">
            <h3 class="text-lg font-semibold text-gray-800" id="detailsTitle">Agent Details</h3>
            <button onclick="hideDetailsModal()" class="text-gray-500 hover:text-gray-700">
                <i class="fas fa-times text-xl"></i>
            </button>
        </div>
        
        <div id="detailsContent" class="space-y-4">
            <!-- Will be populated by JavaScript -->
        </div>
        
        <div class="mt-6 flex justify-end gap-3">
            <button onclick="hideDetailsModal()" class="px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition-colors">
                Close
            </button>
        </div>
    </div>
</div>

<!-- Confirmation Modal -->
<div id="confirmationModal" class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center z-50">
    <div class="bg-gradient-to-br from-gray-900 to-gray-800 rounded-xl p-8 w-full max-w-md mx-4 shadow-2xl border border-gray-700">
        <div class="mb-6">
            <h3 class="text-2xl font-bold text-white mb-2">Confirm Payment</h3>
            <p class="text-gray-400 text-sm">Review and confirm the payment details below</p>
        </div>
        
        <div id="confirmationContent" class="mb-6 space-y-3 max-h-64 overflow-y-auto">
            <!-- Will be populated by JavaScript -->
        </div>
        
        <div class="bg-gradient-to-r from-green-600 to-green-500 rounded-lg p-4 mb-6">
            <p class="text-gray-100 text-sm mb-1">Total Amount to Process:</p>
            <p id="totalAmountDisplay" class="text-3xl font-bold text-white">RM0.00</p>
        </div>
        
        <div class="flex justify-end gap-3">
            <button onclick="hideConfirmationModal()" class="px-6 py-2.5 bg-gray-700 text-white rounded-lg hover:bg-gray-600 transition-colors font-semibold border border-gray-600">
                <i class="fas fa-times mr-2"></i>Cancel
            </button>
            <button onclick="confirmPayment()" class="px-6 py-2.5 bg-gradient-to-r from-green-600 to-green-500 text-white rounded-lg hover:from-green-700 hover:to-green-600 transition-all font-semibold shadow-lg">
                <i class="fas fa-check mr-2"></i>Confirm Payment
            </button>
        </div>
    </div>
</div>

<script>
let selectedAgents = [];

function getCommissionLevel(amount) {
    if (amount >= 5000) {
        return '<span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold bg-purple-100 text-purple-800">Platinum</span>';
    } else if (amount >= 3000) {
        return '<span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold bg-yellow-100 text-yellow-800">Gold</span>';
    } else if (amount >= 1000) {
        return '<span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold bg-gray-100 text-gray-800">Silver</span>';
    } else if (amount >= 500) {
        return '<span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold bg-orange-100 text-orange-800">Bronze</span>';
    } else {
        return '<span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold bg-gray-100 text-gray-800">Standard</span>';
    }
}

function updateSelectCount() {
    const checkboxes = document.querySelectorAll('.agent-checkbox:checked');
    selectedAgents = Array.from(checkboxes).map(cb => ({
        id: cb.value,
        name: cb.closest('tr').dataset.agentName,
        amount: parseFloat(cb.closest('tr').dataset.agentAmount)
    }));
    
    const count = selectedAgents.length;
    document.getElementById('selectedCount').textContent = count + ' selected';
    document.getElementById('bulkPaymentBtn').disabled = count === 0;
    document.getElementById('selectClearBtn').disabled = count === 0;
}

function toggleSelectAll(checkbox) {
    document.querySelectorAll('.agent-checkbox').forEach(cb => {
        cb.checked = checkbox.checked;
    });
    updateSelectCount();
}

function updateSelectAll(checkbox) {
    const allChecked = document.querySelectorAll('.agent-checkbox:not(:checked)').length === 0;
    document.getElementById('selectAllCheckbox').checked = allChecked;
    updateSelectCount();
}

function clearSelection() {
    document.querySelectorAll('.agent-checkbox').forEach(cb => cb.checked = false);
    document.getElementById('selectAllCheckbox').checked = false;
    updateSelectCount();
}

function viewDetails(agentId, agentName) {
    const urlParams = new URLSearchParams(window.location.search);
    let month = urlParams.get('month') || '';
    let year = urlParams.get('year') || '';
    
    // If no filters applied, use the displayed month (from controller)
    let monthYearStr;
    if (!month && !year) {
        // Use the current month/year that the page is showing
        monthYearStr = '{{ $displayMonth }}'; // e.g., "2026-06"
    } else {
        // Format month properly
        const formattedMonth = month.length === 1 ? '0' + month : month;
        monthYearStr = year + '-' + formattedMonth;
    }
    
    const formData = new FormData();
    formData.append('month', monthYearStr);
    
    fetch(`/admin/agent-invoices/${agentId}/monthly-summary`, {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.content || ''
        },
        body: formData
    })
        .then(response => response.json())
        .then(data => {
            if (data.error) {
                alert('Error: ' + data.error);
                return;
            }
            
            let html = `
                <div class="bg-gray-50 rounded-lg p-4 mb-4">
                    <div class="grid grid-cols-2 gap-4">
                        <div>
                            <p class="text-xs text-gray-600">Agent</p>
                            <p class="text-lg font-semibold text-gray-900">${data.agent_name}</p>
                        </div>
                        <div>
                            <p class="text-xs text-gray-600">Commission Level</p>
                            <p>${getCommissionLevel(data.total_amount)}</p>
                        </div>
                        <div>
                            <p class="text-xs text-gray-600">Total Amount</p>
                            <p class="text-lg font-semibold text-orange-600">RM${parseFloat(data.total_amount).toFixed(2)}</p>
                        </div>
                        <div>
                            <p class="text-xs text-gray-600">Transactions</p>
                            <p class="text-lg font-semibold text-blue-600">${data.transaction_count}</p>
                        </div>
                    </div>
                </div>
                
                <div>
                    <h4 class="font-semibold text-gray-700 mb-3">Transaction Details:</h4>
                    <table class="w-full text-sm">
                        <thead class="bg-gray-100">
                            <tr>
                                <th class="px-3 py-2 text-left text-xs font-semibold text-gray-600">Will ID</th>
                                <th class="px-3 py-2 text-left text-xs font-semibold text-gray-600">Amount</th>
                                <th class="px-3 py-2 text-left text-xs font-semibold text-gray-600">Status</th>
                                <th class="px-3 py-2 text-left text-xs font-semibold text-gray-600">Date</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-gray-200">
            `;
            
            data.commissions.forEach(commission => {
                html += `
                    <tr class="hover:bg-gray-50">
                        <td class="px-3 py-2">#${commission.will_id}</td>
                        <td class="px-3 py-2 font-semibold">RM${parseFloat(commission.amount).toFixed(2)}</td>
                        <td class="px-3 py-2">
                            <span class="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-orange-100 text-orange-800">
                                ${commission.status}
                            </span>
                        </td>
                        <td class="px-3 py-2">${commission.created_at}</td>
                    </tr>
                `;
            });
            
            html += `
                        </tbody>
                    </table>
                </div>
            `;
            
            document.getElementById('detailsTitle').textContent = `${data.agent_name} - Transaction Details`;
            document.getElementById('detailsContent').innerHTML = html;
            document.getElementById('detailsModal').classList.remove('hidden');
            document.getElementById('detailsModal').classList.add('flex');
        })
        .catch(error => alert('Error loading details: ' + error));
}

function hideDetailsModal() {
    document.getElementById('detailsModal').classList.add('hidden');
    document.getElementById('detailsModal').classList.remove('flex');
}

function singleProcessPayment(agentId, agentName, amount) {
    selectedAgents = [{ id: agentId, name: agentName, amount: amount }];
    showConfirmationModal();
}

function bulkProcessPayment() {
    if (selectedAgents.length === 0) {
        alert('Please select at least one agent');
        return;
    }
    showConfirmationModal();
}

function showConfirmationModal() {
    let html = `<div class="space-y-3">`;
    let totalAmount = 0;
    
    selectedAgents.forEach(agent => {
        html += `
            <div class="bg-gradient-to-r from-blue-600 to-blue-500 p-4 rounded-lg border border-blue-400 shadow-md">
                <p class="font-bold text-white text-lg">${agent.name}</p>
                <p class="text-blue-100 text-sm mt-1">Amount: <span class="font-semibold text-white text-base">RM${agent.amount.toFixed(2)}</span></p>
            </div>
        `;
        totalAmount += agent.amount;
    });
    
    html += `</div>`;
    
    document.getElementById('confirmationContent').innerHTML = html;
    document.getElementById('totalAmountDisplay').textContent = `RM${totalAmount.toFixed(2)}`;
    document.getElementById('confirmationModal').classList.remove('hidden');
    document.getElementById('confirmationModal').classList.add('flex');
}

function hideConfirmationModal() {
    document.getElementById('confirmationModal').classList.add('hidden');
    document.getElementById('confirmationModal').classList.remove('flex');
}

function confirmPayment() {
    if (selectedAgents.length === 0) return;
    
    hideConfirmationModal();
    
    // Get the actual displayed month from the page title or data attribute
    const urlParams = new URLSearchParams(window.location.search);
    let month = urlParams.get('month') || '';
    let year = urlParams.get('year') || '';
    
    console.log('URL Params - Month:', month, 'Year:', year);
    
    // If no filters applied, determine from page display
    let monthYearStr;
    if (!month && !year) {
        // Try to get from page data or default to current month
        const displayElement = document.querySelector('[data-display-month]');
        if (displayElement) {
            monthYearStr = displayElement.getAttribute('data-display-month');
        } else {
            // Use the displayMonth from PHP (already in YYYY-MM format)
            monthYearStr = '{{ $displayMonth }}';
        }
    } else {
        // Use selected filters
        if (month.length === 1) month = '0' + month;
        if (month.length === 2 && !year) {
            // Month only - use current year
            year = '{{ now()->year }}';
        }
        monthYearStr = year + '-' + month;
    }
    
    console.log('Final month-year string:', monthYearStr);
    
    // Collect agent IDs
    const agentIds = selectedAgents.map(a => a.id);
    
    // Create form data for bulk payment
    const formData = new FormData();
    formData.append('month', monthYearStr);
    agentIds.forEach(id => formData.append('agent_ids[]', id));
    
    fetch('{{ route("admin.agent-invoices.bulk-payment") }}', {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.content || ''
        },
        body: formData
    })
    .then(response => {
        if (!response.ok) {
            throw new Error(`HTTP ${response.status}: ${response.statusText}`);
        }
        return response.json();
    })
    .then(data => {
        console.log('Response data:', data);
        if (data.success) {
            alert(`Success! Processed payments for ${data.completed} agent(s).` + (data.failed > 0 ? ` Failed: ${data.failed}` : ''));
            location.reload();
        } else if (data.error) {
            alert('Error: ' + data.error);
        } else if (data.errors && data.errors.length > 0) {
            alert('Payment Processing Failed:\n\n' + data.errors.join('\n\n'));
        } else {
            alert('Error: ' + (data.message || 'Unknown error'));
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('Error processing payment: ' + error.message);
    });
}
</script>
@endsection