<template>
<div class="container-fluid">
  <section class="content">
    <div class="header pb-2">
      <div class="header-body">
        <div class="row align-items-center py-4">
          <div class="col-lg-6 col-md-7">
            <nav
              aria-label="breadcrumb"
              class="d-none d-md-inline-block ml-md-4"
            >
              <ol class="breadcrumb breadcrumb-links">
                <li class="breadcrumb-item">
                  <a href="#"><i class="fas fa-home"></i></a>
                </li>
                <li class="breadcrumb-item">
                  <a href="#">Dashboards</a>
                </li>
                <li class="breadcrumb-item">
                  <a href="#">Permissions</a>
                </li>
              </ol>
            </nav>
          </div>
          <div class="col-lg-6 col-md-5 text-right"></div>
        </div>
      </div>
    </div>
    <div class="row" v-if="isLoggedIn">
      <div class="col-lg-12">
        <div class="row">
          <div class="col-md-4 col-xl-4">
            <div class="card">
              <div class="card-header border-0">
                <div class="row d-flex justify-content-between px-2">
                  <div>
                    <h3 class="mb-0">ປະເພດຜູ້ໃຊ້</h3>
                  </div>
                  <div v-if="$store.getters['getroles'].includes('setting_permission_add')">
                    <a
                      href="javascript:void(0)"
                      v-if="ShFB"
                      @click="SaveRoles"
                      :class="checkNameRoles"
                      class="btn btn-sm btn-success btn-round btn-icon"
                      ><i class="fas fa-save"></i> ບັນທຶກ
                    </a>
                    <a
                      href="javascript:void(0)"
                      v-if="ShFB"
                      @click="CancelRoles"
                      class="btn btn-sm btn-danger btn-round btn-icon"
                      ><i class="fas fa-trash"></i> ຍົກເລີກ
                    </a>
                    <a
                      href="javascript:void(0)"
                      v-if="!ShFB"
                      @click="AddRoles"
                      class="btn btn-sm btn-info btn-round btn-icon"
                      ><i class="fas fa-plus"></i> ເພີ່ມໃໝ່
                    </a>
                  </div>
                </div>
              </div>
              <div class="card-body" v-if="ShFB">
                <label class="form-control-label"
                  >ຊື່ປະເພດຜູ້ໃຊ້: <span class="text-red">* </span></label
                >
                <div class="input-group input-group-merge">
                  <div class="input-group-prepend">
                    <span class="input-group-text"
                      ><i class="fas fa-file-signature"></i
                    ></span>
                  </div>
                  <input
                    type="text"
                    class="form-control"
                    v-model="roles_name"
                    ref="name_roles"
                    v-on:keyup="onEnter($event)"
                  />
                </div>
              </div>
              <div class="table-responsive" v-if="!ShFB">

                <table class="table align-items-center table-flush">
                  <thead class="thead-light">
                    <tr>
                      <th>ຊື່ປະເພດສິດ ຂອງຜູ້ໃຊ້</th><th width="40" v-if="$store.getters['getroles'].includes('setting_permission_edit') || $store.getters['getroles'].includes('setting_permission_remove')"></th>
                      <th width="90" class="text-center" v-if="$store.getters['getroles'].includes('setting_permission_edit') || $store.getters['getroles'].includes('setting_permission_remove')">ຈັດການ</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr v-if="loading">
                      <td colspan="3" class="text-center">
                        <content-loader viewBox="-10 10 450 110" >
                            <rect x="0" y="0" rx="3" ry="3" width="350" height="5" />
                            <rect x="10" y="20" rx="3" ry="3" width="320" height="5" />
                            <rect x="0" y="40" rx="3" ry="3" width="370" height="5" />
                            <rect x="10" y="60" rx="3" ry="3" width="350" height="5" />
                            <rect x="0" y="80" rx="3" ry="3" width="300" height="5" />
                            <rect x="10" y="100" rx="3" ry="3" width="380" height="5" />
                      </content-loader>
                      </td>
                    </tr>
                    <tr v-for="ro in allRoles" :key="ro.id">
                      <td>
                        <b> {{ ro.roles_name }} </b>
                      </td>
                      <td v-if="$store.getters['getroles'].includes('setting_permission_edit') || $store.getters['getroles'].includes('setting_permission_remove')">
                        <i class="fas fa-chevron-up cursor-pointer" @click="listUp(ro.sort)"></i>

                      <i class="fas fa-chevron-down cursor-pointer" @click="listDown(ro.sort)"></i></td>
                      <td class="table-actions text-center" v-if="$store.getters['getroles'].includes('setting_permission_edit') || $store.getters['getroles'].includes('setting_permission_remove')">
                        <div class="col-auto">
                          <button
                            type="button"
                            class="btn btn-sm btn-neutral mr-0"
                            data-toggle="dropdown"
                            aria-haspopup="true"
                            aria-expanded="false"
                          >
                            <i class="fas fa-ellipsis-h"></i>
                          </button>
                          <div
                            class="dropdown-menu dropdown-menu-right"
                            style=""
                          >
                            <a v-if="$store.getters['getroles'].includes('setting_permission_edit')" href="javascript:void(0)" @click="editRoles(ro.id)" class="dropdown-item" > <i class="fas fa-user-edit text-info"></i >ແກ້ໄຂຂໍ້ມູນ</a >
                            <a v-if="$store.getters['getroles'].includes('setting_permission_remove')" class="dropdown-item" href="javascript:void(0)" @click="delRoles(ro.id)" ><i class="fas fa-trash text-red"></i>ລຶບຂໍ້ມູນ</a >
                          </div>
                        </div>
                      </td>
                    </tr>
                  </tbody>
                </table>

                <vuePagination
                  :pagination="Roles"
                  @paginate="getRoles()"
                  :offset="4"
                ></vuePagination>
                 </div>

            </div>


          </div>
          <div class="col-md-8 col-xl-8" v-if="$store.getters['getroles'].includes('setting_permission_edit') && $store.getters['getroles'].includes('setting_permission_remove')">
            <div class="card">
              <div class="card-header border-0">
                <div class="row d-flex justify-content-between px-2">
                  <div>
                    <h3 class="mb-0">ກຳນົດສິດຂອງຜູ້ໃຊ້</h3>
                  </div>
                  <div>

                    <a href="javascript:void(0)"  @click="SaveUserRoles" :class="btSaveR" class="btn btn-sm btn-success btn-round btn-icon" ><i class="fas fa-save"></i> ບັນທຶກ </a>
                  </div>
                </div>
              </div>
              <div class="row p-3">
                <div class="col-md-6">
                    <label class="form-control-label"
                    >ເລືອກປະເພດຜູ້ໃຊ້: <span class="text-red">* </span></label
                  >

                  <div class="input-group input-group-merge">
                    <div class="input-group-prepend">
                      <span class="input-group-text">
                        <i class="fas fa-user-tag"></i>
                        </span>
                    </div>
                    <select class="form-control" v-model="userRolesSelect" @change="OnchangUserRoles" >
                      <option value="" > == ເລືອກ == </option>
                      <option :value="ro.id" v-for="ro in AllRoles" :key="ro.index" > {{ro.roles_name}}</option>
                    </select>
                  </div>
                </div>
                <!-- <div class="col-md-6">
                      <label class="form-control-label"
                    >ເລືອກໂຊນຂອງສິດ: <span class="text-red">* </span></label
                  >

                  <div class="input-group input-group-merge">
                    <div class="input-group-prepend">
                      <span class="input-group-text"
                        ><i class="fas fa-file-signature"></i
                      ></span>
                    </div>
                    <select class="form-control" v-model="changSetting" >
                       <optgroup label="ໜ້າຫຼັກຄວບຄຸມ">
                        <option value="dash" >Dashboards </option>
                      </optgroup>
                       <optgroup label="ລະບົບຂາຍ POS">
                      <option value="pos">POS System</option>
                    </optgroup>
                    <optgroup label="ວຽກບໍລິການ">
                      <option value="service">Service</option>
                    </optgroup>
                    <optgroup label="ທຸລະກຳບັນຊີ">
                      <option value="trn">Transection</option>
                    </optgroup>
                    <optgroup label="ໃບບິນ ແລະ ໃບສະເໜີລາຄາ">
                      <option value="bill">Bill & Quotation</option>
                    </optgroup>
                    <optgroup label="ລະບົບ ສະຕ໋ອກສິນຄ້າ">
                      <option value="store">Store</option>
                    </optgroup>
                    <optgroup label="ຈັດການ ຜູ້ສະໜອງ">
                      <option value="supplier">Supplier</option>
                    </optgroup>
                    <optgroup label="ຈັດການ ຂໍ້ມູນລູກຄ້າ">
                      <option value="customer">Customer</option>
                    </optgroup>
                    <optgroup label="ຈັດການ ຂໍ້ມູນຜູ້ໃຊ້">
                      <option value="user">User</option>
                    </optgroup>
                    <optgroup label="ລະບົບລາຍງານ">
                      <option value="report">Report</option>
                    </optgroup>
                    <optgroup label="ການຕັ້ງຄ່າ">
                      <option value="setting">Setting</option>
                    </optgroup>
                    <optgroup label="ຜັງບັນຊີ">
                      <option value="accp">Accunting</option>
                    </optgroup>
                    </select>
                  </div>
                </div> -->
                </div>
              <div class="table-responsive">
                <!-- Projects table -->

           
                <table class="table align-items-center table-flush">
                  <thead class="thead-light">
                    <tr>
                      <th >ຊື່ເມນູກຳນົດສິດ</th>
                      <th>ສິດການເຂົ້າເຖິງຫຼັກ</th>
                      <th>ສິດການເຂົ້າເຖິງ</th>
                      <th>ສິດເພີ່ມຂໍ້ມູນ</th>
                      <th>ສິດແກ້ໄຂ</th>
                      <th>ສິດການລຶບຂໍ້ມູນ</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr >
                      <th>Dashboards</th>
                      <td>
                          <label class="custom-toggle" >
                          <input type="checkbox" v-model="dashboard_access" @click="SelectToles('dashboard_access')">
                          <span class="custom-toggle-slider rounded-circle" data-label-off="No" data-label-on="Yes"></span>
                        </label>
                      </td>
                      <td>

                      </td>
                      <td>

                      </td>
                      <td>

                      </td>
                      <td>

                      </td>
                    </tr>
                    <tr >
                      <th>ລະບົບ POS</th>
                      <td>
                          <label class="custom-toggle" >
                          <input type="checkbox" v-model="pos_access" @click="SelectToles('pos_access')">
                          <span class="custom-toggle-slider rounded-circle" data-label-off="No" data-label-on="Yes"></span>
                        </label>
                      </td>
                      <td>

                      </td>
                      <td>

                      </td>
                      <td>

                      </td>
                      <td>

                      </td>
                    </tr>
                    <tr >
                      <th>ວຽກບໍລິການ</th>
                      <td>
                          <label class="custom-toggle">
                          <input type="checkbox" v-model="work_assess" @click="SelectToles('work_assess')">
                          <span class="custom-toggle-slider rounded-circle" data-label-off="No" data-label-on="Yes"></span>
                        </label>
                      </td>
                      <td>

                      </td>
                      <td>

                      </td>
                      <td>

                      </td>
                      <td>

                      </td>
                    </tr>
                    <tr >
                      <th>ການສ້ອມແປງ</th>
                      <td>

                      </td>
                      <td>
                        <label class="custom-toggle">
                          <input type="checkbox" v-model="repaire_assess" @click="SelectToles('repaire_assess')">
                          <span class="custom-toggle-slider rounded-circle" data-label-off="No" data-label-on="Yes"></span>
                        </label>
                      </td>
                      <td>
                        <label class="custom-toggle">
                          <input type="checkbox" v-model="repaire_add" @click="SelectToles('repaire_add')">
                          <span class="custom-toggle-slider rounded-circle" data-label-off="No" data-label-on="Yes"></span>
                        </label>
                      </td>
                      <td>
                        <label class="custom-toggle">
                          <input type="checkbox" v-model="repaire_edit" @click="SelectToles('repaire_edit')">
                          <span class="custom-toggle-slider rounded-circle" data-label-off="No" data-label-on="Yes"></span>
                        </label>
                      </td>
                      <td>
                        <label class="custom-toggle">
                          <input type="checkbox" v-model="repaire_remove" @click="SelectToles('repaire_remove')">
                          <span class="custom-toggle-slider rounded-circle" data-label-off="No" data-label-on="Yes"></span>
                        </label>
                      </td>
                    </tr>
                    <tr >
                      <th>ການຮັບສັ່ງເຄື່ອງ</th>
                      <td>

                      </td>
                      <td>
                        <label class="custom-toggle">
                          <input type="checkbox" v-model="order_assess" @click="SelectToles('preorder_access')">
                          <span class="custom-toggle-slider rounded-circle" data-label-off="No" data-label-on="Yes"></span>
                        </label>
                      </td>
                      <td>
                        <label class="custom-toggle">
                          <input type="checkbox" v-model="order_add" @click="SelectToles('preorder_add')">
                          <span class="custom-toggle-slider rounded-circle" data-label-off="No" data-label-on="Yes"></span>
                        </label>
                      </td>
                      <td>
                        <label class="custom-toggle">
                          <input type="checkbox" v-model="order_edit" @click="SelectToles('preorder_edit')">
                          <span class="custom-toggle-slider rounded-circle" data-label-off="No" data-label-on="Yes"></span>
                        </label>
                      </td>
                      <td>
                        <label class="custom-toggle">
                          <input type="checkbox" v-model="order_remove" @click="SelectToles('preorder_remove')">
                          <span class="custom-toggle-slider rounded-circle" data-label-off="No" data-label-on="Yes"></span>
                        </label>
                      </td>
                    </tr>
                    <tr >
                      <th>ການເຄື່ອນໄຫວທຸລະກຳ</th>
                      <td>
                          <label class="custom-toggle">
                          <input type="checkbox" v-model="transession_access" @click="SelectToles('transession_access')">
                          <span class="custom-toggle-slider rounded-circle" data-label-off="No" data-label-on="Yes"></span>
                        </label>
                      </td>
                      <td> ບັນທຶກລາຍຮັບ
                        <label class="custom-toggle">
                          <input type="checkbox" v-model="transession_add_in" @click="SelectToles('transession_add_in')">
                          <span class="custom-toggle-slider rounded-circle" data-label-off="No" data-label-on="Yes"></span>
                        </label>
                      </td>
                      <td> ບັນທຶກລາຍຈ່າຍ
                        <label class="custom-toggle">
                          <input type="checkbox" v-model="transession_add_ex" @click="SelectToles('transession_add_ex')">
                          <span class="custom-toggle-slider rounded-circle" data-label-off="No" data-label-on="Yes"></span>
                        </label>
                      </td>
                      <td> ບັນທຶກລົງທຶນ
                        <label class="custom-toggle">
                          <input type="checkbox" v-model="transession_add_ap" @click="SelectToles('transession_add_ap')">
                          <span class="custom-toggle-slider rounded-circle" data-label-off="No" data-label-on="Yes"></span>
                        </label>
                      </td>
                      <td>
                        <label class="custom-toggle">
                          <input type="checkbox" v-model="transession_remove" @click="SelectToles('transession_remove')">
                          <span class="custom-toggle-slider rounded-circle" data-label-off="No" data-label-on="Yes"></span>
                        </label>
                      </td>
                    </tr>
                    <tr >
                      <th>ອອກໃບບິນ</th>
                      <td>
                          <label class="custom-toggle">
                          <input type="checkbox" v-model="bill_access" @click="SelectToles('bill_access')">
                          <span class="custom-toggle-slider rounded-circle" data-label-off="No" data-label-on="Yes"></span>
                        </label>
                      </td>
                      <td>

                      </td>
                      <td>
                        <label class="custom-toggle">
                          <input type="checkbox" v-model="bill_add" @click="SelectToles('bill_add')">
                          <span class="custom-toggle-slider rounded-circle" data-label-off="No" data-label-on="Yes"></span>
                        </label>
                      </td>
                      <td>
                        <label class="custom-toggle">
                          <input type="checkbox" v-model="bill_edit" @click="SelectToles('bill_edit')">
                          <span class="custom-toggle-slider rounded-circle" data-label-off="No" data-label-on="Yes"></span>
                        </label>
                      </td>
                      <td>
                        <label class="custom-toggle">
                          <input type="checkbox" v-model="bill_remove" @click="SelectToles('bill_remove')">
                          <span class="custom-toggle-slider rounded-circle" data-label-off="No" data-label-on="Yes"></span>
                        </label>
                      </td>
                    </tr>
                    <tr >
                      <th>ອອກໃບສະເໜີລາຄາ</th>
                      <td>

                      </td>
                      <td>

                      </td>
                      <td>
                        <label class="custom-toggle">
                          <input type="checkbox" v-model="quo_add" @click="SelectToles('quo_add')">
                          <span class="custom-toggle-slider rounded-circle" data-label-off="No" data-label-on="Yes"></span>
                        </label>
                      </td>
                      <td>
                        <label class="custom-toggle">
                          <input type="checkbox" v-model="quo_edit" @click="SelectToles('quo_edit')">
                          <span class="custom-toggle-slider rounded-circle" data-label-off="No" data-label-on="Yes"></span>
                        </label>
                      </td>
                      <td>
                        <label class="custom-toggle">
                          <input type="checkbox" v-model="quo_remove" @click="SelectToles('quo_remove')">
                          <span class="custom-toggle-slider rounded-circle" data-label-off="No" data-label-on="Yes"></span>
                        </label>
                      </td>
                    </tr>
                    <tr >
                      <th >ສະຕ໋ອກສິນຄ້າ</th>
                      <td>
                          <label class="custom-toggle">
                          <input type="checkbox" v-model="store_access" @click="SelectToles('store_access')">
                          <span class="custom-toggle-slider rounded-circle" data-label-off="No" data-label-on="Yes"></span>
                        </label>
                      </td>
                      <td>

                      </td>
                      <td>

                      </td>
                      <td>

                      </td>
                      <td>

                      </td>
                    </tr>
                    <tr >
                      <th>ນຳເຂົ້າສິນຄ້າ</th>
                      <td>

                      </td>
                      <td>
                        <label class="custom-toggle">
                          <input type="checkbox" v-model="store_import_access" @click="SelectToles('store_import_access')">
                          <span class="custom-toggle-slider rounded-circle" data-label-off="No" data-label-on="Yes"></span>
                        </label>
                      </td>
                      <td>
                        <label class="custom-toggle">
                          <input type="checkbox" v-model="store_import_add" @click="SelectToles('store_import_add')">
                          <span class="custom-toggle-slider rounded-circle" data-label-off="No" data-label-on="Yes"></span>
                        </label>
                      </td>
                      <td>
                        <label class="custom-toggle">
                          <input type="checkbox" v-model="store_import_edit" @click="SelectToles('store_import_edit')">
                          <span class="custom-toggle-slider rounded-circle" data-label-off="No" data-label-on="Yes"></span>
                        </label>
                      </td>
                      <td>
                        <label class="custom-toggle">
                          <input type="checkbox" v-model="store_import_remove" @click="SelectToles('store_import_remove')">
                          <span class="custom-toggle-slider rounded-circle" data-label-off="No" data-label-on="Yes"></span>
                        </label>
                      </td>
                    </tr>
                    <tr >
                      <th>ລາຍການສິນຄ້າ</th>
                      <td>

                      </td>
                      <td>
                        <label class="custom-toggle">
                          <input type="checkbox" v-model="store_product_access" @click="SelectToles('store_product_access')">
                          <span class="custom-toggle-slider rounded-circle" data-label-off="No" data-label-on="Yes"></span>
                        </label>
                      </td>
                      <td>
                        <label class="custom-toggle">
                          <input type="checkbox" v-model="store_product_add" @click="SelectToles('store_product_add')">
                          <span class="custom-toggle-slider rounded-circle" data-label-off="No" data-label-on="Yes"></span>
                        </label>
                      </td>
                      <td>
                        <label class="custom-toggle">
                          <input type="checkbox" v-model="store_product_edit" @click="SelectToles('store_product_edit')">
                          <span class="custom-toggle-slider rounded-circle" data-label-off="No" data-label-on="Yes"></span>
                        </label>
                      </td>
                      <td>
                        <label class="custom-toggle">
                          <input type="checkbox" v-model="store_product_remove" @click="SelectToles('store_product_remove')">
                          <span class="custom-toggle-slider rounded-circle" data-label-off="No" data-label-on="Yes"></span>
                        </label>
                      </td>
                    </tr>
                    <tr >
                      <th>ຜູ້ສະໜອງສິນຄ້າ</th>
                      <td>

                      </td>
                      <td>
                        <label class="custom-toggle">
                          <input type="checkbox" v-model="supplier_access" @click="SelectToles('supplier_access')">
                          <span class="custom-toggle-slider rounded-circle" data-label-off="No" data-label-on="Yes"></span>
                        </label>
                      </td>
                      <td>
                        <label class="custom-toggle">
                          <input type="checkbox" v-model="supplier_add" @click="SelectToles('supplier_add')">
                          <span class="custom-toggle-slider rounded-circle" data-label-off="No" data-label-on="Yes"></span>
                        </label>
                      </td>
                      <td>
                        <label class="custom-toggle">
                          <input type="checkbox" v-model="supplier_edit" @click="SelectToles('supplier_edit')">
                          <span class="custom-toggle-slider rounded-circle" data-label-off="No" data-label-on="Yes"></span>
                        </label>
                      </td>
                      <td>
                        <label class="custom-toggle">
                          <input type="checkbox" v-model="supplier_remove" @click="SelectToles('supplier_remove')">
                          <span class="custom-toggle-slider rounded-circle" data-label-off="No" data-label-on="Yes"></span>
                        </label>
                      </td>
                    </tr>
                    <tr >
                      <th>ຈັດການຂໍ້ມູນລູກຄ້າ</th>
                      <td>
                        <label class="custom-toggle">
                          <input type="checkbox" v-model="customer_access" @click="SelectToles('customer_access')">
                          <span class="custom-toggle-slider rounded-circle" data-label-off="No" data-label-on="Yes"></span>
                        </label>
                      </td>
                      <td>

                      </td>
                      <td>
                        <label class="custom-toggle">
                          <input type="checkbox" v-model="customer_add" @click="SelectToles('customer_add')">
                          <span class="custom-toggle-slider rounded-circle" data-label-off="No" data-label-on="Yes"></span>
                        </label>
                      </td>
                      <td>
                        <label class="custom-toggle">
                          <input type="checkbox" v-model="customer_edit" @click="SelectToles('customer_edit')">
                          <span class="custom-toggle-slider rounded-circle" data-label-off="No" data-label-on="Yes"></span>
                        </label>
                      </td>
                      <td>
                        <label class="custom-toggle">
                          <input type="checkbox" v-model="customer_remove" @click="SelectToles('customer_remove')">
                          <span class="custom-toggle-slider rounded-circle" data-label-off="No" data-label-on="Yes"></span>
                        </label>
                      </td>
                    </tr>
                    <tr >
                      <th>ຈັດການຂໍ້ມູນສຳນັກງານ</th>
                      <td>

                      </td>
                      <td>

                      </td>
                      <td>
                        <label class="custom-toggle">
                          <input type="checkbox" v-model="customer_office_add" @click="SelectToles('customer_office_add')">
                          <span class="custom-toggle-slider rounded-circle" data-label-off="No" data-label-on="Yes"></span>
                        </label>
                      </td>
                      <td>
                        <label class="custom-toggle">
                          <input type="checkbox" v-model="customer_office_edit" @click="SelectToles('customer_office_edit')">
                          <span class="custom-toggle-slider rounded-circle" data-label-off="No" data-label-on="Yes"></span>
                        </label>
                      </td>
                      <td>
                        <label class="custom-toggle">
                          <input type="checkbox" v-model="customer_office_remove" @click="SelectToles('customer_office_remove')">
                          <span class="custom-toggle-slider rounded-circle" data-label-off="No" data-label-on="Yes"></span>
                        </label>
                      </td>
                    </tr>
                    <tr >
                      <th>ຈັດການຜູ້ໃຊ້</th>
                      <td>
                        <label class="custom-toggle">
                          <input type="checkbox" v-model="user_access" @click="SelectToles('user_access')">
                          <span class="custom-toggle-slider rounded-circle" data-label-off="No" data-label-on="Yes"></span>
                        </label>
                      </td>
                      <td>

                      </td>
                      <td>
                        <label class="custom-toggle">
                          <input type="checkbox" v-model="user_add" @click="SelectToles('user_add')">
                          <span class="custom-toggle-slider rounded-circle" data-label-off="No" data-label-on="Yes"></span>
                        </label>
                      </td>
                      <td>
                        <label class="custom-toggle">
                          <input type="checkbox" v-model="user_edit" @click="SelectToles('user_edit')">
                          <span class="custom-toggle-slider rounded-circle" data-label-off="No" data-label-on="Yes"></span>
                        </label>
                      </td>
                      <td>
                        <label class="custom-toggle">
                          <input type="checkbox" v-model="user_remove" @click="SelectToles('user_remove')">
                          <span class="custom-toggle-slider rounded-circle" data-label-off="No" data-label-on="Yes"></span>
                        </label>
                      </td>
                    </tr>
                    <tr >
                      <th>ລາຍງານ</th>
                      <td>
                        <label class="custom-toggle">
                          <input type="checkbox" v-model="report_access" @click="SelectToles('report_access')">
                          <span class="custom-toggle-slider rounded-circle" data-label-off="No" data-label-on="Yes"></span>
                        </label>
                      </td>
                      <td>

                      </td>
                      <td>

                      </td>
                      <td>

                      </td>
                      <td>

                      </td>
                    </tr>
                    <tr >
                      <th>ການຕັ້ງຄ່າ</th>
                      <td>
                        <label class="custom-toggle">
                          <input type="checkbox" v-model="setting_access" @click="SelectToles('setting_access')">
                          <span class="custom-toggle-slider rounded-circle" data-label-off="No" data-label-on="Yes"></span>
                        </label>
                      </td>
                      <td>

                      </td>
                      <td>

                      </td>
                      <td>

                      </td>
                      <td>

                      </td>
                    </tr>
                    <tr >
                      <th>ຕັ້ງຄ່າທົ່ວໄປ</th>
                      <td>

                      </td>
                      <td>
                        <label class="custom-toggle">
                          <input type="checkbox" v-model="setting_normal_access" @click="SelectToles('setting_normal_access')">
                          <span class="custom-toggle-slider rounded-circle" data-label-off="No" data-label-on="Yes"></span>
                        </label>
                      </td>
                      <td>
                        <label class="custom-toggle">
                          <input type="checkbox">
                          <span class="custom-toggle-slider rounded-circle" data-label-off="No" data-label-on="Yes"></span>
                        </label>
                      </td>
                      <td>
                        <label class="custom-toggle">
                          <input type="checkbox">
                          <span class="custom-toggle-slider rounded-circle" data-label-off="No" data-label-on="Yes"></span>
                        </label>
                      </td>
                      <td>
                        <label class="custom-toggle">
                          <input type="checkbox">
                          <span class="custom-toggle-slider rounded-circle" data-label-off="No" data-label-on="Yes"></span>
                        </label>
                      </td>
                    </tr>
                    <tr >
                      <th>ການກຳນົດສິດ</th>
                      <td>

                      </td>
                      <td>
                        <label class="custom-toggle">
                          <input type="checkbox" v-model="setting_permission_access" @click="SelectToles('setting_permission_access')">
                          <span class="custom-toggle-slider rounded-circle" data-label-off="No" data-label-on="Yes"></span>
                        </label>
                      </td>
                      <td>
                        <label class="custom-toggle">
                          <input type="checkbox" v-model="setting_permission_add" @click="SelectToles('setting_permission_add')">
                          <span class="custom-toggle-slider rounded-circle" data-label-off="No" data-label-on="Yes"></span>
                        </label>
                      </td>
                      <td>
                        <label class="custom-toggle">
                          <input type="checkbox" v-model="setting_permission_edit" @click="SelectToles('setting_permission_edit')">
                          <span class="custom-toggle-slider rounded-circle" data-label-off="No" data-label-on="Yes"></span>
                        </label>
                      </td>
                      <td>
                        <label class="custom-toggle">
                          <input type="checkbox" v-model="setting_permission_remove" @click="SelectToles('setting_permission_remove')">
                          <span class="custom-toggle-slider rounded-circle" data-label-off="No" data-label-on="Yes"></span>
                        </label>
                      </td>
                    </tr>
                    <tr >
                      <th>ໝວດໝູ່ສິນຄ້າ</th>
                      <td>

                      </td>
                      <td>
                        <label class="custom-toggle">
                          <input type="checkbox" v-model="setting_session_access" @click="SelectToles('setting_session_access')">
                          <span class="custom-toggle-slider rounded-circle" data-label-off="No" data-label-on="Yes"></span>
                        </label>
                      </td>
                      <td>
                        <label class="custom-toggle">
                          <input type="checkbox" v-model="setting_session_add" @click="SelectToles('setting_session_add')">
                          <span class="custom-toggle-slider rounded-circle" data-label-off="No" data-label-on="Yes"></span>
                        </label>
                      </td>
                      <td>
                        <label class="custom-toggle">
                          <input type="checkbox" v-model="setting_session_edit" @click="SelectToles('setting_session_edit')">
                          <span class="custom-toggle-slider rounded-circle" data-label-off="No" data-label-on="Yes"></span>
                        </label>
                      </td>
                      <td>
                        <label class="custom-toggle">
                          <input type="checkbox" v-model="setting_session_remove" @click="SelectToles('setting_session_remove')">
                          <span class="custom-toggle-slider rounded-circle" data-label-off="No" data-label-on="Yes"></span>
                        </label>
                      </td>
                    </tr>
                    <tr >
                      <th>ຫົວໜ່ວຍ</th>
                      <td>

                      </td>
                      <td>
                        <label class="custom-toggle">
                          <input type="checkbox" v-model="setting_unitband_access" @click="SelectToles('setting_unitband_access')">
                          <span class="custom-toggle-slider rounded-circle" data-label-off="No" data-label-on="Yes"></span>
                        </label>
                      </td>
                      <td>
                        <label class="custom-toggle">
                          <input type="checkbox" v-model="setting_unit_add" @click="SelectToles('setting_unit_add')">
                          <span class="custom-toggle-slider rounded-circle" data-label-off="No" data-label-on="Yes"></span>
                        </label>
                      </td>
                      <td>
                        <label class="custom-toggle">
                          <input type="checkbox" v-model="setting_unit_edit" @click="SelectToles('setting_unit_edit')">
                          <span class="custom-toggle-slider rounded-circle" data-label-off="No" data-label-on="Yes"></span>
                        </label>
                      </td>
                      <td>
                        <label class="custom-toggle">
                          <input type="checkbox" v-model="setting_unit_remove" @click="SelectToles('setting_unit_remove')">
                          <span class="custom-toggle-slider rounded-circle" data-label-off="No" data-label-on="Yes"></span>
                        </label>
                      </td>
                    </tr>
                    <tr >
                      <th>ຍີ່ຫໍ້</th>
                      <td>

                      </td>
                      <td>

                      </td>
                      <td>
                        <label class="custom-toggle">
                          <input type="checkbox" v-model="setting_brand_add" @click="SelectToles('setting_brand_add')">
                          <span class="custom-toggle-slider rounded-circle" data-label-off="No" data-label-on="Yes"></span>
                        </label>
                      </td>
                      <td>
                        <label class="custom-toggle">
                          <input type="checkbox" v-model="setting_brand_edit" @click="SelectToles('setting_brand_edit')">
                          <span class="custom-toggle-slider rounded-circle" data-label-off="No" data-label-on="Yes"></span>
                        </label>
                      </td>
                      <td>
                        <label class="custom-toggle">
                          <input type="checkbox" v-model="setting_brand_remove" @click="SelectToles('setting_brand_remove')">
                          <span class="custom-toggle-slider rounded-circle" data-label-off="No" data-label-on="Yes"></span>
                        </label>
                      </td>
                    </tr>
                    <tr >
                      <th>ປະຫວັດຜູ້ໃຊ້ Logs</th>
                      <td>

                      </td>
                      <td>
                        <label class="custom-toggle">
                          <input type="checkbox" v-model="setting_users_log" @click="SelectToles('users_log_access')">
                          <span class="custom-toggle-slider rounded-circle" data-label-off="No" data-label-on="Yes"></span>
                        </label>
                      </td>
                      <td>
                        
                      </td>
                      <td>
                       
                      </td>
                      <td>
                        
                      </td>
                    </tr>
                    <tr >
                      <th>ລະບົບບັນຊີ</th>
                      <td>
                        <label class="custom-toggle">
                          <input type="checkbox" v-model="acc_access" @click="SelectToles('acc_access')">
                          <span class="custom-toggle-slider rounded-circle" data-label-off="No" data-label-on="Yes"></span>
                        </label>
                      </td>
                      <td>

                      </td>
                      <td>

                      </td>
                      <td>

                      </td>
                      <td>

                      </td>
                    </tr>
                    <tr >
                      <th>ຜັງບັນຊີ</th>
                      <td>

                      </td>
                      <td>
                        <label class="custom-toggle">
                          <input type="checkbox" v-model="acc_access_ph" @click="SelectToles('acc_access_ph')">
                          <span class="custom-toggle-slider rounded-circle" data-label-off="No" data-label-on="Yes"></span>
                        </label>
                      </td>
                      <td>
                        <label class="custom-toggle">
                          <input type="checkbox" v-model="acc_access_ph_add" @click="SelectToles('acc_access_ph_add')">
                          <span class="custom-toggle-slider rounded-circle" data-label-off="No" data-label-on="Yes"></span>
                        </label>
                      </td>
                      <td>
                        <label class="custom-toggle">
                          <input type="checkbox" v-model="acc_access_ph_edit" @click="SelectToles('acc_access_ph_edit')">
                          <span class="custom-toggle-slider rounded-circle" data-label-off="No" data-label-on="Yes"></span>
                        </label>
                      </td>
                      <td>
                        <label class="custom-toggle">
                          <input type="checkbox" v-model="acc_access_ph_remove" @click="SelectToles('acc_access_ph_remove')">
                          <span class="custom-toggle-slider rounded-circle" data-label-off="No" data-label-on="Yes"></span>
                        </label>
                      </td>
                    </tr>
                    <tr >
                      <th>ການລົງທຸລະກຳ</th>
                      <td>

                      </td>
                      <td>
                        <label class="custom-toggle">
                          <input type="checkbox" v-model="acc_access_phacc" @click="SelectToles('acc_access_phacc')">
                          <span class="custom-toggle-slider rounded-circle" data-label-off="No" data-label-on="Yes"></span>
                        </label>
                      </td>
                      <td>
                        <label class="custom-toggle">
                          <input type="checkbox" v-model="acc_access_phacc_add" @click="SelectToles('acc_access_phacc_add')">
                          <span class="custom-toggle-slider rounded-circle" data-label-off="No" data-label-on="Yes"></span>
                        </label>
                      </td>
                      <td>
                        <label class="custom-toggle">
                          <input type="checkbox" v-model="acc_access_phacc_edit" @click="SelectToles('acc_access_phacc_edit')">
                          <span class="custom-toggle-slider rounded-circle" data-label-off="No" data-label-on="Yes"></span>
                        </label>
                      </td>
                      <td>
                        <label class="custom-toggle">
                          <input type="checkbox" v-model="acc_access_phacc_remove" @click="SelectToles('acc_access_phacc_remove')">
                          <span class="custom-toggle-slider rounded-circle" data-label-off="No" data-label-on="Yes"></span>
                        </label>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <div class="card-footer"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</div>
</template>

<script>
export default {
  name: "equipment",

  components: {},

  directives: {},

  data() {
    return {
      btSaveR:'disabled',
      roles_name: "",
      Roles: [],
      AllRoles:[],
      images: "",
      EquipmentList: [],
      isLoggedIn: false,
      loading: false,
      ShFB: false,
      polling: null,
      formType: true,
      daBTU: true,
      FormUID: null,
      currentSort: "sort", // sort table
      currentSortDir: "asc", // sort type
      userRolesSelect:'',
      dashboard_access:false,
      pos_access:false,
      work_assess:false,
      repaire_assess:false,
      repaire_add:false,
      repaire_edit:false,
      repaire_remove:false,
      order_assess:false,
      order_add:false,
      order_edit:false,
      order_remove:false,
      transession_access:false,
      transession_add_in:false,
      transession_add_ex:false,
      transession_add_ap:false,
      transession_remove:false,
      bill_access:false,
      bill_add:false,
      bill_edit:false,
      bill_remove:false,
      quo_add:false,
      quo_edit:false,
      quo_remove:false,
      store_access:false,
      store_import_access:false,
      store_import_add:false,
      store_import_edit:false,
      store_import_remove:false,
      store_product_access:false,
      store_product_add:false,
      store_product_edit:false,
      store_product_remove:false,
      customer_access:false,
      customer_add:false,
      customer_edit:false,
      customer_remove:false,
      customer_office_add:false,
      customer_office_edit:false,
      customer_office_remove:false,
      report_access:false,
      user_access:false,
      user_add:false,
      user_edit:false,
      user_remove:false,
      setting_access:false,
      setting_normal_access:false,
      setting_permission_access:false,
      setting_permission_add:false,
      setting_permission_edit:false,
      setting_permission_remove:false,
      setting_permission_set:false,
      setting_session_access:false,
      setting_session_add:false,
      setting_session_edit:false,
      setting_session_remove:false,
      setting_unitband_access:false,
      setting_unit_add:false,
      setting_unit_edit:false,
      setting_unit_remove:false,
      setting_brand_add:false,
      setting_brand_edit:false,
      setting_brand_remove:false,
      setting_users_log:false,
      acc_access:false,
      acc_access_ph:false,
      acc_access_ph_add:false,
      acc_access_ph_edit:false,
      acc_access_ph_remove:false,
      acc_access_phacc:false,
      acc_access_phacc_add:false,
      acc_access_phacc_edit:false,
      acc_access_phacc_remove:false,
      supplier_access:false,
      supplier_add:false,
      supplier_edit:false,
      supplier_remove:false,
      RolesPermission:[],
      changSetting:'dash',
    };
  },

  mounted() {},
  watch:{
  
  },
  computed: {

    allRoles() {
      if (this.Roles.data != null) {
        return this.Roles.data.sort((a, b) => {
          let modifier = 1;
          if (this.currentSortDir === "desc") modifier = -1;
          if (a[this.currentSort] < b[this.currentSort]) return -1 * modifier;
          if (a[this.currentSort] > b[this.currentSort]) return 1 * modifier;
          return 0;
        });
      }
    },
    checkNameRoles() {
      if (this.roles_name == "") {
        return "disabled";
      } else {
        if (this.daBTU) {
          return "";
        } else {
          return "disabled";
        }
      }
    },
  },
  methods: {
    SelectToles(valu){
     if(this.userRolesSelect!='') {this.btSaveR=null}
      if(this.RolesPermission.includes(valu)){let findex = this.RolesPermission.findIndex((i) => i == valu); this.RolesPermission.splice(findex,1)} else {this.RolesPermission.push(valu);}
    },
    OnchangUserRoles(){
      
        let item = this.AllRoles.find((i)=> i.id == this.userRolesSelect)
       if(item!=null){
         this.btSaveR=null
         if(item.permissions!=null){
           this.RolesPermission = JSON.parse(item.permissions) 
         } else { this.RolesPermission = [] }
       } else { this.RolesPermission = []; this.btSaveR='disabled' }

        this.dashboard_access = this.RolesPermission.includes('dashboard_access')
        this.pos_access = this.RolesPermission.includes('pos_access')
        this.work_assess = this.RolesPermission.includes('work_assess')
        this.repaire_assess = this.RolesPermission.includes('repaire_assess')
        this.repaire_add = this.RolesPermission.includes('repaire_add')
        this.repaire_edit = this.RolesPermission.includes('repaire_edit')
        this.repaire_remove = this.RolesPermission.includes('repaire_remove')
        this.order_assess = this.RolesPermission.includes('preorder_access')
        this.order_add = this.RolesPermission.includes('preorder_add')
        this.order_edit = this.RolesPermission.includes('preorder_edit')
        this.order_remove = this.RolesPermission.includes('preorder_remove')
        this.transession_access = this.RolesPermission.includes('transession_access')
        this.transession_add_in = this.RolesPermission.includes('transession_add_in')
        this.transession_add_ex = this.RolesPermission.includes('transession_add_ex')
        this.transession_add_ap = this.RolesPermission.includes('transession_add_ap')
        this.transession_remove = this.RolesPermission.includes('transession_remove')
        this.bill_access = this.RolesPermission.includes('bill_access')
        this.bill_add = this.RolesPermission.includes('bill_add')
        this.bill_edit = this.RolesPermission.includes('bill_edit')
        this.bill_remove = this.RolesPermission.includes('bill_remove')
        this.quo_add = this.RolesPermission.includes('quo_add')
        this.quo_edit = this.RolesPermission.includes('quo_edit')
        this.quo_remove = this.RolesPermission.includes('quo_remove')
        this.store_access = this.RolesPermission.includes('store_access')
        this.store_import_access = this.RolesPermission.includes('store_import_access')
        this.store_import_add = this.RolesPermission.includes('store_import_add')
        this.store_import_edit = this.RolesPermission.includes('store_import_edit')
        this.store_import_remove = this.RolesPermission.includes('store_import_remove')
        this.store_product_access = this.RolesPermission.includes('store_product_access')
        this.store_product_add = this.RolesPermission.includes('store_product_add')
        this.store_product_edit = this.RolesPermission.includes('store_product_edit')
        this.store_product_remove = this.RolesPermission.includes('store_product_remove')
        this.customer_access = this.RolesPermission.includes('customer_access')
        this.customer_add = this.RolesPermission.includes('customer_add')
        this.customer_edit = this.RolesPermission.includes('customer_edit')
        this.customer_remove = this.RolesPermission.includes('customer_remove')
        this.customer_office_add = this.RolesPermission.includes('customer_office_add')
        this.customer_office_edit = this.RolesPermission.includes('customer_office_edit')
        this.customer_office_remove = this.RolesPermission.includes('customer_office_remove')
        this.report_access = this.RolesPermission.includes('report_access')
        this.user_access = this.RolesPermission.includes('user_access')
        this.user_add = this.RolesPermission.includes('user_add')
        this.user_edit = this.RolesPermission.includes('user_edit')
        this.user_remove = this.RolesPermission.includes('user_remove')
        this.setting_access = this.RolesPermission.includes('setting_access')
        this.setting_normal_access = this.RolesPermission.includes('setting_normal_access')
        this.setting_permission_access = this.RolesPermission.includes('setting_permission_access')
        this.setting_permission_add = this.RolesPermission.includes('setting_permission_add')
        this.setting_permission_edit = this.RolesPermission.includes('setting_permission_edit')
        this.setting_permission_remove = this.RolesPermission.includes('setting_permission_remove')
        this.setting_permission_set = this.RolesPermission.includes('setting_permission_set')
        this.setting_session_access = this.RolesPermission.includes('setting_session_access')
        this.setting_session_add = this.RolesPermission.includes('setting_session_add')
        this.setting_session_edit = this.RolesPermission.includes('setting_session_edit')
        this.setting_session_remove = this.RolesPermission.includes('setting_session_remove')
        this.setting_unitband_access = this.RolesPermission.includes('setting_unitband_access')
        this.setting_unit_add = this.RolesPermission.includes('setting_unit_add')
        this.setting_unit_edit = this.RolesPermission.includes('setting_unit_edit')
        this.setting_unit_remove = this.RolesPermission.includes('setting_unit_remove')
        this.setting_brand_add = this.RolesPermission.includes('setting_brand_add')
        this.setting_brand_edit = this.RolesPermission.includes('setting_brand_edit') 
        this.setting_brand_remove = this.RolesPermission.includes('setting_brand_remove')
        this.setting_users_log = this.RolesPermission.includes('users_log_access')
        this.acc_access = this.RolesPermission.includes('acc_access')
        this.acc_access_ph = this.RolesPermission.includes('acc_access_ph')
        this.acc_access_ph_add = this.RolesPermission.includes('acc_access_ph_add')
        this.acc_access_ph_edit = this.RolesPermission.includes('acc_access_ph_edit')
        this.acc_access_ph_remove = this.RolesPermission.includes('acc_access_ph_remove')
        this.acc_access_phacc = this.RolesPermission.includes('acc_access_phacc')
        this.acc_access_phacc_add = this.RolesPermission.includes('acc_access_phacc_add')
        this.acc_access_phacc_edit = this.RolesPermission.includes('acc_access_phacc_edit')
        this.acc_access_phacc_remove = this.RolesPermission.includes('acc_access_phacc_remove')
        this.supplier_access = this.RolesPermission.includes('supplier_access')
        this.supplier_add = this.RolesPermission.includes('supplier_add')
        this.supplier_edit = this.RolesPermission.includes('supplier_edit')
        this.supplier_remove = this.RolesPermission.includes('supplier_remove')
    },
    SaveUserRoles(){
      this.btSaveR='disabled'
      let id = this.userRolesSelect
      let findex = this.AllRoles.findIndex((i) => i.id == id)
      let item = this.AllRoles.find((i) => i.id == id)

      this.AllRoles[findex] = {
        id:item.id,
        permissions: this.RolesPermission,
        roles_name:item.roles_name,
        sort:item.sort
      }

      this.SetPermissions()
      //this.RolesPermission = []
    },

    add_remove(valu){
      if(this.RolesPermission.includes(valu)){let findex = this.RolesPermission.findIndex((i) => i == valu); this.RolesPermission.splice(findex,1)} else {this.RolesPermission.push(valu);}
    },
    set(vale){
        if(this.ass){ console.log('unset') } else {  console.log(vale)}
    },
    listUp(sort_id){
        this.$axios.get("/sanctum/csrf-cookie").then((response) => {
          axios
            .post(`/api/setting/roles/sort?page=${this.Roles.current_page}`, {
              sort_id: sort_id,
              type:'up',
              sort_type:this.currentSortDir
            })
            .then((response) => {
              if (response.data.success) {
                this.Roles = response.data.que;
                this.AllRoles = response.data.all;
              } else {
                this.$notify( { group: "error", title: "ບໍ່ສຳເລັດ!", text: "ຜິດຜາດ: " + response.data.message, }, 4000 );
              }
            })
            .catch((error) => {
              this.$notify( { group: "error", title: "ບໍ່ສຳເລັດ!", text: "ຜິດຜາດ: " + error.message, }, 4000 );
            });
        });
    },
    listDown(sort_id){
        this.$axios.get("/sanctum/csrf-cookie").then((response) => {
          axios
            .post(`/api/setting/roles/sort?page=${this.Roles.current_page}`, {
              sort_id: sort_id,
              type:'down',
              sort_type:this.currentSortDir
            })
            .then((response) => {
              if (response.data.success) {
                this.Roles = response.data.que;
                this.AllRoles = response.data.all;
              } else {
                this.$notify( { group: "error", title: "ບໍ່ສຳເລັດ!", text: "ຜິດຜາດ: " + response.data.message, }, 4000 );
                this.$Progress.fail();
              }
            })
            .catch((error) => {
              this.$notify( { group: "error", title: "ບໍ່ສຳເລັດ!", text: "ຜິດຜາດ: " + error.message, }, 4000 );
            });
        });
    },
    sort(s) {
      if (s === this.currentSort) {
        this.currentSortDir = this.currentSortDir === "asc" ? "desc" : "asc";
      }
      this.currentSort = s;
    },
    AddRoles() {
      this.roles_name = "";
      this.ShFB = true;
      this.polling = setInterval(() => {
        this.$refs.name_roles.focus();
        clearInterval(this.polling);
      }, 500);
    },

    CancelRoles() {
      this.ShFB = false;
    },
    onEnter(e){
      if (e.which === 13) {
        if(this.roles_name!=''){
          this.SaveRoles()
        }

      }
    },
    SaveRoles() {
      this.daBTU = false;
      if (this.formType) {
        this.$Progress.start();
        this.$axios.get("/sanctum/csrf-cookie").then((response) => {
          axios
            .post(`/api/setting/roles/add?page=${this.Roles.last_page}`, {
              roles_name: this.roles_name,
            })
            .then((response) => {
              if (response.data.success) {
                this.Roles = response.data.que;
                this.AllRoles = response.data.all;
                this.daBTU = true;
                this.formType = true;
                this.ShFB = false;
                this.roles_name = "";
                this.$Progress.finish();
                this.$notify( { group: "sucess", title: "ສຳເລັດ!", text: response.data.message, }, 2000 );
              } else {
                this.daBTU = true;
                this.$notify( { group: "error", title: "ບໍ່ສຳເລັດ!", text: "ຜິດຜາດ: " + response.data.message, }, 4000 );
                this.$Progress.fail();
              }
            })
            .catch((error) => {
              this.daBTU = true;
              this.$notify(
                {
                  group: "error",
                  title: "ບໍ່ສຳເລັດ!",
                  text: "ຜິດຜາດ: " + error.message,
                },
                4000
              );
            });
        });
      } else {
        this.$axios.get("/sanctum/csrf-cookie").then((response) => {
          axios.post(`/api/setting/roles/update/${this.FormUID}?page=${this.Roles.current_page}`, {
              roles_name: this.roles_name,
            })
            .then((response) => {
              if (response.data.success) {
                this.Roles = response.data.que;
                this.AllRoles = response.data.all;
                this.daBTU = true;
                this.formType = true;
                this.ShFB = false;
                this.roles_name = "";
                this.$Progress.finish();
                this.$notify( { group: "sucess", title: "ສຳເລັດ!", text: response.data.message, }, 2000 );
              } else {
                this.error = response.data.message;
                this.$notify(
                  {
                    group: "error",
                    title: "ບໍ່ສຳເລັດ!",
                    text: "ຜິດຜາດ: " + response.data.message,
                  },
                  4000
                );
                this.$Progress.fail();
              }
            })
            .catch((error) => {
              this.daBTU = true;
              this.$notify(
                {
                  group: "error",
                  title: "ບໍ່ສຳເລັດ!",
                  text: "ຜິດຜາດ: " + error.message,
                },
                4000
              );
            });
        });
      }
    },
    editRoles(id) {
      let item = this.Roles.data.find((i) => i.id == id);
      this.roles_name = item.roles_name;
      this.ShFB = true;
      this.formType = false;
      this.FormUID = id;
      this.polling = setInterval(() => {
        this.$refs.name_roles.focus();
        clearInterval(this.polling);
      }, 500);
    },
    delRoles(id) {
      this.$swal
        .fire({
          title: "ທ່ານແນ່ໃຈບໍ່?",
          text: "ທີ່ຈະລຶບຂໍ້ມູນນີ້!",
          icon: "warning",
          showCancelButton: true,
          confirmButtonColor: "#3085d6",
          cancelButtonColor: "#d33",
          confirmButtonText: "ລຶບເລີຍ!",
          cancelButtonText: "ຍົກເລີກ",
        })
        .then((result) => {
          if (result.isConfirmed) {
            let page = null
            if(this.Roles.data.length==1){ page = this.Roles.current_page-1 } else { page = this.Roles.current_page }
            this.$Progress.start();
            this.$axios.get("/sanctum/csrf-cookie").then((response) => {
              this.$axios
                .delete(`/api/setting/roles/delete/${id}?page=${page}`)
                .then((response) => {
                  if (response.data.success) {
                    this.Roles = response.data.que;
                    this.AllRoles = response.data.all;
                    this.$Progress.finish();
                    this.$notify( { group: "sucess", title: "ສຳເລັດ!", text: response.data.message, }, 2000 );
                  } else {
                    this.$notify( { group: "error", title: "ບໍ່ສຳເລັດ!", text: "ຜິດຜາດ: ລະບົບບໍ່ອານຸຍາດໃຫ້ລຶບອອກຈາກຖານຂໍ້ມູນ ເນື່ອງຈາກຍັງຖຶກນຳໃຊ້ຢູ່.", }, 4000 );
                    this.$Progress.fail();
                  }
                })
                .catch((error) => {
                  this.$notify( { group: "error", title: "ບໍ່ສຳເລັດ!", text: "ຜິດຜາດ: " + response.data.message, }, 4000 );
                  this.$Progress.fail();
                });
            });
          }
        });
    },
    SetPermissions(){
      this.$Progress.start();
      this.$axios.get("/sanctum/csrf-cookie").then((response) => {
          axios.post(`/api/setting/roles/setpermissions`, {
              permissions: this.AllRoles,
            })
            .then((response) => {
              if (response.data.success) {
                this.AllRoles = response.data.all;
                this.$Progress.finish();
                this.$notify( { group: "sucess", title: "ສຳເລັດ!", text: response.data.message, }, 2000 );
              } else {
                this.error = response.data.message;
                this.$notify( { group: "error", title: "ບໍ່ສຳເລັດ!", text: "ຜິດຜາດ: " + response.data.message, }, 4000 );
                this.$Progress.fail();
              }
            })
            .catch((error) => {
              this.daBTU = true;
              this.$notify( { group: "error", title: "ບໍ່ສຳເລັດ!", text: "ຜິດຜາດ: " + error.message, }, 4000 );
            });
        });
    },
    getRoles(bpage) {
      this.loading = true;
      this.$Progress.start();
      if (typeof bpage == "undefined") {
        this.$axios.get("/sanctum/csrf-cookie").then((response) => {
          axios
            .get(`/api/setting/roles?page=${this.Roles.current_page}`)
            //.get(`/api/setting/roles?page=${this.Roles.current_page}`)
            .then((response) => {
              this.loading = false;
              //console.log(response.data)
              if (response.data.que.data.length < 1) {
                const bp = this.Roles.current_page - 1;
                if (bp >= 1) {
                  this.getRoles(bp);
                }
              } else {
                this.Roles = response.data.que;
                this.AllRoles = response.data.all;
                this.$Progress.finish();
              }
            })
            .catch((error) => {
              this.loading = false;
              this.$notify(
                {
                  group: "error",
                  title: "ບໍ່ສຳເລັດ!",
                  text: "ຜິດຜາດ: " + error.message,
                },
                4000
              );
              //console.error(error);
              this.$Progress.fail();
            });
        });
      } else {
        this.$axios.get("/sanctum/csrf-cookie").then((response) => {
          axios
            .get(`/api/setting/roles?page=${bpage}`)
            .then((response) => {
              ua;
              this.Roles = response.data.que;
              this.AllRoles = response.data.all;
              this.$Progress.finish();
            })
            .catch((error) => {
              this.$notify(
                {
                  group: "error",
                  title: "ບໍ່ສຳເລັດ!",
                  text: "ຜິດຜາດ: " + error.message,
                },
                4000
              );
              //console.error(error);
              this.$Progress.fail();
            });
        });
      }
    },
  },
  created() {
    this.$axios.get(`/api/users/checkauth`).then((response) => {
      if (!response.data.isLogin) {
        window.location.href = "/";
      }
    });
    this.images = window.location.origin + "/argon/img/theme/team-1.jpg";

    if (window.Laravel.isLoggedin) {
      this.isLoggedIn = true;
    }
    this.getRoles();
  },
};
</script>

<style lang="scss">
</style>
