@extends('layouts.portal')

@section('title', 'Client Tracking')
@section('page_title', 'Client Tracking')
@section('page_subtitle', 'Monitor client onboarding, wills, trusts, and estate management')

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

@section('content')
<div class="modern-card p-6 mb-6">
    <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
        <div>
            <h2 class="text-2xl font-bold text-gray-900 mb-1">Client Tracking</h2>
            <p class="text-gray-600">Monitor client onboarding, wills, trusts, and estate management</p>
        </div>
        
        <div class="flex flex-col sm:flex-row gap-3">
            <div class="relative">
                <input type="text" 
                       placeholder="Search by name or email..." 
                       class="input-modern w-full sm:w-64 pl-10"
                       id="searchInput">
                <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
            </div>
            
            <select class="input-modern" id="statusFilter">
                <option value="">All Statuses</option>
                <option value="approved">Approved</option>
                <option value="pending">Pending</option>
            </select>
            
            <a href="{{ route('admin.clients.create') }}" class="btn-primary whitespace-nowrap">
                <i class="fas fa-plus mr-2"></i>New Client
            </a>
        </div>
    </div>
</div>

<!-- Clients Grid -->
<div class="grid grid-cols-1 gap-4">
    @forelse($clients as $client)
        <div class="modern-card p-5 hover:shadow-lg transition">
            <div class="flex items-start justify-between">
                <div class="flex items-start gap-4 flex-1">
                    <!-- Client Avatar -->
                    <div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center flex-shrink-0">
                        <i class="fas fa-user text-blue-600 text-lg"></i>
                    </div>

                    <!-- Client Info -->
                    <div class="flex-1">
                        <div class="flex items-center gap-2">
                            <h3 class="text-lg font-bold text-gray-900">{{ $client->name }}</h3>
                            <span class="px-2 py-1 text-xs font-semibold rounded-full
                                @if($client->status === 'approved') 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>
                        </div>
                        <p class="text-sm text-gray-600 mt-1">{{ $client->email }}</p>
                        <p class="text-sm text-gray-500 mt-1">IC: {{ $client->ic_number ?? 'N/A' }}</p>
                    </div>
                </div>

                <!-- Stats -->
                <div class="flex gap-6 mr-6 min-w-max">
                    <div class="text-center">
                        <div class="text-2xl font-bold text-gray-900">{{ $client->wills->count() }}</div>
                        <div class="text-xs text-gray-500">Wills</div>
                    </div>
                    <div class="text-center">
                        <div class="text-2xl font-bold text-gray-900">{{ $client->trusts->count() }}</div>
                        <div class="text-xs text-gray-500">Trusts</div>
                    </div>
                    <div class="text-center">
                        <div class="text-2xl font-bold text-gray-900">{{ $client->appointments->count() }}</div>
                        <div class="text-xs text-gray-500">Appointments</div>
                    </div>
                    <div class="text-center">
                        <div class="text-2xl font-bold text-gray-900">{{ $client->estates->count() }}</div>
                        <div class="text-xs text-gray-500">Estates</div>
                    </div>
                </div>

                <!-- Status Indicators -->
                <div class="flex flex-col gap-2 mr-6">
                    @if($client->wills()->where('status', 'stored')->count() > 0)
                        <span class="inline-flex items-center gap-1 px-3 py-1 bg-green-50 text-green-700 text-xs rounded-full border border-green-200">
                            <i class="fas fa-check-circle text-xs"></i> Wills Complete
                        </span>
                    @endif
                    @if($client->trusts()->where('status', 'approved')->count() > 0)
                        <span class="inline-flex items-center gap-1 px-3 py-1 bg-purple-50 text-purple-700 text-xs rounded-full border border-purple-200">
                            <i class="fas fa-check-circle text-xs"></i> Trusts Approved
                        </span>
                    @endif
                    @if($client->payments()->where('status', 'completed')->count() > 0)
                        <span class="inline-flex items-center gap-1 px-3 py-1 bg-blue-50 text-blue-700 text-xs rounded-full border border-blue-200">
                            <i class="fas fa-check-circle text-xs"></i> Paid
                        </span>
                    @endif
                </div>

                <!-- Action Button -->
                <a href="{{ route('admin.client-tracking.show', $client) }}" class="btn-primary self-center whitespace-nowrap">
                    <i class="fas fa-arrow-right mr-2"></i>View Details
                </a>
            </div>

            <!-- Recent Activity Preview -->
            <div class="mt-4 pt-4 border-t border-gray-200 flex items-center gap-4 text-sm">
                <span class="text-gray-600">
                    <i class="fas fa-calendar-alt text-gray-400 mr-2"></i>
                    Registered: {{ $client->created_at->format('d M Y') }}
                </span>
                @if($client->referredBy)
                    <span class="text-gray-600">
                        <i class="fas fa-handshake text-gray-400 mr-2"></i>
                        Referred by: {{ $client->referredBy->name }}
                    </span>
                @endif
            </div>
        </div>
    @empty
        <div class="modern-card p-12 text-center">
            <i class="fas fa-inbox text-gray-400 text-4xl mb-4"></i>
            <p class="text-gray-500 text-lg">No clients found</p>
            <a href="{{ route('admin.clients.create') }}" class="mt-4 inline-block btn-primary">
                Create First Client
            </a>
        </div>
    @endforelse
</div>

<!-- Pagination -->
<div class="mt-8">
    {{ $clients->links() }}
</div>

<script>
    document.getElementById('searchInput').addEventListener('keyup', function() {
        const searchValue = this.value.toLowerCase();
        document.querySelectorAll('.modern-card').forEach(card => {
            const text = card.textContent.toLowerCase();
            card.style.display = text.includes(searchValue) ? '' : 'none';
        });
    });
</script>
@endsection