@extends('layouts.master-horizontal')
@section('title') @lang('Portal Regional de Notificación en línea de Sospecha de Reacciones Adversas a Medicamentos de uso humano') @endsection

@section('css')
    <link href="{{ URL::asset('assets/libs/jquery-ui/jquery-ui.min.css')}}" type="text/css" />
    <link href="{{ URL::asset('assets/css/bootstrap.min.css')}}" id="bootstrap-style" rel="stylesheet" type="text/css" />
	<link href="{{ URL::asset('assets/css/app.min.css')}}" id="app-style" rel="stylesheet" type="text/css" />
    <link href="{{ URL::asset('assets/libs/twitter-bootstrap-wizard/twitter-bootstrap-wizard.min.css')}}" rel="stylesheet" type="text/css" />


@endsection

@section('content')
@component('common-components.breadcrumb')
    @slot('pagetitle') Gestion Usuarios @endslot
    @slot('title') Datos del usuario @endslot
@endcomponent
<div class="row">
    <div class="col-lg-12">
        <div class="card">
            <div class="card-body">
                <!--fin botones flotantes --> 
                <h4 class="card-title mb-4">Menu principal / Datos del usuario</h4>
                <!-- FORMULARIO 1 ------------------------------------------------->
                <div class="tab-pane" id="progress-seller-details">
                    <h5>Datos usuario</h5>
                    <hr>
                    <h5></h5>
                    <form class="custom-validation" id="formPaciente"  method="post" action="#" data-parsley-validate>
                        <div class="row">
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label for="progresspill-firstname-input">Código<span class="text-danger">(*)<span></label>
                                    <input type="text" class="form-control parsley-error" id="codigo" name="codigo" data-parsley-pattern="^[a-zA-Z ]+$"  data-parsley-trigger="keyup" required>
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label for="progresspill-lastname-input">Nombre<span class="text-danger">(*)</span></label>
                                    <input type="text" class="form-control parsley-error" id="nombre" name="nombre" data-parsley-pattern="^[a-zA-Z ]+$"  data-parsley-trigger="keyup" required>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label for="progresspill-phoneno-input">Apellidos<span class="text-danger">(*)</span></label>
                                    <input type="text" class="form-control parsley-error" id="apellido" name="apellido" data-parsley-pattern="^[a-zA-Z ]+$"  data-parsley-trigger="keyup" required>
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label for="progresspill-phoneno-input">Teléfono</label>
                                    <input type="text" class="form-control parsley-error" id="telefono" name="telefono" data-parsley-pattern="^[0-9 ]+$"  data-parsley-trigger="keyup">
                                </div>
                            </div>
                        </div>
                        <div class="row">        
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label for="progresspill-phoneno-input">Email<span class="text-danger">(*)</span></label>
                                    <input type="email" class="form-control parsley-error" id="email" name="email" data-parsley-pattern="^[a-zA-Z ]+$"  data-parsley-trigger="keyup" required>
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label for="progresspill-phoneno-input">Confimar email<span class="text-danger">(*)</span></label>
                                    <input type="text" class="form-control parsley-error" id="telefono" name="telefono" data-parsley-pattern="^[a-zA-Z ]+$"  data-parsley-trigger="keyup">
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-4">
                                <div class="form-group">
                                        <label for="progresspill-firstname-input">País</label>
                                        <select class="form-control" name="pais" id="pais" required>
                                            <option value="" >Seleccione</option>
                                        </select>
                                </div>                         
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <button type="submit" class="btn btn-primary w-md" id="guardar">Guardar Datos</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- end row -->

@endsection
@section('script')
    <script src="{{ URL::asset('assets/libs/twitter-bootstrap-wizard/twitter-bootstrap-wizard.min.js')}}"></script>
    <script src="{{ URL::asset('assets/js/pages/form-wizard.init.js')}}"></script>
    <script src="{{ URL::asset('assets/libs/jquery-ui/jquery-ui.min.js')}}"></script>
    <script>

        get_region();
        uncheck();
        //llenando el select de departamento/provincia dependiento el pais seleccionado
        function get_region(id_pais=0){
            var id_pais = $('#pais').val(); 
            var ruta = "{{ url('pais/municipioselect/get/') }}/"+id_pais;
    
            //extraer por ajax en ruta api
            
            $.get(ruta,function(response){
                var new_html = '<option value=0>-- Seleccionar --</option>';
                var id_pais = $('#pais').val(); 
                //window.alert(id_pais);
                for (var i = 0; i < response.length; i++) {
                    if(response[i].REGI_ID_PAIS == id_pais ){
                    new_html += '<option value="'+response[i].REGI_COD_REGION+'">'+response[i].REGI_DS_REGION	+'</option>'
                    }else{
                    new_html += '<option value="'+response[i].REGI_COD_REGION+'">'+response[i].REGI_DS_REGION	+'</option>'
                    }
                }
                
        
                $('#departamento').empty();
                $('#departamento').html(new_html);
                var new_html2 = '<option value="">-- Seleccionar --</option>';
                
            });
        }


        //funcion para cambiar el tipo de datos solicitados en grupo de edad
        function toggle(elemento) {
            
            if(elemento.value=="grupoEdad") {
                document.getElementById("div1").style.display = "block";
                document.getElementById("div2").style.display = "none";
                document.getElementById("div3").style.display = "none";

            }else{
                document.getElementById("div1").style.display = "none";
                document.getElementById("div2").style.display = "block";
                document.getElementById("div3").style.display = "block";
            }
        }
            //


        //validando que la fecha fin no sea menor que la fecha inico
        $("#fechaFin").change(function(event){
            var fechainicial = document.getElementById("fechaInicio").value;
            var fechafinal = document.getElementById("fechaFin").value;

            if(Date.parse(fechafinal) < Date.parse(fechainicial)) {
                $("#error_fecha").text("La Fecha fin debe ser menor a la Fecha inicio");
            }
            else{
                $("#error_fecha").text("");
            }
        });

        $("#fechaInicio").change(function(event){
            var fechainicial = document.getElementById("fechaInicio").value;
            var fechafinal = document.getElementById("fechaFin").value;

            if(Date.parse(fechafinal) < Date.parse(fechainicial)) {
                $("#error_fecha2").text("La Fecha fin debe ser menor a la Fecha inicio");
            }
            else{
                $("#error_fecha2").text("");
            }
        });


        //codigo para autocomplementar texto ingresado en campo de motivo de prescripcion y reacción adversa
        $('#prescripcion').autocomplete({
            source: function(request, response){
                $.ajax({
                    url:"{{route('getEnfermedades')}}",
                    type: 'GET',
                    dataType:'json',
                    data:{
                        term:request.term
                    },
                    success:function(data){

                        response(data)
                    }

                });

      
            }

        });
        $('#prescripcion2').autocomplete({
            source: function(request, response){
                $.ajax({
                    url:"{{route('getEnfermedades')}}",
                    type: 'GET',
                    dataType:'json',
                    data:{
                        term:request.term
                    },
                    success:function(data){

                        response(data)
                    }

                });

      
            }

        });
        $('#reaccion').autocomplete({
            source: function(request, response){
                $.ajax({
                    url:"{{route('getEnfermedades')}}",
                    type: 'GET',
                    dataType:'json',
                    data:{
                        term:request.term
                    },
                    success:function(data){

                        response(data)
                    }

                });

      
            }

        });
        // fin de busquedas autocompletables 
        function uncheck(){
            var checkbox1 = document.getElementById("consentimiento");
           
            checkbox1.onclick = function(){ 
                if(checkbox1.checked != false){ 
                    document.getElementById("datosMedico").style.display = "block";
                }else{
                    document.getElementById("datosMedico").style.display = "none";
                }
            } 
           
        }


    // recargar codigo de captcha
    $('#reload').click(function () {
        
        $.ajax({
        type: 'GET',
        url: 'reload-captcha',
            success: function (data) {
                $(".captcha span").html(data.captcha);
            }
        });
    });
    </script>
@endsection