{% extends 'base.html.twig' %}
{% block title %}{% trans %}Editar 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="fa-regular fa-pen-to-square text-danger"></i><span class="text-danger">  Editar Usuario</span>
            </div>
        </div>
        <hr>
        {{ form_start(form, {'attr': {'id': 'forEdit','class':"needs-validation",'novalidate':''}}) }}
        <div class="row align-items-center justify-content-center">
            <div class="text-left 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-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" >
                        <label id="lOPERADOR" class="label custom-control-label" 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">
                    <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>

        <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>
</main>
    <script>
        var usuarios = JSON.parse('{{ usuarios|json_encode|raw }}');
        var user = JSON.parse('{{ user|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();
                    }
                }

            });
            $("#"+'{{ user.roles[0] }}').attr('checked', 'checked');
            $("#"+'{{ user.roles[0] }}').click();
        });
        // 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();
                                    event.preventDefault();
                                    event.stopPropagation();
                                }
                                if(element.email == $("#email").val()){
                                    $("#email").val('');
                                    $("#lemail").empty();
                                    $("#lemail").append("{% trans %}Correo de usuario no disponible!{% endtrans %}");
                                    $("#email").focus();
                                    event.preventDefault();
                                    event.stopPropagation();
                                }
                            });

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