@extends('layouts.dashboard')

@section('title', 'Laporan Demografi & Sosial')
@section('page-title', 'Laporan Demografi & Sosial - HNSI 2026')

@push('styles')
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
<style>
    .card-grad { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color:#fff; }
    .stat { border-radius: 12px; padding: 16px; color:#fff; }
    .stat .n { font-size: 26px; font-weight: 700; margin: 6px 0; }
    .chart-box { height: 340px; }
    @media print { .no-print { display:none !important; } }
</style>
@endpush

@section('content')
<div class="container-fluid">
    <div class="d-flex justify-content-between align-items-start mb-3">
        <div class="no-print">
            <a href="{{ route('pelaporan.index') }}" class="btn btn-outline-secondary">
                <i class="bi bi-arrow-left me-1"></i>Kembali
            </a>
        </div>
        <div class="text-end">
            <h5 class="mb-1">Demografi & Sosial Anggota</h5>
            <small class="text-muted">Update: {{ now()->format('d/m/Y H:i') }}</small>
        </div>
    </div>

    {{-- Stat ringkas --}}
    <div class="row g-3 mb-4">
        <div class="col-12 col-md-4">
            <div class="stat" style="background: linear-gradient(135deg,#4facfe 0%,#00f2fe 100%);">
                <div class="small opacity-75">Total anggota aktif</div>
                <div class="n">{{ number_format($totalAnggota) }}</div>
                <div class="small opacity-75">Status organisasi A / kosong</div>
            </div>
        </div>
        <div class="col-12 col-md-4">
            <div class="stat" style="background: linear-gradient(135deg,#43e97b 0%,#38f9d7 100%);">
                <div class="small opacity-75">Rata-rata usia</div>
                <div class="n">{{ $rataUsia }} tahun</div>
                <div class="small opacity-75">Berdasarkan tanggal_lahir</div>
            </div>
        </div>
        <div class="col-12 col-md-4">
            <div class="stat" style="background: linear-gradient(135deg,#fa709a 0%,#fee140 100%); color:#212529;">
                <div class="small">Cetak laporan</div>
                <div class="n">Print</div>
                <button class="btn btn-dark no-print" onclick="window.print()">
                    <i class="bi bi-printer me-1"></i>Print
                </button>
            </div>
        </div>
    </div>

    {{-- Charts --}}
    <div class="row g-3 mb-4">
        <div class="col-12 col-lg-6">
            <div class="card shadow-sm border-0 h-100">
                <div class="card-header card-grad">
                    <strong>Distribusi Jenis Kelamin</strong>
                </div>
                <div class="card-body">
                    <div class="chart-box">
                        <canvas id="chartJK"></canvas>
                    </div>
                    <div class="table-responsive mt-3">
                        <table class="table table-sm mb-0">
                            <thead>
                                <tr>
                                    <th>Jenis kelamin</th>
                                    <th class="text-end">Jumlah</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($jk_labels as $i => $lbl)
                                <tr>
                                    <td>{{ $lbl }}</td>
                                    <td class="text-end">{{ number_format($jk_data[$i] ?? 0) }}</td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-12 col-lg-6">
            <div class="card shadow-sm border-0 h-100">
                <div class="card-header card-grad">
                    <strong>Distribusi Usia</strong>
                </div>
                <div class="card-body">
                    <div class="chart-box">
                        <canvas id="chartUsia"></canvas>
                    </div>
                    <div class="table-responsive mt-3">
                        <table class="table table-sm mb-0">
                            <thead>
                                <tr>
                                    <th>Rentang usia</th>
                                    <th class="text-end">Jumlah</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($usia_labels as $i => $lbl)
                                <tr>
                                    <td>{{ $lbl }}</td>
                                    <td class="text-end">{{ number_format($usia_data[$i] ?? 0) }}</td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Pendidikan --}}
    <div class="card shadow-sm border-0 mb-4">
        <div class="card-header card-grad">
            <strong>Tingkat Pendidikan</strong>
        </div>
        <div class="card-body">
            <div class="chart-box" style="height: 420px;">
                <canvas id="chartPend"></canvas>
            </div>

            <div class="table-responsive mt-3">
                <table class="table table-sm mb-0">
                    <thead>
                        <tr>
                            <th>Pendidikan</th>
                            <th class="text-end">Jumlah</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($pend_labels as $i => $lbl)
                        <tr>
                            <td>{{ $lbl }}</td>
                            <td class="text-end">{{ number_format($pend_data[$i] ?? 0) }}</td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    {{-- Detail --}}
    <div class="card shadow-sm border-0">
        <div class="card-header card-grad">
            <strong>Detail Data (sample paginate)</strong>
        </div>
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-striped mb-0">
                    <thead class="table-light">
                        <tr>
                            <th>Nama</th>
                            <th>JK</th>
                            <th>Tgl lahir</th>
                            <th>Usia</th>
                            <th>Pendidikan</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($detailDemografi as $row)
                        <tr>
                            <td>{{ $row->nama_lengkap }}</td>
                            <td>{{ $row->jenis_kelamin }}</td>
                            <td>{{ $row->tanggal_lahir ? \Carbon\Carbon::parse($row->tanggal_lahir)->format('d/m/Y') : '-' }}</td>
                            <td>{{ $row->tanggal_lahir ? \Carbon\Carbon::parse($row->tanggal_lahir)->age . ' th' : '-' }}</td>
                            <td>{{ $row->nama_pendidikan }}</td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="5" class="text-center py-4">Tidak ada data</td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>

        @if($detailDemografi->hasPages())
        <div class="card-footer bg-light">
            {{ $detailDemografi->links() }}
        </div>
        @endif
    </div>
</div>
@endsection

@push('scripts')
<script>
const jkLabels   = @json($jk_labels);
const jkData     = @json($jk_data);
const jkColors   = @json($jk_colors);

const usiaLabels = @json($usia_labels);
const usiaData   = @json($usia_data);
const usiaColors = @json($usia_colors);

const pendLabels = @json($pend_labels);
const pendData   = @json($pend_data);
const pendColors = @json($pend_colors);

// Doughnut JK
new Chart(document.getElementById('chartJK'), {
    type: 'doughnut',
    data: { labels: jkLabels, datasets: [{ data: jkData, backgroundColor: jkColors, borderWidth: 1 }] },
    options: { responsive:true, maintainAspectRatio:false, plugins:{ legend:{ position:'bottom' } } }
});

// Bar Usia
new Chart(document.getElementById('chartUsia'), {
    type: 'bar',
    data: { labels: usiaLabels, datasets: [{ label: 'Jumlah', data: usiaData, backgroundColor: usiaColors, borderRadius: 6 }] },
    options: { responsive:true, maintainAspectRatio:false, plugins:{ legend:{ display:false } }, scales:{ y:{ beginAtZero:true } } }
});

// Horizontal Bar Pendidikan
new Chart(document.getElementById('chartPend'), {
    type: 'bar',
    data: { labels: pendLabels, datasets: [{ label: 'Jumlah', data: pendData, backgroundColor: pendColors, borderRadius: 6 }] },
    options: { indexAxis:'y', responsive:true, maintainAspectRatio:false, plugins:{ legend:{ display:false } }, scales:{ x:{ beginAtZero:true } } }
});
</script>
@endpush