@extends('layouts.publik')

@section('title', 'Profil & Statistik Penduduk Desa')

@section('content')
<div class="container py-5">
    
    {{-- Judul Halaman --}}
    <div class="row mb-5">
        <div class="col-12 text-center">
            <h2 class="fw-bold text-success">Profil & Statistik Penduduk Desa</h2>
            <p class="text-muted">Informasi lengkap mengenai sejarah, visi, misi, serta rekapitulasi data kependudukan desa.</p>
            <hr class="w-25 mx-auto border-success">
        </div>
    </div>

    {{-- Bagian Sejarah, Visi, Misi --}}
    <div class="card shadow-sm border-0 mb-5">
        <div class="card-body p-4 p-md-5">
            
            {{-- Sejarah --}}
            <div class="mb-5">
                <h3 class="text-success fw-bold mb-3"><i class="fa-solid fa-book-open me-2"></i> Sejarah Desa</h3>
                <p class="text-muted" style="text-align: justify; line-height: 1.8;">
                    {{ $profil->sejarah ?? 'Sejarah desa belum diisi.' }}
                </p>
            </div>

            {{-- Visi & Misi --}}
            <div class="row g-4">
                <div class="col-md-6">
                    <div class="p-4 bg-light rounded-3 h-100 border-start border-primary border-4">
                        <h4 class="text-primary fw-bold mb-3"><i class="fa-solid fa-eye me-2"></i> Visi</h4>
                        <p class="text-muted mb-0" style="text-align: justify; line-height: 1.7;">
                            {{ $profil->visi ?? 'Visi belum diisi.' }}
                        </p>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="p-4 bg-light rounded-3 h-100 border-start border-warning border-4">
                        <h4 class="text-warning fw-bold mb-3"><i class="fa-solid fa-bullseye me-2"></i> Misi</h4>
                        <div class="text-muted" style="text-align: justify; line-height: 1.7;">
                            {!! $profil->misi ?? 'Misi belum diisi.' !!}
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>


    {{-- BAGIAN STATISTIK PENDUDUK (Sesuai Controller Anda) --}}
    <div class="row mb-4">
        <div class="col-12">
            <h3 class="fw-bold text-dark mb-3"><i class="fa-solid fa-chart-column me-2 text-success"></i> Statistik Kependudukan</h3>
        </div>

        {{-- Kartu Ringkasan Total --}}
        <div class="col-md-4 mb-3">
            <div class="card bg-success text-white shadow-sm border-0">
                <div class="card-body text-center py-4">
                    <h5 class="card-title text-uppercase fw-semibold">Total Penduduk</h5>
                    <h2 class="display-5 fw-bold mb-0">{{ $totalKeseluruhan }}</h2>
                    <small>Jiwa</small>
                </div>
            </div>
        </div>
        <div class="col-md-4 mb-3">
            <div class="card bg-primary text-white shadow-sm border-0">
                <div class="card-body text-center py-4">
                    <h5 class="card-title text-uppercase fw-semibold">Laki-Laki</h5>
                    <h2 class="display-5 fw-bold mb-0">{{ $totalLakiLaki }}</h2>
                    <small>Jiwa</small>
                </div>
            </div>
        </div>
        <div class="col-md-4 mb-3">
            <div class="card bg-danger text-white shadow-sm border-0">
                <div class="card-body text-center py-4">
                    <h5 class="card-title text-uppercase fw-semibold">Perempuan</h5>
                    <h2 class="display-5 fw-bold mb-0">{{ $totalPerempuan }}</h2>
                    <small>Jiwa</small>
                </div>
            </div>
        </div>
    </div>

    {{-- Tabel Rekapitulasi Per Wilayah --}}
    <div class="row">
        <div class="col-12">
            <div class="card shadow-sm border-0">
                <div class="card-header bg-white py-3">
                    <h5 class="mb-0 fw-bold text-secondary">Rekapitulasi Berdasarkan Wilayah</h5>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-bordered table-striped align-middle">
                            <thead class="table-light text-center">
                                <tr>
                                    <th>No</th>
                                    <th>Nama Wilayah</th>
                                    <th>Laki-Laki</th>
                                    <th>Perempuan</th>
                                    <th>Total Penduduk</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($rekapWilayah as $wilayah => $data)
                                <tr>
                                    <td class="text-center">{{ $loop->iteration }}</td>
                                    <td class="fw-bold">{{ $wilayah }}</td>
                                    <td class="text-center">{{ $data['laki_laki'] }}</td>
                                    <td class="text-center">{{ $data['perempuan'] }}</td>
                                    <td class="text-center fw-bold text-success">{{ $data['total'] }}</td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>
@endsection