@model IEnumerable<ParcelWeb.Core.Dto.MenifestDto>
@using ParcelWeb.Core
@{
    ViewBag.Title = "Missions";
}

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

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

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


<div class="row">
    <div class="col-md-12">
        <div class="card">
            <div class="card-header">
                <h4 class="card-title">Missions</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>
                            <button disabled id="btnAssignModal" class="btn btn-outline-primary" style="padding: 5px 8px 5px 8px;"><i class="icon-pin"></i> Assign Employee</button>
                        </li>
                        <li>
                            <button disabled id="btnStatusModal" class="btn btn-outline-primary" style="padding: 5px 8px 5px 8px;"><i class="icon-star"></i> Update Status</button>
                        </li>
                        <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">
                    <div class="row">
                        <div class="col-md-3">
                            <div class="form-group">

                                @Html.DropDownList("StatusId", ViewBag.Status as SelectList, "All", new { @class = "custom-select block filterdata" })
                            </div>
                        </div>
                    </div>


                    <div class="table-responsive">
                        <table class="table table-condensed table-bordered table-hover" id="dgvManifest" style="width:100%">
                            <thead class="thead-default">
                                <tr>
                                    <th><input type="checkbox" id="Allcheck" value="-1" /></th>
                                    <th>Manifest Id</th>
                                    <th>Created</th>
                                    <th>Courier</th>
                                    <th>No. of Orders</th>
                                    <th>Pickup Address</th>
                                    <th>Status</th>
                                    <th>WareHouse</th>                                    
                                    <th>Driver</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach (var item in Model)
                                {
                                    <tr>
                                        <td><input type="checkbox" value="@item.Id" /></td>
                                        <td>@item.Id</td>
                                        <td>@item.CreatedAt</td>
                                        <td>@item.DeliveryService</td>
                                        <td>@item.NoOfOrder</td>
                                        <td>@item.PickupAddress</td>
                                        <td>@item.Status</td>
                                        <td>@item.WareHouse</td>                                      
                                        <td>@item.DriverId</td>
                                        <td>
                                            <a href='/DomesticShipment/GetShipmentIds?MenifestId=@item.Id' target='_blank' class='btn btn-outline-info js-Print2' data-placement='top' data-toggle='tooltip' title='Print Manifest' style='padding:5px;'><i class='icon-arrow-down'></i></a>
                                        </td>
                                    </tr>
                                }
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade text-xs-left" id="AssignmentModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel2" aria-hidden="true">
    <div class="modal-dialog modal-sm" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="myModalLabel2">Assign Employee</h4>
            </div>
            <div class="modal-body" id="AddressBookModalBody">
                @using (Html.BeginForm("UpdateEmployee", "Missions", FormMethod.Post, new { id = "employee-assigned-form" }))
                {
                    <div class="form-group">
                        @Html.DropDownList("EmployeeId", ViewBag.EmployeeId as SelectList, "--Select Employee--", new { @class = "form-control square", @required = "required" })
                    </div>
                    <button type="button" class="btn btn-primary btn-block" id="btnAssigned">Assigned</button>
                }



            </div>
            <div class="modal-footer">
            </div>
        </div>
    </div>
</div>

<div class="modal fade text-xs-left" id="StatusModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel2" aria-hidden="true">
    <div class="modal-dialog modal-sm" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="myModalLabel2">Update Status</h4>
            </div>
            <div class="modal-body" id="AddressBookModalBody">
                @using (@Html.BeginForm("UpdateStatus", "Missions", FormMethod.Post))
                {
                    <div class="form-group">
                        <input type="text" id="Remarks" class="form-control square" placeholder="Remarks" />
                    </div>
                    <div class="form-group">
                        @Html.DropDownList("MStatusId", ViewBag.Status as SelectList, "--Select Status--", new { @class = "form-control square", @required = "required" })
                    </div>
                    <button type="button" class="btn btn-primary btn-block" id="btnSelected">Apply Selected</button>
                }


            </div>
            <div class="modal-footer">
            </div>
        </div>
    </div>
</div>

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
    <script type="text/javascript">
        $(document).ready(function () {
           
            var arr = [];
            $("#StatusId").on('change', function () {
                var statusId = $("#StatusId").val();
                window.location.href = "/Missions/Index?statusId=" + statusId;
            });
            $("#btnAssignModal").on("click", function () {
                $('#AssignmentModal').modal('show');
            });
            $("#btnStatusModal").on("click", function () {               
                $('#StatusModal').modal('show');
            });
            $('#btnAssigned').on('click', function () {
                if ((!$('#EmployeeId').val())) {
                    $('#EmployeeId').parents('div.form-group').addClass('has-danger');
                }
                else {
                    debugger
                    var postData = { Ids: arr, driverId: $('#EmployeeId').val() };
                    $.ajax({
                        type: "POST",
                        url: '/Missions/UpdateEmployee',
                        data: postData,
                        dataType: 'json',
                        beforeSend: function () {
                            $('#btnAssigned').prop('disabled', true);
                        },
                        success: function (data) {
                            if (data.success) {
                                $('#AssignmentModal').modal('hide');
                                $('#EmployeeId').find('option:first').attr('selected', true);
                                MyAlert("Good!", "Employee Assigned successfully...!", "success", "icon-check-circle-o");
                                setTimeout(function () {
                                    window.location.reload();
                                }, 2000)
                            }
                        },
                        error: function (jqXHR) {
                            if (jqXHR.status == 400) {
                                $('#AssignmentModal').modal('hide');
                                MyAlert("Warning", "Bad Request", "danger", "icon-ios-close-outline");
                                $('#EmployeeId').find('option:first').attr('selected', 'selected');
                            }
                        },
                        complete: function () {
                            $('#btnAssigned').prop('disabled', false);
                        }
                    });
                }
            });
            $("#btnSelected").on("click", function () {
                debugger
                var a = arr;
                if ((!$("#MStatusId").val()) && arr.length < 0) {
                    $('#MStatusId').parents('div.form-group').addClass('has-danger');
                }
                else {
                    debugger
                    var postData = { MenifestIds: arr, Status: $('#MStatusId').val(), Remarks: $('#Remarks').val() };
                    $.ajax({
                        type: "POST",
                        url: '/Missions/ChangeMissionStatus',
                        data: postData,
                        dataType: 'json',
                        beforeSend: function () {
                            $('#btnAssigned').prop('disabled', true);
                        },
                        success: function (data) {
                            if (data.success) {
                                $('#StatusModal').modal('hide');
                                MyAlert("Good!", "Status Updated successfully...!", "success", "icon-check-circle-o");
                                setTimeout(function () {
                                    window.location.reload();
                                }, 2000)
                            }
                            else {
                                MyAlert("Error!", "Something Went Wrong...!", "error", "icon-check-circle-o");
                            }
                        },
                        error: function (jqXHR) {
                            if (jqXHR.status == 400) {
                                $('#StatusModal').modal('hide');
                                MyAlert("Warning", "Bad Request", "danger", "icon-ios-close-outline");
                            }
                        },
                        complete: function () {
                            $('#btnAssigned').prop('disabled', false);
                        }
                    });
                }
            });            
            $("input[type='checkbox']").click(function () {
                debugger
                var checked = $(this).val();
                if (checked == -1) {
                    //if ($(this).is(':checked')) {
                    //    // checkall();
                    //}
                }
                else {
                    if ($(this).is(':checked')) {
                        arr.push(checked);
                    } else {
                        arr.splice($.inArray(checked, arr), 1);
                    }

                }
                checkarrCount();
            });
            $("#Allcheck").click(function () {
                debugger
                if ($(this).is(':checked')) {
                    //    debugger
                    $('input:checkbox').prop('checked', 'checked').trigger('click');

                }
                else {
                    //    debugger

                    $('input:checkbox').removeProp('checked').trigger('click');
                }
                checkarrCount();
            });

            function checkarrCount() {
                if (arr.length > 0) {
                    $("#btnStatusModal").attr('disabled', false);
                    $("#btnAssignModal").attr('disabled', false);
                }
                else {
                    $("#btnStatusModal").attr("disabled", true);
                    $("#btnAssignModal").attr("disabled", true);
                }
            }
            //End- Ready
        });


    </script>


}

@Html.Raw(TempData["msg"])