@extends('ui-common.layouts.master')
@section('title')
@lang('Employee List')
@endsection
@section('css')   
<!-- DataTable 1.11.5 -->
<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" />
<!-- select2@4.1.0 -->
<link href="{{ url('css/Select2_cdn/select2.min.css') }}" rel="stylesheet" />
<!-- font-awesome-6.7.2 -->
<link href="{{ url('css/font-awesome_cdn/font-awesome.min.css') }}" rel="stylesheet" />
<link href="{{ url('css/sidebar/sidebar.css') }}" rel="stylesheet" />

@endsection
@section('content')
@component('tenants.components.breadcrumb')
@slot('li_1')
Equipment List
@endslot
@slot('title')
Equipment
@endslot
@endcomponent
<style>
   #equipment_list_table tbody tr:nth-child(even) {
   background-color: #f9f9fb; /* Green color */
   color: white !important; /* Ensure text is visible with green background */
   }
   .theme_table tbody tr td.heading{
   font-weight:700 !important;
   font-size:13px !important;
   }
   .theme_table tbody tr td.cost_code{
   font-weight:500 !important;
   font-size:13px !important;
   padding-left: 45px !important;
   font-weight:500 !important
   }
</style>
<div class="row">
   <div class="card pb-3">
      <div class="col-12">
         <div class="row px-md-3 py-5">
            <div class="col-12 common_datatable_theme table_search_custom">
               <table id="equipment_list_table" class="table theme_table dt-responsive 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>
                     <tr>
                        <td class="heading"><i class=" cost_code_icon pe-2"></i>Cost Code</td>
                        <td>
                           <div class="form-check form-switch">
                              <input type="checkbox" class="form-check1  form-check-input" name="permissions[]" value="employee view" checked>
                           </div>
                        </td>
                        <td>
                           <div class="form-check form-switch">
                              <input type="checkbox" class="form-check1  form-check-input" name="permissions[]" value="employee view" checked>
                           </div>
                        </td>
                        <td>
                           <div class="form-check form-switch">
                              <input type="checkbox" class="form-check1  form-check-input" name="permissions[]" value="employee view" checked>
                           </div>
                        </td>
                        <td>
                           <div class="form-check form-switch">
                              <input type="checkbox" class="form-check1  form-check-input" name="permissions[]" value="employee view" checked>
                           </div>
                        </td>
                        <td>
                           <div class="form-check form-switch">
                              <input type="checkbox" class="form-check1  form-check-input" name="permissions[]" value="employee view" checked>
                           </div>
                        </td>
                     <tr>
                        <td class="cost_code">Cost Code List</td>
                        <td>
                           <div class="form-check form-switch">
                              <input type="checkbox" class="form-check1  form-check-input" name="permissions[]" value="employee view" checked>
                           </div>
                        </td>
                        <td>
                           <div class="form-check form-switch">
                              <input type="checkbox" class=" form-check1 form-check-input" name="permissions[]" value="employee add" checked>
                           </div>
                        </td>
                        <td>
                           <div class="form-check form-switch">
                              <input type="checkbox" class="form-check1  form-check-input" name="permissions[]" value="employee edit" checked>
                           </div>
                        </td>
                        <td>
                           <div class="form-check form-switch">
                              <input type="checkbox" class=" form-check1 form-check-input" name="permissions[]" value="employee delete" checked>
                           </div>
                        </td>
                        <td>
                           <div class="form-check form-switch">
                              <input type="checkbox" class="form-check1  form-check-input" name="permissions[]" value="employee all" checked>
                           </div>
                        </td>
                     </tr>
                     <tr>
                        <td class="heading"><i class=" department_icon pe-2"></i>Department</td>
                        <td>
                           <div class="form-check form-switch">
                              <input type="checkbox" class="form-check1  form-check-input" name="permissions[]" value="employee all" checked>
                           </div>
                        </td>
                        <td>
                           <div class="form-check form-switch">
                              <input type="checkbox" class="form-check1  form-check-input" name="permissions[]" value="employee all" checked>
                           </div>
                        </td>
                        <td>
                           <div class="form-check form-switch">
                              <input type="checkbox" class="form-check1  form-check-input" name="permissions[]" value="employee all" checked>
                           </div>
                        </td>
                        <td>
                           <div class="form-check form-switch">
                              <input type="checkbox" class="form-check1  form-check-input" name="permissions[]" value="employee all" checked>
                           </div>
                        </td>
                        <td>
                           <div class="form-check form-switch">
                              <input type="checkbox" class="form-check1  form-check-input" name="permissions[]" value="employee all" checked>
                           </div>
                        </td>
                     </tr>
                     <tr>
                        <td class="heading"><i class=" employee_icon pe-2"></i>Employee</td>
                        <td>
                           <div class="form-check form-switch">
                              <input type="checkbox" class="form-check1  form-check-input" name="permissions[]" value="employee view" checked>
                           </div>
                        </td>
                        <td>
                           <div class="form-check form-switch">
                              <input type="checkbox" class="form-check1  form-check-input" name="permissions[]" value="employee view" checked>
                           </div>
                        </td>
                        <td>
                           <div class="form-check form-switch">
                              <input type="checkbox" class="form-check1  form-check-input" name="permissions[]" value="employee view" checked>
                           </div>
                        </td>
                        <td>
                           <div class="form-check form-switch">
                              <input type="checkbox" class="form-check1  form-check-input" name="permissions[]" value="employee view" checked>
                           </div>
                        </td>
                        <td>
                           <div class="form-check form-switch">
                              <input type="checkbox" class="form-check1  form-check-input" name="permissions[]" value="employee view" checked>
                           </div>
                        </td>
                     <tr>
                        <td class="cost_code">Employee List</td>
                        <td>
                           <div class="form-check form-switch">
                              <input type="checkbox" class="form-check1  form-check-input" name="permissions[]" value="employee view" checked>
                           </div>
                        </td>
                        <td>
                           <div class="form-check form-switch">
                              <input type="checkbox" class=" form-check1 form-check-input" name="permissions[]" value="employee add" checked>
                           </div>
                        </td>
                        <td>
                           <div class="form-check form-switch">
                              <input type="checkbox" class="form-check1  form-check-input" name="permissions[]" value="employee edit" checked>
                           </div>
                        </td>
                        <td>
                           <div class="form-check form-switch">
                              <input type="checkbox" class=" form-check1 form-check-input" name="permissions[]" value="employee delete" checked>
                           </div>
                        </td>
                        <td>
                           <div class="form-check form-switch">
                              <input type="checkbox" class="form-check1  form-check-input" name="permissions[]" value="employee all" checked>
                           </div>
                        </td>
                     </tr>
                  </tbody>
               </table>
            </div>
         </div>
      </div>
   </div>
</div>
@endsection
@section('script')   
<script src="{{ url('js/jquery-3.6.0_cdn/jquery.min.js') }}"></script>
<script src="{{ url('js/select2@4.1.0/select2.min.js') }}"></script>
<script src="{{ url('js/select2.init.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/app.js') }}"></script>
<script>   
   $(document).ready(function() {
     // Initialize select2
     
   
     $('#equipment_list_table').DataTable({
         searching: true,
         info: true,
         lengthChange: true,
         pagingType: "simple_numbers",
         language: {
             "paginate": {
                 "previous": '<span class="fa fa-chevron-left"></span>',
                 "next": '<span class="fa fa-chevron-right"></span>',
             },
            
         },
   
     });
   
     table.clear().draw(); // If you are dynamically updating the table
   
   
   });
   // Function to reinitialize DataTable after content change
   function reinitializeDataTable() {
    var table = $('#equipment_list_table').DataTable();
    table.clear().draw();  // Clear previous data
    table.rows.add(newData);  // Add new data
    table.columns.adjust().draw();  // Adjust column widths
   }
   
   
    
</script>
@endsection