@extends('layout.master')
@section('parentPageTitle', 'Mantenedor tablas')
@section('title', 'Mantenedor tablas')


@section('page-style')
<link rel="stylesheet" href="{{asset('assets/plugins/jquery-datatable/dataTables.bootstrap4.min.css')}}">
<link rel="stylesheet" href="{{asset('assets/jquery-ui.css')}}">
<link rel="stylesheet" href="{{asset('assets/bootstrap.min.css')}}">
@stop

@section('content')

<meta name="csrf-token" content="{{ csrf_token() }}">

    <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-sm-8 col-sm-8 col-sm-8">-->
        <div class="col-md-12 d-flex justify-content-center">    
            
            <div class="card patients-list">

                <div class="body">
                    <!-- Nav tabs -->

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

                    </br>
                    </br>

                    <ul class="nav nav-tabs">
                        <li class="nav-item"><a class="nav-link active" data-toggle="tab" href="#roles">Roles</a></li>
                        <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#paises">Paises</a></li>
                        <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#comunas">Comunas</a></li>
                        <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#isapres">Isapres</a></li>
                        <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#ciudad">Ciudad</a></li>
                        <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#perfil">Perfil</a></li>
                        <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#especialidad">Especialidad</a></li>
                        <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#servicio">Servicio</a></li>
                        <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#servicio">Sucursales</a></li>
                    </ul>  

                    </br>

                    <div class="tab-content">
                        
                        <!--PESTAÑA ROLES -->
                        <div role="tabpanel" class="tab-pane in active" id="roles">

                        
                        </div>
                        <!--FIN PESTAÑA ROLES -->

                        <!--PESTAÑA PLAN CONTRATADO -->
                        <div role="tabpanel" class="tab-pane" id="paises">

                          

                        </div>

                        <!--FIN PESTAÑA ROLES --> 

                    </div>
                    
                </div>
            </div>
        </div>
    
    </div>

@stop


@section('modal')
<!-- Default Size -->
{!!Form::open()!!}

<div class="modal" id="ciudad_eliminar" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content" >
            <div class="modal-header" >
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                 <h4 class="title" id="defaultModalLabel">Eliminación de ciudad</h4>
                
            </div>
            <div id="msj-success-eliciudad" class=" msj-successeliminar alert alert-success alert-dismissible" role="" style="display: none;">
                     <strong> Ciudad eliminada correctamente.</strong>
            </div>

            <div class="modal-body">
                 <h4><p align="center">Desea eliminar el registro?</p></h4>
            </div>

            <div class="modal-footer">
                <button style="border-color:#18ce0f; color:#18ce0f;" type="button" id="btnmodalaceptar_eliciudad" class="btn btn-default btn-round btn-simple">
                    <span class=""></span> Aceptar
                </button>
               <button style="border-color:#FF3636; color:#FF3636;" type="button" id="btnmodalcancelar_eliciudad" class="btn btn-default btn-round btn-simple" class="" data-dismiss="modal">Cancelar
                </button>
            </div>
        </div>
    </div>
</div>
{!!Form::close()!!}

@stop

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

<script>

var lenguaje = {
    "lengthMenu": "Listar _MENU_ ",
    "zeroRecords": "Aún no tiene registros",
    "info": "Página _PAGE_ de _PAGES_",
    "infoEmpty": "",
    "Search": "Buscar",
    "infoFiltered": "(filtered from _MAX_ total records)",
    "search": "Buscar",
    "zeroRecords": "Sin resultados encontrados",
    "paginate": {
        "first": "Primero",
        "last": "Ultimo",
        "next": "Siguiente",
        "previous": "Anterior"
    }
}


$(document).ready(function() {

       listarrolesindex();
    
    } );



    /*function eliminar(id){
        var r = confirm("Confirma eliminar");
        if (r == true) {
            var token = $('meta[name="csrf-token"]').attr('content');
            var url='eliminar';
            var data={"id" : id};

            $.ajax({
                type:'POST',
                url: url,
                data: data,
                headers: {
                    'X-CSRF-TOKEN': token
                },
                success:function(data){
                    //alert(data);
                    //redirect('roles/listado-roles');
                    window.location.href = "listado";
                }
            });
        }                 
    }*/

    function listarrolesindex() {

        var route = "{{route('roles.listarrolesindex')}}";

        var recargartablatotal = jQuery('#tabla1').dataTable({
            
            //"aoColumnDefs": [{ "bVisible": false, "aTargets": [0] }],
            "ajax": {
                method:'post',
                url: route,
                headers:{
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                "data": function(data) {

                }
            },
            
            columns: [
                
                {
                    name: 'nombre',
                    data: 'nombre'
                },

                {   
                    className: 'text-left',
                    data:'id',
                    
                    render: function (data,type,row) {
                       
                        var estado= row.estado; 

                        if (estado == 0){

                          var boton = '<a href="#" id="'+data+'" name="'+data+'" class="tag badge badge-suc" style="border-color:#FF3636; color:#FF3636;" onclick="cambiarEstado('+data+','+estado+','+data+')">Inactivo</a>'

                          /*var boton =  '<button id="'+data+'" name="'+data+'" class="btn btn-danger btn-round btn-sm" type="button" onclick="cambiarEstado('+data+','+estado+','+data+')">Inactivo</button>'*/
                        }

                        if (estado == 1){
                          
                          var boton = '<a href="#" id="'+data+'" name="'+data+'" class="tag badge badge-default" style="border-color:#18ce0f;color:#18ce0f;" onclick="cambiarEstado('+data+','+estado+','+data+')">Activo</a>'

                          /*var boton =  '<button id="'+data+'" name="'+data+'" class="btn btn-success btn-round btn-sm" type="button" onclick="cambiarEstado('+data+','+estado+','+data+')">Activo</button>'*/
                        }

                        //alert(boton);

                        return ''+boton+'';  
                    }
                },

                {   
                    className: 'text-left',
                    data:'id',
                    
                    render: function (data,type,row) {
                       
                       
                        return '<a href="'+data+'" class="btn btn-primary btn-round btn-sm">Editar</a>';

                    }  
                }      
                
            ],

            "columnDefs": [
                 
                { "orderable": false, "targets": 1},
                { "orderable": false, "targets": 2},
                 
            ],

            language: lenguaje

        });

    }

    function cambiarEstado(id,estado,btn_id){

        var token = $('meta[name="csrf-token"]').attr('content');
        var url='ajax_cambiar_estado';
        var enviarData={"id" : id, "estado" : estado};

        $.ajax({
            type:'POST',
            url: url,
            data: enviarData,
            headers: {
                'X-CSRF-TOKEN': token
            },
            success:function(data){
                if(data==1){
                    $("#"+btn_id).text("Activo");
                    $("#"+btn_id).removeClass();
                    $("#"+btn_id).addClass('tag badge badge-default');
                    $("#"+btn_id).css({'border-color':'#18ce0f','color':'#18ce0f'});
                    $("#"+btn_id).attr("onclick", "cambiarEstado('"+id+"', '1', '"+btn_id+"')");
                }else{
                    $("#"+btn_id).text("Inactivo");
                    $("#"+btn_id).removeClass();
                    $("#"+btn_id).addClass('tag badge badge-default');
                    $("#"+btn_id).css({'border-color':'#FF3636','color':'#FF3636'});
                    $("#"+btn_id).attr("onclick", "cambiarEstado('"+id+"', '0', '"+btn_id+"')");
                }
            }
        });
    
    }

</script>
@stop