{% extends 'base.html.twig' %}
{% block title %}{% trans %}Nuevo Usuario{% endtrans %}{% endblock %}
{% block contenido %}
<main>
    <div class="container-fluid p-5">
        <div class="row justify-content-center">
            <div class="col-8 text-left" style="font-size: 24px">
                <i class="fas fa-user-plus text-danger"></i><span class="text-danger">  Nuevo Usuario</span>
            </div>
        </div>
        <hr>
        <div class="form-row align-items-center justify-content-center">
            {{ form_start(form, {'attr': {'id': 'forNew','class':"needs-validation",'novalidate':''}}) }}
            <div class="text-left col-12">
                <div class="row align-items-center justify-content-center">
                    <div class="text-left col-xl-4 col-lg-4 col-md-6 col-sm-6 col-12 mb-3">
                        <label for="username">{% trans %}Usuario (min:6 - max:15){% endtrans %}</label>
                        {{ form_widget(form.username,{'id':'username','autocomplete':'off','attr':{'class':'form-control form-control-sm'}}) }}
                        <div class="valid-feedback">
                            {% trans %}válido{% endtrans %}
                        </div>
                        <div id="lusername" class="invalid-feedback">
                            {% trans %}inválido!{% endtrans %}
                        </div>
                    </div>
                    <div class="text-left col-xl-4 col-lg-4 col-md-6 col-sm-6 col-12 mb-3">
                        <label for="username">{% trans %}Correo Electrónico{% endtrans %}</label>
                        {{ form_widget(form.email,{'id':'email','attr':{'class':'form-control form-control-sm'}}) }}
                        <div class="valid-feedback">
                            {% trans %}válido{% endtrans %}
                        </div>
                        <div id="lemail" class="invalid-feedback">
                            {% trans %}inválido!{% endtrans %}
                        </div>
                    </div>
                </div>
                <div class="row align-items-center justify-content-center">
                    <div class="text-left col-xl-4 col-lg-4 col-md-6 col-sm-6 col-12 mb-3">
                        <label for="username">{% trans %}Nombres {% endtrans %}</label>
                        {{ form_widget(form.usuNombres,{'id':'usuNombres','attr':{'class':'form-control form-control-sm'}}) }}
                        <div class="valid-feedback">
                            {% trans %}válido{% endtrans %}
                        </div>
                        <div class="invalid-feedback">
                            {% trans %}inválido!{% endtrans %}
                        </div>
                    </div>
                    <div class="text-left col-xl-4 col-lg-4 col-md-6 col-sm-6 col-12 mb-3">
                        <label for="username">{% trans %}Apellidos{% endtrans %}</label>
                        {{ form_widget(form.usuApellidos,{'id':'usuApellidos','attr':{'class':'form-control form-control-sm'}}) }}
                        <div class="valid-feedback">
                            {% trans %}válido{% endtrans %}
                        </div>
                        <div class="invalid-feedback">
                            {% trans %}inválido!{% endtrans %}
                        </div>
                    </div>
                </div>
                <div class="row align-items-top justify-content-center">
                    <div class="text-left col-xl-4 col-lg-4 col-md-6 col-sm-6 col-12 mb-3">
                        <label for="username">{% trans %}Perfiles{% endtrans %}</label>
                        {% if app.user.roles[0] == 'SUPER_ADMINISTRADOR' %}
                            <div class="form-control custom-control">
                                <div class="custom-control custom-switch">
                                    <input type="radio" class="custom-control-input" id="SUPER_ADMINISTRADOR" name="perfil[]" value="SUPER_ADMINISTRADOR">
                                    <label id="lSUPER_ADMINISTRADOR" class="label custom-control-label" for="SUPER_ADMINISTRADOR">SUPER_ADMINISTRADOR</label>
                                </div>
                            </div>
                        {% endif %}
                        <div class="form-control custom-control">
                            <div class="custom-control custom-switch">
                                <input type="radio" class="custom-control-input" id="ADMINISTRADOR" name="perfil[]" value="ADMINISTRADOR" >
                                <label id="lADMINISTRADOR" class="label custom-control-label" for="ADMINISTRADOR">ADMINISTRADOR</label>
                            </div>
                        </div>
                        <div class="form-control custom-control">
                            <div class="custom-control custom-switch">
                                <input type="radio" class="custom-control-input" id="GENERADOR" name="perfil[]" value="GENERADOR" >
                                <label id="lGENERADOR" class="label custom-control-label" for="GENERADOR">GENERADOR SERIALES</label>
                            </div>
                        </div>
                        <div class="form-control custom-control">
                            <div class="custom-control custom-switch">
                                <input type="radio" class="custom-control-input" id="RECEPCION" name="perfil[]" value="RECEPCION" >
                                <label id="lRECEPCION" class="label custom-control-label" for="RECEPCION">RECEPCION DE PRODUCTO</label>
                            </div>
                        </div>
                        <div class="form-control custom-control">
                            <div class="custom-control custom-switch">
                                <input type="radio" class="custom-control-input" id="DISTRIBUCION" name="perfil[]" value="DISTRIBUCION" >
                                <label id="lDISTRIBUCION" class="label custom-control-label" for="DISTRIBUCION">DISTRIBUCION DE PRODUCTO</label>
                            </div>
                        </div>
                        <div class="form-control custom-control">
                            <div class="custom-control custom-switch">
                                <input type="radio" class="custom-control-input" id="DISTRIBUCION_DESPACHO" name="perfil[]" value="DISTRIBUCION_DESPACHO" >
                                <label id="lDISTRIBUCION_DESPACHO" class="label custom-control-label" for="DISTRIBUCION_DESPACHO">DISTRIBUCION Y DESPACHO DE PRODUCTO</label>
                            </div>
                        </div>
                        <div class="form-control custom-control">
                            <div class="custom-control custom-switch">
                                <input type="radio" class="custom-control-input" id="INGRESO_PRODUCTO" name="perfil[]" value="INGRESO_PRODUCTO" >
                                <label id="lINGRESO_PRODUCTO" class="label custom-control-label" for="INGRESO_PRODUCTO">INGRESO DE PRODUCTO</label>
                            </div>
                        </div>
                        <div class="form-control custom-control">
                            <div class="custom-control custom-switch">
                                <input type="radio" class="custom-control-input" id="OPERADOR" name="perfil[]" value="OPERADOR" checked="checked">
                                <label id="lOPERADOR" class="label custom-control-label text-primary" for="OPERADOR">OPERADOR</label>
                            </div>
                        </div>
                        <div class="form-control custom-control">
                            <div class="custom-control custom-switch">
                                <input type="radio" class="custom-control-input" id="DISTRIBUIDOR" name="perfil[]" value="DISTRIBUIDOR" >
                                <label id="lDISTRIBUIDOR" class="label custom-control-label" for="DISTRIBUIDOR">DISTRIBUIDOR</label>
                            </div>
                        </div>
                        <div class="form-control custom-control">
                            <div class="custom-control custom-switch">
                                <input type="radio" class="custom-control-input" id="REPROCESOS" name="perfil[]" value="REPROCESOS" >
                                <label id="lREPROCESOS" class="label custom-control-label" for="REPROCESOS">REPROCESOS</label>
                            </div>
                        </div>
                        <div class="valid-feedback">
                            {% trans %}válido{% endtrans %}
                        </div>
                        <div class="invalid-feedback">
                            {% trans %}inválido!{% endtrans %}
                        </div>
                    </div>
                    <div class="text-left col-xl-4 col-lg-4 col-md-6 col-sm-6 col-12 mb-3">
                        <div id="distribuidor" style="display: none">
                            <label for="distribuidores">{% trans %}Distribuidores{% endtrans %}</label>
                            {{ form_widget(form.distribuidores,{'id':'distribuidores','attr':{'class':''}}) }}
                        </div>
                    </div>
                </div>
                <div class="row align-items-center justify-content-center">
                    <div class="text-left col-xl-4 col-lg-4 col-md-6 col-sm-6 col-12 mb-3">
                        <label for="username">{% trans %}Estado{% endtrans %}</label>
                        <div class="form-control custom-control">
                            <div class="custom-control custom-switch">
                                {{ form_widget(form.enabled,{'id':'enabled','attr':{'class':'custom-control-input','checked':'checked'}}) }}
                                <label id="labEstado" class="custom-control-label text-primary" for="enabled">{% trans %}Usuario Activo{% endtrans %}</label>
                            </div>
                        </div>
                    </div>
                    <div class="text-left col-xl-4 col-lg-4 col-md-6 col-sm-6 col-12 mb-3">
                    </div>
                </div>
                <div class="row align-items-center justify-content-center">
                    <div class="text-left col-xl-4 col-lg-4 col-md-6 col-sm-6 col-12 mb-3">
                        {{ form_widget(form.password,{'id':'password'}) }}
                        <div class="valid-feedback">
                            {% trans %}válido{% endtrans %}
                        </div>
                        <div class="invalid-feedback">
                            {% trans %}inválido!{% endtrans %}
                        </div>
                    </div>
                </div>
                <br>
                <div class="row align-items-center justify-content-center mt-2">
                    <div class="col-12 smallText text-center">
                        <button type="submit" class="btn btn-danger">
                            <i class="far fa-save"></i> Guardar
                        </button>
                        <a href="{{ path('users_index') }}">
                            <button type="button" class="btn btn-warning">
                                <i class="fas fa-undo-alt"></i> Volver
                            </button>
                        </a>
                    </div>
                </div>
                {{ form_end(form)}}
            </div>

    </div>

</main>
    <script>
        var usuarios = JSON.parse('{{ usuarios|json_encode|raw }}');

        $(document).ready(function(){
            $("#distribuidores").find('option').get(0).remove();
            $("#distribuidores").jqxDropDownList({ width: '100%', height: 35, theme: '{{ theme }}', filterable:true, filterPlaceHolder: 'Buscar...', filterHeight:40});

            $("#enabled").click(function(){
                if(this.checked == true){
                   $("#labEstado").addClass('text-primary');
                   $("#labEstado").empty();
                   $("#labEstado").append('{% trans %}Usuario Activo{% endtrans %}');
                }else{
                    $("#labEstado").removeClass('text-primary');
                    $("#labEstado").empty();
                    $("#labEstado").append('{% trans %}Usuario Inactivo{% endtrans %}');
                }
            });
            $("input:radio").click(function(){
                $(".label").removeClass('text-primary');
                $("#l"+$(this).val()).addClass('text-primary');

                if($(this).val() == 'ADMINISTRADOR') {
                    if (this.checked == true) {
                        $("#distribuidores").val('');
                        $("#distribuidor").hide();
                    }
                }
                if($(this).val() == 'OPERADOR') {
                    if (this.checked == true) {
                        $("#distribuidores").val('');
                        $("#distribuidor").hide();
                    }
                }
                if($(this).val() == 'DISTRIBUIDOR') {
                    if (this.checked == true) {
                        $("#distribuidor").show();
                    }
                }
            });

        });
        // VALIDACION
        (function() {
            'use strict';
            window.addEventListener('load', function() {
                var forms = document.getElementsByClassName('needs-validation');
                var validation = Array.prototype.filter.call(forms, function(form) {
                    form.addEventListener('submit', function(event) {
                        if (form.checkValidity() === false) {
                            event.preventDefault();
                            event.stopPropagation();
                        }else{
                            usuarios.forEach(function(element) {
                                if(element.username == $("#username").val()){
                                    $("#username").val('');
                                    $("#lusername").empty();
                                    $("#lusername").append("{% trans %}Nombre de usuario no disponible!{% endtrans %}");
                                    $("#username").focus();
                                    console.log("3");
                                    event.preventDefault();
                                    event.stopPropagation();
                                }
                                if(element.email == $("#email").val()){
                                    $("#email").val('');
                                    $("#lemail").empty();
                                    $("#lemail").append("{% trans %}Correo de usuario no disponible!{% endtrans %}");
                                    $("#email").focus();
                                    console.log("4");
                                    event.preventDefault();
                                    event.stopPropagation();
                                }
                            });

                        }
                        form.classList.add('was-validated');
                    }, false);
                });
            }, false);
        })();
    </script>
{% endblock %}