@extends('layouts.portal')

@section('title', 'Client Report')
@section('page_title', 'Client Report')
@section('page_subtitle', 'Complete profile overview for every client you manage')

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

@section('content')
<div class="max-w-7xl mx-auto">
    <div class="bg-white rounded-xl shadow-lg p-6 mb-6">
        <div class="flex justify-between items-center mb-6 flex-wrap gap-3">
            <div>
                <h1 class="text-3xl font-bold text-gray-900">Client Report</h1>
                <p class="text-gray-600 mt-2">Personal details, assets/liabilities, nominees, documents, and appointments</p>
            </div>
            <div class="flex gap-3">
                <a href="{{ route('agent.reports.hub') }}" class="bg-gray-100 hover:bg-gray-200 text-gray-700 px-4 py-3 rounded-lg font-medium inline-flex items-center no-print">
                    <i class="fas fa-arrow-left mr-2"></i>Reports
                </a>
                <button onclick="window.print()" class="bg-gradient-to-r from-[#772B10] to-[#8B3D15] text-white px-6 py-3 rounded-lg font-medium inline-flex items-center no-print">
                    <i class="fas fa-print mr-2"></i>Print
                </button>
                <a href="{{ route('agent.reports.clients.pdf', request()->query()) }}" class="bg-gradient-to-r from-red-500 to-red-600 text-white px-6 py-3 rounded-lg font-medium inline-flex items-center no-print">
                    <i class="fas fa-file-pdf mr-2"></i>PDF
                </a>
                <a href="{{ route('agent.reports.clients.excel', request()->query()) }}" class="bg-gradient-to-r from-green-500 to-green-600 text-white px-6 py-3 rounded-lg font-medium inline-flex items-center no-print">
                    <i class="fas fa-file-excel mr-2"></i>Excel
                </a>
            </div>
        </div>

        <div class="grid grid-cols-2 gap-4">
            <div class="bg-gradient-to-br from-[#772B10] to-[#8B3D15] rounded-lg p-4 text-white">
                <p class="text-white/80 text-sm font-medium">Total Clients</p>
                <h3 class="text-3xl font-bold mt-1">{{ $stats['total_clients'] }}</h3>
            </div>
            <div class="bg-gradient-to-br from-green-500 to-green-600 rounded-lg p-4 text-white">
                <p class="text-green-100 text-sm font-medium">Combined Net Worth</p>
                <h3 class="text-3xl font-bold mt-1">RM {{ number_format($stats['total_net_worth'], 2) }}</h3>
            </div>
        </div>
    </div>

    <div class="bg-white rounded-xl shadow-lg p-6 mb-6 no-print">
        <form method="GET" class="grid grid-cols-1 md:grid-cols-3 gap-3 items-end">
            <div>
                <label class="block text-xs font-semibold text-gray-700 mb-1.5">Status</label>
                <select name="status" class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm">
                    <option value="">All Status</option>
                    <option value="active" {{ request('status') === 'active' ? 'selected' : '' }}>Active</option>
                    <option value="inactive" {{ request('status') === 'inactive' ? 'selected' : '' }}>Inactive</option>
                </select>
            </div>
            <div>
                <label class="block text-xs font-semibold text-gray-700 mb-1.5">Search</label>
                <input type="text" name="search" class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm" placeholder="Name, IC, or email..." value="{{ request('search') }}">
            </div>
            <div>
                <button type="submit" class="bg-[#772B10] hover:bg-[#5A1F0D] text-white px-6 py-2 rounded-lg font-medium text-sm w-full">
                    <i class="fas fa-search mr-2"></i>Search
                </button>
            </div>
        </form>
    </div>

    <div class="bg-white rounded-xl shadow-lg overflow-hidden">
        <div class="overflow-x-auto">
            <table class="w-full text-sm">
                <thead class="bg-gray-50 border-b border-gray-200">
                    <tr>
                        <th class="px-3 py-3 text-left text-xs font-semibold text-gray-900">Client</th>
                        <th class="px-3 py-3 text-left text-xs font-semibold text-gray-900">Contact</th>
                        <th class="px-3 py-3 text-left text-xs font-semibold text-gray-900">Status</th>
                        <th class="px-3 py-3 text-right text-xs font-semibold text-gray-900">Net Worth</th>
                        <th class="px-3 py-3 text-center text-xs font-semibold text-gray-900">Nominees</th>
                        <th class="px-3 py-3 text-center text-xs font-semibold text-gray-900">Wills</th>
                        <th class="px-3 py-3 text-left text-xs font-semibold text-gray-900">Latest Will</th>
                        <th class="px-3 py-3 text-left text-xs font-semibold text-gray-900">KYC</th>
                        <th class="px-3 py-3 text-center text-xs font-semibold text-gray-900">Appts</th>
                        <th class="px-3 py-3 text-left text-xs font-semibold text-gray-900">Joined</th>
                        <th class="px-3 py-3 text-center text-xs font-semibold text-gray-900 no-print">Details</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-200">
                    @forelse($rows as $i => $row)
                        <tr class="hover:bg-gray-50 text-xs">
                            <td class="px-3 py-2 font-medium text-gray-900">{{ $row['name'] }}<br><span class="text-gray-400">{{ $row['ic_number'] }}</span></td>
                            <td class="px-3 py-2 text-gray-600">{{ $row['email'] }}<br>{{ $row['phone'] }}</td>
                            <td class="px-3 py-2">
                                <span class="px-2 py-0.5 rounded text-xs font-semibold {{ $row['status'] === 'active' ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-800' }}">{{ ucfirst($row['status'] ?? '-') }}</span>
                            </td>
                            <td class="px-3 py-2 text-right font-semibold">RM {{ number_format($row['net_worth'], 2) }}</td>
                            <td class="px-3 py-2 text-center">{{ count($row['nominees']) }}</td>
                            <td class="px-3 py-2 text-center">{{ $row['wills_count'] }}</td>
                            <td class="px-3 py-2 text-gray-600">{{ ucfirst(str_replace('_',' ',$row['latest_will_status'] ?? '-')) }}</td>
                            <td class="px-3 py-2 text-gray-600">{{ ucfirst($row['kyc_status'] ?? '-') }} ({{ $row['kyc_documents_count'] }})</td>
                            <td class="px-3 py-2 text-center">{{ $row['appointments_count'] }}</td>
                            <td class="px-3 py-2 text-gray-600">{{ \Carbon\Carbon::parse($row['created_at'])->format('M d, Y') }}</td>
                            <td class="px-3 py-2 text-center no-print">
                                <button type="button" onclick="document.getElementById('cli-{{ $i }}').classList.toggle('hidden')" class="text-[#772B10] hover:underline">
                                    <i class="fas fa-eye"></i>
                                </button>
                            </td>
                        </tr>
                        <tr id="cli-{{ $i }}" class="hidden bg-gray-50">
                            <td colspan="11" class="px-6 py-4">
                                <div class="grid grid-cols-1 md:grid-cols-3 gap-6 text-xs">
                                    <div>
                                        <p class="font-semibold text-gray-700 mb-2">Address</p>
                                        <p class="text-gray-600">{{ $row['address'] ?? 'Not provided' }}</p>
                                        <p class="text-gray-600 mt-2">Marital status: {{ ucfirst($row['marital_status'] ?? '-') }}</p>
                                    </div>
                                    <div>
                                        <p class="font-semibold text-gray-700 mb-2">Assets / Liabilities</p>
                                        <p class="text-gray-600">Assets: RM {{ number_format($row['assets_total'], 2) }}</p>
                                        <p class="text-gray-600">Liabilities: RM {{ number_format($row['liabilities_total'], 2) }}</p>
                                    </div>
                                    <div>
                                        <p class="font-semibold text-gray-700 mb-2">Nominees / Beneficiaries</p>
                                        @forelse($row['nominees'] as $nominee)
                                            <p class="text-gray-600">{{ $nominee['name'] }} ({{ $nominee['relationship'] ?? '-' }}) &mdash; {{ $nominee['percentage_share'] ?? 0 }}%</p>
                                        @empty
                                            <p class="text-gray-400">None recorded.</p>
                                        @endforelse
                                    </div>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr><td colspan="11" class="px-6 py-12 text-center text-gray-500">No clients found</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        @if($rows instanceof \Illuminate\Pagination\LengthAwarePaginator && $rows->hasPages())
            <div class="px-6 py-4 border-t border-gray-200 bg-gray-50 no-print">{{ $rows->links() }}</div>
        @endif
    </div>
</div>
<style>@media print { .no-print { display: none !important; } }</style>
@endsection