@extends('layouts.app')

@section('content')
<style type="text/css">
.form-check {
  display: flex;
  align-items: center;
}

.form-check-input {
  order: 2; /* move checkbox to the end */
  margin-left: auto; /* space between text and checkbox */
}

.form-check-label::before {
  font-weight: bold;
}

.bg-light {
    background-color: rgb(223 229 255) !important;
}
.case{
  border: 1px solid #eb7f1a;
}

</style>
<div class="container-fluid">
    <!-- Page Header -->
        <div class="">
          <br>
          <div class="row"> 
            <div class="col-md-12 mb-10">
              <div class="card custom-card" style="padding:10px">
              <h4>{{ $user->name }} ({{$user->agentcode}}) </h4>
            </div>
            </div>
          </div>
        </div>

    
    <!-- End Page Header -->
    <form id="permissionForm" action="{{route('toolssetpermission')}}" method="post">
      <input type="hidden" name="user_id" value="{{$user_id}}">
      @csrf
    <div class="row">
      
      @foreach ($permissions as $key => $value)
        <div class="col-xl-6">
            <div class="card custom-card">
                <div class="card-header justify-content-between">
                   <div class="card-title">
                      {{ucfirst($key)}}
                   </div>
                </div>
                <div class="card-body">
                    <div class="row">
                      @foreach ($value as $permission)
                        <div class="col-md-4 mb-1">
                            <span class="badge bg-light text-dark">  {{$permission->name}} </span>&nbsp;&nbsp;
                        </div>
                        <div class="col-md-2 mb-1">
                            <input class="form-check-input case" type="checkbox" name="permissions[]" value="{{$permission->id}}" id="{{$permission->id}}">
                        </div>
                      @endforeach  

                    </div>

                  </div>

            </div>
        </div>
      @endforeach
                          
    </div>
        <input type="submit" class="btn btn-sm btn-primary-gradient">
  </form>  




    </div>

</div>

@endsection
@section('scripts')
<script type="text/javascript">
  $(document).ready(function() {
    var userid = '{{ $user->id }}';
    getPermission(userid);
    $('form#permissionForm').submit(function(){
        var form= $(this);
            $(this).ajaxSubmit({
                dataType:'json',
                beforeSubmit:function(){
                    form.find('button[type="submit"]').button('loading');
                },
                complete: function(){
                    form.find('button[type="submit"]').button('reset');
                },
                success:function(data){
                    if(data.status == "success"){
                   
                        msgalert('success', 'Permission Set Successfully');
                    }else{
                        msgalert('failed','Form Submission Failed');
                    }
                },
                error: function(errors) {
                  showError(errors, form);
                }
            });
            return false;
      });

  });

  function getPermission(id) {
      if(id.length != ''){
          $.ajax({
              url: '{{url('tools/get/permission')}}/'+id,
              type: 'post',
              dataType: 'json',
              headers: {
                  'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
              },
          })
          .done(function(data) {
              $('#permissionForm').find('[name="user_id"]').val(id);
              $('.case').each(function() {
                 this.checked = false;
              });
              $.each(data, function(index, val) {
                  $('#permissionForm').find('input[value='+val.permission_id+']').prop('checked', true);
              });
          })
          .fail(function() {
             // notify('Somthing went wrong', 'warning');
          });
      }
  }



</script>
@endsection