@extends('layouts.portal')

@section('title', 'Admin Dashboard')
@section('page_title', 'Admin Dashboard')
@section('page_subtitle', 'System Overview & Management')

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

@section('content')
    <div class="max-w-6xl mx-auto">
        <!-- Welcome Banner -->
        <div class="bg-gradient-to-r from-red-900 via-red-800 to-red-900 rounded-xl p-8 text-white mb-4 shadow-xl animate-fade-in-up relative overflow-hidden min-h-[120px]">
            <div class="absolute top-0 right-0 w-64 h-64 bg-white/10 rounded-full -mr-32 -mt-32"></div>
            <div class="absolute bottom-0 left-0 w-32 h-32 bg-white/10 rounded-full -ml-16 -mb-16"></div>
            
            <div class="relative z-10 flex items-center justify-between">
                <div>
                    <h2 class="text-xl font-bold mb-2">Welcome back, {{ auth()->user()->name }}! 👋</h2>
                    <p class="text-red-100 text-sm mb-3">Here's what's happening with your system today.</p>
                    <div class="flex items-center space-x-3">
                        <span class="inline-flex items-center px-3 py-2 rounded-full text-xs font-medium bg-white/20 backdrop-blur-sm">
                            <i class="fas fa-clock mr-2"></i>
                            {{ now()->format('l, F j, Y') }}
                        </span>
                        <span class="inline-flex items-center px-3 py-2 rounded-full text-xs font-medium bg-green-400/30 backdrop-blur-sm">
                            <i class="fas fa-circle text-green-300 mr-2 text-xs"></i>
                            System Online
                        </span>
                    </div>
                </div>
                <div class="hidden md:block">
                    <div class="w-16 h-16 bg-white/20 backdrop-blur-sm rounded-xl flex items-center justify-center">
                        <i class="fas fa-chart-line text-2xl"></i>
                    </div>
                </div>
            </div>
        </div>

        <!-- Stats Cards -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3 mb-4">
            <x-stats-card 
                title="Total Clients" 
                value="{{ $stats['total_clients'] }}" 
                icon="users" 
                color="burgundy"
                trend="up"
                trendText="Active Users"
            />
            
            <x-stats-card 
                title="Total Staff" 
                value="{{ $stats['total_staff'] }}" 
                icon="user-tie" 
                color="burgundy"
                trend="up"
                trendText="Writers"
            />
            
            <x-stats-card 
                title="Total Lawyers" 
                value="{{ $stats['total_lawyers'] }}" 
                icon="balance-scale" 
                color="burgundy"
                trend="up"
                trendText="Legal Team"
            />
            
            <x-stats-card 
                title="Total Wills" 
                value="{{ $stats['total_wills'] }}" 
                icon="file-contract" 
                color="burgundy"
                trend="up"
                trendText="All Time"
            />
            
            <x-stats-card 
                title="Pending Review" 
                value="{{ $stats['pending_wills'] }}" 
                icon="hourglass-half" 
                color="burgundy"
                trend="down"
                trendText="Lawyer Review"
            />
            
            <x-stats-card 
                title="Signed Wills" 
                value="{{ $stats['signed_wills'] }}" 
                icon="check-double" 
                color="burgundy"
                trend="up"
                trendText="Completed"
            />
        </div>
        
        <!-- Quick Actions -->
        <div class="modern-card p-4 mb-4" style="background-color: white !important;">
            <div class="flex items-center justify-between mb-3">
                <h3 class="text-base font-bold text-gray-900 flex items-center">
                    <div class="w-6 h-6 bg-red-100 rounded-lg flex items-center justify-center mr-2">
                        <i class="fas fa-bolt text-red-600 text-xs"></i>
                    </div>
                    Quick Actions
                </h3>
                <button class="text-xs text-red-600 hover:text-red-700 font-medium">
                    View All <i class="fas fa-arrow-right ml-1"></i>
                </button>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-3">
                <!-- Add Staff -->
                <a href="{{ route('admin.staff.create') }}" class="group relative bg-gradient-to-br from-red-500 to-red-600 rounded-xl p-5 text-white hover:shadow-lg transition-all duration-300 hover:scale-105 h-full">
                    <div class="flex flex-col h-full justify-between">
                        <div class="flex items-start justify-between">
                            <div class="w-12 h-12 bg-white/20 rounded-xl flex items-center justify-center">
                                <i class="fas fa-user-plus text-white text-xl"></i>
                            </div>
                            <i class="fas fa-arrow-right text-white/60 group-hover:translate-x-1 transition-transform"></i>
                        </div>
                        <div class="mt-4">
                            <h4 class="font-bold text-lg">Add Staff</h4>
                            <p class="text-red-100 text-sm mt-1">Create new staff account</p>
                        </div>
                    </div>
                </a>
                
                <!-- View Clients -->
                <a href="{{ route('admin.clients') }}" class="group relative bg-gradient-to-br from-blue-500 to-blue-600 rounded-xl p-5 text-white hover:shadow-lg transition-all duration-300 hover:scale-105 h-full">
                    <div class="flex flex-col h-full justify-between">
                        <div class="flex items-start justify-between">
                            <div class="w-12 h-12 bg-white/20 rounded-xl flex items-center justify-center">
                                <i class="fas fa-users text-white text-xl"></i>
                            </div>
                            <i class="fas fa-arrow-right text-white/60 group-hover:translate-x-1 transition-transform"></i>
                        </div>
                        <div class="mt-4">
                            <h4 class="font-bold text-lg">View Clients</h4>
                            <p class="text-blue-100 text-sm mt-1">Browse all clients</p>
                        </div>
                    </div>
                </a>
                
                <!-- Manage Wills -->
                <a href="{{ route('admin.wills') }}" class="group relative bg-gradient-to-br from-purple-500 to-purple-600 rounded-xl p-5 text-white hover:shadow-lg transition-all duration-300 hover:scale-105 h-full">
                    <div class="absolute top-3 right-3 bg-white text-purple-600 text-xs font-bold px-2 py-1 rounded-full">
                        {{ $stats['pending_wills'] ?? 0 }}
                    </div>
                    <div class="flex flex-col h-full justify-between">
                        <div class="flex items-start">
                            <div class="w-12 h-12 bg-white/20 rounded-xl flex items-center justify-center">
                                <i class="fas fa-file-contract text-white text-xl"></i>
                            </div>
                        </div>
                        <div class="mt-4">
                            <h4 class="font-bold text-lg">Manage Wills</h4>
                            <p class="text-purple-100 text-sm mt-1">Review and manage wills</p>
                        </div>
                    </div>
                </a>
                
                <!-- Create Invoice -->
                <a href="{{ route('admin.invoices.create') }}" class="group relative bg-gradient-to-br from-green-500 to-green-600 rounded-xl p-5 text-white hover:shadow-lg transition-all duration-300 hover:scale-105 h-full">
                    <div class="flex flex-col h-full justify-between">
                        <div class="flex items-start justify-between">
                            <div class="w-12 h-12 bg-white/20 rounded-xl flex items-center justify-center">
                                <i class="fas fa-file-invoice-dollar text-white text-xl"></i>
                            </div>
                            <i class="fas fa-arrow-right text-white/60 group-hover:translate-x-1 transition-transform"></i>
                        </div>
                        <div class="mt-4">
                            <h4 class="font-bold text-lg">Create Invoice</h4>
                            <p class="text-green-100 text-sm mt-1">Generate new invoice</p>
                        </div>
                    </div>
                </a>
            </div>
        </div>

        <!-- Recent Activity & Charts -->
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
            <!-- Recent Activity -->
            <div class="modern-card p-4" style="background-color: white !important;">
                <div class="flex items-center justify-between mb-4">
                    <h3 class="text-base font-bold text-gray-900 flex items-center">
                        <div class="w-6 h-6 bg-purple-100 rounded-lg flex items-center justify-center mr-2">
                            <i class="fas fa-chart-line text-purple-600 text-xs"></i>
                        </div>
                        Activity Overview
                    </h3>
                    <button class="text-xs text-purple-600 hover:text-purple-700 font-medium">
                        View All <i class="fas fa-arrow-right ml-1"></i>
                    </button>
                </div>
                
                <!-- Stats Row -->
                <div class="flex gap-2 mb-4">
                    <div class="flex-1 bg-gradient-to-r from-blue-500 to-blue-600 rounded-lg p-3 text-white">
                        <div class="flex items-center gap-2">
                            <i class="fas fa-file-contract text-white/80"></i>
                            <div>
                                <p class="text-xl font-bold">{{ $stats['total_wills'] ?? 0 }}</p>
                                <p class="text-xs text-blue-100">Wills</p>
                            </div>
                        </div>
                    </div>
                    
                    <div class="flex-1 bg-gradient-to-r from-green-500 to-green-600 rounded-lg p-3 text-white">
                        <div class="flex items-center gap-2">
                            <i class="fas fa-user-plus text-white/80"></i>
                            <div>
                                <p class="text-xl font-bold">{{ $stats['total_clients'] ?? 0 }}</p>
                                <p class="text-xs text-green-100">Clients</p>
                            </div>
                        </div>
                    </div>
                    
                    <div class="flex-1 bg-gradient-to-r from-purple-500 to-purple-600 rounded-lg p-3 text-white">
                        <div class="flex items-center gap-2">
                            <i class="fas fa-gavel text-white/80"></i>
                            <div>
                                <p class="text-xl font-bold">{{ $stats['pending_wills'] ?? 0 }}</p>
                                <p class="text-xs text-purple-100">Pending</p>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- Activity List with Icons -->
                <div class="space-y-3">
                    @forelse($recentActivities as $activity)
                    <div class="flex items-center gap-3 p-3 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors cursor-pointer">
                        <div class="w-10 h-10 bg-white rounded-full flex items-center justify-center flex-shrink-0 shadow-sm">
                            <i class="fas {{ $activity['icon'] }} text-{{ $activity['color'] }}-600 text-sm"></i>
                        </div>
                        <div class="flex-1 min-w-0">
                            <p class="text-sm font-semibold text-gray-900 truncate">{{ $activity['title'] }}</p>
                            <p class="text-xs text-gray-500 truncate">{{ $activity['message'] }}</p>
                        </div>
                        <div class="text-right flex-shrink-0">
                            <p class="text-xs text-gray-400">{{ $activity['time'] }}</p>
                        </div>
                    </div>
                    @empty
                    <div class="text-center py-8 text-gray-500">
                        <i class="fas fa-inbox text-2xl mb-2 block opacity-50"></i>
                        <p class="text-sm">No recent activity</p>
                    </div>
                    @endforelse
                </div>
            </div>
            
            <!-- Monthly Income Breakdown -->
            <div class="modern-card p-4" style="background-color: white !important;">
                <div class="flex items-center justify-between mb-4">
                    <h3 class="text-base font-bold text-gray-900 flex items-center">
                        <div class="w-6 h-6 bg-amber-100 rounded-lg flex items-center justify-center mr-2">
                            <i class="fas fa-chart-pie text-amber-600 text-xs"></i>
                        </div>
                        Monthly Income
                    </h3>
                    <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-amber-100 text-amber-800">
                        {{ now()->format('F Y') }}
                    </span>
                </div>
                
                <!-- Main Total Card -->
                <div class="bg-gradient-to-br from-emerald-500 to-green-600 rounded-2xl p-5 text-white mb-4 shadow-lg">
                    <div class="flex items-center justify-between">
                        <div>
                            <p class="text-green-100 text-sm mb-1">Total Revenue</p>
                            <p class="text-3xl font-bold">RM{{ number_format($monthlyIncome['total_income'], 2) }}</p>
                        </div>
                        <div class="w-16 h-16 bg-white/20 rounded-2xl flex items-center justify-center">
                            <i class="fas fa-wallet text-white text-2xl"></i>
                        </div>
                    </div>
                </div>
                
                <!-- Breakdown Grid -->
                <div class="grid grid-cols-2 gap-3">
                    <!-- Agent Commission -->
                    <div class="bg-gradient-to-br from-blue-50 to-indigo-50 rounded-xl p-4 border border-blue-100">
                        <div class="flex items-center justify-between mb-2">
                            <div class="w-10 h-10 bg-blue-500 rounded-lg flex items-center justify-center">
                                <i class="fas fa-user-tie text-white text-sm"></i>
                            </div>
                            <span class="text-xs bg-blue-100 text-blue-700 px-2 py-1 rounded-full font-medium">
                                {{ $monthlyIncome['total_income'] > 0 ? round($monthlyIncome['agent_commission'] / $monthlyIncome['total_income'] * 100, 1) : 0 }}%
                            </span>
                        </div>
                        <p class="text-gray-500 text-xs mb-1">Agent Commission</p>
                        <p class="text-xl font-bold text-blue-700">RM{{ number_format($monthlyIncome['agent_commission'], 2) }}</p>
                    </div>
                    
                    <!-- Lawyer Commission -->
                    <div class="bg-gradient-to-br from-purple-50 to-pink-50 rounded-xl p-4 border border-purple-100">
                        <div class="flex items-center justify-between mb-2">
                            <div class="w-10 h-10 bg-purple-500 rounded-lg flex items-center justify-center">
                                <i class="fas fa-balance-scale text-white text-sm"></i>
                            </div>
                            <span class="text-xs bg-purple-100 text-purple-700 px-2 py-1 rounded-full font-medium">
                                {{ $monthlyIncome['total_income'] > 0 ? round($monthlyIncome['lawyer_commission'] / $monthlyIncome['total_income'] * 100, 1) : 0 }}%
                            </span>
                        </div>
                        <p class="text-gray-500 text-xs mb-1">Lawyer Commission</p>
                        <p class="text-xl font-bold text-purple-700">RM{{ number_format($monthlyIncome['lawyer_commission'], 2) }}</p>
                    </div>
                </div>
                
                <!-- Your Profit - Full Width -->
                <div class="bg-gradient-to-r from-red-500 to-orange-500 rounded-2xl p-4 text-white mt-3 shadow-lg">
                    <div class="flex items-center justify-between">
                        <div class="flex items-center">
                            <div class="w-12 h-12 bg-white/20 rounded-xl flex items-center justify-center mr-3">
                                <i class="fas fa-trophy text-white text-xl"></i>
                            </div>
                            <div>
                                <p class="text-red-100 text-sm">Your Net Profit</p>
                                <p class="text-2xl font-bold">RM{{ number_format($monthlyIncome['admin_profit'], 2) }}</p>
                            </div>
                        </div>
                        <div class="text-right">
                            <p class="text-red-100 text-xs">Margin</p>
                            <p class="text-lg font-bold">{{ $monthlyIncome['total_income'] > 0 ? round($monthlyIncome['admin_profit'] / $monthlyIncome['total_income'] * 100, 1) : 0 }}%</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection