@extends('admin.layout')

@section('title', 'Jadwal Khusus')
@section('subtitle', 'Atur jadwal berbeda untuk relawan tertentu pada tanggal tertentu')

@section('content')
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
    {{-- Form Tambah Override --}}
    <div class="lg:col-span-1">
        <div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden sticky top-4">
            <div class="p-5 border-b border-gray-100">
                <h2 class="text-gray-800 font-bold text-base flex items-center gap-2">
                    <svg class="w-5 h-5 text-amber-500" 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 Jadwal Khusus
                </h2>
                <p class="text-gray-400 text-xs mt-1">Pilih beberapa relawan sekaligus untuk jadwal yang sama.</p>
            </div>
            <form action="{{ route('admin.schedule-overrides.store') }}" method="POST" class="p-5 space-y-4">
                @csrf

                {{-- Pilih Relawan (Multi-select Dropdown) --}}
                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-1.5">Pilih Relawan</label>
                    <div class="relative" id="volunteerDropdownContainer">
                        {{-- Dropdown Toggle Button --}}
                        <button type="button" id="volunteerDropdownBtn" class="w-full relative flex items-center justify-between px-4 py-2.5 bg-white border border-gray-200 rounded-xl focus:ring-2 focus:ring-sky-500/20 focus:border-sky-500 text-sm transition-all outline-none text-left shadow-sm">
                            <span id="volunteerDropdownText" class="text-gray-500 truncate">Pilih relawan...</span>
                            <svg class="w-4 h-4 text-gray-400 transition-transform duration-200" id="volunteerDropdownIcon" 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="volunteerDropdownMenu" class="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">
                            <div class="max-h-60 overflow-y-auto custom-scrollbar p-2 space-y-1">
                                @foreach ($volunteers as $vol)
                                    <label class="flex items-center gap-2 px-3 py-2 rounded-lg hover:bg-sky-50 cursor-pointer text-sm text-gray-700 transition-colors">
                                        <input type="checkbox" name="user_ids[]" value="{{ $vol->id }}" class="volunteer-checkbox rounded text-sky-500 focus:ring-sky-500 w-4 h-4 border-gray-300">
                                        {{ $vol->name }}
                                    </label>
                                @endforeach
                            </div>
                        </div>
                    </div>
                    @error('user_ids') <p class="text-xs text-rose-500 mt-1">{{ $message }}</p> @enderror
                </div>

                {{-- Tanggal --}}
                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-1">Tanggal</label>
                    <input type="date" name="date" value="{{ old('date', now()->format('Y-m-d')) }}" required
                        class="w-full px-4 py-2 border border-gray-200 rounded-xl focus:ring-2 focus:ring-sky-500/20 focus:border-sky-500 text-sm">
                    @error('date') <p class="text-xs text-rose-500 mt-1">{{ $message }}</p> @enderror
                </div>

                {{-- Jam Masuk & Pulang --}}
                <div class="grid grid-cols-2 gap-3">
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-1">Jam Masuk</label>
                        <input type="time" name="start_time" value="{{ old('start_time', '08:00') }}" required
                            class="w-full px-4 py-2 border border-gray-200 rounded-xl focus:ring-2 focus:ring-sky-500/20 focus:border-sky-500 text-sm">
                    </div>
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-1">Jam Pulang</label>
                        <input type="time" name="end_time" value="{{ old('end_time', '12:00') }}" required
                            class="w-full px-4 py-2 border border-gray-200 rounded-xl focus:ring-2 focus:ring-sky-500/20 focus:border-sky-500 text-sm">
                    </div>
                </div>

                {{-- Keterangan --}}
                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-1">Keterangan <span class="text-gray-400 font-normal">(opsional)</span></label>
                    <input type="text" name="notes" value="{{ old('notes') }}" placeholder="Contoh: Gotong Royong Pagi"
                        class="w-full px-4 py-2 border border-gray-200 rounded-xl focus:ring-2 focus:ring-sky-500/20 focus:border-sky-500 text-sm">
                </div>

                <button type="submit" class="w-full py-2.5 bg-amber-500 hover:bg-amber-600 text-white font-semibold rounded-xl shadow-md transition-colors text-sm">
                    Simpan Jadwal Khusus
                </button>
            </form>
        </div>
    </div>

    {{-- Daftar Override --}}
    <div class="lg:col-span-2">
        <div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">
            <div class="p-5 border-b border-gray-100 flex items-center justify-between flex-wrap gap-3">
                <h2 class="text-gray-800 font-bold text-base">Daftar Jadwal Khusus</h2>
                <form method="GET" class="flex items-center gap-2">
                    <input type="date" name="date" value="{{ request('date') }}" class="px-3 py-1.5 border border-gray-200 rounded-xl text-sm focus:ring-2 focus:ring-sky-500/20 focus:border-sky-500">
                    <button type="submit" class="px-3 py-1.5 bg-sky-100 text-sky-700 rounded-xl text-sm font-medium hover:bg-sky-200 transition-colors">Filter</button>
                    @if(request('date'))
                        <a href="{{ route('admin.schedule-overrides') }}" class="px-3 py-1.5 bg-gray-100 text-gray-600 rounded-xl text-sm font-medium hover:bg-gray-200 transition-colors">Reset</a>
                    @endif
                </form>
            </div>

            @if ($overrides->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">Relawan</th>
                                <th class="px-5 py-3 text-left text-xs font-semibold text-gray-500 uppercase">Tanggal</th>
                                <th class="px-5 py-3 text-left text-xs font-semibold text-gray-500 uppercase">Jam</th>
                                <th class="px-5 py-3 text-left text-xs font-semibold text-gray-500 uppercase">Keterangan</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 ($overrides as $ov)
                                <tr class="hover:bg-gray-50/50 transition-colors">
                                    <td class="px-5 py-3">
                                        <div class="flex items-center gap-2">
                                            <div class="w-7 h-7 rounded-lg bg-amber-100 flex items-center justify-center text-amber-600 font-bold text-xs">{{ substr($ov->user->name, 0, 1) }}</div>
                                            <span class="text-sm font-medium text-gray-800">{{ $ov->user->name }}</span>
                                        </div>
                                    </td>
                                    <td class="px-5 py-3 text-sm text-gray-600">
                                        {{ $ov->date->locale('id')->isoFormat('ddd, D MMM Y') }}
                                    </td>
                                    <td class="px-5 py-3">
                                        <span class="inline-flex items-center gap-1 px-2.5 py-1 bg-amber-50 text-amber-700 rounded-full text-xs font-semibold">
                                            {{ \Carbon\Carbon::parse($ov->start_time)->format('H:i') }} - {{ \Carbon\Carbon::parse($ov->end_time)->format('H:i') }}
                                        </span>
                                    </td>
                                    <td class="px-5 py-3 text-sm text-gray-500">{{ $ov->notes ?? '-' }}</td>
                                    <td class="px-5 py-3 text-right">
                                        <form action="{{ route('admin.schedule-overrides.destroy', $ov) }}" method="POST" class="inline delete-form">
                                            @csrf @method('DELETE')
                                            <button type="button" onclick="confirmDelete(this)" class="px-2.5 py-1 bg-red-50 text-red-500 rounded-lg text-xs font-medium hover:bg-red-100 transition-colors">Hapus</button>
                                        </form>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            @else
                <div class="p-8 text-center text-gray-400 text-sm">
                    Belum ada jadwal khusus{{ request('date') ? ' untuk tanggal ini' : '' }}.
                </div>
            @endif
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
function confirmDelete(btn) {
    Swal.fire({
        title: 'Hapus Jadwal Khusus?',
        text: 'Jadwal khusus ini akan dihapus dan tidak bisa dikembalikan.',
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#ef4444',
        cancelButtonColor: '#6b7280',
        confirmButtonText: 'Ya, Hapus',
        cancelButtonText: 'Batal',
        reverseButtons: true,
        customClass: {
            popup: 'rounded-2xl',
            confirmButton: 'rounded-xl px-5 py-2.5 text-sm font-semibold',
            cancelButton: 'rounded-xl px-5 py-2.5 text-sm font-semibold',
        }
    }).then((result) => {
        if (result.isConfirmed) {
            btn.closest('form').submit();
        }
    });
}

document.addEventListener('DOMContentLoaded', function() {
    const dropdownBtn = document.getElementById('volunteerDropdownBtn');
    const dropdownMenu = document.getElementById('volunteerDropdownMenu');
    const dropdownIcon = document.getElementById('volunteerDropdownIcon');
    const dropdownText = document.getElementById('volunteerDropdownText');
    const dropdownContainer = document.getElementById('volunteerDropdownContainer');
    const checkboxes = document.querySelectorAll('.volunteer-checkbox');

    // Toggle Dropdown
    dropdownBtn.addEventListener('click', () => {
        const isHidden = dropdownMenu.classList.contains('opacity-0');
        if (isHidden) {
            dropdownMenu.classList.remove('opacity-0', 'invisible', 'scale-95');
            dropdownMenu.classList.add('opacity-100', 'scale-100');
            dropdownIcon.classList.add('rotate-180');
            dropdownBtn.classList.add('ring-2', 'ring-sky-500/20', 'border-sky-500');
        } else {
            closeDropdown();
        }
    });

    // Close when clicking outside
    document.addEventListener('click', (e) => {
        if (!dropdownContainer.contains(e.target)) {
            closeDropdown();
        }
    });

    function closeDropdown() {
        dropdownMenu.classList.add('opacity-0', 'scale-95');
        dropdownMenu.classList.remove('opacity-100', 'scale-100');
        dropdownIcon.classList.remove('rotate-180');
        dropdownBtn.classList.remove('ring-2', 'ring-sky-500/20', 'border-sky-500');
        setTimeout(() => {
            if(dropdownMenu.classList.contains('opacity-0')) {
                dropdownMenu.classList.add('invisible');
            }
        }, 200);
    }

    // Update text when checkboxes change
    function updateSelectedText() {
        const checkedCount = document.querySelectorAll('.volunteer-checkbox:checked').length;
        if (checkedCount === 0) {
            dropdownText.textContent = 'Pilih relawan...';
            dropdownText.classList.remove('text-gray-800', 'font-semibold');
            dropdownText.classList.add('text-gray-500');
        } else {
            dropdownText.textContent = `${checkedCount} relawan dipilih`;
            dropdownText.classList.remove('text-gray-500');
            dropdownText.classList.add('text-gray-800', 'font-semibold');
        }
    }

    checkboxes.forEach(cb => {
        cb.addEventListener('change', updateSelectedText);
    });
});
</script>

<style>
    /* Custom Scrollbar for better visibility on Mac/Mobile */
    .custom-scrollbar::-webkit-scrollbar {
        width: 6px;
    }
    
    .custom-scrollbar::-webkit-scrollbar-track {
        background: #f8fafc; 
        border-radius: 8px;
    }
    
    .custom-scrollbar::-webkit-scrollbar-thumb {
        background-color: #cbd5e1;
        border-radius: 8px;
    }
    
    .custom-scrollbar::-webkit-scrollbar-thumb:hover {
        background-color: #94a3b8;
    }
</style>
@endpush