@extends('layout.app')

@section('content')

    {{-- CSS Custom untuk Mempercantik Tampilan & Mengecilkan Font --}}
    <style>
        .card-custom {
            border: none;
            border-radius: 12px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
        }

        .table-modern td,
        .table-modern th {
            vertical-align: middle !important;
            border-top: none !important;
            border-bottom: 1px solid #f1f3f5;
            padding: 0.8rem 0.75rem;
            /* Padding diperkecil agar tidak terlalu renggang */
        }

        .table-modern thead th {
            color: #6c757d;
            font-weight: 600;
            text-transform: uppercase;
            font-size: 0.7rem;
            /* Font header tabel dikecilkan */
            letter-spacing: 0.5px;
            border-bottom: 2px solid #e9ecef !important;
            background-color: #f8f9fa;
        }

        .table-modern tbody td {
            font-size: 0.85rem;
            /* Font isi tabel dikecilkan */
        }

        .badge-status {
            padding: 0.4em 0.7em;
            font-size: 0.75rem;
            /* Font badge dikecilkan */
            border-radius: 6px;
        }

        /* Animasi munculnya panel massal */
        .fade-in {
            animation: fadeIn 0.3s ease-in-out;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(-5px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
    </style>

    <div class="page-header">
        <ol class="breadcrumb">
            <li class="breadcrumb-item">Verifikator</li>
            <li class="breadcrumb-item active text-primary font-weight-bold">Manajemen Verifikasi</li>
        </ol>
    </div>

    <div class="row gutters">
        <div class="col-12">
            <div class="card card-custom">

                {{-- HEADER CARD (Bukan Tab Lagi) --}}
                <div class="card-header bg-white pt-4 pb-3 border-bottom">
                    <h6 class="m-0 font-weight-bold text-dark">
                        @if ($tab == 'pending')
                            <i class="icon-clock text-warning mr-2"></i> Antrean Pending
                            @if ($wargas->total() > 0)
                                <span class="badge badge-warning ml-2" style="font-size: 0.75rem;">{{ $wargas->total() }}
                                    Data</span>
                            @endif
                        @else
                            <i class="icon-history text-success mr-2"></i> Riwayat Verifikasi
                        @endif
                    </h6>
                </div>

                <div class="card-body">

                    {{-- AREA KONTROL (Tombol Riwayat & Paginasi Dropdown) --}}
                    <div class="d-flex flex-wrap justify-content-between align-items-end mb-3">

                        {{-- Tombol Navigasi (Kiri) --}}
                        <div>
                            @if ($tab == 'pending')
                                <a href="{{ route('verifikasi.index', ['tab' => 'riwayat']) }}"
                                    class="btn btn-outline-success btn-sm shadow-sm rounded-pill">
                                    <i class="icon-history mr-1"></i> Buka Riwayat Verifikasi
                                </a>
                            @else
                                <a href="{{ route('verifikasi.index', ['tab' => 'pending']) }}"
                                    class="btn btn-outline-warning btn-sm shadow-sm rounded-pill text-dark border-warning">
                                    <i class="icon-arrow-left mr-1"></i> Kembali ke Antrean
                                </a>
                            @endif
                        </div>

                        {{-- Form Pilihan Baris (Kanan) --}}
                        {{-- Form Pilihan Baris & Pencarian (Kanan) --}}
                        <form action="{{ route('verifikasi.index') }}" method="GET" class="form-inline mt-2 mt-md-0">
                            <input type="hidden" name="tab" value="{{ $tab }}">

                            {{-- Kolom Pencarian --}}
                            <div class="input-group input-group-sm mr-3 shadow-sm" style="border-radius: 6px; overflow: hidden;">
                                <input type="text" name="search" class="form-control border-info" placeholder="Cari Nama / NIK..." value="{{ request('search') }}">
                                <div class="input-group-append">
                                    <button class="btn btn-info" type="submit">
                                        <i class="icon-search"></i> Cari
                                    </button>
                                </div>
                            </div>

                            {{-- Dropdown Paginasi --}}
                            <label class="mr-2 text-muted font-weight-bold" style="font-size: 0.8rem;">Tampilkan:</label>
                            <select name="per_page"
                                class="form-control form-control-sm border-info text-info font-weight-bold shadow-sm"
                                onchange="this.form.submit()" style="border-radius: 6px; font-size: 0.8rem;">
                                <option value="10" {{ request('per_page') == 10 ? 'selected' : '' }}>10 Baris</option>
                                <option value="20" {{ request('per_page') == 20 ? 'selected' : '' }}>20 Baris</option>
                                <option value="50" {{ request('per_page') == 50 ? 'selected' : '' }}>50 Baris</option>
                                <option value="100" {{ request('per_page') == 100 ? 'selected' : '' }}>100 Baris</option>
                                <option value="500" {{ request('per_page') == 500 ? 'selected' : '' }}>500 Baris</option>
                            </select>
                        </form>
                    </div>

                    {{-- FORM MASSAL (Membungkus Tabel) --}}
                    @if ($tab == 'pending')
                        <form action="{{ route('verifikasi.massal') }}" method="POST" id="formMassal">
                            @csrf
                    @endif

                    {{-- PANEL AKSI MASSAL (Awalnya Sembunyi, Muncul via JS) --}}
                    @if ($tab == 'pending' && $wargas->total() > 0)
                        <div id="bulkActionContainer" class="d-none mb-3 p-2 bg-light rounded fade-in"
                            style="border-left: 4px solid #17a2b8;">
                            <span class="mr-3 ml-2 text-dark font-weight-bold" style="font-size: 0.85rem;">
                                Aksi Massal (<span id="selectedCount" class="text-info">0</span> data):
                            </span>
                            <button type="button" id="btnSetujuMassal" class="btn btn-success btn-sm shadow-sm mr-2"
                                style="font-size: 0.8rem;">
                                <i class="icon-check mr-1"></i> Setuju Terpilih
                            </button>
                            <button type="button" id="btnTolakMassal" class="btn btn-danger btn-sm shadow-sm"
                                style="font-size: 0.8rem;">
                                <i class="icon-x mr-1"></i> Tolak Terpilih
                            </button>
                        </div>
                    @endif

                    {{-- TABEL DATA --}}
                    <div class="table-responsive">
                        <table class="table table-hover table-modern m-0">
                            <thead>
                                <tr>
                                    @if ($tab == 'pending')
                                        <th width="40" class="text-center">
                                            {{-- Checkbox Select All --}}
                                            <div class="custom-control custom-checkbox">
                                                <input type="checkbox" class="custom-control-input" id="selectAll"
                                                    {{ $wargas->total() == 0 ? 'disabled' : '' }}>
                                                <label class="custom-control-label" for="selectAll"></label>
                                            </div>
                                        </th>
                                    @endif
                                    <th width="40">No</th>
                                    <th>Profil Warga</th>
                                    <th>Alamat Terdaftar</th>
                                    <th>{{ $tab == 'pending' ? 'Tanggal Pengajuan' : 'Status & Verifikator' }}</th>
                                    <th class="text-center">Aksi</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($wargas as $index => $w)
                                    <tr>
                                        {{-- Checkbox Satuan (Tab Pending) --}}
                                        @if ($tab == 'pending')
                                            <td class="text-center align-middle">
                                                <div class="custom-control custom-checkbox">
                                                    <input type="checkbox" class="custom-control-input check-item"
                                                        id="check{{ $w->id }}" name="warga_ids[]"
                                                        value="{{ $w->id }}">
                                                    <label class="custom-control-label"
                                                        for="check{{ $w->id }}"></label>
                                                </div>
                                            </td>
                                        @endif

                                        {{-- Nomor Urut --}}
                                        <td class="align-middle">{{ $wargas->firstItem() + $index }}</td>

                                        <td class="align-middle">
                                            <strong class="d-block text-dark"
                                                style="font-size: 0.85rem;">{{ $w->nama }}</strong>
                                            <small class="text-muted" style="font-size: 0.75rem;"><i
                                                    class="icon-credit-card mr-1"></i>{{ $w->nik }}</small>
                                        </td>

                                        <td class="align-middle">
                                            <span class="text-dark"
                                                style="font-size: 0.85rem;">{{ $w->alamat }}</span><br>
                                            <small class="text-muted" style="font-size: 0.75rem;">RT {{ $w->rt }} /
                                                RW {{ $w->rw }}</small>
                                        </td>

                                        <td class="align-middle">
                                            @if ($tab == 'pending')
                                                <span class="badge badge-light text-muted border px-2 py-1"
                                                    style="font-size: 0.75rem;">
                                                    <i class="icon-calendar mr-1"></i>{{ $w->created_at->format('d M Y') }}
                                                </span>
                                            @else
                                                {{-- Tampilan Status untuk Tab Riwayat --}}
                                                @if ($w->status_verifikasi == 'setuju')
                                                    <span class="badge badge-success badge-status"><i
                                                            class="icon-check mr-1"></i>Disetujui</span>
                                                @else
                                                    <span class="badge badge-danger badge-status"><i
                                                            class="icon-x mr-1"></i>Ditolak</span>
                                                @endif
                                                <br>
                                                <small class="text-muted d-block mt-1" style="font-size: 0.75rem;">
                                                    <i
                                                        class="icon-user mr-1"></i>{{ $w->verifikator->nama_lengkap ?? 'Sistem' }}
                                                </small>
                                            @endif
                                        </td>

                                        <td class="text-center align-middle">
                                            @if ($tab == 'pending')
                                                <a href="{{ route('verifikasi.show', $w->id) }}"
                                                    class="btn btn-primary btn-sm rounded-pill px-3 shadow-sm"
                                                    style="font-size: 0.75rem;">
                                                    <i class="icon-search mr-1"></i> Periksa
                                                </a>
                                            @else
                                                <a href="{{ route('verifikasi.show', $w->id) }}"
                                                    class="btn btn-outline-info btn-sm rounded-pill px-3"
                                                    style="font-size: 0.75rem;">
                                                    <i class="icon-file-text mr-1"></i> Lihat Data
                                                </a>
                                            @endif
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="{{ $tab == 'pending' ? 6 : 5 }}" class="text-center py-5">
                                            <div class="d-flex flex-column align-items-center justify-content-center">
                                                <div class="bg-light rounded-circle d-flex justify-content-center align-items-center mb-3"
                                                    style="width: 80px; height: 80px;">
                                                    <i class="{{ $tab == 'pending' ? 'icon-check text-success' : 'icon-inbox text-muted' }}"
                                                        style="font-size: 2.5rem;"></i>
                                                </div>
                                                <h5 class="font-weight-bold text-dark">
                                                    {{ $tab == 'pending' ? 'Antrean Kosong!' : 'Belum Ada Riwayat' }}
                                                </h5>
                                                <p class="text-muted" style="font-size: 0.85rem;">
                                                    {{ $tab == 'pending' ? 'Semua dokumen warga telah diverifikasi. Pekerjaan Anda selesai.' : 'Anda belum melakukan verifikasi dokumen apapun.' }}
                                                </p>
                                            </div>
                                        </td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>

                    @if ($tab == 'pending')
                        </form> {{-- Menutup Tag Form Massal --}}
                    @endif

                    {{-- PAGINATION LINKS --}}
                    <div class="mt-4 d-flex justify-content-center">
                        {{ $wargas->links('pagination::bootstrap-4') }}
                    </div>

                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const selectAllCheckbox = document.getElementById('selectAll');
            const itemCheckboxes = document.querySelectorAll('.check-item');
            const bulkActionContainer = document.getElementById('bulkActionContainer');
            const selectedCountText = document.getElementById('selectedCount');

            // Fungsi untuk mengontrol MUNCUL/HILANG panel massal
            function toggleBulkActions() {
                if (!bulkActionContainer) return;

                const checkedCount = document.querySelectorAll('.check-item:checked').length;
                const isAnyChecked = checkedCount > 0;

                if (isAnyChecked) {
                    // Munculkan panel
                    bulkActionContainer.classList.remove('d-none');
                    bulkActionContainer.classList.add('d-flex', 'align-items-center');
                    selectedCountText.innerText = checkedCount;
                } else {
                    // Sembunyikan panel total
                    bulkActionContainer.classList.add('d-none');
                    bulkActionContainer.classList.remove('d-flex', 'align-items-center');
                }
            }

            // Event saat "Select All" diklik
            if (selectAllCheckbox) {
                selectAllCheckbox.addEventListener('change', function() {
                    itemCheckboxes.forEach(checkbox => {
                        checkbox.checked = selectAllCheckbox.checked;
                    });
                    toggleBulkActions();
                });

                // Event saat kotak satuan diklik
                itemCheckboxes.forEach(checkbox => {
                    checkbox.addEventListener('change', function() {
                        const allChecked = document.querySelectorAll('.check-item:checked')
                            .length === itemCheckboxes.length;
                        selectAllCheckbox.checked = allChecked;
                        toggleBulkActions();
                    });
                });
            }

            function prosesMassal(actionValue) {
            // Buat input hidden untuk mengirimkan aksi (setuju/tolak)
            const inputAction = document.createElement('input');
            inputAction.type = 'hidden';
            inputAction.name = 'action';
            inputAction.value = actionValue;
            formMassal.appendChild(inputAction);

            // Submit form
            formMassal.submit();
        }

        // Tombol Setuju Terpilih
        const btnSetujuMassal = document.getElementById('btnSetujuMassal');
        if (btnSetujuMassal) {
            btnSetujuMassal.addEventListener('click', function(e) {
                e.preventDefault();
                Swal.fire({
                    title: 'Konfirmasi Persetujuan',
                    text: 'Yakin ingin MENYETUJUI semua data yang dicentang?',
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#28a745', // Hijau success
                    cancelButtonColor: '#6c757d',  // Abu-abu secondary
                    confirmButtonText: '<i class="icon-check mr-1"></i> Ya, Setujui!',
                    cancelButtonText: 'Batal',
                    reverseButtons: true
                }).then((result) => {
                    if (result.isConfirmed) {
                        prosesMassal('setuju');
                    }
                });
            });
        }

        // Tombol Tolak Terpilih
        const btnTolakMassal = document.getElementById('btnTolakMassal');
        if (btnTolakMassal) {
            btnTolakMassal.addEventListener('click', function(e) {
                e.preventDefault();
                Swal.fire({
                    title: 'Konfirmasi Penolakan',
                    text: 'Yakin ingin MENOLAK semua data yang dicentang?',
                    icon: 'error',
                    showCancelButton: true,
                    confirmButtonColor: '#dc3545', // Merah danger
                    cancelButtonColor: '#6c757d',
                    confirmButtonText: '<i class="icon-x mr-1"></i> Ya, Tolak!',
                    cancelButtonText: 'Batal',
                    reverseButtons: true
                }).then((result) => {
                    if (result.isConfirmed) {
                        prosesMassal('tolak');
                    }
                });
            });
        }
        });
    </script>
@endpush