@extends('layouts.portal')

@section('title', 'Agent Referrals')
@section('page_title', 'My Referrals')
@section('page_subtitle', 'Manage your referred clients')

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

@section('content')
<div class="max-w-7xl mx-auto">
    <!-- Header -->
    <div class="mb-8">
        <div class="flex items-center justify-between">
            <div>
                <h1 class="text-3xl font-bold text-gray-800">My Referrals</h1>
                <p class="text-gray-500 mt-1">View and manage clients you have referred</p>
            </div>
            <a href="{{ route('agent.onboard.client') }}" class="octowill-btn px-6 py-3 rounded-lg text-white hover:shadow-lg transition-all">
                <i class="fas fa-user-plus mr-2"></i>Refer New Client
            </a>
        </div>
    </div>

    <!-- Stats Cards -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
        <div class="stats-card modern-card p-6">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm text-gray-500 mb-1">Total Referrals</p>
                    <p class="text-2xl font-bold text-gray-800">{{ $stats['total_referrals'] }}</p>
                </div>
                <div class="w-16 h-16 rounded-2xl bg-gradient-to-br from-blue-500 to-blue-600 flex items-center justify-center">
                    <i class="fas fa-users text-white text-2xl"></i>
                </div>
            </div>
        </div>
        
        <div class="stats-card modern-card p-6">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm text-gray-500 mb-1">This Month</p>
                    <p class="text-2xl font-bold text-gray-800">{{ $stats['this_month'] }}</p>
                </div>
                <div class="w-16 h-16 rounded-2xl bg-gradient-to-br from-green-500 to-green-600 flex items-center justify-center">
                    <i class="fas fa-calendar text-white text-2xl"></i>
                </div>
            </div>
        </div>
        
        <div class="stats-card modern-card p-6">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm text-gray-500 mb-1">Total Commission</p>
                    <p class="text-2xl font-bold text-gray-800">${{ number_format($stats['total_commission'], 2) }}</p>
                </div>
                <div class="w-16 h-16 rounded-2xl bg-gradient-to-br from-purple-500 to-purple-600 flex items-center justify-center">
                    <i class="fas fa-dollar-sign text-white text-2xl"></i>
                </div>
            </div>
        </div>
    </div>

    <!-- Unfinished onboarding drafts -->
    @if(!empty($draftClients) && $draftClients->count())
    <div class="modern-card p-0 mb-8 overflow-hidden border border-amber-200">
        <div class="bg-gradient-to-r from-amber-500 to-orange-500 px-6 py-4 flex items-center">
            <i class="fas fa-hourglass-half text-white text-lg mr-3"></i>
            <div>
                <h3 class="text-lg font-bold text-white">Unfinished Onboarding</h3>
                <p class="text-amber-50 text-sm">Resume a client you started but haven't completed</p>
            </div>
        </div>
        <div class="divide-y divide-gray-100">
            @foreach($draftClients as $draft)
            <div class="flex items-center justify-between px-6 py-4">
                <div>
                    <p class="font-semibold text-gray-800">{{ $draft->first_name ?: 'Unnamed client' }}</p>
                    <p class="text-sm text-gray-500">IC: {{ $draft->ic_number ?: '—' }} · Started {{ $draft->created_at?->diffForHumans() }}</p>
                </div>
                <div class="flex items-center gap-3">
                    <a href="{{ route('agent.clients.create', ['resume' => $draft->id]) }}"
                       class="px-4 py-2 bg-amber-600 hover:bg-amber-700 text-white rounded-lg text-sm font-medium">
                        <i class="fas fa-play mr-1"></i> Continue
                    </a>
                    <form action="{{ route('agent.clients.discard-draft', $draft) }}" method="POST"
                          onsubmit="return confirm('Discard this unfinished client and all data entered so far?');">
                        @csrf
                        <button type="submit" class="px-4 py-2 border border-gray-300 text-gray-600 hover:bg-gray-50 rounded-lg text-sm font-medium">
                            <i class="fas fa-trash mr-1"></i> Discard
                        </button>
                    </form>
                </div>
            </div>
            @endforeach
        </div>
    </div>
    @endif

    <!-- Clients Table -->
    <div class="modern-card p-6">
        <div class="flex items-center justify-between mb-6">
            <h2 class="text-xl font-semibold text-gray-800">Referred Clients</h2>
            <div class="flex items-center space-x-4">
                <!-- Search -->
                <div class="relative">
                    <input type="text" placeholder="Search clients..." class="input-modern pl-10 pr-4 py-2 w-64">
                    <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
                </div>
                
                <!-- Filter -->
                <select class="input-modern px-4 py-2">
                    <option value="">All Status</option>
                    <option value="pending">Pending</option>
                    <option value="active">Active</option>
                    <option value="completed">Completed</option>
                </select>
            </div>
        </div>

        <!-- Table -->
        <div class="overflow-x-auto">
            <table class="w-full">
                <thead>
                    <tr class="border-b border-gray-200">
                        <th class="text-left py-3 px-4 text-sm font-medium text-gray-700">Client</th>
                        <th class="text-left py-3 px-4 text-sm font-medium text-gray-700">Contact</th>
                        <th class="text-left py-3 px-4 text-sm font-medium text-gray-700">Package</th>
                        <th class="text-left py-3 px-4 text-sm font-medium text-gray-700">Status</th>
                        <th class="text-left py-3 px-4 text-sm font-medium text-gray-700">Date</th>
                        <th class="text-left py-3 px-4 text-sm font-medium text-gray-700">Commission</th>
                        <th class="text-center py-3 px-4 text-sm font-medium text-gray-700">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($clients as $client)
                        <tr class="border-b border-gray-100 hover:bg-gray-50">
                            <td class="py-4 px-4">
                                <div class="flex items-center">
                                    <div class="w-10 h-10 rounded-full bg-gradient-to-br from-red-500 to-red-600 flex items-center justify-center text-white font-bold mr-3">
                                        {{ substr($client->first_name, 0, 1) }}
                                    </div>
                                    <div>
                                        <p class="font-medium text-gray-800">{{ $client->full_name }}</p>
                                        <p class="text-sm text-gray-500">ID: #{{ $client->id }}</p>
                                    </div>
                                </div>
                            </td>
                            <td class="py-4 px-4">
                                <div class="text-sm">
                                    <p class="text-gray-800">{{ $client->email }}</p>
                                    <p class="text-gray-500">{{ $client->phone }}</p>
                                </div>
                            </td>
                            <td class="py-4 px-4">
                                <span class="badge-modern bg-purple-100 text-purple-800">
                                    {{ ucfirst($client->account_type) }}
                                </span>
                            </td>
                            <td class="py-4 px-4">
                                <span class="badge-modern
                                    @if($client->status == 'active') bg-green-100 text-green-800
                                    @elseif($client->status == 'pending') bg-yellow-100 text-yellow-800
                                    @else bg-gray-100 text-gray-800
                                    @endif">
                                    {{ ucfirst($client->status) }}
                                </span>
                            </td>
                            <td class="py-4 px-4">
                                <p class="text-sm text-gray-800">{{ $client->created_at->format('M d, Y') }}</p>
                            </td>
                            <td class="py-4 px-4">
                                <div class="text-sm">
                                    @php
                                        // Calculate commission earned from this client
                                        $commission = \App\Models\Commission::where('client_id', $client->id)->sum('amount');
                                    @endphp
                                    <p class="font-medium text-gray-800">${{ number_format($commission, 2) }}</p>
                                    <p class="text-green-600 text-xs">earned</p>
                                </div>
                            </td>
                            <td class="py-4 px-4">
                                <div class="flex items-center justify-center space-x-2">
                                    <a href="{{ route('agent.clients.show', $client) }}" class="text-blue-600 hover:text-blue-800 transition-colors">
                                        <i class="fas fa-eye"></i>
                                    </a>
                                    @if($client->status == 'pending')
                                        <a href="{{ route('agent.clients.complete', $client) }}" class="text-green-600 hover:text-green-800 transition-colors" title="Complete Profile">
                                            <i class="fas fa-edit"></i>
                                        </a>
                                    @endif
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="7" class="py-8 text-center text-gray-500">
                                <div class="mb-4">
                                    <i class="fas fa-users text-4xl text-gray-300"></i>
                                </div>
                                <p class="text-lg font-medium mb-2">No referrals yet</p>
                                <p class="text-sm mb-4">Start referring clients to see them here</p>
                                <a href="{{ route('agent.onboard.client') }}" class="octowill-btn px-6 py-3 rounded-lg text-white hover:shadow-lg transition-all">
                                    <i class="fas fa-user-plus mr-2"></i>Refer Your First Client
                                </a>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        <!-- Pagination -->
        @if($clients->hasPages())
            <div class="mt-6 flex items-center justify-between">
                <p class="text-sm text-gray-500">
                    Showing {{ $clients->firstItem() }} to {{ $clients->lastItem() }} of {{ $clients->total() }} results
                </p>
                {{ $clients->links() }}
            </div>
        @endif
    </div>
</div>
@endsection