@extends('layouts.app')

@push('css')
<link href="{{ asset('js/select2/select2.min.css') }}" rel="stylesheet" />
@endpush

@section('content')
    <div class="container ml-0 mr-0 pl-0 pr-0 row">
        <div class="animate__animated animate__fadeInUp container tarjetas tarjeta-gris p-3 p-sm-2 p-md-3 p-lg-5 p-xl-5 col-12">
            <div class="row row-bottom">
               <div class="col-12 col-sm-12 col-md-6 col-lg-6 col-xl-6">
                   <h3 class="texto-obscuro">Creación de usuarios</h3>
                   <nav class="breadcrumb"><a class="breadcrumb-item" href="{{ url('users') }}">Usuarios</a><span class="breadcrumb-item active">Creación de usuarios</span></nav>
               </div>
           </div>
           <div class="row">
                {!! Form::open(['route' => 'users.store','class' => 'formulario-principal col-12','files' => true]) !!}
                    <div class="empty-space-30"></div>
                    @include('users.fields')
                    <div class="empty-space-30"></div>
                {!! Form::close() !!}
           </div>
           <div class="empty-space-50"></div>
           <div class="row botonera-inferior">
                <div class="col-12 p-0 m-0 text-right botonera-formulario">
                    <a href="{{ url('users') }}" class="btn btn-secundario text-white width-250">Cancelar <span><-</span></a>
                    <button type="button" id="guardar-cambios" class="btn btn-principal width-250">Guardar cambios <span>-></span></button>
                </div>
            </div>
           <div class="empty-space-50"></div>
       </div>
    </div>
@endsection

@push('scripts')
    <script src="{{ asset('js/select2/select2.min.js') }}"></script>
    <script src="{{ asset('js/validaciones/validaciones.js') }}"></script>
    <script>
        // SUBIDA DE IMAGEN DE PERFIL
        var validador_imagen = false;
        var texto_imagen = '';
        $('#output_foto_perfil').css('background-image','');
        // if (window.FileList && window.File && window.FileReader) {
        //     validador_imagen = false;
        //     document.getElementById('foto_perfil').addEventListener('change', event => {
        //     // output.css = '';
        //     $(".span-file").show();
        //     $('#output_foto_perfil').css('background-image','');
        //     $("#status_foto_perfil").text('');
        //     $("#status_foto_perfil").hide();
        //     const file = event.target.files[0];
        //     if (!file.type) {
        //         console.log(file);
        //         $("#status_foto_perfil").text('Error: el archivo '+file.name+' no es compatible con este navegador, intente con un archivo con extensión JPG o PNG.');
        //         $("#status_foto_perfil").show();
        //         texto_imagen = '.';
        //         return;
        //     }
        //     if (!file.type.match('image.*')) {
        //         $("#status_foto_perfil").text('Error: el archivo seleccionado no parece ser una imagen, intente con un archivo con extensión JPG o PNG.');
        //         $("#status_foto_perfil").show();
        //         texto_imagen = '.';
        //         return;
        //     }
        //     const reader = new FileReader();
        //     reader.addEventListener('load', event => {
        //         $(".span-file").hide();
        //         $('#output_foto_perfil').css('background-image','url("'+event.target.result+'")');
        //         validador_imagen = true;
        //         texto_imagen = '';
        //     });
        //     reader.readAsDataURL(file);
        //     }); 
        // }
        $("#btn-foto-perfil").click(function(){
            $("#foto_perfil").click();
        });

        $("#guardar-cambios").click(function(){
            aplicar_validaciones();
            // $(".formulario-principal").submit();
        });

        $('.js-example-basic-single').select2({});


        $("#name").focusout(function(){
            if (validar_texto('#name', '#name_mensaje',3,50)) {
                $(this).removeClass('is-invalid');
            }else{
                $(this).addClass('is-invalid');
            }
        });

        $("#a_paterno").focusout(function(){
            if (validar_texto('#a_paterno', '#a_paterno_mensaje',3,50)) {
                $(this).removeClass('is-invalid');
            }else{
                $(this).addClass('is-invalid');
            }
        });

        $("#a_materno").focusout(function(){
            if (validar_texto('#a_materno', '#a_materno_mensaje',3,50)) {
                $(this).removeClass('is-invalid');
            }else{
                $(this).addClass('is-invalid');
            }
        });

        $('#perfil').on('select2:select', function (e) {
            var data = e.params.data;
            if(data.id == 0){
                $("#perfil_mensaje").text('Debes de seleccionar una opción valida.');
                $("#perfil_mensaje").slideDown();
                $(this).addClass('is-invalid');
            }else{
                $("#perfil_mensaje").slideUp();
                $("#perfil_mensaje").text('');
                $(this).removeClass('is-invalid');   
            }
        });

        $("#telefono").focusout(function(){
            if (validar_texto('#telefono', '#telefono_mensaje',10,12)) {
                $(this).removeClass('is-invalid');
            }else{
                $(this).addClass('is-invalid');
            }
        });

        $("#email").focusout(function(){
            if (validar_email('#email', '#email_mensaje')) {
                $(this).removeClass('is-invalid');
            }else{
                $(this).addClass('is-invalid');
            }
        });

        $("#password").focusout(function(){
            if (validar_password('#password','#password_confirmation','#password_confirmation_mensaje')) {
                $("#password").removeClass('is-invalid');
                $("#password_confirmation").removeClass('is-invalid');
                
            }else{
                $("#password").addClass('is-invalid');
                $("#password_confirmation").addClass('is-invalid');
            }
        });

        $("#password_confirmation").focusout(function(){
            if (validar_password('#password','#password_confirmation','#password_confirmation_mensaje')) {
                $("#password_confirmation").removeClass('is-invalid');
                $("#password").removeClass('is-invalid');
            }else{
                $("#password_confirmation").addClass('is-invalid');
                $("#password").addClass('is-invalid');
            }
        });
        
        
        
        // seleccionar_option

        function aplicar_validaciones() {
            
            var validacion = true;

            if (validar_texto('#name', '#name_mensaje',3,50)) {
                $("#name").removeClass('is-invalid');
            }else{
                validacion = false;
                $("#name").addClass('is-invalid');
            }

            
            if (validar_texto('#a_paterno', '#a_paterno_mensaje',3,50)) {
                $("#a_paterno").removeClass('is-invalid');
            }else{
                validacion = false;
                $("#a_paterno").addClass('is-invalid');
            }
        

        
            if (validar_texto('#a_materno', '#a_materno_mensaje',3,50)) {
                $("#a_materno").removeClass('is-invalid');
            }else{
                validacion = false;
                $("#a_materno").addClass('is-invalid');
            }

            if($('#perfil').select2('data')[0].id == 0)
            {
                $("#perfil_mensaje").text('Debes de seleccionar una opción valida.');
                $("#perfil_mensaje").slideDown();
                validacion = false;
                $("#perfil").addClass('is-invalid');
                $(".select2-selection--single").css('border-bottom','1px solid #f86c6b !important');
            }else{
                $("#perfil_mensaje").slideUp();
                $("#perfil_mensaje").text('');
                $("#perfil").removeClass('is-invalid');
                $(".select2-selection--single").css('border-bottom','1px solid #000 !important');
            }

            if (validar_texto('#telefono', '#telefono_mensaje',10,12)) {
                $("#telefono").removeClass('is-invalid');
            }else{
                validacion = false;
                $("#telefono").addClass('is-invalid');
            }

            
            if (validar_email('#email', '#email_mensaje')) {
                $("#email").removeClass('is-invalid');
                console.log($(this));
            }else{
                validacion = false;
                $("#email").addClass('is-invalid');
                console.log($(this));
            }

            
            if (validar_texto('#password', '#password_mensaje',8,20)) {
                $("#password").removeClass('is-invalid');
                if (validar_password('#password','#password_confirmation','#password_mensaje')) {
                    $("#password").removeClass('is-invalid');
                    $("#password_confirmation").removeClass('is-invalid');
                    $("#password").removeClass('is-invalid');
                    
                }else{
                    validacion = false;
                    $("#password").addClass('is-invalid');
                    $("#password").addClass('is-invalid');
                    $("#password_confirmation").addClass('is-invalid');
                }
            }else{
                validacion = false;
                $("#password").addClass('is-invalid');
            }

            if (validar_texto('#password_confirmation', '#password_confirmation_mensaje',8,20)) {
                $("#password_confirmation").removeClass('is-invalid');
                if (validar_password('#password','#password_confirmation','#password_confirmation_mensaje')) {
                    $("#password_confirmation").removeClass('is-invalid');
                    $("#password_confirmation").removeClass('is-invalid');
                    $("#password").removeClass('is-invalid');
                    
                }else{
                    validacion = false;
                    $("#password_confirmation").addClass('is-invalid');
                    $("#password").addClass('is-invalid');
                    $("#password_confirmation").addClass('is-invalid');
                }
            }else{
                validacion = false;
                $("#password_confirmation").addClass('is-invalid');
            }

            // if(!validador_imagen)
            // {
            //     $("#status_foto_perfil").show();
            //     if(texto_imagen == '')
            //     {
            //         $("#status_foto_perfil").text('Debes subir una imagen.');
            //     }
            //     validacion = false;
            // }


            if (validacion) {
                $(".formulario-principal").submit();
            }
        }
    </script>
@endpush