@extends('ATCore::atplus_crud._create')

@section('atplus_body_form')

    <div class="card-body" id="app">
        <div class="form-group">
            <div class="icheck-primary">
              <input type="radio" id="_permissionType1" name="permissionType" v-model="permissionType" value="basic">
              <label for="_permissionType1">Permiso Básico</label>
            </div>
            <div class="icheck-primary">
              <input type="radio" id="_permissionType2" name="permissionType" v-model="permissionType" value="crud">
              <label for="_permissionType2">Permiso CRUD</label>
            </div>
        </div>

        <div v-if="permissionType == 'basic'">
            <div class="form-group">
                <label for="_display_name">Nombre</label>
                <input type="text" class="form-control" id="_display_name" name="display_name"  placeholder="Ingresar nombre" value="{{ old('display_name') }}" required>
            </div>
            <div class="form-group">
                <label for="_name">Slug</label>
                <input type="text" class="form-control" id="_name" name="name"  placeholder="Ingresar Slug" value="{{ old('name') }}" required>
            </div>
            <div class="form-group">
                <label for="_description">Descripción</label>
                <input type="text" class="form-control" id="_description" name="description"  placeholder="Describir la función del permiso" value="{{ old('description') }}" required>
            </div>
        </div>

        <div v-if="permissionType == 'crud'">
          <div class="row">
            <div class="col-sm-12">
              <div class="form-group">
                <label for="_display_name">Recurso</label>
                <input type="text" class="form-control" id="_resource" name="resource" v-model="resource" placeholder="Nombre del Recurso" value="{{ old('resource') }}">
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-sm-3">
              <div class="icheck-primary">
                <input type="checkbox" id="_create" v-model="crudSelected" value="crear">
                <label for="_create">Crear</label>
              </div>
              <div class="icheck-primary">
                <input type="checkbox" id="_read" v-model="crudSelected" value="leer">
                <label for="_read">Leer</label>
              </div>
              <div class="icheck-primary">
                <input type="checkbox" id="_update" v-model="crudSelected" value="modificar">
                <label for="_update">Modificar</label>
              </div>
              <div class="icheck-primary">
                <input type="checkbox" id="_delete" v-model="crudSelected" value="eliminar">
                <label for="_delete">Eliminar</label>
              </div>
            </div>
            <div class="col-sm-9">
              <table class="table" v-if="resource.length >= 3 && crudSelected.length > 0">
                <thead>
                  <th>Name</th>
                  <th>Slug</th>
                  <th>Description</th>
                </thead>
                <tbody>
                  <tr v-for="item in crudSelected">
                    <td v-text="crudName(item)"></td>
                    <td v-text="crudSlug(item)"></td>
                    <td v-text="crudDescription(item)"></td>
                  </tr>
                </tbody>
              </table>
            </div>


          <input type="hidden" name="crud_selected" :value="crudSelected">


        </div>
    </div>
    </div>
    <!-- /.card-body -->
  
  @stop

@section('atplus_js')
<script>
    const app = new Vue({
      el: '#app',
      data: {
        permissionType: 'basic',
        resource: '',
        crudSelected: ['crear', 'leer', 'modificar', 'eliminar']
      },
      methods: {
        crudName: function(item) {
          return item.substr(0,1).toUpperCase() + item.substr(1) + " " + app.resource.substr(0,1).toUpperCase() + app.resource.substr(1);
        },
        crudSlug: function(item) {
          return item.toLowerCase() + "-" + app.resource.toLowerCase();
        },
        crudDescription: function(item) {
          return "Permitir al Usuario " + item.toUpperCase() + " " + app.resource.substr(0,1).toUpperCase() + app.resource.substr(1);
        }
      }
    });
</script>
@stop