@{
    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 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: 10px 0;}
		.block-performance-table tr th {background: #575757;color: #fff;font-size: 15px;padding: 6px 5px !important;font-weight: 500;}
		.block-performance-table tr td {font-size: 14px;}
		.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;
        }
	</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>Customer type</th>
					   <th></th>
	               </tr>
	            </thead>
	            <tbody>
	               <tr>
	                  <td> <div class="fright Response_RightPanel datesection">
          
            <span>From:</span>
            @(Html.Kendo().DatePicker()
              .Name("monthpickerFrom")
              .Format("dd-MMM-yyyy")
              .Value(new DateTime(DateTime.Now.Year, DateTime.Now.Month, 1))
              .HtmlAttributes(new { style = "width:150px", type = "text" })
        )
            <span>To:</span>
            @(Html.Kendo().DatePicker()
              .Name("monthpickerTo")
             .Format("dd-MMM-yyyy")
              .Value(DateTime.Now)
              .Max(DateTime.Now)
              .HtmlAttributes(new { style = "width:150px", type = "text" })
        )
						  </div>
       
					   </td>
	                 				   
	                  <td t id="tdRegion">
						  <select id="ddlRegion" multiple onchange="console.log(Array.from(this.selectedOptions).map(x=>x.value??x.text))" multiselect-hide-x="true">
						  <option value="1">East-1</option>
						  <option value="2">East-2</option>
						  <option value="3">North-1</option>
						  <option value="4">North-2</option>
						  <option value="5">South-1</option>
						  <option value="6">South-2</option>
						  <option value="7">VECV</option>
						  <option value="8">West-1</option>
						  <option value="9">West-2</option></select>  

					  </td>
	                  <td id="tdlDealer" >
						  <select id="ddlDealer" multiple onchange="console.log(Array.from(this.selectedOptions).map(x=>x.value??x.text))" multiselect-hide-x="true">
					<option value="1">1S1006</option><option value="2">1S1007</option><option value="3">1S1021</option><option value="4">1S1022</option><option value="5">1S1026</option><option value="6">1S1040</option><option value="7">1S1045</option><option value="8">1S1049</option><option value="9">1S1061</option><option value="10">1S1089</option><option value="11">1S1091</option><option value="12">1S1092</option><option value="13">1S1101</option><option value="14">1S1103</option><option value="15">1S1108</option><option value="16">1S1110</option><option value="17">1S1116</option><option value="18">1S1117</option><option value="19">1S1119</option><option value="20">1S1120</option><option value="21">1S1127</option><option value="22">1S1130</option><option value="23">1S1131</option><option value="24">1S1135</option><option value="25">1S1136</option><option value="26">1S1137</option><option value="27">1S1143</option><option value="28">1S1145</option><option value="29">1S1146</option><option value="30">1S1147</option><option value="31">1S1148</option><option value="32">1S1149</option><option value="33">1S1150</option><option value="34">1S1151</option><option value="35">1S1153</option><option value="36">1S1154</option><option value="37">1S1155</option><option value="38">1S1157</option><option value="39">1S1161</option><option value="40">1S1167</option><option value="41">1S1179</option><option value="42">1S1183</option><option value="43">1S1188</option><option value="44">1S1190</option><option value="45">1S1191</option><option value="46">1S1194</option><option value="47">1S1195</option><option value="48">1S1199</option><option value="49">1S1205</option><option value="50">1S1207</option><option value="51">1S1208</option><option value="52">1S1211</option><option value="53">1S1212</option><option value="54">1S1213</option><option value="55">1S1215</option><option value="56">1S1218</option><option value="57">1S1219</option><option value="58">1S1220</option><option value="59">1S1222</option><option value="60">1S1223</option><option value="61">1S1228</option><option value="62">1S1230</option><option value="63">1S1232</option><option value="64">1S1233</option><option value="65">1S2020</option><option value="66">1S2031</option><option value="67">1S2058</option><option value="68">1S2059</option><option value="69">1S2060</option><option value="70">1S2069</option><option value="71">1S2070</option><option value="72">1S2071</option><option value="73">1S2074</option><option value="74">1S2075</option><option value="75">1S2081</option><option value="76">1S2087</option><option value="77">1S2096</option><option value="78">1S2097</option><option value="79">1S2099</option><option value="80">1S2102</option><option value="81">1S2103</option><option value="82">1S2104</option><option value="83">1S2115</option><option value="84">1S2116</option><option value="85">1S2117</option><option value="86">1S2118</option><option value="87">1S2119</option><option value="88">1S2120</option><option value="89">1S2121</option><option value="90">1S2122</option><option value="91">1S2124</option><option value="92">1S2131</option><option value="93">1S2137</option><option value="94">1S2139</option><option value="95">1S2140</option><option value="96">1S2141</option><option value="97">1S2148</option><option value="98">1S2155</option><option value="99">1S2156</option><option value="100">1S2157</option><option value="101">1S2158</option><option value="102">1S2159</option><option value="103">1S2161</option><option value="104">1S2162</option><option value="105">1S2163</option><option value="106">1S2166</option><option value="107">1S2167</option><option value="108">1S2169</option><option value="109">1S2172</option><option value="110">1S2173</option><option value="111">1S2175</option><option value="112">1S2176</option><option value="113">1S2177</option><option value="114">1S2182</option><option value="115">1S2183</option><option value="116">1S2184</option><option value="117">1S2185</option><option value="118">1S2187</option><option value="119">1S2188</option><option value="120">1S2189</option><option value="121">1S2190</option><option value="122">1S2191</option><option value="123">1S2192</option><option value="124">1S2193</option><option value="125">1S2194</option><option value="126">1S2196</option><option value="127">1S2197</option><option value="128">1S2198</option><option value="129">1S2199</option><option value="130">1S2201</option><option value="131">1S2202</option><option value="132">1S2203</option><option value="133">1S2204</option><option value="134">1S2205</option><option value="135">1S2206</option><option value="136">1S2207</option><option value="137">1S2208</option><option value="138">1S2209</option><option value="139">1S2210</option><option value="140">1S2213</option><option value="141">1S2222</option><option value="142">1S2224</option><option value="143">1S2226</option><option value="144">1S3003</option><option value="145">1S3005</option><option value="146">1S3009</option><option value="147">1S3013</option><option value="148">1S3014</option><option value="149">1S3035</option><option value="150">1S3036</option><option value="151">1S3039</option><option value="152">1S3042</option><option value="153">1S3054</option><option value="154">1S3055</option><option value="155">1S3060</option><option value="156">1S3062</option><option value="157">1S3076</option><option value="158">1S3089</option><option value="159">1S3091</option><option value="160">1S3092</option><option value="161">1S3095</option><option value="162">1S3097</option><option value="163">1S3099</option><option value="164">1S3100</option><option value="165">1S3114</option><option value="166">1S3115</option><option value="167">1S3304</option><option value="168">1S3307</option><option value="169">1S3312</option><option value="170">1S3313</option><option value="171">1S3317</option><option value="172">1S3318</option><option value="173">1S3324</option><option value="174">1S3333</option><option value="175">1S3334</option><option value="176">1S3335</option><option value="177">1S3336</option><option value="178">1S3340</option><option value="179">1S3341</option><option value="180">1S3348</option><option value="181">1S3350</option><option value="182">1S3352</option><option value="183">1S3353</option><option value="184">1S3354</option><option value="185">1S3357</option><option value="186">1S3359</option><option value="187">1S3360</option><option value="188">1S3362</option><option value="189">1S3363</option><option value="190">1S3364</option><option value="191">1S3365</option><option value="192">1S3367</option><option value="193">1S3368</option><option value="194">1S3369</option><option value="195">1S3370</option><option value="196">1S3374</option><option value="197">1S3375</option><option value="198">1S3376</option><option value="199">1S3380</option><option value="200">1S3381</option><option value="201">1S3383</option><option value="202">1S3384</option><option value="203">1S3385</option><option value="204">1S3388</option><option value="205">1S3389</option><option value="206">1S3390</option><option value="207">1S3393</option><option value="208">1S4010</option><option value="209">1S4011</option><option value="210">1S4016</option><option value="211">1S4027</option><option value="212">1S4028</option><option value="213">1S4030</option><option value="214">1S4034</option><option value="215">1S4039</option><option value="216">1S4041</option><option value="217">1S4044</option><option value="218">1S4045</option><option value="219">1S4046</option><option value="220">1S4047</option><option value="221">1S4048</option><option value="222">1S4049</option><option value="223">1S4050</option><option value="224">1S4054</option><option value="225">1S4055</option><option value="226">1S4056</option><option value="227">1S4057</option><option value="228">1S4058</option><option value="229">1S4059</option><option value="230">1S4060</option><option value="231">1S4062</option><option value="232">1S4063</option><option value="233">1S4065</option><option value="234">1S4066</option><option value="235">1S4068</option><option value="236">1S4069</option><option value="237">1S4070</option><option value="238">1S4072</option><option value="239">1S4079</option><option value="240">1S4082</option><option value="241">1S4098</option><option value="242">1S4102</option><option value="243">1S4104</option><option value="244">1S4105</option><option value="245">1S4106</option><option value="246">1S4109</option><option value="247">1S4110</option><option value="248">1S4112</option><option value="249">1S4113</option><option value="250">1S4115</option><option value="251">1S4116</option><option value="252">1S5003</option><option value="253">1S5010</option><option value="254">1S5020</option><option value="255">1S5021</option><option value="256">1S5024</option><option value="257">1S5031</option><option value="258">1S5032</option><option value="259">1S5034</option><option value="260">1S5035</option><option value="261">1S5052</option><option value="262">1S5053</option><option value="263">1S5055</option><option value="264">1S5057</option><option value="265">1S5060</option><option value="266">1S5061</option><option value="267">1S5064</option><option value="268">1S5065</option><option value="269">1S5068</option><option value="270">1S5072</option><option value="271">1S6027</option><option value="272">1S6032</option><option value="273">1S6036</option><option value="274">1S6040</option><option value="275">1S6050</option><option value="276">1S6060</option><option value="277">1S6064</option><option value="278">1S6067</option><option value="279">1S6074</option><option value="280">1S6077</option><option value="281">1S6078</option><option value="282">1S6082</option><option value="283">1S6083</option><option value="284">1S6084</option><option value="285">1S6092</option><option value="286">1S6095</option><option value="287">1S6096</option><option value="288">1S6099</option><option value="289">1S6102</option><option value="290">1S6103</option><option value="291">1S6109</option><option value="292">1S6110</option><option value="293">1S6111</option><option value="294">1S6112</option><option value="295">1S6119</option><option value="296">1S6122</option><option value="297">1S6132</option><option value="298">1S6137</option><option value="299">1S6139</option><option value="300">1S6140</option><option value="301">1S6141</option><option value="302">1S6142</option><option value="303">1S6143</option><option value="304">1S6152</option><option value="305">1S6153</option><option value="306">1S6154</option><option value="307">1S6155</option><option value="308">1S6157</option><option value="309">1S6162</option><option value="310">1S6164</option><option value="311">1S6166</option><option value="312">1S6167</option><option value="313">1S6168</option><option value="314">1S6169</option><option value="315">1S6171</option><option value="316">1S6172</option><option value="317">1S6176</option><option value="318">1S6179</option><option value="319">1S6180</option><option value="320">1S6181</option><option value="321">1S6183</option><option value="322">1S6184</option><option value="323">1S6185</option><option value="324">1S6187</option><option value="325">1S6193</option><option value="326">1S7011</option><option value="327">1S7016</option><option value="328">1S7018</option><option value="329">1S7023</option><option value="330">1S7024</option><option value="331">1S7031</option><option value="332">1S7032</option><option value="333">1S7033</option><option value="334">1S7034</option><option value="335">1S7035</option><option value="336">1S7036</option><option value="337">1S7037</option><option value="338">1S7038</option><option value="339">1S7040</option><option value="340">1S7041</option><option value="341">1S7044</option><option value="342">1S7047</option><option value="343">1S7048</option><option value="344">1S7049</option><option value="345">1S7050</option><option value="346">1S7056</option><option value="347">1S7057</option><option value="348">1S9999</option
></select>
						  
						

					  </td>
	                  <td>
						  <select id="ddlVertical" multiple onchange="console.log(Array.from(this.selectedOptions).map(x=>x.value??x.text))" multiselect-hide-x="true">
						 
						  <option value="1">BUS</option><option value="2">HD</option><option value="3">LMD</option>
							  </select>
					  </td>
	                  @*<td>
						  <select id="ddlEmission" multiple>
						  <option >--Select emission type--</option></select>  

					  </td>*@
	                  <td id="tdEmission">
						  	 
        <select name="ddlEmission" id="ddlEmission" multiple onchange="console.log(Array.from(this.selectedOptions).map(x=>x.value??x.text))" multiselect-hide-x="true">
      @*<select name="ddlEmission" id="ddlEmission" multiple="" multiselect-search="true" multiselect-select-all="true" multiselect-max-items="3" onchange="console.log(this.selectedOptions)">
							  </select>*@
			 <option value="1">BS I</option>
			<option value="2">BS II</option>
			<option value="3">BS III</option>
			<option value="4">BS IV</option>
			<option value="5">BS VI</option>
			<option value="6">EURO III</option>
			<option value="7">EURO IV</option></select>
						  @*<select name="field2" id="field2" multiple="" multiselect-search="true" multiselect-select-all="true" multiselect-max-items="3" onchange="console.log(this.selectedOptions)">
							  </select>
						  <button class="btn btn-light" onclick="field2.innerHTML='<option value=1>New option 1</option><option selected value=2>New option 2</option><option value=3>New option 3</option>';field2.loadOptions()">Load new options</button>*@
						  @*<select id="ddlCustomer" multiple>
						  <option >--Select Customer type--</option>
						  <option >KAM</option>
						    <option >Non KAM</option></select>*@  
					  </td>
	               <td>
					    <select name="ddlCustomer" id="ddlCustomer" multiple onchange="console.log(Array.from(this.selectedOptions).map(x=>x.value??x.text))" multiselect-hide-x="true">
      
			  <option value="1">KAM</option>
			<option value="2">non KAM</option>
			 <asp:DropDownList ID="ddlCities" runat="server">
                </asp:DropDownList>
        </select>

						 
					  </td>
					   <td>

						   <input type="submit" class="button_blue CustomeBtn" value="Submit" onclick="showDashboardData()">
					   </td>
	               </tr>
	            </tbody>
	         </table>
	      </div>
	   <div class="dashboard-left" style="">
	      <h2>EOS Performance</h2>
	      <div class="block-performance">
	         <table class="block-performance-table" cellpadding="0" cellspacing="0">
	            <thead>
	               <tr>
	                  <th style="
	                     ">Total Breakdown Tickets</th>
	                  <th id="tdBreakDownTickets">4000</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">500</td>
	               </tr>
	               <tr>
	                  <td>Average VAN Reach Time (HH:MM)</td>
	                  <td id="tdAverageVanReachTime">2:50</td>
	               </tr>
	               <tr>
	                  <td>Average Resolution Time (HH:MM)</td>
	                  <td id="tdAverageResolutionTime">23:40</td>
	               </tr>
	               <tr>
	                  <td>C-Sat%</td>
	                  <td id="tdCSat">93.19%</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>With in 1 Hr</td>
	                  <td id="tdSLA1hrs">50%</td>
	               </tr>
	               <tr>
	                  <td>With in 2 Hr</td>
	                  <td id="tdSLA2hrs">70%</td>
	               </tr>
	               <tr>
	                  <td>With in 3 Hr</td>
	                  <td id="tdSLA3hrs">86%</td>
	               </tr>
	               <tr>
	                  <td>&gt;3 Hr</td>
	                  <td id="tdSLAMoreThan3hrs">14%</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>With in 12 Hr</td>
	                  <td id="tdSLA12hrs">50%</td>
	               </tr>
	               <tr>
	                  <td>With in 16 Hr</td>
	                  <td id="tdSLA16hrs">70%</td>
	               </tr>
	               <tr>
	                  <td>With in 18 Hr</td>
	                  <td id="tdSLA18hrs">86%</td>
	               </tr>
	               <tr>
	                  <td>&gt;18 Hr</td>
	                  <td id="tdSLAMoreThan18hrs">14%</td>
	               </tr>
	            </tbody>
	         </table>
	      </div>
	   </div>
	   <div class="dashboard-right">
	   
	      <div class="breakdown-status">
	   		<h2>Breakdown Ticket by Status: Total 400</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">3,450</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-progress text-white">
						<div class="card-body">
							<div class="d-flex">
								<h3 class="font-weight-semibold mb-0" id="tdInprogressTicketCount">>3,450</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-Closed text-white">
						<div class="card-body">	<div class="d-flex">
								<h3 class="font-weight-semibold mb-0" id="tdClosedTicketCount">3,450</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">3,450</h3>
								<span class="badge badge-dark badge-pill align-self-center ml-auto">New</span>
		                	</div>
						</div>
					</div>
				</div>
	   		</div>
	   		<div class="breakdown-status-block">
	   			<div>
					<!-- Members online -->
					<div class="card bg-danger text-white">
						<div class="card-body">
							<div class="d-flex">
								<h3 class="font-weight-semibold mb-0" id="tdDeclinedTicketCount">3,450</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">3,450</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">3,450</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">3,450</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">3,450</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/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 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>