@extends('layouts.portal')

@section('title', 'Advanced Client Report')
@section('page_title', 'Advanced Client Report')
@section('page_subtitle', 'Complete Client Database with Full Details')

@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="flex items-center justify-between mb-8">
        <div>
            <h1 class="text-3xl font-bold text-gray-900">Advanced Client Report</h1>
            <p class="text-gray-600 mt-1">Total Clients: {{ $clientsData->count() }} | Full Database View</p>
        </div>
        <a href="{{ route('admin.reports.master.index') }}" class="px-4 py-2 bg-gray-600 text-white rounded-lg hover:bg-gray-700">
            <i class="fas fa-arrow-left mr-2"></i>Back
        </a>
    </div>

    <!-- Clients Table -->
    <div class="bg-white rounded-lg shadow-md overflow-hidden">
        <div class="overflow-x-auto">
            <table class="w-full text-xs">
                <thead>
                    <tr class="bg-gray-900 text-white">
                        <th class="px-4 py-3 text-left font-semibold">Client ID</th>
                        <th class="px-4 py-3 text-left font-semibold">Full Name</th>
                        <th class="px-4 py-3 text-left font-semibold">Email</th>
                        <th class="px-4 py-3 text-left font-semibold">Phone</th>
                        <th class="px-4 py-3 text-left font-semibold">IC/Passport</th>
                        <th class="px-4 py-3 text-left font-semibold">Address</th>
                        <th class="px-4 py-3 text-left font-semibold">Occupation</th>
                        
                        <th class="px-4 py-3 text-center font-semibold bg-blue-900">Created Date</th>
                        
                        <th class="px-4 py-3 text-center font-semibold bg-green-900">Total Wills</th>
                        <th class="px-4 py-3 text-center font-semibold bg-green-900">Completed</th>
                        
                        <th class="px-4 py-3 text-center font-semibold bg-purple-900">Assets Count</th>
                        <th class="px-4 py-3 text-right font-semibold bg-purple-900">Assets Value</th>
                        
                        <th class="px-4 py-3 text-center font-semibold bg-red-900">Liab. Count</th>
                        <th class="px-4 py-3 text-right font-semibold bg-red-900">Liabilities</th>
                        
                        <th class="px-4 py-3 text-center font-semibold bg-orange-900">Family Members</th>
                        <th class="px-4 py-3 text-right font-semibold bg-orange-900">Net Worth</th>
                    </tr>
                </thead>
                <tbody class="divide-y">
                    @forelse($clientsData as $client)
                    <tr class="hover:bg-gray-50 transition-colors">
                        <td class="px-4 py-3 font-mono font-bold text-blue-600">{{ $client['id'] }}</td>
                        <td class="px-4 py-3 font-medium text-gray-900">{{ $client['name'] }}</td>
                        <td class="px-4 py-3 text-gray-600">{{ $client['email'] }}</td>
                        <td class="px-4 py-3 text-gray-600">{{ $client['phone'] ?? 'N/A' }}</td>
                        <td class="px-4 py-3 text-gray-600 font-mono">{{ $client['ic_number'] ?? 'N/A' }}</td>
                        <td class="px-4 py-3 text-gray-600 text-xs">{{ $client['address'] ?? 'N/A' }}</td>
                        <td class="px-4 py-3 text-gray-600">{{ $client['occupation'] ?? 'N/A' }}</td>
                        
                        <td class="px-4 py-3 text-center bg-blue-50 text-blue-900 font-semibold">{{ $client['created_date'] }}</td>
                        
                        <td class="px-4 py-3 text-center bg-green-50">
                            <span class="inline-block px-2 py-1 bg-green-200 text-green-900 rounded-full font-semibold">{{ $client['total_wills'] }}</span>
                        </td>
                        <td class="px-4 py-3 text-center bg-green-50">
                            <span class="inline-block px-2 py-1 bg-emerald-200 text-emerald-900 rounded-full font-semibold">{{ $client['completed_wills'] }}</span>
                        </td>
                        
                        <td class="px-4 py-3 text-center bg-purple-50 font-semibold text-purple-900">
                            {{ count($client['assets_list'] ?? []) }}
                        </td>
                        <td class="px-4 py-3 text-right bg-purple-50 font-bold text-purple-900">
                            RM {{ number_format($client['total_assets'], 0) }}
                        </td>
                        
                        <td class="px-4 py-3 text-center bg-red-50 font-semibold text-red-900">
                            {{ count($client['liabilities_list'] ?? []) }}
                        </td>
                        <td class="px-4 py-3 text-right bg-red-50 font-bold text-red-900">
                            RM {{ number_format($client['total_liabilities'], 0) }}
                        </td>
                        
                        <td class="px-4 py-3 text-center bg-orange-50">
                            <span class="inline-block px-2 py-1 bg-orange-200 text-orange-900 rounded-full font-semibold">{{ $client['family_members'] }}</span>
                        </td>
                        <td class="px-4 py-3 text-right bg-orange-50 font-bold text-orange-900">
                            RM {{ number_format($client['net_worth'], 0) }}
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="16" class="px-6 py-12 text-center text-gray-500">
                            <i class="fas fa-inbox text-3xl mb-3 block opacity-50"></i>
                            No clients found
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        <!-- Summary Footer -->
        <div class="bg-gray-50 border-t px-6 py-4">
            <div class="grid grid-cols-2 md:grid-cols-6 gap-4 text-sm">
                <div>
                    <p class="text-gray-600 font-medium">Total Clients</p>
                    <p class="text-2xl font-bold text-gray-900">{{ $clientsData->count() }}</p>
                </div>
                <div>
                    <p class="text-gray-600 font-medium">Total Wills</p>
                    <p class="text-2xl font-bold text-blue-600">{{ $clientsData->sum('total_wills') }}</p>
                </div>
                <div>
                    <p class="text-gray-600 font-medium">Completed Wills</p>
                    <p class="text-2xl font-bold text-green-600">{{ $clientsData->sum('completed_wills') }}</p>
                </div>
                <div>
                    <p class="text-gray-600 font-medium">Total Assets</p>
                    <p class="text-lg font-bold text-purple-600">RM {{ number_format($clientsData->sum('total_assets'), 0) }}</p>
                </div>
                <div>
                    <p class="text-gray-600 font-medium">Total Liabilities</p>
                    <p class="text-lg font-bold text-red-600">RM {{ number_format($clientsData->sum('total_liabilities'), 0) }}</p>
                </div>
                <div>
                    <p class="text-gray-600 font-medium">Total Net Worth</p>
                    <p class="text-lg font-bold text-orange-600">RM {{ number_format($clientsData->sum('net_worth'), 0) }}</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Color Legend -->
    <div class="mt-8 grid grid-cols-2 md:grid-cols-6 gap-4">
        <div class="bg-blue-50 border border-blue-200 rounded-lg p-3">
            <p class="text-xs font-semibold text-blue-900">📅 Created Date</p>
        </div>
        <div class="bg-green-50 border border-green-200 rounded-lg p-3">
            <p class="text-xs font-semibold text-green-900">📄 Wills Info</p>
        </div>
        <div class="bg-purple-50 border border-purple-200 rounded-lg p-3">
            <p class="text-xs font-semibold text-purple-900">💰 Assets</p>
        </div>
        <div class="bg-red-50 border border-red-200 rounded-lg p-3">
            <p class="text-xs font-semibold text-red-900">💳 Liabilities</p>
        </div>
        <div class="bg-orange-50 border border-orange-200 rounded-lg p-3">
            <p class="text-xs font-semibold text-orange-900">👨‍👩‍👧 Family & Net</p>
        </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);
    }
    
    @media (max-width: 768px) {
        table {
            min-width: 1800px;
        }
    }
</style>
@endsection