@model ParcelWeb.DeliveryReportVM
<style>
    .header-row{
        background-color:#F6BB42;
    }
    .header-row:hover,.header-row:focus{
        background-color:#F6BB42;
    }
</style>
<div class="table-responsive" style="max-height:600px;overflow-y:scroll">
    <table class="table  table-bordered compact  table-hover table-xs" id="dgvRates">
        @if (@Model != null)
        {
            <thead class="thead-orange thead-inverse">
                <tr>
                    <th style="color:#F6BB42">
                        WEIGHT KG
                    </th>
                    @foreach (var item in @Model.Zones)
                    {
                        <th>
                            @item.Name
                        </th>
                    }
                </tr>
            </thead>
            <tbody>

                @foreach (var item in @Model.ParcelTypes)
                {
                    double weight = 0;

                    <tr class="header-row">
                        <td colspan="@(Model.Zones.Count+1)" style="text-align:center">@item.TypeName</td>
                    </tr>

                    for (int i = 0; i < @item.DeliverRates.Count; i++)
                    {
                        if (@item.DeliverRates[i].Weight != weight)
                        {
                            <tr>
                                <td class="header-cell"><strong>@item.DeliverRates[i].Weight</strong></td>
                                @for (int j = i; j < i + @Model.Zones.Count; j++)
                                {
                                    <td>@item.DeliverRates[j].Price</td>
                                }

                            </tr>
                                weight = item.DeliverRates[i].Weight;
                        }

                    }

                }
            </tbody>
        }
        else
        {
            <caption>Sorry, No record found...! </caption>
        }

    </table>

</div>