@extends('layouts.app')
@section('title', 'Ajouter un utilisateur')
@section('page-title', 'Ajouter un Utilisateur')

@section('content')
<div class="row justify-content-center">
<div class="col-lg-7">
<div class="card">
    <div class="card-header"><i class="fas fa-user-plus me-2 text-primary"></i>Nouvel Utilisateur</div>
    <div class="card-body">
        <form method="POST" action="{{ route('users.store') }}" id="userForm">
            @csrf
            <div class="row g-3">
                <div class="col-md-6">
                    <label class="form-label fw-semibold">Nom *</label>
                    <input type="text" name="nom" class="form-control" value="{{ old('nom') }}" required>
                </div>
                <div class="col-md-6">
                    <label class="form-label fw-semibold">Prénom *</label>
                    <input type="text" name="prenom" class="form-control" value="{{ old('prenom') }}" required>
                </div>
                <div class="col-md-6">
                    <label class="form-label fw-semibold">Catégorie *</label>
                    <select name="category" id="categorySelect" class="form-select" required onchange="updateRoles()">
                        <option value="">– Sélectionner –</option>
                        <option value="formateur" {{ old('category')=='formateur'?'selected':'' }}>Formateur</option>
                        <option value="resident"  {{ old('category')=='resident'?'selected':'' }}>Résident</option>
                    </select>
                </div>
                <div class="col-md-6" id="roleDiv">
                    <label class="form-label fw-semibold" id="roleLabel">Rôle *</label>
                    <select name="role_name" id="roleSelect" class="form-select">
                        <option value="">– Sélectionner la catégorie d'abord –</option>
                    </select>
                </div>
                <div class="col-md-6" id="yearDiv" style="display:none">
                    <label class="form-label fw-semibold">Année Académique *</label>
                    <input type="text" name="academic_year" class="form-control"
                           placeholder="Ex: 2026-2030" value="{{ old('academic_year') }}">
                </div>
                <div class="col-md-6">
                    <label class="form-label fw-semibold">E-mail *</label>
                    <input type="email" name="email" class="form-control" value="{{ old('email') }}" required>
                </div>
                <div class="col-md-6">
                    <label class="form-label fw-semibold">Mot de passe *</label>
                    <input type="password" name="password" class="form-control" required minlength="6">
                </div>
                <div class="col-md-6">
                    <label class="form-label fw-semibold">Confirmer le mot de passe *</label>
                    <input type="password" name="password_confirmation" class="form-control" required>
                </div>
            </div>
            <hr>
            <div class="d-flex gap-2">
                <button type="submit" class="btn btn-primary">
                    <i class="fas fa-save me-1"></i>Enregistrer
                </button>
                <a href="{{ route('users.index') }}" class="btn btn-outline-secondary">Annuler</a>
            </div>
        </form>
    </div>
</div>
</div>
</div>

@push('scripts')
<script>
const formateurRoles = @json(\App\Models\User::getFormateurRoles());
const residentRoles  = @json(\App\Models\User::getResidentRoles());

function updateRoles() {
    const cat = document.getElementById('categorySelect').value;
    const sel = document.getElementById('roleSelect');
    const yearDiv = document.getElementById('yearDiv');
    const roleLabel = document.getElementById('roleLabel');
    sel.innerHTML = '<option value="">\u2013 S\u00e9lectionner \u2013</option>';
    const roles = cat === 'formateur' ? formateurRoles : (cat === 'resident' ? residentRoles : []);
    roles.forEach(r => { const o = document.createElement('option'); o.value = r; o.textContent = r; sel.appendChild(o); });
    yearDiv.style.display = cat === 'resident' ? 'block' : 'none';
    roleLabel.textContent = cat === 'resident' ? 'Année *' : 'Rôle *';
}
// Init on page load if old value
document.addEventListener('DOMContentLoaded', function() {
    const cat = document.getElementById('categorySelect').value;
    if (cat) { updateRoles(); const oldRole = '{{ old("role_name") }}';
        if (oldRole) { document.getElementById('roleSelect').value = oldRole; } }
});
</script>
@endpush
@endsection