@extends('layouts.backapp')

@section('content')
@if (session('success'))
<div class="alert alert-success alert-dismissible fade show" role="alert">
    <p>{{ session('success') }}</p>
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
</div>
@endif
  
<div class="kt-portlet kt-portlet--mobile" id="kt_blockui_datatable">
    <div class="kt-portlet__head kt-portlet__head--lg">
        <div class="kt-portlet__head-label">
            <span class="kt-portlet__head-icon">
                <i class="kt-font-brand flaticon2-line-chart"></i>
            </span>
            <h3 class="kt-portlet__head-title">
                Role & Privileges
            </h3>
        </div>
        @can('create', $menus['roleprivileges.index'])
        <div class="kt-portlet__head-toolbar">
            <div class="kt-portlet__head-wrapper">
                <div class="kt-portlet__head-actions">
                    <button type="button" class="btn btn-bold btn-label-brand btn-sm" data-toggle="modal" data-target="#roleModal"> Tambah </button>
                </div>
            </div>
        </div>
        @endcan
    </div>

    <div class="kt-portlet__body">
        <div class="table-responsive">
            <!--begin: Datatable -->
            <table class="table table-striped table-bordered table-hover table-checkable" id="kt_table">
                <thead>
                    <tr>
                        <th>No</th>
                        <th>Nama Role</th>
                        <th>Aksi</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($roles as $role)
                    <tr>
                        <td>{{ $loop->iteration }}</td>
                        <td>{{ $role->name }}</td>
                        <td>
                            @can('update', $menus['roleprivileges.index'])
                            <button class="btn btn-sm btn-warning" onclick="editRole({{$role->id}})"><i class="fa fa-edit"></i> Edit</button>    
                            @endcan
                            @can('delete', $menus['roleprivileges.index'])
                            <br>
                            <br>
                            <form action="{{ route('roleprivileges.delete', $role->id) }}" method="post" onsubmit="return confirm('Anda akan menghapus role {{ $role->name }}?');">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="btn btn-sm btn-danger"><i class="fa fa-trash"></i> Hapus</button>    
                            </form>
                            @endcan
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
            <!--end: Datatable -->
        </div>
    </div>
</div>

<!-- Modal -->
<div class="modal fade" id="roleModal" tabindex="-1" role="dialog" aria-labelledby="roleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">
    <form action="{{ route('roleprivileges.store') }}" method="post">
        @csrf
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="roleModalLabel">Tambah Role & Privileges</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <div class="form-group">
                <label for="role">Nama Role Baru </label>
                <input type="text" class="form-control @error('role') is-invalid @enderror" name="role" id="role">
                @error('role')
                    <span class="invalid-feedback" role="alert">
                        <strong>{{ $message }}</strong>
                    </span>
                @enderror
            </div>
            <div class="container @error('privileges') is-invalid @enderror" id="role-privilege">
                @foreach ($menus as $menu)
                <div>
                    <h5>{{ $menu->name }}</h5>
                    <div class="row">
                        @if ($menu->link == 'adminarea' || $menu->link == 'mechanicarea')
                        <div class="col-lg-12">
                            <div class="form-group">
                                <label style="cursor: pointer;"><input type="checkbox" onChange="if(this.checked) { this.parentNode.nextElementSibling.value = 1 }else{ this.parentNode.nextElementSibling.value = 0} "/> View</label>
                                <input type="hidden" value="0" name="privileges[{{ $menu->id }}][view]">
                                <input type="hidden" value="0" name="privileges[{{ $menu->id }}][create]">
                                <input type="hidden" value="0" name="privileges[{{ $menu->id }}][update]">
                                <input type="hidden" value="0" name="privileges[{{ $menu->id }}][delete]">
                            </div>  
                        </div>
                        @else
                        <div class="col-lg-3">
                            <div class="form-group">
                                <label style="cursor: pointer;"><input type="checkbox" onChange="if(this.checked) { this.parentNode.nextElementSibling.value = 1 }else{ this.parentNode.nextElementSibling.value = 0} "/> Create</label>
                                <input type="hidden" value="0" name="privileges[{{ $menu->id }}][create]">
                            </div>
                        </div>
                        <div class="col-lg-3">
                            <div class="form-group">
                                <label style="cursor: pointer;"><input type="checkbox" onChange="if(this.checked) { this.parentNode.nextElementSibling.value = 1 }else{ this.parentNode.nextElementSibling.value = 0} "/> Update</label>
                                <input type="hidden" value="0" name="privileges[{{ $menu->id }}][update]">
                            </div>
                        </div>
                        <div class="col-lg-3">
                            <div class="form-group">
                                <label style="cursor: pointer;"><input type="checkbox" onChange="if(this.checked) { this.parentNode.nextElementSibling.value = 1 }else{ this.parentNode.nextElementSibling.value = 0} "/> Delete</label>
                                <input type="hidden" value="0" name="privileges[{{ $menu->id }}][delete]">
                            </div>
                        </div>
                        <div class="col-lg-3">
                            <div class="form-group">
                                <label style="cursor: pointer;"><input type="checkbox" onChange="if(this.checked) { this.parentNode.nextElementSibling.value = 1 }else{ this.parentNode.nextElementSibling.value = 0} "/> View</label>
                                <input type="hidden" value="0" name="privileges[{{ $menu->id }}][view]">
                            </div>  
                        </div>
                        @endif
                    </div>
                </div>
                @endforeach
            </div>
            @error('privileges')
                <span class="invalid-feedback" role="alert">
                    <strong>{{ $message }}</strong>
                </span>
            @enderror
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            <button type="submit" class="btn btn-primary">Save changes</button>
          </div>
        </div>
    </form>
  </div>
</div>

<!-- Modal -->
<div class="modal fade" id="roleEditModal" tabindex="-1" role="dialog" aria-labelledby="roleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
      <form action="" method="post">
          @csrf
          @method('PUT')
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="roleModalLabel">Tambah Role & Privileges</h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body">
              <div class="form-group">
                  <label for="role">Nama Role Baru </label>
                  <input type="text" class="form-control @error('role') is-invalid @enderror" name="role" id="role">
                  @error('role')
                      <span class="invalid-feedback" role="alert">
                          <strong>{{ $message }}</strong>
                      </span>
                  @enderror
              </div>
              <div class="container" id="role-privilege-edit">
                 
              </div>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
              <button type="submit" class="btn btn-primary">Save changes</button>
            </div>
          </div>
      </form>
    </div>
</div>
@endsection

@section('javascripts')
<script>
    function editRole(id) {
        let url = '{{ route("roleprivileges.edit", ":id") }}'
            url = url.replace(':id', id);
        
        $.ajax({
            url: url,
            type: 'GET',
            success: function(res) {
                let url = '{{ route("roleprivileges.update", ":id") }}'
                    url = url.replace(':id', id);
                $("#roleEditModal").modal("show")
                $("#roleEditModal form").attr("action", url)
                $("#roleEditModal input[name='role']").val(res.role.name)

                let menuHtml = ''
                for(let i = 0; i < res.role_privileges.length; i++) {
                    const menu = res.role_privileges[i]
                    const isCreateChecked = menu.create == 1 ? "checked" : ""
                    const isUpdateChecked = menu.update == 1 ? "checked" : ""
                    const isDeleteChecked = menu.delete == 1 ? "checked" : ""
                    const isViewChecked = menu.view == 1 ? "checked" : ""
                    
                    if(menu.name == 'Admin Area' || menu.name == 'Mekanik Area') {
                        menuHtml += `
                            <h5>${menu.name}</h5>
                            <div class="row">
                                <input type="hidden" value="${menu.create}" name="privileges[${menu.menu_id}][create]">
                                <input type="hidden" value="${menu.update}" name="privileges[${menu.menu_id}][update]">
                                <input type="hidden" value="${menu.delete}" name="privileges[${menu.menu_id}][delete]">
                                <div class="col-lg-12">
                                    <div class="form-group">
                                        <label><input type="checkbox" ${isViewChecked} onChange="if(this.checked) { this.parentNode.nextElementSibling.value = 1 }else{ this.parentNode.nextElementSibling.value = 0} "/> View</label>
                                        <input type="hidden" value="${menu.view}" name="privileges[${menu.menu_id}][view]">
                                    </div>
                                </div>
                            </div>
                            `
                    }else{
                        menuHtml += `
                            <h5>${menu.name}</h5>
                            <div class="row">
                                <div class="col-lg-3">
                                    <div class="form-group">
                                        <label><input type="checkbox" ${isCreateChecked} onChange="if(this.checked) { this.parentNode.nextElementSibling.value = 1 }else{ this.parentNode.nextElementSibling.value = 0} "/> Create</label>
                                        <input type="hidden" value="${menu.create}" name="privileges[${menu.menu_id}][create]">
                                    </div>
                                </div>
                                <div class="col-lg-3">
                                    <div class="form-group">
                                        <label><input type="checkbox" ${isUpdateChecked} onChange="if(this.checked) { this.parentNode.nextElementSibling.value = 1 }else{ this.parentNode.nextElementSibling.value = 0} "/> Update</label>
                                        <input type="hidden" value="${menu.update}" name="privileges[${menu.menu_id}][update]">
                                    </div>
                                </div>
                                <div class="col-lg-3">
                                    <div class="form-group">
                                        <label><input type="checkbox" ${isDeleteChecked} onChange="if(this.checked) { this.parentNode.nextElementSibling.value = 1 }else{ this.parentNode.nextElementSibling.value = 0} "/> Delete</label>
                                        <input type="hidden" value="${menu.delete}" name="privileges[${menu.menu_id}][delete]">
                                    </div>
                                </div>
                                <div class="col-lg-3">
                                    <div class="form-group">
                                        <label><input type="checkbox" ${isViewChecked} onChange="if(this.checked) { this.parentNode.nextElementSibling.value = 1 }else{ this.parentNode.nextElementSibling.value = 0} "/> View</label>
                                        <input type="hidden" value="${menu.view}" name="privileges[${menu.menu_id}][view]">
                                    </div>
                                </div>
                            </div>
                            `
                    }
                }

                $("#roleEditModal #role-privilege-edit").html(`<div>${menuHtml}</div>`)
            }
        })
    }
</script>
@endsection