@extends('admin.layout')

@section('title', 'Laporan Absensi')
@section('subtitle', 'Riwayat absensi relawan')

@section('content')
    {{-- Filter --}}
    <div class="bg-white rounded-2xl border border-gray-100 shadow-[0_8px_30px_rgb(0,0,0,0.04)] p-6 mb-6">
        <form method="GET" action="{{ route('admin.reports') }}" class="flex flex-col md:flex-row items-end gap-4" id="filterForm">
            <div class="w-full md:w-auto">
                <label class="block text-sm font-bold text-gray-700 mb-2">Dari Tanggal</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-sky-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
                    </div>
                    <input type="text" name="date_from" value="{{ request('date_from') }}" placeholder="Pilih tanggal"
                        class="custom-date-input 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 text-gray-700 font-medium cursor-pointer">
                </div>
            </div>
            <div class="w-full md:w-auto">
                <label class="block text-sm font-bold text-gray-700 mb-2">Sampai Tanggal</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-sky-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
                    </div>
                    <input type="text" name="date_to" value="{{ request('date_to') }}" placeholder="Pilih tanggal"
                        class="custom-date-input 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 text-gray-700 font-medium cursor-pointer">
                </div>
            </div>
            
            <div class="w-full md:w-64">
                <label class="block text-sm font-bold text-gray-700 mb-2">Relawan</label>
                <div class="relative custom-dropdown" id="volunteerDropdown">
                    <input type="hidden" name="user_id" id="inputUser" value="{{ request('user_id') }}">
                    
                    @php
                        $selectedUser = $volunteers->firstWhere('id', request('user_id'));
                        $selectedText = $selectedUser ? $selectedUser->name : 'Semua Relawan';
                    @endphp
                    
                    <button type="button" class="dropdown-toggle 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-sky-500" 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-700 font-medium truncate">{{ $selectedText }}</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-64 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 {{ !request('user_id') ? 'bg-sky-50 text-sky-700' : '' }}" 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 {{ !request('user_id') ? '' : '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>
                                    Semua Relawan
                                </button>
                            </li>
                            @foreach ($volunteers as $vol)
                            <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 {{ request('user_id') == $vol->id ? 'bg-sky-50 text-sky-700' : '' }}" data-value="{{ $vol->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 {{ request('user_id') == $vol->id ? '' : '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>
                                    {{ $vol->name }}
                                </button>
                            </li>
                            @endforeach
                        </ul>
                    </div>
                </div>
            </div>
            
            <div class="flex items-center gap-3 w-full md:w-auto mt-2 md:mt-0 md:ml-auto">
                <button type="submit" class="flex-1 md:flex-none px-6 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">
                    <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="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"/></svg>
                    Terapkan
                </button>
                <a href="{{ route('admin.reports') }}" class="flex-1 md:flex-none px-6 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 flex items-center justify-center gap-2 shadow-sm">
                    <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="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg>
                    Reset
                </a>
            </div>
        </form>
    </div>

    <div class="flex items-center justify-between mb-4 mt-8 px-1">
        <h2 class="text-lg font-bold text-gray-800">Hasil Laporan</h2>
        <div class="flex items-center gap-3">
            <button type="submit" form="filterForm" formaction="{{ route('admin.reports.export.pdf') }}" formtarget="_blank" class="px-4 py-2.5 bg-rose-50 hover:bg-rose-100 text-rose-600 border border-rose-200 hover:border-rose-300 font-bold text-sm rounded-xl transition-all flex items-center justify-center gap-2 shadow-sm active:scale-[0.98]">
                <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 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>
                Export PDF
            </button>
            <button type="submit" form="filterForm" formaction="{{ route('admin.reports.export.excel') }}" formtarget="_blank" class="px-4 py-2.5 bg-emerald-50 hover:bg-emerald-100 text-emerald-600 border border-emerald-200 hover:border-emerald-300 font-bold text-sm rounded-xl transition-all flex items-center justify-center gap-2 shadow-sm active:scale-[0.98]">
                <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="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 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>
                Export Excel
            </button>
        </div>
    </div>

    {{-- Results Table --}}
    <div class="bg-white rounded-2xl border border-gray-100 shadow-[0_8px_30px_rgb(0,0,0,0.04)] overflow-hidden">
        @if ($attendances->count())
            <div class="overflow-x-auto">
                <table class="w-full">
                    <thead class="bg-gray-50/50">
                        <tr>
                            <th class="px-6 py-4 text-left text-xs font-bold text-gray-500 uppercase tracking-wider">Tanggal</th>
                            <th class="px-6 py-4 text-left text-xs font-bold text-gray-500 uppercase tracking-wider">Nama</th>
                            <th class="px-6 py-4 text-left text-xs font-bold text-gray-500 uppercase tracking-wider">Masuk</th>
                            <th class="px-6 py-4 text-left text-xs font-bold text-gray-500 uppercase tracking-wider">Pulang</th>
                            <th class="px-6 py-4 text-left text-xs font-bold text-gray-500 uppercase tracking-wider">Status Masuk</th>
                            <th class="px-6 py-4 text-left text-xs font-bold text-gray-500 uppercase tracking-wider">Status Pulang</th>
                            <th class="px-6 py-4 text-center text-xs font-bold text-gray-500 uppercase tracking-wider">Foto</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-50">
                        @foreach ($attendances as $att)
                            <tr class="hover:bg-sky-50/30 transition-colors">
                                <td class="px-6 py-4 text-sm text-gray-600 font-medium">{{ $att->date->format('d/m/Y') }}</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 flex items-center justify-center text-sky-600 font-bold text-xs">{{ substr($att->user->name, 0, 1) }}</div>
                                        <span class="text-sm font-bold text-gray-800">{{ $att->user->name }}</span>
                                    </div>
                                </td>
                                <td class="px-6 py-4 text-sm font-bold text-gray-700">{{ $att->check_in_time ? \Carbon\Carbon::parse($att->check_in_time)->format('H:i') : '-' }}</td>
                                <td class="px-6 py-4 text-sm font-bold text-gray-700">{{ $att->check_out_time ? \Carbon\Carbon::parse($att->check_out_time)->format('H:i') : '-' }}</td>
                                <td class="px-6 py-4">
                                    @if ($att->status_in === 'ontime')
                                        <span class="inline-flex items-center gap-1.5 px-3 py-1 rounded-lg text-xs font-bold bg-emerald-50 text-emerald-700 border border-emerald-100">
                                            <span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span> Tepat Waktu
                                        </span>
                                    @elseif ($att->status_in === 'late')
                                        <span class="inline-flex items-center gap-1.5 px-3 py-1 rounded-lg text-xs font-bold bg-rose-50 text-rose-700 border border-rose-100">
                                            <span class="w-1.5 h-1.5 rounded-full bg-rose-500"></span> Terlambat
                                        </span>
                                    @else
                                        <span class="text-gray-400 text-xs">-</span>
                                    @endif
                                </td>
                                <td class="px-6 py-4">
                                    @if ($att->status_out === 'ontime')
                                        <span class="inline-flex items-center gap-1.5 px-3 py-1 rounded-lg text-xs font-bold bg-emerald-50 text-emerald-700 border border-emerald-100">
                                            <span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span> Tepat Waktu
                                        </span>
                                    @elseif ($att->status_out === 'early_leave')
                                        <span class="inline-flex items-center gap-1.5 px-3 py-1 rounded-lg text-xs font-bold bg-amber-50 text-amber-700 border border-amber-100">
                                            <span class="w-1.5 h-1.5 rounded-full bg-amber-500"></span> Pulang Awal
                                        </span>
                                    @else
                                        <span class="text-gray-400 text-xs">-</span>
                                    @endif
                                </td>
                                <td class="px-6 py-4 text-center">
                                    <div class="flex items-center justify-center gap-2">
                                        @if ($att->check_in_photo)
                                            <a href="{{ asset($att->check_in_photo) }}" target="_blank" class="w-9 h-9 rounded-xl bg-sky-50 hover:bg-sky-100 flex items-center justify-center text-sky-500 transition-all border border-sky-100" title="Foto Masuk">
                                                <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="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
                                            </a>
                                        @endif
                                        @if ($att->check_out_photo)
                                            <a href="{{ asset($att->check_out_photo) }}" target="_blank" class="w-9 h-9 rounded-xl bg-amber-50 hover:bg-amber-100 flex items-center justify-center text-amber-500 transition-all border border-amber-100" title="Foto Pulang">
                                                <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="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
                                            </a>
                                        @endif
                                        @if (!$att->check_in_photo && !$att->check_out_photo)
                                            <span class="text-gray-300 text-xs">—</span>
                                        @endif
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>

            {{-- Pagination --}}
            <div class="px-6 py-4 border-t border-gray-100">
                {{ $attendances->withQueryString()->links() }}
            </div>
        @else
            <div class="p-12 text-center flex flex-col items-center">
                <div class="w-16 h-16 bg-gray-50 rounded-full flex items-center justify-center mb-4">
                    <svg class="w-8 h-8 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 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>
                <p class="text-gray-500 font-bold">Tidak ada data absensi</p>
                <p class="text-gray-400 text-sm mt-1">Belum ada relawan yang absen atau coba sesuaikan filter Anda.</p>
            </div>
        @endif
    </div>

    @push('scripts')
    <script>
        // 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');

            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);
                }
            });

            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-700');

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

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

        function openDropdown(dropdown) {
            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', 'ring-sky-500/10', 'border-sky-500', 'bg-white');
            toggleBtn.classList.remove('bg-gray-50', 'border-gray-200');
            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');

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

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

        // Initialize Flatpickr for Date Inputs
        flatpickr(".custom-date-input", {
            dateFormat: "Y-m-d",
            altInput: true,
            altFormat: "d-m-Y",
            locale: "id",
            allowInput: true,
            disableMobile: "true"
        });
    </script>

    <style>
        /* Custom Scrollbar for Dropdown Menu */
        .dropdown-menu::-webkit-scrollbar {
            width: 14px;
        }
        
        .dropdown-menu::-webkit-scrollbar-track {
            background: #f8fafc;
            border-radius: 8px;
            margin: 4px;
        }
        
        .dropdown-menu::-webkit-scrollbar-thumb {
            background-color: #cbd5e1;
            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