@extends('admin.layout')
@section('title', 'Penugasan Relawan')
@section('subtitle', 'Tugaskan relawan ke bagian kerja')

@section('content')
<div class="flex justify-between items-center mb-6">
    <h2 class="text-lg font-bold text-gray-800">Daftar Penugasan</h2>
    <button type="button" onclick="openModal()" class="px-4 py-2 bg-sky-500 hover:bg-sky-600 active:scale-[0.98] text-white text-sm font-bold rounded-xl shadow-md shadow-sky-500/30 transition-all flex items-center gap-2">
        <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 6v6m0 0v6m0-6h6m-6 0H6"/></svg>
        Tambah Penugasan
    </button>
</div>

{{-- Assignment List --}}
<div class="bg-white rounded-2xl border border-gray-100 shadow-[0_8px_30px_rgb(0,0,0,0.04)] overflow-hidden">
    <div class="overflow-x-auto">
        <table class="w-full text-sm text-left">
            <thead class="bg-gray-50/50 border-b border-gray-100 text-gray-500">
                <tr>
                    <th class="px-6 py-4 font-semibold w-16">#</th>
                    <th class="px-6 py-4 font-semibold">Relawan</th>
                    <th class="px-6 py-4 font-semibold">Bagian Kerja</th>
                    <th class="px-6 py-4 font-semibold text-right">Aksi</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-50">
                @forelse ($assignments as $i => $a)
                <tr class="hover:bg-sky-50/30 transition-colors group">
                    <td class="px-6 py-4 text-gray-400 font-medium">{{ $i + 1 }}</td>
                    <td class="px-6 py-4">
                        <div class="flex items-center gap-3">
                            <div class="w-8 h-8 rounded-full bg-sky-100 text-sky-600 flex items-center justify-center font-bold text-xs">
                                {{ substr($a->user->name, 0, 1) }}
                            </div>
                            <span class="font-bold text-gray-800">{{ $a->user->name }}</span>
                        </div>
                    </td>
                    <td class="px-6 py-4">
                        <span class="inline-flex items-center gap-1.5 px-3 py-1 bg-purple-50 text-purple-700 rounded-lg text-xs font-bold border border-purple-100">
                            <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="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg>
                            {{ $a->workSection->name }}
                        </span>
                    </td>
                    <td class="px-6 py-4 text-right">
                        <form method="POST" action="{{ route('admin.assignments.destroy', $a) }}" onsubmit="return confirm('Hapus penugasan ini?')">
                            @csrf @method('DELETE')
                            <button type="submit" class="w-8 h-8 inline-flex items-center justify-center rounded-lg bg-white border border-gray-200 hover:bg-red-50 hover:border-red-200 text-gray-400 hover:text-red-500 transition-all shadow-sm opacity-0 group-hover:opacity-100" 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>
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="4" class="px-6 py-12 text-center">
                        <div class="w-12 h-12 bg-gray-50 rounded-full flex items-center justify-center mx-auto mb-3">
                            <svg class="w-6 h-6 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/></svg>
                        </div>
                        <p class="text-gray-500 font-medium">Belum ada penugasan relawan.</p>
                        <p class="text-gray-400 text-xs mt-1">Klik tombol Tambah Penugasan di atas.</p>
                    </td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>

{{-- MODAL FORM --}}
<div id="assignmentModal" 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-md transform rounded-2xl bg-white text-left align-middle shadow-2xl transition-all scale-95 opacity-0 flex flex-col" 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 shrink-0">
                <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="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/></svg>
                    </div>
                    <div>
                        <h3 class="text-lg font-bold text-white leading-tight">Tambah Penugasan</h3>
                        <p class="text-sky-100 text-xs opacity-90 mt-0.5">Pilih relawan dan bagian kerja.</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="assignmentForm" method="POST" action="{{ route('admin.assignments.store') }}" class="flex flex-col">
                @csrf
                <div class="p-6 space-y-6">
                    
                    {{-- Dropdown Relawan --}}
                    <div>
                        <label class="block text-sm font-bold text-gray-700 mb-2">Relawan</label>
                        <div class="relative custom-dropdown" id="userDropdown">
                            <input type="hidden" name="user_id" id="inputUser" value="" required>
                            
                            <button type="button" class="dropdown-toggle w-full relative flex items-center justify-between pl-10 pr-4 py-3 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="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>
                                <span class="dropdown-selected-text text-gray-400 truncate">Pilih Relawan</span>
                                <svg class="dropdown-icon w-4 h-4 text-gray-400 transition-transform duration-200" 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>

                            <div class="dropdown-menu absolute z-50 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 transition-all duration-200 max-h-48 overflow-y-auto">
                                <ul class="p-2 space-y-1">
                                    @foreach ($volunteers as $v)
                                    <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="{{ $v->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>
                                            {{ $v->name }}
                                        </button>
                                    </li>
                                    @endforeach
                                </ul>
                            </div>
                        </div>
                    </div>

                    {{-- Dropdown Bagian Kerja --}}
                    <div>
                        <label class="block text-sm font-bold text-gray-700 mb-2">Bagian Kerja</label>
                        <div class="relative custom-dropdown" id="sectionDropdown">
                            <input type="hidden" name="work_section_id" id="inputSection" value="" required>
                            
                            <button type="button" class="dropdown-toggle w-full relative flex items-center justify-between pl-10 pr-4 py-3 bg-gray-50 border border-gray-200 rounded-xl focus:bg-white focus:ring-4 focus:ring-purple-500/10 focus:border-purple-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 class="dropdown-selected-text text-gray-400 truncate">Pilih Bagian Kerja</span>
                                <svg class="dropdown-icon w-4 h-4 text-gray-400 transition-transform duration-200" 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>

                            <div class="dropdown-menu absolute z-50 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 transition-all duration-200 max-h-48 overflow-y-auto">
                                <ul class="p-2 space-y-1">
                                    @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-purple-50 hover:text-purple-700 transition-colors text-left font-medium" data-value="{{ $ws->id }}" data-color="purple">
                                            <div class="w-5 flex-shrink-0 mr-1.5 flex items-center justify-center">
                                                <svg class="w-4 h-4 text-purple-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>

                {{-- Footer Actions --}}
                <div class="p-6 border-t border-gray-100 bg-gray-50/50 rounded-b-2xl shrink-0">
                    <div class="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">
                            Tugaskan
                        </button>
                        <button type="button" onclick="closeModal()" class="flex-1 px-4 py-2.5 bg-white border border-gray-200 hover:bg-gray-50 active:scale-[0.98] text-gray-600 font-bold text-sm rounded-xl transition-all shadow-sm">
                            Batal
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

@push('scripts')
<script>
    const modal = document.getElementById('assignmentModal');
    const backdrop = document.getElementById('modalBackdrop');
    const panel = document.getElementById('modalPanel');
    const form = document.getElementById('assignmentForm');

    function openModal() {
        modal.classList.remove('hidden');
        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() {
        backdrop.classList.remove('opacity-100');
        backdrop.classList.add('opacity-0');
        panel.classList.remove('scale-100', 'opacity-100');
        panel.classList.add('scale-95', 'opacity-0');
        setTimeout(() => {
            modal.classList.add('hidden');
            document.querySelectorAll('.dropdown-menu').forEach(menu => closeDropdown(menu.closest('.custom-dropdown')));
        }, 300);
    }

    // Generic Custom Dropdown Logic
    document.querySelectorAll('.custom-dropdown').forEach(dropdown => {
        const toggleBtn = dropdown.querySelector('.dropdown-toggle');
        const menu = dropdown.querySelector('.dropdown-menu');
        const icon = dropdown.querySelector('.dropdown-icon');
        const items = dropdown.querySelectorAll('.dropdown-item');
        const hiddenInput = dropdown.querySelector('input[type="hidden"]');
        const selectedText = dropdown.querySelector('.dropdown-selected-text');

        // Determine theme color from data-color or default to sky
        const isPurple = items.length > 0 && items[0].getAttribute('data-color') === 'purple';
        const ringColor = isPurple ? 'ring-purple-500/10' : 'ring-sky-500/10';
        const borderColor = isPurple ? 'border-purple-500' : 'border-sky-500';

        toggleBtn.addEventListener('click', (e) => {
            e.stopPropagation();
            // Close other open dropdowns first
            document.querySelectorAll('.custom-dropdown').forEach(other => {
                if (other !== dropdown) closeDropdown(other);
            });
            
            const isExpanded = menu.classList.contains('opacity-100');
            if (isExpanded) {
                closeDropdown(dropdown);
            } else {
                openDropdown(dropdown, ringColor, borderColor);
            }
        });

        items.forEach(item => {
            item.addEventListener('click', (e) => {
                e.preventDefault();
                const value = item.getAttribute('data-value');
                const text = item.innerText.trim();
                
                // Set hidden input value
                hiddenInput.value = value;
                
                // Update selected text
                selectedText.innerText = text;
                selectedText.classList.remove('text-gray-400');
                selectedText.classList.add('text-gray-800');

                // Highlight selected item
                items.forEach(i => {
                    const check = i.querySelector('.check-icon');
                    if (i === item) {
                        i.classList.add(isPurple ? 'bg-purple-50' : 'bg-sky-50', isPurple ? 'text-purple-700' : 'text-sky-700');
                        i.classList.remove('text-gray-600');
                        check.classList.remove('hidden');
                    } else {
                        i.classList.remove('bg-purple-50', 'bg-sky-50', 'text-purple-700', 'text-sky-700');
                        i.classList.add('text-gray-600');
                        check.classList.add('hidden');
                    }
                });

                closeDropdown(dropdown);
            });
        });
    });

    function openDropdown(dropdown, ringColor, borderColor) {
        const toggleBtn = dropdown.querySelector('.dropdown-toggle');
        const menu = dropdown.querySelector('.dropdown-menu');
        const icon = dropdown.querySelector('.dropdown-icon');

        menu.classList.remove('invisible', 'opacity-0', 'scale-95');
        menu.classList.add('opacity-100', 'scale-100');
        toggleBtn.classList.add('ring-4', ringColor, borderColor, 'bg-white');
        toggleBtn.classList.remove('bg-gray-50');
        icon.classList.add('rotate-180');
    }

    function closeDropdown(dropdown) {
        const toggleBtn = dropdown.querySelector('.dropdown-toggle');
        const menu = dropdown.querySelector('.dropdown-menu');
        const icon = dropdown.querySelector('.dropdown-icon');
        
        // Remove ring color safely by looping classes
        const classes = [...toggleBtn.classList];
        classes.forEach(c => {
            if (c.startsWith('ring-') || c.startsWith('border-')) {
                // leave base border-gray-200
                if(c !== 'border-gray-200' && c !== 'border') {
                    toggleBtn.classList.remove(c);
                }
            }
        });

        menu.classList.add('opacity-0', 'scale-95');
        menu.classList.remove('opacity-100', 'scale-100');
        toggleBtn.classList.add('bg-gray-50');
        toggleBtn.classList.remove('bg-white');
        icon.classList.remove('rotate-180');
        
        setTimeout(() => {
            menu.classList.add('invisible');
        }, 200);
    }

    // Close all dropdowns when clicking outside
    document.addEventListener('click', () => {
        document.querySelectorAll('.custom-dropdown').forEach(dropdown => closeDropdown(dropdown));
    });

    // Form validation before submit
    form.addEventListener('submit', (e) => {
        const user = document.getElementById('inputUser').value;
        const section = document.getElementById('inputSection').value;
        
        if (!user || !section) {
            e.preventDefault();
            alert('Silakan pilih Relawan dan Bagian Kerja terlebih dahulu.');
        }
    });
</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
@endsection