@{
    ViewBag.Title = System.Configuration.ConfigurationManager.AppSettings["Title"];
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Evolve</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap" rel="stylesheet">
<!-- Global stylesheets -->
<style type="text/css">
    /*.dasboard-container{width: 1360px; margin:20px auto 0;display: table;font-family: 'Poppins', sans-serif;}*/
    .dasboard-container {
        margin: 0 auto !important;
        width: 1360px;
        display: table;
        font-family: 'Poppins', sans-serif;
    }

        .dasboard-container img {
            max-width: 100%;
        }

    .dashboard-left {
        width: 28%;
        float: left;
    }

    .dashboard-right {
        width: 65%;
        float: left;
        padding-left: 30px;
    }

    .block-performance {
        margin-bottom: 15px;
    }

    .block-performance-table {
        width: 100%;
        border: 1px solid #000;
        border-bottom: none;
        padding: 0;
        margin: 0;
    }

        .block-performance-table tr th, .block-performance-table tr td {
            padding: 5px;
            text-align: left;
            border-bottom: 1px solid #000;
        }

    .dashboard-inner-left {
        width: 40%;
        float: left;
    }

    .dashboard-inner-right {
        width: 56%;
        float: left;
        padding-left: 30px;
    }

    .dashboard-left {
        background: #f7f6f6ee;
        padding: 10px 15px;
    }

        .dashboard-left h2 {
            font-size: 20px;
            margin: 6px 0;
        }

    .block-performance-table tr th {
        background: #575757;
        color: #fff;
        font-size: 12px;
        padding: 6px 5px !important;
        font-weight: 500;
    }

    .block-performance-table tr td {
        font-size: 13px;
    }

    .block-performance-table tbody tr {
        background: #CED4EA;
    }

        .block-performance-table tbody tr:nth-of-type(odd) {
            background: #E8EBF5;
        }

    .dashboard-inner-left h2, .breakdown-status h2 {
        font-size: 20px;
        color: #000;
        margin-top: 10px;
    }

    .dashboard-inner-right h2 {
        font-size: 20px;
        color: #000;
        margin-top: 10px;
    }

    .block-performance-table tr td:first-child {
        border-right: 2px solid #fff;
    }

    .block-performance-table tr th:first-child {
        border-right: 2px solid #fff;
    }

    .block-performance-table.five-table tr th {
        border-right: 2px solid #fff;
        padding: 2px 5px !important;
        font-size: 13px;
    }

    .block-performance-table.five-table tr td {
        border-right: 2px solid #fff;
        padding: 2px 5px;
        font-size: 13px;
    }

        .block-performance-table.five-table tr td:last-child {
            border-right: 0;
        }

    .block-performance-table.five-table tr th:last-child {
        border-right: 0;
    }

    .breakdown-status-block {
        width: 14.2%;
        margin-right: 15px;
        display: inline-block;
    }

    .breakdown-status-block-1 {
        width: 100%;
        margin-right: 9px;
        display: inline-block;
        margin-bottom: 12px;
    }

    .breakdown-status-block:last-child {
        margin-right: 0;
    }

    .breakdown-status-block-1:last-child {
        margin-right: 0;
    }

    .breakdown-status-block .card {
        padding: 4px 8px;
        color: #fff;
    }

    .breakdown-status-block-1 .card {
        padding: 8px;
        color: #fff;
    }

    .breakdown-status-block .card h3 {
        font-size: 20px;
        margin: 4px 0 0;
    }

    .breakdown-status-block .card span {
        font-size: 16px;
    }

    .breakdown-status-block-1 h3 {
        margin: 10px 0 10px;
        display: inline-block;
        width: 50%;
        font-size: 20px;
        font-weight: 500;
        vertical-align: middle;
    }

    .breakdown-status-block-1 span {
        width: 48%;
        display: inline-block;
        text-align: right;
        vertical-align: middle;
        font-size: 16px;
    }

    .bg-teal {
        background-color: /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#173b89+0,1b3f8d+6,1c4191+7,234a99+20,204e9c+21,2f63b6+49,2d65b8+50,3169bc+56,306dc0+57,3a7cd0+77,387ed3+78,3f89de+91,408ae3+92,4090e7+98,4491e9+100 */
        background: #173b89; /* Old browsers */
        background: -moz-linear-gradient(top, #173b89 0%, #1b3f8d 6%, #1c4191 7%, #234a99 20%, #204e9c 21%, #2f63b6 49%, #2d65b8 50%, #3169bc 56%, #306dc0 57%, #3a7cd0 77%, #387ed3 78%, #3f89de 91%, #408ae3 92%, #4090e7 98%, #4491e9 100%); /* FF3.6-15 */
        background: -webkit-linear-gradient(top, #173b89 0%,#1b3f8d 6%,#1c4191 7%,#234a99 20%,#204e9c 21%,#2f63b6 49%,#2d65b8 50%,#3169bc 56%,#306dc0 57%,#3a7cd0 77%,#387ed3 78%,#3f89de 91%,#408ae3 92%,#4090e7 98%,#4491e9 100%); /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(to bottom, #173b89 0%,#1b3f8d 6%,#1c4191 7%,#234a99 20%,#204e9c 21%,#2f63b6 49%,#2d65b8 50%,#3169bc 56%,#306dc0 57%,#3a7cd0 77%,#387ed3 78%,#3f89de 91%,#408ae3 92%,#4090e7 98%,#4491e9 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#173b89', endColorstr='#4491e9',GradientType=0 ); /* IE6-9 */
        ;
    }

    .bg-assigned {
        background: /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#2d6363+0,2b6664+6,2a6768+7,276b6a+13,266e6d+14,247674+27,227879+28,1b7f7d+42,1b8183+42,188484+49,168785+50,158986+56,148c8b+57,128e8c+63,10908f+64,109592+70,0e9696+71,0d9998+77,0b9b9b+78,07a19f+85,05a4a0+91,05a5a5+92,02a8a6+98,01abaa+99,01abaa+100 */
        background: #2d6363; /* Old browsers */
        background: -moz-linear-gradient(top, #2d6363 0%, #2b6664 6%, #2a6768 7%, #276b6a 13%, #266e6d 14%, #247674 27%, #227879 28%, #1b7f7d 42%, #1b8183 42%, #188484 49%, #168785 50%, #158986 56%, #148c8b 57%, #128e8c 63%, #10908f 64%, #109592 70%, #0e9696 71%, #0d9998 77%, #0b9b9b 78%, #07a19f 85%, #05a4a0 91%, #05a5a5 92%, #02a8a6 98%, #01abaa 99%, #01abaa 100%); /* FF3.6-15 */
        background: -webkit-linear-gradient(top, #2d6363 0%,#2b6664 6%,#2a6768 7%,#276b6a 13%,#266e6d 14%,#247674 27%,#227879 28%,#1b7f7d 42%,#1b8183 42%,#188484 49%,#168785 50%,#158986 56%,#148c8b 57%,#128e8c 63%,#10908f 64%,#109592 70%,#0e9696 71%,#0d9998 77%,#0b9b9b 78%,#07a19f 85%,#05a4a0 91%,#05a5a5 92%,#02a8a6 98%,#01abaa 99%,#01abaa 100%); /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(to bottom, #2d6363 0%,#2b6664 6%,#2a6768 7%,#276b6a 13%,#266e6d 14%,#247674 27%,#227879 28%,#1b7f7d 42%,#1b8183 42%,#188484 49%,#168785 50%,#158986 56%,#148c8b 57%,#128e8c 63%,#10908f 64%,#109592 70%,#0e9696 71%,#0d9998 77%,#0b9b9b 78%,#07a19f 85%,#05a4a0 91%,#05a5a5 92%,#02a8a6 98%,#01abaa 99%,#01abaa 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2d6363', endColorstr='#01abaa',GradientType=0 ); /* IE6-9 */
        ;
    }

    .bg-progress {
        background: /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f9c667+0,f79621+100;Orange+3D+%234 */
        background: #f9c667; /* Old browsers */
        background: -moz-linear-gradient(top, #f9c667 0%, #f79621 100%); /* FF3.6-15 */
        background: -webkit-linear-gradient(top, #f9c667 0%,#f79621 100%); /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(to bottom, #f9c667 0%,#f79621 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9c667', endColorstr='#f79621',GradientType=0 ); /* IE6-9 */
        ;
    }

    .bg-Closed {
        background: /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#2aa91a+0,2faa1c+6,33aa1c+7,35ac1e+13,3cab1e+19,3eae1e+27,42ae1c+28,48af1f+34,48b01b+36,4daf1c+41,50b21d+49,55b21c+50,56b31d+56,5ab41e+57,5fb31f+62,60b51c+64,61b61d+70,66b71c+71,6db71c+78,6fb91c+86,74b91e+91,78b91d+92,7abb1f+98,7ebb1f+100 */
        background: #2aa91a; /* Old browsers */
        background: -moz-linear-gradient(top, #2aa91a 0%, #2faa1c 6%, #33aa1c 7%, #35ac1e 13%, #3cab1e 19%, #3eae1e 27%, #42ae1c 28%, #48af1f 34%, #48b01b 36%, #4daf1c 41%, #50b21d 49%, #55b21c 50%, #56b31d 56%, #5ab41e 57%, #5fb31f 62%, #60b51c 64%, #61b61d 70%, #66b71c 71%, #6db71c 78%, #6fb91c 86%, #74b91e 91%, #78b91d 92%, #7abb1f 98%, #7ebb1f 100%); /* FF3.6-15 */
        background: -webkit-linear-gradient(top, #2aa91a 0%,#2faa1c 6%,#33aa1c 7%,#35ac1e 13%,#3cab1e 19%,#3eae1e 27%,#42ae1c 28%,#48af1f 34%,#48b01b 36%,#4daf1c 41%,#50b21d 49%,#55b21c 50%,#56b31d 56%,#5ab41e 57%,#5fb31f 62%,#60b51c 64%,#61b61d 70%,#66b71c 71%,#6db71c 78%,#6fb91c 86%,#74b91e 91%,#78b91d 92%,#7abb1f 98%,#7ebb1f 100%); /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(to bottom, #2aa91a 0%,#2faa1c 6%,#33aa1c 7%,#35ac1e 13%,#3cab1e 19%,#3eae1e 27%,#42ae1c 28%,#48af1f 34%,#48b01b 36%,#4daf1c 41%,#50b21d 49%,#55b21c 50%,#56b31d 56%,#5ab41e 57%,#5fb31f 62%,#60b51c 64%,#61b61d 70%,#66b71c 71%,#6db71c 78%,#6fb91c 86%,#74b91e 91%,#78b91d 92%,#7abb1f 98%,#7ebb1f 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2aa91a', endColorstr='#7ebb1f',GradientType=0 ); /* IE6-9 */
        ;
    }

    .bg-danger {
        background-color: /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#c8251c+0,ca271e+6,cc2c20+7,d83828+27,db3f29+35,e44c34+55,e75035+57,ea5338+62,ea5535+65,ee5939+69,f15c3b+77,f3613c+78,f4653d+85,f96a42+91,f86b40+93,fe7146+100 */
        background: #c8251c; /* Old browsers */
        background: -moz-linear-gradient(top, #c8251c 0%, #ca271e 6%, #cc2c20 7%, #d83828 27%, #db3f29 35%, #e44c34 55%, #e75035 57%, #ea5338 62%, #ea5535 65%, #ee5939 69%, #f15c3b 77%, #f3613c 78%, #f4653d 85%, #f96a42 91%, #f86b40 93%, #fe7146 100%); /* FF3.6-15 */
        background: -webkit-linear-gradient(top, #c8251c 0%,#ca271e 6%,#cc2c20 7%,#d83828 27%,#db3f29 35%,#e44c34 55%,#e75035 57%,#ea5338 62%,#ea5535 65%,#ee5939 69%,#f15c3b 77%,#f3613c 78%,#f4653d 85%,#f96a42 91%,#f86b40 93%,#fe7146 100%); /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(to bottom, #c8251c 0%,#ca271e 6%,#cc2c20 7%,#d83828 27%,#db3f29 35%,#e44c34 55%,#e75035 57%,#ea5338 62%,#ea5535 65%,#ee5939 69%,#f15c3b 77%,#f3613c 78%,#f4653d 85%,#f96a42 91%,#f86b40 93%,#fe7146 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c8251c', endColorstr='#fe7146',GradientType=0 ); /* IE6-9 */
        ;
    }

    .fs-15 {
        font-size: 15px;
    }

    .hidden {
        display: none;
    }

    .visible {
        display: block;
    }

    .div {
        border: 1px solid black;
        width: 100px;
    }

    #sel {
        width: 100%;
    }

    .arrow {
        float: right;
    }

    .datesection span.k-datepicker {
        width: 120px !important;
        background-color: #E8EBF5 !important;
    }

    .datesection span {
        display: inline-block;
    }

    .fright.Response_RightPanel span {
        color: #555;
    }


    .dashboard {
        overflow-x: auto;
        overflow-y: auto;
    }

    .k-block, .k-header, .k-grid-header, .k-toolbar, .k-grouping-header, .k-pager-wrap, .k-button, .k-draghandle {
        /*background:url('Default/over1.png')repeat-x scroll 50% 30% #5C9CCC;*/
        color: #000;
        /*background-color:#4a8bc2;*/
        background-color: #dedede !important; /*navi*/
        /*background-color:#1b3f94 !important;*/ /*navi*/
        /*background-color:#1b3f94;
    background-color:#ee2e22;*/
    }
</style>
<!-- /global stylesheets -->


<section class="dasboard-container">
    <div class="block-performance">
        <table class="block-performance-table five-table" cellpadding="0" cellspacing="0">
            <thead>
                <tr>
                    <th>Date</th>
                    <th>Region</th>
                    <th>Dealer </th>
                    <th>Vertical</th>
                    <th>Emission Norms</th>
                    <th>Product Variant</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td style="width:23%;">
                        <div class="fright Response_RightPanel datesection">

                            <span>From:</span>

                            @(Html.Kendo().DatePicker()
                                          .Name("monthpickerFrom")
                                          .Start(CalendarView.Month)
                                          .Depth(CalendarView.Month)
                                          .Format(System.Configuration.ConfigurationManager.AppSettings["dateFormat"])
                                          .Value(new DateTime(DateTime.Now.Year, DateTime.Now.Month, 1))
                                          .Max(DateTime.Now)
                                          .HtmlAttributes(new { style = "width:150px", type = "text" })
                                          .Events(e =>
                                             {
                                                 // e.Change("onChangeDateSelection");
                                             })
                                         )
                            @(Html.Kendo().DatePicker()
                                          .Name("monthpickerTo")
                                          .Start(CalendarView.Month)
                                          .Depth(CalendarView.Month)
                                          .Format(System.Configuration.ConfigurationManager.AppSettings["dateFormat"])
                                          .Value(new DateTime(DateTime.Now.Year, DateTime.Now.Month,DateTime.Now.Day))
                                          .Max(DateTime.Now)
                                          .HtmlAttributes(new { style = "width:150px", type = "text" })
                                          .Events(e =>
                                             {
                                                 // e.Change("onChangeDateSelection");
                                             })
                                         )

                        </div>

                    </td>

                    <td t id="tdRegion">


                        <select id="ddlRegion" name="Region" multiple="multiple" onchange="onRegionChange();" data-placeholder="-Select-">
                        </select>
                    </td>
                    <td id="tdlDealer">
                        <select id="ddlDealer" name="Dealer" multiple="multiple" data-placeholder="-Select-">
                        </select>



                    </td>
                    <td>

                        <select id="ddlVertical" name="ddlVertical" multiple="multiple" data-placeholder="-Select-">
                        </select>
                    </td>

                    <td id="tdEmission">


                        <select id="ddlEmission" name="ddlEmission" multiple="multiple" data-placeholder="-Select-">
                        </select>
                    </td>
                    <td id="tdProdcutVariant" style="width:12%;">

                        <select id="ddproductVariant" name="ddproductVariant" onchange="getVehicleModelTaggingfilter();">
                            <option value="Select" selected>Select</option>
                            <option value="Diesel">Diesel</option>
                            <option value="ELECTRIC">ELECTRIC</option>
                            <option value="CNG">CNG</option>
                        </select>

                    </td>


                    <td>

                        <input type="submit" class="button_blue CustomeBtn" value="Submit" onclick="showDashboardData()">
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="dashboard-left" style="">

        <div class="block-performance">
            <table class="block-performance-table" cellpadding="0" cellspacing="0">
                <thead>
                    <tr>
                        <th style="
	                     ">Total Breakdown Tickets</th>
                        <th id="tdBreakDownTickets">-</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Open Tickets</td>
                        <td id="tdOpenTickets">-</td>
                    </tr>
                    <tr>
                        <td>Open Tickets&gt; 24 Hrs</td>
                        <td id="tdOpenTicket24hours">-</td>
                    </tr>
                    <tr>
                        <td>Average VAN Reach Time (HH:MM)</td>
                        <td id="tdAverageVanReachTime">-</td>
                    </tr>
                    <tr>
                        <td>Average Resolution Time (HH:MM)</td>
                        <td id="tdAverageResolutionTime">-</td>
                    </tr>
                    <tr>
                        <td>C-Sat%</td>
                        <td id="tdCSat">-</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="block-performance">
            <table class="block-performance-table" cellpadding="0" cellspacing="0">
                <thead>
                    <tr>
                        <th>SLA ( VAN Reach Time)</th>
                        <th>%</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Within 1 Hr</td>
                        <td id="tdSLA1hrs">-</td>
                    </tr>
                    <tr>
                        <td>Within 2 Hr</td>
                        <td id="tdSLA2hrs">-</td>
                    </tr>
                    <tr>
                        <td>Within 3 Hr</td>
                        <td id="tdSLA3hrs">-</td>
                    </tr>
                    <tr>
                        <td>&gt;3 Hr</td>
                        <td id="tdSLAMoreThan3hrs">-</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="block-performance">
            <table class="block-performance-table" cellpadding="0" cellspacing="0">
                <thead>
                    <tr>
                        <th>SLA ( Resolution Time)</th>
                        <th>%</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Within 1 Hr</td>
                        <td id="tdSLARes1hrs">50%</td>
                    </tr>
                    <tr>
                        <td>Within 3 Hr</td>
                        <td id="tdSLARes3hrs">50%</td>
                    </tr>
                    <tr>
                        <td>Within 5 Hr</td>
                        <td id="tdSLA5hrs">50%</td>
                    </tr>
                    <tr>
                        <td>Within 7 Hr</td>
                        <td id="tdSLA7hrs">50%</td>
                    </tr>
                    <tr>
                        <td>Within 10 Hr</td>
                        <td id="tdSLA10hrs">50%</td>
                    </tr>

                    <tr>
                        <td>Within 12 Hr</td>
                        <td id="tdSLA12hrs">-</td>
                    </tr>
                    <tr>
                        <td>Within 15 Hr</td>
                        <td id="tdSLA16hrs">-</td>
                    </tr>
                    <tr>
                        <td>Within 18 Hr</td>
                        <td id="tdSLA18hrs">-</td>
                    </tr>
                    <tr>
                        <td>&gt;18 Hr</td>
                        <td id="tdSLAMoreThan18hrs">-</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <div class="dashboard-right">

        <div class="breakdown-status">
            <h2>Breakdown Ticket by Status: Total <span id="spntotalbreakdown">-</span></h2>

            <div class="breakdown-status-block">
                <div>
                    <!-- Members online -->
                    <div class="card bg-assigned text-white">
                        <div class="card-body">
                            <div class="d-flex">
                                <h3 class="font-weight-semibold mb-0" id="tdAssignedTicketCount">-</h3>
                                <span class="badge badge-dark badge-pill align-self-center ml-auto">Assigned</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="breakdown-status-block">
                <div>
                    <!-- Members online -->
                    <div class="card bg-teal text-white">
                        <div class="card-body">
                            <div class="d-flex">
                                <h3 class="font-weight-semibold mb-0" id="tdTripStartCount">-</h3>
                                <span class="badge badge-dark badge-pill align-self-center ml-auto">Trip start</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="breakdown-status-block">
                <div>
                    <!-- Members online -->
                    <div class="card bg-progress text-white">
                        <div class="card-body">
                            <div class="d-flex">
                                <h3 class="font-weight-semibold mb-0" id="tdInprogressTicketCount">-</h3>
                                <span class="badge badge-dark badge-pill align-self-center ml-auto">In progress</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="breakdown-status-block">
                <div>
                    <!-- Members online -->
                    <div class="card bg-teal text-white">
                        <div class="card-body">
                            <div class="d-flex">
                                <h3 class="font-weight-semibold mb-0" id="tdPreclosureCount">-</h3>
                                <span class="badge badge-dark badge-pill align-self-center ml-auto">Preclosure</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="breakdown-status-block">
                <div>
                    <!-- Members online -->
                    <div class="card bg-Closed text-white">
                        <div class="card-body">
                            <div class="d-flex">
                                <h3 class="font-weight-semibold mb-0" id="tdClosedTicketCount">-</h3>
                                <span class="badge badge-dark badge-pill align-self-center ml-auto">Closed</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="breakdown-status-block">
                <div>
                    <!-- Members online -->
                    <div class="card bg-teal text-white">
                        <div class="card-body">
                            <div class="d-flex">
                                <h3 class="font-weight-semibold mb-0" id="tdopplostTicketCount">-</h3>
                                <span class="badge badge-dark badge-pill align-self-center ml-auto">Opp Lost</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            @*<div class="breakdown-status-block">
                    <div>

                        <div class="card bg-danger text-white">
                            <div class="card-body">
                                <div class="d-flex">
                                    <h3 class="font-weight-semibold mb-0" id="tdDeclinedTicketCount">-</h3>
                                    <span class="badge badge-dark badge-pill align-self-center ml-auto">Declined</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>*@
        </div>
        <div class="dasboard-inner-section">
            <div class="dashboard-inner-left">
                <div class="block-performance">
                    <h2>Tab Status</h2>
                    <div>
                        <div class="breakdown-status-block-1">
                            <div>
                                <!-- Members online -->
                                <div class="card bg-teal text-white">
                                    <div class="card-body">
                                        <div class="d-flex">
                                            <h3 class="font-weight-semibold mb-0" id="tdActiveCount">-</h3>
                                            <span class="badge fs-15 badge-dark badge-pill align-self-center ml-auto">Total Active TABs</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="breakdown-status-block-1">
                            <div>
                                <!-- Members online -->
                                <div class="card bg-assigned text-white">
                                    <div class="card-body">
                                        <div class="d-flex">
                                            <h3 class="font-weight-semibold mb-0" id="tdTABsBusyCount">-</h3>
                                            <span class="badge fs-15 badge-dark badge-pill align-self-center ml-auto">TABs Busy</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div>
                        <div class="breakdown-status-block-1">
                            <div>
                                <!-- Members online -->
                                <div class="card bg-progress text-white">
                                    <div class="card-body">
                                        <div class="d-flex">
                                            <h3 class="font-weight-semibold mb-0" id="tdTABFreeCount">-</h3>
                                            <span class="badge fs-15 badge-dark badge-pill align-self-center ml-auto">TABs Free</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="breakdown-status-block-1">
                            <div>
                                <!-- Members online -->
                                <div class="card bg-Closed text-white">
                                    <div class="card-body">
                                        <div class="d-flex">
                                            <h3 class="font-weight-semibold mb-0" id="tdTABsOfflineMorethan7Days">-</h3>
                                            <span class="badge fs-15 badge-dark badge-pill align-self-center ml-auto">TABs offline > 7 Days</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="dashboard-inner-right">
                <div class="block-performance">
                    <h2>Top Dealer- Ticket count</h2>
                    <table class="block-performance-table five-table" cellpadding="0" cellspacing="0">
                        <thead>
                            <tr>
                                <th>Dealer Name</th>
                                <th>Region</th>
                                <th width="25%" nowrap="">Ticket Count</th>
                            </tr>
                        </thead>
                        <tbody id="tdealer">
                            <tr>
                                <td>Dealer 1</td>
                                <td>North-1</td>
                                <td>40</td>
                            </tr>
                            <tr>
                                <td>Dealer 2</td>
                                <td>North-1</td>
                                <td>40</td>
                            </tr>
                            <tr>
                                <td>Dealer 3</td>
                                <td>North-1</td>
                                <td>40</td>
                            </tr>
                            <tr>
                                <td>Dealer 4</td>
                                <td>North-1</td>
                                <td>40</td>
                            </tr>
                            <tr>
                                <td>Dealer 5</td>
                                <td>North-1</td>
                                <td>40</td>
                            </tr>
                            <tr>
                                <td>Dealer 6</td>
                                <td>North-1</td>
                                <td>40</td>
                            </tr>
                            <tr>
                                <td>Dealer 7</td>
                                <td>North-1</td>
                                <td>40</td>
                            </tr>
                            <tr>
                                <td>Dealer 8</td>
                                <td>North-1</td>
                                <td>40</td>
                            </tr>
                            <tr>
                                <td>Dealer 9</td>
                                <td>North-1</td>
                                <td>40</td>
                            </tr>
                            <tr>
                                <td>Dealer 10</td>
                                <td>North-1</td>
                                <td>40</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <div class="dashboard-graph-section" style="clear: both;">
            <div id="barchart_material"></div>
        </div>

    </div>
</section>
@Scripts.Render("~/bundles/jsDashboard")

@*<link href="~/Content/kendo/kendo.dashboard.min.css" rel="stylesheet" />
    <link href="~/Content/css/jquery.alerts.css" rel="stylesheet" />*@
<script src="~/Scripts/jquery.ui.draggable.js"></script>
<script src="~/Scripts/jquery.alerts.js"></script>
<script type="text/javascript" src="~/Scripts/loader.js"></script>
<script type="text/javascript" src="~/Scripts/bootstrap.min.js"></script>


@*<script src="@Url.Content("~/Scripts/jquery.easing.1.3.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.cycle.all.js")" type="text/javascript"></script>
    <script src="~/Scripts/gradientTransition.js"></script>
    <script src="../../Scripts/Home/Dashboard.js"></script>*@
<script type="text/javascript">

    var securityToken = '@ViewBag.SecurityToken';
    var UtcMinutes = '@ViewBag.UtcMinutes';
    var userId = '@ViewBag.Userid';
    var userRole = '@ViewBag.UserRole';
    var dashboardType = 'all';
	//refreshDashboard();
</script>
<script type="text/javascript">
    google.charts.load('current', { 'packages': ['bar'] });
    // google.charts.setOnLoadCallback(drawStuff);
    function showSelect(classname) {
        document.getElementById('sel').className = classname;
    }

</script>
@*<script src="~/Scripts/multiselect-dropdown.js"></script>*@