@extends('layouts.portal')

@section('title', 'My Performance')
@section('page_title', 'Performance Dashboard')
@section('page_subtitle', 'Track your monthly performance and rankings')

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

@section('content')
    <div class="max-w-7xl mx-auto">
        <!-- Header Stats -->
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
            <div class="bg-white rounded-xl shadow-sm p-6 border-l-4 border-blue-400">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-sm text-gray-500 mb-1">This Month's Referrals</p>
                        <h3 class="text-2xl font-bold text-blue-600">{{ array_sum($monthlyStats['referrals']) }}</h3>
                    </div>
                    <div class="w-12 h-12 rounded-lg bg-blue-100 flex items-center justify-center">
                        <i class="fas fa-users text-blue-600 text-xl"></i>
                    </div>
                </div>
            </div>
            
            <div class="bg-white rounded-xl shadow-sm p-6 border-l-4 border-green-400">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-sm text-gray-500 mb-1">This Month's Commission</p>
                        <h3 class="text-2xl font-bold text-green-600">${{ number_format(array_sum($monthlyStats['commissions']), 2) }}</h3>
                    </div>
                    <div class="w-12 h-12 rounded-lg bg-green-100 flex items-center justify-center">
                        <i class="fas fa-dollar-sign text-green-600 text-xl"></i>
                    </div>
                </div>
            </div>
            
            <div class="bg-white rounded-xl shadow-sm p-6 border-l-4 border-purple-400">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-sm text-gray-500 mb-1">Top Performer Rank</p>
                        <h3 class="text-2xl font-bold text-purple-600">
                            @php
                                $myRank = collect($topPerformers)->search(fn($p) => $p['name'] === Auth::user()->name);
                                echo $myRank !== false ? '#' . ($myRank + 1) : 'N/A';
                            @endphp
                        </h3>
                    </div>
                    <div class="w-12 h-12 rounded-lg bg-purple-100 flex items-center justify-center">
                        <i class="fas fa-trophy text-purple-600 text-xl"></i>
                    </div>
                </div>
            </div>
        </div>

        <!-- Charts Section -->
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
            <!-- Monthly Referrals Chart -->
            <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
                <h3 class="text-lg font-semibold text-gray-900 mb-4">
                    <i class="fas fa-chart-bar text-blue-500 mr-2"></i>Monthly Referrals
                </h3>
                <div class="h-64">
                    <canvas id="referralsChart"></canvas>
                </div>
            </div>

            <!-- Monthly Commissions Chart -->
            <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
                <h3 class="text-lg font-semibold text-gray-900 mb-4">
                    <i class="fas fa-chart-line text-green-500 mr-2"></i>Monthly Commissions
                </h3>
                <div class="h-64">
                    <canvas id="commissionsChart"></canvas>
                </div>
            </div>
        </div>

        <!-- Top Performers -->
        <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">
                    <i class="fas fa-trophy text-yellow-500 mr-2"></i>Top Performers This Month
                </h3>
            </div>
            <div class="p-6">
                @if(count($topPerformers) > 0)
                    <div class="space-y-4">
                        @foreach($topPerformers as $index => $performer)
                            <div class="flex items-center justify-between p-4 bg-gray-50 rounded-lg @if($performer['name'] === Auth::user()->name) ring-2 ring-blue-500 @endif">
                                <div class="flex items-center gap-4">
                                    <div class="w-10 h-10 rounded-full flex items-center justify-center font-bold text-white
                                        @if($index === 0) bg-yellow-500
                                        @elseif($index === 1) bg-gray-400
                                        @elseif($index === 2) bg-orange-500
                                        @else bg-blue-500 @endif">
                                        {{ $index + 1 }}
                                    </div>
                                    <div>
                                        <p class="font-medium text-gray-900">{{ $performer['name'] }}</p>
                                        @if($performer['name'] === Auth::user()->name)
                                            <span class="text-xs text-blue-600 font-medium">You</span>
                                        @endif
                                    </div>
                                </div>
                                <div class="text-right">
                                    <p class="text-sm text-gray-600">{{ $performer['referrals'] }} referrals</p>
                                    <p class="font-semibold text-green-600">${{ number_format($performer['commission'], 2) }}</p>
                                </div>
                            </div>
                        @endforeach
                    </div>
                @else
                    <p class="text-gray-500 text-center py-8">No performance data available yet</p>
                @endif
            </div>
        </div>
    </div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    // Referrals Chart
    const referralsCtx = document.getElementById('referralsChart').getContext('2d');
    new Chart(referralsCtx, {
        type: 'bar',
        data: {
            labels: @json($monthlyStats['months']),
            datasets: [{
                label: 'Referrals',
                data: @json($monthlyStats['referrals']),
                backgroundColor: 'rgba(59, 130, 246, 0.5)',
                borderColor: 'rgba(59, 130, 246, 1)',
                borderWidth: 1
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            scales: {
                y: {
                    beginAtZero: true,
                    ticks: {
                        stepSize: 1
                    }
                }
            }
        }
    });

    // Commissions Chart
    const commissionsCtx = document.getElementById('commissionsChart').getContext('2d');
    new Chart(commissionsCtx, {
        type: 'line',
        data: {
            labels: @json($monthlyStats['months']),
            datasets: [{
                label: 'Commissions ($)',
                data: @json($monthlyStats['commissions']),
                backgroundColor: 'rgba(34, 197, 94, 0.1)',
                borderColor: 'rgba(34, 197, 94, 1)',
                borderWidth: 2,
                fill: true,
                tension: 0.4
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }
    });
</script>
@endpush