@extends('layouts.portal')

@section('title', 'All Clients - Staff Portal')

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

@section('content')
<div class="max-w-7xl mx-auto p-6">
    <!-- Header with Purple Gradient -->
    <div class="bg-gradient-to-r from-purple-600 to-indigo-600 rounded-xl shadow-lg p-8 mb-6 text-white">
        <div class="flex items-center justify-between">
            <div>
                <h1 class="text-3xl font-bold mb-2">Client Management</h1>
                <p class="text-purple-100">View and manage all your assigned clients</p>
            </div>
            <a href="{{ route('staff.clients.create') }}" 
               class="bg-white text-purple-600 hover:bg-purple-50 px-6 py-3 rounded-lg font-semibold inline-flex items-center transition-all shadow-md hover:shadow-lg">
                <i class="fas fa-plus mr-2"></i>
                Create New Client
            </a>
        </div>
    </div>

    <!-- Search Bar -->
    <div class="bg-white rounded-xl shadow-lg p-6 mb-6">
        <form action="{{ route('staff.clients.all') }}" method="GET" class="flex items-center gap-4">
            <div class="flex-1">
                <div class="relative">
                    <input type="text" 
                           name="search" 
                           value="{{ request('search') }}" 
                           placeholder="Search by name, email, IC number..."
                           class="w-full px-4 py-3 pl-12 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent">
                    <i class="fas fa-search absolute left-4 top-4 text-gray-400"></i>
                </div>
            </div>
            <button type="submit" 
                    class="px-6 py-3 bg-purple-600 text-white rounded-lg hover:bg-purple-700 font-medium transition-colors">
                <i class="fas fa-search mr-2"></i>Search
            </button>
            @if(request('search'))
            <a href="{{ route('staff.clients.all') }}" 
               class="px-6 py-3 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 font-medium transition-colors">
                Clear
            </a>
            @endif
        </form>
    </div>

    <!-- Stats Cards -->
    <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-6">
        <!-- Total Clients -->
        <div class="bg-gradient-to-br from-blue-500 to-blue-600 rounded-xl shadow-lg p-6 text-white transform hover:scale-105 transition-transform">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm text-blue-100 mb-1">Total Clients</p>
                    <p class="text-3xl font-bold">{{ $clients->total() }}</p>
                </div>
                <div class="bg-white bg-opacity-20 rounded-full p-4">
                    <i class="fas fa-users text-2xl"></i>
                </div>
            </div>
        </div>

        <!-- Active Wills -->
        <div class="bg-gradient-to-br from-green-500 to-green-600 rounded-xl shadow-lg p-6 text-white transform hover:scale-105 transition-transform">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm text-green-100 mb-1">Active Wills</p>
                    <p class="text-3xl font-bold">{{ $clients->sum(function($client) { return $client->wills->count(); }) }}</p>
                </div>
                <div class="bg-white bg-opacity-20 rounded-full p-4">
                    <i class="fas fa-file-contract text-2xl"></i>
                </div>
            </div>
        </div>

        <!-- Pending Review -->
        <div class="bg-gradient-to-br from-yellow-500 to-orange-500 rounded-xl shadow-lg p-6 text-white transform hover:scale-105 transition-transform">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm text-yellow-100 mb-1">Pending Review</p>
                    <p class="text-3xl font-bold">{{ $clients->where('status', 'pending')->count() }}</p>
                </div>
                <div class="bg-white bg-opacity-20 rounded-full p-4">
                    <i class="fas fa-clock text-2xl"></i>
                </div>
            </div>
        </div>

        <!-- Completed -->
        <div class="bg-gradient-to-br from-purple-500 to-purple-600 rounded-xl shadow-lg p-6 text-white transform hover:scale-105 transition-transform">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm text-purple-100 mb-1">Completed</p>
                    <p class="text-3xl font-bold">{{ $clients->where('status', 'active')->count() }}</p>
                </div>
                <div class="bg-white bg-opacity-20 rounded-full p-4">
                    <i class="fas fa-check-circle text-2xl"></i>
                </div>
            </div>
        </div>
    </div>

    <!-- Clients Directory -->
    <div class="bg-white rounded-xl shadow-lg overflow-hidden">
        <div class="px-6 py-4 border-b border-gray-200 bg-gradient-to-r from-purple-50 to-indigo-50">
            <div class="flex items-center justify-between">
                <h3 class="text-xl font-bold text-gray-900">
                    <i class="fas fa-address-book text-purple-600 mr-2"></i>
                    Clients Directory
                </h3>
                <span class="text-sm text-gray-600">
                    Showing {{ $clients->firstItem() ?? 0 }} - {{ $clients->lastItem() ?? 0 }} of {{ $clients->total() }} clients
                </span>
            </div>
        </div>

        @if($clients->count() > 0)
        <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200">
                <thead class="bg-gray-50">
                    <tr>
                        <th class="px-6 py-4 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
                            Client Information
                        </th>
                        <th class="px-6 py-4 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
                            Contact Details
                        </th>
                        <th class="px-6 py-4 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
                            Wills
                        </th>
                        <th class="px-6 py-4 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
                            Assets
                        </th>
                        <th class="px-6 py-4 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
                            Family
                        </th>
                        <th class="px-6 py-4 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
                            Status
                        </th>
                        <th class="px-6 py-4 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
                            Actions
                        </th>
                    </tr>
                </thead>
                <tbody class="bg-white divide-y divide-gray-200">
                    @foreach($clients as $client)
                    <tr class="hover:bg-purple-50 transition-colors">
                        <td class="px-6 py-4">
                            <div class="flex items-center">
                                <div class="flex-shrink-0 h-12 w-12">
                                    <div class="h-12 w-12 rounded-full bg-gradient-to-br from-purple-400 to-indigo-500 flex items-center justify-center shadow-md">
                                        <span class="text-white font-bold text-lg">
                                            {{ substr($client->first_name, 0, 1) }}{{ substr($client->last_name, 0, 1) }}
                                        </span>
                                    </div>
                                </div>
                                <div class="ml-4">
                                    <div class="text-sm font-semibold text-gray-900">
                                        {{ $client->full_name }}
                                    </div>
                                    <div class="text-xs text-gray-500 mt-1">
                                        <i class="fas fa-id-card mr-1"></i>IC: {{ $client->ic_number }}
                                    </div>
                                </div>
                            </div>
                        </td>
                        <td class="px-6 py-4">
                            <div class="text-sm text-gray-900">
                                <i class="fas fa-envelope text-purple-600 mr-2"></i>{{ $client->email ?? 'N/A' }}
                            </div>
                            <div class="text-sm text-gray-500 mt-1">
                                <i class="fas fa-phone text-purple-600 mr-2"></i>{{ $client->phone ?? 'N/A' }}
                            </div>
                        </td>
                        <td class="px-6 py-4">
                            <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold bg-green-100 text-green-800">
                                <i class="fas fa-file-contract mr-1"></i>
                                {{ $client->wills->count() }} Will(s)
                            </span>
                        </td>
                        <td class="px-6 py-4">
                            <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold bg-purple-100 text-purple-800">
                                <i class="fas fa-building mr-1"></i>
                                {{ $client->assets->count() }} Asset(s)
                            </span>
                        </td>
                        <td class="px-6 py-4">
                            <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold bg-blue-100 text-blue-800">
                                <i class="fas fa-user-friends mr-1"></i>
                                {{ $client->familyMembers->count() }} Member(s)
                            </span>
                        </td>
                        <td class="px-6 py-4">
                            @if($client->status === 'active')
                                <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold bg-green-100 text-green-800">
                                    <i class="fas fa-check-circle mr-1"></i>Active
                                </span>
                            @elseif($client->status === 'pending')
                                <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold bg-yellow-100 text-yellow-800">
                                    <i class="fas fa-clock mr-1"></i>Pending
                                </span>
                            @else
                                <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold bg-gray-100 text-gray-800">
                                    {{ ucfirst($client->status) }}
                                </span>
                            @endif
                        </td>
                        <td class="px-6 py-4">
                            <div class="flex items-center space-x-3">
                                <a href="{{ route('staff.clients.show', $client) }}" 
                                   class="text-blue-600 hover:text-blue-800 transition-colors" 
                                   title="View Details">
                                    <i class="fas fa-eye text-lg"></i>
                                </a>
                                <a href="{{ route('staff.clients.detail', $client) }}" 
                                   class="text-green-600 hover:text-green-800 transition-colors" 
                                   title="Edit Client">
                                    <i class="fas fa-edit text-lg"></i>
                                </a>
                                @if($client->wills->count() === 0)
                                <a href="{{ route('staff.wills.type', $client) }}" 
                                   class="text-purple-600 hover:text-purple-800 transition-colors" 
                                   title="Create Will">
                                    <i class="fas fa-file-contract text-lg"></i>
                                </a>
                                @else
                                <a href="{{ route('staff.wills.preview', $client->wills->first()) }}" 
                                   class="text-indigo-600 hover:text-indigo-800 transition-colors" 
                                   title="View Will">
                                    <i class="fas fa-file-pdf text-lg"></i>
                                </a>
                                @endif
                            </div>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>

        <!-- Pagination -->
        @if($clients->hasPages())
        <div class="bg-gray-50 px-6 py-4 border-t border-gray-200">
            {{ $clients->links() }}
        </div>
        @endif
        @else
        <div class="px-6 py-16 text-center">
            <div class="inline-block p-8 bg-purple-50 rounded-full mb-4">
                <i class="fas fa-users text-purple-300 text-6xl"></i>
            </div>
            <h3 class="text-xl font-semibold text-gray-900 mb-2">No Clients Found</h3>
            <p class="text-gray-500 mb-6">
                @if(request('search'))
                    No clients match your search criteria. Try different keywords.
                @else
                    You don't have any assigned clients yet. Get started by creating your first client.
                @endif
            </p>
            <a href="{{ route('staff.clients.create') }}" 
               class="inline-flex items-center px-6 py-3 bg-gradient-to-r from-purple-600 to-indigo-600 text-white rounded-lg hover:from-purple-700 hover:to-indigo-700 font-semibold transition-all shadow-lg hover:shadow-xl">
                <i class="fas fa-plus mr-2"></i>
                Create Your First Client
            </a>
        </div>
        @endif
    </div>
</div>
@endsection