@extends('layouts.admin.master')

@section('content')
    <div class="container-fluid py-3">
        <div class="d-flex flex-column flex-lg-row justify-content-between align-items-lg-center gap-3 mb-4">
            <div>
                <h3 class="mb-1">{{ $keluarga->nomor_kk }}</h3>
                <p class="text-muted mb-0">Detail keluarga dan kepala keluarga yang tersinkron dari master data individu.</p>
            </div>
            <div class="d-flex flex-wrap gap-2">
                <a href="{{ route('admin.penduduk.keluarga') }}" class="btn btn-outline-secondary btn-sm">Kembali ke Data Keluarga</a>
                @if ($keluarga->kepalaKeluarga)
                    <a href="{{ route('admin.penduduk.master.show', $keluarga->kepalaKeluarga) }}" class="btn btn-outline-primary btn-sm">Master Kepala Keluarga</a>
                @endif
            </div>
        </div>

        @if (session('success'))
            <div class="alert alert-success">{{ session('success') }}</div>
        @endif

        <div class="row g-3 mb-4">
            <div class="col-md-6 col-xl-3"><div class="card border-0 shadow-sm h-100"><div class="card-body"><div class="small text-muted mb-1">Kepala Keluarga</div><div class="fw-semibold fs-5">{{ $keluarga->kepalaKeluarga?->nama ?: 'Belum ditetapkan' }}</div><div class="small text-muted mt-2">{{ $keluarga->kepalaKeluarga?->nomor_ktp ?: '-' }}</div></div></div></div>
            <div class="col-md-6 col-xl-3"><div class="card border-0 shadow-sm h-100"><div class="card-body"><div class="small text-muted mb-1">Anggota Aktif</div><div class="fw-semibold fs-5">{{ $keluarga->anggotaAktif->count() }}</div></div></div></div>
            <div class="col-md-6 col-xl-3"><div class="card border-0 shadow-sm h-100"><div class="card-body"><div class="small text-muted mb-1">Status</div><div class="fw-semibold fs-5">{{ $keluarga->status ?: 'Belum diatur' }}</div></div></div></div>
            <div class="col-md-6 col-xl-3"><div class="card border-0 shadow-sm h-100"><div class="card-body"><div class="small text-muted mb-1">Terakhir Diverifikasi</div><div class="fw-semibold fs-5">{{ optional($keluarga->verified_at)->format('d M Y') ?: 'Belum' }}</div></div></div></div>
        </div>

        <div class="row g-3">
            <div class="col-xl-5">
                <div class="card border-0 shadow-sm mb-3">
                    <div class="card-header bg-white border-0 pt-4"><h5 class="mb-1">Metadata Keluarga</h5></div>
                    <div class="card-body pt-2">
                        <form method="POST" action="{{ route('admin.penduduk.keluarga.update', $keluarga) }}" class="row g-3">
                            @csrf
                            <div class="col-12">
                                <label class="form-label">Alamat</label>
                                <textarea name="alamat" rows="3" class="form-control">{{ old('alamat', $keluarga->alamat) }}</textarea>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">RT</label>
                                <input type="text" name="rt" value="{{ old('rt', $keluarga->rt) }}" class="form-control">
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">RW</label>
                                <input type="text" name="rw" value="{{ old('rw', $keluarga->rw) }}" class="form-control">
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">Kode Pos</label>
                                <input type="text" name="kode_pos" value="{{ old('kode_pos', $keluarga->kode_pos) }}" class="form-control">
                            </div>
                            <div class="col-12">
                                <label class="form-label">Status</label>
                                <select name="status" class="form-select">
                                    @foreach ($status_options as $statusOption)
                                        <option value="{{ $statusOption }}" @selected(old('status', $keluarga->status) === $statusOption)>{{ $statusOption }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-12 d-grid">
                                <button type="submit" class="btn btn-primary">Simpan Metadata</button>
                            </div>
                        </form>
                    </div>
                </div>

                <div class="card border-0 shadow-sm">
                    <div class="card-header bg-white border-0 pt-4"><h5 class="mb-1">Wilayah & Audit</h5></div>
                    <div class="card-body pt-2">
                        <div class="small text-muted">Wilayah</div>
                        <div class="fw-semibold mb-3">
                            {{ $keluarga->province?->name ?: '-' }}<br>
                            <span class="small text-muted">{{ $keluarga->regency?->name ?: '-' }}, {{ $keluarga->district?->name ?: '-' }}, {{ $keluarga->village?->name ?: '-' }}, {{ $keluarga->lingkungan?->name ?: '-' }}</span>
                        </div>
                        <div class="small text-muted">Sumber Data</div>
                        <div class="fw-semibold mb-3">{{ $keluarga->sumber_data ?: 'Migrasi' }}</div>
                        <div class="small text-muted">Audit</div>
                        <div class="small">
                            Dibuat: {{ optional($keluarga->created_at)->format('d M Y H:i') ?: '-' }}<br>
                            Diubah: {{ optional($keluarga->updated_at)->format('d M Y H:i') ?: '-' }}<br>
                            Verifikasi: {{ optional($keluarga->verified_at)->format('d M Y H:i') ?: '-' }}
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-xl-7">
                <div class="card border-0 shadow-sm mb-3">
                    <div class="card-header bg-white border-0 pt-4"><h5 class="mb-1">Sinkronisasi & Penetapan Kepala Keluarga</h5></div>
                    <div class="card-body pt-2">
                        <div class="d-flex flex-column flex-lg-row gap-3">
                            <form method="POST" action="{{ route('admin.penduduk.keluarga.sync', $keluarga) }}" class="flex-fill">
                                @csrf
                                <div class="border rounded-4 p-3 bg-light h-100">
                                    <div class="fw-semibold mb-2">Sinkron dari Master Individu</div>
                                    <p class="text-muted small mb-3">Tarik ulang semua penduduk yang memakai nomor KK ini, lalu segarkan struktur anggota aktifnya.</p>
                                    <button type="submit" class="btn btn-outline-primary btn-sm">Jalankan Sinkronisasi</button>
                                </div>
                            </form>

                            <form method="POST" action="{{ route('admin.penduduk.keluarga.kepala', $keluarga) }}" class="flex-fill">
                                @csrf
                                <div class="border rounded-4 p-3 bg-light h-100">
                                    <div class="fw-semibold mb-2">Tetapkan Kepala Keluarga</div>
                                    <div class="mb-3">
                                        <label class="form-label">Pilih Anggota</label>
                                        <select name="penduduk_id" class="form-select" required>
                                            @foreach ($keluarga->anggotaAktif as $anggota)
                                                <option value="{{ $anggota->penduduk_id }}" @selected($keluarga->kepala_keluarga_penduduk_id === $anggota->penduduk_id)>{{ $anggota->penduduk?->nama ?: 'Penduduk tidak ditemukan' }} - {{ $anggota->peran }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label">Peran Kepala Lama</label>
                                        <select name="previous_head_role" class="form-select">
                                            @foreach ($previous_head_roles as $role)
                                                <option value="{{ $role }}">{{ $role }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <button type="submit" class="btn btn-primary btn-sm">Tetapkan Kepala Keluarga</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>

                <div class="card border-0 shadow-sm">
                    <div class="card-header bg-white border-0 pt-4"><h5 class="mb-1">Anggota Aktif</h5></div>
                    <div class="card-body pt-2">
                        <div class="table-responsive">
                            <table class="table align-middle">
                                <thead>
                                    <tr>
                                        <th>Nama</th>
                                        <th>Peran</th>
                                        <th>Akun</th>
                                        <th>DPT</th>
                                        <th class="text-end">Aksi</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse ($keluarga->anggotaAktif->sortBy(fn ($anggota) => $anggota->is_kepala_keluarga ? 0 : 1) as $anggota)
                                        <tr>
                                            <td>
                                                <div class="fw-semibold">{{ $anggota->penduduk?->nama ?: 'Penduduk tidak ditemukan' }}</div>
                                                <div class="small text-muted">{{ $anggota->penduduk?->nomor_ktp ?: '-' }}</div>
                                            </td>
                                            <td><span class="badge {{ $anggota->is_kepala_keluarga ? 'bg-primary' : 'bg-light text-dark' }}">{{ $anggota->peran }}</span></td>
                                            <td>
                                                <div class="small">{{ $anggota->penduduk?->user?->username ?: 'Belum ada akun' }}</div>
                                                <div class="small text-muted">{{ $anggota->penduduk?->user?->email ?: '-' }}</div>
                                            </td>
                                            <td><span class="badge {{ $anggota->penduduk?->dptTerdaftar ? 'bg-success' : 'bg-secondary' }}">{{ $anggota->penduduk?->dptTerdaftar?->status_verifikasi ?: 'Belum DPT' }}</span></td>
                                            <td class="text-end">
                                                @if ($anggota->penduduk)
                                                    <a href="{{ route('admin.penduduk.master.show', $anggota->penduduk) }}" class="btn btn-outline-primary btn-sm">Master</a>
                                                @endif
                                            </td>
                                        </tr>
                                    @empty
                                        <tr><td colspan="5" class="text-center text-muted py-4">Belum ada anggota aktif di keluarga ini.</td></tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection