@extends('templates.admin-lte')

@section('header')
  <h1>
    Permisos
    <small>Indice</small>
  </h1>
@endsection

@section("styles")
  @include('libraries', 
  [
    'added' => array
    ( 
    'datatables-css', 
    'jquery-confirm-css', 
    'jquery-toast-css', 
    //'bootstrap-select-css'
    )
  ])
@endsection




@section('content')

  
  <div class="box box-primary">
    <div class="box-body">

      <div class="row">
        <div class="col-md-12 text-center">
          <h3>ROLES</h3>
        </div>
      </div>

      <div class="row">
         {!! Form::custom_link_one( route('administracion.base.mantenimientos.roles.create'), "<b>CREAR ROL</b>", 'col-md-2 pull-right' ) !!}
      </div>
      
      {!! Form::custom_table_one( "tabla-roles", [ 'NOMBRE', 'DESCRIPCIÓN', 'ACCIONES'],'table table-bordered table-hover display') !!}
    </div>
  </div>

  <div class="box box-primary">
    <div class="box-body">

      <div class="row">
        <div class="col-md-12 text-center">
          <h3>PERMISOS</h3>
        </div>
      </div>

      <div class="row">
        <!--
        {!! Form::custom_link_one( route('administracion.base.mantenimientos.permisos.create'), "<b>CREAR PERMISO</b>", 'col-md-2 pull-right' ) !!}
        -->
      </div>
      
      {!! Form::custom_table_one( "tabla-permisos", [ 'TIPO', 'NOMBRE', 'DESCRIPCIÓN', 'ACCIONES' ],'table table-bordered table-hover display') !!}
    </div>
  </div>

  <div class="box box-primary">
    <div class="box-body">

      <div class="row">
        <div class="col-md-12 text-center">
          <h3>RELACIÓNES ROLES/PERMISOS</h3>
        </div>
      </div>

        <div id="vue-rol_permisos-app">
          
          <div class="row">
            <div class="col-md-2">
              <div class="form-group">
                <label>Rol</label>
                <select class="form-control" @change="select_roles_has_changed()" v-model="rol_selected_id">
                  <option v-for="option, key in roles" v-bind:value="option.id" v-html="option.nombre"></option>
                </select>
                <template v-if="rol_selected_id==null">
                  <label class="text-primary">Seleccione un rol.<label>
                </template>
              </div>
            </div>

            <template v-if="rol_selected_id!=null">

              <div class="col-md-2">
                <div class="form-group">
                  <label>Buscar por Nombre:</label>
                  <input class="form-control" v-model="nombre_buscado">
                </div>
              </div>
            
              <div class="col-md-2">
                <div class="form-group">
                  <br>
                  <button class="btn btn-primary btn-xs" @click="check_todos"> <b>Check todos los permisos de una</b></button>
                </div>
              </div>

              <div class="col-md-2">
                <div class="form-group">
                  <br>
                  <button class="btn btn-primary btn-xs" @click="uncheck_todos"> <b>Uncheck todos los permisos de una</b></button>
                </div>
              </div>
            </template>
              

            <div class="col-md-1">
              <div class="form-group">
                <template v-if="requesting_on_course">
                  <br>
                  <i class="glyphicon text-primary fa fa-refresh fa-spin"></i>
                </template>
              </div>
            </div>
          </div>
          
          <div class="rol">
            <div class="col-md-12">
              <ul class="list-group" style="max-height: 400px; overflow-y: auto;">
                <li class="list-group-item row" v-for="(permiso, key) in permisos" v-if="(permiso.nombre.toUpperCase().search( nombre_buscado.toUpperCase() ) >= 0)">

                  <div class="col-md-9">
                    <span v-html="permiso.nombre"></span>
                  </div>
                  <div class="col-md-2">
                    <button v-bind:class="'btn btn-warning btn-block '+ button_disabled_class" @click="permiso_fue_clickeado( permiso )" @keyup.space.enter="permiso_fue_clickeado( permiso )" >
                      <i v-bind:class="'glyphicon '+( (rol_has_permiso(permiso))?'glyphicon-check':'glyphicon-unchecked ' ) "></i>
                    </button>
                  </div>

                </li>
              </ul>
            </div>
          </div>
        </div>

    </div>
  </div>

  <div class="box box-primary">
    <div class="box-body">

      <div class="row">
        <div class="col-md-12 text-center">
          <h3>RELACIÓNES USUARIO/ROL</h3>
        </div>
      </div>

      <div class="row">
        {!! Form::custom_link_one( route('administracion.base.mantenimientos.roles_usuarios.create'), "<b>CREAR RELACIÓN USUARIO/ROL</b>", 'col-md-3 pull-right' ) !!}
      </div>
      
      {!! Form::custom_table_one( "tabla-usuario-rol", [ 'ROL', 'USUARIO', 'ACCIONES' ],'table table-bordered table-hover display') !!}

    </div>
  </div>

  
  
@endsection

@section('scripts')
  @include('libraries',
  [
    'added' => 
    array
    (
    'datatables-js', 
    'jquery-confirm-js', 
    'jquery-toast-js', 
    'vue-js', 
    'axios-js'
    //'bootstrap-datetimepicker-js', 
    //'bootstrap-select-js', 
    )
  ])
  @include("administracion/base/mantenimientos/permisos/partials/index/script")
@endsection