@extends('modules.head') @section('contenido')
<h3>Delivery Routes</h3><br>
<div class="delivery_routes_container">
    <div class="box-body table-responsive" id='delivery_routes_table_container'>
        <table id="delivery_routes_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">Distance (miles)</th>
                    <th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending">ETA (min)</th>
                    <th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending">Orders</th>
                    <th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending">Stops</th>
                    <th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending">Subtotal</th>
                    <th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending">Created</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
        $('#delivery_routes_table thead tr')
            .clone(true)
            .addClass('filters')
            .prependTo('#delivery_routes_table thead');

        $('#delivery_routes_table thead tr:first-child > th').css('background-color', "rgb(236 243 249)");
        $("#delivery_routes_table").dataTable().fnDestroy();
        _table = $('#delivery_routes_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-delivery-routes-data',
            },
            columns: [{
                    name: 'distance',
                    data: 'distance',
                },
                {
                    data: 'eta',
                    name: 'eta',
                },
                {
                    data: 'num_orders',
                    name: 'num_orders',
                },
                {
                    data: 'stops',
                    name: 'stops',
                },

                {
                    data: 'orders_subtotal',
                    name: 'orders_subtotal',
                },
                {
                    data: 'created_at',
                    name: 'created_at',
                     render: function(data, type, row){
                        const event = new Date(data);
                        return event.toUTCString();
                    }
                },

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