@extends('admin.layouts.app')
@section('title', 'Students')
@section('page.title')
<!-- Title -->
<h1 class="h2 hide-large-desk">Students</h1>
<!-- End Title -->
@endsection   
@section('breadcrumb') 
<!--breadcrum start-->
<nav aria-label="breadcrumb">
    <ol class="breadcrumb pmd-breadcrumb">
        <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Admin</a></li>
        <li class="breadcrumb-item active">Students</li>
    </ol>
</nav>
<!--breadcrum end-->
@endsection                  
@section('content')
    <div class="section">

        <div class="card pmd-card pmd-data-table">
            <table id="students" class="table pmd-table table-hover table-striped display dt-responsive nowrap">
                <thead>
                    <tr>
                        <th>No</th>
                        <th>Name</th>
                        <th>Roll Number</th>
                        <th>Father Name</th>
                        <th>Mother Name</th>
                        <th>DOB</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    </div>

    <div class="menu list-view pmd-floating-action" role="navigation">
        <a class="pmd-floating-action-btn btn pmd-btn-fab pmd-btn-raised pmd-ripple-effect btn-primary text-white pmd-sidebar-toggle" href="{{ route('admin.students.create') }}" data-title="Add Paper">
            <i class="material-icons">add</i>
        </a>
    </div>
@endsection
@push('scripts')
<script type="text/javascript">
  $(function () {
    
    var table = $('#students').DataTable({
        processing: true,
        serverSide: true,
        ajax: "{{ route('admin.students.list') }}",
        responsive: {
            details: {
                type: 'column',
                target: 'tr'
            }
        },
        order: [1, 'asc'],
        columns: [
            {data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false},
            {data: 'name', name: 'name'},
            {data: 'roll_number', name: 'roll_number'},
            {data: 'f_name', name: 'f_name'},
            {data: 'm_name', name: 'm_name'},
            {data: 'd_of_b', name: 'd_of_b'},
            {
                data: 'action', 
                name: 'action', 
                orderable: true, 
                searchable: true
            },
        ],
        bFilter: true,
        bLengthChange: true,
        pagingType: "simple",
        "paging": true,
        "bDestroy": true,
        "searching": true,
        "language": {
            "info": " _START_ - _END_ of _TOTAL_ ",
            "sLengthMenu": "<span class='custom-select-title'>Rows per page:</span> <span class='pmd-custom-select'> _MENU_ </span>",
            "sSearch": "",
            "sSearchPlaceholder": "Search",
            "paginate": {
                "sNext": " ",
                "sPrevious": " "
            }
        },
        dom: "<'card-header d-md-flex flex-row'<'data-table-title mb-3'><'pmd-textfield datatable-search pmd-textfield-outline ml-sm-auto'f>>" +
            "<'row'<'col-sm-12'tr>>" +
            "<'card-footer' <'pmd-datatable-pagination' l i p>>"
    });
    
    $('#students_wrapper .custom-select-info').hide();

    table.on('draw', function (data) {
        $("#students_wrapper .data-table-title").html(
        '<h2 class="card-title">Total Students: ' + table.page.info().recordsDisplay + '</h2>');
    });
});
</script>
@endpush