@extends('layouts.portal')

@section('title', 'Enhanced Reports')
@section('page_title', 'Enhanced Reports')
@section('page_subtitle', 'Comprehensive reporting with filtering and Excel export capabilities')

@section('sidebar')
    @include('admin.partials.sidebar', ['active' => 'reports-enhanced'])
@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">Enhanced Reports</h2>
                <p class="text-red-100 text-sm mb-3">Comprehensive reporting with filtering and Excel export capabilities</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-chart-bar mr-2"></i>
                        6 Report Types Available
                    </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-pie text-2xl"></i>
                </div>
            </div>
        </div>
    </div>

    <!-- Report Cards -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-6">
        <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300">
            <div class="p-6 text-center">
                <div class="w-16 h-16 bg-blue-600 rounded-full flex items-center justify-center mx-auto mb-4">
                    <i class="fas fa-users text-3xl text-white"></i>
                </div>
                <h3 class="text-lg font-semibold mb-2 text-gray-800">Client Reports</h3>
                <p class="text-sm text-gray-600 mb-4">Complete client information including personal details, assets, liabilities, and wills</p>
                <a href="{{ route('admin.reports.enhanced.clients') }}" class="inline-block px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors duration-200">
                    View Reports
                </a>
            </div>
        </div>
        
        <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300">
            <div class="p-6 text-center">
                <div class="w-16 h-16 bg-green-600 rounded-full flex items-center justify-center mx-auto mb-4">
                    <i class="fas fa-file-contract text-3xl text-white"></i>
                </div>
                <h3 class="text-lg font-semibold mb-2 text-gray-800">Will Reports</h3>
                <p class="text-sm text-gray-600 mb-4">Will statistics, creator information, and detailed will analytics</p>
                <a href="{{ route('admin.reports.enhanced.wills') }}" class="inline-block px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors duration-200">
                    View Reports
                </a>
            </div>
        </div>
        
        <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300">
            <div class="p-6 text-center">
                <div class="w-16 h-16 bg-cyan-600 rounded-full flex items-center justify-center mx-auto mb-4">
                    <i class="fas fa-user-tie text-3xl text-white"></i>
                </div>
                <h3 class="text-lg font-semibold mb-2 text-gray-800">Agent Reports</h3>
                <p class="text-sm text-gray-600 mb-4">Agent performance, client referrals, and commission details</p>
                <a href="{{ route('admin.reports.enhanced.agents') }}" class="inline-block px-4 py-2 bg-cyan-600 text-white rounded-lg hover:bg-cyan-700 transition-colors duration-200">
                    View Reports
                </a>
            </div>
        </div>
        
        <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300">
            <div class="p-6 text-center">
                <div class="w-16 h-16 bg-yellow-600 rounded-full flex items-center justify-center mx-auto mb-4">
                    <i class="fas fa-balance-scale text-3xl text-white"></i>
                </div>
                <h3 class="text-lg font-semibold mb-2 text-gray-800">Lawyer Reports</h3>
                <p class="text-sm text-gray-600 mb-4">Lawyer performance, will reviews, and commission analytics</p>
                <a href="{{ route('admin.reports.enhanced.lawyers') }}" class="inline-block px-4 py-2 bg-yellow-600 text-white rounded-lg hover:bg-yellow-700 transition-colors duration-200">
                    View Reports
                </a>
            </div>
        </div>
        
        <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300">
            <div class="p-6 text-center">
                <div class="w-16 h-16 bg-gray-600 rounded-full flex items-center justify-center mx-auto mb-4">
                    <i class="fas fa-dollar-sign text-3xl text-white"></i>
                </div>
                <h3 class="text-lg font-semibold mb-2 text-gray-800">Commission Reports</h3>
                <p class="text-sm text-gray-600 mb-4">Detailed commission tracking for agents and lawyers</p>
                <a href="{{ route('admin.reports.enhanced.commissions') }}" class="inline-block px-4 py-2 bg-gray-600 text-white rounded-lg hover:bg-gray-700 transition-colors duration-200">
                    View Reports
                </a>
            </div>
        </div>
        
        <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300">
            <div class="p-6 text-center">
                <div class="w-16 h-16 bg-red-600 rounded-full flex items-center justify-center mx-auto mb-4">
                    <i class="fas fa-chart-line text-3xl text-white"></i>
                </div>
                <h3 class="text-lg font-semibold mb-2 text-gray-800">Will Creator Stats</h3>
                <p class="text-sm text-gray-600 mb-4">Statistics on who created how many wills and performance metrics</p>
                <a href="{{ route('admin.reports.enhanced.will_creator_stats') }}" class="inline-block px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors duration-200">
                    View Reports
                </a>
            </div>
        </div>
    </div>

    <!-- Quick Stats -->
    <div class="bg-white rounded-lg shadow-md overflow-hidden mb-6">
        <div class="bg-gradient-to-r from-red-800 to-red-900 text-white p-4">
            <h3 class="text-lg font-semibold">Quick Statistics</h3>
        </div>
        <div class="p-6">
            <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4 text-center">
                <div class="bg-blue-600 rounded-lg p-4">
                    <div class="text-2xl font-bold text-white mb-1">{{ App\Models\Client::count() }}</div>
                    <div class="text-sm text-white">Total Clients</div>
                </div>
                <div class="bg-green-600 rounded-lg p-4">
                    <div class="text-2xl font-bold text-white mb-1">{{ App\Models\Will::count() }}</div>
                    <div class="text-sm text-white">Total Wills</div>
                </div>
                <div class="bg-cyan-600 rounded-lg p-4">
                    <div class="text-2xl font-bold text-white mb-1">{{ App\Models\User::where('role', 'agent')->count() }}</div>
                    <div class="text-sm text-white">Total Agents</div>
                </div>
                <div class="bg-yellow-600 rounded-lg p-4">
                    <div class="text-2xl font-bold text-white mb-1">{{ App\Models\User::where('role', 'lawyer')->count() }}</div>
                    <div class="text-sm text-white">Total Lawyers</div>
                </div>
                <div class="bg-gray-600 rounded-lg p-4">
                    <div class="text-2xl font-bold text-white mb-1">{{ App\Models\Commission::count() }}</div>
                    <div class="text-sm text-white">Total Commissions</div>
                </div>
                <div class="bg-red-600 rounded-lg p-4">
                    <div class="text-2xl font-bold text-white mb-1">RM {{ number_format(App\Models\Payment::where('status', 'completed')->sum('amount'), 2) }}</div>
                    <div class="text-sm text-white">Total Revenue</div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection