@extends('modules.head') @section('contenido')
<h3>Packed & Ready Orders</h3><br>
<select class="form-control" id="shippingTypes-select">
    <option value="">Select Shipping Type</option>
    @foreach ($shippingTypes as $shippingType)
    <option value="{{ $shippingType->id }}"> {{ $shippingType->name }} </option>
    @endforeach
</select><br>
<div class="orders_in_packed_and_ready_container">
    <div class="box-body table-responsive" id='orders_in_packed_and_ready_table_container'>
    </div>
</div>
<!-- /.MODAL VER INFO admin -->
@include('orders.infoOrder')
<style>
    #shippingTypes-select {
        width: 200px;
    }
</style>
<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() {
        $("#shippingTypes-select").on("change", function() {
            if ($(this).val() > 0) {
                paintDataTable($(this).val());
            }
        })
    });

    function paintDataTable(shippingTypeId) {
        if (shippingTypeId != undefined) {
            addHeaderDataTable()
            $('#orders_in_packed_and_ready_table thead tr')
                .clone(true)
                .addClass('filters')
                .prependTo('#orders_in_packed_and_ready_table thead');

            $('#orders_in_packed_and_ready_table thead tr:first-child > th').css('background-color', "rgb(236 243 249)");
            $("#orders_in_packed_and_ready_table").dataTable().fnDestroy();
            _table = $('#orders_in_packed_and_ready_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-pending-orders-data/" + shippingTypeId,
                },
                columns: [{
                        name: 'code',
                        data: 'code',
                        render: function(data, type, row) {
                            return `<a onClick="clickInfoOrder(${row.id}, true)" 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
            });
        }

    }

    function addHeaderDataTable() {
        let tableHeaderContainer = $("#orders_in_packed_and_ready_table_container");
        tableHeaderContainer.empty();
        let header = `<table id="orders_in_packed_and_ready_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="1" aria-label="Browser: activate to sort column ascending">Days</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>`;
        tableHeaderContainer.append(header);
    }
</script>
@endsection