@extends('layouts.admin')
@section('title','Proses Verifikasi')
@section('page-title','Proses Verifikasi')

@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.verifikasi.index') }}">Verifikasi</a><span class="breadcrumb-sep">›</span><span>Proses</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.verifikasi.index') }}" class="btn btn-outline">Kembali</a>
    </div>
</div>

<div style="display:grid;grid-template-columns:2fr 1fr;gap:20px;" class="verif-grid">
    {{-- Data Detail --}}
    <div>
        <div class="card" style="margin-bottom:16px;">
            <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
                        $fields = [
                            'Jumlah Penduduk' => number_format($dataPerumahan->jumlah_penduduk),
                            'Jumlah KK'       => number_format($dataPerumahan->jumlah_kk),
                            'Jumlah Rumah'    => number_format($dataPerumahan->jumlah_rumah),
                            'RLH'             => number_format($dataPerumahan->rlh),
                            'RTLH'            => number_format($dataPerumahan->rtlh),
                            'Backlog'         => number_format($dataPerumahan->backlog),
                        ];
                    @endphp
                    @foreach($fields as $label => $value)
                    <div>
                        <div style="font-size:.74rem;color:var(--gray-500);font-weight:600;text-transform:uppercase;margin-bottom:3px;">{{ $label }}</div>
                        <div style="font-size:1.3rem;font-weight:800;color:{{ in_array($label,['RTLH']) ? 'var(--danger)' : (in_array($label,['Backlog']) ? '#b45309' : 'var(--gray-900)') }};">{{ $value }}</div>
                    </div>
                    @endforeach
                    <div>
                        <div style="font-size:.74rem;color:var(--gray-500);font-weight:600;text-transform:uppercase;margin-bottom:3px;">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:600;text-transform:uppercase;margin-bottom:4px;">Keterangan</div>
                    <p style="font-size:.9rem;">{{ $dataPerumahan->keterangan }}</p>
                </div>
                @endif
            </div>
        </div>

        @if($dataPerumahan->catatan_verifikasi)
        <div class="alert alert-warning">
            <strong>Catatan Revisi Sebelumnya:</strong><br>{{ $dataPerumahan->catatan_verifikasi }}
        </div>
        @endif
    </div>

    {{-- Aksi Verifikasi --}}
    <div style="display:flex;flex-direction:column;gap:14px;">
        <div class="card">
            <div class="card-header"><span class="card-title">Info Penginput</span></div>
            <div class="card-body" style="padding:16px;">
                <div style="margin-bottom:10px;">
                    <div style="font-size:.74rem;color:var(--gray-500);font-weight:600;text-transform:uppercase;">Diinput Oleh</div>
                    <div style="font-weight:700;">{{ $dataPerumahan->creator?->name ?? '-' }}</div>
                    <div style="font-size:.8rem;color:var(--gray-500);">{{ $dataPerumahan->created_at?->format('d M Y, H:i') }}</div>
                </div>
                @if($dataPerumahan->verifier)
                <hr class="divider">
                <div>
                    <div style="font-size:.74rem;color:var(--gray-500);font-weight:600;text-transform:uppercase;">Terakhir Diproses</div>
                    <div style="font-weight:700;">{{ $dataPerumahan->verifier?->name }}</div>
                    <div style="font-size:.8rem;color:var(--gray-500);">{{ $dataPerumahan->verified_at?->format('d M Y, H:i') }}</div>
                </div>
                @endif
            </div>
        </div>

        {{-- Tombol Verifikasi --}}
        @if(in_array($dataPerumahan->status, ['diajukan', 'revisi']))
        <div class="card">
            <div class="card-header"><span class="card-title">Proses Verifikasi</span></div>
            <div class="card-body" style="padding:16px;display:flex;flex-direction:column;gap:10px;">
                <form method="POST" action="{{ route('admin.verifikasi.verifikasi', $dataPerumahan) }}">
                    @csrf @method('PATCH')
                    <button type="submit" class="btn btn-success w-100" onclick="return confirm('Verifikasi data ini?')">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" width="16" height="16"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
                        Verifikasi
                    </button>
                </form>

                <button type="button" class="btn btn-warning w-100" onclick="document.getElementById('revisiModal').classList.add('active')">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" width="16" height="16"><path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99" /></svg>
                    Kembalikan untuk Revisi
                </button>
            </div>
        </div>
        @endif

        @if($dataPerumahan->status === 'terverifikasi')
        <div class="card">
            <div class="card-body" style="padding:16px;">
                <form method="POST" action="{{ route('admin.verifikasi.batal', $dataPerumahan) }}">
                    @csrf @method('PATCH')
                    <button type="submit" class="btn btn-outline w-100" onclick="return confirm('Batalkan verifikasi ini?')">Batalkan Verifikasi</button>
                </form>
            </div>
        </div>
        @endif
    </div>
</div>

{{-- Modal Revisi --}}
<div class="modal-overlay" id="revisiModal">
    <div class="modal">
        <div class="modal-header">
            <span class="modal-title">Kembalikan untuk Revisi</span>
            <button class="modal-close" onclick="document.getElementById('revisiModal').classList.remove('active')">×</button>
        </div>
        <form method="POST" action="{{ route('admin.verifikasi.revisi', $dataPerumahan) }}">
            @csrf @method('PATCH')
            <div class="modal-body">
                <div class="form-group mb-0">
                    <label class="form-label">Catatan untuk Operator <span class="required">*</span></label>
                    <textarea name="catatan_verifikasi" class="form-control @error('catatan_verifikasi') is-invalid @enderror"
                        placeholder="Tuliskan catatan revisi yang perlu diperbaiki..." required>{{ old('catatan_verifikasi') }}</textarea>
                    @error('catatan_verifikasi')<span class="invalid-feedback">{{ $message }}</span>@enderror
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline" onclick="document.getElementById('revisiModal').classList.remove('active')">Batal</button>
                <button type="submit" class="btn btn-warning">Kembalikan untuk Revisi</button>
            </div>
        </form>
    </div>
</div>

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