@extends('admin.includes.master')

@section('content')

  <div class="header bg-primary pb-0">
    <div class="container-fluid">
      <div class="header-body">
        <div class="row align-items-center py-2">
          <div class="col-lg-6 col-7">
            <h6 class="h4 text-white d-inline-block mb-0">Department</h6>
          </div>

          <div class="col-lg-6 col-7 text-right">
              <a href="{{ url('admin/departments/create') }}" class="btn btn-icon bg-white btn-sm btn-primary text-primary">
                <i class="fas fa-plus-circle"></i> Add
              </a>
          </div>

        </div>
      </div>
    </div>
  </div>


    <div class="container">
      <div class="flash-message">
        @foreach (['danger', 'warning', 'success', 'info'] as $msg)
          @if(Session::has('alert-' . $msg))
              <p class="alert alert-{{ $msg }}" style="color:#ffff;">{{ Session::get('alert-' . $msg) }}
               <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a></p>
              {{ session()->forget('alert-' . $msg) }}
            @endif
          @endforeach
       </div> <!-- end .flash-message -->

     <div class="card card-body p-1">
        <div class="table-responsive py-4">
          <table id="table" class="table table-hover table-flush " style="width:100%">
            <thead class="thead-light">
                <tr class="text-center">
                    <th class="p-1">SN</th>
                    <th class="p-1">Action</th>                  
                    <th class="p-1">Department Group</th>
                    <th class="p-1">Department </th>
                </tr>
            </thead>
          </table>
        </div>
     </div>
  </div>

@endsection

@section('script')

<script type="text/javascript">
  $(document).ready(function(){
  const url="{{ url('admin/departments') }}";
  $('#table').DataTable({
      processing: true,
      serverSide: true,
      language: {
        paginate: {
          next: '&#8594;', // or '→'
          previous: '&#8592;' // or '←'
        }
      },
      columnDefs:[
              {
                targets: 2,
                className: 'text-left',
                createdCell: function (td, cellData, rowData, row, col) {
                    $(td).css('padding', '3px')
                },
              },
              {
                targets: '_all',
                className: 'text-left',
                createdCell: function (td, cellData, rowData, row, col) {
                    $(td).css('padding', '3px')
                }
              }
            ],
            dom:'lfBrtip',
            buttons: [
                      { extend: 'print', className: 'btn btn-outline-danger btn-sm p-1 py-0 px-0' },
                      { extend: 'copy', className: 'btn btn-outline-info btn-sm p-1 py-0 px-0' },
                      { extend: 'excel', className: 'btn btn-outline-warning btn-sm p-1 py-0 px-0' },
                      { extend: 'csv', className: 'btn btn-outline-success btn-sm p-1 py-0 px-0' },
                      { extend: 'pdf', className: 'btn btn-outline-default btn-sm p-1 py-0 px-0' },
                  ],
    ajax: {
          url:url,
          type: "GET",
          data: function (d) {
          // d.search_batch = $('#search_batch').val();
          // d.search_course = $('#search_course').val();
          // d.search_extra = $('#search_extra').val();
       }
      },
      columns: [
                //{data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false, searchable: false },
                {data: 'index', name: 'index'},
                {data: 'action', name: 'action'},
                {data: 'department_group', name: 'department_group'},
                {data: 'department', name: 'department'},
                
          ],
      });
    });
// ***************** SEARCH BUTTON
$('#btnFiterSubmitSearch').click(function(){
    $('#users').DataTable().draw(true);
 });

</script>
  
@endsection