@extends('layouts.dashboard')

@section('dashboard_content')
<div class="container-fluid py-3">
    
    <!-- BANNER PENYAMBUTAN UTAMA -->
    <div class="card border-0 shadow-sm mb-4 text-white" style="background: linear-gradient(135deg, #198754 0%, #157347 100%); border-radius: 12px;">
        <div class="card-body p-4 d-flex align-items-center justify-content-between flex-wrap gap-3">
            <div>
                <h4 class="fw-bold mb-1">Selamat Datang Kembali, Sekretaris Desa! 👋</h4>
                <p class="mb-0 opacity-75 small">Kelola naskah publik desa dan pantau perkembangan data statistik kependudukan warga desa di sini.</p>
            </div>
            <div class="bg-white bg-opacity-25 rounded-circle p-3 d-flex align-items-center justify-content-center" style="width: 60px; height: 60px;">
                <i class="fa-solid fa-user-tie fs-2 text-white"></i>
            </div>
        </div>
    </div>

    <!-- NOTIFIKASI SUKSES / GAGAL -->
    @if(session('success'))
    <div class="alert alert-success alert-dismissible fade show border-0 shadow-sm mb-4" role="alert" style="border-radius: 8px;">
        <i class="fa-solid fa-circle-check me-2"></i> <strong>Berhasil!</strong> {{ session('success') }}
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
    @endif

    <!-- ========================================== -->
    <!-- FORM NASKAH PROFIL DESA                    -->
    <!-- ========================================== -->
    <div class="card border-0 shadow-sm mb-4 bg-white" style="border-radius: 12px; overflow: hidden;">
        <div class="card-header bg-light border-0 py-3">
            <h5 class="fw-bold text-dark m-0"><i class="fa-solid fa-file-lines text-success me-2"></i> Naskah Profil Publik Desa</h5>
        </div>
        <div class="card-body p-4">
            <form action="{{ route('dashboard.profil.update') }}" method="POST">
                @csrf
                @method('PUT')
                
                <div class="mb-4">
                    <label class="form-label fw-bold text-secondary small">Sejarah Desa</label>
                    <textarea name="sejarah" class="form-control bg-light" rows="4" placeholder="Tuliskan sejarah berdirinya desa secara lengkap..." style="border-radius: 8px;" required>{{ $profil->sejarah ?? '' }}</textarea>
                </div>

                <div class="row g-3 mb-4">
                    <div class="col-md-6">
                        <label class="form-label fw-bold text-secondary small">Visi Desa</label>
                        <textarea name="visi" class="form-control bg-light" rows="3" placeholder="Tuliskan visi desa..." style="border-radius: 8px;" required>{{ $profil->visi ?? '' }}</textarea>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label fw-bold text-secondary small">Misi Desa</label>
                        <textarea name="misi" class="form-control bg-light" rows="3" placeholder="Tuliskan misi desa (gunakan baris baru untuk penomoran)..." style="border-radius: 8px;" required>{{ $profil->misi ?? '' }}</textarea>
                    </div>
                </div>

                <button type="submit" class="btn btn-success fw-bold px-4 shadow-sm" style="border-radius: 8px;">
                    <i class="fa-solid fa-floppy-disk me-1"></i> Simpan Perubahan Profil
                </button>
            </form>
        </div>
    </div>

    <!-- ========================================== -->
    <!-- TABEL DATA KEPENDUDUKAN              -->
    <!-- ========================================== -->
    <div class="card border-0 shadow-sm bg-white" style="border-radius: 12px; overflow: hidden;">
        <div class="card-header bg-light border-0 py-3 d-flex justify-content-between align-items-center flex-wrap gap-2">
            <h5 class="fw-bold text-dark m-0"><i class="fa-solid fa-users text-primary me-2"></i> Data Kependudukan</h5>
            <div class="d-flex gap-2">
                <button class="btn btn-primary btn-sm fw-bold px-3 py-2 shadow-sm" data-bs-toggle="modal" data-bs-target="#modalTambah" style="border-radius: 8px;">
                    <i class="fa-solid fa-user-plus me-1"></i> Tambah Penduduk
                </button>
                <a href="{{ route('dashboard.penduduk.pdf') }}" class="btn btn-danger btn-sm fw-bold px-3 py-2 shadow-sm" style="border-radius: 8px;" target="_blank">
                    <i class="fa-solid fa-file-pdf me-1"></i> Cetak PDF
                </a>
            </div>
        </div>
        
        <div class="card-body p-4">
            <!-- Form Pencarian Aktif -->
            <form action="{{ route('dashboard.profil.index') }}" method="GET" class="mb-3">
                <div class="input-group" style="max-width: 350px;">
                    <input type="text" name="search" class="form-control bg-light" placeholder="Cari Nama atau NIK..." value="{{ request('search') }}" style="border-radius: 8px 0 0 8px;">
                    <button class="btn btn-primary" type="submit" style="border-radius: 0 8px 8px 0;"><i class="fa-solid fa-magnifying-glass"></i></button>
                </div>
            </form>

            <!-- Tabel Data -->
            <div class="table-responsive rounded border">
                <table class="table table-striped table-hover align-middle text-center mb-0">
                    <thead class="table-dark text-white">
                        <tr>
                            <th style="width: 5%;">No</th>
                            <th style="width: 15%;">NIK</th>
                            <th style="width: 25%;" class="text-start ps-3">Nama Lengkap</th>
                            <th style="width: 10%;">L/P</th>
                            <th style="width: 15%;">Pekerjaan</th>
                            <th style="width: 20%;" class="text-start ps-3">Alamat / Dusun</th>
                            <th style="width: 10%;">Aksi</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($penduduk as $index => $p)
                        <tr>
                            <td>{{ $penduduk->firstItem() + $index }}</td>
                            <td class="text-muted fw-mono small">{{ $p->nik ?? '-' }}</td>
                            <td class="text-start ps-3 fw-semibold text-secondary">{{ $p->name }}</td>
                            <td>
                                <span class="badge {{ $p->jenis_kelamin == 'Laki-laki' ? 'bg-primary-subtle text-primary' : 'bg-danger-subtle text-danger' }} px-2 py-1">
                                    {{ $p->jenis_kelamin == 'Laki-laki' ? 'L' : 'P' }}
                                </span>
                            </td>
                            <td>{{ $p->pekerjaan ?? '-' }}</td>
                            <td class="text-start ps-3 text-uppercase small text-muted">{{ $p->alamat ?? '-' }}</td>
                            <td>
                                <!-- Tombol Hapus Berfungsi -->
                                <form action="{{ route('dashboard.penduduk.destroy', $p->id) }}" method="POST" class="d-inline" onsubmit="return confirm('Apakah Anda yakin ingin menghapus data kependudukan {{ $p->name }}?')">
                                    @csrf 
                                    @method('DELETE')
                                    <button type="submit" class="btn btn-danger btn-sm px-2 py-1" style="border-radius: 6px;">Hapus</button>
                                </form>
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="7" class="text-muted py-4">Data tidak ditemukan atau belum ada record warga.</td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            <!-- Navigasi Paginasi Halaman -->
            <div class="mt-3 d-flex justify-content-end">
                {{ $penduduk->withQueryString()->links() }}
            </div>
        </div>
    </div>
</div>

<!-- ========================================== -->
<!-- MODAL POPUP: FORM TAMBAH PENDUDUK BARU     -->
<!-- ========================================== -->
<div class="modal fade" id="modalTambah" data-bs-backdrop="static" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content" style="border-radius: 12px; overflow: hidden;">
            <form action="{{ route('dashboard.penduduk.store') }}" method="POST">
                @csrf
                <div class="modal-header bg-primary text-white border-0 py-3">
                    <h5 class="modal-title fw-bold">Tambah Penduduk Baru</h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body p-4">
                    <div class="mb-3">
                        <label class="form-label fw-bold text-secondary small">NIK Warga (16 Digit)</label>
                        <input type="text" name="nik" class="form-control" maxlength="16" placeholder="Masukkan 16 digit NIK" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-bold text-secondary small">Nama Lengkap</label>
                        <input type="text" name="name" class="form-control" placeholder="Nama lengkap sesuai KTP" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-bold text-secondary small">Jenis Kelamin</label>
                        <select name="jenis_kelamin" class="form-select" required>
                            <option value="" selected disabled>-- Pilih Jenis Kelamin --</option>
                            <option value="Laki-laki">Laki-laki</option>
                            <option value="Perempuan">Perempuan</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-bold text-secondary small">Pekerjaan</label>
                        <input type="text" name="pekerjaan" class="form-control" placeholder="Contoh: Petani, Wiraswasta, PNS" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-bold text-secondary small">Alamat Wilayah Dusun</label>
                        <input type="text" name="alamat" class="form-control text-uppercase" placeholder="Contoh: RT.001 / RW.001 / DUSUN WERA" required>
                    </div>
                </div>
                <div class="modal-footer border-0 bg-light py-3">
                    <button type="button" class="btn btn-secondary fw-bold" data-bs-dismiss="modal" style="border-radius: 8px;">Batal</button>
                    <button type="submit" class="btn btn-primary fw-bold" style="border-radius: 8px;">Simpan Data Warga</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection