@extends('layouts.portal')

@section('title', 'Agent Reports')
@section('page_title', 'Agent Reports')
@section('page_subtitle', 'Agent performance, client referrals, and commission details')

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

@section('content')
<div class="max-w-6xl mx-auto">
    <!-- Welcome Banner -->
    <div class="bg-gradient-to-r from-red-900 via-red-800 to-red-900 rounded-xl p-8 text-white mb-4 shadow-xl animate-fade-in-up relative overflow-hidden min-h-[120px]">
        <div class="absolute top-0 right-0 w-64 h-64 bg-white/10 rounded-full -mr-32 -mt-32"></div>
        <div class="absolute bottom-0 left-0 w-32 h-32 bg-white/10 rounded-full -ml-16 -mb-16"></div>
        
        <div class="relative z-10 flex items-center justify-between">
            <div>
                <h2 class="text-xl font-bold mb-2">Agent Reports</h2>
                <p class="text-red-100 text-sm mb-3">Agent performance, client referrals, and commission details</p>
                <div class="flex items-center space-x-3">
                    <span class="inline-flex items-center px-3 py-2 rounded-full text-xs font-medium bg-white/20 backdrop-blur-sm">
                        <i class="fas fa-users mr-2"></i>
                        {{ $stats['total_agents'] }} Total Agents
                    </span>
                    <span class="inline-flex items-center px-3 py-2 rounded-full text-xs font-medium bg-green-400/30 backdrop-blur-sm">
                        <i class="fas fa-circle text-green-300 mr-2 text-xs"></i>
                        System Online
                    </span>
                </div>
            </div>
            <div class="hidden md:block">
                <div class="w-16 h-16 bg-white/20 backdrop-blur-sm rounded-xl flex items-center justify-center">
                    <i class="fas fa-chart-line text-2xl"></i>
                </div>
            </div>
        </div>
    </div>

    <div class="grid grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
        <div class="bg-blue-600 text-white rounded-lg p-4 shadow-md">
            <div class="text-center">
                <h5 class="text-2xl font-bold">{{ $stats['total_agents'] }}</h5>
                <small class="text-sm">Total Agents</small>
            </div>
        </div>
        <div class="bg-green-600 text-white rounded-lg p-4 shadow-md">
            <div class="text-center">
                <h5 class="text-2xl font-bold">{{ $stats['active_agents'] }}</h5>
                <small class="text-sm">Active Agents</small>
            </div>
        </div>
        <div class="bg-cyan-500 text-white rounded-lg p-4 shadow-md">
            <div class="text-center">
                <h5 class="text-2xl font-bold">{{ $stats['total_clients_referred'] }}</h5>
                <small class="text-sm">Clients Referred</small>
            </div>
        </div>
        <div class="bg-yellow-500 text-white rounded-lg p-4 shadow-md">
            <div class="text-center">
                <h5 class="text-2xl font-bold">RM {{ number_format($stats['total_commission_amount'], 0) }}</h5>
                <small class="text-sm">Total Commissions</small>
            </div>
        </div>
    </div>

    <!-- Filters -->
    <div class="bg-white rounded-lg shadow-md mb-6 p-6">
        <h5 class="text-lg font-semibold text-gray-700 mb-4">Filters</h5>
        <form method="GET" action="{{ route('admin.reports.enhanced.agents') }}">
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-4">
                <div>
                    <label for="agent_id" class="block text-sm font-semibold text-gray-700 mb-2">Agent</label>
                    <select class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-red-500 text-sm" id="agent_id" name="agent_id">
                        <option value="">All Agents</option>
                        @foreach($allAgents as $agent)
                        <option value="{{ $agent->id }}" {{ ($filters['agent_id'] ?? '') == $agent->id ? 'selected' : '' }}>
                            {{ $agent->first_name }} {{ $agent->last_name }}
                        </option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label for="start_date" class="block text-sm font-semibold text-gray-700 mb-2">Start Date</label>
                    <x-date-picker
                    name="start_date"
                    value="{{ $filters["
                    class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-red-500 text-sm"
                />
                </div>
                <div>
                    <label for="end_date" class="block text-sm font-semibold text-gray-700 mb-2">End Date</label>
                    <x-date-picker
                    name="end_date"
                    value="{{ $filters["
                    class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-red-500 text-sm"
                />
                </div>
                <div class="flex items-end">
                    <div class="flex space-x-2">
                        <button type="submit" class="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors duration-200 text-sm">
                            Apply Filters
                        </button>
                        <a href="{{ route('admin.reports.enhanced.agents') }}" class="px-4 py-2 bg-gray-600 text-white rounded-lg hover:bg-gray-700 transition-colors duration-200 text-sm">
                            Clear
                        </a>
                        <button type="button" class="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors duration-200 text-sm" onclick="exportAgents()">
                            <i class="fas fa-download mr-2"></i> Export Excel
                        </button>
                    </div>
                </div>
            </div>
        </form>
    </div>

    <!-- Agents Table -->
    <div class="bg-white rounded-lg shadow-md overflow-hidden mb-6">
        <div class="bg-gradient-to-r from-red-800 to-red-900 text-white p-4">
            <h3 class="text-lg font-semibold">Agent Details</h3>
        </div>
        <div class="p-6">
            <div class="overflow-x-auto">
                <table class="w-full">
                    <thead>
                        <tr class="border-b border-gray-200">
                            <th class="py-3 px-4 text-left text-sm font-semibold text-gray-700">ID</th>
                            <th class="py-3 px-4 text-left text-sm font-semibold text-gray-700">Name</th>
                            <th class="py-3 px-4 text-left text-sm font-semibold text-gray-700">Email</th>
                            <th class="py-3 px-4 text-left text-sm font-semibold text-gray-700">Phone</th>
                            <th class="py-3 px-4 text-left text-sm font-semibold text-gray-700">Status</th>
                            <th class="py-3 px-4 text-left text-sm font-semibold text-gray-700">Referral Code</th>
                            <th class="py-3 px-4 text-left text-sm font-semibold text-gray-700">Clients Referred</th>
                            <th class="py-3 px-4 text-left text-sm font-semibold text-gray-700">Active Clients</th>
                            <th class="py-3 px-4 text-left text-sm font-semibold text-gray-700">Completed Wills</th>
                            <th class="py-3 px-4 text-left text-sm font-semibold text-gray-700">Commissions</th>
                            <th class="py-3 px-4 text-left text-sm font-semibold text-gray-700">Paid Amount</th>
                            <th class="py-3 px-4 text-left text-sm font-semibold text-gray-700">Pending Amount</th>
                            <th class="py-3 px-4 text-left text-sm font-semibold text-gray-700">Join Date</th>
                            <th class="py-3 px-4 text-left text-sm font-semibold text-gray-700">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($agents as $agent)
                        <tr class="border-b border-gray-100 hover:bg-gray-50">
                            <td class="py-3 px-4 text-sm">{{ $agent->id }}</td>
                            <td class="py-3 px-4 text-sm">
                                <strong>{{ $agent->first_name }} {{ $agent->last_name }}</strong><br>
                                @if($agent->address)
                                    <small class="text-gray-500">{{ Str::limit($agent->address, 50) }}</small>
                                @endif
                            </td>
                            <td class="py-3 px-4 text-sm">{{ $agent->email }}</td>
                            <td class="py-3 px-4 text-sm">{{ $agent->phone ?? 'N/A' }}</td>
                            <td class="py-3 px-4 text-sm">
                                <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium {{ $agent->status == 'active' ? 'bg-green-100 text-green-800' : 'bg-yellow-100 text-yellow-800' }}">
                                    {{ ucfirst($agent->status) }}
                                </span>
                            </td>
                            <td class="py-3 px-4 text-sm">
                                <code class="bg-gray-100 px-2 py-1 rounded text-xs">{{ $agent->referral_code ?? 'N/A' }}</code>
                            </td>
                            <td class="py-3 px-4 text-sm">
                                <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-800">{{ $agent->clients()->whereNotNull('referred_by')->count() }}</span>
                            </td>
                            <td class="py-3 px-4 text-sm">
                                <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800">{{ $agent->clients()->where('status', 'active')->count() }}</span>
                            </td>
                            <td class="py-3 px-4 text-sm">
                                <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-cyan-100 text-cyan-800">{{ $agent->clients()->whereHas('wills', function($q) { $q->where('status', 'completed'); })->count() }}</span>
                            </td>
                            <td class="py-3 px-4 text-sm">
                                <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">{{ $agent->commissions()->count() }}</span>
                            </td>
                            <td class="py-3 px-4 text-sm">
                                <strong>RM {{ number_format($agent->commissions()->where('status', 'paid')->sum('amount'), 0) }}</strong>
                            </td>
                            <td class="py-3 px-4 text-sm">
                                <span class="text-yellow-600 font-semibold">RM {{ number_format($agent->commissions()->where('status', 'pending')->sum('amount'), 0) }}</span>
                            </td>
                            <td class="py-3 px-4 text-sm">{{ $agent->created_at->format('M d, Y') }}</td>
                            <td class="py-3 px-4 text-sm">
                                <span class="text-gray-500">N/A</span>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
            
            <!-- Pagination -->
            <div class="flex items-center justify-between mt-4">
                <div class="text-sm text-gray-700">
                    Showing {{ $agents->firstItem() }} to {{ $agents->lastItem() }} of {{ $agents->total() }} entries
                </div>
                {{ $agents->links() }}
            </div>
        </div>
    </div>

    <!-- Top Performers -->
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        <div class="bg-white rounded-lg shadow-md overflow-hidden">
            <div class="bg-gradient-to-r from-blue-600 to-blue-700 text-white p-4">
                <h3 class="text-lg font-semibold">Top Agents by Client Referrals</h3>
            </div>
            <div class="p-4">
                @php
                    $topReferrers = $allAgents->map(function($agent) {
                        return [
                            'agent' => $agent,
                            'referral_count' => $agent->clients()->whereNotNull('referred_by')->count()
                        ];
                    })->sortByDesc('referral_count')->take(5);
                @endphp
                <div class="space-y-3">
                    @foreach($topReferrers as $item)
                    <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                        <div>
                            <h6 class="font-semibold text-gray-800 mb-1">{{ $item['agent']->first_name }} {{ $item['agent']->last_name }}</h6>
                            <small class="text-gray-500">{{ $item['agent']->email }}</small>
                        </div>
                        <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-800">{{ $item['referral_count'] }} clients</span>
                    </div>
                    @endforeach
                </div>
            </div>
        </div>
        
        <div class="bg-white rounded-lg shadow-md overflow-hidden">
            <div class="bg-gradient-to-r from-green-600 to-green-700 text-white p-4">
                <h3 class="text-lg font-semibold">Top Agents by Commissions</h3>
            </div>
            <div class="p-4">
                @php
                    $topCommissionAgents = $allAgents->map(function($agent) {
                        return [
                            'agent' => $agent,
                            'commission_amount' => $agent->commissions()->sum('amount')
                        ];
                    })->sortByDesc('commission_amount')->take(5);
                @endphp
                <div class="space-y-3">
                    @foreach($topCommissionAgents as $item)
                    <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                        <div>
                            <h6 class="font-semibold text-gray-800 mb-1">{{ $item['agent']->first_name }} {{ $item['agent']->last_name }}</h6>
                            <small class="text-gray-500">{{ $item['agent']->email }}</small>
                        </div>
                        <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800">RM {{ number_format($item['commission_amount'], 0) }}</span>
                    </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
<script>
    function exportAgents() {
        const form = document.createElement('form');
        form.method = 'POST';
        form.action = '{{ route('admin.reports.enhanced.export.agents') }}';
        
        // Add CSRF token
        const csrf = document.createElement('input');
        csrf.type = 'hidden';
        csrf.name = '_token';
        csrf.value = '{{ csrf_token() }}';
        form.appendChild(csrf);
        
        // Add filters
        const filters = ['agent_id', 'start_date', 'end_date'];
        filters.forEach(filter => {
            const element = document.getElementById(filter);
            if (element && element.value) {
                const input = document.createElement('input');
                input.type = 'hidden';
                input.name = filter;
                input.value = element.value;
                form.appendChild(input);
            }
        });
        
        document.body.appendChild(form);
        form.submit();
        document.body.removeChild(form);
    }
</script>
@endpush