@extends('adminlte::page')
@section('content_header')
    @notifyCss
    @notifyJs
@stop
@section('content')
    <div class="row">
        <div class="col-12">
            <div class="card card-info">
              <div class="card-header">
                  <h3 class="card-title"><b>Training Participants List</b></h3>
              </div>
              <div id="listroledata" style="padding: 10px;">
                  <table class="table table-hover table-bordered table-striped datatable" id="dept_details" width="100%">
                      <thead>
                          <tr>
                            <th>Slno</th>
                            <th>Organisation</th>
                            <th>Roles</th>
                            <th>Training Title</th>
                            <th>Training Period</th>
                            <th>Actions</th>
                          </tr>
                      </thead>
                  </table>
              </div>
            </div>
        </div>
        
    </div>
    <script type="text/javascript">
        $(document).ready(function () 
        {
            $('#dept_details').DataTable({
                "buttons" : ['excelHtml5', 'excel', 'pdf', 'print', 'reset', 'reload'],
                "processing": true,
                "serverSide": true,
                "ajax":{

                         "url": "{{ url('get_participant_details') }}",
                         "dataType": "json",
                         "type": "POST",
                         "data":{ _token: "{{csrf_token()}}"}
                       },
                "columns": [
                    { "data": "DT_RowIndex" },
                    { "data": "org_name" },
                    { "data": "roles" },
                    { "data": "title" },
                    { "data": "training_period"},
                    { "data": "action" }
                ], 
                
                "order": [[1, 'asc']]
            });      
        });
        
    </script>
@stop