@extends('layouts.app')

@section('title', 'Validasi Usulan SHS Dinas')

@section('content')
    <div class="space-y-6">

        {{-- Header --}}
        <div class="flex flex-col md:flex-row md:items-center justify-between gap-4">
            <div>
                <h1 class="text-2xl font-bold text-slate-900">Validasi Usulan Komponen SHS</h1>
                <p class="text-sm text-gray-500">Pilih beberapa atau seluruh usulan yang belum divalidasi untuk
                    disetujui/ditolak secara massal.</p>
            </div>

            <a href="{{ route('skpd.ka.index') }}"
                class="px-4 py-2 bg-slate-100 hover:bg-slate-200 text-slate-700 text-sm font-semibold rounded-lg border border-slate-300 shadow-sm flex items-center gap-2 transition-all self-start">
                <i class="fa-solid fa-arrow-left"></i> Kembali ke Dashboard
            </a>
        </div>

        {{-- Flash Alerts --}}
        @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') || $errors->any())
            <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">
                @if (session('error'))
                    <p class="font-semibold"><i class="fa-solid fa-circle-exclamation mr-2"></i> {{ session('error') }}</p>
                @endif
                @if ($errors->any())
                    <ul class="list-disc list-inside mt-1 text-xs">
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                @endif
            </div>
        @endif

        {{-- Filter & Pencarian --}}
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4">
            <form method="GET" action="{{ route('skpd.ka.validasi.index') }}"
                class="flex flex-col sm:flex-row items-center gap-3">
                <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 uraian barang, kelompok, kode, atau pengusul..."
                        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>
                        <option value="menunggu_validasi" {{ request('status') == 'menunggu_validasi' ? 'selected' : '' }}>
                            Menunggu Validasi</option>
                        <option value="diverifikasi_staf" {{ request('status') == 'diverifikasi_staf' ? 'selected' : '' }}>
                            Diverifikasi Staf</option>
                        <option value="validasi_success" {{ request('status') == 'validasi_success' ? 'selected' : '' }}>
                            Validasi Sukses (Terkunci)</option>
                        <option value="validasi_tertolak" {{ request('status') == 'validasi_tertolak' ? 'selected' : '' }}>
                            Validasi Ditolak (Terkunci)</option>
                        <option value="disetujui" {{ request('status') == 'disetujui' ? 'selected' : '' }}>Disetujui Final
                            (Terkunci)</option>
                    </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="{{ route('skpd.ka.validasi.index') }}"
                            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>

        {{-- Form Validasi Massal --}}
        <form id="formValidasiBatch" action="{{ route('skpd.ka.validasi.batch') }}" method="POST">
            @csrf
            <input type="hidden" name="action" id="batchAction" value="approve">
            <input type="hidden" name="catatan_penolakan" id="batchCatatanPenolakan" value="">

            {{-- Floating Toolbar / Aksi Massal --}}
            <div id="batchToolbar"
                class="bg-blue-50 border border-blue-200 rounded-xl p-3.5 mb-4 flex flex-col sm:flex-row items-center justify-between gap-3 transition-all">
                <div class="flex items-center gap-2 text-xs text-blue-900 font-semibold">
                    <i class="fa-solid fa-square-check text-blue-600 text-base"></i>
                    <span>Terpilih: <span id="selectedCount" class="font-bold text-sm text-blue-700">0</span> item
                        usulan</span>
                </div>

                <div class="flex items-center gap-2 w-full sm:w-auto">
                    <button type="button" onclick="jalankanValidasiBatch('approve')" id="btnBatchApprove" disabled
                        class="px-3.5 py-1.5 bg-emerald-600 hover:bg-emerald-700 disabled:bg-gray-300 disabled:cursor-not-allowed text-white text-xs font-semibold rounded-lg shadow-sm flex items-center gap-1.5 transition-all">
                        <i class="fa-solid fa-check-double"></i> Setujui yang Dipilih
                    </button>

                    <button type="button" onclick="bukaModalTolakBatch()" id="btnBatchReject" disabled
                        class="px-3.5 py-1.5 bg-rose-600 hover:bg-rose-700 disabled:bg-gray-300 disabled:cursor-not-allowed text-white text-xs font-semibold rounded-lg shadow-sm flex items-center gap-1.5 transition-all">
                        <i class="fa-solid fa-xmark"></i> Tolak yang Dipilih
                    </button>
                </div>
            </div>

            {{-- Tabel Data --}}
            <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 justify-between items-center bg-slate-50">
                    <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> Daftar Usulan yang Perlu Validasi
                    </h3>
                    <span class="text-xs font-semibold px-2.5 py-1 bg-blue-100 text-blue-800 rounded-full">
                        Total: {{ $usulanList->total() }} Data
                    </span>
                </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-12">
                                    <input type="checkbox" id="selectAll"
                                        class="w-4 h-4 text-blue-600 rounded border-gray-300 focus:ring-blue-500 cursor-pointer disabled:opacity-40 disabled:cursor-not-allowed">
                                </th>
                                <th class="p-4">Pengusul</th>
                                <th class="p-4">Kode & Kelompok</th>
                                <th class="p-4">Uraian Barang / Spesifikasi</th>
                                <th class="p-4">Usulan Harga</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
                                    $bisaDivalidasi = in_array(strtolower($item->status), [
                                        'menunggu_validasi',
                                        'diverifikasi_staf',
                                        'draf_skpd',
                                        'menunggu_konfirmasi_skpd',
                                    ]);
                                @endphp
                                <tr
                                    class="hover:bg-slate-50/80 transition-colors {{ !$bisaDivalidasi ? 'bg-slate-50/40' : '' }}">
                                    {{-- Proteksi Checkbox --}}
                                    <td class="p-4 text-center">
                                        @if ($bisaDivalidasi)
                                            <input type="checkbox" name="usulan_ids[]" value="{{ $item->id }}"
                                                class="item-checkbox w-4 h-4 text-blue-600 rounded border-gray-300 focus:ring-blue-500 cursor-pointer"
                                                onchange="updateSelectedCount()">
                                        @else
                                            <div class="inline-flex items-center justify-center text-slate-400"
                                                title="Data sudah tervalidasi / terkunci">
                                                <i class="fa-solid fa-lock text-xs"></i>
                                            </div>
                                        @endif
                                    </td>
                                    <td class="p-4">
                                        <p class="font-bold text-slate-800">{{ $item->user->name ?? 'Staf SKPD' }}</p>
                                        <p class="text-xs text-gray-400 font-mono">
                                            {{ $item->created_at->format('d M Y') }}</p>
                                    </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>
                                    </td>
                                    <td class="p-4">
                                        <p class="font-semibold text-slate-800">{{ $item->uraian_barang }}</p>
                                        <p class="text-xs text-gray-500 truncate max-w-xs">{{ $item->spesifikasi ?? '-' }}
                                        </p>
                                    </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">
                                        <span
                                            class="px-2.5 py-1 rounded-full text-[10px] font-bold uppercase {{ $item->status_info['class'] ?? 'bg-slate-100 text-slate-700' }}">
                                            {{ $item->status_info['label'] ?? str_replace('_', ' ', $item->status) }}
                                        </span>
                                    </td>
                                    <td class="p-4 text-center">
                                        <a href="{{ route('skpd.ka.validasi.show', $item->id) }}"
                                            class="p-1.5 bg-sky-50 text-sky-700 hover:bg-sky-100 rounded-lg text-xs font-semibold inline-flex items-center gap-1 transition-all"
                                            title="Tinjau Rincian">
                                            <i class="fa-solid fa-eye"></i> Detail
                                        </a>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="7" class="p-8 text-center text-gray-400 text-xs italic">
                                        Tidak ada data usulan komponen yang perlu divalidasi.
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>

                {{-- Pagination Links --}}
                <div
                    class="px-6 py-4 border-t border-gray-100 bg-slate-50 flex flex-col sm:flex-row items-center justify-between gap-4">
                    <div class="text-xs text-gray-500 font-medium">
                        Menampilkan {{ $usulanList->firstItem() ?? 0 }} sampai {{ $usulanList->lastItem() ?? 0 }} dari
                        {{ $usulanList->total() }} total data
                    </div>
                    <div>
                        {{ $usulanList->appends(request()->query())->links() }}
                    </div>
                </div>
            </div>
        </form>

    </div>

    {{-- Modal Tolak Massal --}}
    <div id="modalTolakBatch"
        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-md p-6">
            <div class="flex justify-between items-center mb-3">
                <h3 class="text-base font-bold text-slate-800 flex items-center gap-2">
                    <i class="fa-solid fa-circle-xmark text-rose-600"></i> Tolak Usulan yang Dipilih
                </h3>
                <button type="button" onclick="tutupModalTolakBatch()" class="text-gray-400 hover:text-gray-600">
                    <i class="fa-solid fa-xmark"></i>
                </button>
            </div>
            <p class="text-xs text-gray-500 mb-3">Tuliskan alasan penolakan untuk seluruh usulan yang dicentang:</p>

            <textarea id="inputCatatanTolakBatch" rows="3" required
                placeholder="Contoh: Spesifikasi teknis belum lengkap dan belum ada bukti survei..."
                class="w-full p-2.5 border rounded-lg text-xs focus:ring-2 focus:ring-rose-500 outline-none mb-4"></textarea>

            <div class="flex justify-end gap-2">
                <button type="button" onclick="tutupModalTolakBatch()"
                    class="px-3 py-1.5 text-xs text-gray-600 bg-gray-100 hover:bg-gray-200 rounded-lg font-semibold">Batal</button>
                <button type="button" onclick="jalankanValidasiBatch('reject')"
                    class="px-4 py-1.5 text-xs text-white bg-rose-600 hover:bg-rose-700 rounded-lg font-semibold shadow">Kirim
                    Penolakan</button>
            </div>
        </div>
    </div>

    {{-- JavaScript Checkbox & Batch Logic --}}
    <script>
        const selectAll = document.getElementById('selectAll');
        const selectedCount = document.getElementById('selectedCount');
        const btnApprove = document.getElementById('btnBatchApprove');
        const btnReject = document.getElementById('btnBatchReject');

        function getActiveCheckboxes() {
            return document.querySelectorAll('.item-checkbox:not(:disabled)');
        }

        // Cek ketersediaan checkbox aktif saat halaman dimuat
        document.addEventListener('DOMContentLoaded', function() {
            const activeBoxes = getActiveCheckboxes();
            if (activeBoxes.length === 0 && selectAll) {
                selectAll.disabled = true;
                selectAll.title = "Tidak ada usulan berstatus pending pada halaman ini";
            }
        });

        if (selectAll) {
            selectAll.addEventListener('change', function() {
                const activeBoxes = getActiveCheckboxes();
                activeBoxes.forEach(cb => cb.checked = selectAll.checked);
                updateSelectedCount();
            });
        }

        function updateSelectedCount() {
            const checkedBoxes = document.querySelectorAll('.item-checkbox:checked');
            const total = checkedBoxes.length;
            selectedCount.innerText = total;

            if (total > 0) {
                btnApprove.removeAttribute('disabled');
                btnReject.removeAttribute('disabled');
            } else {
                btnApprove.setAttribute('disabled', 'true');
                btnReject.setAttribute('disabled', 'true');
                if (selectAll) selectAll.checked = false;
            }
        }

        function jalankanValidasiBatch(action) {
            const checkedBoxes = document.querySelectorAll('.item-checkbox:checked');
            if (checkedBoxes.length === 0) {
                alert('Pilih minimal satu usulan terlebih dahulu!');
                return;
            }

            if (action === 'approve') {
                if (!confirm(`Setujui validasi ${checkedBoxes.length} usulan terpilih?`)) return;
                document.getElementById('batchAction').value = 'approve';
                document.getElementById('formValidasiBatch').submit();
            } else if (action === 'reject') {
                const catatan = document.getElementById('inputCatatanTolakBatch').value.trim();
                if (!catatan) {
                    alert('Catatan alasan penolakan wajib diisi!');
                    return;
                }
                document.getElementById('batchAction').value = 'reject';
                document.getElementById('batchCatatanPenolakan').value = catatan;
                document.getElementById('formValidasiBatch').submit();
            }
        }

        function bukaModalTolakBatch() {
            const checkedBoxes = document.querySelectorAll('.item-checkbox:checked');
            if (checkedBoxes.length === 0) {
                alert('Pilih minimal satu usulan terlebih dahulu!');
                return;
            }
            document.getElementById('modalTolakBatch').classList.remove('hidden');
        }

        function tutupModalTolakBatch() {
            document.getElementById('modalTolakBatch').classList.add('hidden');
        }
    </script>
@endsection