@extends('layouts.app')
@section('title', 'Data Kelas')
@section('content')
<div
    x-data="{ showModal: false, formData: {}, showConfirm: false, showConfirmUrl: '', confirmToggle(url) { this.showConfirmUrl = url; this.showConfirm = true; } }">
    <div class="flex items-center justify-between mb-6">
        <div>
            <h1 class="text-2xl font-semibold text-gray-900 dark:text-white">Data Kelas</h1>
            <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">Total: {{ $classrooms->total() ?? 0 }} kelas</p>
        </div>
        <button @click="formData = {}; showModal = true"
            class="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-white bg-primary-700 rounded-lg hover:bg-primary-800">
            <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd"
                    d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z"
                    clip-rule="evenodd" />
            </svg>
            Tambah Kelas
        </button>
    </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">Tingkat</label>
                <select name="grade_level"
                    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="X" {{ request('grade_level')==='X' ? 'selected' : '' }}>Kelas X</option>
                    <option value="XI" {{ request('grade_level')==='XI' ? 'selected' : '' }}>Kelas XI</option>
                    <option value="XII" {{ request('grade_level')==='XII' ? 'selected' : '' }}>Kelas XII</option>
                </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="1">Aktif</option>
                    <option value="0">Non-aktif</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">Nama Kelas</th>
                <th class="px-4 py-3">Tingkat</th>
                <th class="px-4 py-3">Wali Kelas</th>
                <th class="px-4 py-3">Jumlah Siswa</th>
                <th class="px-4 py-3">Status</th>
                <th class="px-4 py-3 text-right">Aksi</th>
            </x-slot:heading>
            <x-slot:body>
                @forelse($classrooms ?? [] as $classroom)
                <tr class="hover:bg-gray-50 dark:hover:bg-gray-700">
                    <td class="px-4 py-3 font-medium text-gray-900 dark:text-white">{{ $classroom->name }}</td>
                    <td class="px-4 py-3">
                        <x-badge color="blue">{{ $classroom->grade_level->label() }}</x-badge>
                    </td>
                    <td class="px-4 py-3 text-gray-500 dark:text-gray-400">{{ $classroom->homeroomTeacher->full_name ??
                        '–' }}</td>
                    <td class="px-4 py-3 text-gray-500 dark:text-gray-400">{{ $classroom->students_count ?? 0 }} siswa
                    </td>
                    <td class="px-4 py-3">
                        <x-badge :color="$classroom->is_active ? 'green' : 'red'">{{ $classroom->is_active ? 'Aktif' :
                            'Non-aktif' }}</x-badge>
                    </td>
                    <td class="px-4 py-3 text-right">
                        <div class="flex items-center justify-end gap-2">
                            <button
                                @click="formData = {{ json_encode(['id' => $classroom->id, 'name' => $classroom->name, 'grade_level' => $classroom->grade_level->value, 'homeroom_teacher_id' => $classroom->homeroom_teacher_id]) }}; showModal = true"
                                class="text-xs font-medium text-primary-600 hover:underline dark:text-primary-400">Edit</button>
                            <button type="button"
                                @click="confirmToggle('{{ route('admin.classrooms.toggle', $classroom->id) }}')"
                                class="text-xs font-medium text-{{ $classroom->is_active ? 'red' : 'green' }}-600 hover:underline">{{
                                $classroom->is_active ? 'Non-aktifkan' : 'Aktifkan' }}</button>
                        </div>
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="6" class="px-4 py-8 text-center text-gray-400">Tidak ada data kelas</td>
                </tr>
                @endforelse
            </x-slot:body>
            @if(isset($classrooms) && method_exists($classrooms, 'hasPages') && $classrooms->hasPages())
            <x-slot:pagination>{{ $classrooms->withQueryString()->links() }}</x-slot:pagination>
            @endif
        </x-data-table>
    </div>

    <x-modal :show="'showModal'" title="Data Kelas" size="md">
        <form
            :action="formData.id ? '{{ url('admin/classrooms') }}/' + formData.id : '{{ route('admin.classrooms.store') }}'"
            method="POST" class="space-y-4" id="classroom-modal-form">
            @csrf
            <template x-if="formData.id">
                <input type="hidden" name="_method" value="PUT">
            </template>
            <div>
                <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Nama Kelas</label>
                <input type="text" name="name" x-model="formData.name" required placeholder="contoh: X-IPA 1"
                    class="bg-gray-50 border border-gray-300 text-gray-900 sm: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">Tingkat</label>
                <select name="grade_level" x-model="formData.grade_level" required
                    class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
                    <option value="X">Kelas X</option>
                    <option value="XI">Kelas XI</option>
                    <option value="XII">Kelas XII</option>
                </select>
            </div>
            <div>
                <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Wali Kelas</label>
                <select name="homeroom_teacher_id" x-model="formData.homeroom_teacher_id"
                    class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
                    <option value="">Pilih Guru</option>
                    @foreach($teachers ?? [] as $teacher)
                    <option value="{{ $teacher->id }}">{{ $teacher->full_name }}</option>
                    @endforeach
                </select>
            </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 dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600">Batal</button>
                <button type="submit" form="classroom-modal-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>

    <x-confirm-dialog show="showConfirm" title="Konfirmasi Ubah Status Kelas"
        message="Apakah Anda yakin ingin mengubah status kelas ini?" confirmText="Ya, Ubah" cancelText="Batal"
        method="PATCH" danger="false" />
</div>
@endsection