@extends('admin.layout.app')

@section('content')
<section class="pcoded-main-container">
    <div class="pcoded-wrapper">
        <div class="pcoded-content">
            <div class="pcoded-inner-content">
                <div class="page-header">
                    <div class="page-block">
                        <div class="row align-items-center">
                            <div class="col-md-12">
                                <div class="page-header-title">
                                    <h5 class="m-b-10">Orders</h5>
                                </div>
                                <ul class="breadcrumb">
                                    <li class="breadcrumb-item"><a href="{{ route('admin.home') }}"><i class="feather icon-home"></i></a></li>
                                    <li class="breadcrumb-item"><a href="javascript:void(0)">Orders</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="main-body">
                    <div class="page-wrapper">
                        <div class="row">

                            <div class="col-xl-12">

                                @include('admin.layout.session')

                                <div class="card">
                                    <div class="card-header">
                                        <h5>Orders</h5>
                                    </div>
                                    <div class="card-block table-border-style">
                                        <div class="row">
                                            <div class="col-md-3">
                                                <div class="form-group">
                                                    <label>Status</label>
                                                    <select class="form-control status_filter">
                                                        <option value="">- All -</option>
                                                        <option value="success">Success</option>
                                                        <option value="cancel">Cancel</option>
                                                        <option value="pending">Pending</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                   
                                        <div class="table-responsive Recent-Users">
                                            <table class="table table-hover orders_datatable">
                                                <thead>
                                                    <tr>
                                                        <th>Order ID</th>
                                                        <th>Ord. Name</th>                                                        
                                                        <th>T. Amount</th> 
                                                        <th>Ord. Status</th>
                                                        <th>Ord. Date</th>
                                                        @if(auth()->user()->can('edit_orders') || auth()->user()->can('delete_orders'))
                                                          <th>Action</th>
                                                        @endif
                                                    </tr>
                                                </thead>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- [ Main Content ] end -->
@endsection

@push('js')
<script type="text/javascript">
$(function(){
    $('.orders').addClass('active');

    var oTable = $('.orders_datatable').DataTable({
        processing: false,
        serverSide: true,
        ajax: {
            url: '{!! route('admin.orders.index') !!}',
            data: function (d) {
                //for order status
                var status = $('.status_filter option:selected').val();
                if(typeof(status) !== "undefined" && status !== null && status !== '') {
                    d.status = status;
                }       
            }
        },
        columns: [
            {data: 'order_id', name: 'order_id', sortable: true, orderable: true, searchable: true},
            {data: 'orderer_name', name: 'orderer_name', sortable: true, orderable: true, searchable: true},            
            {data: 'grand_total', name: 'grand_total', sortable: true, orderable: true, searchable: true},
            {data: 'status', name: 'status', sortable: true, orderable: true, searchable: true},
            {data: 'created_at', name: 'created_at', sortable: true, orderable: true, searchable: true},
            @if(auth()->user()->can('edit_orders') || auth()->user()->can('delete_orders'))
            {data: 'action', sortable: false,searchable: false},
            @endif
        ],
        aLengthMenu: [
            [10, 25, 50, 100, 200, -1],
            [10, 25, 50, 100, 200, "All"]
        ],
        iDisplayLength: 100,
        
        @if(!auth()->user()->can('edit_orders') && !auth()->user()->can('delete_orders'))
            order: [[3, 'asc']],
        @elseif(auth()->user()->can('edit_orders') && auth()->user()->can('delete_orders'))
            order: [[4, 'asc']],
        @elseif(auth()->user()->can('edit_orders'))
            order: [[3, 'asc']],
        @elseif(auth()->user()->can('delete_orders'))
            order: [[4, 'asc']],
        @endif
        "pagingType": "full_numbers",
        "language": {
            // "emptyTable": "No fees",
            "search": '<span>Filter:</span> _INPUT_',
            "lengthMenu": '<span>Show:</span> _MENU_',
            "searchPlaceholder": "Search..."
            // "paginate": { 'first': 'First', 'last': 'Last', 'next': '&rarr;', 'previous': '&larr;' }
        },
        autoWidth: true,
        'fnDrawCallback': function( oSettings ) {
        },
        // "rowCallback": function( row, data, index ) {
        //     console.log(row);
        //     if (data["payment_status"] == '<span class="badge badge-pill badge-danger">Unpaid</span>' && data["payment_type"] !== "C.O.P.") {
        //         // $(row).remove();
        //         $(row).hide();
        //     }
        // }
    });


    //status filter
    $(document.body).on('change', '.status_filter', function (e) {
        oTable.draw();
        e.preventDefault();
    });

});
</script>
@endpush