@extends('layout.authentication')
@section('title', 'Registrar nuevo paciente')

@section('page-style')

<meta name="csrf-token" content="{{ csrf_token() }}">
<link rel="stylesheet" href="{{asset('assets/jquery-ui.css')}}">
<link rel="stylesheet" href="{{asset('assets/plugins/jquery-timepicker/jquery.timepicker.css')}}">  
<link rel="stylesheet" href="{{asset('assets/plugins/bootstrap-select/css/bootstrap-select.css')}}">
<style type="text/css">
    .ui-dialog-titlebar{
        background-color:  #00cfd1;
    }
</style>

@stop

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-7"><br>
            <div class="card"  style="color: #000; ">
                <!-- <div class="card-header">{{ __('Registrar nuevo usuario') }}</div> -->

                <div class="card-body">
                    <form method="POST" action="{{ route('register') }}">
                        @csrf

                        <div class="form-group row">
                            <div class="col-md-12" style="color: #00cfd1; ">
                                <h4 align="center">REGISTRAR NUEVO PACIENTE</h4>
                            </div>
                        </div>

                        <div class="form-group row">
                            <div class="col-md-1"></div>
                            <label for="name" class="col-md-4 col-form-label text-md-left">{{ __('Nombre') }} *</label>

                            <div class="col-md-6">
                                <input id="name" type="text" class="form-control{{ $errors->has('name') ? ' is-invalid' : '' }}" name="name" value="{{ old('name') }}" required autofocus autocomplete="off">

                                @if ($errors->has('name'))
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $errors->first('name') }} *</strong>
                                    </span>
                                @endif
                            </div>
                        </div>

                        <div class="form-group row">
                            <div class="col-md-1"></div>
                            <label for="apaterno" class="col-md-4 col-form-label text-md-left">{{ __('Apellido paterno') }} *</label>

                            <div class="col-md-6">
                                <input id="apaterno" type="text" class="form-control{{ $errors->has('name') ? ' is-invalid' : '' }}" name="apaterno" value="{{ old('apaterno') }}" required autofocus autocomplete="off">

                                
                            </div>
                        </div>

                        <div class="form-group row">
                            <div class="col-md-1"></div>
                            <label for="amaterno" class="col-md-4 col-form-label text-md-left">{{ __('Apellido materno') }} *</label>

                            <div class="col-md-6">
                                <input id="amaterno" type="text" class="form-control{{ $errors->has('name') ? ' is-invalid' : '' }}" name="amaterno" value="{{ old('amaterno') }}" required autofocus autocomplete="off">

                              
                            </div>
                        </div>

                        <div class="form-group row">
                            <div class="col-md-1"></div>
                            <label for="rut" class="col-md-4 col-form-label text-md-left">{{ __('RUT') }} *</label>

                            <div class="col-md-6">
                                <input id="rut" type="text" class="form-control{{ $errors->has('rut') ? ' is-invalid' : '' }}" name="rut"  value="{{ old('rut') }}" required autofocus autocomplete="off">                        
                            </div>
                        </div>

                        <div class="form-group row">
                            <div class="col-md-1"></div>
                            <label for="fnacimiento" class="col-md-4 col-form-label text-md-left">{{ __('Fecha nacimiento') }} *</label>
                            <div class="col-md-6">
                                <input id="fnacimiento" type="text" class="datetimepicker form-control{{ $errors->has('fnacimiento') ? ' is-invalid' : '' }}" name="fnacimiento"  value="{{ old('fnacimiento') }}" required autofocus autocomplete="off">                        
                            </div>
                        </div>

                        <div class="form-group row">
                            <div class="col-md-1"></div>
                            <label for="email" class="col-md-4 col-form-label text-md-left">{{ __('Email') }} *</label>
                            <div class="col-md-6">
                                <input id="email" type="email" class="form-control{{ $errors->has('email') ? ' is-invalid' : '' }}" name="email" value="{{ old('email') }}" required autocomplete="off">                       
                            </div>
                        </div>

                        <div class="form-group row">
                            <div class="col-md-1"></div>
                            <label for="fono" class="col-md-4 col-form-label text-md-left">{{ __('Telefono') }}</label>
                            <div class="col-md-6">
                                <input id="fono" type="fono" class="form-control{{ $errors->has('fono') ? ' is-invalid' : '' }}" name="fono" value="{{ old('fono') }}" autocomplete="off">                       
                            </div>
                        </div>

                        <div class="form-group row">
                            <div class="col-md-1"></div>
                            <label for="password" class="col-md-4 col-form-label text-md-left">{{ __('Contraseña') }} *</label>
                            <div class="col-md-6">
                                <!-- <label style="font-size: 10px;">Minimo 4 caracteres</label> -->
                                <input id="password" type="password" placeholder="Mínimo 6 caracteres" class="form-control{{ $errors->has('password') ? ' is-invalid' : '' }}" name="password" required autocomplete="off">                  
                            </div>
                        </div>

                        <div class="form-group row">
                            <div class="col-md-1"></div>
                            <label for="password-confirm" class="col-md-4 col-form-label text-md-left">{{ __('Confirmar contraseña') }} *</label>
                            <div class="col-md-6">
                                <input id="password_confirmation" type="password" class="form-control" name="password_confirmation" required autocomplete="off">
                            </div>
                        </div>

                        <div class="form-group row" > 
                            <div class="col-sm-5"></div>         
                            <div class="col-sm-7">
                                <label>* Campos obligatorios.</label>
                            </div>
                        </div>

                       

                        <div class="form-group row mb-0">
                            <div class="col-md-4"></div>
                            <div class="col-md-7" align="right">
                                <button type="submit" class="btn btn-primary btn-round" id="btnRegistrar" name="btnRegistrar">
                                    {{ __('Registrar') }}
                                </button>
                                <button type="button" class="btn btn-default btn-round btn-simple" onclick="window.history.back()">Cancelar</button>

                                
                            </div>
                        </div>


                    </form>
                </div>
            </div>
        </div>
    </div>
    <div id="dialog_alerta" title="BRIX" align="center">
        <p id="dialog_texto"></p>
    </div>
</div>



@endsection


@section('page-script')
    <script src="{{asset('js/jquery-3.4.1.min.js')}}"></script>
    <script src="{{asset('assets/jquery-ui.js')}}"></script>
    <script src="{{asset('js/jquery.rut-master/jquery.rut.js')}}"></script>    
    <script src="{{asset('assets/plugins/jquery-timepicker/jquery.timepicker.js')}}"></script>
    <script>

    $(function () {


        $("#dialog_alerta").dialog({ autoOpen: false });

        $("#btnRegistrar").prop('disabled', true);



        $.datepicker.regional['es'] = {
            closeText: 'Cerrar',
            prevText: '< Ant',
            nextText: 'Sig >',
            currentText: 'Hoy',
            monthNames: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
            monthNamesShort: ['Ene','Feb','Mar','Abr', 'May','Jun','Jul','Ago','Sep', 'Oct','Nov','Dic'],
            dayNames: ['Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado'],
            dayNamesShort: ['Dom','Lun','Mar','Mié','Juv','Vie','Sáb'],
            dayNamesMin: ['Do','Lu','Ma','Mi','Ju','Vi','Sá'],
            weekHeader: 'Sm',
            dateFormat: 'dd-mm-yy',
            firstDay: 1,
            isRTL: false,
            showMonthAfterYear: true,
            yearSuffix: ''
        };

        $.datepicker.setDefaults($.datepicker.regional['es']);

        $("input#rut").rut().on('rutInvalido', function(e) {            
            $( "#dialog_texto" ).empty();
            $( "#dialog_texto" ).append("RUT inválido.");
            $( "#dialog_alerta" ).dialog('open');
            $("#rut").val("");
        });

        $('.datetimepicker').datepicker({ 
            //minDate: 0, 
            maxDate: '-1Y', 
            format: 'Y-M-D',
            changeYear: true,
            yearRange : 'c-100:c+80',
            time: false
        });

        $("#fono").blur(function(){
            if($(this).val().length<7){

                $( "#dialog_texto" ).empty();
                $( "#dialog_texto" ).append("El teléfono tiene al menos 7 números.");
                $( "#dialog_alerta" ).dialog('open');
                $(this).val("");
            }
        });

        /*$("#password").keyup(function(){
            var pswd = $(this).val();
            if(pswd.length<4){
                $("#btnRegistrar").prop('disabled', true);
            }else{
                $("#btnRegistrar").prop('disabled', false);
            }
        });*/

        $("#password_confirmation").keyup(function(){
            var pswd = $("#password").val();
            var pswd2 = $(this).val();
            
                if(pswd==pswd2){
                    $("#btnRegistrar").prop('disabled', false);
                }
            
        });

        $("#password").blur(function(){
            if($(this).val().length<6){

                $( "#dialog_texto" ).empty();
                $( "#dialog_texto" ).append("La contraseña debe tener mínimo 6 caracteres.");
                $( "#dialog_alerta" ).dialog('open');
                $("#password").val("");
            }
        });

        $("#rut").blur(function(){
            //alert('verificar si existe el rut');

            var token = $('meta[name="csrf-token"]').attr('content');
            var url='ajax_comprueba_rut_existente';
            var data={"id" :  $(this).val()};
            //console.log(data);

            $.ajax({
                type:'POST',
                url: url,
                data: data,
                headers: {
                    'X-CSRF-TOKEN': token
                },
                success:function(data){
                    //console.log(data);
                    if(data.length>0){
                        $( "#dialog_texto" ).empty();
                        $( "#dialog_texto" ).append("Ya existe un paciente con este Rut.");
                        $( "#dialog_alerta" ).dialog('open');
                        $("#rut").val("");
                    }
                }
            }); 

            if($(this).val()=="0-0"){
                $( "#dialog_texto" ).empty();
                $( "#dialog_texto" ).append("Rut inválido.");
                $( "#dialog_alerta" ).dialog('open');
                $("#rut").val("");
            }  


        });

        $("#fnacimiento").keyup(function(){
            $("#fnacimiento").val("");
        });

        $('#name').keypress(function (e) {
            var tecla = document.all ? tecla = e.keyCode : tecla = e.which;
            return !((tecla > 47 && tecla < 58) || tecla == 46);
        });

        $('#apaterno').keypress(function (e) {
            var tecla = document.all ? tecla = e.keyCode : tecla = e.which;
            return !((tecla > 47 && tecla < 58) || tecla == 46);
        });


        $('#amaterno').keypress(function (e) {
            var tecla = document.all ? tecla = e.keyCode : tecla = e.which;
            return !((tecla > 47 && tecla < 58) || tecla == 46);
        });

 


        $('#fono').on('input', function () { 
            this.value = this.value.replace(/[^0-9]/g,'');
        });

        $("#email").change(function(){
            var regex = /[\w-\.]{1,}@([\w-]{1,}\.)*([\w-]{1,}\.)[\w-]{2,4}/;
            if (regex.test($('#email').val().trim())) {
                //alert('Correo validado');

                var token = $('meta[name="csrf-token"]').attr('content');
                var url='ajax_verifica_email';
                var data={"email" : this.value};

                $.ajax({
                    type:'POST',
                    url: url,
                    data: data,
                    headers: {
                        'X-CSRF-TOKEN': token
                    },
                    success:function(data){
                        if(data==0){
                            $( "#dialog_texto" ).empty();
                            $( "#dialog_texto" ).append("Email ya existe, ingresar otro.");
                            $( "#dialog_alerta" ).dialog('open');
                            $("#email").val("");
                        }
                    }
                });

            } else {
                //alert('La direccón de correo no es válida');
                $( "#dialog_texto" ).empty();
                $( "#dialog_texto" ).append("Email inválido.");
                $( "#dialog_alerta" ).dialog('open');
                $("#email").val("");
            }            
        }); 


    });
    </script>
@stop