@extends('modules.head') @section('contenido')
<h3>Pending PUG Orders</h3><br>
<div class="pug_pending_container">
    <div class="box-body table-responsive" id='pug_pending_table_container'>
        <table id="pug_pending_table" class="table table-bordered table-hover dataTable" role="grid" aria-describedby="example2_info">
            <thead>
                <tr role="row">
                    <th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending">Code</th>
                    <th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending">Client</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">Branch</th>
                    <th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending">Created Date</th>
                    <th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="0.5" aria-label="Browser: activate to sort column ascending">Days</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>
</div>
<!-- /.MODAL VER INFO admin -->
@include('orders.infoOrder')
<script src="{{ asset('js/jQuery/jquery-2.2.3.min.js') }}"></script>
<script src="{{ asset('js/bootstrap/js/bootstrap.min.js') }}"></script>
<script src="{{ asset('js/create_filters_for_dataTables.js') }}"></script>
<script src="{{ asset('js/orders.js') }}"></script>
<script type="text/javascript">
    $(document).ready(function() {
        // table logic showing pug orders
        $('#pug_pending_table thead tr')
            .clone(true)
            .addClass('filters')
            .prependTo('#pug_pending_table thead');

        $('#pug_pending_table thead tr:first-child > th').css('background-color', "rgb(236 243 249)");
        $("#pug_pending_table").dataTable().fnDestroy();
        _table = $('#pug_pending_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-pug-orders-data',
            },
            columns: [{
                    // COLUMN NAME: POS-ID
                    name: 'code',
                    data: 'code',
                    render: function(data, type, row) {
                        return `<a onClick="clickInfoOrder(${row.id}, false)" role="button" class="table-link"
                             title="See order details">${data}</a>`;
                    }
                },
                {
                    data: 'client',
                    name: 'client.document',
                    render: function(data, type, row){
                        return `<a target="_blank" href="/clients/edit/${data.id}">${data.document}</a>`;
                    }
                },
                {
                    data: 'total_price',
                    name: 'total_price',
                },
                {
                    data: 'branch.short_name',
                    name: 'branch.short_name',
                },

                {
                    data: 'creation_date',
                    name: 'creation_date',
                },
                {
                    data: 'created_days',
                    name: 'created_days',
                },

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