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

@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><span>Verifikasi</span></div>
        <h1 class="page-header-title">Verifikasi Data Perumahan</h1>
    </div>
    <div class="page-header-actions">
        {{-- Verifikasi Massal --}}
        <button class="btn btn-success" onclick="document.getElementById('massalModal').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="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
            Verifikasi Massal
        </button>
    </div>
</div>

<form method="GET">
<div class="filter-bar">
    <div class="filter-group" style="flex:1;">
        <label class="filter-label">Cari Desa</label>
        <input type="text" name="search" class="filter-control" placeholder="Nama desa..." value="{{ request('search') }}">
    </div>
    <div class="filter-group">
        <label class="filter-label">Kecamatan</label>
        <select name="kecamatan" class="filter-control">
            <option value="">Semua</option>
            @foreach($kecamatans as $kec)
            <option value="{{ $kec->id }}" {{ request('kecamatan')==$kec->id ? 'selected' : '' }}>{{ $kec->nama }}</option>
            @endforeach
        </select>
    </div>
    <div class="filter-group">
        <label class="filter-label">Status</label>
        <select name="status" class="filter-control">
            <option value="">Semua Status</option>
            <option value="diajukan"      {{ request('status')==='diajukan'      ? 'selected' : '' }}>Diajukan</option>
            <option value="revisi"        {{ request('status')==='revisi'        ? 'selected' : '' }}>Revisi</option>
            <option value="terverifikasi" {{ request('status')==='terverifikasi' ? 'selected' : '' }}>Terverifikasi</option>
            <option value="draft"         {{ request('status')==='draft'         ? 'selected' : '' }}>Draft</option>
        </select>
    </div>
    <div class="filter-actions">
        <button type="submit" class="btn btn-primary btn-sm">Filter</button>
        <a href="{{ route('admin.verifikasi.index') }}" class="btn btn-outline btn-sm">Reset</a>
    </div>
</div>
</form>

<div class="card">
    <div class="table-wrapper" style="border:none;">
        <table>
            <thead>
                <tr>
                    <th>#</th>
                    <th>Desa / Kelurahan</th>
                    <th>Kecamatan</th>
                    <th>Diinput Oleh</th>
                    <th>Tgl Input</th>
                    <th>Status</th>
                    <th>Aksi</th>
                </tr>
            </thead>
            <tbody>
                @forelse($data as $item)
                <tr>
                    <td class="text-muted">{{ $data->firstItem() + $loop->index }}</td>
                    <td class="fw-bold">{{ $item->desa?->nama }}</td>
                    <td class="text-muted">{{ $item->desa?->kecamatan?->nama }}</td>
                    <td>{{ $item->creator?->name ?? '-' }}</td>
                    <td class="text-muted nowrap">{{ $item->created_at?->format('d/m/Y') }}</td>
                    <td><span class="badge badge-{{ $item->status }}">{{ ucfirst($item->status) }}</span></td>
                    <td>
                        <div class="td-actions">
                            <a href="{{ route('admin.verifikasi.show', $item) }}" class="btn btn-primary btn-sm">Proses</a>
                        </div>
                    </td>
                </tr>
                @empty
                <tr><td colspan="7">
                    <div class="empty-state"><div class="empty-state-icon">✅</div><div class="empty-state-title">Tidak ada data yang perlu diproses</div></div>
                </td></tr>
                @endforelse
            </tbody>
        </table>
    </div>
    @if($data->hasPages())
    <div class="pagination-wrapper">
        <span class="pagination-info">{{ $data->firstItem() }}–{{ $data->lastItem() }} dari {{ $data->total() }}</span>
        {{ $data->links('components.pagination') }}
    </div>
    @endif
</div>

{{-- Modal Verifikasi Massal --}}
<div class="modal-overlay" id="massalModal">
    <div class="modal">
        <div class="modal-header">
            <span class="modal-title">Verifikasi Massal</span>
            <button class="modal-close" onclick="document.getElementById('massalModal').classList.remove('active')">×</button>
        </div>
        <form method="POST" action="{{ route('admin.verifikasi.massal') }}">
            @csrf
            <div class="modal-body">
                <p style="font-size:.88rem;color:var(--gray-600);margin-bottom:16px;">
                    Semua data dengan status <strong>Diajukan</strong> pada kecamatan yang dipilih akan diverifikasi sekaligus.
                </p>
                <div class="form-group">
                    <label class="form-label">Kecamatan <span class="required">*</span></label>
                    <select name="kecamatan_id" class="form-select" required>
                        <option value="">— Pilih Kecamatan —</option>
                        @foreach($kecamatans as $kec)
                        <option value="{{ $kec->id }}">{{ $kec->nama }}</option>
                        @endforeach
                    </select>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline" onclick="document.getElementById('massalModal').classList.remove('active')">Batal</button>
                <button type="submit" class="btn btn-success">Verifikasi Semua</button>
            </div>
        </form>
    </div>
</div>
@endsection