@extends('layouts.app')
@section('title', 'Data Siswa')
@section('content')
<div x-data="{
        showModal: false,
        formData: {},
        selectedLevel: '',
        openCreate() {
            this.formData = {};
            this.selectedLevel = '';
            this.showModal = true;
        },
        openEdit(data) {
            this.formData = data;
            this.selectedLevel = data.level;
            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">Data Siswa</h1>
            <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">Total: {{ $students->total() ?? 0 }} siswa</p>
        </div>
        <button @click="openCreate()"
            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 Siswa
        </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">Cari Nama/NIS</label>
                <input type="text" name="search" value="{{ request('search') }}" placeholder="Cari..."
                    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->grade_level?->value }} {{ $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="1" {{ request('status')==='1' ? 'selected' : '' }}>Aktif</option>
                    <option value="0" {{ request('status')==='0' ? 'selected' : '' }}>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 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">Kelas</th>
                <th class="px-4 py-3">Gender</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($students ?? [] as $student)
                <tr class="hover:bg-gray-50 dark:hover:bg-gray-700">
                    <td class="px-4 py-3">
                        @if ($student->photo_url)
                        <img src="{{ $student->photo_url }}" class="w-10 h-10 rounded-full object-cover"
                            alt="{{ $student->full_name }}">
                        @else
                        <div
                            class="w-10 h-10 rounded-full bg-yellow-500 flex items-center justify-center text-white text-sm font-semibold">
                            {{ strtoupper(substr($student->full_name, 0, 1)) }}
                        </div>
                        @endif
                    </td>
                    <td class="px-4 py-3 font-mono text-sm text-gray-600 dark:text-gray-400">
                        {{ $student->student_number }}</td>
                    <td class="px-4 py-3 font-medium text-gray-900 dark:text-white">{{ $student->full_name }}</td>
                    <td class="px-4 py-3 text-gray-500 dark:text-gray-400">{{ $student->classroom->name ?? '–' }}
                    </td>
                    <td class="px-4 py-3 text-gray-500 dark:text-gray-400">{{ $student->gender->label() }}</td>
                    <td class="px-4 py-3">
                        <x-badge :color="$student->user->is_active ? 'green' : 'red'">{{ $student->user->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="openEdit({{ json_encode(['id' => $student->id, 'full_name' => $student->full_name, 'student_number' => $student->student_number, 'gender' => $student->gender, 'classroom_id' => $student->classroom_id]) }})"
                                class="text-xs font-medium text-primary-600 hover:underline dark:text-primary-400">Edit</button>
                        </div>
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="7" class="px-4 py-8 text-center text-gray-400">Tidak ada data siswa</td>
                </tr>
                @endforelse
            </x-slot:body>
            @if (isset($students) && $students->hasPages())
            <x-slot:pagination>{{ $students->withQueryString()->links() }}</x-slot:pagination>
            @endif
        </x-data-table>
    </div>

    {{-- MODAL FORM --}}
    <x-modal :show="'showModal'" title="Data Siswa" size="lg">
        <form
            :action="formData.id ? '{{ url('admin/students') }}/' + formData.id : '{{ route('admin.students.store') }}'"
            method="POST" enctype="multipart/form-data" class="space-y-4" id="student-modal-form">
            @csrf
            <template x-if="formData.id">
                <input type="hidden" name="_method" value="PUT">
            </template>
            <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">Nama Lengkap</label>
                    <input type="text" name="full_name" x-model="formData.full_name" 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">
                </div>
                <div>
                    <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">NIS</label>
                    <input type="text" name="student_number" x-model="formData.student_number" 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">
                </div>
                <div>
                    <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Gender</label>
                    <select name="gender" x-model="formData.gender"
                        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="male">Laki-laki</option>
                        <option value="female">Perempuan</option>
                    </select>
                </div>
                <div>
                    <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Kelas</label>
                    <select name="classroom_id" x-model="formData.classroom_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 Kelas</option>
                        @foreach ($classrooms ?? [] as $classroom)
                        <option value="{{ $classroom->id }}">{{ $classroom->grade_level?->value }} {{ $classroom->name
                            }}</option>
                        @endforeach
                    </select>
                </div>
            </div>
            <x-photo-upload name="photo" label="Foto Siswa" :max-mb="2" />
            <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="student-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>

</div>
@endsection