@extends('layouts.plusadmin')
@section('content')
@parent

<style>
.footerbutton {
   position: fixed;
   left: 0;
   bottom: 0;
   width: 100%;
   height: 8%;
   margin-bottom: 33px;
   background-color: #fff;
   color: white;
   text-align: center;
}

.footer {
   position: fixed;
   left: 0;
   bottom: 0;
   width: 100%;
   height: 5%;
   margin-bottom: 0px;
   background-color: #fff;
   color: white;
   text-align: center;
}

.table-responsive,
.dataTables_scrollBody {
    overflow: visible !important;
}
 
.table-responsive-disabled .dataTables_scrollBody {
    overflow: hidden !important;
}



/*TABLE */
table {
  border: 1px solid #ccc;
  border-collapse: collapse;
  margin: 0;
  padding: 0;
  width: 100%;
  table-layout: fixed;
}

table caption {
  font-size: 1.5em;
  margin: .5em 0 .75em;
}

table tr {
  background-color: #f8f8f8;
  border: 1px solid #ddd;
  padding: .35em;
}

table th,
table td {
  padding: .625em;
  text-align: center;
}

table th {
  font-size: .85em;
  letter-spacing: .1em;
  text-transform: uppercase;
}

@media screen and (max-width: 600px) {
  table {
    border: 0;
  }

  table caption {
    font-size: 1.3em;
  }
  
  table thead {
    border: none;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }
  
  table tr {
    border-bottom: 3px solid #ddd;
    display: block;
    margin-bottom: .625em;
  }
  
  table td {
    border-bottom: 1px solid #ddd;
    display: block;
    font-size: .8em;
    text-align: right;
  }
  
  table td::before {
    /*
    * aria-label has no advantage, it won't be read inside a table
    content: attr(aria-label);
    */
    content: attr(data-label);
    float: left;
    font-weight: bold;
    text-transform: uppercase;
  }
  
  table td:last-child {
    border-bottom: 0;
  }
}

</style>

<div class="main-panel">
  <div class="content-wrapper">
    <div class="page-header">
      <h3 class="page-title">View User Role</h3>
    </div>

    <div class="row">

        <div class="col-md-3 grid-margin stretch-card">
          <div class="card">
            <div class="card-body">
              <h4 class="card-title">View User Role</h4>
              <p class="card-description">Complete the Details below</p>

                <div class="form-group">
                  <label for="exampleInputUsername1">Name</label>
                  <input type="text" class="form-control" id="name" name="name" placeholder="Role Name" value="{{ old('name', isset($role) ? $role->name : '') }}" style="height:30px" readonly/>
                </div>

            </div>
          </div>
        </div>
        <div class="col-md-9 grid-margin stretch-card">
          <div class="card">
            <div class="card-body">
              <h4 class="card-title">List of Permissions</h4>


                                      
                                      <table class="table table-head-fixed text-nowrap" style="overflow-x:auto;">
                                                                                @foreach($allpermissions->all() as $value)                                      

                                        
                                          @if($category != $value->category)
                                              
                                            <tr>
                                              <th scope="col" style="width: 35%">{{ $value->category }}</th>
                                            </tr>
                                          @endif

                                            
                                            @if($element != $value->element)
                                              <tr > 
                                                                                                        <td data-label="Permission">{{ $value->element }}</td>
                                                                                                                                                            @foreach($allpermissions->where('element', $element)->all() as $value2)
                                                      @if($y == 1)
                                                        <td data-label="LIST"  style = "text-align: right;">{{ Form::checkbox('permission[]', $value2->id, in_array($value2->id, $rolePermissions) ? true : false, array('class' => 'name', 'disabled')) }}</td>
                                                      @endif
                                                      @if($y == 2)
                                                        <td data-label="CREATE"  style = "text-align: right;">{{ Form::checkbox('permission[]', $value2->id, in_array($value2->id, $rolePermissions) ? true : false, array('class' => 'name', 'disabled')) }}</td>
                                                      @endif
                                                      @if($y == 3)
                                                        <td data-label="EDIT"  style = "text-align: right;">{{ Form::checkbox('permission[]', $value2->id, in_array($value2->id, $rolePermissions) ? true : false, array('class' => 'name', 'disabled')) }}</td>
                                                      @endif
                                                      @if($y == 4)
                                                        <td data-label="DELETE"  style = "text-align: right;">{{ Form::checkbox('permission[]', $value2->id, in_array($value2->id, $rolePermissions) ? true : false, array('class' => 'name', 'disabled')) }}</td>
                                                      @endif
                                                      @if($y == 5)
                                                        <td data-label="IMPORT"  style = "text-align: right;">{{ Form::checkbox('permission[]', $value2->id, in_array($value2->id, $rolePermissions) ? true : false, array('class' => 'name', 'disabled')) }}</td>
                                                      @endif
                                                                                                            @endforeach
                                              </tr>
                                            @endif
                                        @endforeach
                                      </table>


            </div>
          </div>
        </div>
        <br><br><br>
        <div class="footerbutton">
            <div class="card-footer">
              <div class="btn-group btn-block">
                <button type = "button" class="btn-sm btn-info" onclick="window.location.href='{{ route('admin.roles.index') }}'" style="width: 100%"><i class="fa fa-arrow-circle-left"></i> Back to List</button>

              </div>
            </div>
        </div> 

    </div>

  </div>

  <footer class="footer">
    <div class="d-sm-flex justify-content-center justify-content-sm-between">
      <span class="text-muted d-block text-center text-sm-left d-sm-inline-block">Copyright © St Joseph Drug 2021</span>
    </div>
  </footer>
  <!-- partial -->
</div>



<!-- jQuery -->
<script src="{{ asset('admin/plugins/jquery/jquery.min.js') }}"></script> 

<script src="{{ asset('plusadmin/vendors/js/vendor.bundle.base.js') }}"></script>
<!-- endinject -->

    <script src="{{ asset('plusadmin/vendors/select2/select2.min.js') }}"></script>

<!-- Plugin js for this page -->
<script src="{{ asset('plusadmin/vendors/jquery-bar-rating/jquery.barrating.min.js') }}"></script>
<script src="{{ asset('plusadmin/vendors/chart.js/Chart.min.js') }}"></script>
<script src="{{ asset('plusadmin/vendors/flot/jquery.flot.js') }}"></script>
<script src="{{ asset('plusadmin/vendors/flot/jquery.flot.resize.js') }}"></script>
<script src="{{ asset('plusadmin/vendors/flot/jquery.flot.categories.js') }}"></script>
<script src="{{ asset('plusadmin/vendors/flot/jquery.flot.fillbetween.js') }}"></script>
<script src="{{ asset('plusadmin/vendors/flot/jquery.flot.stack.js') }}"></script>
<!-- End plugin js for this page -->
<!-- inject:js -->
<script src="{{ asset('plusadmin/js/off-canvas.js') }}"></script>
<script src="{{ asset('plusadmin/js/hoverable-collapse.js') }}"></script>
<script src="{{ asset('plusadmin/js/misc.js') }}"></script>
<script src="{{ asset('plusadmin/js/settings.js') }}"></script>
<script src="{{ asset('plusadmin/js/todolist.js') }}"></script>
<!-- endinject -->
<!-- Custom js for this page -->
<script src="{{ asset('plusadmin/js/dashboard.js') }}"></script>

<link rel="stylesheet" type="text/css" href="{{ asset('mylib/css/dataTables.rowReorder.min.css') }}"> 
<link rel="stylesheet" type="text/css" href="{{ asset('mylib/css/dataTables.responsive.min.css') }}"> 


<link rel="stylesheet" type="text/css" href="{{ asset('mylib/css/jquery.dataTables.css') }}"> 
<link rel="stylesheet" type="text/css" href="{{ asset('mylib/css/buttons.dataTables.min.css') }}"> 

<script type="text/javascript" language="javascript" src="{{ asset('mylib/js/jquery.dataTables.min.js') }}"></script>
<script type="text/javascript" language="javascript" src="{{ asset('mylib/js/dataTables.buttons.min.js') }}"></script>
<script type="text/javascript" language="javascript" src="{{ asset('mylib/js/jszip.min.js') }}"></script>
<script type="text/javascript" language="javascript" src="{{ asset('mylib/js/pdfmake.min.js') }}"></script>
<script type="text/javascript" language="javascript" src="{{ asset('mylib/js/vfs_fonts.js') }}"></script>
<script type="text/javascript" language="javascript" src="{{ asset('mylib/js/buttons.html5.min.js') }}"></script>
<script type="text/javascript" language="javascript" src="{{ asset('mylib/js/buttons.colVis.min.js') }}"></script> 

<script type="text/javascript" language="javascript" src="{{ asset('mylib/js/dataTables.rowReorder.min.js') }}"></script> 
<script type="text/javascript" language="javascript" src="{{ asset('mylib/js/dataTables.responsive.min.js') }}"></script> 

<script src="{{ asset('plusadmin/js/select2.js') }}"></script>

<script>
function validateForm() {
  

  if(document.getElementById('name').value == ""){
    alert( 'Please Enter Name to Continue!' );
    return false;
  }

  if(document.getElementById('email').value == ""){
    alert( 'Please Enter Email Address to Continue' );
    return false;
  }  

  if(document.getElementById('password').value == ""){
    alert( 'Please Enter Password to Continue' );
    return false;
  }  

  if(document.getElementById('password').value != document.getElementById('confirm-password').value){
    alert( 'Password and Confirm Password does not Match!' );
    return false;
  }  


  var ok = confirm("Proceed with your Leave Application?");
  if(ok){  
    document.getElementById("mybtn").disabled = true;
    return true; 
  } else {  
    return false; 
  }
}
</script>

<script>
function toggleme(source) {

  var id = source.getAttribute('id');
  
  var array = id.split(', ');
  var start = array[0] - 1;
  var end = array[1];  
   
  var checkboxes = document.getElementsByName('permission[]');

  
  for(var i=start, n=checkboxes.length;i<end;i++) {
  //for(var i=0, n=checkboxes.length;i<end;i++) {
    checkboxes[i].checked = source.checked;
  }
}   
</script>

@endsection