@extends('layouts.app')
@section('title', 'Input Absensi Mapel')
@section('content')
<div x-data="{
        studentIds: @js(($students ?? collect())->pluck('id')),
        statuses: {},
        total: 0,
        hadir: 0,
        init() {
            this.studentIds.forEach((id) => {
                let checked = this.$el.querySelector(`input[name='attendances[${id}][status]'][checked]`);
                this.statuses[id] = checked ? checked.value : 'present';
            });
            this.calc();
        },
        setAll(status) {
            this.studentIds.forEach((id) => {
                this.statuses[id] = status;
            });
            this.calc();
        },
        calc() {
            let arr = Object.values(this.statuses);
            this.total = arr.length;
            this.hadir = arr.filter(s => s === 'present').length;
        }
    }" x-init="init()">
    {{-- Info Sesi --}}
    <div class="p-4 bg-white border border-gray-200 rounded-lg shadow-sm dark:bg-gray-800 dark:border-gray-700 mb-6">
        <h1 class="text-xl font-semibold text-gray-900 dark:text-white mb-3">Input Absensi Mapel</h1>
        <div class="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm">
            <div><span class="text-gray-500 dark:text-gray-400">Mapel:</span> <span
                    class="font-medium text-gray-900 dark:text-white">{{ $schedule->subject->name ?? '–' }}</span>
            </div>
            <div><span class="text-gray-500 dark:text-gray-400">Kelas:</span> <span
                    class="font-medium text-gray-900 dark:text-white">{{ $schedule->classroom->name ?? '–' }}</span>
            </div>
            <div><span class="text-gray-500 dark:text-gray-400">Sesi:</span> <span
                    class="font-medium text-gray-900 dark:text-white">{{ isset($schedule->start_time) ?
                    substr($schedule->start_time, 0, 5) : '–' }}
                    –
                    {{ isset($schedule->end_time) ? substr($schedule->end_time, 0, 5) : '–' }}</span>
            </div>
            <div><span class="text-gray-500 dark:text-gray-400">Mulai:</span> <span
                    class="font-medium text-gray-900 dark:text-white">{{ $teachingRecord->started_at?->format('H:i') ??
                    '–' }}</span></div>
            <div><span class="text-gray-500 dark:text-gray-400">Selesai:</span> <span
                    class="font-medium text-gray-900 dark:text-white">{{ $teachingRecord->ended_at?->format('H:i') ??
                    '–' }}</span></div>
        </div>
    </div>

    {{-- Counter & Bulk Set --}}
    <div class="flex items-center justify-between mb-4 flex-wrap gap-3">
        <div class="flex items-center gap-4">
            <div class="text-sm">
                <span class="font-semibold text-gray-900 dark:text-white" x-text="hadir"></span>
                <span class="text-gray-500"> / </span>
                <span class="font-semibold text-gray-900 dark:text-white" x-text="total"></span>
                <span class="text-gray-500 dark:text-gray-400"> hadir</span>
            </div>
        </div>
        <div class="flex gap-2 flex-wrap">
            <button type="button" @click="setAll('present')"
                class="px-3 py-1.5 text-xs font-medium text-white bg-green-600 rounded-lg hover:bg-green-700">Semua
                Hadir</button>
            <button type="button" @click="setAll('absent')"
                class="px-3 py-1.5 text-xs font-medium text-white bg-red-600 rounded-lg hover:bg-red-700">Semua
                Absen</button>
        </div>
    </div>

    {{-- Tabel Siswa --}}
    <form method="POST" action="{{ route('teacher.teaching.attendance.store', $schedule->id) }}">
        @csrf
        <div class="bg-white border border-gray-200 rounded-lg shadow-sm dark:bg-gray-800 dark:border-gray-700 mb-4">
            <x-data-table>
                <x-slot:heading>
                    <th class="px-4 py-3 w-12">Foto</th>
                    <th class="px-4 py-3">NIS</th>
                    <th class="px-4 py-3">Nama</th>
                    <th class="px-4 py-3 text-center">Hadir</th>
                    <th class="px-4 py-3 text-center">Terlambat</th>
                    <th class="px-4 py-3 text-center">Sakit</th>
                    <th class="px-4 py-3 text-center">Izin</th>
                    <th class="px-4 py-3 text-center">Absen</th>
                    <th class="px-4 py-3">Catatan</th>
                </x-slot:heading>
                <x-slot:body>
                    @forelse($students ?? [] as $student)
                    @php
                    $existing = $existingAttendances[$student->id] ?? null;
                    $currentStatus = $existing?->status?->value ?? 'present';
                    $currentNotes = $existing?->notes ?? '';
                    @endphp
                    <tr class="hover:bg-gray-50 dark:hover:bg-gray-700">
                        <td class="px-4 py-3">
                            <div
                                class="w-9 h-9 rounded-full bg-yellow-500 flex items-center justify-center text-white text-sm font-semibold">
                                {{ strtoupper(substr($student->full_name, 0, 1)) }}
                            </div>
                        </td>
                        <td class="px-4 py-3 font-mono text-xs text-gray-500">{{ $student->student_number }}</td>
                        <td class="px-4 py-3 font-medium text-gray-900 dark:text-white text-sm">{{ $student->full_name
                            }}</td>
                        @foreach (['present', 'late', 'sick', 'permission', 'absent'] as $status)
                        <td class="px-4 py-3 text-center">
                            <input type="radio" name="attendances[{{ $student->id }}][status]" value="{{ $status }}" {{
                                $currentStatus===$status ? 'checked' : '' }} x-model="statuses[{{ $student->id }}]"
                                @change="calc()"
                                class="w-4 h-4 text-primary-600 bg-gray-100 border-gray-300 focus:ring-primary-500 dark:bg-gray-700 dark:border-gray-600">
                        </td>
                        @endforeach
                        <td class="px-4 py-3">
                            <input type="text" name="attendances[{{ $student->id }}][notes]" value="{{ $currentNotes }}"
                                placeholder="Catatan..."
                                class="bg-gray-50 border border-gray-300 text-gray-900 text-xs rounded-lg block w-full p-1.5 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="9" class="px-4 py-8 text-center text-gray-400">Tidak ada data siswa</td>
                    </tr>
                    @endforelse
                </x-slot:body>
            </x-data-table>
        </div>

        <div class="flex justify-end gap-3">
            <a href="{{ route('teacher.schedules.today') }}"
                class="px-5 py-2.5 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-100 dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600">Batal</a>
            <button type="submit"
                class="px-5 py-2.5 text-sm font-medium text-white bg-primary-700 rounded-lg hover:bg-primary-800 focus:ring-4 focus:ring-primary-300">Simpan
                Absensi</button>
        </div>
    </form>
</div>
@endsection