@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.store') }}">
        {{ csrf_field() }}
        <input type="hidden" name="is_editable" value="1">
        <input type="hidden" name="is_deletable" value="1">

        <div class="row">
          <div class="col-md-12">
            <div class="form-group{{ $errors->has('role_name') ? ' has-error' : '' }}">
              <label class="control-label col-md-2 require">Role Name :</label>
              <div class="col-md-6">
                <input type="text" name="role_name" class="form-control" required="required" value="{{ old('role_name') }}">
                {!! $errors->first('role_name', '<p class="text-danger">:message</p>' ) !!}
              </div>
            </div>
            <div class="form-group{{ $errors->has('description') ? ' has-error' : '' }}">
              <label class="control-label col-md-2 require">Role Description :</label>
              <div class="col-md-6">
                <textarea name="description" class="form-control" placeholder="maximum length should be 600">{{ old('description') }}</textarea>
                <small>(maximum length should be 600)</small>
                {!! $errors->first('description', '<p class="text-danger">:message</p>' ) !!}
              </div>
            </div>
            <div class="form-group">
              <label class="control-label col-md-2">Status :</label>
              <div class="col-md-6">
                <select class="form-control" name="is_active">
                  <option value="1">Active</option>
                  <option value="0">Inactive</option>
                </select>
              </div>
            </div>
          </div>
        </div>

        
        <div class="panel-header">
          <h4 class="panel-title">Permission Setting:</h4>
        </div>
        <label style="border:1px solid #ddd; padding:5px; margin-top: 10px; background-color: #efefef">
          <input id="checkoruncheck" type="checkbox">
          <strong style="user-select: none;">Check/Uncheck All</strong>
        </label>

        @foreach ($controllersArray as $elements)
          <div class="row" style="margin-bottom: 20px;">
            @foreach ($elements as $key => $elements)
              
              <div class="col-md-3">
                <div class="controller">
                  <label>
                    <span>{{ $controllerCount }}.</span> <input name="{{ $controllerName[0] }}{{ isset($controllerName[1]) ? '_' . $controllerName[1] : '' }}" class="parent_{{ $controllerName[0] }}{{ isset($controllerName[1]) ? '_' . $controllerName[1] : '' }}" type="checkbox" value="{{ array_search($key, $parents) }}" onChange="permission_select_deselect_child(this)">
                    <strong class="disable-select">{{ $controllerName[0] }} </strong> <span>{{ isset($controllerName[1]) ? "(" . $controllerName[1] . ")" : '' }}</span>
                  </label>
                </div>
                <div class="action-wraper">
                  @foreach ($elements as $key2 => $element)
                    <div class="actions" style="margin-left:20px;">
                      <label>
                        <input name="{{ $key2 }}" class="{{ $controllerName[0] }}{{ isset($controllerName[1]) ? '_' . $controllerName[1] : '' }}" type="checkbox" value="{{ $key2 }}" onChange="permission_select_parent('{{ $controllerName[0] }}{{ isset($controllerName[1]) ? '_' . $controllerName[1] : '' }}')"> {{ mystudy_case(\Illuminate\Support\Str::snake($element)) }}
                      </label>
                    </div>
                  @endforeach
                </div>
              </div>
            @endforeach
          </div>
        @endforeach

        <div class="row">
          <div class="col-md-12">
            <button type="submit" class="btn btn-primary">
              Create 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