@extends('layouts.portal')

@section('title', 'Agent Commission & Earnings')
@section('page_title', 'Commission & Earnings')
@section('page_subtitle', 'Track your earnings, withdrawals, and payment history')

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

@section('content')
    <div class="max-w-7xl mx-auto">
        <!-- Header Stats -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-5 mb-8">
            <!-- Total Earned Card -->
            <div class="bg-gradient-to-br from-green-50 to-green-100 rounded-2xl shadow-lg p-6 border border-green-200 hover:shadow-xl transition-shadow">
                <div class="flex items-start justify-between mb-4">
                    <div class="w-14 h-14 rounded-xl bg-gradient-to-br from-green-400 to-green-600 flex items-center justify-center shadow-lg">
                        <i class="fas fa-dollar-sign text-white text-2xl"></i>
                    </div>
                    <span class="text-xs font-bold text-green-700 bg-green-200 px-3 py-1 rounded-full">TOTAL</span>
                </div>
                <p class="text-sm text-green-700 font-semibold mb-1">Total Earned</p>
                <h3 class="text-4xl font-bold text-green-700 mb-2">${{ number_format($stats['total_earned'], 2) }}</h3>
                <div class="h-1 w-12 bg-gradient-to-r from-green-400 to-green-600 rounded-full"></div>
            </div>
            
            <!-- Pending Card -->
            <div class="bg-gradient-to-br from-yellow-50 to-yellow-100 rounded-2xl shadow-lg p-6 border border-yellow-200 hover:shadow-xl transition-shadow">
                <div class="flex items-start justify-between mb-4">
                    <div class="w-14 h-14 rounded-xl bg-gradient-to-br from-yellow-400 to-yellow-600 flex items-center justify-center shadow-lg">
                        <i class="fas fa-hourglass-half text-white text-2xl"></i>
                    </div>
                    <span class="text-xs font-bold text-yellow-700 bg-yellow-200 px-3 py-1 rounded-full">PENDING</span>
                </div>
                <p class="text-sm text-yellow-700 font-semibold mb-1">Awaiting Approval</p>
                <h3 class="text-4xl font-bold text-yellow-700 mb-2">${{ number_format($stats['pending'], 2) }}</h3>
                <div class="h-1 w-12 bg-gradient-to-r from-yellow-400 to-yellow-600 rounded-full"></div>
            </div>
            
            <!-- Paid Card -->
            <div class="bg-gradient-to-br from-emerald-50 to-emerald-100 rounded-2xl shadow-lg p-6 border border-emerald-200 hover:shadow-xl transition-shadow">
                <div class="flex items-start justify-between mb-4">
                    <div class="w-14 h-14 rounded-xl bg-gradient-to-br from-emerald-400 to-emerald-600 flex items-center justify-center shadow-lg">
                        <i class="fas fa-check-double text-white text-2xl"></i>
                    </div>
                    <span class="text-xs font-bold text-emerald-700 bg-emerald-200 px-3 py-1 rounded-full">PAID</span>
                </div>
                <p class="text-sm text-emerald-700 font-semibold mb-1">Successfully Received</p>
                <h3 class="text-4xl font-bold text-emerald-700 mb-2">${{ number_format($stats['paid'], 2) }}</h3>
                <div class="h-1 w-12 bg-gradient-to-r from-emerald-400 to-emerald-600 rounded-full"></div>
            </div>
            
            <!-- Withdrawal Ready Card -->
            <div class="bg-gradient-to-br from-blue-50 to-blue-100 rounded-2xl shadow-lg p-6 border border-blue-200 hover:shadow-xl transition-shadow">
                <div class="flex items-start justify-between mb-4">
                    <div class="w-14 h-14 rounded-xl bg-gradient-to-br from-blue-400 to-blue-600 flex items-center justify-center shadow-lg">
                        <i class="fas fa-wallet text-white text-2xl"></i>
                    </div>
                    <span class="text-xs font-bold text-blue-700 bg-blue-200 px-3 py-1 rounded-full">READY</span>
                </div>
                <p class="text-sm text-blue-700 font-semibold mb-1">Available for Withdrawal</p>
                <h3 class="text-4xl font-bold text-blue-700 mb-2">${{ number_format(max(0, $stats['pending']), 2) }}</h3>
                <div class="h-1 w-12 bg-gradient-to-r from-blue-400 to-blue-600 rounded-full"></div>
            </div>
        </div>

        <!-- Commission Breakdown -->
        <div class="grid grid-cols-1 md:grid-cols-3 gap-5 mb-8">
            <!-- Level 1 Card -->
            <div class="bg-gradient-to-r from-blue-500 to-blue-600 rounded-xl shadow-lg p-4 border border-blue-400 hover:shadow-xl transition-all text-white">
                <div class="flex items-center justify-between">
                    <div class="flex-1">
                        <p class="text-xs font-bold opacity-80 mb-1">Level 1 Commission</p>
                        <p class="text-3xl font-bold">${{ number_format($stats['level1_commission'], 2) }}</p>
                        <p class="text-xs opacity-75 mt-1">Direct Referrals</p>
                    </div>
                    <div class="w-16 h-16 rounded-full bg-white bg-opacity-20 flex items-center justify-center text-3xl font-bold">L1</div>
                </div>
            </div>

            <!-- Level 2 Card -->
            <div class="bg-gradient-to-r from-purple-500 to-purple-600 rounded-xl shadow-lg p-4 border border-purple-400 hover:shadow-xl transition-all text-white">
                <div class="flex items-center justify-between">
                    <div class="flex-1">
                        <p class="text-xs font-bold opacity-80 mb-1">Level 2 Commission</p>
                        <p class="text-3xl font-bold">${{ number_format($stats['level2_commission'], 2) }}</p>
                        <p class="text-xs opacity-75 mt-1">Indirect Referrals</p>
                    </div>
                    <div class="w-16 h-16 rounded-full bg-white bg-opacity-20 flex items-center justify-center text-3xl font-bold">L2</div>
                </div>
            </div>

            <!-- Level 3 Card -->
            <div class="bg-gradient-to-r from-pink-500 to-pink-600 rounded-xl shadow-lg p-4 border border-pink-400 hover:shadow-xl transition-all text-white">
                <div class="flex items-center justify-between">
                    <div class="flex-1">
                        <p class="text-xs font-bold opacity-80 mb-1">Level 3 Commission</p>
                        <p class="text-3xl font-bold">${{ number_format($stats['level3_commission'], 2) }}</p>
                        <p class="text-xs opacity-75 mt-1">Deep Network</p>
                    </div>
                    <div class="w-16 h-16 rounded-full bg-white bg-opacity-20 flex items-center justify-center text-3xl font-bold">L3</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('agent.commission') }}" 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('agent.commission') }}" 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) }}" {{ $filters['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;
                                $yearsToShow = $years->isNotEmpty() ? $years : collect([$currentYear]);
                                for ($y = max($currentYear - 5, 2020); $y <= $currentYear; $y++) {
                                    echo '<option value="' . $y . '" ' . ($filters['year'] == $y ? 'selected' : '') . '>' . $y . '</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="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" {{ $filters['status'] == 'pending' ? 'selected' : '' }}>Pending</option>
                            <option value="paid" {{ $filters['status'] == 'paid' ? 'selected' : '' }}>Paid</option>
                        </select>
                    </div>

                    <!-- Level Filter -->
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-2">
                            <i class="fas fa-layer-group 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" {{ $filters['level'] == '1' ? 'selected' : '' }}>Level 1</option>
                            <option value="2" {{ $filters['level'] == '2' ? 'selected' : '' }}>Level 2</option>
                            <option value="3" {{ $filters['level'] == '3' ? 'selected' : '' }}>Level 3</option>
                        </select>
                    </div>
                </div>

                <!-- Row 2: Date Range & Buttons (4 columns same width as row 1) -->
                <div class="grid grid-cols-1 md:grid-cols-4 gap-4 pt-4 border-t border-gray-200">
                    <!-- From Date -->
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-2">
                            <i class="fas fa-calendar-check text-blue-600 mr-1"></i>From Date
                        </label>
                        <x-date-picker name="from_date" value="{{ $filters['from_date'] }}" />
                    </div>

                    <!-- To Date -->
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-2">
                            <i class="fas fa-calendar-times text-blue-600 mr-1"></i>To Date
                        </label>
                        <x-date-picker name="to_date" value="{{ $filters['to_date'] }}" />
                    </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('agent.commission') }}" 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>

        <!-- Commission History Table -->
        <div class="bg-white rounded-xl shadow-sm border border-gray-200">
            <div class="p-6 border-b border-gray-200">
                <h3 class="text-lg font-semibold text-gray-900">Commission History</h3>
                <p class="text-sm text-gray-500 mt-1">@if($commissions instanceof \Illuminate\Pagination\Paginator){{ $commissions->total() }}@else{{ count($commissions) }}@endif total commissions</p>
            </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">Created Date</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Client Name</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Will Info</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>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Payment Date</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-200">
                        @forelse($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 whitespace-nowrap">
                                    <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 class="text-xs text-gray-500">{{ $commission->client->email }}</div>
                                        </div>
                                    </div>
                                </td>
                                <td class="px-6 py-4">
                                    @if($commission->will)
                                        <div class="text-sm">
                                            <p class="font-medium text-gray-900">
                                                {{ ucfirst(str_replace('_', ' ', $commission->will->will_type ?? 'Unknown')) }}
                                            </p>
                                            <p class="text-xs text-gray-500">
                                                Created: {{ $commission->will->created_at->format('M d, Y') }}
                                            </p>
                                        </div>
                                    @else
                                        <span class="text-sm text-gray-500">—</span>
                                    @endif
                                </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">
                                        Level {{ $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>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                    @if($commission->paid_at)
                                        {{ $commission->paid_at->format('M d, Y') }}
                                    @else
                                        <span class="text-gray-500">—</span>
                                    @endif
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="8" class="px-6 py-12 text-center">
                                    <div class="text-center">
                                        <i class="fas fa-coins text-gray-300 text-4xl mb-3"></i>
                                        <p class="text-gray-500 text-lg mb-2">No commissions found</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>
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
            
            <!-- Pagination -->
            @if($commissions->hasPages())
                <div class="px-6 py-4 border-t border-gray-200">
                    {{ $commissions->links() }}
                </div>
            @endif
        </div>
    </div>

    <!-- No JavaScript needed - Date range is always visible -->
@endsection