@extends('layouts.app')
@section('title', 'Detail Kartu Keluarga — Satu Mimpi Loket')

@push('styles')
<style>
    .readonly-text { padding: 12px 16px; background: var(--bg-primary); border-radius: 8px; border: 1px solid var(--border); font-weight: 500; }
</style>
@endpush

@section('content')
<div style="max-width:600px">
    <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:20px">
        <a href="{{ route('gov.dashboard') }}" class="btn btn-secondary"><i class="bi bi-arrow-left"></i> Kembali</a>
        @if(in_array($data->status, ['draft', 'pending'], true))
            <a href="{{ route('gov.family_card.edit', $data->id) }}" class="btn btn-primary"><i class="bi bi-pencil-fill"></i> Edit</a>
        @else
            <button type="button" class="btn btn-secondary" disabled style="opacity:.55;cursor:not-allowed">
                <i class="bi bi-lock"></i> Tidak bisa diedit
            </button>
        @endif
    </div>
    <h1 class="page-title"><i class="bi bi-people" style="color:var(--accent)"></i> Detail Kartu Keluarga</h1>

    <div class="card">
        <div style="font-size:.85rem;font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:.5px;margin-bottom:12px">
            <i class="bi bi-info-circle"></i> Informasi KK
        </div>
        
        <div class="form-group">
            <label class="form-label">Jumlah Anggota Keluarga</label>
            <div class="readonly-text">{{ $data->jumlah_anggota }} Orang</div>
        </div>

        @include('gov.approval', ['data' => $data])
    </div>
</div>
@endsection