@extends('layouts.portal')

@section('title', 'Pending Commission Payments')
@section('page_title', 'Pending Commission Payments')
@section('page_subtitle', 'Process Agent Commissions & Payments')

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

@push('styles')
<style>
    .stat-card { background: white; border-radius: 12px; padding: 1.5rem; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
    .stat-card.success { border-left: 4px solid #10b981; }
    .stat-card.warning { border-left: 4px solid #f59e0b; }
    .stat-card.danger { border-left: 4px solid #ef4444; }
</style>
@endpush

@section('content')
<div class="max-w-7xl mx-auto p-4">
    @php
        $totalPaid = $statusBreakdown->where('status', 'paid')->first()->total ?? 0;
        $totalPending = $statusBreakdown->where('status', 'pending')->first()->total ?? 0;
        $totalCancelled = $statusBreakdown->where('status', 'cancelled')->first()->total ?? 0;
        $countPaid = $statusBreakdown->where('status', 'paid')->first()->count ?? 0;
        $countPending = $statusBreakdown->where('status', 'pending')->first()->count ?? 0;
        $countCancelled = $statusBreakdown->where('status', 'cancelled')->first()->count ?? 0;
    @endphp

    <!-- Stats Cards -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-3">
        <div class="stat-card success">
            <div class="flex justify-between items-start">
                <div>
                    <p class="text-sm text-gray-500 mb-1">Paid Commissions</p>
                    <p class="text-3xl font-bold text-gray-800">RM{{ number_format($totalPaid, 2) }}</p>
                    <p class="text-xs text-gray-400 mt-1">{{ $countPaid }} transactions</p>
                </div>
                <div class="p-2 bg-green-100 rounded-lg">
                    <i class="fas fa-check-circle text-green-600 text-xl"></i>
                </div>
            </div>
        </div>

        <div class="stat-card warning">
            <div class="flex justify-between items-start">
                <div>
                    <p class="text-sm text-gray-500 mb-1">Pending Commissions</p>
                    <p class="text-3xl font-bold text-gray-800">RM{{ number_format($totalPending, 2) }}</p>
                    <p class="text-xs text-gray-400 mt-1">{{ $countPending }} transactions</p>
                </div>
                <div class="p-2 bg-yellow-100 rounded-lg">
                    <i class="fas fa-clock text-yellow-600 text-xl"></i>
                </div>
            </div>
        </div>

        <div class="stat-card danger">
            <div class="flex justify-between items-start">
                <div>
                    <p class="text-sm text-gray-500 mb-1">Cancelled</p>
                    <p class="text-3xl font-bold text-gray-800">RM{{ number_format($totalCancelled, 2) }}</p>
                    <p class="text-xs text-gray-400 mt-1">{{ $countCancelled }} transactions</p>
                </div>
                <div class="p-2 bg-red-100 rounded-lg">
                    <i class="fas fa-times-circle text-red-600 text-xl"></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.mlm.reports') }}" 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.mlm.reports') }}" method="GET" class="space-y-4">
            <!-- Row 1: Month, Year, Status, 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>
                        @foreach($availableYears as $y)
                            <option value="{{ $y }}" {{ request('year') == $y ? 'selected' : '' }}>{{ $y }}</option>
                        @endforeach
                    </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="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="pending" {{ request('status', 'pending') == 'pending' ? 'selected' : '' }}>Pending</option>
                        <option value="paid" {{ request('status') == 'paid' ? 'selected' : '' }}>Paid</option>
                        <option value="cancelled" {{ request('status') == 'cancelled' ? 'selected' : '' }}>Cancelled</option>
                        <option value="">All Status</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="1" {{ request('level') == '1' ? 'selected' : '' }}>Level 1</option>
                        <option value="2" {{ request('level') == '2' ? 'selected' : '' }}>Level 2</option>
                        <option value="3" {{ request('level') == '3' ? 'selected' : '' }}>Level 3</option>
                    </select>
                </div>
            </div>

            <!-- Row 2: Buttons -->
            <div class="grid grid-cols-1 md:grid-cols-4 gap-4 pt-4 border-t border-gray-200">
                <div></div>
                <div></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.mlm.reports') }}" 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>
        </form>
    </div>

    <!-- Charts Row -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-4 mb-6">
        <div class="lg:col-span-2 bg-white rounded-xl shadow-sm border border-gray-200 p-4">
            <h3 class="font-semibold text-gray-800 mb-4">Monthly Commission Trend</h3>
            <canvas id="commissionChart" height="100"></canvas>
        </div>
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4">
            <h3 class="font-semibold text-gray-800 mb-4">Commission by Level</h3>
            <canvas id="levelChart"></canvas>
        </div>
    </div>

    <!-- Top Agents & Recent Commissions -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-4 mb-6">
        <!-- Top Agents -->
        <div class="bg-white rounded-xl shadow-sm border border-gray-200">
            <div class="p-4 border-b border-gray-200">
                <h3 class="font-semibold text-gray-800 flex items-center">
                    <i class="fas fa-trophy mr-2 text-yellow-500"></i>Top 10 Performing Agents
                </h3>
            </div>
            <div class="p-4">
                <div class="overflow-x-auto">
                    <table class="w-full text-sm">
                        <thead class="bg-gray-50">
                            <tr>
                                <th class="p-3 text-left">Rank</th>
                                <th class="p-3 text-left">Agent</th>
                                <th class="p-3 text-left">Total Earned</th>
                                <th class="p-3 text-left">Transactions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($topAgents ?? [] as $index => $agent)
                                <tr class="border-b border-gray-100 hover:bg-gray-50">
                                    <td class="p-3">
                                        @if($index < 3)
                                            <i class="fas fa-medal {{ $index == 0 ? 'text-yellow-500' : ($index == 1 ? 'text-gray-400' : 'text-orange-400') }}"></i>
                                        @else
                                            {{ $index + 1 }}
                                        @endif
                                    </td>
                                    <td class="p-3 font-medium">{{ $agent->name }}</td>
                                    <td class="p-3 font-semibold text-green-600">RM{{ number_format($agent->total_earned ?? 0, 2) }}</td>
                                    <td class="p-3 text-center">
                                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
                                            {{ $agent->commissions_count ?? 0 }}
                                        </span>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="4" class="p-4 text-center text-gray-500">No data available</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <!-- Recent Commissions -->
        <div class="bg-white rounded-xl shadow-sm border border-gray-200">
            <div class="p-4 border-b border-gray-200">
                <h3 class="font-semibold text-gray-800 flex items-center">
                    <i class="fas fa-history mr-2 text-blue-500"></i>Recent Commissions
                </h3>
            </div>
            <div class="p-4">
                <div class="overflow-x-auto">
                    <table class="w-full text-sm">
                        <thead class="bg-gray-50">
                            <tr>
                                <th class="p-3 text-left">Date</th>
                                <th class="p-3 text-left">Agent</th>
                                <th class="p-3 text-left">Level</th>
                                <th class="p-3 text-left">Amount</th>
                                <th class="p-3 text-left">Status</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($recentCommissions as $commission)
                                <tr class="border-b border-gray-100 hover:bg-gray-50">
                                    <td class="p-3">{{ $commission->created_at->format('M d, Y') }}</td>
                                    <td class="p-3">{{ $commission->user->name ?? 'N/A' }}</td>
                                    <td class="p-3">
                                        <span class="px-2 py-1 rounded-full text-xs font-semibold 
                                            {{ $commission->level == 1 ? 'bg-blue-100 text-blue-800' : ($commission->level == 2 ? 'bg-purple-100 text-purple-800' : 'bg-green-100 text-green-800') }}">
                                            L{{ $commission->level }}
                                        </span>
                                    </td>
                                    <td class="p-3 font-semibold">RM{{ number_format($commission->amount, 2) }}</td>
                                    <td class="p-3">
                                        <span class="px-2 py-1 rounded-full text-xs font-semibold 
                                            {{ $commission->status == 'paid' ? 'bg-green-100 text-green-800' : ($commission->status == 'pending' ? 'bg-yellow-100 text-yellow-800' : 'bg-red-100 text-red-800') }}">
                                            {{ ucfirst($commission->status) }}
                                        </span>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="5" class="p-4 text-center text-gray-500">No recent commissions found</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- All Commissions Table -->
    <div class="bg-white rounded-xl shadow-sm border border-gray-200">
        <div class="p-4 border-b border-gray-200 flex justify-between items-center">
            <h3 class="font-semibold text-gray-800 flex items-center">
                <i class="fas fa-list mr-2 text-purple-600"></i>All Commissions
            </h3>
            <a href="{{ route('admin.withdrawals') }}" class="px-4 py-2 bg-cyan-600 text-white rounded-lg hover:bg-cyan-700 transition text-sm">
                <i class="fas fa-money-bill-wave mr-2"></i>View Withdrawals
            </a>
        </div>
        <div class="p-4">
            @if($allCommissions->count() > 0)
                <div class="overflow-x-auto">
                    <table class="w-full text-sm">
                        <thead class="bg-gray-50">
                            <tr>
                                <th class="px-4 py-3 text-left"><input type="checkbox" id="selectAll" class="form-checkbox"></th>
                                <th class="px-4 py-3 text-left">ID</th>
                                <th class="px-4 py-3 text-left">Will ID</th>
                                <th class="px-4 py-3 text-left">Client Name</th>
                                <th class="px-4 py-3 text-left">Agent</th>
                                <th class="px-4 py-3 text-left">Level</th>
                                <th class="px-4 py-3 text-left">Amount</th>
                                <th class="px-4 py-3 text-left">Status</th>
                                <th class="px-4 py-3 text-left">Date</th>
                                <th class="px-4 py-3 text-center">Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($allCommissions as $commission)
                                <tr class="border-b border-gray-100 hover:bg-gray-50">
                                    <td class="px-4 py-3">
                                        @if($commission->status === 'pending')
                                            <input type="checkbox" class="form-checkbox commission-checkbox" value="{{ $commission->id }}">
                                        @endif
                                    </td>
                                    <td class="px-4 py-3">#{{ $commission->id }}</td>
                                    <td class="px-4 py-3 font-semibold text-blue-600">
                                        @if($commission->will_id)
                                            <a href="{{ route('admin.wills.show', $commission->will_id) }}" class="hover:text-blue-800">#{{ $commission->will_id }}</a>
                                        @else
                                            N/A
                                        @endif
                                    </td>
                                    <td class="px-4 py-3">
                                        @if($commission->client)
                                            <div>
                                                <p class="font-medium">{{ $commission->client->first_name ?? '' }} {{ $commission->client->last_name ?? '' }}</p>
                                                <small class="text-gray-600">{{ $commission->client->email ?? '' }}</small>
                                            </div>
                                        @else
                                            N/A
                                        @endif
                                    </td>
                                    <td class="px-4 py-3 font-medium">{{ $commission->user->name ?? 'N/A' }}</td>
                                    <td class="px-4 py-3">
                                        <span class="px-2 py-1 rounded-full text-xs font-semibold 
                                            {{ $commission->level == 1 ? 'bg-blue-100 text-blue-800' : ($commission->level == 2 ? 'bg-purple-100 text-purple-800' : 'bg-green-100 text-green-800') }}">
                                            L{{ $commission->level }}
                                        </span>
                                    </td>
                                    <td class="px-4 py-3 font-semibold">RM{{ number_format($commission->amount, 2) }}</td>
                                    <td class="px-4 py-3">
                                        <span class="px-2 py-1 rounded-full text-xs font-semibold 
                                            {{ $commission->status == 'paid' ? 'bg-green-100 text-green-800' : ($commission->status == 'pending' ? 'bg-yellow-100 text-yellow-800' : 'bg-red-100 text-red-800') }}">
                                            {{ ucfirst($commission->status) }}
                                        </span>
                                    </td>
                                    <td class="px-4 py-3 text-gray-500">{{ $commission->created_at->format('M d, Y') }}</td>
                                    <td class="px-4 py-3 text-center">
                                        @if($commission->status === 'pending')
                                            <form action="{{ route('admin.finance.commission.paid', $commission->id) }}" method="POST" style="display: inline;">
                                                @csrf
                                                <button type="submit" class="px-3 py-1 bg-green-500 text-white rounded text-xs hover:bg-green-600 transition" title="Process Payment">
                                                    <i class="fas fa-check mr-1"></i>Pay Now
                                                </button>
                                            </form>
                                        @endif
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
                
                <!-- Pagination -->
                <div class="mt-4">
                    {{ $allCommissions->links() }}
                </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 commissions found</p>
                </div>
            @endif
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    // Commission Chart
    const ctx1 = document.getElementById('commissionChart').getContext('2d');
    new Chart(ctx1, {
        type: 'line',
        data: {
            labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
            datasets: [{
                label: 'Commissions',
                data: [1200, 1900, 3000, 5000, 2000, 3000, 2500, 3500, 4000, 3200, 2800, 3500],
                borderColor: '#3b82f6',
                backgroundColor: 'rgba(59, 130, 246, 0.1)',
                tension: 0.4,
                fill: true
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: true,
            plugins: {
                legend: { display: false }
            },
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }
    });

    // Level Chart
    const ctx2 = document.getElementById('levelChart').getContext('2d');
    new Chart(ctx2, {
        type: 'doughnut',
        data: {
            labels: ['Level 1', 'Level 2', 'Level 3'],
            datasets: [{
                data: [
                    {{ $commissionStats->get(1, 0) ?? 0 }}, 
                    {{ $commissionStats->get(2, 0) ?? 0 }}, 
                    {{ $commissionStats->get(3, 0) ?? 0 }}
                ],
                backgroundColor: ['#3b82f6', '#10b981', '#06b6d4']
            }]
        },
        options: {
            responsive: true,
            plugins: {
                legend: { position: 'bottom' }
            }
        }
    });

    // Checkbox functionality
    document.addEventListener('DOMContentLoaded', function() {
        const selectAllCheckbox = document.getElementById('selectAll');
        const commissionCheckboxes = document.querySelectorAll('.commission-checkbox');

        // Select all checkbox
        if (selectAllCheckbox) {
            selectAllCheckbox.addEventListener('change', function() {
                commissionCheckboxes.forEach(checkbox => {
                    checkbox.checked = this.checked;
                });
                updateSelectedCount();
            });
        }

        // Individual checkboxes
        commissionCheckboxes.forEach(checkbox => {
            checkbox.addEventListener('change', function() {
                updateSelectedCount();
                // Uncheck select all if any is unchecked
                if (!this.checked && selectAllCheckbox) {
                    selectAllCheckbox.checked = false;
                }
            });
        });

        function updateSelectedCount() {
            const selected = document.querySelectorAll('.commission-checkbox:checked').length;
            const badge = document.getElementById('selected-count');
            if (badge) {
                badge.textContent = selected;
            }
        }
    });
</script>
@endpush