@extends('layouts.portal')

@section('title', 'Agent Withdrawal')
@section('page_title', 'Monthly Earnings')
@section('page_subtitle', 'View your monthly commission and payment status')

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

@section('content')
    <div class="max-w-6xl mx-auto">
        <!-- Balance Overview -->
        <div class="bg-gradient-to-r from-green-500 to-green-600 rounded-xl p-6 text-white mb-6 shadow-lg">
            <div class="flex items-center justify-between">
                <div class="flex-1">
                    <h2 class="text-2xl font-bold mb-2">Your Earnings Summary</h2>
                    <p class="text-green-100 mb-4">View your month-wise commission earnings and payment status</p>
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                        <div>
                            <p class="text-sm text-green-100">Total Earned</p>
                            <p class="text-3xl font-bold">${{ number_format($totalEarned, 2) }}</p>
                        </div>
                        <div>
                            <p class="text-sm text-green-100">Pending Commission</p>
                            <p class="text-2xl font-semibold">${{ number_format($availableBalance, 2) }}</p>
                        </div>
                        <div>
                            <p class="text-sm text-green-100">Paid Commission</p>
                            <p class="text-2xl font-semibold">${{ number_format($pendingWithdrawals, 2) }}</p>
                        </div>
                    </div>
                </div>
                <div class="hidden md:block ml-6">
                    <div class="w-20 h-20 bg-white/20 rounded-full flex items-center justify-center">
                        <i class="fas fa-chart-line text-3xl"></i>
                    </div>
                </div>
            </div>
        </div>

        <!-- Info Notice -->
        <div class="bg-blue-50 rounded-xl shadow-sm border border-blue-200 p-6 mb-6">
            <div class="flex items-start gap-4">
                <div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center flex-shrink-0">
                    <i class="fas fa-info-circle text-blue-600 text-xl"></i>
                </div>
                <div>
                    <h3 class="text-lg font-semibold text-blue-900 mb-2">Commission Payment Processing</h3>
                    <p class="text-blue-800 mb-3">
                        Your commissions are processed and managed by our admin team. Below you can see your monthly earnings breakdown.
                    </p>
                    <ul class="list-disc list-inside space-y-1 text-sm text-blue-700">
                        <li>Commissions are calculated and tracked monthly</li>
                        <li>Payments are processed by admin based on invoiced amounts</li>
                        <li>You'll receive email confirmation when payment is processed</li>
                        <li>View detailed breakdown of each month's earnings</li>
                    </ul>
                </div>
            </div>
        </div>

        <!-- Monthly Earnings Breakdown -->
        <div class="bg-white rounded-xl shadow-sm border border-gray-200">
            <div class="p-6 border-b border-gray-200 flex justify-between items-center">
                <div>
                    <h3 class="text-lg font-semibold text-gray-900">Monthly Earnings Breakdown</h3>
                    <p class="text-sm text-gray-500 mt-1">Invoice-wise and month-wise commission details</p>
                </div>
            </div>
            
            <div class="overflow-x-auto">
                @if(count($monthlyCommissions) > 0)
                    <!-- Monthly Summary Cards -->
                    <div class="p-6">
                        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                            @foreach($monthlyCommissions as $monthKey => $monthData)
                                <div class="border border-gray-200 rounded-lg p-4 hover:shadow-md transition-shadow">
                                    <div class="flex justify-between items-start mb-3">
                                        <div>
                                            <p class="text-sm font-medium text-gray-600">{{ $monthData['monthDisplay'] }}</p>
                                            <p class="text-2xl font-bold text-gray-900 mt-1">${{ number_format($monthData['totalEarned'], 2) }}</p>
                                        </div>
                                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium
                                            @if($monthData['paymentStatus'] == 'paid') bg-green-100 text-green-800
                                            @else bg-yellow-100 text-yellow-800
                                            @endif">
                                            {{ $monthData['paymentStatus'] == 'paid' ? '✓ Paid' : 'Pending' }}
                                        </span>
                                    </div>
                                    
                                    <div class="space-y-2 text-sm">
                                        <div class="flex justify-between text-gray-600">
                                            <span>Commission Count:</span>
                                            <span class="font-medium">{{ count($monthData['commissions']) }} {{ count($monthData['commissions']) == 1 ? 'invoice' : 'invoices' }}</span>
                                        </div>
                                        @if($monthData['paymentStatus'] == 'paid' && $monthData['paidDate'])
                                            <div class="flex justify-between text-gray-600">
                                                <span>Paid Date:</span>
                                                <span class="font-medium">{{ $monthData['paidDate']->format('M d, Y') }}</span>
                                            </div>
                                        @endif
                                        @if($monthData['pendingAmount'] > 0)
                                            <div class="flex justify-between text-yellow-600 bg-yellow-50 p-2 rounded">
                                                <span>Pending:</span>
                                                <span class="font-medium">${{ number_format($monthData['pendingAmount'], 2) }}</span>
                                            </div>
                                        @endif
                                    </div>
                                    
                                    <!-- Expand Button -->
                                    <button onclick="toggleDetails('month-{{ $monthKey }}')" class="mt-3 w-full px-3 py-2 text-xs font-medium text-blue-600 hover:bg-blue-50 rounded transition-colors">
                                        <i class="fas fa-chevron-down mr-1"></i> View Details
                                    </button>
                                </div>
                            @endforeach
                        </div>

                        <!-- Detailed View for Each Month -->
                        <div class="mt-8 space-y-6">
                            @foreach($monthlyCommissions as $monthKey => $monthData)
                                <div id="month-{{ $monthKey }}" class="hidden border border-gray-200 rounded-lg overflow-hidden">
                                    <div class="bg-gray-50 px-6 py-3 border-b border-gray-200">
                                        <h4 class="font-semibold text-gray-900">{{ $monthData['monthDisplay'] }} - Details</h4>
                                    </div>
                                    <div class="overflow-x-auto">
                                        <table class="w-full">
                                            <thead class="bg-gray-50 border-b border-gray-200">
                                                <tr>
                                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Invoice Date</th>
                                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Client</th>
                                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Level</th>
                                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Rate %</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>
                                                </tr>
                                            </thead>
                                            <tbody class="divide-y divide-gray-200">
                                                @foreach($monthData['commissions'] as $commission)
                                                    <tr class="hover:bg-gray-50">
                                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                                            {{ $commission->created_at->format('M d, Y') }}
                                                        </td>
                                                        <td class="px-6 py-4">
                                                            <div class="flex items-center">
                                                                <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 font-bold text-xs">
                                                                    {{ strtoupper(substr($commission->client->first_name ?? 'C', 0, 1)) }}
                                                                </div>
                                                                <div class="ml-3">
                                                                    <div class="text-sm font-medium text-gray-900">
                                                                        {{ $commission->client->full_name }}
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </td>
                                                        <td class="px-6 py-4 whitespace-nowrap">
                                                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium
                                                                @if($commission->level == 1) bg-blue-100 text-blue-800
                                                                @elseif($commission->level == 2) bg-purple-100 text-purple-800
                                                                @else bg-pink-100 text-pink-800
                                                                @endif">
                                                                L{{ $commission->level }}
                                                            </span>
                                                        </td>
                                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                                            {{ $commission->percentage }}%
                                                        </td>
                                                        <td class="px-6 py-4 whitespace-nowrap">
                                                            <div class="text-sm font-bold text-gray-900">${{ number_format($commission->amount, 2) }}</div>
                                                        </td>
                                                        <td class="px-6 py-4 whitespace-nowrap">
                                                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium
                                                                @if($commission->status == 'paid') bg-green-100 text-green-800
                                                                @elseif($commission->status == 'pending') bg-yellow-100 text-yellow-800
                                                                @else bg-red-100 text-red-800
                                                                @endif">
                                                                {{ ucfirst($commission->status) }}
                                                            </span>
                                                        </td>
                                                    </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                @else
                    <div class="p-12 text-center">
                        <i class="fas fa-inbox text-gray-300 text-4xl mb-3"></i>
                        <p class="text-gray-500 text-lg mb-2">No commission earnings yet</p>
                        <p class="text-gray-400 text-sm mb-4">Start referring clients to earn commissions</p>
                        <a href="{{ route('agent.clients.create') }}" class="inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">
                            <i class="fas fa-plus mr-2"></i>
                            Refer Your First Client
                        </a>
                    </div>
                @endif
            </div>
        </div>
    </div>

    <script>
        function toggleDetails(elementId) {
            const element = document.getElementById(elementId);
            element.classList.toggle('hidden');
        }
    </script>
@endsection