@model  GODATA.Models.Report.TimeslotClosure
@if (Model != null)
{
    <div>
        @if (Model.TimeSlotClouserDetailList != null && Model.TimeSlotClouserDetailList.Count() > 0)
        {
            @(Html.Kendo().Chart().Name("TimeslorClosureChart").Theme("Bootstrap").Title("Timeslot Closure")
            .Legend(legend => legend.Position(ChartLegendPosition.Right))
            .ChartArea(chartArea => chartArea.Background("transparent").Height(300))
            .SeriesDefaults(seriesDefaults => seriesDefaults.Line().Style(ChartLineStyle.Smooth))
            .Series(series =>
            {
                series.Column(Model.TimeSlotClouserDetailList.Select(s => s.Less24Hrs)).Name("<= 2 Hrs");
                series.Column(Model.TimeSlotClouserDetailList.Select(s => s.Calls24HrsTo48Hrs)).Name("> 2 Hrs to 6 Hrs");
                series.Column(Model.TimeSlotClouserDetailList.Select(s => s.Calls48HrsTo72Hrs)).Name("> 6 Hrs to 10 Hrs");
                series.Column(Model.TimeSlotClouserDetailList.Select(s => s.Calls72HrsTo96Hrs)).Name("> 10 Hrs to 24 Hrs");
                series.Column(Model.TimeSlotClouserDetailList.Select(s => s.Greater96Hrs)).Name("> 24 Hrs");
                series.Line(Model.TimeSlotClouserDetailList.Select(s => s.GrandTotal)).Name("Grand Total");
            })
            .CategoryAxis(axis => axis.Categories(Model.TimeSlotClouserDetailList.Select(s => s.TimeSlot)).MajorGridLines(lines => lines.Visible(false)).Labels(labels => labels.Rotation(-30)))
            .ValueAxis(axis => axis.Numeric().Title("No.").Labels(labels => labels.Format("{0}").Step(4)).Line(line => line.Visible(false)).AxisCrossingValue(-10))
            .Tooltip(tooltip => tooltip.Visible(true).Template("#= category # - #= kendo.format('{0:0}', value)#"))
            .HtmlAttributes(new { style = "width:100%;height:100%;", @class = "revenue-kendo-chart" }))
        }
        else
        {

        }
    </div>
    <div class="InfraTable_WrpOutage">
        @if (Model.TimeSlotClouserDetailList != null && Model.TimeSlotClouserDetailList.Count() > 0)
        {
            <table class="customTable" id="TimeslorClosureGrid">
                <thead>
                    <tr>
                        <th class="brownTh" colspan="12" rowspan="1">EOS Call – Timing Slot Wise Closure</th>
                    </tr>
                    <tr>
                        <th colspan="12" rowspan="1"></th>
                    </tr>
                    <tr>
                        <th class="brownTh" colspan="1" rowspan="2">Time Slot</th>
                        <th class="brownTh" colspan="2" rowspan="1"><= 2 Hrs</th>
                        <th class="brownTh" colspan="2" rowspan="1">> 2 Hrs to 6 Hrs</th>
                        <th class="brownTh" colspan="2" rowspan="1">> 6 Hrs to 10 Hrs</th>
                        <th class="brownTh" colspan="2" rowspan="1">> 10 Hrs to 24 Hrs</th>
                        <th class="brownTh" colspan="2" rowspan="1">> 24 Hrs</th>
                        <th class="brownTh" colspan="1" rowspan="2">Grand Total</th>
                    </tr>
                    <tr>
                        <th class="brownTh" colspan="1" rowspan="1">No.</th>
                        <th class="brownTh" colspan="1" rowspan="1">%</th>
                        <th class="brownTh" colspan="1" rowspan="1">No.</th>
                        <th class="brownTh" colspan="1" rowspan="1">%</th>
                        <th class="brownTh" colspan="1" rowspan="1">No.</th>
                        <th class="brownTh" colspan="1" rowspan="1">%</th>
                        <th class="brownTh" colspan="1" rowspan="1">No.</th>
                        <th class="brownTh" colspan="1" rowspan="1">%</th>
                        <th class="brownTh" colspan="1" rowspan="1">No.</th>
                        <th class="brownTh" colspan="1" rowspan="1">%</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach (var item in Model.TimeSlotClouserDetailList)
                    {                                
                        <tr>
                            <td class="">@item.TimeSlot</td>
                            <td class="">@item.Less24Hrs</td>
                            <td class="">@item.Less24HrsPer</td>
                            <td class="">@item.Calls24HrsTo48Hrs</td>
                            <td class="">@item.Calls24HrsTo48HrsPer</td>
                            <td class="">@item.Calls48HrsTo72Hrs</td>
                            <td class="">@item.Calls48HrsTo72HrsPer</td>
                            <td class="">@item.Calls72HrsTo96Hrs</td>
                            <td class="">@item.Calls72HrsTo96HrsPer</td>
                            <td class="">@item.Greater96Hrs</td>
                            <td class="">@item.Greater96HrsPer</td>
                            <td class="">@item.GrandTotal</td>
                        </tr>
                    }
                </tbody>
            </table>
        }
        else
        {
            <div class="no_data" style="top: 0%;">
                <span>
                    <p class="fs16">No data available on selected filter !!!</p>
                    <p>Please select different filter.</p>
                </span>
            </div>
        }
    </div>
}
<script type="text/javascript">
    //showHideMessage();
</script>