@extends('layouts.portal')

@section('title', 'Client Details - ' . $client->name)
@section('page_title', 'Client Tracking')
@section('page_subtitle', 'Viewing: ' . $client->name)

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

@section('content')
<div class="max-w-7xl mx-auto">
    
    <!-- Client Header Card -->
    <div class="modern-card p-8 mb-6">
        <div class="flex items-start justify-between mb-8">
            <div class="flex items-start gap-6">
                <!-- Avatar -->
                <div class="w-20 h-20 bg-gradient-to-br from-blue-400 to-blue-600 rounded-full flex items-center justify-center flex-shrink-0">
                    <i class="fas fa-user text-white text-2xl"></i>
                </div>
                
                <!-- Client Info -->
                <div>
                    <h1 class="text-3xl font-bold text-gray-900 mb-2">{{ $client->name }}</h1>
                    <div class="flex flex-wrap gap-3 mb-4">
                        <span class="px-3 py-1 text-sm 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>
                        <span class="px-3 py-1 text-sm font-semibold rounded-full bg-blue-100 text-blue-800">
                            {{ $client->account_type }}
                        </span>
                    </div>
                    <div class="text-sm text-gray-600 space-y-1">
                        <p><i class="fas fa-envelope mr-2 text-gray-400"></i>{{ $client->email }}</p>
                        <p><i class="fas fa-phone mr-2 text-gray-400"></i>{{ $client->phone }}</p>
                        <p><i class="fas fa-id-card mr-2 text-gray-400"></i>IC: {{ $client->ic_number }}</p>
                    </div>
                </div>
            </div>
            
            <!-- Quick Stats -->
            <div class="grid grid-cols-4 gap-4">
                <div class="text-center">
                    <div class="text-3xl font-bold text-purple-600">{{ $stats['total_wills'] }}</div>
                    <div class="text-sm text-gray-600 mt-1">Wills</div>
                    <div class="text-xs text-green-600 mt-1">{{ $stats['completed_wills'] }} complete</div>
                </div>
                <div class="text-center">
                    <div class="text-3xl font-bold text-orange-600">{{ $stats['total_trusts'] }}</div>
                    <div class="text-sm text-gray-600 mt-1">Trusts</div>
                    <div class="text-xs text-green-600 mt-1">{{ $stats['approved_trusts'] }} approved</div>
                </div>
                <div class="text-center">
                    <div class="text-3xl font-bold text-blue-600">{{ $stats['total_appointments'] }}</div>
                    <div class="text-sm text-gray-600 mt-1">Appointments</div>
                    <div class="text-xs text-green-600 mt-1">{{ $stats['completed_appointments'] }} done</div>
                </div>
                <div class="text-center">
                    <div class="text-3xl font-bold text-red-600">{{ $stats['total_estates'] }}</div>
                    <div class="text-sm text-gray-600 mt-1">Estate Cases</div>
                </div>
            </div>
        </div>

        <!-- Progress Bar - Will Completion -->
        @php
            $willProgress = 0;
            if ($stats['total_wills'] > 0) {
                $willProgress = ($stats['completed_wills'] / $stats['total_wills']) * 100;
            }
        @endphp
        <div class="pt-6 border-t border-gray-200">
            <div class="flex items-center justify-between mb-2">
                <p class="text-sm font-semibold text-gray-900">
                    <i class="fas fa-tasks text-purple-600 mr-2"></i>Overall Will Completion
                </p>
                <span class="text-sm font-bold text-gray-900">{{ round($willProgress) }}%</span>
            </div>
            <div class="w-full bg-gray-200 rounded-full h-2.5 overflow-hidden">
                <div class="bg-gradient-to-r from-purple-500 to-green-500 h-2.5 rounded-full transition-all duration-500" 
                     style="width: {{ $willProgress }}%"></div>
            </div>
            <div class="mt-3 flex justify-between text-xs text-gray-600">
                <span>{{ $stats['completed_wills'] }} of {{ $stats['total_wills'] }} wills stored</span>
                <span>{{ $stats['completed_appointments'] }} appointments completed</span>
            </div>
        </div>
    </div>

    <!-- Content Tabs -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        
        <!-- Main Content (Left Side) -->
        <div class="lg:col-span-2">
            
            <!-- Wills Section -->
            @if($client->wills->count() > 0)
                <div class="modern-card p-6 mb-6">
                    <div class="flex items-center justify-between mb-4">
                        <h2 class="text-xl font-bold text-gray-900">
                            <i class="fas fa-file-contract text-purple-600 mr-2"></i>Wills ({{ $client->wills->count() }})
                        </h2>
                    </div>
                    <div class="space-y-3">
                        @foreach($client->wills as $will)
                            <div class="p-4 border border-gray-200 rounded-lg hover:border-purple-300 hover:bg-purple-50 transition">
                                <div class="flex items-start justify-between">
                                    <div>
                                        <p class="font-semibold text-gray-900">Will #{{ $will->id }}</p>
                                        <p class="text-sm text-gray-600 mt-1">
                                            <i class="fas fa-file-alt mr-2"></i>
                                            Type: <span class="font-medium">{{ ucfirst($will->will_type ?? 'Standard') }}</span>
                                        </p>
                                        <p class="text-sm text-gray-600">
                                            <i class="fas fa-calendar mr-2"></i>
                                            Created: {{ $will->created_at->format('d M Y') }}
                                        </p>
                                    </div>
                                    <span class="px-3 py-1 text-xs font-semibold rounded-full
                                        @if($will->status === 'stored') bg-green-100 text-green-800
                                        @elseif($will->status === 'draft') bg-yellow-100 text-yellow-800
                                        @else bg-gray-100 text-gray-800
                                        @endif">
                                        {{ ucfirst($will->status) }}
                                    </span>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            @endif

            <!-- Trusts Section -->
            @if($client->trusts->count() > 0)
                <div class="modern-card p-6 mb-6">
                    <div class="flex items-center justify-between mb-4">
                        <h2 class="text-xl font-bold text-gray-900">
                            <i class="fas fa-vault text-orange-600 mr-2"></i>Trusts ({{ $client->trusts->count() }})
                        </h2>
                    </div>
                    <div class="space-y-3">
                        @foreach($client->trusts as $trust)
                            <div class="p-4 border border-gray-200 rounded-lg hover:border-orange-300 hover:bg-orange-50 transition">
                                <div class="flex items-start justify-between">
                                    <div>
                                        <p class="font-semibold text-gray-900">{{ $trust->trust_name }}</p>
                                        <p class="text-sm text-gray-600 mt-1">
                                            <i class="fas fa-user-check mr-2"></i>
                                            Trustees: <span class="font-medium">{{ $trust->trustees->count() }}</span>
                                        </p>
                                        <p class="text-sm text-gray-600">
                                            <i class="fas fa-calendar mr-2"></i>
                                            Created: {{ $trust->created_at->format('d M Y') }}
                                        </p>
                                    </div>
                                    <span class="px-3 py-1 text-xs font-semibold rounded-full
                                        @if($trust->status === 'approved') bg-green-100 text-green-800
                                        @elseif($trust->status === 'pending_approval') bg-yellow-100 text-yellow-800
                                        @else bg-gray-100 text-gray-800
                                        @endif">
                                        {{ str_replace('_', ' ', ucfirst($trust->status)) }}
                                    </span>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            @endif

            <!-- Appointments Section -->
            @if($client->appointments->count() > 0)
                <div class="modern-card p-6 mb-6">
                    <div class="flex items-center justify-between mb-4">
                        <h2 class="text-xl font-bold text-gray-900">
                            <i class="fas fa-calendar-alt text-blue-600 mr-2"></i>Appointments ({{ $client->appointments->count() }})
                        </h2>
                    </div>
                    <div class="space-y-3">
                        @foreach($client->appointments as $appointment)
                            <div class="p-4 border border-gray-200 rounded-lg hover:border-blue-300 hover:bg-blue-50 transition">
                                <div class="flex items-start justify-between">
                                    <div>
                                        <p class="font-semibold text-gray-900">{{ $appointment->description ?? 'Appointment' }}</p>
                                        <p class="text-sm text-gray-600 mt-1">
                                            <i class="fas fa-calendar mr-2"></i>
                                            {{ $appointment->appointment_date ? $appointment->appointment_date->format('d M Y, H:i') : 'Date not set' }}
                                        </p>
                                        @if($appointment->location)
                                            <p class="text-sm text-gray-600">
                                                <i class="fas fa-map-marker-alt mr-2"></i>{{ $appointment->location }}
                                            </p>
                                        @endif
                                    </div>
                                    <span class="px-3 py-1 text-xs font-semibold rounded-full
                                        @if($appointment->status === 'completed') bg-green-100 text-green-800
                                        @elseif($appointment->status === 'scheduled') bg-blue-100 text-blue-800
                                        @else bg-gray-100 text-gray-800
                                        @endif">
                                        {{ ucfirst($appointment->status) }}
                                    </span>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            @endif

            <!-- Estate Cases Section -->
            @if($client->estates->count() > 0)
                <div class="modern-card p-6 mb-6">
                    <div class="flex items-center justify-between mb-4">
                        <h2 class="text-xl font-bold text-gray-900">
                            <i class="fas fa-home text-red-600 mr-2"></i>Estate Cases ({{ $client->estates->count() }})
                        </h2>
                    </div>
                    <div class="space-y-3">
                        @foreach($client->estates as $estate)
                            <div class="p-4 border border-gray-200 rounded-lg hover:border-red-300 hover:bg-red-50 transition">
                                <div class="flex items-start justify-between">
                                    <div>
                                        <p class="font-semibold text-gray-900">Case #{{ $estate->case_number ?? $estate->id }}</p>
                                        <p class="text-sm text-gray-600 mt-1">
                                            <i class="fas fa-user mr-2"></i>
                                            Assigned: {{ $estate->assignedStaff?->name ?? 'Unassigned' }}
                                        </p>
                                        @if($estate->date_of_death)
                                            <p class="text-sm text-gray-600">
                                                <i class="fas fa-calendar mr-2"></i>
                                                DOD: {{ $estate->date_of_death->format('d M Y') }}
                                            </p>
                                        @endif
                                    </div>
                                    <span class="px-3 py-1 text-xs font-semibold rounded-full
                                        @if($estate->status === 'completed') bg-green-100 text-green-800
                                        @elseif($estate->status === 'in_progress') bg-blue-100 text-blue-800
                                        @elseif($estate->status === 'pending') bg-yellow-100 text-yellow-800
                                        @else bg-gray-100 text-gray-800
                                        @endif">
                                        {{ str_replace('_', ' ', ucfirst($estate->status)) }}
                                    </span>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            @endif

        </div>

        <!-- Sidebar (Right Side) -->
        <div class="lg:col-span-1">
            
            <!-- Timeline / Activities -->
            <div class="modern-card p-6">
                <h3 class="text-lg font-bold text-gray-900 mb-6">
                    <i class="fas fa-history text-indigo-600 mr-2"></i>Will Processing Timeline
                </h3>
                
                @if($activities)
                    <div class="space-y-0">
                        @foreach($activities as $index => $activity)
                            <!-- Timeline Item -->
                            <div class="flex pb-6 
                                @if(!$loop->last) border-b border-gray-200 @endif">
                                
                                <!-- Timeline Icon & Connector -->
                                <div class="flex flex-col items-center mr-4 flex-shrink-0">
                                    <!-- Circle Icon -->
                                    <div class="relative z-10">
                                        <div class="w-10 h-10 rounded-full flex items-center justify-center text-white text-sm font-bold border-4 border-white shadow-md
                                            @if($activity['status'] === 'completed') bg-green-500
                                            @elseif($activity['status'] === 'pending') bg-yellow-500
                                            @elseif($activity['status'] === 'failed') bg-red-500
                                            @else bg-blue-500
                                            @endif">
                                            <i class="fas {{ $activity['icon'] ?? 'fa-circle' }} text-xs"></i>
                                        </div>
                                    </div>
                                    
                                    <!-- Vertical Connector Line -->
                                    @if(!$loop->last)
                                        <div class="w-0.5 h-12 bg-gradient-to-b from-gray-300 to-gray-200 mt-2"></div>
                                    @endif
                                </div>
                                
                                <!-- Timeline Content -->
                                <div class="flex-1 pt-0.5">
                                    <!-- Title & Status Badge -->
                                    <div class="flex items-start justify-between gap-2 mb-2">
                                        <div class="flex-1">
                                            <p class="font-semibold text-gray-900 text-sm">{{ $activity['title'] }}</p>
                                            <p class="text-xs text-gray-700 mt-1 leading-relaxed">{{ $activity['description'] }}</p>
                                        </div>
                                        <span class="px-2 py-1 text-xs font-semibold rounded-full flex-shrink-0 whitespace-nowrap
                                            @if($activity['status'] === 'completed') bg-green-100 text-green-800
                                            @elseif($activity['status'] === 'pending') bg-yellow-100 text-yellow-800
                                            @elseif($activity['status'] === 'failed') bg-red-100 text-red-800
                                            @else bg-blue-100 text-blue-800
                                            @endif">
                                            {{ ucfirst($activity['status']) }}
                                        </span>
                                    </div>
                                    
                                    <!-- Metadata Box (if available) -->
                                    @if(isset($activity['metadata']) && is_array($activity['metadata']))
                                        <div class="bg-gray-50 rounded p-2.5 mt-2 border-l-2 border-gray-300">
                                            <div class="grid grid-cols-2 gap-2 text-xs">
                                                @foreach($activity['metadata'] as $key => $value)
                                                    @if($value)
                                                        <div>
                                                            <span class="text-gray-600 font-medium">{{ ucfirst(str_replace('_', ' ', $key)) }}:</span>
                                                            <span class="text-gray-900 block font-semibold">
                                                                @if(is_array($value))
                                                                    {{ implode(', ', $value) }}
                                                                @else
                                                                    {{ $value }}
                                                                @endif
                                                            </span>
                                                        </div>
                                                    @endif
                                                @endforeach
                                            </div>
                                        </div>
                                    @endif
                                    
                                    <!-- Timestamp -->
                                    <p class="text-xs text-gray-400 mt-2">
                                        <i class="fas fa-clock mr-1"></i>{{ $activity['date']->format('d M Y, H:i') }}
                                    </p>
                                </div>
                            </div>
                        @endforeach
                    </div>
                @else
                    <div class="text-center py-8">
                        <i class="fas fa-inbox text-gray-300 text-3xl mb-3"></i>
                        <p class="text-gray-500 text-sm">No activity yet</p>
                    </div>
                @endif
            </div>

            <!-- Client Info Card -->
            <div class="modern-card p-6 mt-6">
                <h3 class="text-lg font-bold text-gray-900 mb-4">
                    <i class="fas fa-user-circle text-gray-600 mr-2"></i>Personal Info
                </h3>
                
                <div class="space-y-4 text-sm">
                    <div>
                        <p class="text-gray-600 text-xs uppercase font-semibold">Date of Birth</p>
                        <p class="text-gray-900 font-medium mt-1">
                            {{ $client->date_of_birth ? $client->date_of_birth->format('d M Y') : 'Not provided' }}
                        </p>
                    </div>
                    
                    <div>
                        <p class="text-gray-600 text-xs uppercase font-semibold">Marital Status</p>
                        <p class="text-gray-900 font-medium mt-1">{{ ucfirst($client->marital_status ?? 'Not provided') }}</p>
                    </div>
                    
                    <div>
                        <p class="text-gray-600 text-xs uppercase font-semibold">Occupation</p>
                        <p class="text-gray-900 font-medium mt-1">{{ $client->occupation ?? 'Not provided' }}</p>
                    </div>
                    
                    <div>
                        <p class="text-gray-600 text-xs uppercase font-semibold">Country</p>
                        <p class="text-gray-900 font-medium mt-1">{{ $client->country ?? 'Not provided' }}</p>
                    </div>
                    
                    @if($client->referredBy)
                        <div class="pt-3 border-t border-gray-200">
                            <p class="text-gray-600 text-xs uppercase font-semibold">Referred By</p>
                            <p class="text-gray-900 font-medium mt-1">{{ $client->referredBy->name }}</p>
                        </div>
                    @endif
                    
                    <div class="pt-3 border-t border-gray-200">
                        <p class="text-gray-600 text-xs uppercase font-semibold">Registered</p>
                        <p class="text-gray-900 font-medium mt-1">{{ $client->created_at->format('d M Y') }}</p>
                    </div>
                </div>
            </div>

            <!-- Action Buttons -->
            <div class="mt-6 space-y-2">
                <a href="{{ route('admin.clients.edit', $client) }}" class="btn-primary w-full text-center">
                    <i class="fas fa-edit mr-2"></i>Edit Client
                </a>
                <a href="{{ route('admin.client-tracking') }}" class="btn-secondary w-full text-center border border-gray-300">
                    <i class="fas fa-arrow-left mr-2"></i>Back to Tracking
                </a>
            </div>

        </div>

    </div>

</div>

<style>
    .btn-secondary {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0.6rem 1.2rem;
        background: white;
        color: #6b7280;
        border: 1px solid #d1d5db;
        border-radius: 0.375rem;
        font-weight: 600;
        transition: all 0.2s;
        text-decoration: none;
    }
    
    .btn-secondary:hover {
        background: #f9fafb;
        color: #374151;
    }
</style>

@endsection