@php
    $initialSummaryData = data_get($initialWidgets, 'summary.data', []);
    $initialSummaryCards = data_get($initialSummaryData, 'summary_cards', []);
    $initialKkRows = data_get($initialSummaryData, 'nomor_kk_rows', []);
    $initialVillageRows = data_get($initialSummaryData, 'village_rows', []);
@endphp

<section class="member-dashboard-section" id="member-dashboard-statistik">
    <div class="member-dashboard-section__header">
        <div>
            <span class="member-dashboard-section__eyebrow">Statistik Kependudukan</span>
            <h2>Ringkasan Inti Warga</h2>
        </div>
        <p>Seluruh ringkasan dibaca dari master individu, keluarga, dan DPT tanpa angka dummy.</p>
    </div>

    <div class="member-stat-grid" id="memberDashboardSummaryCards">
        @foreach ($initialSummaryCards as $card)
            <article class="member-stat-card">
                <span>{{ $card['label'] }}</span>
                <strong>{{ number_format((float) $card['value']) }}</strong>
                <small>{{ $card['description'] }}</small>
            </article>
        @endforeach
    </div>

    <div class="member-dashboard-panels member-dashboard-panels--two">
        <article class="member-dashboard-panel">
            <div class="member-dashboard-panel__head">
                <div>
                    <h3>Nomor KK</h3>
                    <small>Jumlah penduduk berdasarkan nomor KK terbaca.</small>
                </div>
                <span class="member-widget-timestamp" id="memberDashboardSummaryUpdated"></span>
            </div>
            <div class="table-responsive">
                <table class="table align-middle member-dashboard-table" id="memberDashboardKkTable">
                    <thead>
                        <tr>
                            <th>No</th>
                            <th>Nomor KK</th>
                            <th>Jumlah</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($initialKkRows as $index => $row)
                            <tr>
                                <td>{{ $index + 1 }}</td>
                                <td>{{ $row['label'] }}</td>
                                <td>{{ $row['value'] }}</td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </article>

        <article class="member-dashboard-panel">
            <div class="member-dashboard-panel__head">
                <div>
                    <h3>Kecamatan</h3>
                    <small>Distribusi penduduk per kecamatan berdasarkan alamat master.</small>
                </div>
                <span class="member-widget-badge is-live">Live Widget</span>
            </div>
            <div class="member-chart-shell">
                <canvas id="memberDashboardDistrictChart"></canvas>
            </div>
            <div class="member-widget-feedback" id="memberDashboardDistrictState"></div>
        </article>
    </div>

    <article class="member-dashboard-panel">
        <div class="member-dashboard-panel__head">
            <div>
                <h3>Kelurahan</h3>
                <small>Top kelurahan dengan jumlah penduduk terbanyak yang sudah punya alamat aktif.</small>
            </div>
        </div>
        <div class="table-responsive">
            <table class="table align-middle member-dashboard-table" id="memberDashboardVillageTable">
                <thead>
                    <tr>
                        <th>No</th>
                        <th>Kelurahan</th>
                        <th>Kecamatan</th>
                        <th>Jumlah</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($initialVillageRows as $index => $row)
                        <tr>
                            <td>{{ $index + 1 }}</td>
                            <td>{{ $row['label'] }}</td>
                            <td>{{ $row['district'] }}</td>
                            <td>{{ $row['value'] }}</td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </article>
</section>