@extends('admin.layout')

@section('title', 'Kelola Relawan')
@section('subtitle', 'Tambah, edit, dan hapus data relawan')

@section('content')
    <div class="flex items-center justify-between mb-5">
        <p class="text-gray-500 text-sm">Total: <span class="font-bold text-gray-700">{{ $volunteers->count() }}</span> relawan</p>
        <div class="flex items-center gap-2">
            @if ($volunteers->count() > 0)
            <form method="POST" action="{{ route('admin.volunteers.destroyAll') }}" onsubmit="return confirm('⚠️ PERINGATAN!\n\nApakah Anda yakin ingin MENGHAPUS SEMUA DATA RELAWAN?\nTindakan ini tidak dapat dibatalkan dan semua data absen relawan juga mungkin akan terhapus.')" class="inline-block">
                @csrf
                <button type="submit" class="inline-flex items-center gap-2 px-4 py-2.5 bg-rose-500 hover:bg-rose-600 active:scale-[0.98] text-white font-semibold text-sm rounded-xl shadow-md shadow-rose-500/30 transition-all">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
                    Hapus Semua
                </button>
            </form>
            @endif
            <button type="button" onclick="document.getElementById('importSection').classList.toggle('hidden')"
                class="inline-flex items-center gap-2 px-4 py-2.5 bg-emerald-500 hover:bg-emerald-600 active:scale-[0.98] text-white font-semibold text-sm rounded-xl shadow-md shadow-emerald-500/30 transition-all">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M9 19l3 3m0 0l3-3m-3 3V10"/></svg>
                Import Excel
            </button>
            <button type="button" onclick="openModal()"
                class="inline-flex items-center gap-2 px-4 py-2.5 bg-sky-500 hover:bg-sky-600 active:scale-[0.98] text-white font-semibold text-sm rounded-xl shadow-md shadow-sky-500/30 transition-all">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
                Tambah Relawan
            </button>
        </div>
    </div>

    {{-- Import Section (hidden by default) --}}
    <div id="importSection" class="hidden mb-5">
        <div class="bg-emerald-50 border border-emerald-200 rounded-2xl p-5">
            <div class="flex items-start gap-4">
                <div class="w-10 h-10 rounded-xl bg-emerald-100 flex items-center justify-center shrink-0">
                    <svg class="w-5 h-5 text-emerald-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
                </div>
                <div class="flex-1">
                    <h3 class="text-emerald-800 font-bold text-sm mb-1">Import Data Relawan dari Excel</h3>
                    <p class="text-emerald-600 text-xs mb-3">Download template, isi data, lalu upload kembali.</p>
                    
                    <div class="flex flex-col sm:flex-row items-start sm:items-end gap-3">
                        {{-- Download Template --}}
                        <a href="{{ route('admin.volunteers.template') }}" 
                            class="inline-flex items-center gap-2 px-3 py-2 bg-white border border-emerald-300 text-emerald-700 rounded-xl text-xs font-semibold hover:bg-emerald-100 transition-colors">
                            <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
                            Download Template Excel
                        </a>

                        {{-- Upload Form --}}
                        <form action="{{ route('admin.volunteers.import') }}" method="POST" enctype="multipart/form-data" class="flex items-end gap-2 flex-1">
                            @csrf
                            <div class="flex-1">
                                <input type="file" name="file" accept=".xlsx,.xls,.csv" required
                                    class="block w-full text-sm text-gray-600
                                    file:mr-4 file:py-2 file:px-4
                                    file:rounded-xl file:border-0
                                    file:text-sm file:font-bold
                                    file:bg-emerald-100 file:text-emerald-700
                                    hover:file:bg-emerald-200 file:transition-colors file:cursor-pointer
                                    border border-emerald-200 rounded-xl bg-white cursor-pointer hover:border-emerald-300 transition-colors outline-none focus:ring-2 focus:ring-emerald-500/20">
                            </div>
                            <button type="submit" class="px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-white font-semibold text-xs rounded-xl transition-colors whitespace-nowrap">
                                Upload & Import
                            </button>
                        </form>
                    </div>

                    @error('file')
                        <p class="text-xs text-rose-500 mt-2">{{ $message }}</p>
                    @enderror
                </div>
            </div>
        </div>
    </div>

    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm overflow-hidden">
        @if ($volunteers->count())
            <div class="overflow-x-auto">
                <table class="w-full">
                    <thead class="bg-gray-50">
                        <tr>
                            <th class="px-5 py-3 text-left text-xs font-semibold text-gray-500 uppercase">#</th>
                            <th class="px-5 py-3 text-left text-xs font-semibold text-gray-500 uppercase">Nama</th>
                            <th class="px-5 py-3 text-left text-xs font-semibold text-gray-500 uppercase">PIN</th>
                            <th class="px-5 py-3 text-left text-xs font-semibold text-gray-500 uppercase">Bagian Kerja</th>
                            <th class="px-5 py-3 text-right text-xs font-semibold text-gray-500 uppercase">Aksi</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-50">
                        @foreach ($volunteers as $idx => $vol)
                            <tr class="hover:bg-gray-50/50 transition-colors">
                                <td class="px-5 py-3 text-sm text-gray-400">{{ $idx + 1 }}</td>
                                <td class="px-5 py-3">
                                    <div class="flex items-center gap-3">
                                        <div class="w-9 h-9 rounded-lg bg-sky-100 flex items-center justify-center text-sky-600 font-bold text-sm">{{ substr($vol->name, 0, 1) }}</div>
                                        <span class="text-sm font-semibold text-gray-800">{{ $vol->name }}</span>
                                    </div>
                                </td>
                                <td class="px-5 py-3">
                                    <code class="bg-gray-100 px-2 py-1 rounded-lg text-xs font-mono text-gray-600">{{ $vol->pin }}</code>
                                </td>
                                <td class="px-5 py-3 text-sm text-gray-600">
                                    @php
                                        $assignment = $vol->volunteerAssignments->first();
                                    @endphp
                                    @if ($assignment)
                                        <span class="inline-block px-2 py-0.5 rounded-full text-xs font-medium bg-purple-100 text-purple-700">{{ $assignment->workSection->name }}</span>
                                    @else
                                        <span class="text-gray-400 text-xs">Belum ditugaskan</span>
                                    @endif
                                </td>
                                <td class="px-5 py-3 text-right">
                                    <div class="flex items-center justify-end gap-2">
                                        <button type="button" 
                                            onclick="openModal(true, '{{ $vol->id }}', '{{ addslashes($vol->name) }}', '{{ $vol->pin }}', '{{ $assignment ? $assignment->work_section_id : '' }}')" 
                                            class="w-8 h-8 rounded-lg bg-sky-50 hover:bg-sky-100 flex items-center justify-center text-sky-500 transition-all" title="Edit">
                                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/></svg>
                                        </button>
                                        <form method="POST" action="{{ route('admin.volunteers.destroy', $vol) }}" onsubmit="return confirm('Hapus relawan {{ $vol->name }}?')">
                                            @csrf @method('DELETE')
                                            <button type="submit" class="w-8 h-8 rounded-lg bg-red-50 hover:bg-red-100 flex items-center justify-center text-red-400 hover:text-red-600 transition-all" title="Hapus">
                                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
                                            </button>
                                        </form>
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        @else
            <div class="p-8 text-center text-gray-400 text-sm">Belum ada data relawan. Klik tombol "Tambah Relawan" untuk memulai.</div>
        @endif
    </div>

    {{-- MODAL FORM --}}
    <div id="volunteerModal" class="fixed inset-0 z-50 hidden">
        {{-- Backdrop --}}
        <div class="absolute inset-0 bg-gray-900/40 backdrop-blur-sm transition-opacity opacity-0" id="modalBackdrop" onclick="closeModal()"></div>
        
        {{-- Modal Panel --}}
        <div class="fixed inset-0 flex items-center justify-center p-4">
            <div class="w-full max-w-lg transform rounded-2xl bg-white text-left align-middle shadow-2xl transition-all scale-95 opacity-0" id="modalPanel">
                
                {{-- Header Modal --}}
                <div class="bg-gradient-to-r from-sky-500 to-sky-600 rounded-t-2xl px-6 py-5 flex items-center justify-between">
                    <div class="flex items-center gap-4">
                        <div class="w-10 h-10 bg-white/20 rounded-xl backdrop-blur-sm flex items-center justify-center border border-white/20">
                            <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z"/></svg>
                        </div>
                        <div>
                            <h3 class="text-lg font-bold text-white leading-tight" id="modalTitle">Tambah Relawan</h3>
                            <p class="text-sky-100 text-xs opacity-90 mt-0.5">Lengkapi formulir di bawah ini dengan benar.</p>
                        </div>
                    </div>
                    <button type="button" onclick="closeModal()" class="text-white/70 hover:text-white transition-colors focus:outline-none">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
                    </button>
                </div>

                {{-- Form Body --}}
                <form id="volunteerForm" method="POST" action="{{ route('admin.volunteers.store') }}" class="p-6">
                    @csrf
                    <div id="methodPut"></div> {{-- Tempat inject @method('PUT') --}}

                    <div class="space-y-5">
                        {{-- Nama Lengkap --}}
                        <div>
                            <label class="block text-sm font-bold text-gray-700 mb-2">Nama Lengkap</label>
                            <div class="relative">
                                <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
                                    <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/></svg>
                                </div>
                                <input type="text" name="name" id="inputName" required
                                    class="w-full pl-10 pr-4 py-2.5 bg-gray-50 border border-gray-200 rounded-xl focus:bg-white focus:ring-4 focus:ring-sky-500/10 focus:border-sky-500 text-sm transition-all outline-none"
                                    placeholder="Masukkan nama relawan">
                            </div>
                        </div>

                        {{-- PIN --}}
                        <div>
                            <label class="block text-sm font-bold text-gray-700 mb-2">PIN Akses</label>
                            <div class="relative">
                                <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
                                    <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/></svg>
                                </div>
                                <input type="text" name="pin" id="inputPin" required minlength="4" maxlength="6" inputmode="numeric" pattern="[0-9]*"
                                    class="w-full pl-10 pr-4 py-2.5 bg-gray-50 border border-gray-200 rounded-xl focus:bg-white focus:ring-4 focus:ring-sky-500/10 focus:border-sky-500 text-sm font-mono tracking-widest transition-all outline-none"
                                    placeholder="••••">
                            </div>
                            <p class="text-[10px] font-medium text-gray-400 mt-1.5 flex items-center gap-1.5">
                                <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                                Masukkan 4-6 digit angka untuk PIN.
                            </p>
                        </div>

                        {{-- Bagian Kerja --}}
                        <div>
                            <label class="block text-sm font-bold text-gray-700 mb-2">Bagian Kerja <span class="text-gray-400 font-normal ml-1">(Opsional)</span></label>
                            
                            {{-- Custom Dropdown Component --}}
                            <div class="relative" id="customDropdown">
                                {{-- Hidden Input to store the actual value --}}
                                <input type="hidden" name="work_section_id" id="inputWorkSection" value="">
                                
                                {{-- Dropdown Toggle Button --}}
                                <button type="button" id="dropdownToggle" class="w-full relative flex items-center justify-between pl-10 pr-4 py-2.5 bg-gray-50 border border-gray-200 rounded-xl focus:bg-white focus:ring-4 focus:ring-sky-500/10 focus:border-sky-500 text-sm transition-all outline-none text-left">
                                    <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
                                        <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg>
                                    </div>
                                    <span id="dropdownSelectedText" class="text-gray-500 truncate">Belum ditugaskan (Pilih Nanti)</span>
                                    <svg class="w-4 h-4 text-gray-400 transition-transform duration-200" id="dropdownIcon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
                                </button>

                                {{-- Dropdown Menu --}}
                                <div id="dropdownMenu" class="dropdown-menu absolute z-10 w-full mt-2 bg-white border border-gray-100 rounded-xl shadow-[0_10px_40px_rgb(0,0,0,0.08)] opacity-0 invisible transform scale-95 origin-top-right transition-all duration-200 max-h-60 overflow-y-auto">
                                    <ul class="p-2 space-y-1">
                                        <li>
                                            <button type="button" class="dropdown-item w-full flex items-center px-3 py-2.5 text-sm text-gray-600 rounded-lg hover:bg-sky-50 hover:text-sky-700 transition-colors text-left font-medium" data-value="">
                                                <div class="w-5 flex-shrink-0 mr-1.5 flex items-center justify-center">
                                                    <svg class="w-4 h-4 text-sky-500 hidden check-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"/></svg>
                                                </div>
                                                Belum ditugaskan (Pilih Nanti)
                                            </button>
                                        </li>
                                        @foreach ($workSections as $ws)
                                        <li>
                                            <button type="button" class="dropdown-item w-full flex items-center px-3 py-2.5 text-sm text-gray-600 rounded-lg hover:bg-sky-50 hover:text-sky-700 transition-colors text-left font-medium" data-value="{{ $ws->id }}">
                                                <div class="w-5 flex-shrink-0 mr-1.5 flex items-center justify-center">
                                                    <svg class="w-4 h-4 text-sky-500 hidden check-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"/></svg>
                                                </div>
                                                {{ $ws->name }}
                                            </button>
                                        </li>
                                        @endforeach
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- Actions --}}
                    <div class="mt-8 flex items-center gap-3">
                        <button type="submit" class="flex-1 px-4 py-2.5 bg-sky-500 hover:bg-sky-600 active:scale-[0.98] text-white font-bold text-sm rounded-xl shadow-md shadow-sky-500/30 transition-all flex items-center justify-center gap-2">
                            <span id="btnText">Simpan</span>
                        </button>
                        <button type="button" onclick="closeModal()" class="flex-1 px-4 py-2.5 bg-gray-100 hover:bg-gray-200 active:scale-[0.98] text-gray-600 font-bold text-sm rounded-xl transition-all">
                            Batal
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

@endsection

@push('scripts')
<script>
    const modal = document.getElementById('volunteerModal');
    const backdrop = document.getElementById('modalBackdrop');
    const panel = document.getElementById('modalPanel');
    const form = document.getElementById('volunteerForm');
    const methodPut = document.getElementById('methodPut');
    
    // Store original route for create
    const createUrl = "{{ route('admin.volunteers.store') }}";

    function openModal(isEdit = false, id = null, name = '', pin = '', workSectionId = '') {
        // Setup Form Data
        if (isEdit) {
            document.getElementById('modalTitle').innerText = 'Edit Data Relawan';
            document.getElementById('btnText').innerText = 'Simpan Perubahan';
            
            // Set dynamic action URL
            form.action = `/admin/volunteers/${id}`;
            // Add PUT method override for Laravel
            methodPut.innerHTML = '<input type="hidden" name="_method" value="PUT">';
            
            // Fill inputs
            document.getElementById('inputName').value = name;
            document.getElementById('inputPin').value = pin;
            updateCustomDropdown(workSectionId);
        } else {
            document.getElementById('modalTitle').innerText = 'Tambah Relawan Baru';
            document.getElementById('btnText').innerText = 'Tambahkan Relawan';
            
            form.action = createUrl;
            methodPut.innerHTML = '';
            
            // Clear inputs
            form.reset();
            updateCustomDropdown('');
        }

        // Show Modal with Animation
        modal.classList.remove('hidden');
        
        // Small delay to allow display block to apply before transition
        setTimeout(() => {
            backdrop.classList.remove('opacity-0');
            backdrop.classList.add('opacity-100');
            
            panel.classList.remove('scale-95', 'opacity-0');
            panel.classList.add('scale-100', 'opacity-100');
        }, 10);
    }

    function closeModal() {
        // Animate Out
        backdrop.classList.remove('opacity-100');
        backdrop.classList.add('opacity-0');
        
        panel.classList.remove('scale-100', 'opacity-100');
        panel.classList.add('scale-95', 'opacity-0');

        // Hide Modal after animation completes
        setTimeout(() => {
            modal.classList.add('hidden');
            closeDropdownMenu(); // Close dropdown if it was open
        }, 300);
    }

    // --- Custom Dropdown Logic ---
    const dropdownToggle = document.getElementById('dropdownToggle');
    const dropdownMenu = document.getElementById('dropdownMenu');
    const dropdownIcon = document.getElementById('dropdownIcon');
    const dropdownSelectedText = document.getElementById('dropdownSelectedText');
    const inputWorkSection = document.getElementById('inputWorkSection');
    const dropdownItems = document.querySelectorAll('.dropdown-item');

    function toggleDropdownMenu() {
        const isExpanded = dropdownMenu.classList.contains('opacity-100');
        if (isExpanded) {
            closeDropdownMenu();
        } else {
            openDropdownMenu();
        }
    }

    function openDropdownMenu() {
        dropdownMenu.classList.remove('invisible', 'opacity-0', 'scale-95');
        dropdownMenu.classList.add('opacity-100', 'scale-100');
        dropdownToggle.classList.add('ring-4', 'ring-sky-500/10', 'border-sky-500', 'bg-white');
        dropdownToggle.classList.remove('bg-gray-50');
        dropdownIcon.classList.add('rotate-180');
    }

    function closeDropdownMenu() {
        dropdownMenu.classList.add('opacity-0', 'scale-95');
        dropdownMenu.classList.remove('opacity-100', 'scale-100');
        dropdownToggle.classList.remove('ring-4', 'ring-sky-500/10', 'border-sky-500', 'bg-white');
        dropdownToggle.classList.add('bg-gray-50');
        dropdownIcon.classList.remove('rotate-180');
        
        setTimeout(() => {
            dropdownMenu.classList.add('invisible');
        }, 200);
    }

    function updateCustomDropdown(value) {
        // Set the hidden input value
        inputWorkSection.value = value;
        
        dropdownItems.forEach(item => {
            const itemValue = item.getAttribute('data-value');
            const checkIcon = item.querySelector('.check-icon');
            
            if (itemValue == value) {
                // Highlight selected item
                item.classList.add('bg-sky-50', 'text-sky-700');
                item.classList.remove('text-gray-600');
                checkIcon.classList.remove('hidden');
                
                // Update button text
                const textNode = Array.from(item.childNodes).find(node => node.nodeType === Node.TEXT_NODE && node.textContent.trim().length > 0);
                const text = textNode ? textNode.textContent.trim() : item.innerText.trim();
                
                dropdownSelectedText.innerText = text;
                dropdownSelectedText.classList.remove('text-gray-500');
                dropdownSelectedText.classList.add('text-gray-800', 'font-medium');
            } else {
                // Unhighlight other items
                item.classList.remove('bg-sky-50', 'text-sky-700');
                item.classList.add('text-gray-600');
                checkIcon.classList.add('hidden');
            }
        });
        
        // If empty value selected
        if (!value) {
            dropdownSelectedText.classList.add('text-gray-500');
            dropdownSelectedText.classList.remove('text-gray-800', 'font-medium');
        }
    }

    dropdownToggle.addEventListener('click', toggleDropdownMenu);

    dropdownItems.forEach(item => {
        item.addEventListener('click', (e) => {
            e.preventDefault();
            const value = item.getAttribute('data-value');
            updateCustomDropdown(value);
            closeDropdownMenu();
        });
    });

    // Close dropdown when clicking outside
    document.addEventListener('click', (e) => {
        if (!document.getElementById('customDropdown').contains(e.target)) {
            closeDropdownMenu();
        }
    });
</script>

<style>
    /* Custom Scrollbar for Dropdown Menu */
    .dropdown-menu::-webkit-scrollbar {
        width: 14px; /* Wider to accommodate arrows */
    }
    
    .dropdown-menu::-webkit-scrollbar-track {
        background: #f8fafc; /* bg-slate-50 */
        border-radius: 8px;
        margin: 4px;
    }
    
    .dropdown-menu::-webkit-scrollbar-thumb {
        background-color: #cbd5e1; /* text-slate-300 */
        border-radius: 8px;
        border: 4px solid #f8fafc;
    }
    
    .dropdown-menu::-webkit-scrollbar-thumb:hover {
        background-color: #94a3b8;
    }
    
    /* Scrollbar Arrows */
    .dropdown-menu::-webkit-scrollbar-button:single-button {
        display: block;
        background-color: #f1f5f9;
        height: 12px;
        border-radius: 4px;
    }
    
    .dropdown-menu::-webkit-scrollbar-button:single-button:vertical:decrement {
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2364748b' stroke-width='3'><path stroke-linecap='round' stroke-linejoin='round' d='M5 15l7-7 7 7'/></svg>");
        background-size: 10px;
        background-position: center;
        background-repeat: no-repeat;
    }
    
    .dropdown-menu::-webkit-scrollbar-button:single-button:vertical:increment {
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2364748b' stroke-width='3'><path stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'/></svg>");
        background-size: 10px;
        background-position: center;
        background-repeat: no-repeat;
    }
</style>
@endpush