@extends('layouts.app', ['activePage' => 'user', 'menuParent' => 'perfil', 'titlePage' => __('Perfil/Configuración de usuario')])

@section('content')
<div class="content">
    <div class="container col-10">
        <div class="row">
            <div class="col-md-6">
                <!-- <div class="card-header card-header-icon card-header-primary">
                        <div class="card-icon">
                            <i class="material-icons">perm_identity</i>
                        </div>
                        <h4 class="card-title">{{ __('Editar perfil') }}
                        </h4>
                    </div> -->
                <div class="card">
                     <div class="card-header card-header-icon card-header-primary">
                        <div class="card-icon">
                            <i class="material-icons">perm_identity</i>
                        </div>
                    </div>
                    <!--<div class="row">
                        <div class="col-md-4">
                            <img class="img-thumbnail" src="{{ auth()->user()->foto }}">
                        </div>
                    </div>-->
                    <div class="card-body">
                        <div class="row">
                            <div class="col-12">
                                <label class="">{{ __('Nombre:') }} <span class="text-danger">*</span></label>
                                <input class="form-control" id="name" type="text" placeholder="{{ __('Nombre') }}" value="{{ old('name', auth()->user()->name) }}" />
                            </div> 
                        </div>
                        <div class="row">
                            
                            <div class="col-12">
                                <label class="">{{ __('Correo:') }}<span class="text-danger">*</span></label>
                                <input class="form-control" id="email" type="email" placeholder="{{ __('Correo') }}" value="{{ old('email', auth()->user()->email) }}" />
                            </div>
                        </div>
                        <button type="submit" class="btn btn-primary float-right" onclick="updatedInfo(1)">{{ __('Actualizar perfil') }}</button>
                        <div class="clearfix"></div>
                    </div>
                </div>
            </div>

            <div class="col-md-6">
                <div class="card">
                    <div class="card-header card-header-icon card-header-primary">
                        <div class="card-icon">
                            <i class="material-icons">lock</i>
                        </div>
                        <h4 class="card-title">{{ __('Cambiar contraseña:') }}</h4>
                    </div>
                    <div class="card-body">
                        <!-- <div class="row">
              <label class="col-sm-3 col-form-label" for="contraActual">{{ __('Contraseña actual') }}</label>
              <div class="col-sm-9">
                <div class="form-group">
                  <input class="form-control" type="text" id="contraActual" placeholder="{{ __('Contraseña actual') }}" />
                </div>
              </div>
            </div> -->
                        <div class="row">
                            <div class="col-sm-12">
                                <label class="" for="NuevaContraseña">{{ __('Nueva contraseña:') }}<span class="text-danger">*</span></label>
                                <input class="form-control" id="NuevaContraseña" type="password" />
                            </div>
                        </div>
                        <div class="row">
                            
                            <div class="col-sm-12">
                                <label class="" for="ConfirmarContraseña">{{ __('Confirmar contraseña:') }}<span class="text-danger">*</span></label>
                                <input class="form-control" id="ConfirmarContraseña" type="password" />
                              
                            </div>
                        </div>
                        <button type="submit" class="btn btn-primary float-right" onclick="updatedInfo(2)">{{ __('Cambiar contraseña') }}</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="modalLoading" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title text-primary">Guardando información</h4>
            </div>
            <div class="modal-body">
                <h5 class="text-center card-description" style="margin-top: -20px;">Se esta guadando tu información, por favor espera.</h5>
            </div>
        </div>
    </div>
</div>
@endsection

@push('js')
<script>
    $(document).ready(function() {
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            }
        });
    });

    function showNotification(icon, from, align, type, text, mensaje) {
        $.notify({
            icon: icon,
            message: "<label class='h5 font-weight-bold'>" + text + "</label> " + mensaje
        }, {
            type: type,
            delay: 2000,
            placement: {
                from: from,
                align: align
            }
        });
    }

    function error() {
        $('#restablecer').prop('disabled', false)
        Swal.fire({
            type: 'error',
            title: 'Contraseña no valida',
            html: '<label class="text-secondary h6" >La contraseña debe de tener:</label></br>' +
                '<label class="text-secondary"><span class="text-danger">1. </span>Deben de ser iguales.</label></br>' +
                '<label class="text-secondary"><span class="text-danger">2. </span>Tener por lo menos una letra.</label></br>' +
                '<label class="text-secondary"><span class="text-danger">3. </span>Tener por lo menos un numero.</label></br>' +
                '<label class="text-secondary"><span class="text-danger">4. </span>Tener por lo menos un caracter especial ( * + - . _ ).</label></br>' +
                '<label class="text-secondary"><span class="text-danger">5. </span>Tener logitud mayor o igual a 8.</label>',
        })
    }

    function updatedInfo(tipo) {

        let name = $('#name').val(),
            email = $('#email').val(),
            NuevaContraseña = $('#NuevaContraseña').val(),
            ConfirmarContraseña = $('#ConfirmarContraseña').val();

        if (tipo === 1) {
            if (name == '' || email == '') {
                showNotification('error', 'top', 'center', 'danger', '¡ERROR!', 'Debes ingresar toda la información de perfil');
                return false;
            }
            $('#loadingSave').modal('show')
            $.ajax({
                    url: "{{ url('perfil/update_info')}}",
                    type: 'POST',
                    dataType: 'json',
                    data: {
                        name: name,
                        email: email
                    },
                })
                .done(function(resp) {
                    setTimeout(() => {
                        showNotification('thumb_up', 'top', 'center', 'success', '¡BIEN!', resp.mensaje)
                    }, 2000);

                })
                .fail(function() {
                    console.log("error");
                    $('#loadingSave').modal('hide')

                })
                .always(function() {
                    setTimeout(() => {
                        $('#loadingSave').modal('hide')
                    }, 2000);

                });
        } else if (tipo === 2) {
            const regex = /^[0-9]*$/;
            var password = $('#NuevaContraseña').val(),
                password_confirmation = $('#ConfirmarContraseña').val(),
                longitud = password.length,
                bandera = false,
                bandera2 = false,
                bandera3 = false;

            for (var i = 0; i <= longitud - 1; i++) {
                if (regex.test(password[i])) {
                    var bandera = true;
                } else {
                    if (password[i] == password[i].toUpperCase()) {
                        var bandera2 = true;
                    }
                }
            }
            if (password.includes('*') || password.includes('+') || password.includes('.') || password.includes('-') || password.includes('_')) {
                var bandera3 = true;
            }
            var a = tiene_letras(password)
            if (a == 0) {
                error()
                return false;
            }
            if (longitud < 8) {
                error()
                return false;
            }
            if (!bandera || !bandera2 || !bandera3) {
                error()
                return false;
            }
            if (password != password_confirmation) {
                error()
                return false;
            }
            $('#loadingSave').modal('show')
            $.ajax({
                    url: "{{ url('perfil/update_pass')}}",
                    type: 'POST',
                    dataType: 'json',
                    data: {
                        NuevaContraseña: NuevaContraseña,
                    },
                })
                .done(function(resp) {
                    setTimeout(() => {
                        showNotification('thumb_up', 'top', 'center', 'success', '¡BIEN!', resp.mensaje)
                    }, 2000);
                })
                .fail(function() {
                    console.log("error");
                })
                .always(function() {
                    console.log("complete");
                    setTimeout(() => {
                        $('#loadingSave').modal('hide')
                    }, 2000);
                });
        }

    }

    function tiene_letras(password) {
        var letras = "abcdefghyjklmnñopqrstuvwxyz";
        password = password.toLowerCase();
        for (i = 0; i < password.length; i++) {
            if (letras.indexOf(password.charAt(i), 0) != -1) {
                return 1;
            }
        }
        return 0;
    }
</script>
@endpush