@extends('layout.master')
@section('parentPageTitle', 'Especialidad')
@section('title', 'Nueva especialidad')
@section('page-style')
<link rel="stylesheet" href="{{asset('assets/plugins/bootstrap-select/css/bootstrap-select.css')}}">
<link rel="stylesheet" href="{{asset('assets/jquery-ui.css')}}">
@stop
@section('content')

    <div class="row clearfix">
        <!--<div class="col-md-1"></div>
        <div class="col-md-1"></div>
        <div class="col-md-1"></div>
        <div class="col-lg-8 col-md-8 col-sm-8">-->
        <div class="col-md-12 d-flex justify-content-center">
            <div class="card">
                <div class="body">
                    
                    <div class="navbar-header d-flex justify-content-left align-items-left ml-0 p-0" align="left">
                        <big style="color: black;font-size: 25px;"class="">@yield('title')</big>
                    </div>

                    <div class="navbar-header d-flex justify-content-left align-items-left ml-0 p-0" align="left">
                       <p class="" style="color:#FF0000" ><small>* Son campos obligatorios.</small></p>
                    </div>

                    <div class="navbar-header d-flex justify-content-left align-items-left ml-0 p-0" align="left" style="margin-top:-1%;">
                        <p class="" style="color:#FF0000" ><small>* Una vez creada la especialidad no se podra editar ni eliminar.</small></p>
                    </div>

                    </br>

                    <form action="" id="formIngresarEspecialidad" method="post">

                        
                        {{ csrf_field() }}
                        <div class="row clearfix">
                            
                            <div class="col-sm-3">                                
                                <div class="d-flex justify-content-left align-items-left ml-0 p-1">
                                    <label>Especialidad</label>
                                </div>
                            </div>                             
                            <div class="col-sm-3" style="margin-left:-8%;">
                                <div class="form-group">
                                    <select id="especialidad" name="especialidad" class="select">
                                       
                                        <option value="0">Seleccionar especialidad</option>

                                        @foreach ($listaEspecialidad as $especialidad)                                         
                                            <option value="{{ $especialidad->id }}">{{ $especialidad->nombre }}</option>
                                        @endforeach 
                                    </select> 
                                </div>
                            </div>

                            <div class="col-sm-2" id="labelnombreotro" name="labelnombreotro" style="display:none;">                                
                                <div class="d-flex justify-content-left align-items-left ml-0 p-2" align="left">
                                  Nombre *
                              </div>
                            </div>                             
                            <div class="col-sm-4" id="textnombreotro" name="textnombreotro" style="display:none;">
                                <div class="form-group">
                                     <input type="text" id="nombreotro" name="nombreotro" class="form-control" autocomplete="off" style="text-transform:uppercase" maxlength="25">
                                </div>
                            </div>                                 
                        </div>

                        <div class="row clearfix" align="right">          
                            <div class="col-sm-12">
                                <button style="border-color:#18ce0f; color:#18ce0f;" type="button" class="btn btn-default btn-round btn-simple" id="btnRegistrar" name="btnRegistrar">Grabar</button>
                                <button style="border-color:#FF3636; color:#FF3636;" type="button" id="btnCancelarIngresar" class="btn btn-default btn-round btn-simple">Cancelar</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <div id="dialog_alerta" title="{{config('maestro.nombresistema')}}">
        <p id=dialog_texto align="center"></p>
    </div>
@stop

@section('page-script')
<script src="{{asset('assets/jquery-ui.js')}}"></script>

<script>


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

$("#btnCancelarIngresar").click(function(){

   window.location.href = "listado"; 

});

$("#btnRegistrar").click(function(){
    
    /*var nombresinespacios = $("#nombreotro").val();
    nombresinespacios = nombresinespacios.replace(/ /g, "");*/

    var nombreespecialidad = $("#nombreotro").val();
    
    var especialidad = $("#especialidad").val();

    var textoespecialidad = $('#especialidad option:selected').text();

    if(especialidad==0){
        $( "#dialog_texto" ).empty();
        $( "#dialog_texto" ).append("Debe seleccionar la especialidad.");
        $( "#dialog_alerta" ).dialog('open');
        return false;
    }

    if(especialidad==6){

        if(nombreotro==""){
            $( "#dialog_texto" ).empty();
            $( "#dialog_texto" ).append("Debe ingresar el nombre de la especialidad.");
            $( "#dialog_alerta" ).dialog('open');
            return false;
        }

    }    

    //$("#formIngresarComuna").submit();

    var horaactual=new Date();
    var hours=horaactual.getHours();
    var minutes=horaactual.getMinutes();
    var seconds=horaactual.getSeconds();

    if (minutes<=9){
        minutes="0"+minutes;
    }

    if (seconds<=9){
        seconds="0"+seconds;
    }

    var horaestacion=hours+":"+minutes+":"+seconds;

    var fechaactual=new Date();
    var dias=fechaactual.getDate();
    var meses=fechaactual.getMonth()+1;
    var anos=fechaactual.getFullYear();

    if (dias<=9){
        dias="0"+dias;
    }

    if (meses<=9){
        meses="0"+meses;
    }

    var fechaestacion=anos+"-"+meses+"-"+dias; 

    var token = $('meta[name="csrf-token"]').attr('content');

    $.ajax({

        type:'POST',            
        async:false,
        url:'nuevo',
        data:{
            nombre: nombreespecialidad,
            //nombresinespacios:nombresinespacios,
            especialidad:especialidad,
            textoespecialidad:textoespecialidad,
            fechainterna:fechaestacion,
            horainterna:horaestacion

        },
        headers: {'X-CSRF-TOKEN': token},

        success:function(data){

            if (data.mensaje == 'especialidadencontrada') {

              $("#dialog_texto").empty();
              $("#dialog_texto").append("Ya existe una especialidad con el mismo nombre");
              $("#dialog_alerta").dialog('open');
              return false;
              //limpiardatosisapre();  
            }

            if (data.mensaje == 'ingresado') {

                $("#dialog_texto").empty();
                $("#dialog_texto").append("Los datos de la especialidad han sido guardados con exito");
                $("#dialog_alerta").dialog('open');
                setTimeout(function(){
                    window.location.href = "listado";
                },1500); 
               
               
            }

        }
    });     

});

$("#especialidad").change(function() {

    var especialidad= $("#especialidad").val();

    if(especialidad==7){

        $("#labelnombreotro"). css("display", "inline");
        $("#textnombreotro"). css("display", "inline");

    }
    else{

        $("#labelnombreotro"). css("display", "none");
        $("#textnombreotro"). css("display", "none");

    }
});    

</script>
@stop