@extends('tenants.layouts.master')
@section('title')
    @lang('Roles List')
@endsection
@section('css')
    <link href="{{ url('css/DataTables_cdn/datatables.bootstrap5.min.css') }}" rel="stylesheet" />
    <link href="{{ url('css/DataTables_cdn/datatables.responsive.min.css') }}" rel="stylesheet" />
    <link href="{{ url('css/DataTables_cdn/datatables.buttons.min.css') }}" rel="stylesheet" />
    <!-- font-awesome -->
    <link href="{{ url('css/font-awesome_cdn/font-awesome.min.css') }}" rel="stylesheet" />
    <link href="{{ url('css/role/role.index.css') }}" rel="stylesheet" />

@endsection
@section('content')
    @component('tenants.components.breadcrumb')
        @slot('li_1')
            Roles
        @endslot
        @slot('title')
            Roles List
        @endslot
    @endcomponent  

    <div class="row">
        <div class="col-12 p-0">
            <div class="card">
                <div class=" d-md-flex align-items-center px-3 pb-md-2 pt-3" data-bs-toggle="modal" data-bs-target="#role_create_btn">
                    <h5 class="card-title mb-0 flex-grow-1"></h5>
                    <div>
                        <button id="addRow" class="btn btn_primary">Create New Role <i class=" role_permission_icon ms-1"></i></button>
                    </div>
                </div>
                <div class="card-body common_datatable_theme table_search_custom common_search_emp">
                    <table id="roles-table" class="table theme_table dt-responsive nowrap  align-middle"
                        style="width:100%">
                        <thead>
                            <tr>
                                {{-- <th scope="col" style="width: 10px;" class="no-sortorder">
                                    <div class="form-check ms-3 ms-lg-0">
                                        <input class="form-check-input fs-15 checkAll" type="checkbox" id="checkAll" value="option">
                                    </div>
                                </th> --}}
                                <th class='no-sortorder'>Role</th>
                                <th class="no-sortorder">Actions</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
        </div>        
        <!--end col-->
    </div>
    <!--end row-->

    <!-- modal-popup-create-role -->
<div class="col-12">
   <div class="modal fade" id="role_create_btn"  aria-labelledby="roleCreateLabel" tabindex="-1">
      <div class="modal-dialog modal-xl modal-dialog-centered">
         <div class="modal-content">
            <!-- Modal Header -->
            <div class="modal-header close-btn-svg border-bottom pt-2">
               <h6 class="modal-title d-flex align-items-center" id="roleCreateLabel">
                  <span class="modal_popup_header">Create Role</span>
               </h6>
               <button type="button" class="btn mt-1 px-0" data-bs-dismiss="modal" aria-label="Close">
                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="23" viewBox="0 0 24 23" fill="none">
                     <g clip-path="url(#clip0_299_7281)">
                        <path d="M11.9998 2.3998C14.4133 2.3998 16.7279 3.35855 18.4345 5.06513C20.1411 6.77171 21.0998 9.08634 21.0998 11.4998C21.0998 13.9133 20.1411 16.2279 18.4345 17.9345C16.7279 19.6411 14.4133 20.5998 11.9998 20.5998C9.58634 20.5998 7.27171 19.6411 5.56513 17.9345C3.85855 16.2279 2.8998 13.9133 2.8998 11.4998C2.8998 9.08634 3.85855 6.77171 5.56513 5.06513C7.27171 3.35855 9.58634 2.3998 11.9998 2.3998ZM11.9998 22.6998C14.9702 22.6998 17.819 21.5198 19.9194 19.4194C22.0198 17.319 23.1998 14.4702 23.1998 11.4998C23.1998 8.52938 22.0198 5.68062 19.9194 3.58021C17.819 1.4798 14.9702 0.299805 11.9998 0.299805C9.02938 0.299805 6.18062 1.4798 4.08021 3.58021C1.9798 5.68062 0.799805 8.52938 0.799805 11.4998C0.799805 14.4702 1.9798 17.319 4.08021 19.4194C6.18062 21.5198 9.02938 22.6998 11.9998 22.6998ZM8.45606 7.95606C8.04481 8.3673 8.04481 9.0323 8.45606 9.43918L10.5123 11.4954L8.45606 13.5517C8.04481 13.9629 8.04481 14.6279 8.45606 15.0348C8.8673 15.4417 9.5323 15.4461 9.93918 15.0348L11.9954 12.9786L14.0517 15.0348C14.4629 15.4461 15.1279 15.4461 15.5348 15.0348C15.9417 14.6236 15.9461 13.9586 15.5348 13.5517L13.4786 11.4954L15.5348 9.43918C15.9461 9.02793 15.9461 8.36293 15.5348 7.95606C15.1236 7.54918 14.4586 7.54481 14.0517 7.95606L11.9954 10.0123L9.93918 7.95606C9.52793 7.54481 8.86293 7.54481 8.45606 7.95606Z" fill="#96A5B8"/>
                     </g>
                  </svg>
               </button>
            </div>
            <!-- Modal Body -->
            <div class="modal-body role_scr_modal">
               <form id="role-form" action="{{ route('roles.store') }}" method="POST">
                  @csrf
                  <input type="hidden" name="_method" id="method_field" value="POST"> 
                  <input type="hidden" name="role_id" id="role_id" value=""> 
                  <div class="col-12 col-lg-4 mb-2">
                     <div class="form-group">
                        <label for="name" class="form-label">Role Name</label>
                        <div class="input-field">
                           <span class="icon">
                              <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 15 15" fill="none">
                                 <path fill-rule="evenodd" clip-rule="evenodd" d="M7.5 0.78125C5.8604 0.78125 4.53125 2.1104 4.53125 3.75C4.53125 5.3896 5.8604 6.71875 7.5 6.71875C9.1396 6.71875 10.4688 5.3896 10.4688 3.75C10.4688 2.1104 9.1396 0.78125 7.5 0.78125ZM5.46875 3.75C5.46875 2.62817 6.37817 1.71875 7.5 1.71875C8.62183 1.71875 9.53125 2.62817 9.53125 3.75C9.53125 4.87183 8.62183 5.78125 7.5 5.78125C6.37817 5.78125 5.46875 4.87183 5.46875 3.75Z" fill="#868C98"></path>
                                 <path fill-rule="evenodd" clip-rule="evenodd" d="M7.5 7.65625C6.22542 7.65625 5.04845 7.95047 4.17384 8.45024C3.3125 8.94244 2.65625 9.69383 2.65625 10.625C2.65625 11.5562 3.3125 12.3076 4.17384 12.7998C5.04845 13.2995 6.22542 13.5938 7.5 13.5938C8.77458 13.5938 9.95155 13.2995 10.8262 12.7998C11.6875 12.3076 12.3438 11.5562 12.3438 10.625C12.3438 9.69383 11.6875 8.94244 10.8262 8.45024C9.95155 7.95047 8.77458 7.65625 7.5 7.65625ZM3.59375 10.625C3.59375 10.1755 3.91688 9.67685 4.63897 9.26422C5.34781 8.85917 6.35834 8.59375 7.5 8.59375C8.64166 8.59375 9.65219 8.85917 10.361 9.26422C11.0831 9.67685 11.4062 10.1755 11.4062 10.625C11.4062 11.0745 11.0831 11.5732 10.361 11.9858C9.65219 12.3908 8.64166 12.6562 7.5 12.6562C6.35834 12.6562 5.34781 12.3908 4.63897 11.9858C3.91688 11.5732 3.59375 11.0745 3.59375 10.625Z" fill="#868C98"></path>
                              </svg>
                           </span>
                           <input type="text" class="form-control" placeholder="Enter Role Title" name="name" id="name" required>
                        </div>
                     </div>
                  </div>
                  <div class="col-12 pt-1">
                     <table id="role_assign-table" class="table theme_table  nowrap align-middle" style="width:100%">
                        <thead>
                           <tr>
                              <th>Menu</th>
                              <th>View</th>
                              <th>Add</th>
                              <th>Edit</th>
                              <th>Delete</th>
                              <th>All</th>
                           </tr>
                        </thead>
                        <tbody>
                           
                        </tbody>
                     </table>
                  </div>
                   <!-- Modal Footer -->
                  <div class="modal-footer border-top">
                     <div class="gap-2 d-flex justify-content-end my-0 pt-3">
                        <button type="button" class="btn btn_discard rounded sweetDeptSubmit" data-bs-dismiss="modal">
                        <span class="fs-16">Discard</span>
                        </button>
                        <button type="submit" class="btn btn_primary">
                        <span class="fs-16">Save Role</span>
                        </button>
                     </div>
                  </div>
               </form>
            </div>
         </div>
      </div>
    </div>
</div>
@endsection
@section('script')
    <script src="{{ url('js/jquery-validate-1.19.3/jquery-validate.min.js') }}"></script>
    <script src="{{ url('js/datatable-1.11.5_cdn/datatables.jquery.min.js') }}"></script>
    <script src="{{ url('js/datatable-1.11.5_cdn/datatables.bootstrap5.min.js') }}"></script>
    <script src="{{ url('js/datatable-1.11.5_cdn/datatables.responsive.min.js') }}"></script>
    <script src="{{ url('js/sweetalert-2@11.20/sweetalert2.all.min.js') }}"></script>

    <script src="{{ url('js/permission/role-index.js') }}"></script>
    <script>
        let role_index_route     = '{{ route('roles.index') }}';
        let role_store_route     = '{{ route('roles.store') }}';
        let role_update_route    = '{{ route('roles.update', ':id') }}';
        let role_edit_route      = '{{ route('roles.edit', ':id') }}';
        let add_permission_route = '{{ route('roles.add-permissions', ':id') }}';
        let role_delete_route    = '{{ route('roles.destroy', ':id') }}';
        let role_create_route    = '{{ route('roles.create') }}';
    </script>
@endsection