@extends('modules.head') @section('contenido')

<h3>GH Pending Orders</h3><br>
<div class="box-body table-responsive" id='gh-pending-orders-table-container'>
    <table id="gh-pending-orders-table" class="table table-bordered table-hover dataTable" role="grid" aria-describedby="gh-pending-orders-table">
        <thead>
            <tr role="row">
                <th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending">Company</th>
                <th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending">Document</th>
                <th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending">Status</th>
                <th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending">WooCommerce Id</th>
                <th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending">Total</th>
                <th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending">Creation Date</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
</div>
<script src="{{ asset('js/jQuery/jquery-2.2.3.min.js') }}"></script>
<script src="{{ asset('js/create_filters_for_dataTables.js') }}"></script>

<script type="text/javascript">
     $(function() {
        $('#gh-pending-orders-table thead tr')
            .clone(true)
            .addClass('filters')
            .prependTo('#gh-pending-orders-table thead');

        $('#gh-pending-orders-table thead tr:first-child > th').css('background-color', "rgb(236 243 249)");
        $("#gh-pending-orders-table").dataTable().fnDestroy();
        _table = $('#gh-pending-orders-table').DataTable({
            responsive: true,
            processing: true,
            serverSide: true,
            "order": [],
            "language": {
                url: 'https://cdn.datatables.net/plug-ins/1.10.19/i18n/Spanish.json'
            },
            ajax: {
                url: '/get-gh-pending-orders',
            },
            columns: [
                {
                    data: 'company',
                    name: 'company',
                },
                {
                    data: 'document',
                    name: 'document',
                },
                {
                    data: 'status',
                    name: 'status',
                },
                {
                    data: 'wc_order_id',
                    name: 'wc_order_id',
                },
                {
                    data: 'total',
                    name: 'total',
                },
                {
                    data: 'date_created',
                    name: 'date_created',
                },

            ],
            orderCellsTop: true,
            fixedHeader: true,
            initComplete: addFiltersForDataTable,
        });
    });
</script>
@endsection