@extends('layouts.app')
@section('title', 'Absensi Mengajar Guru')
@section('content')
<div x-data="{
    showModal: false,
    formData: {
        id: null,
        status: 'teaching',
        started_at: '',
        ended_at: '',
        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 Mengajar Guru</h1>
            <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">Rekap pelaksanaan mengajar per sesi jadwal</p>
        </div>
        {{-- <a href="{{ route('admin.teaching-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">Guru</label>
                <select name="teacher_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 Guru</option>
                    @foreach($teachers ?? [] as $teacher)
                    <option value="{{ $teacher->id }}" {{ request('teacher_id')==$teacher->id ? 'selected' : '' }}>{{
                        $teacher->full_name }}</option>
                    @endforeach
                </select>
            </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">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>
                    <option value="teaching" {{ request('status')==='teaching' ? 'selected' : '' }}>Mengajar</option>
                    <option value="not_teaching" {{ request('status')==='not_teaching' ? 'selected' : '' }}>Tidak
                        Mengajar</option>
                </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">Guru</th>
                <th class="px-4 py-3">Mapel</th>
                <th class="px-4 py-3">Kelas</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($teachingAttendances ?? [] as $ta)
                <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">{{ $ta->date->format('d M Y') }}</td>
                    <td class="px-4 py-3 font-medium text-gray-900 dark:text-white text-sm">{{ $ta->teacher->full_name
                        ?? '–' }}</td>
                    <td class="px-4 py-3 text-gray-500 dark:text-gray-400 text-sm">{{ $ta->schedule->subject->name ??
                        '–' }}</td>
                    <td class="px-4 py-3 text-gray-500 dark:text-gray-400 text-sm">{{ $ta->schedule->classroom->name ??
                        '–' }}</td>
                    <td class="px-4 py-3 font-mono text-xs text-gray-500">{{ isset($ta->schedule->start_time) ?
                        substr($ta->schedule->start_time, 0, 5) : '–' }}–{{ isset($ta->schedule->end_time) ?
                        substr($ta->schedule->end_time, 0, 5) : '–' }}</td>
                    <td class="px-4 py-3">
                        @php
                        $statusValue = $ta->status->value ?? (string) $ta->status;
                        $taColors = ['teaching' => 'green', 'not_teaching' => 'red'];
                        @endphp
                        <x-badge :color="$taColors[$statusValue] ?? 'gray'">{{ ucfirst(str_replace('_', ' ',
                            $statusValue)) }}</x-badge>
                    </td>
                    <td class="px-4 py-3 text-gray-500 dark:text-gray-400 text-xs max-w-37.5 truncate">{{ $ta->notes
                        ?? '–' }}</td>
                    <td class="px-4 py-3 text-right">
                        <button type="button" @click="openEdit({{ json_encode([
                                'id' => $ta->id,
                                'status' => $statusValue,
                                'started_at' => $ta->started_at?->format('H:i'),
                                'ended_at' => $ta->ended_at?->format('H:i'),
                                'notes' => $ta->notes,
                            ]) }})"
                            class="font-medium text-primary-600 hover:underline dark:text-primary-400 text-sm">Edit</button>
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="9" class="px-4 py-8 text-center text-gray-400">Tidak ada data absensi mengajar</td>
                </tr>
                @endforelse
            </x-slot:body>
            @if(isset($teachingAttendances) && method_exists($teachingAttendances, 'hasPages') &&
            $teachingAttendances->hasPages())
            <x-slot:pagination>{{ $teachingAttendances->withQueryString()->links() }}</x-slot:pagination>
            @endif
        </x-data-table>
    </div>

    <x-modal show="showModal" title="Koreksi Absensi Mengajar" size="md">
        <form :action="'{{ url('admin/teaching-attendances') }}/' + formData.id" method="POST" class="space-y-4"
            id="edit-teaching-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="teaching">Mengajar</option>
                    <option value="not_teaching">Tidak Mengajar</option>
                </select>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                    <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Mulai Sesi</label>
                    <input type="time" name="started_at" x-model="formData.started_at"
                        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-2 text-sm font-medium text-gray-900 dark:text-white">Selesai Sesi</label>
                    <input type="time" name="ended_at" x-model="formData.ended_at"
                        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>

            <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-teaching-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