@extends('layouts.portal')

@section('title', 'Agent Performance Dashboard')
@section('page_title', 'Agent Performance Dashboard')
@section('page_subtitle', 'Monitor Agent Performance & Commission Hierarchy')

@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 Performance Dashboard</h1>
            <p class="text-gray-600 mt-1">Real-time Agent Performance & Commission Tracking</p>
        </div>
        <a href="{{ route('admin.reports.master.index') }}" 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
        </a>
    </div>

    <!-- Search & Filter Section -->
    <div class="bg-white rounded-lg shadow-md p-6 mb-8">
        <form method="GET" action="{{ route('admin.agent-performance') }}" class="flex items-end gap-4 flex-wrap">
            <!-- Search by Name -->
            <div class="flex-1 min-w-64">
                <label class="block text-sm font-semibold text-gray-700 mb-2">
                    <i class="fas fa-search mr-2"></i>Search Agent Name
                </label>
                <input 
                    type="text" 
                    name="search_name" 
                    value="{{ $searchName }}"
                    placeholder="Enter agent name..." 
                    class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
                >
            </div>

            <!-- Filter by Month -->
            <div>
                <label class="block text-sm font-semibold text-gray-700 mb-2">
                    <i class="fas fa-calendar mr-2"></i>Month
                </label>
                <select 
                    name="filter_month" 
                    class="px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
                >
                    @for ($m = 1; $m <= 12; $m++)
                        <option value="{{ $m }}" {{ $filterMonth == $m ? 'selected' : '' }}>
                            {{ \Carbon\Carbon::createFromDate(null, $m, 1)->format('F') }}
                        </option>
                    @endfor
                </select>
            </div>

            <!-- Filter by Year -->
            <div>
                <label class="block text-sm font-semibold text-gray-700 mb-2">
                    <i class="fas fa-calendar-alt mr-2"></i>Year
                </label>
                <select 
                    name="filter_year" 
                    class="px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
                >
                    @foreach($years as $year)
                        <option value="{{ $year }}" {{ $filterYear == $year ? 'selected' : '' }}>
                            {{ $year }}
                        </option>
                    @endforeach
                </select>
            </div>

            <!-- Buttons -->
            <div class="flex gap-2">
                <button 
                    type="submit" 
                    class="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors font-semibold"
                >
                    <i class="fas fa-filter mr-2"></i>Filter
                </button>
                <a 
                    href="{{ route('admin.agent-performance') }}" 
                    class="px-6 py-2 bg-gray-500 text-white rounded-lg hover:bg-gray-600 transition-colors font-semibold"
                >
                    <i class="fas fa-redo mr-2"></i>Reset
                </a>
            </div>
        </form>
    </div>

    <!-- Performance Cards -->
    <div class="grid grid-cols-1 md: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 Agents</p>
            <p class="text-4xl font-bold text-gray-900 mt-3">{{ count($agentStats) }}</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">Clients ({{ \Carbon\Carbon::createFromDate(null, $filterMonth, 1)->format('M Y') }})</p>
            <p class="text-4xl font-bold text-gray-900 mt-3">{{ $totalClientsFiltered }}</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">Wills ({{ \Carbon\Carbon::createFromDate(null, $filterMonth, 1)->format('M Y') }})</p>
            <p class="text-4xl font-bold text-gray-900 mt-3">{{ $totalWillsFiltered }}</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">Commission ({{ \Carbon\Carbon::createFromDate(null, $filterMonth, 1)->format('M Y') }})</p>
            <p class="text-4xl font-bold text-gray-900 mt-3">RM {{ number_format($totalCommissionFiltered, 0) }}</p>
        </div>
    </div>

    <!-- Agent Performance 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-chart-bar mr-2 text-blue-600"></i>Agent Performance Ranking
            </h2>
            <p class="text-sm text-gray-600 mt-2">
                Showing all-time performance. "This Month" column reflects {{ \Carbon\Carbon::createFromDate(null, $filterMonth, 1)->format('F Y') }} activity.
            </p>
        </div>
        @if(count($agentStats) == 0)
        <div class="p-12 text-center">
            <i class="fas fa-inbox text-4xl text-gray-300 mb-4 block"></i>
            <p class="text-gray-500 text-lg">No agents found matching your search criteria</p>
        </div>
        @elseif($totalClientsFiltered == 0 && $totalWillsFiltered == 0 && $totalCommissionFiltered == 0)
        <div class="p-12 text-center">
            <i class="fas fa-calendar-times text-4xl text-gray-300 mb-4 block"></i>
            <p class="text-gray-500 text-lg">No activity in {{ \Carbon\Carbon::createFromDate(null, $filterMonth, 1)->format('F Y') }}</p>
            <p class="text-gray-400 text-sm mt-2">Showing all-time agent statistics. Switch to a different month to see activity.</p>
        </div>
        @else
        <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">Rank</th>
                        <th class="px-6 py-4 text-left font-semibold">Agent Name</th>
                        <th class="px-6 py-4 text-center font-semibold">Total Clients</th>
                        <th class="px-6 py-4 text-center font-semibold">Total Wills</th>
                        <th class="px-6 py-4 text-right font-semibold">Total Commission</th>
                        <th class="px-6 py-4 text-center font-semibold">This Month</th>
                        <th class="px-6 py-4 text-center font-semibold">This Month Comm.</th>
                        <th class="px-6 py-4 text-center font-semibold">Action</th>
                    </tr>
                </thead>
                <tbody class="divide-y">
                    @forelse($agentStats as $index => $stat)
                    <tr class="hover:bg-gray-50 transition-colors">
                        <td class="px-6 py-4 font-bold text-gray-900">
                            @if($index == 0)
                                <span class="inline-block w-8 h-8 bg-yellow-400 text-white rounded-full text-center leading-8 text-sm font-bold">🏆</span>
                            @elseif($index == 1)
                                <span class="inline-block w-8 h-8 bg-gray-400 text-white rounded-full text-center leading-8 text-sm font-bold">🥈</span>
                            @elseif($index == 2)
                                <span class="inline-block w-8 h-8 bg-orange-400 text-white rounded-full text-center leading-8 text-sm font-bold">🥉</span>
                            @else
                                <span class="text-lg">{{ $index + 1 }}</span>
                            @endif
                        </td>
                        <td class="px-6 py-4 font-medium text-gray-900">{{ $stat['agent']->name }}</td>
                        <td class="px-6 py-4 text-center text-gray-700">
                            <span class="inline-block px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-sm font-semibold">
                                {{ $stat['total_clients'] }}
                            </span>
                        </td>
                        <td class="px-6 py-4 text-center text-gray-700">
                            <span class="inline-block px-3 py-1 bg-green-100 text-green-800 rounded-full text-sm font-semibold">
                                {{ $stat['total_wills'] }}
                            </span>
                        </td>
                        <td class="px-6 py-4 text-right font-bold text-amber-600">RM {{ number_format($stat['total_commission'], 2) }}</td>
                        <td class="px-6 py-4 text-center">
                            <span class="inline-block px-3 py-1 {{ $stat['total_referrals_this_month'] > 0 ? 'bg-indigo-100 text-indigo-800' : 'bg-gray-100 text-gray-500' }} rounded-full text-sm font-semibold">
                                {{ $stat['total_referrals_this_month'] }}
                            </span>
                        </td>
                        <td class="px-6 py-4 text-center font-semibold {{ $stat['commission_this_month'] > 0 ? 'text-purple-600' : 'text-gray-400' }}">
                            RM {{ number_format($stat['commission_this_month'], 2) }}
                        </td>
                        <td class="px-6 py-4 text-center">
                            <a href="{{ route('admin.agent-performance.detail', $stat['agent']->id) }}" class="px-3 py-2 bg-blue-600 text-white rounded text-xs hover:bg-blue-700 transition-colors">
                                <i class="fas fa-chart-line mr-1"></i>View Details
                            </a>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="8" 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 agents found</span>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </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