@extends('layouts.portal')

@section('title', 'All Clients')
@section('page_title', 'All Clients')
@section('page_subtitle', 'Manage client records')

@section('sidebar')
    <ul class="space-y-1">
        <li>
            <a href="{{ route('admin.dashboard') }}" class="sidebar-item flex items-center p-3 text-gray-300 hover:text-white">
                <i class="fas fa-tachometer-alt w-5 mr-3 text-center"></i>
                <span>Dashboard</span>
            </a>
        </li>
        <li class="pt-4 pb-2">
            <p class="px-3 text-xs font-semibold text-gray-400 uppercase tracking-wider">Client Management</p>
        </li>
        <li>
            <a href="{{ route('admin.clients') }}" class="sidebar-item active flex items-center p-3 text-white">
                <i class="fas fa-users w-5 mr-3 text-center"></i>
                <span>All Clients</span>
            </a>
        </li>
    </ul>
@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">All Clients</h1>
                    <p class="text-gray-500 mt-1">Manage client records and approvals</p>
                </div>
                <a href="{{ route('admin.clients.create') }}" class="octowill-btn px-6 py-3 rounded-lg text-white hover:shadow-lg transition-all">
                    <i class="fas fa-user-plus mr-2" style="color: white !important;"></i>Create New Client
                </a>
            </div>
        </div>

        <!-- Stats Cards -->
        <div class="grid grid-cols-1 md:grid-cols-4 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">Admin Created Client</p>
                        <p class="text-2xl font-bold text-gray-800">{{ $adminCreatedCount }}</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">Agent Referred</p>
                        <p class="text-2xl font-bold text-gray-800">{{ $agentReferredCount }}</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-handshake 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">Lawyer Created</p>
                        <p class="text-2xl font-bold text-gray-800">{{ $lawyerCreatedCount }}</p>
                    </div>
                    <div class="w-16 h-16 rounded-2xl bg-gradient-to-br from-amber-500 to-amber-600 flex items-center justify-center">
                        <i class="fas fa-gavel 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 Clients</p>
                        <p class="text-2xl font-bold text-gray-800">{{ $totalClientCount }}</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-database text-white text-2xl"></i>
                    </div>
                </div>
            </div>
        </div>

        <!-- Search and Filter Section -->
        <div class="modern-card p-6 mb-6">
            <form action="{{ route('admin.clients') }}" method="GET" class="flex flex-wrap items-end gap-4">
                <!-- Search -->
                <div class="flex-1 min-w-[200px]">
                    <label class="block text-sm font-medium text-gray-700 mb-2">Search</label>
                    <div class="relative">
                        <input type="text" name="search" value="{{ request('search') }}" 
                               class="w-full px-4 py-3 pr-10 border-2 border-gray-200 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none"
                               placeholder="Search by name, email, phone, IC...">
                        <i class="fas fa-search absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
                    </div>
                </div>
                
                <!-- Source Filter -->
                <div class="w-48">
                    <label class="block text-sm font-medium text-gray-700 mb-2">Source</label>
                    <select name="source" class="w-full px-4 py-3 border-2 border-gray-200 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none bg-white">
                        <option value="">All Sources</option>
                        <option value="admin" {{ request('source') == 'admin' ? 'selected' : '' }}>Admin Created ({{ $adminCreatedCount }})</option>
                        <option value="agent" {{ request('source') == 'agent' ? 'selected' : '' }}>Agent Referred ({{ $agentReferredCount }})</option>
                        <option value="lawyer" {{ request('source') == 'lawyer' ? 'selected' : '' }}>Lawyer Created ({{ $lawyerCreatedCount }})</option>
                    </select>
                </div>
                
                <!-- Status Filter -->
                <div class="w-40">
                    <label class="block text-sm font-medium text-gray-700 mb-2">Status</label>
                    <select name="status" class="w-full px-4 py-3 border-2 border-gray-200 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none bg-white">
                        <option value="">All Status</option>
                        <option value="active" {{ request('status') == 'active' ? 'selected' : '' }}>Active</option>
                        <option value="inactive" {{ request('status') == 'inactive' ? 'selected' : '' }}>Inactive</option>
                    </select>
                </div>
                
                <!-- Filter Buttons -->
                <div class="flex gap-2">
                    <button type="submit" class="px-6 py-3 bg-blue-600 text-white rounded-xl hover:bg-blue-700 transition-colors font-medium">
                        <i class="fas fa-filter mr-2"></i>Filter
                    </button>
                    <a href="{{ route('admin.clients') }}" class="px-6 py-3 bg-gray-200 text-gray-700 rounded-xl hover:bg-gray-300 transition-colors font-medium">
                        <i class="fas fa-times mr-2"></i>Clear
                    </a>
                </div>
            </form>
            
            <!-- Active Filters Display -->
            @if(request()->hasAny(['search', 'source', 'status']))
            <div class="mt-4 flex flex-wrap gap-2">
                <span class="text-sm text-gray-500">Active filters:</span>
                @if(request('search'))
                    <span class="px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-sm">Search: {{ request('search') }}</span>
                @endif
                @if(request('source'))
                    <span class="px-3 py-1 bg-green-100 text-green-800 rounded-full text-sm">Source: {{ ucfirst(request('source')) }}</span>
                @endif
                @if(request('status'))
                    <span class="px-3 py-1 bg-purple-100 text-purple-800 rounded-full text-sm">Status: {{ ucfirst(request('status')) }}</span>
                @endif
            </div>
            @endif
        </div>

        <!-- All Clients -->
        @if($allClients->count() > 0)
        <div class="modern-card p-6">
            <div class="flex items-center justify-between mb-6">
                <h2 class="text-xl font-semibold text-gray-800">All Clients</h2>
                <span class="badge-modern bg-blue-100 text-blue-800">
                    Showing {{ $allClients->firstItem() ?? 0 }} - {{ $allClients->lastItem() ?? 0 }} of {{ $allClients->total() }} clients
                </span>
            </div>
            
            <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">Referred By</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">Package</th> -->
                            <th class="text-left py-3 px-4 text-sm font-medium text-gray-700">Assigned Staff</th>
                            <th class="text-left py-3 px-4 text-sm font-medium text-gray-700">Date</th>
                            <th class="text-center py-3 px-4 text-sm font-medium text-gray-700">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($allClients 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-blue-500 to-blue-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">
                                <div class="text-sm">
                                    @if($client->referred_by)
                                        @if($client->referredByUser)
                                            <p class="text-gray-800">{{ $client->referredByUser->name }}</p>
                                            <p class="text-gray-500">Agent</p>
                                        @else
                                            <p class="text-gray-800">Unknown Agent</p>
                                            <p class="text-gray-500">ID: {{ $client->referred_by }}</p>
                                        @endif
                                    @else
                                        <p class="text-gray-800">Self</p>
                                        <p class="text-gray-500">Admin Created</p>
                                    @endif
                                </div>
                            </td>
                            <td class="py-4 px-4">
                                <span class="badge-modern
                                    @if($client->status == 'active') bg-green-100 text-green-800
                                    @else bg-gray-100 text-gray-800
                                    @endif">
                                    {{ ucfirst($client->status) }}
                                </span>
                            </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">
                                <div class="text-sm">
                                    @if($client->assignedStaff)
                                        <div class="flex items-center">
                                            <div class="w-6 h-6 rounded-full bg-gradient-to-br from-green-500 to-green-600 flex items-center justify-center text-white text-xs font-bold mr-2">
                                                {{ substr($client->assignedStaff->name, 0, 1) }}
                                            </div>
                                            <div>
                                                <p class="text-gray-800 font-medium">{{ $client->assignedStaff->name }}</p>
                                                <p class="text-gray-500 text-xs">Staff</p>
                                            </div>
                                        </div>
                                    @else
                                        <div class="flex items-center">
                                            <div class="w-6 h-6 rounded-full bg-gray-300 flex items-center justify-center text-white text-xs font-bold mr-2">
                                                <i class="fas fa-user-slash"></i>
                                            </div>
                                            <div>
                                                <p class="text-gray-500 font-medium">Yet to assign</p>
                                                <p class="text-gray-400 text-xs">No staff</p>
                                            </div>
                                        </div>
                                    @endif
                                </div>
                            </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="flex items-center justify-center space-x-2">
                                    <a href="{{ route('admin.clients.show', $client) }}" class="text-blue-600 hover:text-blue-800 transition-colors" title="View Details">
                                        <i class="fas fa-eye"></i>
                                    </a>
                                    
                                    @if($client->status == 'inactive' && $client->referred_by)
                                        <!-- Agent client pending approval -->
                                        <a href="{{ route('admin.clients.edit', $client) }}" class="text-green-600 hover:text-green-800 transition-colors" title="Approve & Edit Client">
                                            <i class="fas fa-check-circle"></i>
                                        </a>
                                        <form method="POST" action="{{ route('admin.clients.disapprove', $client) }}" onsubmit="return confirm('Are you sure you want to disapprove this client?')">
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit" class="text-red-600 hover:text-red-800 transition-colors border-0 bg-transparent" title="Disapprove Client">
                                                <i class="fas fa-times-circle"></i>
                                            </button>
                                        </form>
                                    @elseif($client->status == 'active')
                                        <!-- Approved client - can edit -->
                                        <a href="{{ route('admin.clients.edit', $client) }}" class="text-yellow-600 hover:text-yellow-800 transition-colors" title="Edit Client">
                                            <i class="fas fa-edit"></i>
                                        </a>
                                    @endif
                                </div>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
            
            <!-- Pagination -->
            <div class="mt-6">
                {{ $allClients->links() }}
            </div>
        </div>
        @endif

        <!-- No Clients State -->
        @if($totalClientCount == 0)
        <div class="modern-card p-12 text-center">
            <div class="mb-6">
                <i class="fas fa-users text-6xl text-gray-300"></i>
            </div>
            <h3 class="text-xl font-semibold text-gray-800 mb-2">No clients yet</h3>
            <p class="text-gray-500 mb-6">Start by creating your first client or wait for agent referrals</p>
            <a href="{{ route('admin.clients.create') }}" 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>Create Your First Client
            </a>
        </div>
        @endif
    </div>
@endsection