@extends('layouts.app')

@section('subtitle', 'Laporan Penduduk')

@section('content_body')
    {{-- PAGE HEADER --}}
    <x-page-header
        title="Laporan Penduduk"
        subtitle="Laporan data penduduk Desa Siofa Banua."
        :breadcrumbs="[
            'Dashboard'        => route('dashboard'),
            'Laporan'          => route('laporan.index'),
            'Laporan Penduduk' => route('laporan.penduduk'),
        ]"
    />

    <div class="container-fluid px-0">

        {{-- 1. FILTER BAR (Atas Card Statistik) --}}
        <div class="card border-0 shadow-sm mb-4" style="border-radius: 12px; background-color: #ffffff;">
            <div class="card-body p-3">
                <form method="GET" action="{{ route('laporan.penduduk') }}" id="filterPendudukForm">
                    <input type="hidden" name="detail" value="1">
                    <div class="row align-items-end" style="row-gap: 12px; col-gap: 8px;">
                        
                        <!-- Tahun -->
                        <div class="col-xl col-md-4 col-sm-6">
                            <label class="font-weight-bold mb-1 text-secondary text-xs" style="font-size: 0.78rem;">Tahun</label>
                            <select name="tahun" class="form-control form-control-sm font-weight-bold border bg-light text-muted" style="border-radius: 8px; height: 36px; font-size: 0.85rem; border-color: #cbd5e1 !important; -webkit-appearance: none; -moz-appearance: none; appearance: none; padding-right: 20px;">
                                <option value="2026" @selected(request('tahun') == '2026' || !request('tahun'))>2026</option>
                                <option value="2025" @selected(request('tahun') == '2025')>2025</option>
                            </select>
                        </div>
                        
                        <!-- Status Penduduk -->
                        <div class="col-xl col-md-4 col-sm-6">
                            <label class="font-weight-bold mb-1 text-secondary text-xs" style="font-size: 0.78rem;">Status Penduduk</label>
                            <select name="status_penduduk" class="form-control form-control-sm font-weight-bold border bg-light text-muted" style="border-radius: 8px; height: 36px; font-size: 0.85rem; border-color: #cbd5e1 !important;">
                                <option value="">Semua</option>
                                <option value="aktif" @selected(request('status_penduduk') == 'aktif')>Aktif</option>
                                <option value="pindah" @selected(request('status_penduduk') == 'pindah')>Pindah</option>
                                <option value="meninggal" @selected(request('status_penduduk') == 'meninggal')>Meninggal</option>
                            </select>
                        </div>
                        
                        <!-- Jenis Kelamin -->
                        <div class="col-xl col-md-4 col-sm-6">
                            <label class="font-weight-bold mb-1 text-secondary text-xs" style="font-size: 0.78rem;">Jenis Kelamin</label>
                            <select name="jenis_kelamin" class="form-control form-control-sm font-weight-bold border bg-light text-muted" style="border-radius: 8px; height: 36px; font-size: 0.85rem; border-color: #cbd5e1 !important;">
                                <option value="">Semua</option>
                                <option value="Laki-laki" @selected(request('jenis_kelamin') == 'Laki-laki')>Laki-laki</option>
                                <option value="Perempuan" @selected(request('jenis_kelamin') == 'Perempuan')>Perempuan</option>
                            </select>
                        </div>
                        
                        <!-- Agama -->
                        <div class="col-xl col-md-4 col-sm-6">
                            <label class="font-weight-bold mb-1 text-secondary text-xs" style="font-size: 0.78rem;">Agama</label>
                            <select name="agama" class="form-control form-control-sm font-weight-bold border bg-light text-muted" style="border-radius: 8px; height: 36px; font-size: 0.85rem; border-color: #cbd5e1 !important;">
                                <option value="">Semua</option>
                                <option value="Kristen" @selected(request('agama') == 'Kristen')>Kristen</option>
                                <option value="Katolik" @selected(request('agama') == 'Katolik')>Katolik</option>
                                <option value="Islam" @selected(request('agama') == 'Islam')>Islam</option>
                            </select>
                        </div>
                        
                        <!-- Dusun -->
                        <div class="col-xl col-md-4 col-sm-6">
                            <label class="font-weight-bold mb-1 text-secondary text-xs" style="font-size: 0.78rem;">Dusun</label>
                            <select name="dusun" class="form-control form-control-sm font-weight-bold border bg-light text-muted" style="border-radius: 8px; height: 36px; font-size: 0.85rem; border-color: #cbd5e1 !important;">
                                <option value="">Semua</option>
                                @foreach($dusuns as $dusun)
                                    <option value="{{ $dusun }}" @selected(request('dusun') == $dusun)>{{ $dusun }}</option>
                                @endforeach
                            </select>
                        </div>
                        
                        <!-- Submit Button -->
                        <div class="col-xl-auto col-md-4 col-sm-6">
                            <button type="submit" class="btn btn-success font-weight-bold w-100 d-inline-flex align-items-center justify-content-center" style="height: 36px; border-radius: 8px; font-size: 0.85rem; background-color: #0F766E !important; border-color: #0F766E !important; padding: 0 20px;">
                                <i class="fas fa-filter mr-1.5" style="margin-right: 6px;"></i> Terapkan Filter
                            </button>
                        </div>
                        
                    </div>
                </form>
            </div>
        </div>

        {{-- 2. 4 STATISTIC CARDS --}}
        <div class="row mb-4">
            <!-- Total Penduduk -->
            <div class="col-xl-3 col-lg-6 col-md-6 mb-4">
                <x-statistic-card
                    title="TOTAL PENDUDUK"
                    value="{{ number_format($totalPenduduk) }} Jiwa"
                    icon="fas fa-users"
                    color="primary"
                    description="Seluruh penduduk terdaftar"
                />
            </div>
            <!-- Laki-laki -->
            <div class="col-xl-3 col-lg-6 col-md-6 mb-4">
                <x-statistic-card
                    title="LAKI-LAKI"
                    value="{{ number_format($jumlahLakiLaki) }} Jiwa"
                    icon="fas fa-male"
                    color="info"
                    description="{{ $totalPenduduk > 0 ? round(($jumlahLakiLaki / $totalPenduduk) * 100, 1) : 0 }}% dari total penduduk"
                />
            </div>
            <!-- Perempuan -->
            <div class="col-xl-3 col-lg-6 col-md-6 mb-4">
                <x-statistic-card
                    title="PEREMPUAN"
                    value="{{ number_format($jumlahPerempuan) }} Jiwa"
                    icon="fas fa-female"
                    color="success"
                    description="{{ $totalPenduduk > 0 ? round(($jumlahPerempuan / $totalPenduduk) * 100, 1) : 0 }}% dari total penduduk"
                />
            </div>
            <!-- Total KK -->
            <div class="col-xl-3 col-lg-6 col-md-6 mb-4">
                <x-statistic-card
                    title="TOTAL KK"
                    value="{{ number_format($totalKK) }} KK"
                    icon="fas fa-home"
                    color="warning"
                    description="Kartu keluarga terdaftar"
                />
            </div>
        </div>

        {{-- 3. GRAFIK & DATATABLE (Side-by-Side) --}}
        <div class="row mb-4 d-flex align-items-stretch">
            
            <!-- Left (col-lg-5): Grafik Penduduk per Dusun -->
            <div class="col-lg-5 col-12 mb-4 mb-lg-0 d-flex flex-column">
                <div class="card border-0 shadow-sm h-100" style="border-radius: 12px; overflow: hidden;">
                    <div class="card-header bg-white border-0 pt-4 pb-0 px-4">
                        <h6 class="font-weight-bold mb-0 text-dark" style="font-size: 1.05rem;">
                            <i class="fas fa-map-marker-alt mr-2 text-primary" style="color: #0F766E !important;"></i>Grafik Penduduk per Dusun
                        </h6>
                        <small class="text-muted">Jumlah penduduk berdasarkan wilayah dusun</small>
                    </div>
                    <div class="card-body px-4 pb-4">
                        <div style="height: 280px; position: relative;">
                            <canvas id="dusunChart"></canvas>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Right (col-lg-7): DataTable -->
            <div class="col-lg-7 col-12 mb-0 d-flex flex-column">
                <x-datatable
                    id="pendudukLaporanTable"
                    :export-columns="[0, 1, 2, 3, 4, 5, 6]"
                    title="Laporan Data Penduduk"
                    placeholder="Cari NIK, nama, atau status..."
                >
                    <thead>
                        <tr>
                            <th>No</th>
                            <th>NIK</th>
                            <th>Nama Lengkap</th>
                            <th>Jenis Kelamin</th>
                            <th>Agama</th>
                            <th>Dusun</th>
                            <th>Status</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($penduduks as $pd)
                            <tr>
                                <td class="font-weight-bold text-secondary">{{ $loop->iteration }}</td>
                                <td class="text-secondary" style="font-size:0.85rem;">{{ $pd->nik }}</td>
                                <td class="font-weight-bold text-dark" style="font-size:0.88rem;">{{ $pd->nama_lengkap }}</td>
                                <td>
                                    @if($pd->jenis_kelamin === 'Laki-laki')
                                        <span class="badge" style="background:rgba(59, 130, 246, 0.1); color:#3B82F6; font-size: 0.72rem; font-weight: 700; border-radius: 4px; padding: 3px 6px;">
                                            Laki-laki
                                        </span>
                                    @else
                                        <span class="badge" style="background:rgba(236, 72, 153, 0.1); color:#EC4899; font-size: 0.72rem; font-weight: 700; border-radius: 4px; padding: 3px 6px;">
                                            Perempuan
                                        </span>
                                    @endif
                                </td>
                                <td>{{ $pd->agama }}</td>
                                <td>{{ $pd->kartuKeluarga->dusun ?? '-' }}</td>
                                <td>
                                    @if($pd->status_penduduk === 'aktif')
                                        <span class="badge" style="background-color:#E6F4EA; color:#137333; font-weight:700; font-size: 0.72rem; border-radius:4px; padding:3px 6px;">Aktif</span>
                                    @elseif($pd->status_penduduk === 'pindah')
                                        <span class="badge" style="background-color:#FEF7E0; color:#B06000; font-weight:700; font-size: 0.72rem; border-radius:4px; padding:3px 6px;">Pindah</span>
                                    @else
                                        <span class="badge" style="background-color:#FCE8E6; color:#C5221F; font-weight:700; font-size: 0.72rem; border-radius:4px; padding:3px 6px;">Meninggal</span>
                                    @endif
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </x-datatable>
            </div>

        </div>

    </div>
@endsection

@section('css')
    @parent
    <style>
        @media print {
            .btn, form, nav, .main-sidebar, .main-header { display: none !important; }
            .content-wrapper { margin-left: 0 !important; padding: 0 !important; }
            .card { border: 0 !important; box-shadow: none !important; }
        }
    </style>
@stop

@section('js')
    @parent
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>
    $(function() {
        // Excel and Print buttons trigger from Header
        $('#header_btn_excel').on('click', function() {
            $('#pendudukLaporanTable_btn_excel').click();
        });
        $('#header_btn_print').on('click', function() {
            $('#pendudukLaporanTable_btn_print').click();
        });

        // Vertical Bar Chart: Grafik Penduduk per Dusun
        const ctxDusun = document.getElementById('dusunChart').getContext('2d');
        
        const greenGradient = ctxDusun.createLinearGradient(0, 0, 0, 240);
        greenGradient.addColorStop(0, '#0F766E');
        greenGradient.addColorStop(1, '#14B8A6');

        new Chart(ctxDusun, {
            type: 'bar',
            data: {
                labels: @json($rekapDusun->pluck('dusun')),
                datasets: [{
                    label: 'Jumlah Penduduk (Jiwa)',
                    data: @json($rekapDusun->pluck('total')),
                    backgroundColor: greenGradient,
                    borderRadius: 6,
                    barThickness: 20
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: { display: false }
                },
                scales: {
                    y: {
                        beginAtZero: true,
                        grid: { color: '#f1f5f9' },
                        ticks: { precision: 0, font: { size: 9 } }
                    },
                    x: {
                        grid: { display: false },
                        ticks: { font: { size: 9, weight: 'bold' } }
                    }
                }
            }
        });
    });
    </script>
@stop