@extends('layouts.student_layout')

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

<!-- [ Page Header ] end -->
<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-body">
                <div class="dt-responsive">
                    <table id="pages-datatable" class="table table-striped table-bordered">
                        <thead>
                            <tr>
                                <th>Sl. No.</th>
                                <th>Application No.</th>
                                <th>Student Name</th>
                                <th>Submitted On</th>
                                <th>Status</th>
                                <th width="18%">Actions</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('pages-scripts')
<script>
    $('#pages-datatable').DataTable({
        processing: true,
        responsive: true,
        ordering: false,
        scrollX: true,
        pageLength: 10,
        autoWidth: false,
        ajax: {
            url: "{{ route('my-application.students.new-application-fetch-for-datatable') }}",
            type: "POST",
            data: function (d) {
                d._token = $('meta[name="csrf-token"]').attr('content');
            }

        },
        columns: [{
            data: null,
            name: 'id',
            render: function (data,type,row,meta) {
                return meta.row + 1;
            }
            },
            {
                data: 'application_number',
                name: 'application_number'
            },
            {
                data: 'name',
                data: 'name'
            },
            {
                data: 'created_at',
                data: 'created_at'
            },
            {
                data: 'application_status',
                data: 'application_status'
            },
            {
                data: 'action',
                name: 'action',
            }
        ]
    });
</script>
@endsection