@extends('layouts.petugas')
@section('title','Detail Data Perumahan')
@section('page-title','Detail Data')
@section('content')
<div class="page-header">
    <div class="page-header-left">
        <div class="breadcrumb"><a href="{{ route('petugas.dashboard') }}">Dashboard</a><span class="breadcrumb-sep">›</span><a href="{{ route('petugas.data-perumahans.index') }}">Data Perumahan</a><span class="breadcrumb-sep">›</span><span>Detail</span></div>
        <h1 class="page-header-title">{{ $dataPerumahan->desa?->nama }}</h1>
        <p class="page-header-sub">{{ $dataPerumahan->desa?->kecamatan?->nama }} — Tahun {{ $dataPerumahan->tahunRekapan?->tahun }}</p>
    </div>
    <div class="page-header-actions">
        <span class="badge badge-{{ $dataPerumahan->status }}" style="font-size:.85rem;padding:6px 14px;">{{ ucfirst($dataPerumahan->status) }}</span>
        @if($dataPerumahan->status === 'diajukan')
        <a href="{{ route('petugas.verifikasi.show', $dataPerumahan) }}" class="btn btn-primary">Proses Verifikasi</a>
        @endif
        <a href="{{ route('petugas.data-perumahans.index') }}" class="btn btn-outline">Kembali</a>
    </div>
</div>
<div style="display:grid;grid-template-columns:2fr 1fr;gap:20px;max-width:900px;" class="show-grid">
    <div class="card">
        <div class="card-header"><span class="card-title">Data Perumahan</span></div>
        <div class="card-body">
            <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:20px;">
                @foreach([['Penduduk',$dataPerumahan->jumlah_penduduk,'var(--gray-900)'],['KK',$dataPerumahan->jumlah_kk,'var(--gray-900)'],['Rumah',$dataPerumahan->jumlah_rumah,'var(--gray-900)'],['RLH',$dataPerumahan->rlh,'var(--success)'],['RTLH',$dataPerumahan->rtlh,'var(--danger)'],['Backlog',$dataPerumahan->backlog,'#b45309']] as [$l,$v,$c])
                <div>
                    <div style="font-size:.74rem;color:var(--gray-500);font-weight:700;text-transform:uppercase;margin-bottom:4px;">{{ $l }}</div>
                    <div style="font-size:1.3rem;font-weight:800;color:{{ $c }};">{{ number_format($v) }}</div>
                </div>
                @endforeach
                <div style="grid-column:1/-1;">
                    <div style="font-size:.74rem;color:var(--gray-500);font-weight:700;text-transform:uppercase;margin-bottom:4px;">Luas Permukiman</div>
                    <div style="font-size:1.1rem;font-weight:700;">{{ number_format($dataPerumahan->luas_permukiman, 2) }} m²</div>
                </div>
            </div>
            @if($dataPerumahan->keterangan)
            <hr class="divider">
            <div><div style="font-size:.74rem;color:var(--gray-500);font-weight:700;text-transform:uppercase;margin-bottom:6px;">Keterangan</div>
            <p style="font-size:.9rem;">{{ $dataPerumahan->keterangan }}</p></div>
            @endif
        </div>
    </div>
    <div class="card">
        <div class="card-header"><span class="card-title">Info</span></div>
        <div class="card-body" style="padding:16px;">
            <div style="display:flex;flex-direction:column;gap:14px;">
                <div>
                    <div style="font-size:.74rem;color:var(--gray-500);font-weight:600;text-transform:uppercase;margin-bottom:3px;">Diinput</div>
                    <div style="font-weight:600;">{{ $dataPerumahan->creator?->name ?? '-' }}</div>
                    <div style="font-size:.78rem;color:var(--gray-500);">{{ $dataPerumahan->created_at?->format('d M Y, H:i') }}</div>
                </div>
                @if($dataPerumahan->verified_at)
                <hr class="divider" style="margin:0;">
                <div>
                    <div style="font-size:.74rem;color:var(--gray-500);font-weight:600;text-transform:uppercase;margin-bottom:3px;">Diverifikasi</div>
                    <div style="font-weight:600;">{{ $dataPerumahan->verifier?->name }}</div>
                    <div style="font-size:.78rem;color:var(--gray-500);">{{ $dataPerumahan->verified_at?->format('d M Y, H:i') }}</div>
                </div>
                @endif
            </div>
        </div>
    </div>
</div>
@push('styles')<style>.show-grid{display:grid;grid-template-columns:2fr 1fr;gap:20px;max-width:900px;}@media(max-width:768px){.show-grid{grid-template-columns:1fr;}}</style>@endpush
@endsection