@extends('layouts.training_centre_layout')

@section('content')
<!-- [ Page Header ] start -->
<x-page-header title="{{ $pageTitle }}" :backButton="true" />

<!-- [ Page Header ] end -->
<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-body">
                <div class="dt-responsive">
                    <table id="centre-applications-table" class="table table-striped table-bordered nowrap" style="width: 100%;">
                        <thead>
                            <tr>
                                <th>Sl. No.</th>
                                <th>Centre Name</th>         
                                <th>Email</th>               
                                <th>Application No.</th>    
                                <th>Submitted On</th>
                                <th>Status</th>
                                <th style="width: 100px;">Actions</th>
                            </tr>
                        </thead>

                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('pages-scripts')
<script>
$(document).ready(function () {
    $('#centre-applications-table').DataTable({
        processing: true,
        serverSide: true,
        ajax: "{{ route('training-centre.my-application.ajax') }}",
        columns: [
                    { data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false, searchable: false },
                    { data: 'basic_name', name: 'basic_name' },      
                    { data: 'basic_email', name: 'basic_email' },
                    { data: 'application_number', name: 'application_number' },
                    { data: 'submitted_on', name: 'created_at' },
                    { data: 'status', name: 'application_status' },
                    { data: 'actions', name: 'actions', orderable: false, searchable: false }
                ]

    });
});
</script>
@endsection