@{
    ViewBag.Title = "Route wise Breakdown Report";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<div id="div_load">
   @* <img src="../../Content/images/13.gif" style="position: absolute; top: 44%; left: 48%; z-index: 100000;" />*@
</div>
<div class="size25 left">
    <div class="window">
        <div class="titlebar">
            <div class="title">
                Controls
            </div>
        </div>
        <div class="innerWindow">
            <div class="menubar">
                <div class="searchBox" title="Quick Search">
                    <div class="inputBox">
                        <input type="text" id="txtSearch" />
                    </div>
                    <div class="sIcon">
                        <img alt="" src="@Url.Content("~/Content/images/search-icon.png")" />
                    </div>
                </div>
            </div>
            <div class="content contentoverflow withstatusbar">
                <div class="listDetails">
                    <div class="ldSection shadow_btm">
                        <table class="themeTable" cellpadding="5" cellspacing="0">
                            <thead>
                                <tr>
                                    <th colspan="2" class="filter_head">
                                        <img src="~/Content/css/images/filters-banner.jpg" border="0" />
                                    </th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td class="tableCelllabel">
                                        <span class="darktxt">Start Date </span>
                                    </td>
                                    <td class="tableCellinfo darktxt lftpanelSmall">
                                        @(Html.Kendo().DatePicker()
                                          .Name("FromDate")
                                          .Format("dd MMM yyyy")
                                          .Value(DateTime.Now.AddMonths(-1))
                                          .Max(DateTime.Now)
                                          .HtmlAttributes(new { @class = "kendo-make-readonly", style = "width:152px !important", type = "text", @id = "fromDatePicker" })
                                          .Start(CalendarView.Month)
                                          .Depth(CalendarView.Month)
                                          )
                                    </td>
                                </tr>
                                <tr>
                                    <td class="tableCelllabel">
                                        <span class="darktxt">End Date </span>
                                    </td>
                                    <td class="tableCellinfo darktxt lftpanelSmall">
                                        @(Html.Kendo().DatePicker()
                                          .Name("ToDate")
                                          .Format("dd MMM yyyy")
                                          .Value(DateTime.Now)
                                          .Max(DateTime.Now)
                                          .Start(CalendarView.Month)
                                          .Depth(CalendarView.Month)
                                          .HtmlAttributes(new { style = "width:152px !important", type = "text", @id = "fromMonthPicker" })
                                          .Max(DateTime.Now)
                                          )
                                    </td>
                                </tr>
                                <tr>
                                    <td class="tableCelllabel">
                                        <span class="darktxt">Select Route </span>
                                    </td>
                                    <td class="tableCellinfo darktxt SelectDD">
                                        @Html.Kendo().DropDownList().OptionLabel("-Select-").SelectedIndex(0).Name("RouteId").DataTextField("Text").DataValueField("Value").BindTo(Model)                                        
                                        <span id="spanRoute" class="error" style="display: none; color: #ee1d23">*</span>
                                    </td>
                                </tr>

                            </tbody>
                        </table>
                        <div class="btn_wrapper aling_left">
                            <table width="100%" cellspacing="0" cellpadding="0" border="0">
                                <tr>
                                    <td>
                                        <input type="button" value="Submit" class="button_blue custom_postool_btn" onclick="showReport()" />
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </div>
                    <div id="blindSpot_toolbox" class="shadow_btm">
                        <table class="themeTable" cellpadding="5" cellspacing="0" style="border: 1px solid #dedede">
                            <thead>
                                <tr>
                                    <th colspan="2">
                                        <img src="~/Content/css/images/advanced-info-banner.png" border="0" />
                                    </th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td class="tableCelllabel" style="white-space: normal !Important; width: 50% !important" id="textFor_average_response_time">Average Response Time (HH:MM)</td>
                                    <td class="tableCellinfo lftpanelSmall" style="white-space: normal !Important; width: 50% !important" id="average_response_time">00:00</td>
                                </tr>
                            </tbody>
                        </table>
                        <table class="themeTable" cellpadding="5" cellspacing="0" style="border: 1px solid #dedede">                           
                            <tbody>
                                <tr>
                                    <td class="tableCelllabel" id="textFor_average_closure_time" style="white-space: normal !Important; width: 50% !important">Average Closure Time (HH:MM)</td>
                                    <td class="tableCellinfo lftpanelSmall" id="average_closure_time" style="white-space: normal !Important; width: 50% !important">00:00</td>
                                </tr>
                            </tbody>
                        </table>
                        <table class="themeTable" cellpadding="5" cellspacing="0" style="border: 1px solid #dedede">
                            <tbody>
                                <tr>
                                    <td class="tableCelllabel" style="white-space: normal !Important; width: 50% !important" id="textFor_total_breakdown">Total Breakdown</td>
                                    <td class="tableCellinfo lftpanelSmall" style="white-space: normal !Important; width: 50% !important" id="total_breakdown">0</td>
                                </tr>
                            </tbody>
                        </table>

                        @*<table cellpadding="0" cellspacing="0" border="0" class="matches-played" style="margin-top: 5px;">
                            <tbody>
                                <tr>
                                    <td class="matches-number" id="total_breakdown">0</td>
                                    <td class="matches-played" id="textFor_total_breakdown" style="font-size: 15px !important; color: #2e2e2e;">Total Breakdown</td>
                               </tr>
                            </tbody>
                        </table>

                        <table cellpadding="0" cellspacing="0" border="0" class="matches-played" style="margin-top: 5px;">
                            <tbody>
                                <tr>
                                    <td class="matches-number" id="average_response_time">00:00</td>
                                    <td class="matches-played" id="textFor_average_response_time" style="font-size: 15px !important; color: #2e2e2e;">Average Response Time (HH:MM)</td>
                               </tr>
                            </tbody>
                        </table>

                        <table cellpadding="0" cellspacing="0" border="0" class="matches-played" style="margin-top: 5px;">
                            <tbody>
                                <tr>
                                    <td class="matches-number" id="average_closure_time">00:00</td>
                                    <td class="matches-played" id="textFor_average_closure_time" style="font-size: 15px !important; color: #2e2e2e;">Average Closure Time (HH:MM)</td>
                               </tr>
                            </tbody>
                        </table>*@

                    </div>
                    <br />

                    <div class="legendsx shadow_btm">
                        <ul>
                            <li style="width: 44% !important; cursor: default !important;"><span class="vanticket"></span>
                                <div>Van Ticket</div>
                            </li>
                            <li style="width: 44% !important; cursor: default !important;"><span class="dealerticket"></span>
                                <div>Dealer Ticket</div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="statusbar" style="height: 15px">
            </div>
        </div>
    </div>
</div>
<div class="size75 right">
    <div class="window">
        <div class="titlebar">
            <div class="title fleft">
                Route Wise Breakdown Report
            </div>

            <div class="datalist_wrp fright">
                <div class="excelIcon fleft" title="Quick Download" onclick="exportReportCSV();" style="display: none; right: 35px; background-image: url(/Content/css/images/icons/quick-download.png) !important;"></div>
            </div>

            <div class="clear"></div>

        </div>
        <div id="divDetail" class="innerWindow">
            <div id="divMapContainerGeo" class="content">
            </div>
        </div>
    </div>
</div>

@*Popup dialog box div *@
<div id="divTicketDetails" style="display: none; height: 500px;"></div>
@*Popup dialog box div *@
<div id="divFleetDetail" style="display: none; height: 600px;"></div>

@{
   
    var mapApiKey = System.Configuration.ConfigurationManager.AppSettings["GoogleId"];
    //(mapApiKey);
    var src1 = "http://maps.googleapis.com/maps/api/js?v=3.exp&type=restaurant,establishment,fire_station&key="+mapApiKey;
}
<script src="@src1"></script>
<script src="@Url.Content("~/Scripts/map_api/markerclusterer.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/map_api/oms.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/Report/RouteWiseBreakdownReport.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/Inventory/ManageFleet_Detail.js")" type="text/javascript"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/Shared/HighwayPath.js")"></script>
@*@Scripts.Render("~/bundles/jsGeoAnalysisReport")*@
<script type="text/javascript">
    var securityToken = '@ViewBag.SecurityToken';
    var UtcMinutes = '@ViewBag.UtcMinutes';
    var userId = '@ViewBag.Userid';
    //function calling on document ready
    $(document).ready(function () {
        //$('.excelIcon').hide();
        SetMap("divMapContainerGeo");
        addKendoWindowToDiv("#divTicketDetails", "Ticket Details", "1050px", 278, 100);
        $("#divTicketDetails").parent().addClass("TicketReportDetails_Window");
        //UncheckCheckBox();
    });
</script>
<style type="text/css">
    .onoffswitch {
        position: relative;
        width: 111px;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        margin-top: 14px;
        margin-left: 14px;
    }

    .onoffswitch-checkbox {
        display: none;
    }

    .onoffswitch-label {
        display: block;
        overflow: hidden;
        cursor: pointer;
        border: 2px solid #999999;
        border-radius: 0px;
        height: 22px;
    }

    .onoffswitch-inner {
        display: block;
        width: 200%;
        margin-left: -100%;
        -moz-transition: margin 0.3s ease-in 0s;
        -webkit-transition: margin 0.3s ease-in 0s;
        -o-transition: margin 0.3s ease-in 0s;
        transition: margin 0.3s ease-in 0s;
    }

        .onoffswitch-inner:before, .onoffswitch-inner:after {
            display: block;
            float: left;
            width: 50%;
            height: 30px;
            padding: 0;
            line-height: 26px;
            font-size: 14px;
            color: white;
            font-family: Trebuchet, Arial, sans-serif;
            font-weight: bold;
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            border: 2px solid transparent;
            background-clip: padding-box;
        }

        .onoffswitch-inner:before {
            content: "SLA Met";
            /*padding-left: 10px;*/
            background-color: #EE2622;
            padding-left: 16px;
            color: #FFFFFF;
            text-align: left;
            font-size: 12px;
            height: 22px;
            line-height: 20px;
        }

        .onoffswitch-inner:after {
            content: "SLA Met";
            padding-right: 10px;
            background-color: #CCCCCC;
            color: #1B3F94;
            text-align: right;
            color: #949494;
            font-size: 12px;
            padding-right: 16px;
            height: 22px;
            line-height: 20px;
        }

    .onoffswitch-switch {
        display: block;
        width: 28px;
        margin: 0px;
        background: #1B3F94;
        position: absolute;
        top: 0;
        bottom: 0;
        right: 82px;
        -moz-transition: all 0.3s ease-in 0s;
        -webkit-transition: all 0.3s ease-in 0s;
        -o-transition: all 0.3s ease-in 0s;
        transition: all 0.3s ease-in 0s;
    }

    .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
        margin-left: 0;
    }

    .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
        right: 0px;
    }

    .onoffswitch-inner.notMET:after, .onoffswitch-inner.notMET:before {
        content: "SLA Not Met";
    }

    .onoffswitch-inner.notMET:after, .onoffswitch-inner.opportunityLost:after {
        padding-right: 4px;
    }

    .onoffswitch-inner.notMET:before, .onoffswitch-inner.opportunityLost:before {
        padding-left: 4px;
    }

    .onoffswitch-inner.opportunityLost:after, .onoffswitch-inner.opportunityLost:before {
        content: "Opportunity Lost";
    }

    .opprtunityLostSwitch {
        width: 135px;
        left: 22%;
        margin-bottom: 14px;
    }

    .opportunityLost {
        right: 106px;
    }

    input[type="checkbox"] {
        height: 20px !important;
        width: 20px !important;
    }


    .TicketReportDetails_Window {
        width: 90% !important;
        top: 12% !important;
        left: 5% !important;
    }


    .FleetDetails_Window {
        width: 90% !important;
        top: 9% !important;
        left: 5% !important;
    }
</style>