@extends('layouts.app')
@section('title', 'Absensi Mapel Siswa')
@section('content')
<div x-data="{
    viewMode: 'list',
    showModal: false,
    formData: {
        id: null,
        status: 'present',
        notes: '',
    },
    openEdit(data) {
        this.formData = { ...this.formData, ...data };
        this.showModal = true;
    }
}">
    <div class="flex items-center justify-between mb-6">
        <div>
            <h1 class="text-2xl font-semibold text-gray-900 dark:text-white">Absensi Mapel Siswa</h1>
            <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">Rekap kehadiran siswa per sesi mata pelajaran</p>
        </div>
        {{-- <a href="{{ route('admin.student-subject-attendances.export', request()->all()) }}"
            class="inline-flex items-center gap-2 px-4 py-2 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">
            <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd"
                    d="M3 17a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm3.293-7.707a1 1 0 011.414 0L9 10.586V3a1 1 0 112 0v7.586l1.293-1.293a1 1 0 111.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z"
                    clip-rule="evenodd" />
            </svg>
            Ekspor Excel
        </a> --}}
    </div>

    @if(session('success'))<x-alert type="success">{{ session('success') }}</x-alert>@endif

    <x-filter-bar>
        <x-slot:fields>
            <div>
                <label class="block mb-1 text-xs font-medium text-gray-700 dark:text-gray-300">Tanggal</label>
                <input type="date" name="date" value="{{ request('date', today()->format('Y-m-d')) }}"
                    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">
            </div>
            <div>
                <label class="block mb-1 text-xs font-medium text-gray-700 dark:text-gray-300">Kelas</label>
                <select name="classroom_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 Kelas</option>
                    @foreach($classrooms ?? [] as $classroom)
                    <option value="{{ $classroom->id }}" {{ request('classroom_id')==$classroom->id ? 'selected' : ''
                        }}>{{ $classroom->name }}</option>
                    @endforeach
                </select>
            </div>
            <div>
                <label class="block mb-1 text-xs font-medium text-gray-700 dark:text-gray-300">Mapel</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>
            <div>
                <label class="block mb-1 text-xs font-medium text-gray-700 dark:text-gray-300">Status</label>
                <select name="status"
                    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</option>
                    @foreach(['present', 'late', 'sick', 'permission', 'absent'] as $s)
                    <option value="{{ $s }}" {{ request('status')===$s ? 'selected' : '' }}>{{ ucfirst($s) }}</option>
                    @endforeach
                </select>
            </div>
        </x-slot:fields>
    </x-filter-bar>

    <div class="bg-white border border-gray-200 rounded-lg shadow-sm dark:bg-gray-800 dark:border-gray-700">
        <x-data-table>
            <x-slot:heading>
                <th class="px-4 py-3">Tanggal</th>
                <th class="px-4 py-3">Siswa</th>
                <th class="px-4 py-3">Kelas</th>
                <th class="px-4 py-3">Mapel</th>
                <th class="px-4 py-3">Sesi</th>
                <th class="px-4 py-3">Status</th>
                <th class="px-4 py-3">Catatan</th>
                <th class="px-4 py-3 text-right">Aksi</th>
            </x-slot:heading>
            <x-slot:body>
                @forelse($attendances ?? [] as $att)
                @php
                $statusValue = $att->status->value ?? (string) $att->status;
                $statusColors = ['present' => 'green', 'late' => 'yellow', 'sick' => 'purple', 'permission' => 'blue',
                'absent' => 'red'];
                @endphp
                <tr class="hover:bg-gray-50 dark:hover:bg-gray-700">
                    <td class="px-4 py-3 text-gray-500 dark:text-gray-400 text-sm">{{ $att->date->format('d M Y') }}
                    </td>
                    <td class="px-4 py-3 font-medium text-gray-900 dark:text-white text-sm">{{ $att->student->full_name
                        ?? '–' }}</td>
                    <td class="px-4 py-3 text-gray-500 dark:text-gray-400 text-sm">{{ $att->student->classroom->name ??
                        '–' }}</td>
                    <td class="px-4 py-3 text-gray-500 dark:text-gray-400 text-sm">{{ $att->schedule->subject->name ??
                        '–' }}</td>
                    <td class="px-4 py-3 font-mono text-xs text-gray-500">{{ isset($att->schedule->start_time) ?
                        substr($att->schedule->start_time, 0, 5) : '–' }}–{{ isset($att->schedule->end_time) ?
                        substr($att->schedule->end_time, 0, 5) : '–' }}</td>
                    <td class="px-4 py-3">
                        <x-badge :color="$statusColors[$statusValue] ?? 'gray'">{{ ucfirst(str_replace('_', ' ',
                            $statusValue)) }}</x-badge>
                    </td>
                    <td class="px-4 py-3 text-xs text-gray-500 max-w-30 truncate">{{ $att->notes ?? '–' }}</td>
                    <td class="px-4 py-3 text-right">
                        <button type="button" @click="openEdit({{ json_encode([
                                'id' => $att->id,
                                'status' => $statusValue,
                                'notes' => $att->notes,
                            ]) }})"
                            class="font-medium text-primary-600 hover:underline dark:text-primary-400 text-sm">Edit</button>
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="8" class="px-4 py-8 text-center text-gray-400">Tidak ada data absensi mapel</td>
                </tr>
                @endforelse
            </x-slot:body>
            @if(isset($attendances) && method_exists($attendances, 'hasPages') && $attendances->hasPages())
            <x-slot:pagination>{{ $attendances->withQueryString()->links() }}</x-slot:pagination>
            @endif
        </x-data-table>
    </div>

    <x-modal show="showModal" title="Koreksi Absensi Mapel Siswa" size="md">
        <form :action="'{{ url('admin/student-subject-attendances') }}/' + formData.id" method="POST" class="space-y-4"
            id="edit-student-subject-attendance-form">
            @csrf
            @method('PUT')

            <div>
                <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Status</label>
                <select name="status" x-model="formData.status"
                    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="present">Present</option>
                    <option value="late">Late</option>
                    <option value="sick">Sick</option>
                    <option value="permission">Permission</option>
                    <option value="absent">Absent</option>
                </select>
            </div>

            <div>
                <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Catatan</label>
                <textarea name="notes" rows="4" x-model="formData.notes"
                    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"></textarea>
            </div>

            <x-slot:footer>
                <button type="button" @click="showModal = false"
                    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</button>
                <button type="submit" form="edit-student-subject-attendance-form"
                    class="px-5 py-2.5 text-sm font-medium text-white bg-primary-700 rounded-lg hover:bg-primary-800">Simpan</button>
            </x-slot:footer>
        </form>
    </x-modal>
</div>
@endsection