@extends('layouts.app')

@section('content')
<div class="container" >
<style>
.role-permission-submenus .role-permission-list {
  display: flex;
  width: 50%;
  flex-direction: row;
  margin: auto;
}
.role-permission-submenus .role-permission-list li {
  width: 50%;
  text-align: center;
  border-bottom: 3px solid #918c8c;
  background-color: #e3e3e3;
}
.role-permission-list li.menu-item-selected a {
  color: #F9A035;
}
.role-permission-submenus .role-permission-list li a {
  text-align: center;
  float: initial;
  margin: auto;
  white-space: nowrap;
  width: 100%;
  outline: none;
}
.role-permission-list li.menu-item-selected {
  border-bottom: 4px solid #F9A035;
  color: #F9A035;
}
.tab {
	display:none;
}

.tab.active {
	display:block;
}

.manage-roles-block {
  width: 70%;
  margin-left: auto;
  margin-right: auto;
  border: 1px solid #e3e3e3;
  box-shadow: 0px 0px 2px #35093b6e;
}
.empty-block {
  margin: 100px;
}

.panel {
  padding: 0 18px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}
.manage-roles-container .accordion {
  border-radius: 5px;
  margin: 5px;
  box-shadow: 0px 1px 4px #35093b6e;
}
.manage-roles-container .accordion:focus {
  outline: unset;
}
.roles-head h5 {
  // float:left;
  margin: 15px 0;
}
.roles-head a {
  float: right;
  margin: 15px;
}
span.permission-attb {
  padding: 5px 10px;
  border-radius: 5px;
  background: #eee;
  font-size: .9rem;
  font-weight: 400;
  color: #868181;
}
.page-wise-permissions {
  text-align: left;
}
.m-page-title {
  margin-bottom: 10px;
  float: left;
  width: 100%;
  font-size: 15px;
  font-weight: bold;
}
.chk-bx-container {
  padding-left: 15px;
  margin-bottom: 5px;
}
.chk-bx-container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
  padding-left: 35px;
}
.chk-bx-container input:checked ~ .checkmark {
  background-color: #34548A;
}
.chk-bx-container .checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 20px;
  width: 20px;
  background-color: #fff;
  border: 1px solid #212529;
  border-radius: 3px;
}
.chk-bx-container input:checked ~ .checkmark:after {
  display: block;
}
.chk-bx-container .checkmark:after {
  left: 7px;
  top: 2px;
  width: 6px;
  height: 12px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
.chk-bx-container .checkmark:after {
  content: "";
  position: absolute;
  display: none;
}
.chk-bx-container .checkmark:hover {
  cursor: pointer;
}
.permission-container {
  position: relative;
  padding-right: 15px;
  padding-left: 15px;
  float: left;
}
.divider-cls {
  clear: both;
}
.line-break {
  clear: both;
}
.create-role-container .form-group label, .create-role-container .form-group input {
	float: left;
}
.create-role-container .form-group {
	width: 200px;
}
.roles-head {
	height: 50px;
  background: #eee;
  width: 100%;
  box-shadow: 0px 1px 4px #35093b30;
}
.head-title {
	float: left;
  display: inline-flex;
}
.save-button-box {
	float: right;
}
.save-button-box .save-role-permission-btn {
	min-width: 75px;
  min-height: 35px;
}
#role_name {
  font-size: 15px !important;
}
.role-error-message {
  float: left;
  color: #d91d17;
  display: none;
}
.created-success-message {
  background: #008000a8;
  color: #fff;
  display: none;
  padding: 5px 30px;
  border-radius: 5px;
}
.head-title i {
  font-size: 24px;
  font-weight: normal;
}
</style>
<div class="container">
  <div class="textlabel">
      <h2 class="role-permission-heading">Roles & Permissions</h2>
  </div>
  
  <div id="role-management" class="tab active">
    
    <div class="row manage-roles-block">
      <div class="roles-head">
        <div class="head-title">
          <a href="{{ route('rolesAndPermissions') }}"><i class="fas fa-3x fa-long-arrow-left fa-fw"></i></a><h5>Edit Role & Permissions</h5>
        </div>
        <div class="save-button-box my-2 mr-2">
          <button class="save-role-permission-btn">Save</button>
        </div>
      </div>
      <div class="col-md-12">
        <div class="container manage-roles-container my-4">
            <div class="create-role-container">
              <div class="form-group">
                <label for="" class="">Role</label>
                <input type="text" name="role_name" id="role_name" placeholder="Enter Role Name" value="{{ $roleHasPermissions->name }}">
                <span class="role-error-message"></span>
              </div>
            </div>
            <br class="line-break">
            <span class="created-success-message"></span>
            <hr class="divider-cls">
            @if(count($permissions) > 0)
              @php $i = 0; @endphp
              @foreach ($permissions as $page => $pagePrms)
                <div class="page-wise-permissions">
                  <div class="page-title-head">
                  <p class="m-page-title">{{ ucwords($page) }} Page</p>
                  </div>
                  <div class="page-permissions-container-box">
                  @foreach($pagePrms as $permission)
                    <span class="permission-container">
                      <label class="chk-bx-container">
                        <input type="checkbox" name="permissions_chk" class="permissions-chk" value="{{ $permission->id }}" @if(in_array($permission->id, $permissionsArr)) checked @endif>
                        <span>{{ ucwords($permission->name) }}</span>
                        <span class="checkmark"></span>
                      </label>
                    </span>
                  @endforeach
                  </div>
                </div>
                <br class="line-break">
                @php $i++; @endphp
                @if($i < count($permissions))
                <hr class="divider-cls">
                @endif
              @endforeach
            @else
              <div class="empty-block">
                <h5>Permissions not added yet</h5>
              </div>
            @endif
        </div>     
      </div>  
    </div>

  </div>
  
  
</div>

<div id="loaderModal" class="modal">
  <img class="loader-img" src="../images/ajax-spinner.gif">
  <span class="loader-text">Please wait ...</span>
</div>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.11.1/js/jquery.dataTables.js"></script>
<script>
  var role_id = {{ $roleHasPermissions->id }};
  
  jQuery(document).ready(function() {

    $(document).on('blur, keyup', '#role_name', function(e) {
      checkForValid();
    });

    $(document).on('change', '.permissions-chk', function(e) {
      checkForValid();
    });

    function checkForValid() {
      if($("#role_name").val() == '') {
        $('.role-error-message').text('The role name is required!').show();
        $('.save-role-permission-btn').prop('disabled', true);
        return;
      } else {
        $('.role-error-message').hide();
        $('.save-role-permission-btn').prop('disabled', false);
      }

      var selectedIds = $("input.permissions-chk:checkbox:checked").map(function() {
        return this.value;
      }).toArray();

      if(selectedIds.length) {
        $('.save-role-permission-btn').prop('disabled', false);
        return;
      } else {
        $('.save-role-permission-btn').prop('disabled', true);
      }
    }

    $(document).on('click', '.save-role-permission-btn', function(e) {
      setPermissions();
    });

  });

  function setPermissions() {
    jQuery("#loaderModal").show();
		var role_name = $('#role_name').val();
		var selectedIds = $("input.permissions-chk:checkbox:checked").map(function() {
			return this.value;
		}).toArray();
		
		var post_data = 'role_name=' + role_name + '&role_id=' + role_id + '&permissionIds=' + selectedIds + '&_token={{ csrf_token() }}';
		
		$.ajax({
			type: "POST",
			url: '{{ route('changePermissions') }}',
			data: post_data,
			dataType: "json",
			success: function(response) {
        jQuery("#loaderModal").hide();
        if(response.success) {
          $("#role_name").val('');
          $('.permissions-chk').prop('checked', false);
          $('.created-success-message').text(response.message).show();
          setTimeout(function(){
            $('.created-success-message').fadeOut('slow');
          },2000);
          window.location.href = '{{ route('rolesAndPermissions') }}';
        } else {
          $('.role-error-message').text(response.message).show();
        }
			}
		});
		
	}
</script>
@endsection