@extends('layouts.app')

@section('css')
<link href="https://cdn.jsdelivr.net/npm/select2@4.0.12/dist/css/select2.min.css" rel="stylesheet" />
<link rel="stylesheet" href="{{asset('css')}}/bootstrap-material-datetimepicker.css" />
<style>
    .input-group-text {
        margin-right: 10px;
    }
</style>
@endsection

@section('content')
<div>
    <ol class="breadcrumb">
        <li class="breadcrumb-item active class_select"><a href="{{ URL('/home') }}">Inicio</a></li>
        <li class="breadcrumb-item">Administrativos</li>
        <li class="breadcrumb-item class_select"> <a href="{!! route('administrativo.users') !!}">Lista de usuarios</a></li>
        <li class="breadcrumb-item">Crear usuario</li>
    </ol>
</div>
<div class="row justify-content-between">
    <div class="col-12 col-xl-6">
        <h1 class="page-title">Crea un nuevo <span class="fw-semi-bold">usuario</span></h1>
    </div>
    <div class="col-12 col-xl-6 text-right">
        <a class="btnInfo btn3" href="{!! route('administrativo.users') !!}">Regresar</a>
    </div>

</div>

<section class="widget">
    <header class="header-border">
        <h6>
            Llena todos los campos necesarios para generar un nuevo usuario
        </h6>
        @include('adminlte-templates::common.errors')
    </header>
    <div class="widget-body">
        {!! Form::open(['route' => 'users.store','class' => 'form-horizontal','files' => true]) !!}

        @include('users.fields')

        {!! Form::close() !!}
    </div>
</section>
@endsection

@section('scripts')
<script src="{{asset('template')}}/bower_components/jasny-bootstrap/js/fileinput.js"></script>
<script src="{{asset('template')}}/bower_components/jasny-bootstrap/js/inputmask.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.0.12/dist/js/select2.min.js"></script>
<script src="{!! asset('template') !!}/bower_components/bootstrap-select/dist/js/bootstrap-select.min.js"></script>
<script type="text/javascript" src="https://momentjs.com/downloads/moment-with-locales.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/numeral.js/2.0.6/numeral.min.js"></script>

<script type="text/javascript" src="{{asset('js')}}/bootstrap-material-datetimepicker.js"></script>
<script src="{!! asset('js') !!}/validaciones.js"></script>
<script src="{!! asset('js') !!}/sepomex_implementacion.js"></script>

<script>
    //Variables globales
    var correo_existe = false;
    var url = '{!! asset("/") !!}';
    var url_base = '{!! url("/") !!}';

    $(document).ready(function() {
        $('.js-example-basic-single').select2();
        $("#fecha_nacimiento").inputmask({
            mask: "9999-99-99"
        });
        $("#telefono").inputmask({
            mask: "99-99-99-99-99"
        });
        $("#telefono_casa").inputmask({
            mask: "99-99-99-99-99"
        });

        $('#cambio_contraseña').on('click', function() {
            $('#user_id').val($(this).attr('data-id'));
        });

        $('#fecha_nacimiento').bootstrapMaterialDatePicker({
            lang: 'es',
            weekStart: 1,
            cancelText: 'Cancelar',
            time: false
        });

        if ($('.class_input').val() != ' ') {
            $('.class_input').parent().find('.label_class').addClass('active2');
        }

        $("#guardar_contraseña").submit(function(event) {

            if ($('#cambio_password').val() != $('#password').val()) {
                event.preventDefault();
                Swal.fire({
                    position: 'top-middle',
                    icon: 'error',
                    title: 'La contraseña deben ser iguales',
                    showConfirmButton: true,
                })
            }

        });

        $('#email').on('focusout', function() {

            if (typeof data_local == "undefined" || data_local.length == 0) {
                console.log('entramos validación');
                if (validar_email('#email', '#email_mensaje')) {
                    validarCorreo('#email', '#email_mensaje');
                }
            }
        });

        $('#cambio_password').keyup(function() {
            console.log($(this).lenght);

            if ($(this).val() == "") {
                $('#cambio_contraseña').removeClass('btn4 btnWarning');
                $('#cambio_contraseña').addClass('btn5 btnImage');
                $('#cambio_contraseña').attr('data-original-title', 'Llena el campo contraseña, para poder actualizar');
                $('#cambio_contraseña').click(function() {
                    if ($('#cambio_password').val() == "") {
                        $('#exampleModal').modal('hide');
                    }
                });
            } else {
                $('#cambio_contraseña').click(function() {
                    if ($('#cambio_password').val() != "") {
                        $('#exampleModal').modal('show');
                    }
                });
                $('#cambio_contraseña').addClass('btn4 btnWarning');
                $('#cambio_contraseña').removeClass('btn5 btnImage');
                $('#cambio_contraseña').removeAttr('data-original-title');
            }
        });

        $('#email').on('focusout', function() {

            if (typeof data_local == "undefined" || data_local.length == 0) {
                console.log('entramos validación');
                if (validar_email('#email', '#email_mensaje')) {
                    validarCorreo('#email', '#email_mensaje');
                }
            }
        });

    }); // fin document

    function validarCorreo(correo, mensaje) {
        var correo = $(correo).val();
        var url = url_base + '/api/usuarios/val_correo/' + correo;

        $.get(url, '').done(function(data) {
            console.log(data);

            if (data.data != 0) {
                console.log('muestra');
                $(mensaje + ' span').html('El correo ya existe. Por favor, ingresa otro correo.');
                $(mensaje).show();
                correo_existe = true;
            } else {
                console.log('oculta');
                $(mensaje).hide();
                correo_existe = false;
            }
        });
    }

    function aplicar_validaciones(event) {
        var validacion = true;

        if (!validar_texto('#email', '#email_mensaje',3,50)) {
            validacion = false;
        }

        if (correo_existe) { //correo existe
            $('#email_mensaje span').html('El correo ya existe. Por favor, ingresa otro correo.');
            $('#email_mensaje').show();

            validacion = false;
        }

        if (validacion) {
            event.target.submit();
        }
    }
</script>
@endsection