@extends('layout.app')

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

@push('styles')
    <link rel="stylesheet" type="text/css" href="{{ asset('modern-admin/app-assets/vendors/css/editors/summernote.css') }}">
@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">
            <div class="content-header-left col-md-6 col-12 mb-2 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->reference}}</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-md-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">
                                                @if (isset($user))
                                                    <div class="col-12 mb-1">
                                                        <label class="form-label" for="reference">{{ __('Référence') }} </label>
                                                        <input type="text" class="form-control" id="reference" value="{{ $user->reference }}" disabled>
                                                    </div>
                                                @endif
                                                <div class="col-md-6 mb-1">
                                                    <label class="form-label" for="first_name">{{ __('First Name') }} <span class="danger">*</span> </label>
                                                    <input type="text" class="form-control" name="first_name" id="first_name" value="{{ old('first_name', $user->first_name ?? '') }}" required>
                                                </div>
                                                <div class="col-md-6 mb-1">
                                                    <label class="form-label" for="last_name">{{ __('Last Name') }} <span class="danger">*</span> </label>
                                                    <input type="text" class="form-control" name="last_name" id="last_name" value="{{ old('last_name', $user->last_name ?? '') }}" required>
                                                </div>
                                                <div class="col-md-6 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>
                                                <div class="col-md-6 mb-1">
                                                    <label class="form-label" for="phone">{{ __('Phone') }} <span class="danger">*</span> </label>
                                                    <input type="text" class="form-control" name="phone" id="phone" value="{{ old('phone', $user->phone ?? '') }}" required>
                                                </div>
                                                <div class="col-md-6 mb-1">
                                                    <div class="form-group">
                                                        <label class="form-label" for="fonction_id">{{ __('Fonction') }} <span class="danger">*</span></label>
                                                        <select class="form-control select2" name="fonction_id" id="fonction_id" required>
                                                            <option value="">{{ __('Select') }}</option>
                                                            @foreach($fonctions as $fn)
                                                                <option value="{{ $fn->id }}" {{ old('fonction_id', $user->fonction_id ?? '') == $fn->id ? 'selected' : '' }}> {{ $fn->name }}</option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="col-md-6 mb-1">
                                                    <div class="form-group">
                                                        <label class="form-label" for="organisation_id">{{ __('Organisation') }} <span class="danger">*</span></label>
                                                        <select class="form-control select2" name="organisation_id" id="organisation_id" required>
                                                            <option value="">{{ __('Select') }}</option>
                                                            @foreach($organisations as $org)
                                                                <option value="{{ $org->id }}" {{ old('organisation_id', $user->organisation_id ?? '') == $org->id ? 'selected' : '' }}> {{ $org->name }}</option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="col-md-6 mb-1 skin skin-square">
                                                    <fieldset>
                                                        <input type="checkbox" id="is_active" name="is_active" value="1" {{ old('is_active', $user->is_active ?? true) ? 'checked' : '' }}>
                                                        <label for="is_active">{{ __('User active')}}</label>
                                                    </fieldset>
                                                </div>
                                                <div class="col-md-6 mb-1 skin skin-square">
                                                    <fieldset>
                                                        <input type="checkbox" id="has_permit" name="has_permit" value="1" {{ old('has_permit', $user->has_permit ?? false) ? 'checked' : '' }}>
                                                        <label for="has_permit">{{ __('A un permis de conduite')}}</label>
                                                    </fieldset>
                                                </div>
                                            </div>
                                            @if (!isset($user))
                                                <input type="hidden" name="has_account" value="1">
                                                <div class="row tab-authentification d-none">
                                                    <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 }}"> {{ $role->name }}</option>
                                                                @endforeach
                                                            </select>
                                                        </div>
                                                    </div>
                                                    <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-4">
                                                        <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>
                                                </div>
                                            @endif
                                            <div class="row">
                                                <table class="table table-bordered">
                                                    <thead>
                                                        <tr>
                                                            <th> {{ __("Mission") }} </th>
                                                            <th class="w-25"> {{ __("Active") }} </th>
                                                            <th class="w-25"> {{ __("Besoin validation") }} </th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        @foreach ($missions as $mission)
                                                            <tr>
                                                                <td>
                                                                    #{{ $mission->reference }} {{ $mission->name }}
                                                                </td>
                                                                <td>
                                                                    <div class="row skin skin-square">
                                                                        <fieldset>
                                                                            <input type="checkbox" name="mission[{{$mission->id}}][id]" value="1" {{isset($user) && $user->getMission($mission->id) ? 'checked' : ''}}>
                                                                        </fieldset>
                                                                    </div>
                                                                </td>
                                                                <td>
                                                                    <div class="row skin skin-square">
                                                                        <fieldset>
                                                                            <input type="checkbox" name="mission[{{$mission->id}}][validation]" value="1" {{isset($user) && $user->getMission($mission->id) && $user->getMission($mission->id)->need_validation ? 'checked' : ''}}>
                                                                        </fieldset>
                                                                    </div>
                                                                </td>
                                                            </tr>
                                                        @endforeach
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('modals')

@endsection

@push('scripts')
    <script src="{{ asset('modern-admin/app-assets/vendors/js/editors/summernote/summernote.js') }}"></script>
    <script src="{{ asset('js/generate-password.js') }}"></script>
    <script>
        $(document).ready(function(){
            ajaxForm("#userForm");
            $('#description').summernote({
                height: 200,
                toolbar: [
                    ['style', ['style']],
                    ['font', ['bold', 'italic', 'underline', 'clear']],
                    ['fontname', ['fontname']],
                    ['color', ['color']],
                    ['para', ['ul', 'ol', 'paragraph']],
                    ['height', ['height']],
                    ['table', ['table']],
                    ['insert', ['link', 'picture', 'hr']],
                    ['view', ['fullscreen', 'codeview', 'help']]
                ]
            });
        });
    </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