@extends('layouts.petugas')
@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('petugas.dashboard') }}">Dashboard</a>
            <span class="breadcrumb-sep">›</span>
            <a href="{{ route('petugas.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:.82rem;padding:4px 13px;">
            {{ ucfirst($dataPerumahan->status) }}
        </span>
        <a href="{{ route('petugas.verifikasi.index') }}" class="btn btn-outline">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" width="14" height="14"><path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18" /></svg>
            Kembali
        </a>
    </div>
</div>

{{-- Info: hanya status diajukan yang bisa diproses --}}
@if(!in_array($dataPerumahan->status, ['diajukan']))
<div class="alert alert-{{ $dataPerumahan->status === 'terverifikasi' ? 'success' : 'warning' }}" style="margin-bottom:16px;">
    @if($dataPerumahan->status === 'terverifikasi')
        <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>
        <span>Data ini sudah terverifikasi oleh <strong>{{ $dataPerumahan->verifier?->name }}</strong> pada {{ $dataPerumahan->verified_at?->format('d M Y, H:i') }}.</span>
    @elseif($dataPerumahan->status === 'revisi')
        <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="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>
        <span>Data ini dikembalikan untuk revisi. Menunggu perbaikan dari operator.</span>
    @else
        <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="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z" /></svg>
        <span>Data berstatus <strong>{{ ucfirst($dataPerumahan->status) }}</strong> tidak dapat diverifikasi.</span>
    @endif
</div>
@endif

{{-- Catatan revisi sebelumnya --}}
@if($dataPerumahan->catatan_verifikasi)
<div class="alert alert-warning" style="margin-bottom:16px;">
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" width="16" height="16" style="flex-shrink:0"><path stroke-linecap="round" stroke-linejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931z" /></svg>
    <div>
        <strong>Catatan Revisi Sebelumnya:</strong><br>
        {{ $dataPerumahan->catatan_verifikasi }}
    </div>
</div>
@endif

<div class="verif-layout">
    {{-- Kiri: Data --}}
    <div>
        {{-- Statistik angka --}}
        <div class="card" style="margin-bottom:14px;">
            <div class="card-header">
                <span class="card-title">Data Perumahan</span>
            </div>
            <div class="card-body" style="padding:16px 18px;">
                <div class="data-stats-grid">
                    @php
                    $stats = [
                        ['label' => 'Jumlah Penduduk', 'val' => $dataPerumahan->jumlah_penduduk, 'color' => ''],
                        ['label' => 'Jumlah KK',       'val' => $dataPerumahan->jumlah_kk,       'color' => ''],
                        ['label' => 'Jumlah Rumah',    'val' => $dataPerumahan->jumlah_rumah,    'color' => ''],
                        ['label' => 'RLH',             'val' => $dataPerumahan->rlh,             'color' => 'var(--success)'],
                        ['label' => 'RTLH',            'val' => $dataPerumahan->rtlh,            'color' => 'var(--danger)'],
                        ['label' => 'Backlog',         'val' => $dataPerumahan->backlog,         'color' => '#d97706'],
                    ];
                    @endphp
                    @foreach($stats as $s)
                    <div class="data-stat-item">
                        <div class="data-stat-label">{{ $s['label'] }}</div>
                        <div class="data-stat-value" @if($s['color']) style="color:{{ $s['color'] }}" @endif>
                            {{ number_format($s['val']) }}
                        </div>
                    </div>
                    @endforeach
                </div>
                <div style="margin-top:14px;padding-top:14px;border-top:1px solid var(--gray-100);">
                    <div style="font-size:.71rem;color:var(--gray-400);font-weight:700;text-transform:uppercase;letter-spacing:.05em;margin-bottom:4px;">Luas Permukiman</div>
                    <div style="font-size:1.05rem;font-weight:700;">{{ number_format($dataPerumahan->luas_permukiman, 2) }} m²</div>
                </div>
                @if($dataPerumahan->keterangan)
                <div style="margin-top:14px;padding-top:14px;border-top:1px solid var(--gray-100);">
                    <div style="font-size:.71rem;color:var(--gray-400);font-weight:700;text-transform:uppercase;letter-spacing:.05em;margin-bottom:4px;">Keterangan</div>
                    <p style="font-size:.84rem;color:var(--gray-700);line-height:1.5;">{{ $dataPerumahan->keterangan }}</p>
                </div>
                @endif
            </div>
        </div>
    </div>

    {{-- Kanan: Aksi --}}
    <div style="display:flex;flex-direction:column;gap:12px;">

        {{-- Info penginput --}}
        <div class="card">
            <div class="card-header"><span class="card-title">Informasi Pengajuan</span></div>
            <div class="card-body" style="padding:14px 16px;display:flex;flex-direction:column;gap:12px;">
                <div>
                    <div style="font-size:.7rem;color:var(--gray-400);font-weight:700;text-transform:uppercase;letter-spacing:.05em;margin-bottom:3px;">Operator</div>
                    <div style="font-weight:600;font-size:.88rem;">{{ $dataPerumahan->creator?->name ?? '-' }}</div>
                </div>
                <div>
                    <div style="font-size:.7rem;color:var(--gray-400);font-weight:700;text-transform:uppercase;letter-spacing:.05em;margin-bottom:3px;">Terakhir Diperbarui</div>
                    <div style="font-size:.84rem;color:var(--gray-700);">{{ $dataPerumahan->updated_at?->format('d M Y, H:i') }}</div>
                </div>
                @if($dataPerumahan->verifier)
                <div style="padding-top:10px;border-top:1px solid var(--gray-100);">
                    <div style="font-size:.7rem;color:var(--gray-400);font-weight:700;text-transform:uppercase;letter-spacing:.05em;margin-bottom:3px;">Diproses oleh</div>
                    <div style="font-weight:600;font-size:.88rem;">{{ $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>

        {{-- Aksi: hanya muncul saat status diajukan --}}
        @if($dataPerumahan->status === 'diajukan')
        <div class="card">
            <div class="card-header"><span class="card-title">Proses Verifikasi</span></div>
            <div class="card-body" style="padding:14px 16px;display:flex;flex-direction:column;gap:9px;">

                {{-- Verifikasi --}}
                <form method="POST" action="{{ route('petugas.verifikasi.verifikasi', $dataPerumahan) }}">
                    @csrf @method('PATCH')
                    <button type="submit" class="btn btn-success w-100"
                        onclick="return confirm('Verifikasi data ini? Tindakan ini tidak dapat dibatalkan dengan mudah.')">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" width="15" height="15"><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 Data
                    </button>
                </form>

                {{-- Revisi --}}
                <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="15" height="15"><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

        {{-- Batal verifikasi: hanya saat terverifikasi --}}
        @if($dataPerumahan->status === 'terverifikasi')
        <div class="card">
            <div class="card-header"><span class="card-title">Batalkan Verifikasi</span></div>
            <div class="card-body" style="padding:14px 16px;">
                <p style="font-size:.8rem;color:var(--gray-500);margin-bottom:12px;line-height:1.5;">
                    Membatalkan verifikasi akan mengembalikan status data ke <strong>Diajukan</strong>.
                </p>
                <form method="POST" action="{{ route('petugas.verifikasi.batal', $dataPerumahan) }}">
                    @csrf @method('PATCH')
                    <button type="submit" class="btn btn-outline w-100"
                        onclick="return confirm('Batalkan verifikasi data ini? Status akan kembali ke Diajukan.')">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" width="14" height="14"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" /></svg>
                        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('petugas.verifikasi.revisi', $dataPerumahan) }}">
            @csrf @method('PATCH')
            <div class="modal-body">
                <p style="font-size:.83rem;color:var(--gray-500);margin-bottom:14px;line-height:1.5;">
                    Tuliskan catatan yang perlu diperbaiki oleh operator. Catatan ini akan ditampilkan kepada operator saat mereka membuka data.
                </p>
                <div class="form-group mb-0">
                    <label class="form-label">
                        Catatan Revisi <span class="required">*</span>
                        <span style="font-weight:400;color:var(--gray-400);font-size:.72rem;">(maks. 1000 karakter)</span>
                    </label>
                    <textarea name="catatan_verifikasi"
                        class="form-control @error('catatan_verifikasi') is-invalid @enderror"
                        rows="4"
                        maxlength="1000"
                        placeholder="Contoh: Jumlah KK tidak sesuai dengan data kependudukan, mohon dicek kembali..."
                        required>{{ old('catatan_verifikasi') }}</textarea>
                    @error('catatan_verifikasi')
                    <span class="invalid-feedback">{{ $message }}</span>
                    @enderror
                    <div id="charCount" style="font-size:.72rem;color:var(--gray-400);margin-top:4px;text-align:right;">0 / 1000</div>
                </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-layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 16px;
    align-items: start;
}
.data-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
.data-stat-item {}
.data-stat-label {
    font-size: .7rem;
    color: var(--gray-400);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: 4px;
}
.data-stat-value {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--gray-900);
    letter-spacing: -.02em;
    line-height: 1;
}
@media (max-width: 840px) {
    .verif-layout { grid-template-columns: 1fr; }
    .data-stats-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .data-stats-grid { grid-template-columns: repeat(2, 1fr); }
}
</style>
@endpush

@push('scripts')
<script>
    // Buka modal revisi jika ada validation error dari revisi
    @error('catatan_verifikasi')
    document.getElementById('revisiModal').classList.add('active');
    @enderror

    // Character counter textarea revisi
    const textarea = document.querySelector('textarea[name="catatan_verifikasi"]');
    const counter  = document.getElementById('charCount');
    if (textarea && counter) {
        textarea.addEventListener('input', function () {
            counter.textContent = this.value.length + ' / 1000';
        });
    }
</script>
@endpush
@endsection