@model ParcelWeb.Core.ViewModels.TrackViewModel

@{
    Layout = null;
    int i = 1;
}
<style>
    .arrow-2x {
        font-size: 35px;
    }

    .flaticon-red:before, .flaticon-red:after {
        background-color: #232951;
        color: #00BAFF;
    }

    #pnlStatus th, #pnlStatus td {
        padding: 3px;
    }

    .delivery {
        margin-left: 100px;
        margin-top: -75px;
    }
</style>

<div class="card-body">
    <div class="card-block">
        <h5 class="card-title"> Route of Shipment : <span class="text-danger">@Model.Shipment.TrackingId</span> </h5>
        <div class="row">
            @foreach (var item in @Model.Status)
            {
                if (@Model.Shipment.ShipmentTrackingDetail.Exists(x => x.StatusId == item.Id))
                {
                    <div class="col-md-2">
                        <i class="@item.ImageUrl flaticon-red"></i> &nbsp;
                        @if (i < @Model.Status.Count)
                        {
                            <i class="icon-ios-arrow-thin-right arrow-2x text-primary"></i>
                        }
                    </div>
                }
                else
                {
                    <div class="col-md-2">
                        <i class="@item.ImageUrl"></i>  &nbsp;
                        @if (i < @Model.Status.Count)
                        {
                            <i class="icon-ios-arrow-thin-right arrow-2x text-primary"></i>
                        }
                    </div>
                }
                i++;
            }

        </div>

        <br />
        <div class="row">
            <div class="col-md-12">

                <div class="row match-height">
                    <div class=" col-md-5 col-sm-12">
                        <div class="card no-border box-shadow-0" style="background-color:#f3f3f3">
                            <div class="card-body">
                                <div class="card-block" style="padding-top:0;padding-bottom:0">
                                    <table class="table table-borderless" id="pnlStatus">
                                        <tbody>
                                            <tr>
                                                <th>Shipment No :</th>
                                                <td colspan="2">@Model.Shipment.TrackingId</td>
                                            </tr>
                                            <tr>
                                                <th>Reference No :</th>
                                                <td colspan="2">@Model.Shipment.RefNo</td>
                                            </tr>
                                            <tr>
                                                <th>Origin :</th>
                                                <td colspan="2">@Model.Shipment.SenderAddress.City.Name, @Model.Shipment.SenderAddress.Country.Name</td>
                                            </tr>
                                            <tr>
                                                <th>Destination :</th>
                                                <td colspan="2">@Model.Shipment.ReceiverAddress.City.Name, @Model.Shipment.ReceiverAddress.Country.Name</td>
                                            </tr>
                                        </tbody>
                                    </table>


                                </div>

                            </div>
                        </div>
                    </div>
                    @if (Model.Shipment.DeliveredStatus)
                    {

                        <div class=" col-md-5 col-sm-12">
                            <div class="card no-border box-shadow-0">
                                <div class="card-body">
                                    <div class="card-block" style="padding-top:20px;padding-bottom:0">
                                        <img src="~/Images/Default/iconmonstr-check-mark-9-72.png" />
                                        <div class="delivery">
                                            <h4 class="text-success"><b>Delivered</b></h4>
                                            <p style="margin:0px">Delivery Date: <b>@Model.Shipment.DeliveryDetail.DeliveredOn.ToString("dd MMM yyy HH:mm:ss")</b> </p>
                                            <p>Received By: <b>@Model.Shipment.DeliveryDetail.ReceivedPreson</b> </p>
                                        </div>
                                    </div>

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

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

        <div class="row">
            <div class="col-md-12">
                <h4 class="form-section"><i class="icon-map-signs"></i> Tracking History</h4>

            </div>
            <div class="col-md-12">
                <div class="table-responsive">
                    <table class="table table-striped table-bordered overflow-scroll">
                        <thead class="thead-inverse">
                            <tr>
                                <th>Date</th>
                                <th>Time</th>
                                <th>Location</th>
                                <th>Status</th>
                                <th>Remarks</th>

                            </tr>
                        </thead>
                        <tbody>
                            @foreach (var item in @Model.Shipment.ShipmentTrackingDetail)
                            {
                                <tr>
                                    <td>@item.Date.ToShortDateString()</td>
                                    <td>@item.Time.ToShortTimeString()</td>
                                    <td>@item.Location</td>
                                    <td>@item.Status.Description</td>
                                    <td>@item.Remarks</td>
                                </tr>
                            }

                        </tbody>
                    </table>

                </div>

            </div>

        </div>

    </div>
</div>