@model ParcelWeb.Core.Dto.CreateOrUpdateShipmentDto

@{
    ViewBag.Title = "Edit";
}
<style>
    .btn-default {
        font-size: 15px;
        color: #818a91;
    }

    #dgvShipmentDetail th, #dgvShipmentDetail td {
        padding: 0.5rem;
    }

    #dgvTrackingDetail th, #dgvTrackingDetail td {
        padding: 5px;
    }

    .nav.nav-tabs.nav-underline .nav-item a.nav-link {
        color: #99A2B3;
    }

        .nav.nav-tabs.nav-underline .nav-item a.nav-link::before {
            height: 3px;
            background-color: #55595c;
        }

    .nav.nav-tabs.nav-underline {
        border-bottom: 1px solid #55595c;
    }

    .tt-menu {
        width: 220px;
    }

    .tt-suggestion {
        text-align: left !important;
    }
</style>
<div class="row">
    <div class="col-md-9">
        <div class="row">
            <div class="col-md-12">
                <div id="routes" class="height-300" style="background-image: url('../../Images/Default/mapIamge.png');">
                </div>
            </div>
            <div class="col-md-12">
                <table class="table table-hover table-bordered overflow-scroll" id="dgvTrackingDetail">
                    <thead style="background-color:white">
                        <tr>
                            <th>Date</th>
                            <th>Time</th>
                            <th>Status</th>
                            <th>Location</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach (var item in @Model.ShipmentTrackingDetail)
                        {
                            <tr>
                                <td>@item.Date.ToShortDateString()</td>
                                <td>@item.Time.ToShortTimeString()</td>
                                <td>@item.Status.Description</td>
                                <td>@item.Location</td>
                                <td><a href="javascript:void(0)" class="js-delete-status" data-id="@item.Id"><i class="icon icon-close"></i></a></td>
                            </tr>
                        }

                    </tbody>
                </table>

            </div>
        </div>

    </div>
    <div class="col-md-3">
        <div class="card text-md-center text-xs-center text-lg-center">

            <div class="card-body collapse in">
                <div class="card-block">
                    <h4 class="card-title text-center">BARCODE DETAILS</h4>

                    <img src="~/Images/Default/barcode.php.png" />
                    <p class="text-bold-600">@Model.TrackingId</p>
                    <form role="form" id="status-form">
                        <span class="tag tag-default mb-1">@Model.Status.Name</span>
                        <h4 class="card-title">UPDATE STATUS</h4>
                        <div class="form-group">
                            <input type="text" name="Location" required class="form-control square" id="Location" placeholder="Location" />
                        </div>
                        <div class="form-group">
                            <input type="text" name="Remarks" id="Remarks" class="form-control square" placeholder="Remarks" />

                        </div>
                        <div class="form-group">
                            @Html.DropDownList("StatusId", null, "--Select Status--", new { @class = "form-control square", @required = "required" })
                        </div>
                        <button type="button" class="btn btn-primary btn-block" id="btnSelected">Apply Selected</button>

                    </form>

                </div>
            </div>
        </div>
    </div>
</div>
<form method="post" action="/Shipments/Edit">
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title" id="heading-social-buttons">MODIFY SHIPMENT DETAILS</h4>
                    <p>Change and edit shipment info <mark>below</mark></p>
                    <a class="heading-elements-toggle"><i class="icon-ellipsis font-medium-3"></i></a>
                    @Html.ValidationSummary(false)
                    <div class="heading-elements">

                        <!-- Social Icons Outline Buttons -->
                        <button type="submit" class="btn btn-default">Update <i class="icon-save"> </i> </button>
                        <button type="button" id="btnPrint" data-trackingid="@Model.TrackingId" class="btn btn-default">Print <i class="icon-print"></i></button>
                        <button type="button" class="btn btn-default" id="js-Delete" data-shipment-Id="@Model.ShipmentId">Delete <i class="icon-times"></i></button>

                    </div>
                </div>
                <div class="card-body collapse in">
                    
                    <div class="card-block" style="padding-top:0px">
                       

                        <ul class="nav nav-tabs nav-underline no-hover-bg nav-justified">
                            <li class="nav-item">
                                <a class="nav-link active" id="base-tab1" data-toggle="tab" aria-controls="tab1"
                                   href="#tab1" aria-expanded="true"><strong>Product Detail</strong></a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" id="base-tab2" data-toggle="tab" aria-controls="tab2" href="#tab2"
                                   aria-expanded="false"><strong>Shipment Detail</strong></a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" id="base-tab3" data-toggle="tab" aria-controls="tab3" href="#tab3"
                                   aria-expanded="false"><strong>Sender Info</strong></a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" id="base-tab4" data-toggle="tab" aria-controls="tab4" href="#tab4"
                                   aria-expanded="false"><strong>Receiver/Destination </strong></a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" id="base-tab5" data-toggle="tab" aria-controls="tab5" href="#tab5"
                                   aria-expanded="false"><strong>Delivery Detail</strong></a>
                            </li>
                        </ul>
                        <div class="tab-content px-1 pt-1">


                            @Html.HiddenFor(model => model.ShipmentId)
                            @Html.HiddenFor(model => model.TrackingId)
                            @Html.HiddenFor(model => model.TrackingCode)


                            <div role="tabpanel" class="tab-pane active" id="tab1" aria-expanded="true" aria-labelledby="base-tab1">
                                <div class="col-md-12">
                                    <div class="form-group row">
                                        <div class="col-md-2">
                                            @Html.LabelFor(model => model.TotalWeight, htmlAttributes: new { @class = "" })
                                            <div class="input-group">
                                                @Html.EditorFor(model => model.TotalWeight, new { htmlAttributes = new { @class = "form-control font-weight-bold", placeholder = "0" } })
                                                <span class="input-group-addon">Kg</span>
                                            </div>
                                            @Html.ValidationMessageFor(model => model.TotalWeight, "", new { @class = "text-danger" })
                                        </div>
                                        @if (Model.ShipmentDetail.Count != 0)
                                        {

                                            <div class="col-md-2">
                                                @Html.Label("Cubic(Length)cm", htmlAttributes: new { @class = "" })
                                                @Html.EditorFor(model => model.ShipmentDetail[0].Length, new { htmlAttributes = new { @class = "form-control text-sm-left ", placeholder = "Length" } })
                                                @Html.ValidationMessageFor(model => model.ShipmentDetail[0].Length, "", new { @class = "text-danger" })
                                            </div>
                                            <div class="col-md-2">
                                                @Html.Label("Cubic(Width)cm", htmlAttributes: new { @class = "" })
                                                @Html.EditorFor(model => model.ShipmentDetail[0].Width, new { htmlAttributes = new { @class = "form-control text-sm-left ", placeholder = "Width" } })
                                                @Html.ValidationMessageFor(model => model.ShipmentDetail[0].Width, "", new { @class = "text-danger" })
                                            </div>
                                            <div class="col-md-2">
                                                @Html.Label("Cubic(Height)cm", htmlAttributes: new { @class = "" })
                                                @Html.EditorFor(model => model.ShipmentDetail[0].Height, new { htmlAttributes = new { @class = "form-control text-sm-left ", placeholder = "Height" } })
                                                @Html.ValidationMessageFor(model => model.ShipmentDetail[0].Height, "", new { @class = "text-danger" })
                                            </div>
                                        }

                                        <div class="col-md-2">
                                            @Html.Label("Vol Weight cm", htmlAttributes: new { @class = "" })
                                            @Html.EditorFor(model => model.TotalVolWeight, new { htmlAttributes = new { @class = "form-control text-sm-left", placeholder = "Vol.Weight" } })
                                            @Html.ValidationMessageFor(model => model.TotalVolWeight, "", new { @class = "text-danger" })
                                        </div>
                                        <div class="col-md-2">
                                            @Html.LabelFor(model => model.TotalChargeableWeight, htmlAttributes: new { @class = "" })
                                            <div class="input-group">
                                                @Html.EditorFor(model => model.TotalChargeableWeight, new { htmlAttributes = new { @class = "form-control font-weight-bold", placeholder = "0" } })
                                                <span class="input-group-addon">Kg</span>
                                            </div>
                                            @Html.ValidationMessageFor(model => model.TotalChargeableWeight, "", new { @class = "text-danger" })
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-12 col-xs-12">
                                            <div class="table-responsive">
                                                <table class="table table-condensed table-bordered" id="dgvShipmentDetail">
                                                    <thead class="thead-inverse">
                                                        <tr>
                                                            <th>Pieces</th>
                                                            <th>Description</th>
                                                            <th>Unit Price</th>

                                                        </tr>
                                                    </thead>
                                                    <tbody>

                                                        @for (int i = 0; i < Model.ShipmentDetail.Count; i++)
                                                        {
                                                            <tr id="tablerow0">
                                                                @Html.HiddenFor(model => model.ShipmentDetail[i].Id)
                                                                <td>
                                                                    @Html.EditorFor(model => model.ShipmentDetail[i].Quantity, new { htmlAttributes = new { @class = "form-control text-sm-left ", required = "required", placeholder = "0.00" } })
                                                                    @Html.ValidationMessageFor(model => model.ShipmentDetail[i].Quantity, "", new { @class = "text-danger" })
                                                                </td>
                                                                <td>
                                                                    @Html.EditorFor(model => model.ShipmentDetail[i].Description, new { htmlAttributes = new { @class = "form-control text-sm-left ", required = "required", placeholder = "0.00" } })
                                                                    @Html.ValidationMessageFor(model => model.ShipmentDetail[i].Description, "", new { @class = "text-danger" })
                                                                </td>
                                                                <td>
                                                                    @Html.EditorFor(model => model.ShipmentDetail[i].EachCost, new { htmlAttributes = new { @class = "form-control text-sm-left ", required = "required", placeholder = "0.00" } })
                                                                    @Html.ValidationMessageFor(model => model.ShipmentDetail[i].EachCost, "", new { @class = "text-danger" })
                                                                </td>
                                                                
                                                            </tr>

                                                        }
                                                    </tbody>
                                                </table>

                                            </div>
                                        </div>

                                    </div>
                                    @*<div class="row">
                                        <div class="col-md-4">
                                            <div class="form-group">
                                                @Html.LabelFor(model => model.TotalWeight, htmlAttributes: new { @class = "font-weight-bold" })
                                                <div class="input-group">
                                                    @Html.EditorFor(model => model.TotalWeight, new { htmlAttributes = new { @class = "form-control font-weight-bold", placeholder = "0" } })
                                                    <span class="input-group-addon">Kg</span>
                                                </div>
                                                @Html.ValidationMessageFor(model => model.TotalWeight, "", new { @class = "text-danger" })
                                            </div>

                                        </div>
                                        <div class="col-md-4">
                                            <div class="form-group">
                                                @Html.LabelFor(model => model.TotalVolWeight, htmlAttributes: new { @class = "font-weight-bold" })
                                                <div class="input-group">
                                                    @Html.EditorFor(model => model.TotalVolWeight, new { htmlAttributes = new { @class = "form-control font-weight-bold", placeholder = "0" } })
                                                    <span class="input-group-addon">Vol</span>
                                                </div>
                                                @Html.ValidationMessageFor(model => model.TotalVolWeight, "", new { @class = "text-danger" })
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="form-group">
                                                @Html.LabelFor(model => model.TotalChargeableWeight, htmlAttributes: new { @class = "font-weight-bold" })
                                                <div class="input-group">
                                                    @Html.EditorFor(model => model.TotalChargeableWeight, new { htmlAttributes = new { @class = "form-control font-weight-bold", placeholder = "0" } })
                                                    <span class="input-group-addon">Kg</span>
                                                </div>
                                                @Html.ValidationMessageFor(model => model.TotalChargeableWeight, "", new { @class = "text-danger" })

                                            </div>
                                        </div>
                                    </div>*@


                                    <div class="row">
                                        <div class="col-md-3">
                                            <div class="form-group">
                                                @Html.LabelFor(model => model.RefNo, htmlAttributes: new { @class = "font-weight-bold" })
                                                @Html.EditorFor(model => model.RefNo, new { htmlAttributes = new { @class = "form-control font-weight-bold", placeholder = "Reference No" } })                                               
                                                @Html.ValidationMessageFor(model => model.RefNo, "", new { @class = "text-danger" })
                                            </div>

                                        </div>
                                        <div class="col-md-3">
                                            <div class="form-group">
                                                @Html.LabelFor(model => model.OptionField1, htmlAttributes: new { @class = "font-weight-bold" })
                                                <div class="input-group">
                                                    @Html.DropDownListFor(model => model.OptionField1, ViewBag.ParcelCategory as SelectList, "--Select--", new { @class = "custom-select block" })
                                                </div>
                                                @Html.ValidationMessageFor(model => model.OptionField1, "", new { @class = "text-danger" })
                                            </div>

                                        </div>
                                        <div class="col-md-3">
                                            <div class="form-group">
                                                @Html.LabelFor(model => model.PaymentType, htmlAttributes: new { @class = "font-weight-bold" })
                                                <div class="input-group">
                                                    @Html.DropDownListFor(model => model.PaymentType, ViewBag.PaymentType as SelectList, new { @class = "custom-select block" })
                                                </div>
                                                @Html.ValidationMessageFor(model => model.PaymentType, "", new { @class = "text-danger" })
                                            </div>

                                        </div>
                                    </div>

                                    <div class="row skin skin-square">
                                        <div class="col-md-12">
                                            <h4 class="form-section">
                                                <i class="icon-image "></i> Please attach pictures if you want.
                                            </h4>
                                            <input type="file" name="imageFile" class="btn btn-primary" id="imageFile">
                                            <small id="passwordHelpBlock" class="form-text">
                                                Formats( .png |.jpg |.jpeg)
                                            </small>
                                            <div id="divErrorText">
                                                <img id="alert-loader" src="~/Images/default/Spinner-1s-70px.gif">
                                            </div>
                                            <div class="row">
                                                <div class="col-md-6">
                                                    <ul class="imageattachment">
                                                        @foreach (var item in Model.ShipmentPictureDetail)
                                                        {
                                                            <li><a href="/FileUpload/GetUploadedObject?fileId=@item.PictureId">@item.PictureName</a><a href="javascript:void(0);" data-id="@item.PictureId" class="deleteItem">X</a></li>
                                                        }
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                        @*<div class="col-md-12">
                @Html.CheckBoxFor(model => model.PaidStatus)
                @Html.LabelFor(model => model.PaidStatus)

            </div>*@
                                        <div class="col-md-12">
                                            @Html.CheckBoxFor(model => model.EmailNotify)
                                            @Html.LabelFor(model => model.EmailNotify)

                                        </div>
                                        @*<div class="col-md-12">
                @Html.CheckBoxFor(model => model.AdditionalInfo)
                @Html.LabelFor(model => model.AdditionalInfo)
            </div>*@
                                    </div>
                                </div>

                            </div>

                            @*//------------Shipment Detail Section-------------*@
                            <div class="tab-pane" id="tab2" aria-labelledby="base-tab2">
                                <div class="col-md-12">
                                    <div class="row">
                                        <br />
                                        <div class="col-md-9">
                                            <div class="row">

                                                <div class="col-md-6">
                                                    <div class="form-group row">
                                                        @Html.LabelFor(model => model.DeliveryServiceId, htmlAttributes: new { @class = "control-label col-md-3" })
                                                        <div class="col-md-9">
                                                            @Html.DropDownListFor(model => model.DeliveryServiceId, ViewBag.DeliveryService as SelectList, new { @class = "custom-select block" })
                                                            @Html.ValidationMessageFor(model => model.DeliveryServiceId, "", new { @class = "text-danger" })
                                                        </div>
                                                    </div>


                                                    <div class="form-group row">
                                                        @Html.LabelFor(model => model.ParcelTypeId, htmlAttributes: new { @class = "control-label col-md-3" })
                                                        <div class="col-md-9">
                                                            @Html.DropDownListFor(model => model.ParcelTypeId, ViewBag.ParcelType as SelectList, new { @class = "custom-select block" })
                                                            @Html.ValidationMessageFor(model => model.ParcelTypeId, "", new { @class = "text-danger" })
                                                        </div>
                                                    </div>

                                                    <div class="form-group row">
                                                        @Html.LabelFor(model => model.ItemDescription, htmlAttributes: new { @class = "control-label col-md-3" })
                                                        <div class="col-md-9">
                                                            @Html.EditorFor(model => model.ItemDescription, new { htmlAttributes = new { @class = "form-control" } })
                                                            @Html.ValidationMessageFor(model => model.ItemDescription, "", new { @class = "text-danger" })
                                                        </div>
                                                    </div>

                                                </div>
                                                <div class="col-md-6">

                                                    <div class="form-group row">
                                                        @Html.LabelFor(model => model.CurrencyId, htmlAttributes: new { @class = "control-label col-md-3" })
                                                        <div class="col-md-9">
                                                            @Html.DropDownListFor(model => model.CurrencyId, ViewBag.Currency as SelectList, new { @class = "custom-select block" })
                                                            @Html.ValidationMessageFor(model => model.CurrencyId, "", new { @class = "text-danger" })
                                                        </div>
                                                    </div>

                                                    <div class="form-group row">
                                                        @Html.LabelFor(model => model.TotalCost, htmlAttributes: new { @class = "control-label col-md-3" })
                                                        <div class="col-md-9">
                                                            <div class="input-group">
                                                                <span class="input-group-addon">$</span>
                                                                @Html.EditorFor(model => model.TotalCost, new { htmlAttributes = new { @class = "form-control text-sm-left decimal-inputmask" } })
                                                                <span class="input-group-addon">.00</span>
                                                            </div>
                                                            @Html.ValidationMessageFor(model => model.TotalCost, "", new { @class = "text-danger" })
                                                        </div>
                                                    </div>
                                                    <div class="form-group row">
                                                        @Html.LabelFor(model => model.TotalPieces, htmlAttributes: new { @class = "control-label col-md-3" })
                                                        <div class="col-md-9">
                                                            @Html.EditorFor(model => model.TotalPieces, new { htmlAttributes = new { @class = "form-control font-weight-bold text-md-center number-only" } })
                                                            @Html.ValidationMessageFor(model => model.TotalPieces, "", new { @class = "text-danger" })
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        @*----------END ShipmentDetail*@
                                        <div class="col-md-3">

                                            <div class="form-group row">
                                                <div class="col-md-12">
                                                    @Html.LabelFor(model => model.BookingDate, htmlAttributes: new { @class = "control-label" })
                                                    <div class="input-group">
                                                        @Html.EditorFor(model => model.BookingDate, new { htmlAttributes = new { @class = "form-control" } })
                                                        <span class="input-group-addon icon-calendar3"></span>
                                                    </div>
                                                    @Html.ValidationMessageFor(model => model.BookingDate, "", new { @class = "text-danger" })
                                                </div>
                                            </div>

                                            <div class="form-group row">
                                                <div class="col-md-12">
                                                    @Html.LabelFor(model => model.DeliveryDate, htmlAttributes: new { @class = "control-label" })
                                                    <div class="input-group">
                                                        @Html.EditorFor(model => model.DeliveryDate, new { htmlAttributes = new { @class = "form-control" } })
                                                        <span class="input-group-addon icon-calendar3"></span>
                                                    </div>
                                                    <small class="text-muted">(Expected Delivery Date)</small>
                                                    @Html.ValidationMessageFor(model => model.DeliveryDate, "", new { @class = "text-danger" })
                                                </div>
                                            </div>

                                        </div>

                                    </div>
                                    <div class="row">
                                        <div class="col-md-12">
                                            <h4 class="form-section"><i class="icon-dollar"></i> Payment Details</h4>
                                            <div class="col-md-2">
                                                <div class="form-group">
                                                    @Html.LabelFor(model => model.PaymentDetail.Amount, htmlAttributes: new { @class = "font-weight-bold" })
                                                    <div class="input-group">
                                                        @Html.EditorFor(model => model.PaymentDetail.Amount, new { htmlAttributes = new { @class = "form-control ", placeholder = "0.00" } })
                                                    </div>
                                                    @Html.ValidationMessageFor(model => model.PaymentDetail.Amount, "", new { @class = "text-danger" })
                                                </div>

                                            </div>
                                            <div class="col-md-2">
                                                <div class="form-group">
                                                    @Html.LabelFor(model => model.PaymentDetail.ExternalPaymentId, htmlAttributes: new { @class = "font-weight-bold" })
                                                    <div class="input-group">
                                                        @Html.EditorFor(model => model.PaymentDetail.ExternalPaymentId, new { htmlAttributes = new { @class = "form-control ", placeholder = "Payment Reference" } })
                                                    </div>
                                                    @Html.ValidationMessageFor(model => model.PaymentDetail.ExternalPaymentId, "", new { @class = "text-danger" })
                                                </div>

                                            </div>
                                            <div class="col-md-2">
                                                <div class="form-group">
                                                    @Html.LabelFor(model => model.PaymentDetail.Gateway, htmlAttributes: new { @class = "font-weight-bold" })
                                                    <div class="input-group">
                                                        @Html.DropDownListFor(model => model.PaymentDetail.Gateway, ViewBag.PaymentMethod as SelectList, "--Select--", new { @class = "custom-select block" })
                                                    </div>
                                                    @Html.ValidationMessageFor(model => model.PaymentDetail.Gateway, "", new { @class = "text-danger" })
                                                </div>

                                            </div>
                                            <div class="col-md-2">
                                                <div class="form-group">
                                                    @Html.LabelFor(model => model.PaymentDetail.Status, htmlAttributes: new { @class = "font-weight-bold" })
                                                    <div class="input-group">
                                                        @Html.DropDownListFor(model => model.PaymentDetail.Status, ViewBag.PaymentStatus as SelectList, "--Select--", new { @class = "custom-select block" })
                                                    </div>
                                                    @Html.ValidationMessageFor(model => model.PaymentDetail.Status, "", new { @class = "text-danger" })
                                                </div>

                                            </div>
                                            <div class="col-md-3">
                                                <div class="form-group">
                                                    @Html.LabelFor(model => model.PaymentDetail.DueDate, htmlAttributes: new { @class = "font-weight-bold" })
                                                    <div class="input-group">
                                                        @Html.EditorFor(model => model.PaymentDetail.DueDate, new { htmlAttributes = new { @class = "form-control datepicker" } })
                                                    </div>
                                                    @Html.ValidationMessageFor(model => model.PaymentDetail.DueDate, "", new { @class = "text-danger" })
                                                </div>

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

                            </div>
                            <div class="tab-pane" id="tab3" aria-labelledby="base-tab3">
                                <div class="row">
                                    <div class="col-md-4">
                                        @Html.HiddenFor(model => model.SenderCode)
                                        <div class="form-group row">
                                            <div class="col-md-12">
                                                @Html.LabelFor(model => model.SenderName, htmlAttributes: new { @class = "control-label" })
                                                <div class="input-group">
                                                    @Html.EditorFor(model => model.SenderName, new { htmlAttributes = new { @class = "form-control" } })
                                                    <span class="input-group-addon"><i class="icon-head"></i></span>
                                                </div>
                                                @Html.ValidationMessageFor(model => model.SenderName, "", new { @class = "text-danger" })
                                            </div>
                                        </div>


                                        <div class="form-group row">
                                            <div class="col-md-12">
                                                @Html.LabelFor(model => model.SenderAddress.StreetAddress, htmlAttributes: new { @class = "control-label" })
                                                @Html.EditorFor(model => model.SenderAddress.StreetAddress, new { htmlAttributes = new { @class = "form-control" } })
                                                @Html.ValidationMessageFor(model => model.SenderAddress.StreetAddress, "", new { @class = "text-danger" })
                                            </div>
                                        </div>

                                        <div class="form-group row">
                                            <div class="col-md-12">
                                                @Html.LabelFor(model => model.SenderAddress.Mobile, htmlAttributes: new { @class = "control-label" })
                                                <div class="input-group">
                                                    @Html.EditorFor(model => model.SenderAddress.Mobile, new { htmlAttributes = new { @class = "form-control" } })
                                                    <span class="input-group-addon"><i class="icon-mobile"></i></span>
                                                </div>
                                                @Html.ValidationMessageFor(model => model.SenderAddress.Mobile, "", new { @class = "text-danger" })
                                            </div>
                                        </div>

                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-group row">
                                            <div class="col-md-12">
                                                @Html.LabelFor(model => model.SenderAddress.CountryId, htmlAttributes: new { @class = "control-label" })
                                                @Html.DropDownListFor(model => model.SenderAddress.CountryId, @ViewBag.SenderCountry as SelectList, "--Select Country--", new { @class = "form-control select2-size-sm" })
                                                @Html.ValidationMessageFor(model => model.SenderAddress.CountryId, "", new { @class = "text-danger" })
                                            </div>
                                        </div>
                                        <div class="form-group row">
                                            <div class="col-md-12">
                                                @Html.LabelFor(model => model.SenderAddress.CityId, htmlAttributes: new { @class = "control-label" })
                                                @Html.EditorFor(model => model.SenderAddress.CityId, new { htmlAttributes = new { @class = "form-control" } })
                                                @*@Html.DropDownListFor(model => model.SenderAddress.CityId, @ViewBag.SenderCity as SelectList, "--Select City--", new { @class = "form-control" })*@
                                                @Html.ValidationMessageFor(model => model.SenderAddress.CityId, "", new { @class = "text-danger" })
                                            </div>
                                        </div>

                                        <div class="form-group row">
                                            <div class="col-md-12">
                                                @Html.LabelFor(model => model.SenderAddress.ZipCode, htmlAttributes: new { @class = "control-label" })
                                                @Html.EditorFor(model => model.SenderAddress.ZipCode, new { htmlAttributes = new { @class = "form-control" } })
                                                @Html.ValidationMessageFor(model => model.SenderAddress.ZipCode, "", new { @class = "text-danger" })
                                            </div>
                                        </div>


                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-group row">
                                            <div class="col-md-12">
                                                @Html.LabelFor(model => model.SenderAddress.Phone, htmlAttributes: new { @class = "control-label" })
                                                <div class="input-group">
                                                    @Html.EditorFor(model => model.SenderAddress.Phone, new { htmlAttributes = new { @class = "form-control", @type = "tel" } })
                                                    <span class="input-group-addon"><i class="icon-phone"></i></span>
                                                </div>
                                                @Html.ValidationMessageFor(model => model.SenderAddress.Phone, "", new { @class = "text-danger" })
                                            </div>
                                        </div>


                                        <div class="form-group row">
                                            <div class="col-md-12">
                                                @Html.LabelFor(model => model.SenderAddress.Email, htmlAttributes: new { @class = "control-label" })
                                                <div class="input-group">
                                                    @Html.EditorFor(model => model.SenderAddress.Email, new { htmlAttributes = new { @class = "form-control", @type = "email" } })
                                                    <span class="input-group-addon">@@example.com</span>
                                                </div>
                                                @Html.ValidationMessageFor(model => model.SenderAddress.Email, "", new { @class = "text-danger" })
                                            </div>
                                        </div>

                                        <div class="form-group row">
                                            <div class="col-md-12">
                                                @Html.LabelFor(model => model.SenderAddress.Fax, htmlAttributes: new { @class = "control-label" })
                                                @Html.EditorFor(model => model.SenderAddress.Fax, new { htmlAttributes = new { @class = "form-control" } })
                                                @Html.ValidationMessageFor(model => model.SenderAddress.Fax, "", new { @class = "text-danger" })
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="tab-pane" id="tab4" aria-labelledby="base-tab4">
                                <div class="row">
                                    <div class="col-md-4">
                                        @Html.HiddenFor(model => model.ReceiverCode)
                                        <div class="form-group row">
                                            <div class="col-md-12">
                                                @Html.LabelFor(model => model.ReceiverName, htmlAttributes: new { @class = "control-label" })
                                                <div class="input-group">
                                                    @Html.EditorFor(model => model.ReceiverName, new { htmlAttributes = new { @class = "form-control" } })
                                                    <span class="input-group-addon"><i class="icon-head"></i></span>
                                                </div>
                                                @Html.ValidationMessageFor(model => model.ReceiverName, "", new { @class = "text-danger" })
                                            </div>
                                        </div>

                                        <div class="form-group row">
                                            <div class="col-md-12">
                                                @Html.LabelFor(model => model.ReceiverAddress.StreetAddress, htmlAttributes: new { @class = "control-label" })
                                                @Html.EditorFor(model => model.ReceiverAddress.StreetAddress, new { htmlAttributes = new { @class = "form-control" } })
                                                @Html.ValidationMessageFor(model => model.ReceiverAddress.StreetAddress, "", new { @class = "text-danger" })
                                            </div>
                                        </div>

                                        <div class="form-group row">
                                            <div class="col-md-12">
                                                @Html.LabelFor(model => model.ReceiverAddress.Mobile, htmlAttributes: new { @class = "control-label" })
                                                <div class="input-group">
                                                    @Html.EditorFor(model => model.ReceiverAddress.Mobile, new { htmlAttributes = new { @class = "form-control" } })
                                                    <span class="input-group-addon"><i class="icon-mobile"></i></span>
                                                </div>
                                                @Html.ValidationMessageFor(model => model.ReceiverAddress.Mobile, "", new { @class = "text-danger" })
                                            </div>
                                        </div>

                                    </div>
                                    <div class="col-md-4">

                                        <div class="form-group row">
                                            <div class="col-md-12">
                                                @Html.LabelFor(model => model.ReceiverAddress.CountryId, htmlAttributes: new { @class = "control-label" })
                                                @Html.DropDownListFor(model => model.ReceiverAddress.CountryId, @ViewBag.ReceiverCountry as SelectList, "--Select Country--", new { @class = "form-control" })
                                                @Html.ValidationMessageFor(model => model.ReceiverAddress.CountryId, "", new { @class = "text-danger" })
                                            </div>
                                        </div>

                                        <div class="form-group row">
                                            <div class="col-md-12">
                                                @Html.LabelFor(model => model.ReceiverAddress.CityId, htmlAttributes: new { @class = "control-label" })
                                                @Html.EditorFor(model => model.ReceiverAddress.CityId, new { htmlAttributes = new { @class = "form-control" } })
                                                @*@Html.DropDownListFor(model => model.ReceiverAddress.CityId, @ViewBag.ReceiverCity as SelectList, "--Select City--", new { @class = "form-control" })*@
                                                @Html.ValidationMessageFor(model => model.ReceiverAddress.CityId, "", new { @class = "text-danger" })
                                            </div>
                                        </div>

                                        <div class="form-group row">
                                            @Html.LabelFor(model => model.ReceiverAddress.State, htmlAttributes: new { @class = "control-label col-md-3" })
                                            <div class="col-md-12">
                                                <input type="text" class="form-control typeahead-remote" name="ReceiverAddress.State" id="ReceiverAddress_State" value="@Model.ReceiverAddress.State" required placeholder="--Select State--" data-msg-required="State is required." />
                                                @Html.ValidationMessage("ReceiverAddress.State", "", new { @class = "text-danger" })
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-group row">
                                            <div class="col-md-12">
                                                @Html.LabelFor(model => model.ReceiverAddress.ZipCode, htmlAttributes: new { @class = "control-label" })
                                                @Html.EditorFor(model => model.ReceiverAddress.ZipCode, new { htmlAttributes = new { @class = "form-control" } })
                                                @Html.ValidationMessageFor(model => model.ReceiverAddress.ZipCode, "", new { @class = "text-danger" })
                                            </div>
                                        </div>
                                        <div class="form-group row">
                                            <div class="col-md-12">
                                                @Html.LabelFor(model => model.ReceiverAddress.Phone, htmlAttributes: new { @class = "control-label" })
                                                <div class="input-group">
                                                    @Html.EditorFor(model => model.ReceiverAddress.Phone, new { htmlAttributes = new { @class = "form-control", @type = "tel" } })
                                                    <span class="input-group-addon"><i class="icon-phone"></i></span>
                                                </div>
                                                @Html.ValidationMessageFor(model => model.ReceiverAddress.Phone, "", new { @class = "text-danger" })
                                            </div>
                                        </div>
                                        <div class="form-group row">
                                            <div class="col-md-12">
                                                @Html.LabelFor(model => model.ReceiverAddress.Email, htmlAttributes: new { @class = "control-label" })
                                                <div class="input-group">
                                                    @Html.EditorFor(model => model.ReceiverAddress.Email, new { htmlAttributes = new { @class = "form-control", @type = "email" } })
                                                    <span class="input-group-addon">@@example.com</span>
                                                </div>
                                                @Html.ValidationMessageFor(model => model.ReceiverAddress.Email, "", new { @class = "text-danger" })
                                            </div>
                                        </div>

                                        <div class="form-group row">
                                            <div class="col-md-12">
                                                @Html.LabelFor(model => model.ReceiverAddress.Fax, htmlAttributes: new { @class = "control-label" })
                                                @Html.EditorFor(model => model.ReceiverAddress.Fax, new { htmlAttributes = new { @class = "form-control" } })
                                                @Html.ValidationMessageFor(model => model.ReceiverAddress.Fax, "", new { @class = "text-danger" })
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>



                            <div class="tab-pane" id="tab5" aria-labelledby="base-tab5">

                                <div class="row">
                                    <div class="col-md-4">
                                        <div class="form-group row">
                                            <div class="col-md-12">
                                                @Html.LabelFor(model => model.DeliveryDetail.DeliveryStaff, htmlAttributes: new { @class = "control-label" })
                                                <div class="input-group">
                                                    @Html.EditorFor(model => model.DeliveryDetail.DeliveryStaff, new { htmlAttributes = new { @class = "form-control" } })
                                                    <span class="input-group-addon"><i class="icon-adjust"></i></span>
                                                </div>
                                                @Html.ValidationMessageFor(model => model.DeliveryDetail.DeliveryStaff, "", new { @class = "text-danger" })
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-group row">
                                            <div class="col-md-12">
                                                @Html.LabelFor(model => model.DeliveryDetail.ReceivedPreson, htmlAttributes: new { @class = "control-label" })
                                                <div class="input-group">
                                                    @Html.EditorFor(model => model.DeliveryDetail.ReceivedPreson, new { htmlAttributes = new { @class = "form-control" } })
                                                    <span class="input-group-addon"><i class="icon-user-check"></i></span>
                                                </div>
                                                @Html.ValidationMessageFor(model => model.DeliveryDetail.ReceivedPreson, "", new { @class = "text-danger" })
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-group row">
                                            <div class="col-md-12">
                                                @Html.LabelFor(model => model.DeliveryDetail.DeliveredOn, htmlAttributes: new { @class = "control-label" })
                                                @Html.EditorFor(model => model.DeliveryDetail.DeliveredOn, new { htmlAttributes = new { @class = "form-control", @Value = @DateTime.Now } })
                                                @Html.ValidationMessageFor(model => model.DeliveryDetail.DeliveredOn, "", new { @class = "text-danger" })
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-md-6">
                                        @Html.HiddenFor(model => model.DeliveryDetail.PODUrl)
                                        @Html.HiddenFor(model => model.DeliveryDetail.FileName)

                                        <input type="file" name="contentFile" class="btn btn-primary" id="contentFile">
                                        <small id="passwordHelpBlock" class="form-text">
                                            Formats( .docx |.pdf |.xls |.xlsx |.ppt |.txt)
                                        </small>
                                        <div id="divErrorText">
                                            <img id="alert-loader" src="~/Images/default/Spinner-1s-70px.gif">
                                        </div>
                                        <input type="text" name="FileGUID" id="txtFileName" class="hidden" />
                                        <ul class="attachment">
                                            @if (!string.IsNullOrWhiteSpace(Model.DeliveryDetail.PODUrl))
                                            {
                                                <li><a href="/FileUpload/GetUploadedObject?fileId=@Model.DeliveryDetail.PODUrl">@Model.DeliveryDetail.FileName</a><a href="javascript:void(0);" data-id="@Model.DeliveryDetail.PODUrl" class="deleteItem">X</a></li>
                                            }
                                        </ul>


                                    </div>

                                    <div class="col-md-12 text-xs-right">
                                        <button type="button" id="btnDelivered" data-id="@Model.ShipmentId" class="btn btn-success">
                                            <i class="icon-check2"></i> Delivered
                                        </button>
                                    </div>


                                </div>

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

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

</form>

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
    @*<script src="//maps.googleapis.com/maps/api/js?key=AIzaSyBDkKetQwosod2SZ7ZGCpxuJdxY3kxo5Po" type="text/javascript"></script>
    <script src="~/Content/AdminJS/gmaps.min.js"></script>*@
    <script type="text/javascript">
        $('input[name="BookingDate"]').datepicker();
        $('input[name="DeliveryDate"]').datepicker();
        var Shipmentds = [];

        //$(window).on("load", function () {
        //    routes_map = new GMaps({
        //        div: '#routes',
        //        lat: -12.043333,
        //        lng: -77.028333,
        //        styles: [{ "featureType": "water", "elementType": "geometry", "stylers": [{ "color": "#a0d6d1" }, { "lightness": 17 }] }, { "featureType": "landscape", "elementType": "geometry", "stylers": [{ "color": "#ffffff" }, { "lightness": 20 }] }, { "featureType": "road.highway", "elementType": "geometry.fill", "stylers": [{ "color": "#dedede" }, { "lightness": 17 }] }, { "featureType": "road.highway", "elementType": "geometry.stroke", "stylers": [{ "color": "#dedede" }, { "lightness": 29 }, { "weight": 0.2 }] }, { "featureType": "road.arterial", "elementType": "geometry", "stylers": [{ "color": "#dedede" }, { "lightness": 18 }] }, { "featureType": "road.local", "elementType": "geometry", "stylers": [{ "color": "#ffffff" }, { "lightness": 16 }] }, { "featureType": "poi", "elementType": "geometry", "stylers": [{ "color": "#f1f1f1" }, { "lightness": 21 }] }, { "elementType": "labels.text.stroke", "stylers": [{ "visibility": "on" }, { "color": "#ffffff" }, { "lightness": 16 }] }, { "elementType": "labels.text.fill", "stylers": [{ "saturation": 36 }, { "color": "#333333" }, { "lightness": 40 }] }, { "elementType": "labels.icon", "stylers": [{ "visibility": "off" }] }, { "featureType": "transit", "elementType": "geometry", "stylers": [{ "color": "#f2f2f2" }, { "lightness": 19 }] }, { "featureType": "administrative", "elementType": "geometry.fill", "stylers": [{ "color": "#fefefe" }, { "lightness": 20 }] }, { "featureType": "administrative", "elementType": "geometry.stroke", "stylers": [{ "color": "#fefefe" }, { "lightness": 17 }, { "weight": 1.2 }] }]
        //    });

        //    routes_map.drawRoute({
        //        origin: [-12.044012922866312, -77.02470665341184],
        //        destination: [-12.090814532191756, -77.02271108990476],
        //        travelMode: 'driving',
        //        strokeColor: '#131540',
        //        strokeOpacity: 0.6,
        //        strokeWeight: 6
        //    });

        //});

        $(document).ready(function () {

            $('#btnPrint').on('click', function () {
                var trackingId = $(this).attr('data-trackingid');
                window.open('/Shipments/GetPdf?Id=' + trackingId, '_blank');

            });

            $('input[name="DeliveryDetail.DeliveredOn"]').datetimepicker({ timeFormat: "hh:mm tt" });


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

                var postData = {
                    ShipmentId: $(this).attr('data-id'),
                    DeliveredOn: $('input[name="DeliveryDetail.DeliveredOn"]').val(),
                    DeliveryStaff: $('input[name="DeliveryDetail.DeliveryStaff"]').val(),
                    ReceivedPreson: $('input[name="DeliveryDetail.ReceivedPreson"]').val(),
                    PODUrl: $('input[name="DeliveryDetail.PODUrl"]').val(),
                    FileName: $('#DeliveryDetail_FileName').val()
                };
                $.ajax({
                    type: "POST",
                    url: '/Shipments/Delivered',
                    data: postData,
                    dataType: 'json',
                    beforeSend: function () {
                    },
                    success: function (data) {
                        if (data.success) {
                            swal("Saved!", "Delivery information saved.", "success");
                            setTimeout(function () {
                                window.location.reload();
                            }, 2000)
                        }
                    },
                    error: function (jqXHR) {
                        if (jqXHR.status == 400) {
                            swal("Sorry", "Something Wronge :)", "error");
                        } else if (jqXHR.status == 500) {
                            swal("Sorry", "Something Wronge :)", "error");
                        }
                    }
                });
            });

            $('#js-Delete').on('click', function () {

                var btn = $(this);
                var id = $(this).attr('data-shipment-Id');
                swal({
                    title: "Are you sure?",
                    text: "You want to Delete it Permanently!",
                    type: "warning",
                    showCancelButton: true,
                    confirmButtonColor: "#DA4453",
                    confirmButtonText: "Yes, delete it!",
                    cancelButtonText: "No, cancel plx!",
                    closeOnConfirm: false,
                    closeOnCancel: true
                }, function (isConfirm) {
                    if (isConfirm) {

                        $.ajax({
                            type: "GET",
                            url: '/Shipments/Delete?id=' + id,
                            dataType: 'json',
                            beforeSend: function () {
                                $(this).prop('disabled', true);
                            },
                            success: function (data) {
                                if (data.success) {
                                    swal("Deleted!", "Shipment has been deleted.", "success");
                                    window.location.href = '/Shipments/Index'
                                }
                            },
                            error: function (jqXHR) {
                                if (jqXHR.status == 400) {
                                    swal("Sorry", "Something Wronge :)", "error");
                                }
                            },
                            complete: function () {
                                $(this).prop('disabled', false);
                            }
                        });
                    } else {
                        swal("Cancelled", "Your file is safe :)", "error");
                    }
                });

            });

            $('.js-delete-status').on('click', function () {
                
                var id = $(this).attr('data-Id');
                swal({
                    title: "Are you sure?",
                    text: "You want to Delete it Permanently!",
                    type: "warning",
                    showCancelButton: true,
                    confirmButtonColor: "#DA4453",
                    confirmButtonText: "Yes, delete it!",
                    cancelButtonText: "No, cancel plx!",
                    closeOnConfirm: false,
                    closeOnCancel: true
                }, function (isConfirm) {
                    if (isConfirm) {

                        $.ajax({
                            type: "GET",
                            url: '/Shipments/DeleteShipmentStatus?id=' + id,
                            dataType: 'json',
                            beforeSend: function () {
                                $(this).prop('disabled', true);
                            },
                            success: function (data) {
                                if (data.success) {
                                    swal("Deleted!", "Status has been deleted.", "success");
                                    window.location.reload();
                                }
                            },
                            error: function (jqXHR) {
                                if (jqXHR.status == 400) {
                                    swal("Sorry", "Something Wronge :)", "error");
                                }
                            },
                            complete: function () {
                                $(this).prop('disabled', false);
                            }
                        });
                    } else {
                        swal("Cancelled", "Your file is safe :)", "error");
                    }
                });

            });

            for (var i = 0; i < @Model.ShipmentDetail.Count; i++) {
                var text = $('#txtDescription_' + i).val();
                $('#cbxDescription_' + i).val(text);
            }

            $('#btnSelected').on('click', function (e) {     
                
                if (!$('#Location').val()) {
                    $('#Location').parents('div.form-group').addClass('has-danger');
                }
                else if (!$('#StatusId').val()) {
                    $('#StatusId').parents('div.form-group').addClass('has-danger');
                }
                else if (!$('#Remarks').val()) {
                    $('#Remarks').parents('div.form-group').addClass('has-danger');
                }
                else {
                    Shipmentds.push($('#TrackingId').val());
                    OnSubmit('#status-form');
                }
            });


            function OnSubmit(form) {

                var trackobj = {

                    StatusId: $('#StatusId').val(),
                    Location: $('#Location').val(),
                    Remarks: $('#Remarks').val()                   
                };
                var postData = { values: Shipmentds, trackDetail: trackobj };
                $.ajax({
                    type: "POST",
                    url: '/Shipments/UpdateStatus',
                    data: postData,
                    dataType: 'json',
                    beforeSend: function () {
                        AjaxBlock('#status-form');
                    },
                    success: function (data) {
                        if (data.success) {
                            MyAlert("Good!", "Status Update successfully...!", "success", "icon-check-circle-o");
                            Shipmentds.length = 0;
                            window.location.reload();
                        }

                    },
                    error: function (jqXHR) {
                        if (jqXHR.status == 400) {
                            MyAlert("Warning", "Invalid Request", "danger", "icon-ios-close-outline");
                        }
                        Shipmentds.length = 0;
                    },
                    complete: function () {
                        AjaxUnblock('#status-form');
                    }
                });
            }

        });
    </script>
    <script src="~/Content/CustomLibs/Shipment.js"></script>
    @Html.Raw(TempData["msg"])
}