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

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

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

    <section class="admin-two-col">
        <article class="panel">
            <form class="filters" method="GET" action="{{ route('admin.teachers.index') }}">
                <label>
                    Buscar
                    <input type="search" name="q" value="{{ $search }}" placeholder="Nombre del docente">
                </label>
                <div class="finder-actions">
                    <a class="button-muted" href="{{ route('admin.teachers.index') }}">Limpiar</a>
                </div>
            </form>

            <div class="table-wrap">
                <table class="data-table">
                    <thead>
                        <tr>
                            <th>Docente</th>
                            <th>Cursadas</th>
                            <th>Acciones</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($teachers as $teacher)
                            <tr>
                                <td><input form="teacher-update-{{ $teacher->id }}" type="text" name="name" value="{{ $teacher->name }}"></td>
                                <td>{{ $teacher->course_offerings_count }}</td>
                                <td class="action-cell compact-actions">
                                    <form id="teacher-update-{{ $teacher->id }}" method="POST" action="{{ route('admin.teachers.update', $teacher) }}">
                                        @csrf
                                        @method('PUT')
                                        <button type="submit">Guardar</button>
                                    </form>
                                    <a class="button-muted" href="{{ route('admin.subjects.index', ['teacher_id' => $teacher->id]) }}">Administrar</a>
                                    <form method="POST" action="{{ route('admin.teachers.destroy', $teacher) }}">
                                        @csrf
                                        @method('DELETE')
                                        <button class="button-muted" type="submit">Eliminar</button>
                                    </form>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>

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

        <article class="panel">
            <p class="eyebrow">Nuevo docente</p>
            <h3>Alta manual</h3>
            <form class="stack-form" method="POST" action="{{ route('admin.teachers.store') }}">
                @csrf
                <label>
                    Nombre
                    <input type="text" name="name" placeholder="Apellido y nombre">
                </label>
                <button type="submit">Crear docente</button>
            </form>
        </article>
    </section>
@endsection

@push('scripts')
    <script>
        (() => {
            const form = document.querySelector('form[action="{{ route('admin.teachers.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