@extends('layouts.admin')

@section('title', 'Setting Permission')

@section('content')
<div class="main-content">
<section class="section">

<div class="section-header">
  <h1>Setting Permission</h1>
  <div class="section-header-button">
    <a href="{{ route('admin.permissions.create') }}"
       class="btn btn-primary">
       <i class="fas fa-plus"></i> Tambah Permission
    </a>
  </div>
</div>

<div class="card">
<div class="card-body">

@if(session('success'))
<div class="alert alert-success">
    {{ session('success') }}
</div>
@endif

<div class="table-responsive">
<table class="table table-bordered table-striped">
<thead class="thead-light">
<tr>
    <th>No</th>
    <th>Nama Permission</th>
    <th>Slug</th>
    <th>Aksi</th>
</tr>
</thead>
<tbody>
@foreach($permissions as $permission)
<tr>
    <td>{{ $loop->iteration }}</td>
    <td>{{ $permission->name }}</td>
    <td>
        <span class="badge badge-info">
            {{ $permission->slug }}
        </span>
    </td>
    <td>
        <form action="{{ route('admin.permissions.destroy',$permission) }}"
              method="POST"
              style="display:inline;">
            @csrf
            @method('DELETE')
            <button class="btn btn-danger btn-sm"
                    onclick="return confirm('Yakin hapus permission ini?')">
                <i class="fas fa-trash"></i>
            </button>
        </form>
    </td>
</tr>
@endforeach
</tbody>
</table>
</div>

</div>

</div>

<hr>
<div id="permission-alert" class="alert alert-success d-none">
    Permission berhasil diperbarui
</div>
{{-- ================= ROLE PERMISSION MATRIX ================= --}}
<div class="card mt-4">
<div class="card-header">
    <h6>Mapping Permission ke Role</h6>
</div>
<div class="card-body">

@foreach($roles as $role)
<div class="mb-4 p-3 border rounded">
    <h6>
        <i class="fas fa-user-tag text-primary"></i>
        {{ $role->name }}
    </h6>

    <div class="row">
        @foreach($permissions as $permission)
        <div class="col-md-3">
            <div class="form-check">
                <input class="form-check-input permission-checkbox"
                       type="checkbox"
                       data-role="{{ $role->id }}"
                       data-permission="{{ $permission->id }}"
                       {{ $role->permissions->contains($permission->id) ? 'checked' : '' }}>
                <label class="form-check-label">
                    {{ $permission->name }}
                </label>
            </div>
        </div>
        @endforeach
    </div>
</div>
@endforeach

</div>
</div>

</section>
</div>
@endsection

@push('scripts')
<script>
document.querySelectorAll('.permission-checkbox').forEach(function(checkbox){

    checkbox.addEventListener('change', function(){

        fetch("{{ route('admin.permissions.updateRolePermission') }}", {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
                "X-CSRF-TOKEN": "{{ csrf_token() }}"
            },
            body: JSON.stringify({
                role_id: this.dataset.role,
                permission_id: this.dataset.permission,
                checked: this.checked
            })
        })
        .then(response => response.json())
        .then(data => {

            if(data.status) {

                let alertBox = document.getElementById('permission-alert');

                alertBox.classList.remove('d-none');
                alertBox.innerHTML = "Permission berhasil diperbarui ✔";

                setTimeout(function(){
                    alertBox.classList.add('d-none');
                }, 2000);

            }
        })
        .catch(error => {
            alert("Terjadi kesalahan!");
        });

    });

});
</script>
@endpush