<table width="100%" cellspacing="0" cellpadding="0" border="0" style=""m>
    <tr>
        <th align="left" width="70px">#</th>
        <th align="left" width=""><?php echo Lang::get('kms::global.name'); ?></th>
        <th align="left" width="80px"><?php echo Lang::get('kms::global.price'); ?></th>
        <th align="left" width="100px"><?php echo Lang::get('kms::global.date'); ?></th>
        <?php if($data['status'] != 'done'): ?>
            <th align="left" width="190px"><?php echo Lang::get('kms::shipments.change_status'); ?></th>
            <th align="left" width="150px"></th>
        <?php endif; ?>
        <th align="left" width="110px"><?php echo Lang::get('kms::shipments.current_status'); ?></th>
        <th align="center" width="110px"><?php echo Lang::get('kms::shipments.save_number'); ?></th>
        <th align="left" width="50px"></th>
    </tr>
    <?php foreach($ordersBySaveNumber as $saveNumberOrders): ?>
        <?php foreach($saveNumberOrders as $saveNumber => $order): ?>
            <tr>
                <td><?php echo $order->order_number; ?></td>
                <td><?php echo $order->getFullInvoiceName(); ?></td>
                <td>&euro;&nbsp;<?php echo price($order->getTotalToPay()); ?></td>
                <td><?php echo helper_localize_date($order->ordered_at,'d-m-Y'); ?></td>
                <?php if($data['status'] != 'done'): ?>
                    <td><?php echo Form::select('status['.$order->id.']',[
                    $order::COMPLETE => Lang::get('kms::orders.voltooid'),
                    $order::PARTLYSHIPPED => Lang::get('kms::orders.gedeeltelijk_verzonden'),
                    $order::BACKORDER => Lang::get('kms::orders.in_backorder')
                    ],
                    (\Input::old('status.'.$order->id) !== null?\Input::old('status.'.$order->id): ($order->status == $order::PARTLYSHIPPED ?$order::PARTLYSHIPPED : $order::COMPLETE)) ); ?>

                    </td>
                    <td>
                        <?php echo Form::submit(Lang::get('kms::shipments.remove_from_shipment'),['name'=>'remove['.$order->id.']' ]); ?>

                    </td>
                <?php endif; ?>
                <td align="center"><?php echo Lang::get('kms::orders.'.$order->status); ?></td>
                <td align="center"><?php echo $order->pivot->save_number; ?></td>
                <td>
                    <a href="<?php echo route('kms.orders.edit', ['orders' => $order->id]); ?>"><?php echo Lang::get('kms::global.view'); ?></a>
                </td>
            </tr>
        <?php endforeach; ?>
            <tr style="border-bottom: 1px solid #e0e6ec">
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <?php if($data['status'] != 'done'): ?>
                    <td></td>
                    <td></td>
                <?php endif; ?>
                <td></td>
                <td></td>
                <td></td>
            </tr>
    <?php endforeach; ?>
</table>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        var selectBoxes = document.querySelectorAll('div.entity-attribute.entity-attribute-view select[name^=status]');
        var length = selectBoxes.length;
        var previousSelectBoxValue = undefined;
        var backorderStatusValue = "<?php echo \KommaApp\Shop\Orders\Order::BACKORDER; ?>";
        var backorderPromptText = "<?php echo Lang::get('kms::orders.place_in_backorder_prompt'); ?>";
        var changeStatusRoute = "<?php echo route('kms.orders.changestatus'); ?>";
        var shipmentId = "<?php echo $shipmentId; ?>";

        var selectBoxChanged = function (changeEvent)
        {
            var selectboxRow = changeEvent.target.parentElement.parentElement;
            var selectbox = changeEvent.target;

            var newValue = selectbox.value;
            var orderId = selectbox.name.substring(selectbox.name.lastIndexOf("[")+1,selectbox.name.lastIndexOf("]")); //Example: gets 208 from a name defined like this "name[208]"
            if(newValue === backorderStatusValue) {
                if(confirm(backorderPromptText))

                {
                    if(placeOrderInBackOrder(orderId, selectboxRow));
                } else {
                    if(!previousSelectBoxValue) return;
                    selectbox.value = previousSelectBoxValue;
                }
            }
        };

        var selectBoxFocussed = function (focusEvent) {
            previousSelectBoxValue = focusEvent.target.value;
        };

        var placeOrderInBackOrder = function(orderId, rowToDeleteWhenDone) {
            console.log(changeStatusRoute);

            $.ajax({
                method: 'POST',
                url: changeStatusRoute,
                async: false,
                dataType: 'json',
                data: {
                    'orderId': orderId,
                    'shipmentId' : shipmentId,
                    'status': backorderStatusValue
                },
                success: function (response) {
                    rowToDeleteWhenDone.parentElement.removeChild(rowToDeleteWhenDone);
                },
                error: function (xhr, ajaxOptions, thrownError) {
                    console.error(thrownError + " - " + changeStatusRoute);
                    // alert(thrownError + " - " + opts.url);
                }
            });
        };



        //Initialize selectboxes listeners
        for(var index = 0; index < length; index++)
        {
            var selectBox = selectBoxes[index];
            selectBox.addEventListener('change', selectBoxChanged);
            selectBox.addEventListener('focus', selectBoxFocussed);
        }

    })
</script>