@extends('layouts.base')

@section('title')
    Ajouter un utilisateur
@endsection

@section('style')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
    <link href="{{ asset('assets/vendor/select/select2.min.css') }}" rel="stylesheet" type="text/css">

@endsection

@section('content')
<div class="row">
                {{--@include('includes.alert/alert_success_error') --}}



    <div class="col-12">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="mb-0">Ajouter un utilisateur</h5>
                <a href="{{ route('gestion_utilisateur_agence.liste_utilisateur') }}" class="btn btn-outline-danger mx-1">
                    <i class="fa-solid fa-arrow-left"></i> Retour à la liste
                </a>
            </div>
            <div class="card-body">
                <form action="{{ route('gestion_utilisateur_agence.ajout_utilisateur') }}" method="POST" class="row g-3 app-form">
                    @csrf

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

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

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

                    <div class="col-md-6">
                        <label for="agencie_id">Agence<span class="text-danger">*</span></label>
                        <select name="agencie_id" class="select-example form-select select-basic @error('agencie_id') is-invalid @enderror">
                            <option value="">-- Choisir une agence --</option>
                            @foreach($agencies as $id => $name)
                                <option value="{{ $id }}" {{ old('agencie_id') == $id ? 'selected' : '' }}>{{ $name }}</option>
                            @endforeach
                        </select>
                        @error('agencie_id') <span class="text-danger">{{ $message }}</span> @enderror
                    </div>

                    <div class="col-md-6">
                        <label for="role">Rôle</label>
                        <select name="role" class="select-example form-select select-basic @error('role') is-invalid @enderror">
                            <option value="">-- Choisir un rôle --</option>
                            @foreach($roles as $r)
                                <option value="{{ $r }}" {{ old('role') == $r ? 'selected' : '' }}>{{ $r }}</option>
                            @endforeach
                        </select>
                        @error('role') <span class="text-danger">{{ $message }}</span> @enderror
                    </div>

                    <div class="col-md-6">
                        <label for="mot_de_passe">Mot de passe<span class="text-danger">*</span></label>
                        <input id="mot_de_passe" type="password" name="mot_de_passe" class="form-control @error('mot_de_passe') is-invalid @enderror" autocomplete="new-password">
                        @error('mot_de_passe') <span class="text-danger">{{ $message }}</span> @enderror
                    </div>

                    <div class="col-md-6">
                        <label for="confirmation">Confirmation du mot de passe<span class="text-danger">*</span></label>
                        <input id="confirmation" type="password" name="confirmation" class="form-control @error('confirmation') is-invalid @enderror" autocomplete="new-password">
                        @error('confirmation') <span class="text-danger">{{ $message }}</span> @enderror
                    </div>

                    <div class="col-md-12 d-flex align-items-center mt-2">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" value="1" id="autoPassToggle" name="autoPassToggle">
                            <label class="form-check-label" for="autoPassToggle">
                                Générer le mot de passe automatiquement
                            </label>
                        </div>
                    </div>

                    <div class="col-12 text-end">
                        <button type="submit" class="btn text-white" style="background: {{ config('colors.lnb_green') }};">
                            <i class="fa fa-save"></i> Enregistrer l'utilisateur
                        </button>
                    </div>
                </form>            </div>
        </div>
    </div>
</div>
@endsection

@section("script")
<script src="{{ asset('assets/vendor/select/select2.min.js') }}"></script>
<script src="{{ asset('assets/js/select.js') }}"></script>

<script>
    (function(){
        const toggle = document.getElementById('autoPassToggle');
        const pass = document.getElementById('mot_de_passe');
        const conf = document.getElementById('confirmation');

        function generatePlaceholder() {
            // Générer un placeholder visuel (pas un vrai mot de passe)
            return '••••••••••••';
        }

        function setReadonly(el, ro){
            if (!el) return;
            el.readOnly = !!ro;
            if (ro) {
                el.classList.add('bg-light', 'text-muted');
                el.style.cursor = 'not-allowed';
            } else {
                el.classList.remove('bg-light', 'text-muted');
                el.style.cursor = 'text';
            }
        }

        function applyToggle(){
            if (!toggle || !pass || !conf) return;
            if (toggle.checked) {
                // Utiliser un placeholder visuel (pas un vrai mot de passe)
                const placeholder = generatePlaceholder();
                pass.value = placeholder;
                conf.value = placeholder;
                setReadonly(pass, true);
                setReadonly(conf, true);
                pass.placeholder = 'Mot de passe généré automatiquement côté serveur';
                conf.placeholder = 'Mot de passe généré automatiquement côté serveur';
                
                // Ajouter un indicateur visuel
                pass.title = 'Le serveur générera un mot de passe sécurisé automatiquement';
                conf.title = 'Le serveur générera un mot de passe sécurisé automatiquement';
            } else {
                pass.value = '';
                conf.value = '';
                setReadonly(pass, false);
                setReadonly(conf, false);
                pass.placeholder = 'Saisissez un mot de passe sécurisé';
                conf.placeholder = 'Confirmez le mot de passe';
                
                // Retirer l'indicateur visuel
                pass.title = '';
                conf.title = '';
            }
        }

        if (toggle) {
            toggle.addEventListener('change', applyToggle);
        }
        
        // Appliquer l'état initial
        applyToggle();
    })();
</script>
@endsection