@model IEnumerable<ParcelWeb.Core.Domain.Shipment>

@{
    ViewBag.Title = "Filter Shipment";
}

<style>
    .table th, .table td {
        padding: 0.20rem 0.75rem;
    }
</style>

<div class="content-header row">
    <div class="breadcrumb-wrapper col-xs-12">
        <ol class="breadcrumb">
            <li class="breadcrumb-item">
                <a href="index.html">Home</a>
            </li>

            <li class="breadcrumb-item active">
                Filter Shipment
            </li>
        </ol>
    </div>
</div>


<div class="row">
    <div class="col-md-12">
        <div class="card">
            <div class="card-header">
                <h4 class="card-title">Filter Shipment</h4>
                <a class="heading-elements-toggle"><i class="icon-ellipsis font-medium-3"></i></a>
                <div class="heading-elements">
                    <ul class="list-inline mb-0">
                        <li><a data-action="collapse"><i class="icon-minus4"></i></a></li>
                        <li><a data-action="reload"><i class="icon-reload"></i></a></li>
                        <li><a data-action="expand"><i class="icon-expand2"></i></a></li>

                    </ul>
                </div>
            </div>
            <div class="card-body collapse in">
                <div class="card-block">
                    @if (ViewBag.ConatinerId != null)
                    {
                        <div class="row">
                            <div class="col-lg-3"> </div>
                            <div class="col-lg-4">
                                <div class="">

                                    @Html.DropDownList("ConatinerId", null, new { @class = "form-control square", @required = "required" })

                                </div>
                            </div>
                            <div class="col-lg-4 ">
                                <button class="btn btn-info" id="btnSelectedDispatch" disabled >Dispatched</button>


                            </div>
                        </div>
                    }
                    <div class="table-responsive">
                        <table class="table table-condensed table-bordered table-hover" id="dgvShipment" style="width:100%">
                            <thead class="thead-default">
                                <tr>
                                    <th><input name="select_all" value="1" id="select-all" type="checkbox" /></th>
                                    <th>Airwaybill</th>
                                    <th>Consignor</th>
                                    <th>Consignee</th>
                                    <th>From</th>
                                    <th>To</th>
                                    <th>Booked on</th>
                                    <th>Status</th>
                                   
                                </tr>
                            </thead>
                            <tfoot>
                                <tr>
                                    <th></th>
                                    <th>Airwaybill</th>
                                    <th>Consignor</th>
                                    <th>Consignee</th>
                                    <th>From</th>
                                    <th>To</th>
                                    <th>Booked on</th>
                                    <th>Status</th>
                                </tr>
                            </tfoot>
                            <tbody></tbody>

                        </table>
                    </div>


                </div>
            </div>
        </div>
    </div>
</div>

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")


    <script type="text/javascript">


        jQuery.validator.setDefaults({
            debug: true,
            errorClass: 'has-error',
            validClass: 'success',
            errorElement: "span",

            // add error class
            highlight: function (element, errorClass, validClass) {
                $(element).parents("div.form-group")
                .addClass(errorClass)
                .removeClass(validClass);
            },

            // add error class
            unhighlight: function (element, errorClass, validClass) {
                $(element).parents(".has-error")
                .removeClass(errorClass)
                .addClass(validClass);
            },

            // submit handler
            submitHandler: function (form) {
                form.submit();
            }
        });

        $(document).ready(function () {
           
            var table;
            var Shipmentds = [];
            debugger;
            var id = $('#ConatinerId').val();
            $.ajax({
                type: "GET",
                url: '/ContainerParcels/AllShipments/'+id,
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                beforeSend: function () {
                    AjaxBlock('#dgvShipment', 'Loading...');
                },
                success: function (data) {
                    Shipmentds.length = 0;
                    table = $('#dgvShipment').DataTable({
                        destroy: true,
                        data: data,
                        pageLength: 25,
                        columns: [
                            {
                                'data': 'IsDispatch',
                                'searchable': false,
                                'sortable': false,
                                'render': function (IsDispatch,type,row)
                                {
                                    
                                    if (IsDispatch == true) {
                                        
                                        return "<input type='checkbox' checked  name='TrackingIds[]' value='" + row.ShipmentId + "' class='js-Select' />";

                                    } else {
                                        return "<input type='checkbox'   name='TrackingIds[]' value='" + row.ShipmentId + "' class='js-Select' />";

                                    }
                                }
                            },
                               {
                                   'data': 'TrackingId'

                               },
                            { 'data': 'SenderName' },
                            {
                                'data': 'ReceiverName'
                            },
                            { 'data': 'SenderAddress.Country.Name' },
                            { 'data': 'ReceiverAddress.Country.Name' },
                            {
                                'data': 'BookingDate',
                                'render': function (bookingDate) {
                                    var date = new Date(parseInt(bookingDate.substr(6)));
                                    var month = date.getMonth() + 1;
                                    return date.getDate() + "/" + month + "/" + date.getFullYear();
                                }
                            },
                            {
                                'data': 'Status.Name',
                                'render': function (data) {
                                    if (data == null) {
                                        return "";
                                    }
                                    else {
                                        var result = data.length > 11 ? data.substr(0, 11) : data;
                                        return "<a data-toggle='tooltip' title='" + data + "'>" + result + "</a>";
                                    }
                                }
                            },
                        ]
                    });
                },
                failure: function () {
                    alert("Failed!");
                },
                complete: function () {
                    AjaxUnblock('#dgvShipment');
                    FillArray();
                }
            });
            function ActiveButton(list) {
                if (list.length > 0) {
                   
                    $('#btnSelectedDispatch').prop('disabled', false);
                }
                else {
                    
                    $('#btnSelectedDispatch').prop('disabled', true);

                }
            }

             function FillArray() {

                var rows = table.rows({ 'search': 'applied' }).nodes();
                 $(rows).each(function () {
                     var $chk = $(this).find('input[type="checkbox"]');
                     if ($($chk).prop('checked')) {
                         var id = $chk.val();
                         Shipmentds.push(id);
                     }
                   
                })


            };

            $('#select-all').on('click', function () {
                // Check/uncheck all checkboxes in the table

                var rows = table.rows({ 'search': 'applied' }).nodes();
                $('input[type="checkbox"]', rows).prop('checked', this.checked);

                if (this.checked) {
                    $(rows).each(function () {
                        var id = $(this).find('input[type="checkbox"]').val();
                        Shipmentds.push(id);
                    })
                }
                else {
                    Shipmentds.length = 0;
                }
                ActiveButton(Shipmentds);
            });



            $('#dgvShipment tbody').on('change', 'input[type="checkbox"]', function () {
                // If checkbox is not checked
                if (!this.checked) {
                    var el = $('#select-all').get(0);
                    // If "Select all" control is checked and has 'indeterminate' property
                    if (el && el.checked && ('indeterminate' in el)) {
                        // Set visual state of "Select all" control
                        // as 'indeterminate'
                        el.indeterminate = true;

                    }
                    var index = Shipmentds.indexOf($(this).val());
                    if (index > -1) {
                        Shipmentds.splice(index, 1);
                    }

                }
                else {

                    Shipmentds.push($(this).val());

                }
                ActiveButton(Shipmentds);
            });



         
           
                $('#btnSelectedDispatch').on('click', function () {

                   if (!$('#ConatinerId').val()) {
                        $('#ConatinerId').parents('div.form-group').addClass('has-danger');
                    }
                   else {
                       $(this).addClass('disabled');
                        OnSubmitDispatch();
                    }

                });
          


            function OnSubmitDispatch() {

              
                var postData = { values: Shipmentds, containerId: $('#ConatinerId').val() };
                debugger;
                $.ajax({
                    type: 'POST',
                    url: '/ContainerParcels/Dispatched',
                    data: postData,
                    dataType: 'json',
                    beforeSend: function () {

                        //  $(btn).buttonLoader('start');
                    },
                    success: function (data) {
                        if (data.success) {
                            
                            MyAlert("Good!", "Shipment Dispatched  successfully...!", "success", "icon-check-circle-o");
                            setTimeout(function () {
                                window.location.href = '/Container/Index';
                            }, 2000)


                        }

                    },
                    error: function (jqXHR) {
                        if (jqXHR.status == 400) {
                           
                            MyAlert("Warning", "Bad Request", "danger", "icon-ios-close-outline");
                           
                        }
                    },
                    complete: function () {

                    }
                });
            }

            


            //End- Ready
        });



    </script>


}