@model  GODATA.Models.Report.TollFreeCallAndOpportunityLoss
@if (Model != null && Model.OpportunityLoss != null)
{  
    <div id="OppotunityLossDiv">
        <div class="InfraTable_WrpOutage">

    <table class="customTable" id="TimeslorClosureGrid">
        <thead>
            <tr>
                <th class="brownTh" colspan="12" rowspan="1">Van Analysis</th>
            </tr>


            <tr>
                <th class="brownTh" colspan="12" rowspan="1">@Model.RequireVanText</th>
            </tr>
        </thead>
        <tbody>

            <tr>
                <td colspan="12" class="">@Model.RequireVan</td>
            </tr>

        </tbody>
    </table>

    </div>
    <br />
    <div class="InfraTable_WrpOutage">

        <table class="customTable">
            <thead>
                <tr>
                    <th class="brownTh" colspan="12" rowspan="1">State SLA  Missed</th>
                </tr>
            </thead>

        </table>

    </div>
        <div class="InfraTable_WrpOutage" style="border: 1px #ccc solid; padding: 5px 5px;">
            @if (Model.OpportunityLoss.StateSLAMissed != null && Model.OpportunityLoss.StateSLAMissed.Count() > 0)
            {
 
                @(Html.Kendo().Chart().Name("StateSLAMet1").Theme("Bootstrap").Title("State Wise SLA Missed")
                  .ChartArea(chartArea => chartArea.Background("transparent").Height(300))
                  .Legend(legend => legend.Position(ChartLegendPosition.Right))
            .SeriesDefaults(seriesDefaults => seriesDefaults.Line().Style(ChartLineStyle.Smooth))
            .Series(series =>
            {
                series.Column(new object[] { 
                    Model.OpportunityLoss.StateSLAMet[0].June,
                    Model.OpportunityLoss.StateSLAMet[0].July,
                    Model.OpportunityLoss.StateSLAMet[0].Aug,
                    Model.OpportunityLoss.StateSLAMet[0].Sep,
                    Model.OpportunityLoss.StateSLAMet[0].Oct,
                    Model.OpportunityLoss.StateSLAMet[0].Nov
                    
                });
            })
           .ValueAxis(axis => axis.Numeric().Title("").Labels(labels => labels.Format("{0}").Step(4)).Line(line => line.Visible(false)).AxisCrossingValue(-10))
           .CategoryAxis(axis => axis
           .Name("Region")
           .Categories("Jun", "Jul", "Aug", "Sep", "Oct", "Nov")
           .MajorGridLines(lines => lines.Visible(false)).Labels(labels => labels.Rotation(-30)))
           .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>
        <br />
        <div class="InfraTable_WrpOutage">

            <table class="customTable">
                <thead>
                    <tr>
                        <th class="brownTh" colspan="12" rowspan="1">SLA  Met</th>
                    </tr>
                </thead>

            </table>

        </div>
        <div class="InfraTable_WrpOutage" style="border: 1px #ccc solid; padding: 5px 5px;">
            @if (Model.OpportunityLoss.StateSLAMet != null && Model.OpportunityLoss.StateSLAMet.Count() > 0)
            {
 
                @(Html.Kendo().Chart().Name("StateSLAMet").Theme("Bootstrap").Title("State Wise SLA Met")
                  .ChartArea(chartArea => chartArea.Background("transparent").Height(300))  
                  .Legend(legend => legend.Position(ChartLegendPosition.Right))
            .SeriesDefaults(seriesDefaults => seriesDefaults.Line().Style(ChartLineStyle.Smooth))
            .Series(series =>
            {
                series.Column(new object[] { 
                    Model.OpportunityLoss.StateSLAMet[0].June,
                    Model.OpportunityLoss.StateSLAMet[0].July,
                    Model.OpportunityLoss.StateSLAMet[0].Aug,
                    Model.OpportunityLoss.StateSLAMet[0].Sep,
                    Model.OpportunityLoss.StateSLAMet[0].Oct,
                    Model.OpportunityLoss.StateSLAMet[0].Nov
                    
                });
            })
            .CategoryAxis(axis => axis
            .Name("Region")
            .Categories("Jun", "Jul", "Aug", "Sep", "Oct", "Nov")
            .MajorGridLines(lines => lines.Visible(false))
            .Labels(labels => labels.Rotation(-10))
            )
            .ValueAxis(axis => axis.Numeric().Title("No.").Labels(labels => labels.Format("{0}").Step(2)).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>
    
    <div id="TollFreeNoDiv">
         <div class="InfraTable_WrpOutage">

        <table class="customTable">
            <thead>
                <tr>
                    <th class="brownTh" colspan="12" rowspan="1">Dealer SLA  Missed</th>
                </tr>
            </thead>

        </table>

    </div>
        <div>
            @if (Model.OpportunityLoss.DealerSLAMissed != null && Model.OpportunityLoss.DealerSLAMissed.Count() > 0)
            {
 
               @(Html.Kendo().Chart().Name("CallFeedbackParamsChart").Theme("Bootstrap").Title("Dealer SLA Missed")
        
            .ChartArea(chartArea => chartArea.Background("transparent").Height(300))
            .SeriesDefaults(seriesDefaults => seriesDefaults.Line().Style(ChartLineStyle.Smooth))
            .Series(series =>
            {
                //series.Line(Model.CurrentYearEosFeedback.Select(s => s.Category)).Name("Category");
                series.Column(Model.OpportunityLoss.DealerSLAMissed.Select(s => s.GrandTotal));
                
            })
            .CategoryAxis(axis => axis.Categories(Model.OpportunityLoss.DealerSLAMissed.Select(s => s.DealerName)).MajorGridLines(lines => lines.Visible(false)).Labels(labels => labels.Rotation(-30)))
            .ValueAxis(axis => axis.Numeric().Title("No.").Labels(labels => labels.Format("{0}").Step(2)).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" }))
            }
        </div>
        <br />
        <div class="InfraTable_WrpOutage">

        <table class="customTable">
            <thead>
                <tr>
                    <th class="brownTh" colspan="12" rowspan="1">Dealer SLA Met</th>
                </tr>
            </thead>

        </table>

    </div>
        <div class="InfraTable_WrpOutage">
             @if (Model.OpportunityLoss.DealerSLAMet != null && Model.OpportunityLoss.DealerSLAMet.Count() > 0)
            {
 
               @(Html.Kendo().Chart().Name("CallFeedbackParamsChart1").Theme("Bootstrap").Title("Dealer SLA Met")
        
            .ChartArea(chartArea => chartArea.Background("transparent").Height(300))
            .SeriesDefaults(seriesDefaults => seriesDefaults.Line().Style(ChartLineStyle.Smooth))
            .Series(series =>
            {
                //series.Line(Model.CurrentYearEosFeedback.Select(s => s.Category)).Name("Category");
                series.Column(Model.OpportunityLoss.DealerSLAMet.Select(s => s.GrandTotal));
                
            })
            .CategoryAxis(axis => axis.Categories(Model.OpportunityLoss.DealerSLAMet.Select(s => s.DealerName)).MajorGridLines(lines => lines.Visible(false)).Labels(labels => labels.Rotation(-30)))
            .ValueAxis(axis => axis.Numeric().Title("No.").Labels(labels => labels.Format("{0}").Step(2)).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" }))
            }
        </div>
    </div>
}
<script type="text/javascript">
    //showHideMessage();
</script>