@extends('layouts.portal')

@section('title', $agent->name . ' - Performance Details')
@section('page_title', $agent->name)
@section('page_subtitle', 'Detailed Performance Analysis & Commission Tracking')

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

@section('content')
<div class="max-w-7xl mx-auto px-6 py-8">
    <!-- Header -->
    <div class="flex items-center justify-between mb-8">
        <div>
            <h1 class="text-3xl font-bold text-gray-900">{{ $agent->name }}</h1>
            <p class="text-gray-600 mt-1">{{ ucfirst($agent->role) }} Performance Details</p>
        </div>
        <a href="{{ route('admin.agent-performance') }}" class="px-4 py-2 bg-gray-600 text-white rounded-lg hover:bg-gray-700">
            <i class="fas fa-arrow-left mr-2"></i>Back to Dashboard
        </a>
    </div>

    <!-- Summary Statistics -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-5 mb-8">
        <div class="bg-white rounded-lg shadow p-6 border-t-4 border-blue-500">
            <p class="text-blue-600 font-semibold text-sm uppercase">Total Clients</p>
            <p class="text-4xl font-bold text-gray-900 mt-3">{{ $stats['total_clients'] }}</p>
        </div>
        <div class="bg-white rounded-lg shadow p-6 border-t-4 border-green-500">
            <p class="text-green-600 font-semibold text-sm uppercase">Total Wills</p>
            <p class="text-4xl font-bold text-gray-900 mt-3">{{ $stats['total_wills'] }}</p>
        </div>
        <div class="bg-white rounded-lg shadow p-6 border-t-4 border-amber-500">
            <p class="text-amber-600 font-semibold text-sm uppercase">Total Commission</p>
            <p class="text-3xl font-bold text-gray-900 mt-3">RM {{ number_format($stats['total_commission'], 2) }}</p>
        </div>
        <div class="bg-white rounded-lg shadow p-6 border-t-4 border-purple-500">
            <p class="text-purple-600 font-semibold text-sm uppercase">This Month</p>
            <p class="text-xl font-bold text-gray-900 mt-3">RM {{ number_format($stats['commission_this_month'], 2) }}</p>
            <p class="text-xs text-gray-500 mt-1">{{ $stats['clients_this_month'] }} clients</p>
        </div>
    </div>

    <!-- Performance Chart Section -->
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
        <div class="bg-white rounded-lg shadow-md p-6">
            <h3 class="text-lg font-bold text-gray-900 mb-4">
                <i class="fas fa-users text-blue-600 mr-2"></i>Monthly Referrals
            </h3>
            <div class="space-y-2">
                @foreach($monthlyStats['months'] as $index => $month)
                <div class="flex items-center justify-between">
                    <span class="text-sm text-gray-600 w-16">{{ $month }}</span>
                    <div class="flex-1 mx-3 bg-gray-200 rounded-full h-2">
                        <div class="bg-blue-600 h-2 rounded-full" style="width: {{ max(5, ($monthlyStats['referrals'][$index] / $monthlyStats['max_referrals']) * 100) }}%"></div>
                    </div>
                    <span class="text-sm font-semibold text-gray-900 w-8 text-right">{{ $monthlyStats['referrals'][$index] }}</span>
                </div>
                @endforeach
            </div>
        </div>

        <div class="bg-white rounded-lg shadow-md p-6">
            <h3 class="text-lg font-bold text-gray-900 mb-4">
                <i class="fas fa-file-contract text-green-600 mr-2"></i>Monthly Wills Created
            </h3>
            <div class="space-y-2">
                @foreach($monthlyStats['months'] as $index => $month)
                <div class="flex items-center justify-between">
                    <span class="text-sm text-gray-600 w-16">{{ $month }}</span>
                    <div class="flex-1 mx-3 bg-gray-200 rounded-full h-2">
                        <div class="bg-green-600 h-2 rounded-full" style="width: {{ max(5, ($monthlyStats['wills'][$index] / $monthlyStats['max_wills']) * 100) }}%"></div>
                    </div>
                    <span class="text-sm font-semibold text-gray-900 w-8 text-right">{{ $monthlyStats['wills'][$index] }}</span>
                </div>
                @endforeach
            </div>
        </div>

        <div class="bg-white rounded-lg shadow-md p-6 md:col-span-2">
            <h3 class="text-lg font-bold text-gray-900 mb-4">
                <i class="fas fa-chart-line text-amber-600 mr-2"></i>Monthly Commission Earned
            </h3>
            <div class="space-y-2">
                @foreach($monthlyStats['months'] as $index => $month)
                <div class="flex items-center justify-between">
                    <span class="text-sm text-gray-600 w-20">{{ $month }}</span>
                    <div class="flex-1 mx-3 bg-gray-200 rounded-full h-2">
                        <div class="bg-amber-600 h-2 rounded-full" style="width: {{ max(5, ($monthlyStats['commissions'][$index] / $monthlyStats['max_commissions']) * 100) }}%"></div>
                    </div>
                    <span class="text-sm font-semibold text-amber-600 w-24 text-right">RM {{ number_format($monthlyStats['commissions'][$index], 2) }}</span>
                </div>
                @endforeach
            </div>
        </div>
    </div>

    <!-- Commission Details Table -->
    <div class="bg-white rounded-lg shadow-md overflow-hidden">
        <div class="p-6 border-b">
            <h2 class="text-xl font-bold text-gray-900">
                <i class="fas fa-list mr-2 text-blue-600"></i>Commission Details
            </h2>
        </div>
        <div class="overflow-x-auto">
            <table class="w-full text-sm">
                <thead>
                    <tr class="bg-gray-900 text-white">
                        <th class="px-6 py-4 text-left font-semibold">Client Name</th>
                        <th class="px-6 py-4 text-left font-semibold">Will ID</th>
                        <th class="px-6 py-4 text-center font-semibold">Level</th>
                        <th class="px-6 py-4 text-right font-semibold">Commission Amount</th>
                        <th class="px-6 py-4 text-left font-semibold">Status</th>
                        <th class="px-6 py-4 text-left font-semibold">Date</th>
                    </tr>
                </thead>
                <tbody class="divide-y">
                    @forelse($commissionDetails as $commission)
                    <tr class="hover:bg-gray-50 transition-colors">
                        <td class="px-6 py-4 font-medium text-gray-900">
                            @if($commission->will && $commission->will->client)
                                {{ $commission->will->client->first_name }} {{ $commission->will->client->last_name }}
                            @else
                                N/A
                            @endif
                        </td>
                        <td class="px-6 py-4 font-mono text-xs text-gray-600">{{ $commission->will_id ?? 'N/A' }}</td>
                        <td class="px-6 py-4 text-center">
                            <span class="inline-block px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-xs font-semibold">
                                Level {{ $commission->level }}
                            </span>
                        </td>
                        <td class="px-6 py-4 text-right font-bold text-green-600">RM {{ number_format($commission->amount, 2) }}</td>
                        <td class="px-6 py-4">
                            @php
                                $statusClass = match($commission->status ?? 'pending') {
                                    'paid' => 'bg-green-100 text-green-800',
                                    'pending' => 'bg-yellow-100 text-yellow-800',
                                    default => 'bg-gray-100 text-gray-800'
                                };
                            @endphp
                            <span class="inline-block px-3 py-1 {{ $statusClass }} rounded-full text-xs font-semibold">
                                {{ ucfirst($commission->status ?? 'pending') }}
                            </span>
                        </td>
                        <td class="px-6 py-4 text-gray-600">{{ $commission->created_at->format('d M Y') }}</td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="6" class="px-6 py-12 text-center text-gray-500">
                            <i class="fas fa-inbox text-3xl mb-3 block opacity-50"></i>
                            <span>No commission records found</span>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        
        <!-- Pagination -->
        @if($commissionDetails->total() > 0)
        <div class="px-6 py-4 border-t bg-gray-50">
            <div class="flex items-center justify-between">
                <div class="text-sm text-gray-600">
                    Showing <span class="font-semibold">{{ $commissionDetails->firstItem() }}</span> to 
                    <span class="font-semibold">{{ $commissionDetails->lastItem() }}</span> of 
                    <span class="font-semibold">{{ $commissionDetails->total() }}</span> records
                </div>
                <div>
                    {{ $commissionDetails->links() }}
                </div>
            </div>
        </div>
        @endif
    </div>
</div>

<style>
    .sidebar-item.active a {
        background-color: rgba(59, 130, 246, 0.1);
        border-left: 3px solid #3b82f6;
        padding-left: calc(0.5rem - 3px);
    }
</style>
@endsection