@extends('layouts.admin')
@section('title','Detail Data Perumahan')
@section('page-title','Detail Data Perumahan')

@section('content')
<div class="page-header">
    <div class="page-header-left">
        <div class="breadcrumb"><a href="{{ route('admin.dashboard') }}">Dashboard</a><span class="breadcrumb-sep">›</span><a href="{{ route('admin.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 }} &middot; 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>
        <a href="{{ route('admin.data-perumahans.edit', $dataPerumahan) }}" class="btn btn-outline">Edit</a>
        <a href="{{ route('admin.data-perumahans.index') }}" class="btn btn-secondary">Kembali</a>
    </div>
</div>

@if($dataPerumahan->catatan_verifikasi)
<div class="alert alert-warning">
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" width="18" height="18" style="flex-shrink:0"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" /></svg>
    <div><strong>Catatan Verifikasi:</strong> {{ $dataPerumahan->catatan_verifikasi }}</div>
</div>
@endif

<div style="display:grid;grid-template-columns:2fr 1fr;gap:20px;" class="detail-grid">
    <div>
        <div class="card" style="margin-bottom:16px;">
            <div class="card-header"><span class="card-title">Data Kependudukan & Perumahan</span></div>
            <div class="card-body">
                <div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px;">
                    <div>
                        <div style="font-size:.75rem;color:var(--gray-500);font-weight:600;text-transform:uppercase;margin-bottom:4px;">Jumlah Penduduk</div>
                        <div style="font-size:1.4rem;font-weight:800;">{{ number_format($dataPerumahan->jumlah_penduduk) }}</div>
                    </div>
                    <div>
                        <div style="font-size:.75rem;color:var(--gray-500);font-weight:600;text-transform:uppercase;margin-bottom:4px;">Jumlah KK</div>
                        <div style="font-size:1.4rem;font-weight:800;">{{ number_format($dataPerumahan->jumlah_kk) }}</div>
                    </div>
                    <div>
                        <div style="font-size:.75rem;color:var(--gray-500);font-weight:600;text-transform:uppercase;margin-bottom:4px;">Jumlah Rumah</div>
                        <div style="font-size:1.4rem;font-weight:800;">{{ number_format($dataPerumahan->jumlah_rumah) }}</div>
                    </div>
                    <div>
                        <div style="font-size:.75rem;color:var(--gray-500);font-weight:600;text-transform:uppercase;margin-bottom:4px;">RLH</div>
                        <div style="font-size:1.4rem;font-weight:800;color:var(--success);">{{ number_format($dataPerumahan->rlh) }}</div>
                    </div>
                    <div>
                        <div style="font-size:.75rem;color:var(--gray-500);font-weight:600;text-transform:uppercase;margin-bottom:4px;">RTLH</div>
                        <div style="font-size:1.4rem;font-weight:800;color:var(--danger);">{{ number_format($dataPerumahan->rtlh) }}</div>
                    </div>
                    <div>
                        <div style="font-size:.75rem;color:var(--gray-500);font-weight:600;text-transform:uppercase;margin-bottom:4px;">Backlog</div>
                        <div style="font-size:1.4rem;font-weight:800;color:#b45309;">{{ number_format($dataPerumahan->backlog) }}</div>
                    </div>
                    <div style="grid-column:1/-1;">
                        <div style="font-size:.75rem;color:var(--gray-500);font-weight:600;text-transform:uppercase;margin-bottom:4px;">Luas Permukiman</div>
                        <div style="font-size:1.2rem;font-weight:700;">{{ number_format($dataPerumahan->luas_permukiman, 2) }} m²</div>
                    </div>
                </div>

                @if($dataPerumahan->keterangan)
                <hr class="divider">
                <div>
                    <div style="font-size:.78rem;font-weight:700;color:var(--gray-500);margin-bottom:6px;">KETERANGAN</div>
                    <p style="font-size:.9rem;color:var(--gray-700);">{{ $dataPerumahan->keterangan }}</p>
                </div>
                @endif
            </div>
        </div>
    </div>

    <div>
        <div class="card" style="margin-bottom:16px;">
            <div class="card-header"><span class="card-title">Informasi</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 Oleh</div>
                        <div style="font-weight:600;font-size:.9rem;">{{ $dataPerumahan->creator?->name ?? '-' }}</div>
                        <div style="font-size:.78rem;color:var(--gray-500);">{{ $dataPerumahan->created_at?->format('d M Y, H:i') }}</div>
                    </div>
                    <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 Oleh</div>
                        <div style="font-weight:600;font-size:.9rem;">{{ $dataPerumahan->verifier?->name ?? '-' }}</div>
                        <div style="font-size:.78rem;color:var(--gray-500);">{{ $dataPerumahan->verified_at?->format('d M Y, H:i') ?? '-' }}</div>
                    </div>
                    @if($dataPerumahan->status === 'diajukan')
                    <hr class="divider" style="margin:0;">
                    <a href="{{ route('admin.verifikasi.show', $dataPerumahan) }}" class="btn btn-primary btn-sm w-100">Proses Verifikasi</a>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>

@push('styles')
<style>
.detail-grid { display:grid;grid-template-columns:2fr 1fr;gap:20px; }
@media(max-width:768px) { .detail-grid { grid-template-columns:1fr; } }
</style>
@endpush
@endsection