@extends('layouts.app', ['title' => 'Administración · Alumnos', 'pageClass' => 'page-admin'])

@section('content')
    <section class="result-heading admin-page-head">
        <div>
            <p class="eyebrow">Administración</p>
            <h2>Alumnos</h2>
        </div>
        <a class="button-muted" href="{{ route('admin.dashboard') }}">Volver al panel</a>
    </section>

    @include('admin.partials.nav', ['active' => 'students'])

    <section class="admin-two-col">
        <article class="panel">
            <form class="filters" method="GET" action="{{ route('admin.students.index') }}">
                <label>
                    Buscar
                    <input type="search" name="q" value="{{ $search }}" placeholder="Nombre, DNI o correo">
                </label>
                <div class="finder-actions">
                    <label class="inline-check filter-toggle">
                        <input type="checkbox" name="ex_students" value="1" @checked($showExStudents) onchange="this.form.submit()">
                        <span>ExAlumnos</span>
                    </label>
                    <a class="button-muted" href="{{ route('admin.students.index') }}">Limpiar</a>
                </div>
            </form>

            <div class="table-wrap">
                <table class="data-table">
                    <thead>
                        <tr>
                            <th>Alumno</th>
                            <th>DNI</th>
                            <th>Correo</th>
                            <th>Nuevo</th>
                            <th>Inscripciones</th>
                            <th>Acciones</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($students as $student)
                            <tr>
                                <td><input form="student-update-{{ $student->id }}" type="text" name="full_name" value="{{ $student->full_name }}"></td>
                                <td><input form="student-update-{{ $student->id }}" type="text" name="dni" value="{{ $student->dni }}"></td>
                                <td><input form="student-update-{{ $student->id }}" type="email" name="email" value="{{ $student->email }}"></td>
                                <td>
                                    <label class="inline-check">
                                        <input form="student-update-{{ $student->id }}" type="checkbox" name="is_incoming" value="1" @checked($student->is_incoming)>
                                        <span>{{ $student->is_incoming ? 'Sí' : 'No' }}</span>
                                    </label>
                                </td>
                                <td>{{ $student->enrollments_count }}</td>
                                <td class="action-cell">
                                    <form id="student-update-{{ $student->id }}" method="POST" action="{{ route('admin.students.update', $student) }}">
                                        @csrf
                                        @method('PUT')
                                        <button type="submit">Guardar</button>
                                    </form>
                                    <a class="button-muted" href="{{ route('admin.students.manage', $student) }}">Administrar</a>
                                    <form method="POST" action="{{ route('admin.students.destroy', $student) }}">
                                        @csrf
                                        @method('DELETE')
                                        <button class="button-muted" type="submit">Eliminar</button>
                                    </form>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>

            <div class="pagination">{{ $students->links('components.pagination.admin') }}</div>
        </article>

        <article class="panel">
            <p class="eyebrow">Nuevo alumno</p>
            <h3>Alta manual</h3>
            <form class="stack-form" method="POST" action="{{ route('admin.students.store') }}">
                @csrf
                <label>
                    Nombre completo
                    <input type="text" name="full_name">
                </label>
                <label>
                    DNI
                    <input type="text" name="dni">
                </label>
                <label>
                    Correo
                    <input type="email" name="email">
                </label>
                <label class="inline-check">
                    <input type="checkbox" name="is_incoming" value="1">
                    <span>Es ingresante</span>
                </label>
                <button type="submit">Crear alumno</button>
            </form>
        </article>
    </section>
@endsection

@push('scripts')
    <script>
        (() => {
            const form = document.querySelector('form[action="{{ route('admin.students.index') }}"]');
            const input = form?.querySelector('input[type="search"][name="q"]');
            if (!form || !input) return;

            let timeoutId = null;
            input.addEventListener('input', () => {
                window.clearTimeout(timeoutId);
                timeoutId = window.setTimeout(() => form.submit(), 250);
            });
        })();
    </script>
@endpush