@extends('layouts.admin')

@push('styles')
    <style>
        table thead th:first-child {
            width: 33%;
        }
        table thead th:nth-child(2) {
            width: 33%;
        }
        table thead th:nth-child(3) {
            width: 33%;
        }
    </style>
@endpush
@section('content')
@can('values_manage')
    <div style="margin-bottom: 10px;" class="row">
        <div class="col-lg-12">            
            Order List
        </div>
    </div>
@endcan
<div class="card">
    <div class="card-header">
        Order Li st  
    </div>

    <div class="card-body">
    <div class="row">
        <div class="table-responsive">
            <table id="order-table" class=" table table-bordered table-striped table-hover" width="100%">
                <thead>
                    <tr>
                        <th>
                            Order ID
                        </th>
                        <th>
                            Date
                        </th>
                        <th>
                            Status
                        </th>
                        <th>
                            Customer First Name 
                        </th> 
                        <th>
                            Customer Last Name
                        </th>
                        <th>
                            Customer Email
                        </th>                        
                        <th>
                           Customer Address
                        </th>
                        <th>
                           Quantity
                        </th>
                        <th>
                           SKU
                        </th>
                        <th>
                           Serial Number
                        </th>
                        <th>
                            Description
                        </th>
                    </tr>
                </thead>
            </table>
        </div>

    </div>    
    </div>
</div>
@endsection
@section('scripts')
@parent
<script>
    $(document).ready(function() {
     $('#order-table').DataTable({
        "serverSide": true,
        "pageLength": 25,
        'processing': true,
        "language": {
            processing: '<i class="fa fa-spinner fa-spin fa-3x fa-fw"></i><span class="sr-only">Loading...</span> '
        },
        "searching" : true,
        "order": [[1, 'desc' ]],
        "paging": true,
        "ajax": {
            "url" : "{{ route('admin.orders.getdata') }}",
            "dataType" : "json",
            "type" : "GET"
        },    
        "columns":[
            // { "data": "order_id" },
            { "data": "order_id",
                        "orderable": true,
                        "searchable": true,
                        "render": function(data,type,row,meta) { // render event defines the markup of the cell text 
                            var a = '<a href="/admin/orders/'+row.order_id+'" target="_blank">' + row.order_id +'</a>'; // row object contains the row data
                            return a;
                        }
                    },
            { "data": "date_paid" },
            { "data": "status" },
            { "data": "ship_first_name" },
            { "data": "ship_last_name" },
            { "data": "email" },
            { "data": "ship_address_line_1" },
            { "data": "quantity" },
            { "data": "sku" },
            { "data": "serial_number" },
            { "data": "description" }
        ]
     });
});
  
</script>
@endsection