@extends('layout.master')
@section('parentPageTitle', 'Tipo recurso')
@section('title', 'Nuevo tipo recurso')

@section('page-style')
    <link rel="stylesheet" href="{{asset('assets/plugins/dropzone/dropzone.css')}}">
    <link rel="stylesheet" href="{{asset('assets/plugins/jquery-timepicker/jquery.timepicker.css')}}">  
    <link rel="stylesheet" href="{{asset('assets/jquery-ui.css')}}">
    <link rel="stylesheet" href="{{asset('assets/plugins/bootstrap-select/css/bootstrap-select.css')}}">

    <style type="text/css">

    /*.btn-group.select .btn{
        display: none;
    }

    .select{
        padding: 5px;
        border-radius: 15px;
    }*/


    .Highlighted a{
       background-color : Green !important;
       background-image :none !important;
       color: White !important;
       font-weight:bold !important;
       font-size: 12pt;
    }

    .ui-highlight .ui-state-default{
        background: red !important;
        border-color: red !important;
        color: white !important;
    }

    .ui-highlight2 .ui-state-default{
        background: green !important;
        border-color: green !important;
        color: white !important;
    }

    .toggle {
      --width: 80px;
      --height: calc(var(--width) / 3);

      position: relative;
      display: inline-block;
      width: var(--width);
      height: var(--height);
      box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
      border-radius: var(--height);
      cursor: pointer;
    }

    .toggle input {
      display: none;
    }

    /* SE COLOCA EL COLOR DEL switcheapagado #eb6565 */
    .toggle .slider {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border-radius: var(--height);
      background-color: #eb6565;
      transition: all 0.4s ease-in-out;

    }

    .toggle .sliderdeshabilitado {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border-radius: var(--height);
      background-color: #dddddd;
      transition: all 0.4s ease-in-out;

    }


    .toggle .slider::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: calc(var(--height));
      height: calc(var(--height));
      border-radius: calc(var(--height) / 2);
      background-color: #fff;
      box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
      transition: all 0.4s ease-in-out;
    }

    /* SE COLOCA EL COLOR DEL switchencendido #78c474 */
    .toggle input:checked+.slider {
      background-color: #78c474;
      
    }

    .toggle input:checked+.slider::before {
      transform: translateX(calc(var(--width) - var(--height)));
    }

    .toggle .labels {
      position: absolute;
      top: 8px;
      left: 0;
      width: 100%;
      height: 100%;
      font-size: 12px;
      font-family: sans-serif;
      transition: all 0.4s ease-in-out;
    }

    .toggle .labels::after {
      content: attr(data-off);
      position: absolute;
      right: 5px;
      color: #4d4d4d;
      opacity: 1;
      text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
      transition: all 0.4s ease-in-out;
      margin-top: -3px;
    }

    .toggle .labels::before {
      content: attr(data-on);
      position: absolute;
      left: 5px;
      color: #ffffff;
      opacity: 0;
      text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.4);
      transition: all 0.4s ease-in-out;
      margin-top: -3px;
    }

    .toggle input:checked~.labels::after {
      opacity: 0;
    }

    .toggle input:checked~.labels::before {
      opacity: 1;
    }

</style>
@stop
@section('content')

    <div class="row clearfix">
        <div class="col-lg-12 col-md-12 col-sm-12">
            <div class="card">
                <!-- <div class="header">
                    <h2 align="center"><strong>Información para el Profesional</strong></h2>

                </div> -->
                <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>

                    </br>
                    
                    <form action="" id="formIngresarTipoRecursos" method="">

                         <!--<input type="hidden" id="horainiconfigoculto" name="horainiconfigoculto" value="{{$configuraciones[0]->inicioatenAM}}">

                         <input type="hidden" id="horafinconfigoculto" name="horafinconfigoculto" value="{{$configuraciones[0]->finalatenPM}}">-->
                        
                        {{ csrf_field() }}
                          <div class="row clearfix">

                            <div class="col-sm-2">                                
                                <div class="d-flex justify-content-left align-items-left ml-0 p-1">
                                    <label>Tipo servicio *</label>
                                </div>
                            </div>

                            <div class="col-sm-4">
                              <div class="form-group">
                                  <select id="tiposervicio" name="tiposervicio" class="select">
                                      <option value="0">Seleccione tipo servicio</option>
                                      @foreach ($listaServicio as $servicio)                             
                                          <option value="{{$servicio->id}}">{{$servicio->descripcion}}</option>
                                      @endforeach 
                                  </select> 
                              </div>
                            </div>

                            <div class="col-sm-2">                                
                                <div class="d-flex justify-content-left align-items-left ml-0 p-1">
                                    <label>Nombre *</label>
                                </div>
                            </div>                             
                            <div class="col-sm-4">
                                <div class="form-group">
                                    <input type="text" id="nombre" name="nombre" class="form-control" autocomplete="off" required style="text-transform:uppercase">
                                </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="btnCancelarIngresarTipoRecursos" 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')}}" align="center">
        <p id="dialog_texto"></p>
    </div>



@stop
@section('page-script')
    <script src="{{asset('assets/plugins/dropzone/dropzone.js')}}"></script>
    <script src="{{asset('assets/plugins/momentjs/moment.js')}}"></script>    
    <script src="{{asset('js/jquery.rut-master/jquery.rut.js')}}"></script>
    <script src="{{asset('assets/jquery-ui.js')}}"></script>
    <script src="{{asset('assets/plugins/jquery-timepicker/jquery.timepicker.js')}}"></script>
    <script src="{{asset('assets/plugins/jquery-maskmoney-master/src/jquery.maskMoney.js')}}"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.13/jquery.mask.min.js"></script>
    <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/jquery.inputmask.bundle.js"></script>

   
    <script>
    $(function () {

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

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

            window.location.href = "listado"; 

        });

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

            var nombre=$("#nombre").val();
            var tiposervicio=$("#tiposervicio").val();

            if(tiposervicio=="0"){
                $( "#dialog_texto" ).empty();
                $( "#dialog_texto" ).append("Debe seleccionar el tipo de servicio.");
                $( "#dialog_alerta" ).dialog('open');
                return false; 
            }

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

            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:{
                  tiposervicio:$("#tiposervicio").val(),
                  nombre:$("#nombre").val(),
                  fechainterna:fechaestacion,
                  horainterna:horaestacion
                },
                headers: {'X-CSRF-TOKEN': token},

                success:function(data){

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

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

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

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

                }
            });   
        
        });

    });
    $(document).ready(function() {

    });  
    </script>
@stop