@extends('layouts.operator')
@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('operator.dashboard') }}">Dashboard</a>
            <span class="breadcrumb-sep">›</span>
            <a href="{{ route('operator.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(in_array($dataPerumahan->status, ['draft','revisi']))
        <a href="{{ route('operator.data-perumahans.edit', $dataPerumahan) }}" class="btn btn-primary">Edit Data</a>
        @endif
        <a href="{{ route('operator.data-perumahans.index') }}" class="btn btn-outline">Kembali</a>
    </div>
</div>

@if($dataPerumahan->catatan_verifikasi && $dataPerumahan->status === 'revisi')
<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 Revisi dari Petugas:</strong> {{ $dataPerumahan->catatan_verifikasi }}</div>
</div>
@endif

<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;">
                @php
                $stats = [
                    ['label'=>'Jumlah Penduduk','val'=>number_format($dataPerumahan->jumlah_penduduk),'color'=>'var(--gray-900)'],
                    ['label'=>'Jumlah KK','val'=>number_format($dataPerumahan->jumlah_kk),'color'=>'var(--gray-900)'],
                    ['label'=>'Jumlah Rumah','val'=>number_format($dataPerumahan->jumlah_rumah),'color'=>'var(--gray-900)'],
                    ['label'=>'RLH','val'=>number_format($dataPerumahan->rlh),'color'=>'var(--success)'],
                    ['label'=>'RTLH','val'=>number_format($dataPerumahan->rtlh),'color'=>'var(--danger)'],
                    ['label'=>'Backlog','val'=>number_format($dataPerumahan->backlog),'color'=>'#b45309'],
                ];
                @endphp
                @foreach($stats as $s)
                <div>
                    <div style="font-size:.74rem;color:var(--gray-500);font-weight:700;text-transform:uppercase;margin-bottom:4px;">{{ $s['label'] }}</div>
                    <div style="font-size:1.4rem;font-weight:800;color:{{ $s['color'] }};">{{ $s['val'] }}</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">Riwayat Status</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;">Dibuat</div>
                    <div style="font-weight:600;">{{ $dataPerumahan->created_at?->format('d M Y') }}</div>
                    <div style="font-size:.78rem;color:var(--gray-500);">{{ $dataPerumahan->created_at?->format('H:i') }} WIB</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;">Diproses oleh</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