@extends('layouts.app')

@section('css')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.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" /> --}}
@endsection

@section('content')
<ol class="breadcrumb">
    <li class="breadcrumb-item active class_select"><a href="{{ URL('/home') }}">Inicio</a></li>
    <li class="breadcrumb-item class_select"><a href=" {!! URL::previous() !!}">Validadores</a></li>
    <li class="breadcrumb-item active">Nuevo validador</li>
</ol>
<div class="row justify-content-between">
    <div class="col-12 col-xl-8" style="padding:0 0 0 20px">
        <h1 class="page-title">Crea un nuevo <span class="fw-semi-bold">validador</span></h1>
    </div>
    <div class="col-12 col-xl-4 text-right">
        <a class="btnInfo btn3" href="{!! URL::previous() !!}">Regresar</a>
    </div>
</div>
<section class="widget">
    <header class="header-border">
        <h6>
            Llena todos los campos necesarios para generar un nuevo validador
        </h6>
    </header>
    @include('adminlte-templates::common.errors')
    <div class="widget-body">
        {!! Form::open(['route' => 'validadors.store', 'class' => 'form-horizontal','files' => true]) !!}

        @include('validadors.fields')

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

@section('scripts')
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"> </script>

<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="{!! asset('template') !!}/bower_components/bootstrap-select/dist/js/bootstrap-select.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.0.12/dist/js/select2.min.js"></script>

<script src="{!! asset('js') !!}/validaciones.js"></script>


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

    $(window).load(function() {
        if($('.class_input').val() == ' '){
            $('.class_input').parent().find('.label_class').addClass('active2');
        }
    });
    $('.class_input').on('focusin', function() {
        $(this).parent().find('.label_class').addClass('active2');
    });

    $('.class_input').on('focusout', function() {
        if (!this.value) {
            $(this).parent().find('.label_class').removeClass('active2');
        }
    });

    $(document).ready(function(){

        $("#fecha_nacimiento").inputmask({mask: "9999-99-99"});
        $("#telefono").inputmask({mask: "99-99-99-99-99"});
        $("#telefono_casa").inputmask({mask: "99-99-99-99-99"});


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

        $('#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');
                }
            }
        });

        $('#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');
                }
            }
        });

        $("form").submit(function(e) {
            e.preventDefault();
            aplicar_validaciones(e);
        });

        $('.date_normal').datetimepicker({
                    format: 'YYYY-MM-DD',
                    useCurrent: true,
                    icons: {
                        up: "icon-arrow-up-circle icons font-2xl",
                        down: "icon-arrow-down-circle icons font-2xl"
                    },
                    sideBySide: true
                });

    });// fin docuement



    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_minimo('#name','#name-mensaje', 3)){
            validacion=false;
        }

        if(!validar_texto_minimo('#a_paterno', '#a_paterno-mensaje',3)){
            validacion=false;
        }

        if(!validar_texto_minimo('#a_materno', '#a_materno-mensaje')){
            validacion=false;
        }

        if (!validar_email('#email', '#email_mensaje')) {
            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 (!validar_numero('#telefono', '#telefono-mensaje')){
            validacion=false;
        }

        if(!validar_fecha('#start', '#start-mensaje')){
            validacion=false;
        }

        if(!validar_texto_minimo('#codigo_validador', '#codigo_validador-mensaje', 3)){
            validacion=false;
        }

        if (!validar_password1('#password', '#password-mensaje')){
            validacion=false;
        }

        if (validacion) {
            event.target.submit();
        }
    }



</script>
@endsection