@extends('layouts.app')
@section('title', 'Rekap Absensi Mata Pelajaran')
@section('content')
<div x-data="{ expanded: null }">
    <div class="mb-6">
        <h1 class="text-2xl font-semibold text-gray-900 dark:text-white">Rekap Absensi Mata Pelajaran</h1>
        <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">Riwayat kehadiran per mata pelajaran semester ini</p>
    </div>

    {{-- Filter --}}
    <x-filter-bar>
        <x-slot:fields>
            <div>
                <label class="block mb-1 text-xs font-medium text-gray-700 dark:text-gray-300">Semester</label>
                <select name="semester_id"
                    class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
                    <option value="">Semester Aktif</option>
                    @foreach($semesters ?? [] as $semester)
                    <option value="{{ $semester->id }}" {{ request('semester_id')==$semester->id ? 'selected' : '' }}>
                        {{ $semester->academicYear?->name }} — {{ $semester->name?->label() ?? $semester->name }}
                    </option>
                    @endforeach
                </select>
            </div>
            <div>
                <label class="block mb-1 text-xs font-medium text-gray-700 dark:text-gray-300">Mata Pelajaran</label>
                <select name="subject_id"
                    class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
                    <option value="">Semua Mapel</option>
                    @foreach($subjects ?? [] as $subject)
                    <option value="{{ $subject->id }}" {{ request('subject_id')==$subject->id ? 'selected' : '' }}>{{
                        $subject->name }}</option>
                    @endforeach
                </select>
            </div>
        </x-slot:fields>
    </x-filter-bar>

    {{-- Accordion per Mata Pelajaran --}}
    @forelse($subjectGroups ?? [] as $index => $group)
    @php $pct = $group['pct'] ?? 0; @endphp
    <div
        class="mb-3 bg-white border border-gray-200 rounded-lg shadow-sm dark:bg-gray-800 dark:border-gray-700 overflow-hidden">
        {{-- Header Accordion --}}
        <button @click="expanded === {{ $index }} ? expanded = null : expanded = {{ $index }}"
            class="w-full flex items-center justify-between px-5 py-4 text-left hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
            <div class="flex items-center gap-4 flex-1 min-w-0">
                <div class="flex-1 min-w-0">
                    <p class="text-sm font-semibold text-gray-900 dark:text-white">{{ $group['subject_name'] }}</p>
                    <p class="text-xs text-gray-500 dark:text-gray-400 mt-0.5">
                        {{ $group['total'] }} sesi ·
                        <span class="text-green-600 dark:text-green-400">{{ $group['hadir'] }} hadir</span> ·
                        <span class="text-yellow-600 dark:text-yellow-400">{{ $group['terlambat'] }} terlambat</span> ·
                        <span class="text-red-600 dark:text-red-400">{{ $group['absen'] }} absen</span> ·
                        <span class="text-blue-600 dark:text-blue-400">{{ $group['izin'] }} izin</span> ·
                        <span class="text-purple-600 dark:text-purple-400">{{ $group['sakit'] }} sakit</span>
                    </p>
                </div>
                {{-- Progress bar --}}
                <div class="hidden sm:flex items-center gap-3 w-48">
                    <div class="flex-1 bg-gray-200 rounded-full h-2 dark:bg-gray-700">
                        <div class="h-2 rounded-full {{ $pct >= 80 ? 'bg-green-500' : ($pct >= 60 ? 'bg-yellow-500' : 'bg-red-500') }}"
                            style="width: {{ $pct }}%"></div>
                    </div>
                    <span
                        class="text-xs font-semibold {{ $pct >= 80 ? 'text-green-600' : ($pct >= 60 ? 'text-yellow-600' : 'text-red-600') }} w-10 text-right">{{
                        $pct }}%</span>
                </div>
                {{-- Badge mobile --}}
                <x-badge :color="$pct >= 80 ? 'green' : ($pct >= 60 ? 'yellow' : 'red')"
                    class="sm:hidden flex-shrink-0">{{ $pct }}%</x-badge>
            </div>
            <svg :class="expanded === {{ $index }} ? 'rotate-180' : ''"
                class="w-5 h-5 text-gray-500 dark:text-gray-400 ml-4 flex-shrink-0 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>

        {{-- Detail Table --}}
        <div x-show="expanded === {{ $index }}" x-cloak x-collapse>
            <div class="border-t border-gray-200 dark:border-gray-600 overflow-x-auto">
                <table class="w-full text-sm text-left text-gray-500 dark:text-gray-400">
                    <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
                        <tr>
                            <th class="px-4 py-3">Tanggal</th>
                            <th class="px-4 py-3">Guru</th>
                            <th class="px-4 py-3">Sesi</th>
                            <th class="px-4 py-3 text-center">Status</th>
                            <th class="px-4 py-3">Catatan</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($group['details'] ?? [] as $detail)
                        @php
                        $statusValue = $detail->status?->value ?? (string) $detail->status;
                        $statusMap =
                        ['present'=>['green','Hadir'],'late'=>['yellow','Terlambat'],'absent'=>['red','Tidak
                        Hadir'],'permission'=>['blue','Izin'],'sick'=>['purple','Sakit']];
                        [$color, $label] = $statusMap[$statusValue] ?? ['gray', ucfirst(str_replace('_', ' ',
                        $statusValue))];
                        @endphp
                        <tr class="border-b dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700">
                            <td class="px-4 py-3 whitespace-nowrap">{{ $detail->date->translatedFormat('D, d M Y') }}
                            </td>
                            <td class="px-4 py-3 text-gray-800 dark:text-gray-200">{{
                                $detail->schedule?->teacher?->full_name ?? '–' }}</td>
                            <td class="px-4 py-3 whitespace-nowrap">Sesi {{ $detail->schedule?->session_order ?? '–' }}
                            </td>
                            <td class="px-4 py-3 text-center">
                                <x-badge :color="$color">{{ $label }}</x-badge>
                            </td>
                            <td class="px-4 py-3 text-xs max-w-[150px] truncate">{{ $detail->notes ?? '–' }}</td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="5" class="px-4 py-6 text-center text-gray-400">Tidak ada detail absensi</td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    @empty
    <div class="flex flex-col items-center justify-center py-20 text-center">
        <svg class="w-16 h-16 text-gray-300 dark:text-gray-600 mb-4" fill="none" stroke="currentColor"
            viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
                d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
        </svg>
        <p class="text-gray-500 dark:text-gray-400 text-lg font-medium">Tidak ada data absensi mapel</p>
        <p class="text-gray-400 dark:text-gray-500 text-sm mt-1">Data akan muncul setelah guru menginput absensi mapel
        </p>
    </div>
    @endforelse
</div>
@endsection