@extends('layouts.portal')

@section('title', 'Client Reports')
@section('page_title', 'Client Reports')
@section('page_subtitle', 'Complete client information with personal details, assets, liabilities, and wills')

@section('sidebar')
    @include('admin.partials.sidebar', ['active' => 'reports-clients'])
@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">Client Reports</h2>
                <p class="text-red-100 text-sm mb-3">Complete client information with personal details, assets, liabilities, and wills</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-users mr-2"></i>
                        {{ $stats['total_clients'] }} Total Clients
                    </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-bar text-2xl"></i>
                </div>
            </div>
        </div>
    </div>

    <!-- Stats Cards -->
    <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4 mb-6">
        <div class="bg-gradient-to-br from-blue-600 to-blue-700 rounded-lg p-4 text-white shadow-lg">
            <div class="flex items-center justify-between mb-2">
                <h3 class="text-lg font-semibold">Total Clients</h3>
                <i class="fas fa-users text-xl opacity-80"></i>
            </div>
            <div class="text-3xl font-bold mb-1">{{ $stats['total_clients'] }}</div>
            <div class="text-sm opacity-90">All clients</div>
        </div>
        
        <div class="bg-gradient-to-br from-green-600 to-green-700 rounded-lg p-4 text-white shadow-lg">
            <div class="flex items-center justify-between mb-2">
                <h3 class="text-lg font-semibold">Active</h3>
                <i class="fas fa-check-circle text-xl opacity-80"></i>
            </div>
            <div class="text-3xl font-bold mb-1">{{ $stats['active_clients'] }}</div>
            <div class="text-sm opacity-90">Active accounts</div>
        </div>
        
        <div class="bg-gradient-to-br from-yellow-600 to-orange-600 rounded-lg p-4 text-white shadow-lg">
            <div class="flex items-center justify-between mb-2">
                <h3 class="text-lg font-semibold">Inactive</h3>
                <i class="fas fa-clock text-xl opacity-80"></i>
            </div>
            <div class="text-3xl font-bold mb-1">{{ $stats['inactive_clients'] }}</div>
            <div class="text-sm opacity-90">Inactive accounts</div>
        </div>
        
        <div class="bg-gradient-to-br from-cyan-600 to-cyan-700 rounded-lg p-4 text-white shadow-lg">
            <div class="flex items-center justify-between mb-2">
                <h3 class="text-lg font-semibold">Total Assets</h3>
                <i class="fas fa-dollar-sign text-xl opacity-80"></i>
            </div>
            <div class="text-3xl font-bold mb-1">RM {{ number_format($stats['total_assets_value'], 0) }}</div>
            <div class="text-sm opacity-90">Asset value</div>
        </div>
        
        <div class="bg-gradient-to-br from-red-600 to-red-700 rounded-lg p-4 text-white shadow-lg">
            <div class="flex items-center justify-between mb-2">
                <h3 class="text-lg font-semibold">Total Liabilities</h3>
                <i class="fas fa-minus-circle text-xl opacity-80"></i>
            </div>
            <div class="text-3xl font-bold mb-1">RM {{ number_format($stats['total_liabilities_value'], 0) }}</div>
            <div class="text-sm opacity-90">Liability value</div>
        </div>
        
        <div class="bg-gradient-to-br from-gray-600 to-gray-700 rounded-lg p-4 text-white shadow-lg">
            <div class="flex items-center justify-between mb-2">
                <h3 class="text-lg font-semibold">Total Wills</h3>
                <i class="fas fa-file-contract text-xl opacity-80"></i>
            </div>
            <div class="text-3xl font-bold mb-1">{{ $stats['total_wills'] }}</div>
            <div class="text-sm opacity-90">Will documents</div>
        </div>
    </div>

    <!-- Filters -->
    <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">Filters</h3>
        </div>
        <div class="p-6">
            <form method="GET" action="{{ route('admin.reports.enhanced.clients') }}">
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-4 mb-4">
                    <div>
                        <label for="client_id" class="block text-sm font-semibold text-gray-700 mb-2">Client</label>
                        <select class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-red-500 text-sm" id="client_id" name="client_id">
                            <option value="">All Clients</option>
                            @foreach($allClients as $client)
                            <option value="{{ $client->id }}" {{ ($filters['client_id'] ?? '') == $client->id ? 'selected' : '' }}>
                                {{ $client->first_name }} {{ $client->last_name }}
                            </option>
                            @endforeach
                        </select>
                    </div>
                    <div>
                        <label for="status" class="block text-sm font-semibold text-gray-700 mb-2">Status</label>
                        <select class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-red-500 text-sm" id="status" name="status">
                            <option value="">All Status</option>
                            <option value="active" {{ ($filters['status'] ?? '') == 'active' ? 'selected' : '' }}>Active</option>
                            <option value="inactive" {{ ($filters['status'] ?? '') == 'inactive' ? 'selected' : '' }}>Inactive</option>
                        </select>
                    </div>
                    <div>
                        <label for="created_by" class="block text-sm font-semibold text-gray-700 mb-2">Created By</label>
                        <select class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-red-500 text-sm" id="created_by" name="created_by">
                            <option value="">All Users</option>
                            @foreach($users as $user)
                            <option value="{{ $user->id }}" {{ ($filters['created_by'] ?? '') == $user->id ? 'selected' : '' }}>
                                {{ $user->first_name }} {{ $user->last_name }}
                            </option>
                            @endforeach
                        </select>
                    </div>
                    <div>
                        <label for="start_date" class="block text-sm font-semibold text-gray-700 mb-2">Start Date</label>
                        <x-date-picker
                    name="start_date"
                    value="{{ $filters["
                    class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-red-500 text-sm"
                />
                    </div>
                    <div>
                        <label for="end_date" class="block text-sm font-semibold text-gray-700 mb-2">End Date</label>
                        <x-date-picker
                    name="end_date"
                    value="{{ $filters["
                    class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-red-500 text-sm"
                />
                    </div>
                </div>
                <div class="flex space-x-2">
                    <button type="submit" class="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors duration-200 text-sm">
                        Apply
                    </button>
                    <a href="{{ route('admin.reports.enhanced.clients') }}" class="px-4 py-2 bg-gray-600 text-white rounded-lg hover:bg-gray-700 transition-colors duration-200 text-sm">
                        Clear
                    </a>
                    <button type="button" class="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors duration-200 text-sm" onclick="exportClients()">
                        <i class="fas fa-download mr-2"></i> Export
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- Clients Table -->
    <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">Client Details</h3>
        </div>
        <div class="p-6">
            <div class="overflow-x-auto">
                <table class="w-full">
                    <thead>
                        <tr class="border-b border-gray-200">
                            <th class="text-left py-3 px-4 text-sm font-semibold text-gray-700">ID</th>
                            <th class="text-left py-3 px-4 text-sm font-semibold text-gray-700">Name</th>
                            <th class="text-left py-3 px-4 text-sm font-semibold text-gray-700">Email</th>
                            <th class="text-left py-3 px-4 text-sm font-semibold text-gray-700">Phone</th>
                            <th class="text-left py-3 px-4 text-sm font-semibold text-gray-700">IC Number</th>
                            <th class="text-left py-3 px-4 text-sm font-semibold text-gray-700">Status</th>
                            <th class="text-left py-3 px-4 text-sm font-semibold text-gray-700">Assets Value</th>
                            <th class="text-left py-3 px-4 text-sm font-semibold text-gray-700">Liabilities</th>
                            <th class="text-left py-3 px-4 text-sm font-semibold text-gray-700">Net Worth</th>
                            <th class="text-left py-3 px-4 text-sm font-semibold text-gray-700">Wills</th>
                            <th class="text-left py-3 px-4 text-sm font-semibold text-gray-700">Created By</th>
                            <th class="text-left py-3 px-4 text-sm font-semibold text-gray-700">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($clients as $client)
                        <tr class="border-b border-gray-100 hover:bg-gray-50">
                            <td class="py-3 px-4 text-sm">{{ $client->id }}</td>
                            <td class="py-3 px-4 text-sm">
                                <strong class="block">{{ $client->first_name }} {{ $client->last_name }}</strong>
                                <small class="text-gray-500">{{ $client->address }}</small>
                            </td>
                            <td class="py-3 px-4 text-sm">{{ $client->email }}</td>
                            <td class="py-3 px-4 text-sm">{{ $client->phone }}</td>
                            <td class="py-3 px-4 text-sm">{{ $client->ic_number ?? 'N/A' }}</td>
                            <td class="py-3 px-4 text-sm">
                                <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium 
                                    {{ $client->status == 'active' ? 'bg-green-100 text-green-800' : 'bg-yellow-100 text-yellow-800' }}">
                                    {{ ucfirst($client->status) }}
                                </span>
                            </td>
                            <td class="py-3 px-4 text-sm font-medium">RM {{ number_format($client->assets->sum('value'), 0) }}</td>
                            <td class="py-3 px-4 text-sm font-medium">RM {{ number_format($client->liabilities->sum('amount'), 0) }}</td>
                            <td class="py-3 px-4 text-sm font-bold">RM {{ number_format($client->assets->sum('value') - $client->liabilities->sum('amount'), 0) }}</td>
                            <td class="py-3 px-4 text-sm">
                                <div class="flex items-center space-x-1">
                                    <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-800">{{ $client->wills->count() }}</span>
                                    <span class="text-gray-500 text-xs">({{ $client->wills->where('status', 'completed')->count() }} completed)</span>
                                </div>
                            </td>
                            <td class="py-3 px-4 text-sm">
                                @if($client->createdBy)
                                    {{ $client->createdBy->email }}
                                @else
                                    N/A
                                @endif
                            </td>
                            <td class="py-3 px-4 text-sm">
                                <div class="flex space-x-2">
                                    <a href="{{ route('admin.reports.enhanced.client_detail', $client->id) }}" class="px-2 py-1 bg-blue-600 text-white rounded hover:bg-blue-700 transition-colors duration-200" title="View Details">
                                        <i class="fas fa-eye"></i>
                                    </a>
                                    <a href="{{ route('admin.clients.edit', $client->id) }}" class="px-2 py-1 bg-gray-600 text-white rounded hover:bg-gray-700 transition-colors duration-200" title="Edit Client">
                                        <i class="fas fa-edit"></i>
                                    </a>
                                </div>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
            
            <!-- Pagination -->
            <div class="flex items-center justify-between mt-4">
                <div class="text-sm text-gray-700">
                    Showing {{ $clients->firstItem() }} to {{ $clients->lastItem() }} of {{ $clients->total() }} entries
                </div>
                {{ $clients->links() }}
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    function exportClients() {
        const form = document.createElement('form');
        form.method = 'POST';
        form.action = '{{ route('admin.reports.enhanced.export.clients') }}';
        
        // Add CSRF token
        const csrf = document.createElement('input');
        csrf.type = 'hidden';
        csrf.name = '_token';
        csrf.value = '{{ csrf_token() }}';
        form.appendChild(csrf);
        
        // Add filters
        const filters = ['client_id', 'status', 'created_by', 'start_date', 'end_date'];
        filters.forEach(filter => {
            const element = document.getElementById(filter);
            if (element && element.value) {
                const input = document.createElement('input');
                input.type = 'hidden';
                input.name = filter;
                input.value = element.value;
                form.appendChild(input);
            }
        });
        
        document.body.appendChild(form);
        form.submit();
        document.body.removeChild(form);
    }
</script>
@endpush