@extends('layouts.app')

@section('title', 'Ajouter au personnel')
@section('heading', 'Ajouter au personnel')

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

    <form method="POST" action="{{ route('staff.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-person me-2"></i>Identité
                    </div>
                    <div class="card-body">
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label for="first_name" class="form-label">Prénom <span class="text-danger">*</span></label>
                                <input id="first_name" name="first_name" type="text"
                                       class="form-control @error('first_name') is-invalid @enderror"
                                       value="{{ old('first_name') }}" required autofocus>
                                @error('first_name')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            </div>

                            <div class="col-md-6">
                                <label for="last_name" class="form-label">Nom <span class="text-danger">*</span></label>
                                <input id="last_name" name="last_name" type="text"
                                       class="form-control @error('last_name') is-invalid @enderror"
                                       value="{{ old('last_name') }}" required>
                                @error('last_name')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            </div>

                            <div class="col-md-4">
                                <label for="gender" class="form-label">Sexe</label>
                                <select id="gender" name="gender" class="form-select">
                                    <option value="">Non renseigné</option>
                                    <option value="F" @selected(old('gender') === 'F')>Femme</option>
                                    <option value="M" @selected(old('gender') === 'M')>Homme</option>
                                </select>
                            </div>

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

                            <div class="col-md-4">
                                <label for="employee_id" class="form-label">Matricule <span class="text-danger">*</span></label>
                                <input id="employee_id" name="employee_id" type="text"
                                       class="form-control text-matricule @error('employee_id') is-invalid @enderror"
                                       value="{{ old('employee_id', $nextEmployeeId) }}" required>
                                @error('employee_id')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            </div>

                            <div class="col-md-6">
                                <label for="phone" class="form-label">Téléphone</label>
                                <input id="phone" name="phone" type="tel"
                                       class="form-control @error('phone') is-invalid @enderror"
                                       value="{{ old('phone') }}" placeholder="+509 XXXX-XXXX">
                                @error('phone')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            </div>

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

                            <div class="col-12">
                                <label for="address" class="form-label">Adresse</label>
                                <input id="address" name="address" type="text"
                                       class="form-control" value="{{ old('address') }}">
                            </div>
                        </div>
                    </div>
                </div>

                <div class="card mt-3">
                    <div class="card-header bg-white fw-semibold">
                        <i class="bi bi-briefcase me-2"></i>Fonction
                    </div>
                    <div class="card-body">
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label for="job_title" class="form-label">Fonction <span class="text-danger">*</span></label>
                                <select id="job_title" name="job_title"
                                        class="form-select @error('job_title') is-invalid @enderror" required>
                                    @foreach (['teacher' => 'Professeur', 'director' => 'Direction',
                                               'dean' => 'Censeur', 'secretary' => 'Secrétariat',
                                               'accountant' => 'Économat', 'supervisor' => 'Surveillant',
                                               'other' => 'Autre'] as $value => $label)
                                        <option value="{{ $value }}" @selected(old('job_title', 'teacher') === $value)>
                                            {{ $label }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('job_title')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            </div>

                            <div class="col-md-6">
                                <label for="specialization" class="form-label">Spécialité</label>
                                <input id="specialization" name="specialization" type="text"
                                       class="form-control" value="{{ old('specialization') }}"
                                       placeholder="Ex. Mathématiques, Langues vivantes">
                            </div>

                            <div class="col-md-6">
                                <label for="hire_date" class="form-label">Date d'embauche</label>
                                <input id="hire_date" name="hire_date" type="date"
                                       class="form-control @error('hire_date') is-invalid @enderror"
                                       value="{{ old('hire_date', now()->toDateString()) }}">
                                @error('hire_date')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            </div>

                            <div class="col-md-6">
                                <label for="contract_type" class="form-label">Type de contrat</label>
                                <select id="contract_type" name="contract_type" class="form-select">
                                    <option value="permanent" @selected(old('contract_type', 'permanent') === 'permanent')>Permanent</option>
                                    <option value="contract" @selected(old('contract_type') === 'contract')>Contractuel</option>
                                    <option value="hourly" @selected(old('contract_type') === 'hourly')>Vacataire</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-5">
                <div class="card">
                    <div class="card-header bg-white fw-semibold">
                        <i class="bi bi-key me-2"></i>Compte de connexion
                    </div>
                    <div class="card-body">
                        <div class="form-check mb-3">
                            <input class="form-check-input" type="checkbox" name="create_account" value="1"
                                   id="create_account" @checked(old('create_account'))>
                            <label class="form-check-label" for="create_account">
                                Créer un accès à l'application
                            </label>
                        </div>

                        {{-- Facultatif à dessein : au démarrage d'une école, la
                             plupart des professeurs n'ont pas de compte. On les
                             enregistre quand même pour pouvoir les affecter. --}}
                        <p class="form-text">
                            Un professeur peut être enregistré et affecté à des classes sans
                            compte. L'accès n'est nécessaire que pour saisir des notes.
                        </p>

                        <div id="bloc-compte" class="d-none">
                            <div class="mb-3">
                                <label for="account_email" class="form-label">E-mail de connexion</label>
                                <input id="account_email" name="account_email" type="email"
                                       class="form-control @error('account_email') is-invalid @enderror"
                                       value="{{ old('account_email') }}">
                                @error('account_email')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            </div>

                            <div class="mb-2">
                                <label for="account_password" class="form-label">Mot de passe provisoire</label>
                                <input id="account_password" name="account_password" type="text"
                                       class="form-control @error('account_password') is-invalid @enderror"
                                       value="{{ old('account_password') }}" minlength="8">
                                @error('account_password')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                <div class="form-text">
                                    8 caractères minimum. L'intéressé devra le changer à sa
                                    première connexion.
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="d-grid gap-2 mt-3">
                    <button type="submit" class="btn btn-primary">
                        <i class="bi bi-check-lg me-1"></i>Enregistrer
                    </button>
                    <a href="{{ route('staff.index') }}" class="btn btn-outline-secondary">Annuler</a>
                </div>
            </div>
        </div>
    </form>

    <script>
        (() => {
            const bascule = document.getElementById('create_account');
            const bloc = document.getElementById('bloc-compte');
            const afficher = () => bloc.classList.toggle('d-none', ! bascule.checked);

            bascule.addEventListener('change', afficher);
            afficher();
        })();
    </script>
@endsection