@extends('Layouts.Application')

@section('MainContent')

<style>
.disable-select {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
</style>

<div class="col-md-12">
  <div class="card mb-4">
    <div class="card-body">
      <form class="form-horizontal" method="POST" action="{{ route('LoggedIn.Role.update', ['Role' => $Role->role_id]) }}">
        {{ method_field('put') }}
        {{ csrf_field() }}
        <input type="hidden" name="is_editable" value="1">

        <div class="row">
          <div class="form-group{{ $errors->has('role_name') ? ' has-error' : '' }} col-sm-12">
            <label class="control-label col-sm-2 require">Role Name :</label>
            <div class="col-md-8">
              <input class="form-control" required="required" name="role_name" type="text" value="{{ $Role->role_name }}">

              {{ $errors->first('role_name', '<p class="text-danger">:message</p>' ) }}
            </div>
          </div>
          <div class="form-group{{ $errors->has('description') ? ' has-error' : '' }} col-sm-12">
            <label class="control-label col-sm-2 require">Role Description : </label>
            <div class="col-md-8">
              <textarea class="form-control" rows="3" name="description" cols="50">{{ $Role->description }}</textarea>
              <small>(maximum length should be 600)</small>

              {{ $errors->first('description', '<p class="text-danger">:message</p>' ) }}
            </div>
          </div>
        </div>
        <div class="card-header">
          <h4 class="card-title">Permission Setting:</h4>
        </div>
        <label style="border:1px solid #ddd; padding:5px; margin-top: 10px; background-color: #efefef">
          <input id="checkoruncheck" type="checkbox" checked="checked">
          <strong style="user-select: none;">Check/Uncheck All</strong>
        </label>

        
        @foreach ($controllersArray as $elements)
          <div class="row" style="margin-bottom: 20px;">
            @foreach ($elements as $parent)
              
              <div class="col-md-3">
                <div class="controller">
                  <label>
                    <span>{{ $controllerCount }}.</span> <input name="permissions[]" class="parent_{{ $parent['name'] }}{{ $parent['methods_in'] ? '_' . $parent['methods_in'] : '' }}" type="checkbox"  value="{{ $parent['id']}}" onChange="permission_select_deselect_child(this)"> <strong class="disable-select">{{ $parent['name'] }} </strong> <span>{{ $parent['methods_in'] ? "(" . $parent['methods_in'] . ")" : '' }}</span>
                  </label>
                </div>
                <div class="action-wraper">
                  @foreach ($parent['children'] as $child)
                    <div class="actions" style="margin-left:20px;">
                      <label><input name="permissions[]" class="{{ $parent['name'] }}{{ $parent['methods_in'] ? '_' . $parent['methods_in'] : '' }}" type="checkbox"  value="{{ $child['id'] }}" onChange="permission_select_parent('{{ $parent['name'] }}{{ $parent['methods_in'] ? '_' . $parent['methods_in'] : '' }}')"> {{ mystudy_case(\Illuminate\Support\Str::snake($child['name'])) }}</label>
                    </div>
                  @endforeach
                </div>
              </div>
            @endforeach
          </div>
        @endforeach

        <div class="col-md-12">
          <div class="form-group col-sm-12">
            <button type="submit" class="btn btn-primary">
              Update Role
            </button>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>

<script>
function permission_select_deselect_child(selector) {
  var check;

  if ($(selector).is(':checked') === false) {
    check = false;
  } else {
    check = true;
  }

  if ($(selector).parent().parent().hasClass('controller') === true) {
    var action_ul = $(selector).parent().parent().next('div.action-wraper');
    $.each(action_ul.children('.actions'), function(ind, val) {
      var cur_check_box = $(val).children().children('input');
      $(cur_check_box).prop('checked', check);
    });
  }
}

function permission_select_parent(selector) {
  var check = $('.' + selector).is(':checked');
  $('.parent_' + selector).prop('checked', check);
}

$(document).ready(function(e){
  $("#checkoruncheck").change(function () {
    $("input:checkbox").not('#checkboxCustom3').prop('checked', $(this).prop("checked"));
  });
});
</script>

@endsection