@extends('manager.layouts.app')

@section('page_title')
    {{ (!empty($page_title) && isset($page_title)) ? $page_title : '' }}
@endsection

@push('head-scripts')
    <link rel="stylesheet" href="{{ asset('admin/datatable/datatables.min.css') }}"/>
@endpush

@section('content')
    <div class="card mt-3">
        <div class="card-body">

            <div class="d-flex justify-content-between">
                <div>
                    <h4 class="card-title mb-0">{{ $p_title ?? '' }}</h4>
                    <small class="text-muted">{{ $p_summary ?? '' }}</small>
                </div>
            </div>

            <hr>

            <div class="table-responsive">
                <table id="indextable" class="table table-bordered table-striped table-hover w-100 pt-1">
                    <thead class="table-dark">
                    <tr>
                        <th>#</th>
                        <th>Full Name</th>
                        <th>Father Name</th>
                        <th>Gender</th>
                        <th>Campus</th>
                        <th>CNIC</th>
                        <th>DOB</th>
                        <th>Email</th>
                    </tr>
                    </thead>
                </table>
            </div>

        </div>
    </div>
@endsection

@push('footer-scripts')
    <script src="{{ asset('admin/datatable/datatables.min.js')}}"></script>

    <script>
        $(document).ready(function () {

            $('#indextable').DataTable({
                processing: true,
                serverSide: true,
                responsive: true,

                ajax: {
                    url: "{{ route('manager.online.applications.data') }}",
                    type: "GET"
                },

                columns: [
                    { data: 'id', name: 'id' },
                    { data: 'full_name', name: 'full_name' },
                    { data: 'father_name', name: 'father_name' },
                    { data: 'gender', name: 'gender' },
                    { data: 'campus', name: 'campus' },
                    { data: 'cnic', name: 'cnic' },
                    { data: 'dob', name: 'dob' },
                    { data: 'email', name: 'email' },
                ],

                order: [[0, "desc"]],

                columnDefs: [
                    {
                        targets: 0,
                        orderable: false,
                        searchable: false,
                        render: function (data, type, row, meta) {
                            return meta.row + meta.settings._iDisplayStart + 1;
                        }
                    }
                ]
            });

        });
    </script>
@endpush