@extends('layout.master')
@section('parentPageTitle', 'Categoria servicio')
@section('title', 'Editar categoria servicio')

@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="formIngresarRecurso" method="">

                        <input type="hidden" id="nombrebdoculto" name="nombrebdoculto" value="{{$data[0]->nombre}}">

                        <input type="hidden" id="tiposervicioscategoria_id" name="tiposervicioscategoria_id" value="{{$tiposervicioscategoria_id}}">

                        <input type="hidden" id="idtiposervicio" name="idtiposervicio" value="{{$idtiposervicio}}">

                        <input type="hidden" id="tiposervicio" name="tiposervicio" value="{{$tipoServicio[0]->id}}">

                        <input type="hidden" id="categoriageneoculto" autocomplete="off" name="categoriageneoculto" class="form-control" required value="{{$data[0]->generico}}">

                       
                        {{ 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">
                                    <input type="text" id="tiposervicio" name="tiposervicio" class="form-control" autocomplete="off" required value="{{$tipoServicio[0]->descripcion}}" disabled="">
                                </div>
                            </div>

                             
                        </div> 

                           
          

                        <div class="row clearfix">

                            
                            
                            
                            <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" value="{{$data[0]->nombre}}">
                                </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="btnCancelarEditarTipoServCat" 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 });

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

            window.location.href = "listado"; 

        });

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

            var idtiposervicio=$("#idtiposervicio").val();
            var nombre=$("#nombre").val();
            var nombrebdoculto=$("#nombrebdoculto").val();
            var tiposervicioscategoria_id=$("#tiposervicioscategoria_id").val();

            var boxcategoriagene=$("#categoriageneoculto").val();

            if(nombre==""){
                $("#dialog_texto" ).empty();
                $("#dialog_texto" ).append("Debe ingresar la categor&iacute;a.");
                $("#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:'editar',
                data:{
                  idtiposervicio:idtiposervicio,
                  nombre:$("#nombre").val(),
                  nombrebdoculto:nombrebdoculto,
                  tiposervicioscategoria_id:tiposervicioscategoria_id,
                  tiposervicio:$("#tiposervicio").val(),
                  idprofesion:$("#profesion").val(),
                  especialidad:$("#especialidad").val(),
                  boxcategoriagene:boxcategoriagene,
                  fechainterna:fechaestacion,
                  horainterna:horaestacion
                },
                headers: {'X-CSRF-TOKEN': token},

                success:function(data){

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

                      $("#dialog_texto").empty();
                      $("#dialog_texto").append("Ya existe una categor&iacute;a servicio para este tipo de servicio con el mismo nombre");
                      $("#dialog_alerta").dialog('open');
                      return false;
                      //limpiardatosisapre();  
                    }

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

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

                }
            });   
        
        });

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

        var categoriagene=$("#categoriageneoculto").val(); 

        //alert(categoriagene);

        if(categoriagene=="SI"){

            $("#checkboxcategoriagene").prop("checked", true);

            $("#divboxcategoriagene").css('display','none');
            $("#divboxcategoriagene1").css('display','none'); 

            $("#divespecialidad").css('display','none');
            $("#divsubespecialidad").css('display','none');
            $("#labelespecialidad").css('display','none');
            $("#labelsubespecialidad").css('display','none');

        }

        if(categoriagene=="NO"){

            $("#checkboxcategoriagene").prop("checked", false);
            
            $("#divboxcategoriagene").css('display','none');
            $("#divboxcategoriagene").css('display','none');

            $("#divespecialidad").css('display','inline');
            $("#divsubespecialidad").css('display','inline');
            $("#labelespecialidad").css('display','inline');
            $("#labelsubespecialidad").css('display','inline'); 
            
        }

        if(categoriagene==""){

          $("#divboxcategoriagene").css('display','none');
          $("#divboxcategoriagene1").css('display','none');

        }  

    });  
    </script>
@stop