@extends('layouts.app')
@section('title', __('Dashboard'))
@section('page-title', __('Dashboard'))
@section('content')
{{-- Stats Cards --}}
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
    @php $cards = [
        ['label' => __('Total Families'), 'value' => number_format($stats['total_families'] ?? 0), 'icon' => 'M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z', 'color' => 'blue'],
        ['label' => __('Active Cards'), 'value' => number_format($stats['active_cards'] ?? 0), 'icon' => 'M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z', 'color' => 'green'],
        ['label' => __('Pending Approvals'), 'value' => number_format($stats['pending_approval'] ?? 0), 'icon' => 'M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z', 'color' => 'yellow'],
        ['label' => __('Open Grievances'), 'value' => number_format($stats['open_grievances'] ?? 0), 'icon' => 'M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4', 'color' => 'red'],
    ]; @endphp
    @foreach($cards as $card)
        <div class="bg-white dark:bg-gray-800 rounded-xl shadow p-6">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm text-gray-500 dark:text-gray-400">{{ $card['label'] }}</p>
                    <p class="text-2xl font-bold mt-1">{{ $card['value'] }}</p>
                </div>
                <div class="w-12 h-12 bg-{{ $card['color'] }}-100 dark:bg-{{ $card['color'] }}-900/30 rounded-lg flex items-center justify-center">
                    <svg class="h-6 w-6 text-{{ $card['color'] }}-600 dark:text-{{ $card['color'] }}-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="{{ $card['icon'] }}" />
                    </svg>
                </div>
            </div>
        </div>
    @endforeach
</div>

<div class="grid lg:grid-cols-2 gap-6 mb-8">
    {{-- Quantile Distribution --}}
    <div class="bg-white dark:bg-gray-800 rounded-xl shadow p-6">
        <h3 class="font-bold text-lg mb-4">{{ __('Quantile Distribution') }}</h3>
        <div class="space-y-3">
            @php
                $quantileColors = [
                    'ultra_poor' => 'red', 'poor' => 'orange', 'at_risk_lower' => 'yellow',
                    'lower_middle' => 'blue', 'middle' => 'green', 'upper' => 'gray',
                ];
                $quantileLabels = [
                    'ultra_poor' => __('Ultra Poor'), 'poor' => __('Poor'), 'at_risk_lower' => __('At Risk (Lower)'),
                    'lower_middle' => __('Lower Middle'), 'middle' => __('Middle'), 'upper' => __('Upper'),
                ];
                $totalQuantile = collect($quantileDistribution)->sum('count');
            @endphp
            @foreach($quantileDistribution as $q)
                @php
                    $pct = $totalQuantile > 0 ? round(($q->count / $totalQuantile) * 100) : 0;
                    $color = $quantileColors[$q->quantile] ?? 'gray';
                @endphp
                <div>
                    <div class="flex justify-between text-sm mb-1">
                        <span>{{ $quantileLabels[$q->quantile] ?? $q->quantile }}</span>
                        <span class="font-semibold">{{ $q->count }} ({{ $pct }}%)</span>
                    </div>
                    <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5">
                        <div class="bg-{{ $color }}-500 h-2.5 rounded-full" style="width: {{ $pct }}%"></div>
                    </div>
                </div>
            @endforeach
        </div>
    </div>

    {{-- Monthly Trend --}}
    <div class="bg-white dark:bg-gray-800 rounded-xl shadow p-6">
        <h3 class="font-bold text-lg mb-4">{{ __('Monthly Registration Trend') }}</h3>
        @if(count($monthlyTrend) > 0)
            <div class="space-y-2">
                @php $maxCount = collect($monthlyTrend)->max('count') ?: 1; @endphp
                @foreach($monthlyTrend as $month)
                    @php $pct = round(($month->count / $maxCount) * 100); @endphp
                    <div class="flex items-center space-x-3">
                        <span class="text-xs text-gray-500 w-20">{{ $month->month }}</span>
                        <div class="flex-1 bg-gray-200 dark:bg-gray-700 rounded-full h-4">
                            <div class="bg-green-500 h-4 rounded-full flex items-center justify-end pr-2" style="width: {{ max($pct, 5) }}%">
                                <span class="text-xs text-white font-semibold">{{ $month->count }}</span>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        @else
            <p class="text-gray-500 text-sm">{{ __('No results found') }}</p>
        @endif
    </div>
</div>

{{-- Division Summary --}}
<div class="bg-white dark:bg-gray-800 rounded-xl shadow p-6">
    <h3 class="font-bold text-lg mb-4">{{ __('Division Summary') }}</h3>
    <div class="overflow-x-auto">
        <table class="w-full text-sm">
            <thead>
                <tr class="border-b dark:border-gray-700">
                    <th class="text-left py-3 px-4">{{ __('Division') }}</th>
                    <th class="text-right py-3 px-4">{{ __('Total Families') }}</th>
                    <th class="text-right py-3 px-4">{{ __('Active') }}</th>
                    <th class="text-right py-3 px-4">{{ __('Pending') }}</th>
                </tr>
            </thead>
            <tbody>
                @forelse($divisionSummary as $div)
                    <tr class="border-b dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700/50">
                        <td class="py-3 px-4 font-medium">{{ $div->name }}</td>
                        <td class="py-3 px-4 text-right">{{ number_format($div->total ?? 0) }}</td>
                        <td class="py-3 px-4 text-right text-green-600">{{ number_format($div->active ?? 0) }}</td>
                        <td class="py-3 px-4 text-right text-yellow-600">{{ number_format($div->pending ?? 0) }}</td>
                    </tr>
                @empty
                    <tr><td colspan="4" class="py-6 text-center text-gray-500">{{ __('No results found') }}</td></tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>
@endsection