@extends('adminlte::page')
@section('plugins.Select2', true)
@section('plugins.iCheck', true)
@section('title', 'Crear Usuario')
@section('content_header')
    <a class="btn btn-dark btn" href="javascript:history.back()"><i class="fas fa-solid fa-arrow-left"></i> REGRESAR</a>
@stop

@section('content')

    <div class="container" style="width: 100%">
        <x-adminlte-profile-widget class="elevation-4" name="Nuevo Usuario" theme="primary" footer-class='bg-white'>
            <x-validation-errors class="mb-4" />
            <form data-action="{{ route('user.store') }}" class="m-3 mt-0" method="POST" id="userForm" style="width: 100%">
                @csrf
                <div class="form-group">
                    <label for="inputName">Nombre Completo:</label>
                    <input type="text" id="name_id" class="form-control" name="name" placeholder="Nombre Completo">
                </div>
                <div class="form-group">
                    <label for="inputName">Email:</label>
                    <input type="text" id="email_id" class="form-control" name="email" placeholder="Email">
                </div>
                <div class="form-group">
                    <label for="inputName">Contraseña:</label>
                    <div class="input-group mb-3">
                        <input type="password" id="password_id" class="form-control" name="password"
                            placeholder="Contraseña">
                        <div class="input-group-append" onclick="changeViewPassword()">
                            <span class="input-group-text" id="hidePassword" style="display: none"><i
                                    class="fas fa-regular fa-eye"></i></span>
                            <span class="input-group-text" id="showPassword"><i
                                    class="fas fa-regular fa-eye-slash"></i></span>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label for="inputName">Repetir Contraseña:</label>
                    <input type="password" id="password_re_id" class="form-control" name="password_re"
                        placeholder="Contraseña">
                </div>
                <div class="form-group">
                    <label>Roles:</label>
                    <select class="form-control" style="width: 100%" id="roles_id" multiple="multiple" name="roles[]">
                    </select>
                </div>
                <button type="submit" class="btn btn-primary float-right">REGISTRAR</button>
            </form>
        </x-adminlte-profile-widget>
    </div>
@stop

@section('js')
    <script>
        var uri = "{{ route('validate.email') }}";
        $(document).ready(function() {
            $.fn.select2.defaults.set('language', 'es');
            $('#roles_id').select2({
                ajax: {
                    url: "{{ route('api.select.roles') }}",
                    dataType: 'json',
                    delay: 250,
                    data: function(params) {
                        return {
                            term: params.term
                        }
                    },
                    processResults: function(data) {
                        return {
                            results: data
                        }
                    }
                },
                placeholder: 'Seleccione los roles',
                theme: "bootstrap4",
            });
        });

        function changeViewPassword() {
            let pass = document.getElementById('password_id');
            let passRe = document.getElementById('password_re_id');
            let show = document.getElementById('showPassword');
            let hide = document.getElementById('hidePassword');

            if (pass.type == 'password') {
                pass.type = 'text';
                passRe.type = 'text';
                show.style.display = 'none';
                hide.style.display = 'block';

            } else {
                pass.type = 'password';
                passRe.type = 'password';
                show.style.display = 'block';
                hide.style.display = 'none';
            }
        }
    </script>
    <script src="/js/user/form.js"></script>
    <script src="/js/general/sweet.js"></script>
@stop