@extends('layouts.dashboard')

@section('title', 'Laporan Agama & Keluarga')

@section('content')
<div class="container-fluid">
    <div class="row mb-4">
        <div class="col-md-6">
            <h4 class="fw-bold text-primary">Profil Sosial & Keluarga</h4>
            <p class="text-muted">Analisis komposisi agama dan struktur rumah tangga anggota.</p>
        </div>
        <div class="col-md-6 text-end">
            <div class="d-inline-block border rounded p-2 bg-light">
                <small class="text-muted d-block">Rata-rata Tanggungan</small>
                <span class="fw-bold text-dark">{{ $rataRata }} Orang / KK</span>
            </div>
        </div>
    </div>

    <div class="row g-4">
        <div class="col-lg-5">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-header bg-white py-3">
                    <h6 class="mb-0 fw-bold"><i class="bi bi-person-check me-2"></i>Komposisi Agama</h6>
                </div>
                <div class="card-body">
                    <ul class="list-group list-group-flush">
                        @foreach($agamaStats as $a)
                        <li class="list-group-item d-flex justify-content-between align-items-center px-0">
                            {{ $a->nama_agama }}
                            <span class="badge bg-primary rounded-pill">{{ $a->total }}</span>
                        </li>
                        @endforeach
                    </ul>
                </div>
            </div>
        </div>

        <div class="col-lg-7">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-header bg-white py-3">
                    <h6 class="mb-0 fw-bold"><i class="bi bi-people me-2"></i>Struktur Keluarga (Tanggungan)</h6>
                </div>
                <div class="card-body">
                    <div class="row g-3">
                        @foreach($keluargaStats as $k)
                        <div class="col-md-6">
                            <div class="p-3 border rounded bg-light">
                                <small class="text-muted">{{ $k->hubungan }}</small>
                                <h4 class="mb-0 fw-bold">{{ number_format($k->total) }}</h4>
                                <small class="text-primary">Jiwa Terdata</small>
                            </div>
                        </div>
                        @endforeach
                    </div>

                    <div class="alert alert-info mt-4 border-0">
                        <i class="bi bi-info-circle me-2"></i>
                        Total tanggungan keluarga yang terdaftar dalam sistem adalah <strong>{{ number_format($totalKeluarga) }}</strong> jiwa.
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection