@php
    $tahunBerjalan = date('Y');
    $tahunUsulan = date('Y') + 1;

    $isUkpd = auth()->user()->role === 'staff_ukpd';

    $routeIndex = $isUkpd ? route('ukpd.staf.usulan.index') : route('skpd.staf.usulan-shs.index');
    $routeCreate = $isUkpd ? route('ukpd.staf.usulan.create') : route('skpd.staf.usulan-shs.create');
    $routeTemplate = $isUkpd
        ? route('ukpd.staf.usulan.download-template')
        : route('skpd.staf.usulan-shs.download-template');
    $routeImport = $isUkpd ? route('ukpd.staf.usulan.import-csv') : route('skpd.staf.usulan-shs.import-csv');
    $routeBulkSubmit = $isUkpd ? route('ukpd.staf.usulan.bulk-submit') : route('skpd.staf.usulan-shs.bulk-submit');
    $routeBulkDestroy = $isUkpd ? route('ukpd.staf.usulan.bulk-destroy') : route('skpd.staf.usulan-shs.bulk-destroy');
    $routeExportValidatedExcel = $isUkpd
        ? route('ukpd.staf.usulan.export-validated-excel')
        : route('skpd.staf.usulan-shs.export-validated-excel');

    $submitConfirmMsg = $isUkpd
        ? 'Kirim usulan ini ke Staf SKPD Induk?'
        : 'Kirim usulan ini untuk diverifikasi oleh BPAD/BPKD?';
    $submitTooltip = $isUkpd ? 'Kirim Ke Staf SKPD Induk' : 'Kirim Ke Verifikator BPAD/BPKD';
@endphp

@extends('layouts.app')

@section('title', 'Daftar Usulan SHS ' . $tahunUsulan)

@section('content')
    <div class="max-w-7xl mx-auto space-y-6">

        <form id="form-bulk-action" method="POST" action="" class="hidden">
            @csrf
        </form>

        <div class="flex flex-col lg:flex-row lg:items-center justify-between gap-4 pb-2 border-b border-gray-100">
            <div>
                <h1 class="text-2xl font-bold text-slate-900 tracking-tight">Daftar Usulan SHS Tahun {{ $tahunUsulan }}</h1>
                <p class="text-xs sm:text-sm text-gray-500 mt-0.5">Kelola dan pantau seluruh daftar usulan standar harga
                    satuan barang/jasa instansi Anda.</p>
            </div>

            <div class="flex flex-wrap items-center gap-2.5 shrink-0">
                <a href="{{ $routeExportValidatedExcel }}"
                    class="h-10 px-4 bg-slate-800 hover:bg-slate-900 text-white text-xs sm:text-sm font-semibold rounded-lg shadow-sm inline-flex items-center justify-center gap-2 transition-all whitespace-nowrap"
                    title="Unduh Seluruh Data Tervalidasi Format Excel Kertas Kerja SHS">
                    <i class="fa-solid fa-file-excel text-emerald-400 text-sm"></i>
                    <span>Export All Tervalidasi</span>
                </a>

                <button type="button" onclick="document.getElementById('modalCsv').classList.remove('hidden')"
                    class="h-10 px-4 bg-emerald-600 hover:bg-emerald-700 text-white text-xs sm:text-sm font-semibold rounded-lg shadow-sm inline-flex items-center justify-center gap-2 transition-all whitespace-nowrap">
                    <i class="fa-solid fa-file-csv text-sm"></i>
                    <span>Upload CSV Massal</span>
                </button>

                @if (($faseStatus ?? 'open') == 'open')
                    <a href="{{ $routeCreate }}"
                        class="h-10 px-4 bg-blue-600 hover:bg-blue-700 text-white text-xs sm:text-sm font-semibold rounded-lg shadow-sm inline-flex items-center justify-center gap-2 transition-all whitespace-nowrap">
                        <i class="fa-solid fa-plus text-xs"></i>
                        <span>Tambah Usulan Baru</span>
                    </a>
                @else
                    <button type="button" disabled title="Pengajuan dikunci oleh BPAD"
                        class="h-10 px-4 bg-slate-200 text-slate-400 text-xs sm:text-sm font-semibold rounded-lg cursor-not-allowed inline-flex items-center justify-center gap-2 border border-slate-300 whitespace-nowrap">
                        <i class="fa-solid fa-lock text-xs"></i>
                        <span>Pengajuan Ditutup</span>
                    </button>
                @endif
            </div>
        </div>

        @if (session('success'))
            <div
                class="p-4 bg-emerald-50 border-l-4 border-emerald-500 text-emerald-800 rounded-r-lg text-sm font-medium shadow-sm">
                <i class="fa-solid fa-circle-check mr-2"></i> {{ session('success') }}
            </div>
        @endif

        @if (session('error'))
            <div class="p-4 bg-rose-50 border-l-4 border-rose-500 text-rose-800 rounded-r-lg text-sm font-medium shadow-sm">
                <i class="fa-solid fa-circle-exclamation mr-2"></i> {{ session('error') }}
            </div>
        @endif

        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4">
            <form method="GET" action="{{ $routeIndex }}" class="flex flex-col sm:flex-row items-center gap-3">
                <input type="hidden" name="per_page" value="{{ request('per_page', 10) }}">

                <div class="relative flex-1 w-full">
                    <i
                        class="fa-solid fa-magnifying-glass absolute left-3.5 top-1/2 -translate-y-1/2 text-gray-400 text-xs"></i>
                    <input type="text" name="search" value="{{ request('search') }}"
                        placeholder="Cari nama barang, kelompok, atau kode..."
                        class="w-full pl-9 pr-3.5 py-2 border rounded-lg text-sm focus:ring-2 focus:ring-blue-500 outline-none">
                </div>

                <div class="w-full sm:w-64">
                    <select name="status"
                        class="w-full px-3.5 py-2 border rounded-lg text-sm focus:ring-2 focus:ring-blue-500 outline-none bg-white">
                        <option value="">-- Semua Status --</option>
                        @if ($isUkpd)
                            <option value="menunggu_dikirim_ukpd"
                                {{ request('status') == 'menunggu_dikirim_ukpd' ? 'selected' : '' }}>Draft UKPD</option>
                            <option value="menunggu_konfirmasi_skpd"
                                {{ request('status') == 'menunggu_konfirmasi_skpd' ? 'selected' : '' }}>Dikirim ke SKPD
                            </option>
                            <option value="menunggu_verifikasi"
                                {{ request('status') == 'menunggu_verifikasi' ? 'selected' : '' }}>Verifikasi BPAD/BPKD
                            </option>
                            <option value="verifikasi_tertolak"
                                {{ request('status') == 'verifikasi_tertolak' ? 'selected' : '' }}>Verifikasi Tertolak
                            </option>
                            <option value="validasi_success"
                                {{ request('status') == 'validasi_success' ? 'selected' : '' }}>Validasi Success (Sah)
                            </option>
                        @else
                            <option value="menunggu_dikirim"
                                {{ request('status') == 'menunggu_dikirim' ? 'selected' : '' }}>Menunggu Dikirim</option>
                            <option value="menunggu_verifikasi"
                                {{ request('status') == 'menunggu_verifikasi' ? 'selected' : '' }}>Menunggu Verifikasi
                            </option>
                            <option value="verifikasi_tertolak"
                                {{ request('status') == 'verifikasi_tertolak' ? 'selected' : '' }}>Verifikasi Tertolak
                            </option>
                            <option value="menunggu_validasi"
                                {{ request('status') == 'menunggu_validasi' ? 'selected' : '' }}>Menunggu Validasi</option>
                            <option value="validasi_tertolak"
                                {{ request('status') == 'validasi_tertolak' ? 'selected' : '' }}>Validasi Tertolak</option>
                            <option value="validasi_success"
                                {{ request('status') == 'validasi_success' ? 'selected' : '' }}>Validasi Success (Sah)
                            </option>
                        @endif
                    </select>
                </div>

                <div class="flex items-center gap-2 w-full sm:w-auto">
                    <button type="submit"
                        class="px-4 py-2 bg-slate-800 hover:bg-slate-900 text-white text-sm font-semibold rounded-lg shadow transition-all flex items-center gap-1.5 w-full sm:w-auto justify-center">
                        <i class="fa-solid fa-filter"></i> Filter
                    </button>

                    @if (request()->hasAny(['search', 'status']))
                        <a href="{{ $routeIndex }}"
                            class="px-3 py-2 bg-gray-100 hover:bg-gray-200 text-gray-600 text-sm font-semibold rounded-lg border transition-all"
                            title="Reset Filter">
                            <i class="fa-solid fa-rotate-right"></i>
                        </a>
                    @endif
                </div>
            </form>
        </div>

        <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
            <div
                class="px-6 py-4 border-b border-gray-100 flex flex-col sm:flex-row justify-between items-center gap-3 bg-slate-50">
                <div class="flex items-center gap-3">
                    <h3 class="text-sm font-bold text-slate-800 flex items-center gap-2">
                        <i class="fa-solid fa-list-check text-blue-600"></i> Tabel Inputan Usulan Terdaftar
                    </h3>
                    <span class="text-xs font-semibold px-2.5 py-1 bg-blue-100 text-blue-800 rounded-full">
                        Total: {{ $usulanList->total() }} Item
                    </span>
                </div>

                <div id="bulk-action-bar"
                    class="hidden flex items-center gap-2 bg-white px-3 py-1.5 rounded-lg border shadow-sm">
                    <span class="text-xs font-semibold text-slate-600"><span id="selected-count">0</span> terpilih:</span>

                    <button type="button" onclick="submitBulk('submit')"
                        class="px-3 py-1 bg-emerald-600 hover:bg-emerald-700 text-white text-xs font-semibold rounded flex items-center gap-1 transition-all">
                        <i class="fa-solid fa-paper-plane"></i> Kirim Terpilih
                    </button>

                    <button type="button" onclick="submitBulk('destroy')"
                        class="px-3 py-1 bg-rose-600 hover:bg-rose-700 text-white text-xs font-semibold rounded flex items-center gap-1 transition-all">
                        <i class="fa-solid fa-trash"></i> Hapus Terpilih
                    </button>
                </div>
            </div>

            <div class="overflow-x-auto">
                <table class="w-full text-left border-collapse">
                    <thead>
                        <tr class="bg-gray-50 border-b text-xs font-bold text-gray-500 uppercase tracking-wider">
                            <th class="p-4 text-center w-10">
                                <input type="checkbox" id="check-all"
                                    class="w-4 h-4 text-blue-600 rounded border-gray-300 focus:ring-blue-500 cursor-pointer">
                            </th>
                            <th class="p-4">Kode & Kelompok</th>
                            <th class="p-4">Uraian Barang / Jasa</th>
                            <th class="p-4">Spesifikasi & Satuan</th>
                            <th class="p-4">Harga {{ $tahunBerjalan }}</th>
                            <th class="p-4">Usulan {{ $tahunUsulan }}</th>
                            <th class="p-4 text-center">Status</th>
                            <th class="p-4 text-center">Aksi</th>
                        </tr>
                    </thead>
                    <tbody class="text-sm divide-y divide-gray-100">
                        @forelse($usulanList as $item)
                            @php
                                $lockedStatuses = [
                                    'menunggu_konfirmasi_skpd',
                                    'menunggu_verifikasi',
                                    'proses_verifikasi',
                                    'menunggu_validasi',
                                    'validasi_success',
                                    'disetujui',
                                ];

                                $canAction = !in_array(strtolower($item->status ?? ''), $lockedStatuses);
                                $isValidated = in_array(strtolower($item->status ?? ''), [
                                    'validasi_success',
                                    'disetujui',
                                ]);

                                $routeShowItem = $isUkpd
                                    ? route('ukpd.staf.usulan.show', $item->id)
                                    : route('skpd.staf.usulan-shs.show', $item->id);
                                $routeSubmitItem = $isUkpd
                                    ? route('ukpd.staf.usulan.submit', $item->id)
                                    : route('skpd.staf.usulan-shs.submit', $item->id);
                                $routeEditItem = $isUkpd
                                    ? route('ukpd.staf.usulan.edit', $item->id)
                                    : route('skpd.staf.usulan-shs.edit', $item->id);
                                $routeDestroyItem = $isUkpd
                                    ? route('ukpd.staf.usulan.destroy', $item->id)
                                    : route('skpd.staf.usulan-shs.destroy', $item->id);
                                $routeCetakPdf = $isUkpd
                                    ? route('ukpd.staf.usulan.cetak-pdf', $item->id)
                                    : route('skpd.staf.usulan-shs.cetak-pdf', $item->id);
                            @endphp
                            <tr class="hover:bg-slate-50/80 transition-colors">
                                <td class="p-4 text-center">
                                    @if ($canAction)
                                        <input type="checkbox" name="ids[]" value="{{ $item->id }}"
                                            class="item-checkbox w-4 h-4 text-blue-600 rounded border-gray-300 focus:ring-blue-500 cursor-pointer">
                                    @else
                                        <input type="checkbox" disabled
                                            title="Sedang diproses verifikasi/validasi atau sudah tervalidasi"
                                            class="w-4 h-4 text-gray-200 rounded border-gray-200 cursor-not-allowed">
                                    @endif
                                </td>
                                <td class="p-4">
                                    <p class="font-bold text-slate-800 text-xs">{{ $item->nama_kelompok ?? '-' }}</p>
                                    <p class="text-[11px] font-mono text-gray-400">Brg: {{ $item->kode_barang ?? '-' }}
                                    </p>
                                    <p class="text-[10px] font-mono text-blue-600">Rek: {{ $item->kode_rekening ?? '-' }}
                                    </p>
                                </td>
                                <td class="p-4">
                                    <p class="font-semibold text-slate-800">{{ $item->uraian_barang }}</p>
                                    @if ($item->is_khusus_skpd)
                                        <span
                                            class="inline-block mt-1 text-[9px] bg-amber-100 text-amber-800 font-bold px-1.5 py-0.5 rounded">
                                            Khusus {{ $isUkpd ? 'UKPD' : 'SKPD' }}
                                        </span>
                                    @endif
                                </td>
                                <td class="p-4">
                                    <p class="text-xs text-gray-600">{{ $item->spesifikasi ?? '-' }}</p>
                                    <span
                                        class="inline-block mt-1 text-[10px] bg-slate-100 px-2 py-0.5 rounded font-bold text-slate-600">{{ $item->satuan }}</span>
                                </td>
                                <td class="p-4 font-mono text-xs">
                                    Rp {{ number_format($item->harga_2025 ?? 0, 0, ',', '.') }}
                                </td>
                                <td class="p-4 font-mono font-bold text-blue-700 text-sm">
                                    Rp {{ number_format($item->usulan_harga_2026 ?? 0, 0, ',', '.') }}
                                </td>
                                <td class="p-4 text-center">
                                    @php
                                        $statusMap = [
                                            'menunggu_dikirim_ukpd' => [
                                                'label' => 'Draft UKPD',
                                                'class' => 'bg-amber-100 text-amber-800',
                                            ],
                                            'menunggu_konfirmasi_skpd' => [
                                                'label' => 'Dikirim ke SKPD',
                                                'class' => 'bg-blue-100 text-blue-800',
                                            ],
                                            'menunggu_dikirim' => [
                                                'label' => 'Menunggu Dikirim',
                                                'class' => 'bg-amber-100 text-amber-800',
                                            ],
                                            'draft' => [
                                                'label' => 'Menunggu Dikirim',
                                                'class' => 'bg-amber-100 text-amber-800',
                                            ],
                                            'menunggu_verifikasi' => [
                                                'label' => 'Menunggu Verifikasi',
                                                'class' => 'bg-blue-100 text-blue-800',
                                            ],
                                            'proses_verifikasi' => [
                                                'label' => 'Menunggu Verifikasi',
                                                'class' => 'bg-blue-100 text-blue-800',
                                            ],
                                            'menunggu_validasi' => [
                                                'label' => 'Menunggu Validasi',
                                                'class' => 'bg-indigo-100 text-indigo-800',
                                            ],
                                            'validasi_success' => [
                                                'label' => 'Validasi Success',
                                                'class' => 'bg-emerald-100 text-emerald-800 border border-emerald-300',
                                            ],
                                            'disetujui' => [
                                                'label' => 'Validasi Success',
                                                'class' => 'bg-emerald-100 text-emerald-800 border border-emerald-300',
                                            ],
                                            'verifikasi_tertolak' => [
                                                'label' => 'Verifikasi Tertolak',
                                                'class' => 'bg-rose-100 text-rose-800',
                                            ],
                                            'validasi_tertolak' => [
                                                'label' => 'Validasi Tertolak',
                                                'class' => 'bg-rose-100 text-rose-800',
                                            ],
                                        ];
                                        $st = $statusMap[$item->status] ?? [
                                            'label' => str_replace('_', ' ', $item->status),
                                            'class' => 'bg-slate-100 text-slate-700',
                                        ];
                                        $alasanPenolakan =
                                            $item->catatan_penolakan ??
                                            ($item->catatan_bpad ??
                                                ($item->catatan_bpkd ?? ($item->catatan_verifikasi ?? null)));
                                    @endphp

                                    <span
                                        class="px-2.5 py-1 rounded-full text-[10px] font-bold uppercase {{ $st['class'] }}">
                                        {{ $st['label'] }}
                                    </span>

                                    @if (in_array($item->status, ['verifikasi_tertolak', 'validasi_tertolak', 'ditolak']) && $alasanPenolakan)
                                        <div
                                            class="mt-2 text-left bg-rose-50 border border-rose-200 rounded-lg p-2 max-w-xs mx-auto shadow-sm">
                                            <p class="text-[10px] font-bold text-rose-800 flex items-center gap-1">
                                                <i class="fa-solid fa-circle-exclamation text-rose-600"></i> Alasan
                                                Ditolak:
                                            </p>
                                            <p class="text-[11px] text-rose-700 mt-0.5 leading-snug italic">
                                                "{{ $alasanPenolakan }}"</p>
                                        </div>
                                    @endif
                                </td>
                                <td class="p-4 text-center">
                                    <div class="flex items-center justify-center gap-1.5">
                                        <a href="{{ $routeShowItem }}"
                                            class="p-2 bg-sky-50 hover:bg-sky-100 text-sky-700 rounded-lg text-xs font-semibold transition-all"
                                            title="Lihat Detail">
                                            <i class="fa-solid fa-eye"></i>
                                        </a>

                                        @if ($isValidated)
                                            <div x-data="{ open: false }" class="relative inline-block text-left">
                                                <button @click="open = !open" @click.outside="open = false"
                                                    type="button"
                                                    class="px-2.5 py-1.5 bg-emerald-600 hover:bg-emerald-700 text-white rounded-lg text-xs font-bold transition-all shadow flex items-center gap-1.5">
                                                    <i class="fa-solid fa-download"></i> Unduh <i
                                                        class="fa-solid fa-chevron-down text-[9px]"></i>
                                                </button>
                                                <div x-show="open" x-cloak
                                                    class="absolute right-0 mt-1 w-36 bg-white rounded-xl shadow-lg border border-gray-200 z-50 py-1.5 text-left space-y-0.5">
                                                    <a href="{{ $routeCetakPdf }}" target="_blank"
                                                        class="flex items-center gap-2 px-3 py-1.5 text-xs text-slate-700 hover:bg-slate-100 font-semibold transition-colors">
                                                        <i class="fa-solid fa-file-pdf text-rose-600 w-4 text-center"></i>
                                                        Format PDF
                                                    </a>
                                                    <a href="{{ $routeExportValidatedExcel }}"
                                                        class="flex items-center gap-2 px-3 py-1.5 text-xs text-slate-700 hover:bg-slate-100 font-semibold transition-colors">
                                                        <i
                                                            class="fa-solid fa-file-excel text-emerald-600 w-4 text-center"></i>
                                                        Format Excel
                                                    </a>
                                                </div>
                                            </div>
                                        @endif

                                        @if ($canAction)
                                            <form action="{{ $routeSubmitItem }}" method="POST"
                                                onsubmit="return confirm('{{ $submitConfirmMsg }}')">
                                                @csrf
                                                <button type="submit"
                                                    class="p-2 bg-emerald-50 hover:bg-emerald-100 text-emerald-700 rounded-lg text-xs font-semibold transition-all"
                                                    title="{{ $submitTooltip }}">
                                                    <i class="fa-solid fa-paper-plane"></i>
                                                </button>
                                            </form>

                                            <a href="{{ $routeEditItem }}"
                                                class="p-2 bg-amber-50 hover:bg-amber-100 text-amber-700 rounded-lg text-xs font-semibold transition-all"
                                                title="Edit Usulan">
                                                <i class="fa-solid fa-pen-to-square"></i>
                                            </a>

                                            <form action="{{ $routeDestroyItem }}" method="POST"
                                                onsubmit="return confirm('Apakah Anda yakin ingin menghapus usulan ini?')">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit"
                                                    class="p-2 bg-rose-50 hover:bg-rose-100 text-rose-700 rounded-lg text-xs font-semibold transition-all"
                                                    title="Hapus Usulan">
                                                    <i class="fa-solid fa-trash"></i>
                                                </button>
                                            </form>
                                        @endif
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="8" class="p-12 text-center text-gray-400">
                                    <div class="flex flex-col items-center justify-center gap-2">
                                        <i class="fa-solid fa-box-open text-4xl text-gray-300"></i>
                                        <p class="text-xs font-medium italic">Data usulan tidak ditemukan.</p>
                                    </div>
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            {{-- Footer Pagination & Per Page Selector --}}
            <div
                class="px-6 py-4 border-t border-gray-100 bg-slate-50 flex flex-col md:flex-row items-center justify-between gap-4">
                {{-- Selector Data Per Halaman & Info Total --}}
                <div class="flex flex-wrap items-center gap-3 text-xs text-gray-500 font-medium">
                    <div class="flex items-center gap-2">
                        <label for="per_page_select" class="text-slate-600 font-semibold">Tampilkan:</label>
                        <select id="per_page_select" onchange="changePerPage(this.value)"
                            class="px-3 py-1.5 bg-white border border-slate-200 rounded-lg text-xs font-semibold text-slate-700 shadow-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none cursor-pointer transition-all">
                            <option value="10" {{ request('per_page', 10) == 10 ? 'selected' : '' }}>10</option>
                            <option value="20" {{ request('per_page', 10) == 20 ? 'selected' : '' }}>20</option>
                            <option value="50" {{ request('per_page', 10) == 50 ? 'selected' : '' }}>50</option>
                            <option value="100" {{ request('per_page', 10) == 100 ? 'selected' : '' }}>100</option>
                            <option value="all" {{ request('per_page') == 'all' ? 'selected' : '' }}>Semua</option>
                        </select>
                        <span>data per halaman</span>
                    </div>

                    <span class="text-gray-300 hidden sm:inline">|</span>

                    <div>
                        @if ($usulanList->total() > 0)
                            @if (request('per_page') === 'all')
                                Menampilkan semua <span class="font-bold text-slate-800">{{ $usulanList->total() }}</span>
                                data
                            @else
                                Menampilkan <span class="font-bold text-slate-800">{{ $usulanList->firstItem() }}</span> -
                                <span class="font-bold text-slate-800">{{ $usulanList->lastItem() }}</span> dari
                                <span class="font-bold text-slate-800">{{ $usulanList->total() }}</span> total usulan
                            @endif
                        @else
                            Menampilkan 0 data
                        @endif
                    </div>
                </div>

                @if (request('per_page') !== 'all' && $usulanList->lastPage() > 1)
                    @php
                        $currentPage = $usulanList->currentPage();
                        $lastPage = $usulanList->lastPage();

                        $pages = [];
                        if ($lastPage <= 7) {
                            $pages = range(1, $lastPage);
                        } else {
                            $pages[] = 1;
                            $start = max(2, $currentPage - 1);
                            $end = min($lastPage - 1, $currentPage + 1);

                            if ($start > 2) {
                                $pages[] = '...';
                            }

                            for ($i = $start; $i <= $end; $i++) {
                                $pages[] = $i;
                            }

                            if ($end < $lastPage - 1) {
                                $pages[] = '...';
                            }

                            $pages[] = $lastPage;
                        }
                    @endphp

                    <nav class="flex items-center gap-1.5" aria-label="Pagination">
                        {{-- Tombol Previous --}}
                        @if ($usulanList->onFirstPage())
                            <span
                                class="w-8 h-8 flex items-center justify-center text-xs font-semibold text-slate-300 bg-slate-100 rounded-lg border border-slate-200 cursor-not-allowed">
                                <i class="fa-solid fa-chevron-left text-[10px]"></i>
                            </span>
                        @else
                            <a href="{{ $usulanList->previousPageUrl() }}"
                                class="w-8 h-8 flex items-center justify-center text-xs font-semibold text-slate-600 bg-white hover:bg-blue-50 hover:text-blue-600 hover:border-blue-300 rounded-lg border border-slate-200 shadow-sm transition-all">
                                <i class="fa-solid fa-chevron-left text-[10px]"></i>
                            </a>
                        @endif

                        {{-- Angka Halaman & Ellipsis --}}
                        @foreach ($pages as $p)
                            @if ($p === '...')
                                <span
                                    class="w-8 h-8 flex items-center justify-center text-xs text-slate-400 font-bold select-none">...</span>
                            @elseif ($p == $currentPage)
                                <span
                                    class="w-8 h-8 flex items-center justify-center text-xs font-bold text-white bg-blue-600 rounded-lg border border-blue-600 shadow-md shadow-blue-500/20">
                                    {{ $p }}
                                </span>
                            @else
                                <a href="{{ $usulanList->url($p) }}"
                                    class="w-8 h-8 flex items-center justify-center text-xs font-semibold text-slate-600 bg-white hover:bg-blue-50 hover:text-blue-600 hover:border-blue-300 rounded-lg border border-slate-200 shadow-sm transition-all">
                                    {{ $p }}
                                </a>
                            @endif
                        @endforeach

                        {{-- Tombol Next --}}
                        @if ($usulanList->hasMorePages())
                            <a href="{{ $usulanList->nextPageUrl() }}"
                                class="w-8 h-8 flex items-center justify-center text-xs font-semibold text-slate-600 bg-white hover:bg-blue-50 hover:text-blue-600 hover:border-blue-300 rounded-lg border border-slate-200 shadow-sm transition-all">
                                <i class="fa-solid fa-chevron-right text-[10px]"></i>
                            </a>
                        @else
                            <span
                                class="w-8 h-8 flex items-center justify-center text-xs font-semibold text-slate-300 bg-slate-100 rounded-lg border border-slate-200 cursor-not-allowed">
                                <i class="fa-solid fa-chevron-right text-[10px]"></i>
                            </span>
                        @endif
                    </nav>
                @endif
            </div>
        </div>

        <div id="modalCsv"
            class="fixed inset-0 bg-slate-900/50 backdrop-blur-sm hidden flex items-center justify-center z-50 p-4">
            <div class="bg-white rounded-xl shadow-xl border border-gray-200 w-full max-w-lg p-6">
                <div class="flex justify-between items-center mb-4">
                    <h3 class="text-lg font-bold text-slate-800 flex items-center gap-2">
                        <i class="fa-solid fa-file-csv text-emerald-600"></i> Import Data SHS dari File CSV
                    </h3>
                    <button type="button" onclick="document.getElementById('modalCsv').classList.add('hidden')"
                        class="text-gray-400 hover:text-gray-600">
                        <i class="fa-solid fa-xmark text-lg"></i>
                    </button>
                </div>

                <div class="bg-blue-50 border border-blue-200 rounded-lg p-3 mb-4 flex items-center justify-between">
                    <div class="text-xs text-blue-800">
                        <p class="font-bold">Belum punya formatnya?</p>
                        <p class="text-[11px] text-blue-600">Unduh template CSV resmi agar format kolom sesuai.</p>
                    </div>
                    <a href="{{ $routeTemplate }}"
                        class="px-3 py-1.5 bg-blue-600 hover:bg-blue-700 text-white text-xs font-semibold rounded-md shadow flex items-center gap-1.5 transition-all shrink-0">
                        <i class="fa-solid fa-download"></i> Unduh Template
                    </a>
                </div>

                <form action="{{ $routeImport }}" method="POST" enctype="multipart/form-data" class="space-y-4">
                    @csrf
                    <div
                        class="border-2 border-dashed border-gray-300 rounded-lg p-6 text-center bg-gray-50 hover:bg-gray-100 transition-colors cursor-pointer">
                        <i class="fa-solid fa-cloud-arrow-up text-4xl text-gray-400 mb-2"></i>
                        <p class="text-sm font-semibold text-gray-700">Pilih File CSV Data Usulan</p>
                        <p class="text-xs text-gray-500 mt-1">Gunakan file CSV berpemisah titik-koma (;) atau koma (,).</p>
                        <input type="file" name="csv_file" accept=".csv, .txt" required
                            class="mt-4 w-full text-xs text-slate-500 file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-xs file:font-semibold file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100">
                    </div>

                    <div class="flex justify-end gap-2 pt-2">
                        <button type="button" onclick="document.getElementById('modalCsv').classList.add('hidden')"
                            class="px-4 py-2 text-sm font-semibold text-gray-600 hover:bg-gray-100 rounded-lg">Batal</button>
                        <button type="submit"
                            class="px-5 py-2 text-sm font-semibold text-white bg-emerald-600 hover:bg-emerald-700 rounded-lg shadow">Mulai
                            Import</button>
                    </div>
                </form>
            </div>
        </div>

        <script>
            document.addEventListener('DOMContentLoaded', function() {
                const checkAll = document.getElementById('check-all');
                const itemCheckboxes = document.querySelectorAll('.item-checkbox');
                const bulkActionBar = document.getElementById('bulk-action-bar');
                const selectedCountSpan = document.getElementById('selected-count');

                function updateBulkBar() {
                    const checkedCount = document.querySelectorAll('.item-checkbox:checked').length;
                    if (selectedCountSpan) selectedCountSpan.textContent = checkedCount;

                    if (checkedCount > 0) {
                        bulkActionBar.classList.remove('hidden');
                    } else {
                        bulkActionBar.classList.add('hidden');
                    }
                }

                if (checkAll) {
                    checkAll.addEventListener('change', function() {
                        itemCheckboxes.forEach(cb => {
                            cb.checked = this.checked;
                        });
                        updateBulkBar();
                    });
                }

                itemCheckboxes.forEach(cb => {
                    cb.addEventListener('change', function() {
                        const allChecked = document.querySelectorAll('.item-checkbox:checked')
                            .length === itemCheckboxes.length;
                        if (checkAll) checkAll.checked = allChecked;
                        updateBulkBar();
                    });
                });
            });

            function submitBulk(actionType) {
                const bulkForm = document.getElementById('form-bulk-action');
                const checkedItems = document.querySelectorAll('.item-checkbox:checked');

                if (checkedItems.length === 0) {
                    alert('Pilih minimal satu usulan terlebih dahulu!');
                    return;
                }

                const confirmMsg = actionType === 'submit' ?
                    "{{ $isUkpd ? 'Kirim usulan terpilih ke Staf SKPD Induk?' : 'Kirim usulan terpilih untuk diverifikasi oleh BPAD/BPKD?' }}" :
                    `Apakah Anda yakin ingin menghapus ${checkedItems.length} usulan terpilih?`;

                if (!confirm(confirmMsg)) return;

                bulkForm.querySelectorAll('input[name="ids[]"]').forEach(el => el.remove());

                checkedItems.forEach(cb => {
                    const input = document.createElement('input');
                    input.type = 'hidden';
                    input.name = 'ids[]';
                    input.value = cb.value;
                    bulkForm.appendChild(input);
                });

                bulkForm.action = actionType === 'submit' ? "{{ $routeBulkSubmit }}" : "{{ $routeBulkDestroy }}";
                bulkForm.submit();
            }

            function changePerPage(value) {
                const url = new URL(window.location.href);
                url.searchParams.set('per_page', value);
                url.searchParams.delete('page');
                window.location.href = url.toString();
            }
        </script>
    @endsection