@extends('layouts.portal')

@section('title', 'Client Dashboard')
@section('page_title', 'Client Dashboard')
@section('page_subtitle', 'Your Estate Planning Portal')

@push('styles')
<style>
    /* Fix progress card styling on dashboard */
    
    /* Ensure green gradients display for completed items */
    .from-green-50, .from-green-100, .from-emerald-50, .from-emerald-100 {
        background-color: inherit !important;
    }
    
    .to-emerald-50, .to-emerald-100 {
        background-color: inherit !important;
    }
    
    .bg-gradient-to-br {
        background-image: inherit !important;
    }
    
    /* Force green backgrounds for completed progress icons */
    .from-green-500, .to-emerald-600 {
        background-color: inherit !important;
    }
    
    .bg-gradient-to-br.from-green-500.to-emerald-600 {
        background: linear-gradient(to bottom right, #22c55e, #047857) !important;
    }
    
    .bg-gradient-to-br.from-gray-400.to-gray-500 {
        background: linear-gradient(to bottom right, #9ca3af, #6b7280) !important;
    }
    
    /* Ensure border colors display */
    .border-green-200 {
        border-color: #dcfce7 !important;
    }
    
    .border-gray-200 {
        border-color: #e5e7eb !important;
    }
    
    /* Ensure text colors show */
    .text-green-600 {
        color: #16a34a !important;
    }
    
    .text-orange-500 {
        color: #f97316 !important;
    }
    
    .text-gray-500 {
        color: #6b7280 !important;
    }
    
    .text-gray-800 {
        color: #1f2937 !important;
    }
    
    /* Force checkmark icons to be white */
    .bg-green-500 i {
        color: white !important;
    }
    
    /* Ensure hover effects work on cards */
    .group-hover\:opacity-100 {
        opacity: 1 !important;
    }
    
    /* Fix gradient backgrounds for card */
    .from-blue-50, .from-indigo-50 {
        background-color: inherit !important;
    }
    
    .to-indigo-50 {
        background-color: inherit !important;
    }
</style>
@endpush

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

@section('content')
    <!-- Hero Welcome Section -->
    <div class="bg-gradient-to-r from-blue-600 to-indigo-600 border-2 border-blue-700 rounded-2xl p-6 mb-6 shadow-lg relative overflow-hidden">
        <div class="absolute top-0 right-0 w-32 h-32 bg-blue-500/20 rounded-full -mr-16 -mt-16"></div>
        <div class="absolute bottom-0 left-0 w-24 h-24 bg-indigo-500/20 rounded-full -ml-12 -mb-12"></div>
        
        <div class="relative z-10">
            <div class="flex flex-col md:flex-row items-center justify-between">
                <div class="mb-4 md:mb-0">
                    <h1 class="text-2xl md:text-3xl font-bold text-white mb-2">Welcome back, {{ auth()->user()->name }}!</h1>
                    <p class="text-blue-100 text-base font-semibold">Your Estate Planning Journey Starts Here</p>
                    <div class="mt-3 flex flex-wrap gap-2">
                        <span class="bg-white/20 text-white px-2 py-1 rounded-full text-xs font-medium border border-white/30 backdrop-blur">
                            <i class="fas fa-shield-alt mr-1 align-middle"></i> Secure Portal
                        </span>
                        <span class="bg-white/20 text-white px-2 py-1 rounded-full text-xs font-medium border border-white/30 backdrop-blur">
                            <i class="fas fa-lock mr-1 align-middle"></i> Encrypted
                        </span>
                    </div>
                </div>
                <div class="hidden md:block">
                    <div class="w-20 h-20 bg-white/10 border-2 border-white/30 rounded-2xl flex items-center justify-center shadow-lg backdrop-blur">
                        <i class="fas fa-user text-white text-2xl"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Notifications Section -->
    @php
        $clientNotifications = \App\Models\Notification::where('user_id', auth()->id())
            ->orderBy('created_at', 'desc')
            ->take(5)
            ->get();
        $unreadCount = \App\Models\Notification::where('user_id', auth()->id())->whereNull('read_at')->count();
    @endphp
    
    @if($clientNotifications->count() > 0)
        <div class="bg-gradient-to-r from-blue-50 to-indigo-50 border-2 border-blue-200 rounded-2xl p-6 mb-6 shadow-lg relative overflow-hidden">
            <div class="absolute top-0 right-0 w-32 h-32 bg-blue-100/30 rounded-full -mr-16 -mt-16"></div>
            
            <div class="relative z-10">
                <div class="flex items-center justify-between mb-4">
                    <h2 class="text-xl font-bold text-gray-800 flex items-center">
                        <div class="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center mr-3">
                            <i class="fas fa-bell" style="color: white !important;"></i>
                        </div>
                        Notifications
                        @if($unreadCount > 0)
                            <span class="ml-2 bg-red-500 text-white text-xs px-2 py-1 rounded-full">{{ $unreadCount }} New</span>
                        @endif
                    </h2>
                    <a href="{{ route('client.notifications') }}" class="text-blue-600 hover:text-blue-700 text-sm font-medium">
                        View All <i class="fas fa-arrow-right ml-1"></i>
                    </a>
                </div>
                
                <div class="space-y-3">
                    @foreach($clientNotifications as $notification)
                        <div class="bg-white rounded-xl p-4 shadow-sm hover:shadow-md transition-all duration-300 {{ !$notification->read_at ? 'border-l-4 border-blue-500' : '' }}">
                            <div class="flex items-start justify-between">
                                <div class="flex-1">
                                    <div class="flex items-center mb-2">
                                        <span class="inline-flex items-center justify-center w-8 h-8 rounded-full 
                                            @if($notification->type == 'info') bg-blue-100
                                            @elseif($notification->type == 'warning') bg-yellow-100
                                            @elseif($notification->type == 'error') bg-red-100
                                            @else bg-gray-100
                                            @endif mr-3">
                                            <i class="fas 
                                                @if($notification->type == 'info') fa-info-circle text-blue-600
                                                @elseif($notification->type == 'warning') fa-exclamation-triangle text-yellow-600
                                                @elseif($notification->type == 'error') fa-exclamation-circle text-red-600
                                                @else fa-bell text-gray-600
                                                @endif text-sm"></i>
                                        </span>
                                        <div>
                                            <h3 class="font-semibold text-gray-800 text-sm">{{ $notification->title }}</h3>
                                            <p class="text-gray-600 text-xs">{{ $notification->message }}</p>
                                        </div>
                                    </div>
                                    @if(!$notification->read_at)
                                        <span class="inline-block bg-blue-100 text-blue-700 text-xs px-2 py-1 rounded-full">New</span>
                                    @endif
                                </div>
                                <div class="text-right">
                                    <p class="text-gray-500 text-xs">{{ $notification->created_at->format('M j, H:i') }}</p>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    @endif

    @if(!$onboardingStep)
        <!-- Onboarding CTA -->
        <div class="bg-gradient-to-r from-blue-50 to-indigo-50 border-2 border-blue-200 rounded-2xl p-6 mb-6 shadow-lg relative overflow-hidden">
            <div class="absolute top-0 right-0 w-32 h-32 bg-blue-100/30 rounded-full -mr-16 -mt-16"></div>
            
            <div class="relative z-10">
                <div class="flex flex-col lg:flex-row items-center justify-between">
                    <div class="mb-4 lg:mb-0">
                        <h2 class="text-2xl font-bold text-gray-800 mb-2">Welcome to FWG TRUSTEES!</h2>
                        <p class="text-gray-600 text-base mb-3">Complete your profile and create your will in a few simple steps.</p>
                        <a href="{{ route('client.profile.create') }}" class="bg-blue-600 text-white px-6 py-3 rounded-xl font-bold text-base inline-flex items-center hover:bg-blue-700 transition-all duration-300 shadow-lg hover:shadow-xl transform hover:-translate-y-1 border border-blue-500">
                            <i class="fas fa-rocket mr-2"></i>
                            Start Onboarding Journey
                        </a>
                    </div>
                    <div class="hidden lg:block">
                        <div class="w-24 h-24 bg-white border-2 border-gray-200 rounded-2xl flex items-center justify-center shadow-lg">
                            <i class="fas fa-file-signature text-blue-600 text-4xl"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @else
        <!-- Progress Overview -->
        <div class="mb-8">
            <h2 class="text-2xl font-bold text-gray-800 mb-6 flex items-center">
                <div class="w-10 h-10 bg-blue-600 rounded-lg flex items-center justify-center mr-3">
                    <i class="fas fa-chart-line" style="color: white !important;"></i>
                </div>
                Your Onboarding Progress
            </h2>
            
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
                <!-- Family Card -->
                <div class="group relative h-full">
                    <div class="absolute -inset-1 bg-gradient-to-r {{ $onboardingStep->family_members_completed ? 'from-green-50 to-emerald-50' : 'from-gray-50 to-gray-100' }} rounded-2xl opacity-75 group-hover:opacity-100 transition-opacity duration-300"></div>
                    <div class="relative bg-white rounded-2xl p-6 shadow-lg hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2 border {{ $onboardingStep->family_members_completed ? 'border-green-200' : 'border-gray-200' }} h-full flex flex-col">
                        <div class="flex items-center justify-between mb-4">
                            <div class="flex items-center">
                                <div class="w-14 h-14 {{ $onboardingStep->family_members_completed ? 'bg-gradient-to-br from-green-500 to-emerald-600' : 'bg-gradient-to-br from-gray-400 to-gray-500' }} rounded-xl flex items-center justify-center mr-4 shadow-lg">
                                    <i class="fas fa-users text-white text-xl"></i>
                                </div>
                                <div>
                                    <h3 class="text-lg font-bold text-gray-800">Family</h3>
                                    <p class="text-sm {{ $onboardingStep->family_members_completed ? 'text-green-600 font-semibold' : 'text-gray-500' }} flex items-center">
                                        {{ $onboardingStep->family_members_completed ? 'Completed' : 'In Progress' }}
                                        @if($onboardingStep->family_members_completed)
                                            <i class="fas fa-check-circle ml-2"></i>
                                        @endif
                                    </p>
                                </div>
                            </div>
                            @if($onboardingStep->family_members_completed)
                                <div class="w-8 h-8 bg-green-500 rounded-full flex items-center justify-center animate-pulse">
                                    <i class="fas fa-check text-white text-sm"></i>
                                </div>
                            @endif
                        </div>
                        <div class="mt-4 pt-4 border-t {{ $onboardingStep->family_members_completed ? 'border-green-100' : 'border-gray-100' }}">
                            <div class="flex items-center justify-between">
                                <span class="text-sm text-gray-500">Status</span>
                                <span class="text-sm font-bold {{ $onboardingStep->family_members_completed ? 'text-green-600' : 'text-orange-500' }}">
                                    {{ $onboardingStep->family_members_completed ? '100% Complete' : 'In Progress' }}
                                </span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- KYC Card -->
                <div class="group relative">
                    <div class="absolute -inset-1 bg-gradient-to-r {{ $onboardingStep->kyc_documents_completed ? 'from-green-50 to-emerald-50' : 'from-gray-50 to-gray-100' }} rounded-2xl opacity-75 group-hover:opacity-100 transition-opacity duration-300"></div>
                    <div class="relative bg-white rounded-2xl p-6 shadow-lg hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2 border {{ $onboardingStep->kyc_documents_completed ? 'border-green-200' : 'border-gray-200' }}">
                        <div class="flex items-center justify-between mb-4">
                            <div class="flex items-center">
                                <div class="w-14 h-14 {{ $onboardingStep->kyc_documents_completed ? 'bg-gradient-to-br from-green-500 to-emerald-600' : 'bg-gradient-to-br from-gray-400 to-gray-500' }} rounded-xl flex items-center justify-center mr-4 shadow-lg">
                                    <i class="fas fa-id-card text-white text-xl"></i>
                                </div>
                                <div>
                                    <h3 class="text-lg font-bold text-gray-800">KYC</h3>
                                    <p class="text-sm {{ $onboardingStep->kyc_documents_completed ? 'text-green-600 font-semibold' : 'text-gray-500' }} flex items-center">
                                        {{ $onboardingStep->kyc_documents_completed ? 'Verified' : 'Pending' }}
                                        @if($onboardingStep->kyc_documents_completed)
                                            <i class="fas fa-shield-check ml-2"></i>
                                        @endif
                                    </p>
                                </div>
                            </div>
                            @if($onboardingStep->kyc_documents_completed)
                                <div class="w-8 h-8 bg-green-500 rounded-full flex items-center justify-center animate-pulse">
                                    <i class="fas fa-check text-white text-sm"></i>
                                </div>
                            @endif
                        </div>
                        <div class="mt-4 pt-4 border-t {{ $onboardingStep->kyc_documents_completed ? 'border-green-100' : 'border-gray-100' }}">
                            <div class="flex items-center justify-between">
                                <span class="text-sm text-gray-500">Verification</span>
                                <span class="text-sm font-bold {{ $onboardingStep->kyc_documents_completed ? 'text-green-600' : 'text-orange-500' }}">
                                    {{ $onboardingStep->kyc_documents_completed ? 'Verified' : 'Required' }}
                                </span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Assets Card -->
                <div class="group relative">
                    <div class="absolute -inset-1 bg-gradient-to-r {{ $onboardingStep->assets_completed ? 'from-green-50 to-emerald-50' : 'from-gray-50 to-gray-100' }} rounded-2xl opacity-75 group-hover:opacity-100 transition-opacity duration-300"></div>
                    <div class="relative bg-white rounded-2xl p-6 shadow-lg hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2 border {{ $onboardingStep->assets_completed ? 'border-green-200' : 'border-gray-200' }}">
                        <div class="flex items-center justify-between mb-4">
                            <div class="flex items-center">
                                <div class="w-14 h-14 {{ $onboardingStep->assets_completed ? 'bg-gradient-to-br from-green-500 to-emerald-600' : 'bg-gradient-to-br from-gray-400 to-gray-500' }} rounded-xl flex items-center justify-center mr-4 shadow-lg">
                                    <i class="fas fa-coins text-white text-xl"></i>
                                </div>
                                <div>
                                    <h3 class="text-lg font-bold text-gray-800">Assets</h3>
                                    <p class="text-sm {{ $onboardingStep->assets_completed ? 'text-green-600 font-semibold' : 'text-gray-500' }} flex items-center">
                                        {{ $onboardingStep->assets_completed ? 'Documented' : 'In Progress' }}
                                        @if($onboardingStep->assets_completed)
                                            <i class="fas fa-check-circle ml-2"></i>
                                        @endif
                                    </p>
                                </div>
                            </div>
                            @if($onboardingStep->assets_completed)
                                <div class="w-8 h-8 bg-green-500 rounded-full flex items-center justify-center animate-pulse">
                                    <i class="fas fa-check text-white text-sm"></i>
                                </div>
                            @endif
                        </div>
                        <div class="mt-4 pt-4 border-t {{ $onboardingStep->assets_completed ? 'border-green-100' : 'border-gray-100' }}">
                            <div class="flex items-center justify-between">
                                <span class="text-sm text-gray-500">Documentation</span>
                                <span class="text-sm font-bold {{ $onboardingStep->assets_completed ? 'text-green-600' : 'text-orange-500' }}">
                                    {{ $onboardingStep->assets_completed ? 'Complete' : 'Required' }}
                                </span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Liabilities Card -->
                <div class="group relative">
                    <div class="absolute -inset-1 bg-gradient-to-r {{ $onboardingStep->liabilities_completed ? 'from-green-50 to-emerald-50' : 'from-gray-50 to-gray-100' }} rounded-2xl opacity-75 group-hover:opacity-100 transition-opacity duration-300"></div>
                    <div class="relative bg-white rounded-2xl p-6 shadow-lg hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2 border {{ $onboardingStep->liabilities_completed ? 'border-green-200' : 'border-gray-200' }}">
                        <div class="flex items-center justify-between mb-4">
                            <div class="flex items-center">
                                <div class="w-14 h-14 {{ $onboardingStep->liabilities_completed ? 'bg-gradient-to-br from-green-500 to-emerald-600' : 'bg-gradient-to-br from-gray-400 to-gray-500' }} rounded-xl flex items-center justify-center mr-4 shadow-lg">
                                    <i class="fas fa-credit-card text-white text-xl"></i>
                                </div>
                                <div>
                                    <h3 class="text-lg font-bold text-gray-800">Liabilities</h3>
                                    <p class="text-sm {{ $onboardingStep->liabilities_completed ? 'text-green-600 font-semibold' : 'text-gray-500' }} flex items-center">
                                        {{ $onboardingStep->liabilities_completed ? 'Recorded' : 'In Progress' }}
                                        @if($onboardingStep->liabilities_completed)
                                            <i class="fas fa-check-circle ml-2"></i>
                                        @endif
                                    </p>
                                </div>
                            </div>
                            @if($onboardingStep->liabilities_completed)
                                <div class="w-8 h-8 bg-green-500 rounded-full flex items-center justify-center animate-pulse">
                                    <i class="fas fa-check text-white text-sm"></i>
                                </div>
                            @endif
                        </div>
                        <div class="mt-4 pt-4 border-t {{ $onboardingStep->liabilities_completed ? 'border-green-100' : 'border-gray-100' }}">
                            <div class="flex items-center justify-between">
                                <span class="text-sm text-gray-500">Status</span>
                                <span class="text-sm font-bold {{ $onboardingStep->liabilities_completed ? 'text-green-600' : 'text-orange-500' }}">
                                    {{ $onboardingStep->liabilities_completed ? 'Complete' : 'In Progress' }}
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Assigned Staff Information -->
        @if(auth()->user()->client->assignedStaff)
            <div class="bg-gradient-to-r from-blue-50 to-indigo-50 border-2 border-blue-200 rounded-2xl p-6 shadow-lg">
                <h3 class="text-xl font-bold text-gray-800 mb-4 flex items-center">
                    <div class="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center mr-3">
                        <i class="fas fa-user-tie text-white"></i>
                    </div>
                    Your Assigned Staff
                </h3>
                <div class="bg-white rounded-xl p-4 border border-blue-200">
                    <div class="flex items-center">
                        <div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mr-4">
                            <i class="fas fa-user-tie text-blue-600 text-lg"></i>
                        </div>
                        <div>
                            <h4 class="font-semibold text-gray-800">{{ auth()->user()->client->assignedStaff->name }}</h4>
                            <p class="text-sm text-gray-600">{{ auth()->user()->client->assignedStaff->email }}</p>
                            <p class="text-xs text-blue-600 mt-1">Your dedicated estate planning specialist</p>
                        </div>
                    </div>
                </div>
            </div>
        @endif

        <!-- Quick Actions -->
        <div class="bg-white border-2 border-gray-200 rounded-2xl p-6 shadow-lg">
            <h3 class="text-xl font-bold text-gray-800 mb-6 flex items-center">
                <div class="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center mr-3">
                    <i class="fas fa-bolt" style="color: white !important;"></i>
                </div>
                Quick Actions
            </h3>
            
            <!-- Statistics Overview -->
            <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
                <div class="bg-gradient-to-r from-blue-50 to-indigo-50 border border-blue-200 rounded-xl p-4 shadow-sm">
                    <div class="flex items-center justify-between">
                        <div class="flex items-center">
                            <div class="w-12 h-12 bg-blue-600 rounded-lg flex items-center justify-center mr-3 shadow-md">
                                <i class="fas fa-file-alt text-white text-lg" style="color: white !important;"></i>
                            </div>
                            <div>
                                <h4 class="text-lg font-bold text-gray-800">Wills</h4>
                                <p class="text-sm text-gray-600">Your created wills</p>
                            </div>
                        </div>
                        <div class="w-14 h-14 bg-blue-100 rounded-full flex items-center justify-center shadow-sm border-2 border-blue-200">
                            <span class="text-xl font-bold text-blue-700">{{ auth()->user()->client->wills()->count() ?? 0 }}</span>
                        </div>
                    </div>
                </div>
                
                <div class="bg-gradient-to-r from-amber-50 to-orange-50 border border-amber-200 rounded-xl p-4 shadow-sm">
                    <div class="flex items-center justify-between">
                        <div class="flex items-center">
                            <div class="w-12 h-12 bg-amber-600 rounded-lg flex items-center justify-center mr-3 shadow-md">
                                <i class="fas fa-shield-alt text-white text-lg"></i>
                            </div>
                            <div>
                                <h4 class="text-lg font-bold text-gray-800">Trusts</h4>
                                <p class="text-sm text-gray-600">Your created trusts</p>
                            </div>
                        </div>
                        <div class="w-14 h-14 bg-amber-100 rounded-full flex items-center justify-center shadow-sm border-2 border-amber-200">
                            <span class="text-xl font-bold text-amber-700">{{ auth()->user()->client->trusts()->count() ?? 0 }}</span>
                        </div>
                    </div>
                </div>
                
                <div class="bg-gradient-to-r from-green-50 to-emerald-50 border border-green-200 rounded-xl p-4 shadow-sm">
                    <div class="flex items-center justify-between">
                        <div class="flex items-center">
                            <div class="w-12 h-12 bg-green-600 rounded-lg flex items-center justify-center mr-3 shadow-md">
                                <i class="fas fa-users text-white text-lg"></i>
                            </div>
                            <div>
                                <h4 class="text-lg font-bold text-gray-800">Family Members</h4>
                                <p class="text-sm text-gray-600">Registered family</p>
                            </div>
                        </div>
                        <div class="w-14 h-14 bg-green-100 rounded-full flex items-center justify-center shadow-sm border-2 border-green-200">
                            <span class="text-xl font-bold text-green-700">{{ auth()->user()->client->familyMembers()->count() ?? 0 }}</span>
                        </div>
                    </div>
                </div>
                
                <div class="bg-gradient-to-r from-purple-50 to-pink-50 border border-purple-200 rounded-xl p-4 shadow-sm">
                    <div class="flex items-center justify-between">
                        <div class="flex items-center">
                            <div class="w-12 h-12 bg-purple-600 rounded-lg flex items-center justify-center mr-3 shadow-md">
                                <i class="fas fa-coins text-white text-lg"></i>
                            </div>
                            <div>
                                <h4 class="text-lg font-bold text-gray-800">Assets</h4>
                                <p class="text-sm text-gray-600">Documented assets</p>
                            </div>
                        </div>
                        <div class="w-14 h-14 bg-purple-100 rounded-full flex items-center justify-center shadow-sm border-2 border-purple-200">
                            <span class="text-xl font-bold text-purple-700">{{ auth()->user()->client->assets()->count() ?? 0 }}</span>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Action Buttons -->
            
        </div>
    @endif
@endsection