@extends('admin.layout')

@section('title', 'Dashboard')
@section('subtitle', 'Ringkasan absensi relawan hari ini')

@section('content')
    {{-- Link Absen SPPG --}}
    @php $sppg = auth()->user()->sppg; @endphp
    @if($sppg && $sppg->slug)
    <div class="bg-gradient-to-r from-sky-500 to-sky-600 rounded-2xl p-5 shadow-lg shadow-sky-500/20 mb-6">
        <div class="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3">
            <div class="text-white">
                <div class="flex items-center gap-2 mb-1">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"/></svg>
                    <h3 class="font-bold text-sm">Link Absen Relawan</h3>
                </div>
                <p class="text-sky-100 text-xs">Bagikan link ini ke relawan untuk login & absen.</p>
            </div>
            <div class="flex items-center gap-2 w-full sm:w-auto">
                <div class="flex-1 sm:flex-initial bg-white/20 backdrop-blur rounded-xl px-4 py-2.5 text-white text-sm font-mono truncate min-w-0" id="absenLink">
                    {{ url('/' . $sppg->slug . '/login') }}
                </div>
                <button onclick="copyLink()" id="btnCopy" class="shrink-0 px-4 py-2.5 bg-white text-sky-600 font-semibold text-sm rounded-xl hover:bg-sky-50 active:scale-95 transition-all flex items-center gap-1.5">
                    <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="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3"/></svg>
                    Salin
                </button>
            </div>
        </div>
    </div>
    <script>
    function copyLink() {
        const link = document.getElementById('absenLink').textContent.trim();
        navigator.clipboard.writeText(link).then(() => {
            const btn = document.getElementById('btnCopy');
            btn.innerHTML = '<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="M5 13l4 4L19 7"/></svg> Tersalin!';
            btn.classList.add('bg-emerald-50', 'text-emerald-600');
            setTimeout(() => {
                btn.innerHTML = '<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="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3"/></svg> Salin';
                btn.classList.remove('bg-emerald-50', 'text-emerald-600');
            }, 2000);
        });
    }
    </script>
    @endif

    {{-- Stats Cards --}}
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
        <div class="bg-white rounded-2xl p-5 border border-gray-100 shadow-sm">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-xs font-semibold text-gray-400 uppercase tracking-wider">Total Relawan</p>
                    <p class="text-3xl font-extrabold text-gray-800 mt-1">{{ $totalVolunteers }}</p>
                </div>
                <div class="w-12 h-12 rounded-xl bg-sky-50 flex items-center justify-center">
                    <svg class="w-6 h-6 text-sky-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"/></svg>
                </div>
            </div>
        </div>
        <div class="bg-white rounded-2xl p-5 border border-gray-100 shadow-sm">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-xs font-semibold text-gray-400 uppercase tracking-wider">Sudah Masuk</p>
                    <p class="text-3xl font-extrabold text-emerald-600 mt-1">{{ $checkedInToday }}</p>
                </div>
                <div class="w-12 h-12 rounded-xl bg-emerald-50 flex items-center justify-center">
                    <svg class="w-6 h-6 text-emerald-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 16l-4-4m0 0l4-4m-4 4h14"/></svg>
                </div>
            </div>
        </div>
        <div class="bg-white rounded-2xl p-5 border border-gray-100 shadow-sm">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-xs font-semibold text-gray-400 uppercase tracking-wider">Sudah Pulang</p>
                    <p class="text-3xl font-extrabold text-amber-600 mt-1">{{ $checkedOutToday }}</p>
                </div>
                <div class="w-12 h-12 rounded-xl bg-amber-50 flex items-center justify-center">
                    <svg class="w-6 h-6 text-amber-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7"/></svg>
                </div>
            </div>
        </div>
        <div class="bg-white rounded-2xl p-5 border border-gray-100 shadow-sm">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-xs font-semibold text-gray-400 uppercase tracking-wider">Terlambat</p>
                    <p class="text-3xl font-extrabold text-red-600 mt-1">{{ $lateToday }}</p>
                </div>
                <div class="w-12 h-12 rounded-xl bg-red-50 flex items-center justify-center">
                    <svg class="w-6 h-6 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                </div>
            </div>
        </div>
    </div>

    {{-- Status Absensi Per Bagian Kerja --}}
    <div class="mb-6 flex items-center justify-between">
        <h2 class="text-gray-800 font-bold text-lg">Status Absensi Hari Ini</h2>
        @if ($todaySchedule)
            <div class="inline-flex items-center gap-2 bg-sky-50 px-3 py-1.5 rounded-lg border border-sky-100">
                <svg class="w-4 h-4 text-sky-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                <p class="font-bold text-sky-800 text-xs uppercase tracking-wide">{{ $todaySchedule->shift->name }}</p>
            </div>
        @else
            <span class="inline-block px-3 py-1.5 bg-gray-100 text-gray-500 rounded-lg text-xs font-semibold border border-gray-200">Belum ada jadwal master shift</span>
        @endif
    </div>

    @if (isset($groupedVolunteers) && count($groupedVolunteers) > 0)
        <div class="space-y-4">
            @foreach ($groupedVolunteers as $groupName => $groupVolunteers)
                @php 
                    $isBelumDitugaskan = $groupName === 'Z_Belum ditugaskan';
                    $displayName = $isBelumDitugaskan ? 'Belum ditugaskan' : $groupName;
                    $groupId = 'dash-group-' . $loop->index;

                    // Hitung status absensi
                    $tepatWaktu = [];
                    $terlambat = [];
                    $belumAbsen = [];

                    foreach ($groupVolunteers as $vol) {
                        $att = $vol->attendances->first(); // karena diload with filter date = today, pasti max 1
                        if ($att) {
                            if ($att->status_in === 'late') {
                                $terlambat[] = ['user' => $vol, 'att' => $att];
                            } else {
                                $tepatWaktu[] = ['user' => $vol, 'att' => $att];
                            }
                        } else {
                            $belumAbsen[] = $vol;
                        }
                    }

                    // Cari jadwal jam kerja spesifik bagian ini hari ini
                    $sectionShift = null;
                    if (!$isBelumDitugaskan && $todaySchedule && $todaySchedule->shift->sectionSchedules->count()) {
                        $sectionShift = $todaySchedule->shift->sectionSchedules->first(function ($ss) use ($groupName) {
                            return $ss->workSection->name === $groupName;
                        });
                    }
                @endphp
                <div class="bg-white rounded-2xl border border-gray-100 shadow-sm overflow-hidden">
                    {{-- Header / Toggle Button --}}
                    <button type="button" 
                        onclick="document.getElementById('{{ $groupId }}').classList.toggle('hidden'); document.getElementById('icon-{{ $groupId }}').classList.toggle('rotate-180')"
                        class="w-full flex flex-col sm:flex-row sm:items-center justify-between p-4 hover:bg-gray-50 transition-colors focus:outline-none gap-3">
                        <div class="flex items-center gap-3">
                            @if($isBelumDitugaskan)
                                <div class="w-10 h-10 rounded-xl bg-gray-100 text-gray-500 flex items-center justify-center shrink-0">
                                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                                </div>
                            @else
                                <div class="w-10 h-10 rounded-xl bg-purple-100 text-purple-600 flex items-center justify-center shrink-0">
                                    <svg class="w-5 h-5" 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>
                            @endif
                            <div class="text-left">
                                <h3 class="text-base font-bold text-gray-800">{{ $displayName }}</h3>
                                @if($sectionShift)
                                    <p class="text-xs text-gray-500 mt-0.5 font-medium flex items-center gap-1.5">
                                        <span class="text-sky-600 font-bold">{{ $sectionShift->shift_label }}</span>
                                        <span class="text-gray-300">•</span>
                                        {{ \Carbon\Carbon::parse($sectionShift->start_time)->format('H:i') }} - {{ \Carbon\Carbon::parse($sectionShift->end_time)->format('H:i') }}
                                    </p>
                                @elseif(!$isBelumDitugaskan)
                                    <p class="text-xs text-gray-400 mt-0.5 italic">Tidak ada shift terjadwal</p>
                                @endif
                            </div>
                        </div>

                        <div class="flex items-center gap-2">
                            {{-- Stats Badges --}}
                            <div class="flex items-center gap-1.5 mr-2">
                                <span class="px-2 py-1 bg-emerald-50 text-emerald-700 rounded-lg text-xs font-bold border border-emerald-100" title="Tepat Waktu">{{ count($tepatWaktu) }}</span>
                                <span class="px-2 py-1 bg-rose-50 text-rose-700 rounded-lg text-xs font-bold border border-rose-100" title="Terlambat">{{ count($terlambat) }}</span>
                                <span class="px-2 py-1 bg-gray-100 text-gray-600 rounded-lg text-xs font-bold border border-gray-200" title="Belum Absen">{{ count($belumAbsen) }}</span>
                            </div>
                            <div class="w-8 h-8 rounded-full bg-gray-50 flex items-center justify-center border border-gray-100 shrink-0">
                                <svg id="icon-{{ $groupId }}" class="w-4 h-4 text-gray-500 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>
                            </div>
                        </div>
                    </button>

                    {{-- Accordion Content --}}
                    <div id="{{ $groupId }}" class="hidden border-t border-gray-100 bg-gray-50/30">
                        <div class="grid grid-cols-1 lg:grid-cols-3 divide-y lg:divide-y-0 lg:divide-x divide-gray-100">
                            
                            {{-- Tepat Waktu --}}
                            <div class="p-4">
                                <h4 class="text-xs font-bold text-emerald-600 uppercase tracking-wider mb-3 flex items-center gap-1.5">
                                    <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 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                                    Tepat Waktu ({{ count($tepatWaktu) }})
                                </h4>
                                @if(count($tepatWaktu) > 0)
                                    <ul class="space-y-2">
                                        @foreach($tepatWaktu as $item)
                                            <li class="flex items-center justify-between bg-white px-3 py-2 rounded-lg border border-gray-100 shadow-sm">
                                                <span class="text-sm font-semibold text-gray-700 truncate mr-2">{{ $item['user']->name }}</span>
                                                <span class="text-xs font-mono font-medium text-gray-500 shrink-0">{{ \Carbon\Carbon::parse($item['att']->check_in_time)->format('H:i') }}</span>
                                            </li>
                                        @endforeach
                                    </ul>
                                @else
                                    <div class="text-center py-4 text-xs text-gray-400 border border-dashed border-gray-200 rounded-lg">Tidak ada</div>
                                @endif
                            </div>

                            {{-- Terlambat --}}
                            <div class="p-4">
                                <h4 class="text-xs font-bold text-rose-600 uppercase tracking-wider mb-3 flex items-center gap-1.5">
                                    <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 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                                    Terlambat ({{ count($terlambat) }})
                                </h4>
                                @if(count($terlambat) > 0)
                                    <ul class="space-y-2">
                                        @foreach($terlambat as $item)
                                            <li class="flex items-center justify-between bg-white px-3 py-2 rounded-lg border border-rose-100 shadow-sm">
                                                <span class="text-sm font-semibold text-gray-700 truncate mr-2">{{ $item['user']->name }}</span>
                                                <span class="text-xs font-mono font-bold text-rose-600 shrink-0">{{ \Carbon\Carbon::parse($item['att']->check_in_time)->format('H:i') }}</span>
                                            </li>
                                        @endforeach
                                    </ul>
                                @else
                                    <div class="text-center py-4 text-xs text-gray-400 border border-dashed border-gray-200 rounded-lg">Tidak ada</div>
                                @endif
                            </div>

                            {{-- Belum Absen --}}
                            <div class="p-4">
                                <h4 class="text-xs font-bold text-gray-500 uppercase tracking-wider mb-3 flex items-center gap-1.5">
                                    <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="M20 12H4"/></svg>
                                    Belum Absen ({{ count($belumAbsen) }})
                                </h4>
                                @if(count($belumAbsen) > 0)
                                    <ul class="space-y-2">
                                        @foreach($belumAbsen as $vol)
                                            <li class="flex items-center bg-white px-3 py-2 rounded-lg border border-gray-100 shadow-sm">
                                                <span class="text-sm font-medium text-gray-500 truncate">{{ $vol->name }}</span>
                                            </li>
                                        @endforeach
                                    </ul>
                                @else
                                    <div class="text-center py-4 text-xs text-gray-400 border border-dashed border-gray-200 rounded-lg">Semua sudah absen</div>
                                @endif
                            </div>

                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    @else
        <div class="bg-white rounded-2xl border border-gray-100 shadow-sm overflow-hidden p-8 text-center text-gray-400 text-sm">
            Belum ada data relawan yang bisa ditampilkan.
        </div>
    @endif
@endsection