@extends('layouts.app')

@section('content')
<div class="breadcrumb_section bg_gray page-title-mini">
    <div class="container">
        <div class="row align-items-center">
        	<div class="col-md-6">
                <div class="page-title">
            		<h1>Welcome {{ Helper::showUsername() }}</h1>
                </div>
            </div>
            <div class="col-md-6">
                <ol class="breadcrumb justify-content-md-end">
                    <li class="breadcrumb-item"><a href="#">Home</a></li>
                    <li class="breadcrumb-item active">My Orders</li>
                </ol>
            </div>
        </div>
    </div>
</div>

<div class="section my_account_wrap mb-4">
    <div class="container">
        <div class="row">
            <div class="col-lg-3 col-md-4">
                @include('layouts.user_menu')
            </div>
            <div class="col-lg-9 col-md-8">
                <div class="row mb-3">
                    <div class="col-md-4">
                        <input type="text" class="form-control frontend_date_filter" placeholder="Filter By Date Range">
                    </div>
                </div>
                <div class="row">
                    <div class="col-12">
                        <div class="table-responsive">
                            <table class="table order_datatable">
                                <thead>
                                    <tr>                                    
                                        <th>Order Id</th>
                                        <th>Amount</th>
                                        <th>Status</th>
                                        <th>Order Date</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- END SECTION SHOP -->


@endsection


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

    var oTable = $('.order_datatable').DataTable({
        processing: false,
        serverSide: true,
        ajax: {
            url: '{!! route('orders.index') !!}',
            data: function (d) {
                //for date range
                var date = $('.frontend_date_filter').val();
                if (typeof date == 'undefined'){
                    date = '';
                }
                d.date = date;
            }
        },
        columns: [            
            {data: 'order_id', name: 'order_id', 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},
            {data: 'action', name: 'action', sortable: false, orderable: false, searchable: false},
        ],

        @if(!auth()->user()->can('view_orders'))
            order: [[3, 'desc']],
        @else
            order: [[4, 'desc']],
        @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: false,
        'fnDrawCallback': function( oSettings ) {
        }
    });

    $('.frontend_date_filter').on('apply.daterangepicker', function(ev, picker) {
        $(this).val(picker.startDate.format('YYYY/MM/DD') + ' - ' + picker.endDate.format('YYYY/MM/DD'));
        oTable.draw();
    });

    $('.frontend_date_filter').on('cancel.daterangepicker', function(ev, picker) {
        $(this).val('');
        oTable.draw();
    });

</script>
@endpush