@extends('layouts.portal')

@section('title', 'Report Master')
@section('page_title', 'Report Master Dashboard')
@section('page_subtitle', 'Comprehensive reporting and analytics')

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

@section('content')
<div class="max-w-7xl mx-auto px-6 py-8">
    <!-- Header -->
    <div class="mb-8">
        <h1 class="text-3xl font-bold text-gray-900 mb-2">Report Master Dashboard</h1>
        <p class="text-gray-600">Access comprehensive reports and analytics for your will management system</p>
    </div>

    <!-- Summary Cards -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
        <!-- Total Clients -->
        <div class="bg-white rounded-lg shadow-md p-6 border-l-4 border-blue-600">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-gray-600 text-sm font-medium">Total Clients</p>
                    <p class="text-3xl font-bold text-gray-900 mt-2">{{ $clientCount }}</p>
                </div>
                <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center">
                    <i class="fas fa-users text-blue-600 text-xl"></i>
                </div>
            </div>
        </div>

        <!-- Total Wills -->
        <div class="bg-white rounded-lg shadow-md p-6 border-l-4 border-green-600">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-gray-600 text-sm font-medium">Total Wills</p>
                    <p class="text-3xl font-bold text-gray-900 mt-2">{{ $willCount }}</p>
                    <p class="text-xs text-green-600 mt-1">{{ $completedWills }} completed</p>
                </div>
                <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center">
                    <i class="fas fa-file-contract text-green-600 text-xl"></i>
                </div>
            </div>
        </div>

        <!-- Total Assets -->
        <div class="bg-white rounded-lg shadow-md p-6 border-l-4 border-purple-600">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-gray-600 text-sm font-medium">Total Assets Value</p>
                    <p class="text-2xl font-bold text-gray-900 mt-2">RM {{ number_format($totalAssets, 0) }}</p>
                </div>
                <div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center">
                    <i class="fas fa-coins text-purple-600 text-xl"></i>
                </div>
            </div>
        </div>

        <!-- Total Liabilities -->
        <div class="bg-white rounded-lg shadow-md p-6 border-l-4 border-red-600">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-gray-600 text-sm font-medium">Total Liabilities</p>
                    <p class="text-2xl font-bold text-gray-900 mt-2">RM {{ number_format($totalLiabilities, 0) }}</p>
                </div>
                <div class="w-12 h-12 bg-red-100 rounded-lg flex items-center justify-center">
                    <i class="fas fa-credit-card text-red-600 text-xl"></i>
                </div>
            </div>
        </div>
    </div>

    <!-- Report Sections -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
        <!-- Clients Report Card -->
        <div class="bg-white rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-shadow">
            <div class="bg-gradient-to-r from-blue-600 to-blue-700 p-6 text-white">
                <i class="fas fa-users text-3xl mb-3 block"></i>
                <h2 class="text-2xl font-bold">Clients Report</h2>
                <p class="text-blue-100 mt-2">Detailed client information and will statistics</p>
            </div>
            <div class="p-6">
                <ul class="space-y-3 mb-6 text-sm text-gray-600">
                    <li><i class="fas fa-check text-green-600 mr-2"></i> Complete client profiles</li>
                    <li><i class="fas fa-check text-green-600 mr-2"></i> Assets & liabilities summary</li>
                    <li><i class="fas fa-check text-green-600 mr-2"></i> Will count and status</li>
                    <li><i class="fas fa-check text-green-600 mr-2"></i> Beneficiaries overview</li>
                </ul>
                <div class="flex gap-3">
                    <a href="{{ route('admin.reports.master.clients') }}" class="flex-1 px-4 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors text-center font-medium">
                        <i class="fas fa-eye mr-2"></i>View Report
                    </a>
                    <a href="{{ route('admin.reports.master.clients-export') }}" class="flex-1 px-4 py-3 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors text-center font-medium">
                        <i class="fas fa-download mr-2"></i>Excel Export
                    </a>
                </div>
            </div>
        </div>

        <!-- Wills Report Card -->
        <div class="bg-white rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-shadow">
            <div class="bg-gradient-to-r from-green-600 to-green-700 p-6 text-white">
                <i class="fas fa-file-contract text-3xl mb-3 block"></i>
                <h2 class="text-2xl font-bold">Wills Report</h2>
                <p class="text-green-100 mt-2">Comprehensive will information and status</p>
            </div>
            <div class="p-6">
                <ul class="space-y-3 mb-6 text-sm text-gray-600">
                    <li><i class="fas fa-check text-green-600 mr-2"></i> All wills summary</li>
                    <li><i class="fas fa-check text-green-600 mr-2"></i> Beneficiaries & assets breakdown</li>
                    <li><i class="fas fa-check text-green-600 mr-2"></i> Liabilities & allowances</li>
                    <li><i class="fas fa-check text-green-600 mr-2"></i> Version history tracking</li>
                </ul>
                <div class="flex gap-3">
                    <a href="{{ route('admin.reports.master.wills') }}" class="flex-1 px-4 py-3 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors text-center font-medium">
                        <i class="fas fa-eye mr-2"></i>View Report
                    </a>
                    <a href="{{ route('admin.reports.master.wills-export') }}" class="flex-1 px-4 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors text-center font-medium">
                        <i class="fas fa-download mr-2"></i>Excel Export
                    </a>
                </div>
            </div>
        </div>

        <!-- Financial Report Card -->
        <div class="bg-white rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-shadow">
            <div class="bg-gradient-to-r from-orange-600 to-orange-700 p-6 text-white">
                <i class="fas fa-chart-bar text-3xl mb-3 block"></i>
                <h2 class="text-2xl font-bold">Financial Report</h2>
                <p class="text-orange-100 mt-2">Will-wise payments and commissions</p>
            </div>
            <div class="p-6">
                <ul class="space-y-3 mb-6 text-sm text-gray-600">
                    <li><i class="fas fa-check text-green-600 mr-2"></i> Client payments tracking</li>
                    <li><i class="fas fa-check text-green-600 mr-2"></i> Lawyer commissions breakdown</li>
                    <li><i class="fas fa-check text-green-600 mr-2"></i> Agent commissions details</li>
                    <li><i class="fas fa-check text-green-600 mr-2"></i> Payment status monitoring</li>
                </ul>
                <div class="flex gap-3">
                    <a href="{{ route('admin.reports.master.financial') }}" class="flex-1 px-4 py-3 bg-orange-600 text-white rounded-lg hover:bg-orange-700 transition-colors text-center font-medium">
                        <i class="fas fa-eye mr-2"></i>View Report
                    </a>
                </div>
            </div>
        </div>

        <!-- Agent Performance Report Card -->
        <div class="bg-white rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-shadow">
            <div class="bg-gradient-to-r from-indigo-600 to-indigo-700 p-6 text-white">
                <i class="fas fa-chart-line text-3xl mb-3 block"></i>
                <h2 class="text-2xl font-bold">Agent Performance</h2>
                <p class="text-indigo-100 mt-2">Monitor all agents' performance and commissions</p>
            </div>
            <div class="p-6">
                <ul class="space-y-3 mb-6 text-sm text-gray-600">
                    <li><i class="fas fa-check text-green-600 mr-2"></i> Agent rankings by commission</li>
                    <li><i class="fas fa-check text-green-600 mr-2"></i> Client referrals tracking</li>
                    <li><i class="fas fa-check text-green-600 mr-2"></i> Monthly performance metrics</li>
                    <li><i class="fas fa-check text-green-600 mr-2"></i> Commission breakdown details</li>
                </ul>
                <div class="flex gap-3">
                    <a href="{{ route('admin.agent-performance') }}" class="flex-1 px-4 py-3 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors text-center font-medium">
                        <i class="fas fa-eye mr-2"></i>View Report
                    </a>
                </div>
            </div>
        </div>

        <!-- Will Lifecycle Report Card -->
        <div class="bg-white rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-shadow">
            <div class="bg-gradient-to-r from-teal-600 to-teal-700 p-6 text-white">
                <i class="fas fa-project-diagram text-3xl mb-3 block"></i>
                <h2 class="text-2xl font-bold">Will Lifecycle Report</h2>
                <p class="text-teal-100 mt-2">Complete audit trail and approval journey</p>
            </div>
            <div class="p-6">
                <ul class="space-y-3 mb-6 text-sm text-gray-600">
                    <li><i class="fas fa-check text-green-600 mr-2"></i> Who created the will</li>
                    <li><i class="fas fa-check text-green-600 mr-2"></i> When invoice was raised</li>
                    <li><i class="fas fa-check text-green-600 mr-2"></i> Payment tracking</li>
                    <li><i class="fas fa-check text-green-600 mr-2"></i> Approval timeline</li>
                </ul>
                <div class="flex gap-3">
                    <a href="{{ route('admin.reports.master.will-lifecycle') }}" class="flex-1 px-4 py-3 bg-teal-600 text-white rounded-lg hover:bg-teal-700 transition-colors text-center font-medium">
                        <i class="fas fa-eye mr-2"></i>View Report
                    </a>
                </div>
            </div>
        </div>

        <!-- Summary Stats Card -->
        <div class="bg-white rounded-lg shadow-lg overflow-hidden">
            <div class="bg-gradient-to-r from-purple-600 to-purple-700 p-6 text-white">
                <i class="fas fa-chart-pie text-3xl mb-3 block"></i>
                <h2 class="text-2xl font-bold">Quick Stats</h2>
                <p class="text-purple-100 mt-2">System overview and statistics</p>
            </div>
            <div class="p-6">
                <div class="grid grid-cols-2 gap-4">
                    <div class="bg-blue-50 p-4 rounded-lg">
                        <p class="text-gray-600 text-xs font-medium">Total Beneficiaries</p>
                        <p class="text-2xl font-bold text-blue-600 mt-1">{{ $totalBeneficiaries }}</p>
                    </div>
                    <div class="bg-green-50 p-4 rounded-lg">
                        <p class="text-gray-600 text-xs font-medium">Completed Wills</p>
                        <p class="text-2xl font-bold text-green-600 mt-1">{{ $completedWills }}</p>
                    </div>
                    <div class="bg-purple-50 p-4 rounded-lg">
                        <p class="text-gray-600 text-xs font-medium">Net Worth (Total)</p>
                        <p class="text-lg font-bold text-purple-600 mt-1">RM {{ number_format($totalAssets - $totalLiabilities, 0) }}</p>
                    </div>
                    <div class="bg-orange-50 p-4 rounded-lg">
                        <p class="text-gray-600 text-xs font-medium">A/L Ratio</p>
                        <p class="text-lg font-bold text-orange-600 mt-1">{{ $totalLiabilities > 0 ? number_format($totalAssets / $totalLiabilities, 2) : 'N/A' }}x</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Help Section -->
    <div class="mt-8 bg-blue-50 border border-blue-200 rounded-lg p-6">
        <div class="flex items-start">
            <i class="fas fa-info-circle text-blue-600 text-xl mr-4 mt-1"></i>
            <div>
                <h3 class="font-bold text-blue-900">How to use Report Master</h3>
                <ul class="mt-2 text-sm text-blue-800 space-y-1">
                    <li>• <strong>Clients Report:</strong> View all clients with detailed asset, liability, and will information. Export to Excel for record keeping.</li>
                    <li>• <strong>Wills Report:</strong> Track all wills by status, type, and associated beneficiaries. Download as Excel spreadsheet.</li>
                    <li>• <strong>Financial Report:</strong> Monitor will-wise payments, lawyer commissions, and agent commissions.</li>
                    <li>• <strong>Agent Performance:</strong> View all agents ranked by commission, track their client referrals, monthly performance metrics, and detailed commission breakdown.</li>
                    <li>• <strong>Will Lifecycle Report:</strong> Complete audit trail showing who created the will, when invoice was raised, payment details, and final approval status with dates.</li>
                </ul>
            </div>
        </div>
    </div>
</div>

<style>
    .sidebar-item.active a {
        background-color: rgba(59, 130, 246, 0.1);
        border-left: 3px solid #3b82f6;
        padding-left: calc(0.5rem - 3px);
    }
</style>
@endsection