@extends('admin.layouts.app')
@section('title', 'Orders')
@section('page.title')
<!-- Title -->
<h1 class="h2 hide-large-desk">Orders</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">Orders</li>
    </ol>
</nav>
<!--breadcrum end-->
@endsection                  
@section('content')
    <div class="section">

        <div class="card pmd-card pmd-data-table">
            <table id="orders" class="table pmd-table table-hover table-striped display dt-responsive nowrap">
                <thead>
                    <tr>
                        <th>No</th>
                        <th>Order No</th>
                        <th>ATRN</th>
                        <th>Roll Number</th>
                        <th>Name</th>
                        <th>Amount</th>
                        <th>Status</th>                        
                        <th>Payment Method</th>
                        <th>Date</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    </div>
@endsection
@push('scripts')
<script type="text/javascript">
  $(function () {
    
    var table = $('#orders').DataTable({
        processing: true,
        serverSide: true,
        ajax: "{{ route('admin.orders.list') }}",
        responsive: {
            details: {
                type: 'column',
                target: 'tr'
            }
        },
        order: [1, 'desc'],
        columns: [
            {data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false},
            {data: 'transaction_id', name: 'transaction_id'},
            {data: 'atrn_no', name: 'atrn_no'},
            {data: 'roll_number', name: 'roll_number'},
            {data: 'name', name: 'name'},
            {data: 'amount', name: 'amount'},
            {data: 'status', name: 'status'},
            {data: 'payment_method', name: 'payment_method'},
            {data: 'created_at', name: 'created_at'},
            {data: 'action', name: 'action'},
        ],
        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>>"
    });
    
    $('#papers_wrapper .custom-select-info').hide();

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