@extends('backend.master')

@section('content')
<link rel="stylesheet" href="https://cdn.datatables.net/v/bs4/dt-1.10.16/datatables.min.css"/>
<script src="https://cdn.datatables.net/v/bs4/dt-1.10.16/datatables.min.js"></script>
<script src="https://cdn.datatables.net/plug-ins/1.10.16/api/fnReloadAjax.js"></script>
<!-- Include the plugin's CSS and JS: -->
<script src="{{ url('/') }}/backend/js/bootstrap-multiselect.js"></script>
<link rel="stylesheet" href="{{ url('/') }}/backend/css/bootstrap-multiselect.css"/>

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<style>
    #role-table .btn-edit{
        padding: 0px 10px;
        cursor: pointer;
    }
</style>

<section class="content-header">
    <h1 class="text-center font-weight-600">Danh sách vai trò</h1>
    <div class="add-item text-center">
        <a id="create_role" data-toggle="modal" data-target="#add_role_modal" class="btn btn-success btn-sm" title="Thêm vai trò"> <i class="fa fa-plus"></i> Thêm vai trò</a>
    </div>
</section>
<section class="content">
    <div class="row">
        <div class="col-md-12">
            <div class="table-responsive">
                <table class="table table-bordered" id="role-table">
                    <thead class="thead-custom">
                        <tr>
                            <th class="id-field" width="1%">
                                <input type="checkbox" id="select-all-btn" data-check="false">
                            </th>
                            <th scope="col">Tên</th>
                            <th scope="col">Thao tác</th>
                        </tr>
                    </thead>
                    <tbody>
                        
                    </tbody>
                </table>
                <p class="action-selected-rows">
                    <span >Hành động trên các hàng đã chọn:</span>
                    <span class="btn btn-info ml-2" id="apply-all-btn">Xóa</span>
                </p> 
            </div>
            <div id="edit_permission_modal" class="modal fade" tabindex="-1" role="dialog">
              <div class="modal-dialog" role="document">
                <div class="modal-content">
                  <div class="modal-header">
                    <h5 class="modal-title font-weight-600">Chỉnh sửa quyền</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 row">
                        <label for="permissionName_upd" class="col-sm-5 col-form-label">Tên quyền <span class="text-danger">*</span></label>
                        <div class="col-sm-7">
                            <input type="hidden" id="permissionID_upd" value="">
                            <input type="text" class="form-control" id="permissionName_upd">
                            <div class="alert-errors" role="alert" id="permission_nameErrorUpd"></div>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="permissionRoute_upd" class="col-sm-5 col-form-label">Nhóm quyền <span class="text-danger">*</span></label>
                        <div class="col-sm-7">
                        {{ Form::select('permissionGroup', ['1' => 'Giao diện người dùng', '2' => 'dịch vụ', '8' => 'Đơn hàng', '3' => 'Khách hàng', '4' => 'Bài viết', '5' => 'Tài khoản quản trị', '6' => 'Page', '7' => 'Liên hệ'], null, ['id' => 'permissionGroup_upd', 'class' => 'form-control', 'placeholder' => '--Chọn nhóm--']) }}
                        <div class="alert-errors" role="alert" id="permission_groupErrorUpd"></div>
                        </div>
                    </div>
                  </div>
                  <div class="modal-footer">
                    <button type="button" class="btn btn-primary" id="savePermission">Cập nhật</button>
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Hủy bỏ</button>
                  </div>
                </div>
              </div>
            </div>
        </div>
    </div>
    <div id="edit_role_modal" class="modal fade" tabindex="-1" role="dialog">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title font-weight-600">Chỉnh sửa vai trò</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 row">
                <label for="roleName_upd" class="col-sm-4 col-form-label">Tên vai trò <span class="text-danger">*</span></label>
                <div class="col-sm-8">
                    <input type="hidden" id="roleID_upd" value="">
                    <input type="text" class="form-control" id="roleName_upd">
                    <div class="alert-errors" role="alert" id="roleNameErrorUpd"></div>
                </div>
            </div>
            <div class="form-group row">
                <label for="roleName_upd" class="col-sm-4 col-form-label">Danh sách quyền <span class="text-danger">*</span></label>
                <div class="col-sm-8" id="permistion-group">
                    <select id="permission-list" multiple="multiple">