@extends('layouts.app')

@section('title', 'Nouvelle classe')
@section('heading', 'Nouvelle classe')
@section('subheading', "Année {$year->name}")

@section('content')
    <div class="mb-3">
        <a href="{{ route('classes.index') }}" class="btn btn-sm btn-outline-secondary">
            <i class="bi bi-arrow-left me-1"></i>Retour aux classes
        </a>
    </div>

    <form method="POST" action="{{ route('classes.store') }}" novalidate>
        @csrf

        <div class="row g-3">
            <div class="col-lg-7">
                <div class="card">
                    <div class="card-header bg-white fw-semibold">
                        <i class="bi bi-diagram-3 me-2"></i>Identification
                    </div>
                    <div class="card-body">
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label for="level" class="form-label">Niveau <span class="text-danger">*</span></label>
                                <select id="level" name="level"
                                        class="form-select @error('level') is-invalid @enderror" required>
                                    <option value="">Sélectionner…</option>
                                    @foreach (\App\Enums\ClassLevel::cases() as $level)
                                        <option value="{{ $level->value }}"
                                                data-court="{{ $level->shortLabel() }}"
                                                @selected(old('level') === $level->value)>
                                            {{ $level->label() }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('level')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                <div class="form-text">
                                    Le cycle est déduit du niveau. Il n'est pas modifiable après création.
                                </div>
                            </div>

                            <div class="col-md-6">
                                <label for="name" class="form-label">Nom de la classe <span class="text-danger">*</span></label>
                                <input id="name" name="name" type="text"
                                       class="form-control @error('name') is-invalid @enderror"
                                       value="{{ old('name') }}" required placeholder="Ex. 7e AF — A">
                                @error('name')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            </div>

                            <div class="col-md-4">
                                <label for="capacity" class="form-label">Capacité</label>
                                <input id="capacity" name="capacity" type="number" min="1" max="200"
                                       class="form-control @error('capacity') is-invalid @enderror"
                                       value="{{ old('capacity', 40) }}">
                                @error('capacity')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            </div>

                            <div class="col-md-4">
                                <label for="room_number" class="form-label">Salle</label>
                                <input id="room_number" name="room_number" type="text"
                                       class="form-control @error('room_number') is-invalid @enderror"
                                       value="{{ old('room_number') }}">
                                @error('room_number')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            </div>

                            {{-- Filière : n'a de sens qu'en dernière année du
                                 secondaire, où le programme se spécialise. --}}
                            <div class="col-md-4 d-none" id="bloc-filiere">
                                <label for="stream" class="form-label">Filière</label>
                                <select id="stream" name="stream" class="form-select">
                                    <option value="">Non précisée</option>
                                    <option value="SMP" @selected(old('stream') === 'SMP')>SMP — Sciences math. et physiques</option>
                                    <option value="SVT" @selected(old('stream') === 'SVT')>SVT — Sciences de la vie et de la terre</option>
                                    <option value="LLA" @selected(old('stream') === 'LLA')>LLA — Lettres et langues</option>
                                    <option value="SES" @selected(old('stream') === 'SES')>SES — Sciences économiques</option>
                                </select>
                            </div>

                            <div class="col-12">
                                <label for="homeroom_teacher_id" class="form-label">Titulaire</label>
                                <select id="homeroom_teacher_id" name="homeroom_teacher_id"
                                        class="form-select @error('homeroom_teacher_id') is-invalid @enderror">
                                    <option value="">— À désigner plus tard —</option>
                                    @foreach ($teachers as $teacher)
                                        <option value="{{ $teacher->id }}" @selected(old('homeroom_teacher_id') === $teacher->id)>
                                            {{ $teacher->fullName() }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('homeroom_teacher_id')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                <div class="form-text">
                                    Le titulaire signe les bulletins et rédige les appréciations.
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-5">
                <div class="alert alert-info small">
                    <i class="bi bi-info-circle me-1"></i>
                    À la création, les matières du programme de ce niveau seront automatiquement
                    ajoutées à la classe, avec leurs coefficients. Vous serez ensuite invité à
                    affecter un professeur à chacune.
                </div>

                @if ($existing->isNotEmpty())
                    <div class="card mb-3">
                        <div class="card-header bg-white small fw-semibold">Classes déjà ouvertes</div>
                        <ul class="list-group list-group-flush small">
                            @foreach ($existing as $name)
                                <li class="list-group-item py-1">{{ $name }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif

                <div class="d-grid gap-2">
                    <button type="submit" class="btn btn-primary">
                        <i class="bi bi-check-lg me-1"></i>Créer la classe
                    </button>
                    <a href="{{ route('classes.index') }}" class="btn btn-outline-secondary">Annuler</a>
                </div>
            </div>
        </div>
    </form>

    <script>
        // Propose un nom cohérent dès le choix du niveau, et n'affiche la
        // filière que là où elle existe réellement (dernière année du secondaire).
        (() => {
            const niveau = document.getElementById('level');
            const nom = document.getElementById('name');
            const filiere = document.getElementById('bloc-filiere');

            niveau.addEventListener('change', () => {
                const option = niveau.selectedOptions[0];

                if (! nom.value.trim() && option.dataset.court) {
                    nom.value = option.dataset.court + ' — A';
                }

                filiere.classList.toggle('d-none', niveau.value !== 'NS4');
            });
        })();
    </script>
@endsection