@extends('layouts.admin')

@section('page-title', 'Nouvel administrateur')
@section('page-subtitle', 'Créer un nouvel utilisateur administrateur')

@section('styles')
<link href="{{ asset('css/pages/admin/components.css') }}" rel="stylesheet">
<style>
    .form-section {
        background-color: #f8f9fa;
        border-radius: 8px;
        padding: 20px;
        margin-bottom: 20px;
    }
    
    .form-section-title {
        margin-bottom: 20px;
        padding-bottom: 10px;
        border-bottom: 1px solid #dee2e6;
    }
    
    .password-toggle {
        cursor: pointer;
    }
</style>
@endsection

@section('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Gestion de l'affichage/masquage du mot de passe
        const togglePassword = document.querySelectorAll('.password-toggle');
        
        togglePassword.forEach(toggle => {
            toggle.addEventListener('click', function() {
                const input = document.getElementById(this.dataset.target);
                const type = input.getAttribute('type') === 'password' ? 'text' : 'password';
                input.setAttribute('type', type);
                
                // Changer l'icône
                this.innerHTML = type === 'password' 
                    ? '<i class="fas fa-eye"></i>' 
                    : '<i class="fas fa-eye-slash"></i>';
            });
        });
    });
</script>
@endsection

@section('content')
<div class="container-fluid px-4">
    <div class="page-header-actions d-flex justify-content-between align-items-center mb-4">
        <h1 class="page-title mb-0">Nouvel administrateur</h1>
        <a href="{{ route('admin.users.index') }}" class="btn btn-secondary">
            <i class="fas fa-arrow-left me-2"></i>Retour à la liste
        </a>
    </div>

    @if(session('error'))
    <div class="alert alert-danger alert-dismissible fade show" role="alert">
        {{ session('error') }}
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
    @endif

    <div class="card">
        <div class="card-header bg-light">
            <h5 class="card-title mb-0">Informations de l'administrateur</h5>
        </div>
        <div class="card-body">
            <form action="{{ route('admin.users.store') }}" method="POST">
                @csrf
                
                <div class="form-section">
                    <h5 class="form-section-title">Informations personnelles</h5>
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="prenom" class="form-label">Prénom <span class="text-danger">*</span></label>
                            <input type="text" class="form-control @error('prenom') is-invalid @enderror" id="prenom" name="prenom" value="{{ old('prenom') }}" required>
                            @error('prenom')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="nom" class="form-label">Nom <span class="text-danger">*</span></label>
                            <input type="text" class="form-control @error('nom') is-invalid @enderror" id="nom" name="nom" value="{{ old('nom') }}" required>
                            @error('nom')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                    <div class="mb-3">
                        <label for="email" class="form-label">Email <span class="text-danger">*</span></label>
                        <input type="email" class="form-control @error('email') is-invalid @enderror" id="email" name="email" value="{{ old('email') }}" required>
                        @error('email')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>
                
                <div class="form-section">
                    <h5 class="form-section-title">Mot de passe</h5>
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="password" class="form-label">Mot de passe <span class="text-danger">*</span></label>
                            <div class="input-group">
                                <input type="password" class="form-control @error('password') is-invalid @enderror" id="password" name="password" required>
                                <span class="input-group-text password-toggle" data-target="password">
                                    <i class="fas fa-eye"></i>
                                </span>
                                @error('password')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <small class="form-text text-muted">Le mot de passe doit contenir au moins 8 caractères.</small>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="password_confirmation" class="form-label">Confirmer le mot de passe <span class="text-danger">*</span></label>
                            <div class="input-group">
                                <input type="password" class="form-control" id="password_confirmation" name="password_confirmation" required>
                                <span class="input-group-text password-toggle" data-target="password_confirmation">
                                    <i class="fas fa-eye"></i>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="form-section">
                    <h5 class="form-section-title">Rôle et paramètres</h5>
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="admin_role" class="form-label">Rôle administrateur <span class="text-danger">*</span></label>
                            <select class="form-select @error('admin_role') is-invalid @enderror" id="admin_role" name="admin_role" required>
                                <option value="">Sélectionner un rôle</option>
                                <option value="super_admin" {{ old('admin_role') == 'super_admin' ? 'selected' : '' }}>Super Administrateur</option>
                                <option value="admin" {{ old('admin_role') == 'admin' ? 'selected' : '' }}>Administrateur</option>
                                <option value="editor" {{ old('admin_role') == 'editor' ? 'selected' : '' }}>Éditeur</option>
                                <option value="viewer" {{ old('admin_role') == 'viewer' ? 'selected' : '' }}>Lecteur</option>
                            </select>
                            @error('admin_role')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="language" class="form-label">Langue <span class="text-danger">*</span></label>
                            <select class="form-select @error('language') is-invalid @enderror" id="language" name="language" required>
                                <option value="fr" {{ old('language') == 'fr' ? 'selected' : '' }}>Français</option>
                                <option value="en" {{ old('language') == 'en' ? 'selected' : '' }}>Anglais</option>
                            </select>
                            @error('language')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                    <div class="form-check form-switch mb-3">
                        <input class="form-check-input" type="checkbox" role="switch" id="is_active" name="is_active" value="1" {{ old('is_active', '1') == '1' ? 'checked' : '' }}>
                        <label class="form-check-label" for="is_active">Compte actif</label>
                    </div>
                </div>
                
                <div class="d-flex justify-content-end mt-4">
                    <a href="{{ route('admin.users.index') }}" class="btn btn-secondary me-2">Annuler</a>
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-save me-2"></i>Enregistrer
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection