PostED – WooCommerce Platform

@model WooCommerceWeb.Models.Root

@{
    ViewBag.Title = "Packing";
    int i = 1;
}
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>

<h2>Packing</h2>

<div class="row">
    <div class="col-4">
        @Html.HiddenFor(model => model.id)
        <table>
            <tr>
                <td>@Html.DisplayFor(model => model.billing.first_name)</td>
                <td>@Html.DisplayFor(model => model.billing.last_name)</td>
                <td> | </td>
                <td>OrderNumber - </td>
                <td>@Html.DisplayFor(model => model.id)</td>
            </tr>
        </table>
        <br />
        <table>
            <tr>
                <td>Email : </td>
                <td>@Html.DisplayFor(model => model.billing.email)</td>
            </tr>
            <tr>
                <td>Phone : </td>
                <td>@Html.DisplayFor(model => model.billing.phone)</td>
            </tr>
        </table>
        <h2>Billing Address</h2>
        <table>
            <tr>
                <td>@Html.DisplayFor(model => model.billing.address_1)</td>
                <td>@Html.DisplayFor(model => model.billing.address_2)</td>
            </tr>
            <tr>
                <td>@Html.DisplayFor(model => model.billing.city)</td>
                <td>@Html.DisplayFor(model => model.billing.state)</td>
            </tr>
            <tr>
                <td>@Html.DisplayFor(model => model.billing.postcode)</td>
            </tr>
        </table>
        <br />
        <h2>shipping Address</h2>
        <table>
            <tr>
                <td>@Html.DisplayFor(model => model.shipping.address_1)</td>
                <td>@Html.DisplayFor(model => model.shipping.address_2)</td>
            </tr>
            <tr>
                <td>@Html.DisplayFor(model => model.shipping.city)</td>
                <td>@Html.DisplayFor(model => model.shipping.state)</td>
            </tr>
            <tr>
                <td>@Html.DisplayFor(model => model.shipping.postcode)</td>
            </tr>
        </table>
        <h2>Order Shipping</h2>
        <table>
            <tr>
                <td>Order Shipping : </td>
                <td>@Html.DisplayFor(model => model.shipping_total)</td>

            </tr>
        </table>
        <br />
        <h2>Order Total</h2>
        <table>
            <tr>
                <td>Order Discount : </td>
                <td>@Html.DisplayFor(model => model.discount_total)</td>
            </tr>
        </table>
    </div>
    <div class="col-8">
        <h2>Products Ordered</h2>
        <br />
        <table id="producttbl" class="table table-bordered">
            <thead>
                <tr>
                    <th></th>
                    <th>ProductID</th>
                    <th>Name</th>
                    <th>Qunatity</th>
                    <th>Image</th>
                    <th>Total</th>
                </tr>

            </thead>
            <tbody>
                @foreach (var item in Model.line_items)
                {
                    <tr>
                        <td>
                            <input name="chkProduct" type="checkbox" value="@item.product_id" />
                        </td>
                        <td>@item.product_id</td>
                        <td>@item.name</td>
                        <td>@item.quantity</td>
                        <td>
                            @foreach (var img in item.imageslist)
                            {
                                <img src="@img" width="50" height="50" />
                                if (i % 3 == 0)
                                {
                                    <br />
                                }
                                i++;
                            }
                        </td>
                        <td>@item.total</td>
                    </tr>
                }
            </tbody>


        </table>

    </div>
</div>

<div class="row">
    @Html.Hidden("RedirectTo", Url.Action("Processing", "Home"));

    <div class="col-5">

    </div>
    <div class="col-2">
        <input type="submit" id="completebtn" class="btn btn-success" value="Complete" />
        @*@Html.ActionLink("Complete", "Complete", "Home", new { id = Model.id }, new { @class = "btn btn-success" })*@
    </div>
    <div class="col-5">

    </div>
</div>

<script>
    var tableControl = document.getElementById('producttbl');
    $('#completebtn').click(function () {

        var arrayOfValues = []
        var NotarrayOfValues = []
        $('input:checkbox:checked', tableControl).each(function () {
            arrayOfValues.push($(this).val());
        }).get();
        $('input:checkbox:not(:checked)', tableControl).each(function () {
            NotarrayOfValues.push($(this).val());
        }).get();
        if (NotarrayOfValues.length > 0) {
            alert(NotarrayOfValues);
        }
        if (NotarrayOfValues.length == 0) {
        $.ajax({
                        cache: false,
                        url: '@Url.Action("Complete", "Home")',
                        type: 'POST',
                        data: { id: $("#id").val(), productId: arrayOfValues },
                        success: function (result) {
                            if (result == "success") {
                                alert('Successfully Updated');
                                var url = $("#RedirectTo").val();
                                location.href = url;
                            }
                            else {
                                alert('Failed Updated');
                            }
                        },
                        error: function (result) {
                            alert('failed Updated');
                        }
                    });

        }
    });
</script>