@extends('layouts.petugas')
@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('petugas.dashboard') }}">Dashboard</a>
            <span class="breadcrumb-sep">›</span>
            <span>Verifikasi</span>
        </div>
        <h1 class="page-header-title">Verifikasi Data Perumahan</h1>
        <p class="page-header-sub">Hanya data berstatus <strong>Diajukan</strong> yang dapat diproses</p>
    </div>
</div>

{{-- FORM FILTER + AKSI MASSAL --}}
<form method="POST" action="{{ route('petugas.verifikasi.massal') }}" id="formMassal">
@csrf

<div class="filter-bar">
    {{-- Search --}}
    <div class="filter-group" style="flex:1;min-width:160px;">
        <label class="filter-label">Cari Desa</label>
        <input type="text" name="search" form="formFilter"
            class="filter-control" placeholder="Nama desa..."
            value="{{ request('search') }}">
    </div>

    {{-- Kecamatan --}}
    <div class="filter-group">
        <label class="filter-label">Kecamatan</label>
        <select name="kecamatan" form="formFilter" 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>

    {{-- Status --}}
    <div class="filter-group">
        <label class="filter-label">Status</label>
        <select name="status" form="formFilter" class="filter-control">
            <option value="">Semua Status</option>
            <option value="diajukan"      {{ request('status')==='diajukan'      ? 'selected':'' }}>Diajukan</option>
            <option value="terverifikasi" {{ request('status')==='terverifikasi' ? 'selected':'' }}>Terverifikasi</option>
            <option value="revisi"        {{ request('status')==='revisi'        ? 'selected':'' }}>Revisi</option>
            <option value="draft"         {{ request('status')==='draft'         ? 'selected':'' }}>Draft</option>
        </select>
    </div>

    <div class="filter-actions">
        <button type="submit" form="formFilter" class="btn btn-primary btn-sm">Filter</button>
        <a href="{{ route('petugas.verifikasi.index') }}" class="btn btn-outline btn-sm">Reset</a>
    </div>
</div>

{{-- TABEL --}}
<div class="card">
    {{-- Toolbar massal (hanya muncul jika ada data diajukan) --}}
    <div id="massalBar" style="display:none;padding:10px 16px;background:var(--primary-soft);border-bottom:1px solid rgba(31,110,92,.15);display:none;align-items:center;gap:10px;flex-wrap:wrap;">
        <span id="massalCount" style="font-size:.82rem;font-weight:600;color:var(--primary);">0 data dipilih</span>
        <button type="submit" class="btn btn-success btn-sm"
            onclick="return confirm('Verifikasi semua data yang dipilih?')">
            <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="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
            Verifikasi Terpilih
        </button>
        <button type="button" class="btn btn-outline btn-sm" onclick="clearAll()">Batal Pilih</button>
    </div>

    <div class="table-wrapper" style="border:none;">
        <table>
            <thead>
                <tr>
                    <th style="width:36px;">
                        <input type="checkbox" id="checkAll"
                            style="width:15px;height:15px;accent-color:var(--primary);cursor:pointer;"
                            title="Pilih semua data diajukan">
                    </th>
                    <th>#</th>
                    <th>Desa / Kelurahan</th>
                    <th>Kecamatan</th>
                    <th>Operator</th>
                    <th>Tgl Pengajuan</th>
                    <th>Status</th>
                    <th>Aksi</th>
                </tr>
            </thead>
            <tbody>
                @forelse($data as $item)
                <tr>
                    <td>
                        @if($item->status === 'diajukan')
                        <input type="checkbox" name="data[]" value="{{ $item->id }}"
                            class="row-check"
                            style="width:15px;height:15px;accent-color:var(--primary);cursor:pointer;">
                        @endif
                    </td>
                    <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 style="font-size:.81rem;">{{ $item->creator?->name ?? '-' }}</td>
                    <td class="nowrap text-muted" style="font-size:.8rem;">
                        {{ $item->updated_at?->format('d/m/Y') }}
                    </td>
                    <td>
                        <span class="badge badge-{{ $item->status }}">
                            {{ ucfirst($item->status) }}
                        </span>
                    </td>
                    <td>
                        <a href="{{ route('petugas.verifikasi.show', $item) }}"
                           class="btn btn-primary btn-sm">
                            Proses
                        </a>
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="8">
                        <div class="empty-state">
                            <div class="empty-state-icon">✅</div>
                            <div class="empty-state-title">Tidak ada data</div>
                            <div class="empty-state-text">Semua data di wilayah Anda telah 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() }} data
        </span>
        {{ $data->links('components.pagination') }}
    </div>
    @endif
</div>

</form>{{-- tutup formMassal --}}

{{-- Form filter terpisah (GET) --}}
<form id="formFilter" method="GET" action="{{ route('petugas.verifikasi.index') }}"></form>

@push('scripts')
<script>
    const checkAll   = document.getElementById('checkAll');
    const massalBar  = document.getElementById('massalBar');
    const massalCount = document.getElementById('massalCount');

    function updateBar() {
        const checked = document.querySelectorAll('.row-check:checked').length;
        if (checked > 0) {
            massalBar.style.display = 'flex';
            massalCount.textContent = checked + ' data dipilih';
        } else {
            massalBar.style.display = 'none';
        }
        // sinkron checkAll
        const all = document.querySelectorAll('.row-check').length;
        checkAll.indeterminate = checked > 0 && checked < all;
        checkAll.checked = all > 0 && checked === all;
    }

    checkAll?.addEventListener('change', function () {
        document.querySelectorAll('.row-check').forEach(cb => cb.checked = this.checked);
        updateBar();
    });

    document.querySelectorAll('.row-check').forEach(cb => {
        cb.addEventListener('change', updateBar);
    });

    function clearAll() {
        document.querySelectorAll('.row-check').forEach(cb => cb.checked = false);
        if (checkAll) checkAll.checked = false;
        updateBar();
    }
</script>
@endpush
@endsection