@extends('layout.app')

@section('title')
    {{ __('Users') }}
@endsection

@push('styles')

@endpush

@section('active_users', 'active')
@section('data_col', '2-columns')
@section('body_class', '2-columns')

@section('content')
<div class="app-content content">
    <div class="content-overlay"></div>
    <div class="content-wrapper">
        <div class="content-header row mb-1">
            <div class="content-header-left col-md-6 col-12 breadcrumb-new">
                <h3 class="content-header-title mb-0 d-inline-block">{{ __('Users')}}</h3>
                <div class="row breadcrumbs-top d-inline-block">
                    <div class="breadcrumb-wrapper col-12">
                        <ol class="breadcrumb">
                            @if(isset($user))
                                <li class="breadcrumb-item">{{ __('Edit') }}</li>
                                <li class="breadcrumb-item active">{{$user->id}}</li>
                            @else
                                <li class="breadcrumb-item active">{{ __('Add') }}</li>
                            @endif
                        </ol>
                    </div>
                </div>
            </div>
            <div class="content-header-right col-md-6 col-12">
                <div class="btn-group float-msm-right">
                    <a class="btn btn-dark" href="{{ route('users.index') }}">
                        <i class="la la-arrow-left"></i> {{ __('Users') }}
                    </a>
                    <button type="submit" class="btn btn-success ml-1 pr-1 pl-1" form="userForm">
                        <i class="la la-save"></i> {{ __('Save') }}
                    </button>
                </div>
            </div>
        </div>
        <div class="content-body pb-5">
            <div class="container">
                <div class="row">
                    <div class="col-md-12">
                        <div class="card">
                            <div class="card-content collpase show">
                                <div class="card-body">
                                    <form class="form form-horizontal" enctype="multipart/form-data" id="userForm" 
                                        action="@if(isset($user)) {{ route('users.update', $user->id) }} @else {{ route('users.store') }} @endif" method="POST">
                                        @csrf
                                        @if(isset($user))
                                            @method('PUT')
                                        @endif
                                        
                                        <div class="form-body">
                                            <div class="row">
                                                <div class="col-md-12 mb-1">
                                                    <div class="form-group">
                                                        <label class="form-label" for="employe_id">{{ __('Employe') }} <span class="danger">*</span></label>
                                                        <select class="form-control select2" name="employe_id" id="employe_id" required>
                                                            <option value="">{{ __('Select') }}</option>
                                                            @foreach($employes as $employe)
                                                                <option value="{{ $employe->id }}" {{ old('employe_id', $user->employe_id ?? '') == $employe->id ? 'selected' : '' }}> {{ $employe->first_name.' '.$employe->last_name }}</option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="col-md-12 mb-1">
                                                    <div class="form-group">
                                                        <label class="form-label" for="role_id">{{ __('Role') }} <span class="danger">*</span></label>
                                                        <select class="form-control select2" name="role_id" id="role_id" required>
                                                            <option value="">{{ __('Select') }}</option>
                                                            @foreach($roles as $role)
                                                                <option value="{{ $role->id }}" {{ isset($user) && ($user->getRoleNames()[0]??'') ==  $role->name ? 'selected' : '' }}> {{ $role->name }}</option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="col-md-12 mb-1">
                                                    <label class="form-label" for="email">{{ __('Email') }} <span class="danger">*</span> </label>
                                                    <input type="email" class="form-control" name="email" id="email" value="{{ old('email', $user->email ?? '') }}" required>
                                                </div>
                                                @if (!isset($user))
                                                    <div class="col-md-6 position-relative mt-1">
                                                        <label for="password" class="form-label">{{ __('Password') }} <span class="text-danger">*</span></label>
                                                        <div class="input-group">
                                                            <input type="password" class="form-control" id="password" name="user_password" placeholder="{{ __('Entrez votre mot de passe') }}" required>
                                                            <button type="button" class="btn btn-outline-dark generate-password">
                                                                <i class="fas fa-random"></i>
                                                            </button>
                                                            <button type="button" class="btn btn-outline-dark toggle-password" data-target="password">
                                                                <i class="fas fa-eye"></i>
                                                            </button>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-6 position-relative mt-1">
                                                        <label for="password_confirmation" class="form-label">{{ __('Confirm Password') }} <span class="text-danger">*</span></label>
                                                        <div class="input-group">
                                                            <input type="password" class="form-control" id="password_confirmation" name="user_password_confirm" placeholder="{{ __('Confirmez votre mot de passe') }}" required>
                                                            <button type="button" class="btn btn-outline-dark toggle-password" data-target="password_confirmation">
                                                                <i class="fas fa-eye"></i>
                                                            </button>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-6 mb-1 skin skin-square mt-1">
                                                        <fieldset>
                                                            <input type="checkbox" id="user_send_email" name="user_send_email" value="1" checked>
                                                            <label for="user_send_email">{{ __('Send access parameters by email')}}</label>
                                                        </fieldset>
                                                    </div>
                                                    <div class="col-md-12 mb-1 mt-1">
                                                        <div class="row justify-content-md-center">
                                                            <div class="col-lg-6 p-1 shadow-lg">
                                                                <div class="validation-container container">
                                                                    <div class="progress" style="height: 10px;">
                                                                        <div class="progress-bar" role="progressbar" style="width: 0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
                                                                    </div>
                                                                    <div>
                                                                        <div class="requirement" id="length-req">
                                                                            <i class="fas fa-times-circle text-danger"></i> {{ __("Au moins 8 caractères")}}
                                                                        </div>
                                                                        <div class="requirement" id="lowercase-req">
                                                                            <i class="fas fa-times-circle text-danger"></i> {{ __("Lettres minuscules")}}
                                                                        </div>
                                                                        <div class="requirement" id="uppercase-req">
                                                                            <i class="fas fa-times-circle text-danger"></i> {{ __("Lettres majuscules")}}
                                                                        </div>
                                                                        <div class="requirement" id="number-req">
                                                                            <i class="fas fa-times-circle text-danger"></i> {{ __("Au moins un chiffre")}}
                                                                        </div>
                                                                        <div class="requirement" id="confirm-req">
                                                                            <i class="fas fa-times-circle text-danger"></i> {{ __("Confirmation du mot de passe")}}
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                @endif
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('modals')

@endsection

@push('scripts')
    <script src="{{ asset('js/generate-password.js') }}"></script>
    <script>
        $(document).ready(function(){
            ajaxForm("#userForm");
        });
    </script>
    <script>
        $(document).ready(function() {
            $(".toggle-password").click(function() {
                let target = $("#" + $(this).data("target"));
                let icon = $(this).find("i");

                if (target.attr("type") === "password") {
                    target.attr("type", "text");
                    icon.removeClass("fa-eye").addClass("fa-eye-slash");
                } else {
                    target.attr("type", "password");
                    icon.removeClass("fa-eye-slash").addClass("fa-eye");
                }
            });
        });
    </script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            var testBtn = false;
            const passwordInput = document.getElementById('password');
            const confirmInput = document.getElementById('password_confirmation');
            const progressBar = document.querySelector('.progress-bar');
            const requirements = {
                length: document.getElementById('length-req'),
                lowercase: document.getElementById('lowercase-req'),
                uppercase: document.getElementById('uppercase-req'),
                number: document.getElementById('number-req'),
                confirm: document.getElementById('confirm-req')
            };
            
            // Fonction pour vérifier les exigences du mot de passe
            function checkPasswordRequirements(password) {
                const hasLength = password.length >= 8;
                const hasLowercase = /[a-z]/.test(password);
                const hasUppercase = /[A-Z]/.test(password);
                const hasNumber = /[0-9]/.test(password);
                
                return { hasLength, hasLowercase, hasUppercase, hasNumber };
            }
            
            // Fonction pour mettre à jour l'interface utilisateur
            function updateUI(requirementsMet) {
                // Mettre à jour les icônes et couleurs des exigences
                requirements.length.classList.toggle('valid', requirementsMet.hasLength);
                requirements.length.querySelector('i').className = requirementsMet.hasLength ? 
                    'fas fa-check-circle text-success' : 'fas fa-times-circle text-danger';
                
                requirements.lowercase.classList.toggle('valid', requirementsMet.hasLowercase);
                requirements.lowercase.querySelector('i').className = requirementsMet.hasLowercase ? 
                    'fas fa-check-circle text-success' : 'fas fa-times-circle text-danger';
                
                requirements.uppercase.classList.toggle('valid', requirementsMet.hasUppercase);
                requirements.uppercase.querySelector('i').className = requirementsMet.hasUppercase ? 
                    'fas fa-check-circle text-success' : 'fas fa-times-circle text-danger';
                
                requirements.number.classList.toggle('valid', requirementsMet.hasNumber);
                requirements.number.querySelector('i').className = requirementsMet.hasNumber ? 
                    'fas fa-check-circle text-success' : 'fas fa-times-circle text-danger';
                
                // Vérifier la confirmation
                const passwordsMatch = (passwordInput.value === confirmInput.value) && (passwordInput.value !== '');
               
                requirements.confirm.classList.toggle('valid', passwordsMatch);
                requirements.confirm.querySelector('i').className = passwordsMatch ? 
                    'fas fa-check-circle text-success' : 'fas fa-times-circle text-danger';
                
                // Calculer le pourcentage de complétion
                const totalRequirements = 5;
                let metRequirements = Object.values(requirementsMet).filter(Boolean).length;
                
                // Ajouter la confirmation si nécessaire
                if (passwordsMatch) metRequirements++;
                
                const completionPercentage = (metRequirements / totalRequirements) * 100;
                
                // Mettre à jour la barre de progression
                progressBar.style.width = `${completionPercentage}%`;
                
                // Changer la couleur en fonction de la force
                if (completionPercentage <= 20) {
                    progressBar.className = 'progress-bar bg-danger bg-darken-4';
                } else if (completionPercentage <= 40) {
                    progressBar.className = 'progress-bar bg-danger';
                } else if (completionPercentage <= 60){
                    progressBar.className = 'progress-bar bg-danger bg-lighten-1';
                }else if (completionPercentage <= 80){
                    progressBar.className = 'progress-bar bg-warning';
                }else {
                    testBtn = true;
                    progressBar.className = 'progress-bar bg-success';
                }
            }
            
            // Écouter les modifications du mot de passe
            passwordInput.addEventListener('input', function() {
                testBtn = false;
                const password = this.value;
                const requirementsMet = checkPasswordRequirements(password);
                updateUI(requirementsMet);
                
                // Vérifier la confirmation si le champ de confirmation n'est pas vide
                if (confirmInput.value !== '') {
                    checkPasswordMatch();
                }
            });
            
            document.querySelector(".generate-password").addEventListener("click", function () {
                let newPassword = generatePassword();
    
                // Définir le mot de passe et déclencher les événements
                passwordInput.value = newPassword;
                confirmInput.value = newPassword;
                
                // Déclencher manuellement l'événement input
                const event = new Event('input', { bubbles: true });
                passwordInput.dispatchEvent(event);
                const originalType = passwordInput.type;
                passwordInput.type = 'text';
                setTimeout(() => { passwordInput.type = originalType; }, 1000);
    
                // Déclencher manuellement l'événement input
                const event2 = new Event('input', { bubbles: true });
                confirmInput.dispatchEvent(event2);
                const originalType2 = confirmInput.type;
                confirmInput.type = 'text';
                setTimeout(() => { confirmInput.type = originalType2; }, 1000);
            });
    
            // Fonction pour vérifier si les mots de passe correspondent
            function checkPasswordMatch() {
                testBtn = false;
                // Mettre à jour l'UI pour refléter l'état de la confirmation
                const requirementsMet = checkPasswordRequirements(passwordInput.value);
                updateUI(requirementsMet);
            }
    
            confirmInput.addEventListener('input', checkPasswordMatch);
            
        });
    </script>
@endpush