@extends('layouts.app')
@section('title')Permissions @endsection
@section('content')

<div class="box box-default color-palette-box">
        <div class="box-header with-border">
        <div class="row">
         <div class="col-md-12">

         <div class="box">
            <div class="box-header">
              <h3 class="box-title">Permissions</h3>
            </div>
            <!-- /.box-header -->
            <div class="box-body">
              <table id="example1" class="table table-bordered table-striped">
                <thead>
                <tr>
                  <th>Name</th>
                  <th>Permissions</th>
                  <th>Action</th>
                </tr>
                </thead>
                <tbody>
                @foreach($users as $user)
                @if($user->id==1 || $user->id==Auth::id())
                @else
                <tr>
                  <td>{{$user->name}}</td>
                  <td>
                                    @foreach($permissions as $permission)
                  @if($permission->user_id==$user->id)
                  {{$c++ }}:{{$permission->module}} <br>
                  @endif
                  @endforeach
                  </td>
                  <!--  -->
                  <td>
                  <button class="btn btn-primary"  onclick="info({{$user->id}})"><i class="fa fa-info" ></i></button>
                  <button class="btn btn-primary" data-toggle="modal" data-target="#modal-default" onclick="ChooseContact({{$user->id}})"><i class="fa fa-edit" ></i></button>
                  </td>
                </tr>
                @endif
                @endforeach
                </tbody>
                <tfoot>
                <tr>
                  <th>Name</th>
                  <th>Permissions</th>
                  <th>Action</th>
                </tr>
                </tfoot>
              </table>
            </div>
            <!-- /.box-body -->
          </div>
          <!-- /.box -->
        </div>
      </div>
      <!-- /.row -->
    </div>
</div>

<!-- The Modal for info -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog modal-dialog-centered" role="document">

  <!-- Modal content -->
  <div class="modal-content">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">User Details</h4>
      </div>
           <div class="modal-body demo">
           </div>
  </div>

</div>
</div>

<div class="modal fade" id="modal-default">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">Permissions</h4>
              </div>
              <div class="modal-body">
                 <form action="{{route('updatepermissions')}}" id="form" >
                 <input type="hidden" name="user" id="user">
                 <!-- checkbox -->
              <div class="form-group">
                <label>
                  <input type="checkbox"  name="perm[]" value=1 id=1 >Dasboard<i style="color:red">*</i> <i id="msg" style="color:red" focus>(Select Dashboard)</i>
                </label>
              </div>
                 <!-- checkbox -->
              <div class="form-group">
                <label>
                  <input type="checkbox"  name="perm[]"  value=2 id=2 >Jobs List
                </label>
              </div>
                 <!-- checkbox -->
              <div class="form-group">
                <label>
                  <input type="checkbox"  name="perm[]"  value=3 id=3 >Add Job
                </label>
              </div>
                 <!-- checkbox -->
              <div class="form-group">
                <label>
                  <input type="checkbox"  name="perm[]"  value=4 id=4 >Modify Job
                </label>
              </div>
                 <!-- checkbox -->
              <div class="form-group">
                <label>
                  <input type="checkbox"  name="perm[]"  value=5 id=5 >Delete Job
                </label>
              </div>
                 <!-- checkbox -->
              <div class="form-group">
                <label>
                  <input type="checkbox"  name="perm[]"  value=6 id=6 >Update Job
                </label>
              </div>
                 <!-- checkbox -->
              <div class="form-group">
                <label>
                  <input type="checkbox"  name="perm[]"  value=7 id=7 >Assign Permissions
                </label>
              </div>
                 <!-- checkbox -->
              <div class="form-group">
                <label>
                  <input type="checkbox"  name="perm[]"  value=8 id=8 >Add User
                </label>
              </div>
                 <!-- checkbox -->
              <div class="form-group">
                <label>
                  <input type="checkbox"  name="perm[]"  value=9 id=9  >Add Updates
                </label>
              </div>
               <div class="form-group">
                <label>
                  <input type="checkbox"  name="perm[]"  value=10 id=10  >Calender                </label>
              </div>
              <div class="form-group">
                <label>
                  <input type="checkbox"  name="perm[]"  value=11 id=11  >Pending Status Notice Board                </label>
              </div>
              <div class="form-group">
                <label>
                  <input type="checkbox"  name="perm[]"  value=12 id=12  >Property Check                </label>
              </div>
              <div class="form-group">
              </div>
              </div>
              </form>
              <div class="modal-footer">
                <button type="button" class="btn btn-default pull-left" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" id="save" onclick="check()">Save changes</button>
              </div>
            </div>
            <!-- /.modal-content -->
          </div>
          <!-- /.modal-dialog -->
        </div>
        <!-- /.modal -->


<script  type="text/javascript">

$('#msg').hide();

//Dashboard must be selected
var checker = document.getElementById(1);
function check(){
if(checker.checked){
  $('#form').submit()
} else {
    $('#msg').show();
}

}


  $(function () {
    $('#example1').DataTable()
  })

  function ChooseContact(data) {
    $('input[ name="perm[]" ]').each(function() {
			this.checked = false;
		});

    var permissionss = ;
    selected_id=data;
    $('#user').val(data);
    permissionss.forEach(myfunction);

}


function myfunction(item,index)
{
    if(item.user_id == selected_id)
        {
          console.log(item.module_id)
          $("#".concat(item.module_id)).prop('checked',true);
        }
}


function info(data) {
    var selected_jobs = ;
    selected_id=data;
    selected_jobs.forEach(infofunction);

}

function infofunction(item,index)
{
    if(item.id == selected_id)
        {
          $forname="<p>First Name :<b>".concat(item.name,"</b></p>");
          $lastname="<p>Last Name :<b>".concat(item.last_name,"</b></p>");
          $address="<p>Address :<b>".concat(item.address,"</b></p>","<p>Email :<b>",item.email,"</b></p>");
          $contact="<p>Contact Number :<b>".concat(item.phone,"</b></p>");
         $a="".concat($forname,$lastname,$address,$contact);
          $('#myModal').modal('toggle');
          $('#myModal').modal('show');
          $("div.demo").html( $a );
        }
}

</script>

@endsection