@extends('coaching.layout.master')

@section('content')

<div class="app-content  my-3 my-md-5">
				<div class="side-app">
					<div class="page-header">
						<ol class="breadcrumb">
							<li class="breadcrumb-item" aria-current="page">Analytics</li>
							<li class="breadcrumb-item" aria-current="page">Sales & Refund</li>
						</ol>
					</div>
					<!-- MAIN BODY CONTENT -->
					 <div class="top-header mb-5">
						 <h1 class="m-0">Analytics</h1>
						 <div class="filter-group">
								<select class="form-control input-sm sales_type" name="sales_type">
									<option value="1" selected="">Sales</option>
									<option value="2" >Refund</option>
								</select>
							</div>
					 </div>
		           
		            
		            <div class="row ">
		              <div class="col-xl-4 col-lg-6 col-md-12">
		                <div class="card">
		                  <div class="card-body small-card">
		                    <h5 class="font-medium todays_sales">Todays Sales</h5>
		                    <div class="counter">
		                      <svg
		                        id="small-card-icon"
		                        class="red"
		                        xmlns="http://www.w3.org/2000/svg"
		                        width="24"
		                        height="24"
		                        viewBox="0 0 24 24"
		                      >
		                        <g transform="translate(21090 -1397)">
		                          <rect
		                            width="24"
		                            height="24"
		                            transform="translate(-21090 1397)"
		                            fill="none"
		                          />
		                          <path
		                            d="M14.222,18H1.778A1.791,1.791,0,0,1,0,16.2V3.6A1.792,1.792,0,0,1,1.778,1.8H5.494a2.646,2.646,0,0,1,5.014,0h3.715A1.791,1.791,0,0,1,16,3.6V16.2A1.791,1.791,0,0,1,14.222,18ZM4.445,12.6a.9.9,0,0,0,0,1.8H8.89a.9.9,0,0,0,0-1.8Zm0-3.6a.9.9,0,0,0,0,1.8h7.111a.9.9,0,0,0,0-1.8Zm0-3.6a.9.9,0,0,0,0,1.8h7.111a.9.9,0,0,0,0-1.8ZM8,1.8a.9.9,0,1,0,.889.9A.9.9,0,0,0,8,1.8Z"
		                            transform="translate(-21086 1400)"
		                            fill=""
		                          />
		                        </g>
		                      </svg>
		                      <span class="todays_sales_span" ><i class="fa fa-rupee"></i>0</span>
		                    </div>
		                    <svg
		                      id="small-card-bg-icon"
		                      class="red"
		                      xmlns="http://www.w3.org/2000/svg"
		                      width="24"
		                      height="24"
		                      viewBox="0 0 24 24"
		                    >
		                      <g transform="translate(21090 -1397)">
		                        <rect
		                          width="24"
		                          height="24"
		                          transform="translate(-21090 1397)"
		                          fill="none"
		                        />
		                        <path
		                          d="M14.222,18H1.778A1.791,1.791,0,0,1,0,16.2V3.6A1.792,1.792,0,0,1,1.778,1.8H5.494a2.646,2.646,0,0,1,5.014,0h3.715A1.791,1.791,0,0,1,16,3.6V16.2A1.791,1.791,0,0,1,14.222,18ZM4.445,12.6a.9.9,0,0,0,0,1.8H8.89a.9.9,0,0,0,0-1.8Zm0-3.6a.9.9,0,0,0,0,1.8h7.111a.9.9,0,0,0,0-1.8Zm0-3.6a.9.9,0,0,0,0,1.8h7.111a.9.9,0,0,0,0-1.8ZM8,1.8a.9.9,0,1,0,.889.9A.9.9,0,0,0,8,1.8Z"
		                          transform="translate(-21086 1400)"
		                          fill=""
		                        />
		                      </g>
		                    </svg>
		                  </div>
		                </div>
		              </div>

		              <div class="col-xl-4 col-lg-6 col-md-12">
		                <div class="card">
		                  <div class="card-body small-card">
		                    <h5 class="font-medium seven_sales">
		                      Total Sales In Last 7 Days
		                    </h5>
		                    <div class="counter">
		                      <svg
		                        id="small-card-icon"
		                        class="orange"
		                        xmlns="http://www.w3.org/2000/svg"
		                        width="24"
		                        height="24"
		                        viewBox="0 0 24 24"
		                      >
		                        <g transform="translate(21090 -1397)">
		                          <rect
		                            width="24"
		                            height="24"
		                            transform="translate(-21090 1397)"
		                            fill="none"
		                          />
		                          <path
		                            d="M14.222,18H1.778A1.791,1.791,0,0,1,0,16.2V3.6A1.792,1.792,0,0,1,1.778,1.8H5.494a2.646,2.646,0,0,1,5.014,0h3.715A1.791,1.791,0,0,1,16,3.6V16.2A1.791,1.791,0,0,1,14.222,18ZM4.445,12.6a.9.9,0,0,0,0,1.8H8.89a.9.9,0,0,0,0-1.8Zm0-3.6a.9.9,0,0,0,0,1.8h7.111a.9.9,0,0,0,0-1.8Zm0-3.6a.9.9,0,0,0,0,1.8h7.111a.9.9,0,0,0,0-1.8ZM8,1.8a.9.9,0,1,0,.889.9A.9.9,0,0,0,8,1.8Z"
		                            transform="translate(-21086 1400)"
		                            fill=""
		                          />
		                        </g>
		                      </svg>
		                      <span class="seven_sales_span"><i class="fa fa-rupee"></i>0</span>
		                    </div>
		                    <svg
		                      id="small-card-bg-icon"
		                      class="orange"
		                      xmlns="http://www.w3.org/2000/svg"
		                      width="24"
		                      height="24"
		                      viewBox="0 0 24 24"
		                    >
		                      <g transform="translate(21090 -1397)">
		                        <rect
		                          width="24"
		                          height="24"
		                          transform="translate(-21090 1397)"
		                          fill="none"
		                        />
		                        <path
		                          d="M14.222,18H1.778A1.791,1.791,0,0,1,0,16.2V3.6A1.792,1.792,0,0,1,1.778,1.8H5.494a2.646,2.646,0,0,1,5.014,0h3.715A1.791,1.791,0,0,1,16,3.6V16.2A1.791,1.791,0,0,1,14.222,18ZM4.445,12.6a.9.9,0,0,0,0,1.8H8.89a.9.9,0,0,0,0-1.8Zm0-3.6a.9.9,0,0,0,0,1.8h7.111a.9.9,0,0,0,0-1.8Zm0-3.6a.9.9,0,0,0,0,1.8h7.111a.9.9,0,0,0,0-1.8ZM8,1.8a.9.9,0,1,0,.889.9A.9.9,0,0,0,8,1.8Z"
		                          transform="translate(-21086 1400)"
		                          fill=""
		                        />
		                      </g>
		                    </svg>
		                  </div>
		                </div>
		              </div>

		              <div class="col-xl-4 col-lg-6 col-md-12">
		                <div class="card">
		                  <div class="card-body small-card">
		                    <h5 class="font-medium thirty_sales">
		                      Total Sales In Last Month
		                    </h5>
		                    <div class="counter">
		                      <svg
		                        id="small-card-icon"
		                        class="blue"
		                        xmlns="http://www.w3.org/2000/svg"
		                        width="24"
		                        height="24"
		                        viewBox="0 0 24 24"
		                      >
		                        <g transform="translate(21090 -1397)">
		                          <rect
		                            width="24"
		                            height="24"
		                            transform="translate(-21090 1397)"
		                            fill="none"
		                          />
		                          <path
		                            d="M14.222,18H1.778A1.791,1.791,0,0,1,0,16.2V3.6A1.792,1.792,0,0,1,1.778,1.8H5.494a2.646,2.646,0,0,1,5.014,0h3.715A1.791,1.791,0,0,1,16,3.6V16.2A1.791,1.791,0,0,1,14.222,18ZM4.445,12.6a.9.9,0,0,0,0,1.8H8.89a.9.9,0,0,0,0-1.8Zm0-3.6a.9.9,0,0,0,0,1.8h7.111a.9.9,0,0,0,0-1.8Zm0-3.6a.9.9,0,0,0,0,1.8h7.111a.9.9,0,0,0,0-1.8ZM8,1.8a.9.9,0,1,0,.889.9A.9.9,0,0,0,8,1.8Z"
		                            transform="translate(-21086 1400)"
		                            fill=""
		                          />
		                        </g>
		                      </svg>
		                      <span class="thirty_sales_span"><i class="fa fa-rupee"></i>0</span>
		                    </div>
		                    <svg
		                      id="small-card-bg-icon"
		                      class="blue"
		                      xmlns="http://www.w3.org/2000/svg"
		                      width="24"
		                      height="24"
		                      viewBox="0 0 24 24"
		                    >
		                      <g transform="translate(21090 -1397)">
		                        <rect
		                          width="24"
		                          height="24"
		                          transform="translate(-21090 1397)"
		                          fill="none"
		                        />
		                        <path
		                          d="M14.222,18H1.778A1.791,1.791,0,0,1,0,16.2V3.6A1.792,1.792,0,0,1,1.778,1.8H5.494a2.646,2.646,0,0,1,5.014,0h3.715A1.791,1.791,0,0,1,16,3.6V16.2A1.791,1.791,0,0,1,14.222,18ZM4.445,12.6a.9.9,0,0,0,0,1.8H8.89a.9.9,0,0,0,0-1.8Zm0-3.6a.9.9,0,0,0,0,1.8h7.111a.9.9,0,0,0,0-1.8Zm0-3.6a.9.9,0,0,0,0,1.8h7.111a.9.9,0,0,0,0-1.8ZM8,1.8a.9.9,0,1,0,.889.9A.9.9,0,0,0,8,1.8Z"
		                          transform="translate(-21086 1400)"
		                          fill=""
		                        />
		                      </g>
		                    </svg>
		                  </div>
		                </div>
		              </div>
		             
		              <div class="col-xl-4 col-lg-6 col-md-12 top_product">
		                <div class="card">
		                  <div class="card-body small-card">
		                    <h5 class="font-medium">
		                      Top products Of The Day
		                    </h5>
		                    <div class="counter">
		                      <svg
		                        id="small-card-icon"
		                        class="blue"
		                        xmlns="http://www.w3.org/2000/svg"
		                        width="24"
		                        height="24"
		                        viewBox="0 0 24 24"
		                      >
		                        <g transform="translate(21090 -1397)">
		                          <rect
		                            width="24"
		                            height="24"
		                            transform="translate(-21090 1397)"
		                            fill="none"
		                          />
		                          <path
		                            d="M14.222,18H1.778A1.791,1.791,0,0,1,0,16.2V3.6A1.792,1.792,0,0,1,1.778,1.8H5.494a2.646,2.646,0,0,1,5.014,0h3.715A1.791,1.791,0,0,1,16,3.6V16.2A1.791,1.791,0,0,1,14.222,18ZM4.445,12.6a.9.9,0,0,0,0,1.8H8.89a.9.9,0,0,0,0-1.8Zm0-3.6a.9.9,0,0,0,0,1.8h7.111a.9.9,0,0,0,0-1.8Zm0-3.6a.9.9,0,0,0,0,1.8h7.111a.9.9,0,0,0,0-1.8ZM8,1.8a.9.9,0,1,0,.889.9A.9.9,0,0,0,8,1.8Z"
		                            transform="translate(-21086 1400)"
		                            fill=""
		                          />
		                        </g>
		                      </svg>
		                      <ul class="list">
		                      	@if(isset($todaysTopProduct))
		                      		@foreach($todaysTopProduct as $row)
									<li>
										<span class="list-label">@if($row->package_name){{$row->package_name}}@else{{$row->pass_type_name}}@endif</span>
										<span class="list-count">{{$row->count}}</span>
									</li>
									@endforeach
								@endif
							</ul>
		                    </div>
		                    <svg
		                      id="small-card-bg-icon"
		                      class="blue"
		                      xmlns="http://www.w3.org/2000/svg"
		                      width="24"
		                      height="24"
		                      viewBox="0 0 24 24"
		                    >
		                      <g transform="translate(21090 -1397)">
		                        <rect
		                          width="24"
		                          height="24"
		                          transform="translate(-21090 1397)"
		                          fill="none"
		                        />
		                        <path
		                          d="M14.222,18H1.778A1.791,1.791,0,0,1,0,16.2V3.6A1.792,1.792,0,0,1,1.778,1.8H5.494a2.646,2.646,0,0,1,5.014,0h3.715A1.791,1.791,0,0,1,16,3.6V16.2A1.791,1.791,0,0,1,14.222,18ZM4.445,12.6a.9.9,0,0,0,0,1.8H8.89a.9.9,0,0,0,0-1.8Zm0-3.6a.9.9,0,0,0,0,1.8h7.111a.9.9,0,0,0,0-1.8Zm0-3.6a.9.9,0,0,0,0,1.8h7.111a.9.9,0,0,0,0-1.8ZM8,1.8a.9.9,0,1,0,.889.9A.9.9,0,0,0,8,1.8Z"
		                          transform="translate(-21086 1400)"
		                          fill=""
		                        />
		                      </g>
		                    </svg>
		                  </div>
		                </div>
		              </div>

		              <div class="col-xl-4 col-lg-6 col-md-12 top_product_seven">
		                <div class="card">
		                  <div class="card-body small-card">
		                    <h5 class="font-medium">
		                      Top products Of Last 7 Days
		                    </h5>
		                    <div class="counter">
		                      <svg
		                        id="small-card-icon"
		                        class="blue"
		                        xmlns="http://www.w3.org/2000/svg"
		                        width="24"
		                        height="24"
		                        viewBox="0 0 24 24"
		                      >
		                        <g transform="translate(21090 -1397)">
		                          <rect
		                            width="24"
		                            height="24"
		                            transform="translate(-21090 1397)"
		                            fill="none"
		                          />
		                          <path
		                            d="M14.222,18H1.778A1.791,1.791,0,0,1,0,16.2V3.6A1.792,1.792,0,0,1,1.778,1.8H5.494a2.646,2.646,0,0,1,5.014,0h3.715A1.791,1.791,0,0,1,16,3.6V16.2A1.791,1.791,0,0,1,14.222,18ZM4.445,12.6a.9.9,0,0,0,0,1.8H8.89a.9.9,0,0,0,0-1.8Zm0-3.6a.9.9,0,0,0,0,1.8h7.111a.9.9,0,0,0,0-1.8Zm0-3.6a.9.9,0,0,0,0,1.8h7.111a.9.9,0,0,0,0-1.8ZM8,1.8a.9.9,0,1,0,.889.9A.9.9,0,0,0,8,1.8Z"
		                            transform="translate(-21086 1400)"
		                            fill=""
		                          />
		                        </g>
		                      </svg>
		                      <ul class="list">
		                      	@if(isset($sevenTopProduct))
		                      		@foreach($sevenTopProduct as $row)
									<li>
										<span class="list-label">@if($row->package_name){{$row->package_name}}@else{{$row->pass_type_name}}@endif</span>
										<span class="list-count">{{$row->count}}</span>
									</li>
									@endforeach
								@endif
							</ul>
		                    </div>
		                    <svg
		                      id="small-card-bg-icon"
		                      class="blue"
		                      xmlns="http://www.w3.org/2000/svg"
		                      width="24"
		                      height="24"
		                      viewBox="0 0 24 24"
		                    >
		                      <g transform="translate(21090 -1397)">
		                        <rect
		                          width="24"
		                          height="24"
		                          transform="translate(-21090 1397)"
		                          fill="none"
		                        />
		                        <path
		                          d="M14.222,18H1.778A1.791,1.791,0,0,1,0,16.2V3.6A1.792,1.792,0,0,1,1.778,1.8H5.494a2.646,2.646,0,0,1,5.014,0h3.715A1.791,1.791,0,0,1,16,3.6V16.2A1.791,1.791,0,0,1,14.222,18ZM4.445,12.6a.9.9,0,0,0,0,1.8H8.89a.9.9,0,0,0,0-1.8Zm0-3.6a.9.9,0,0,0,0,1.8h7.111a.9.9,0,0,0,0-1.8Zm0-3.6a.9.9,0,0,0,0,1.8h7.111a.9.9,0,0,0,0-1.8ZM8,1.8a.9.9,0,1,0,.889.9A.9.9,0,0,0,8,1.8Z"
		                          transform="translate(-21086 1400)"
		                          fill=""
		                        />
		                      </g>
		                    </svg>
		                  </div>
		                </div>
		              </div>

		              <div class="col-xl-4 col-lg-6 col-md-12 top_product_month">
		                <div class="card">
		                  <div class="card-body small-card">
		                    <h5 class="font-medium">
		                      Top products Of Last Month
		                    </h5>
		                    <div class="counter">
		                      <svg
		                        id="small-card-icon"
		                        class="blue"
		                        xmlns="http://www.w3.org/2000/svg"
		                        width="24"
		                        height="24"
		                        viewBox="0 0 24 24"
		                      >
		                        <g transform="translate(21090 -1397)">
		                          <rect
		                            width="24"
		                            height="24"
		                            transform="translate(-21090 1397)"
		                            fill="none"
		                          />
		                          <path
		                            d="M14.222,18H1.778A1.791,1.791,0,0,1,0,16.2V3.6A1.792,1.792,0,0,1,1.778,1.8H5.494a2.646,2.646,0,0,1,5.014,0h3.715A1.791,1.791,0,0,1,16,3.6V16.2A1.791,1.791,0,0,1,14.222,18ZM4.445,12.6a.9.9,0,0,0,0,1.8H8.89a.9.9,0,0,0,0-1.8Zm0-3.6a.9.9,0,0,0,0,1.8h7.111a.9.9,0,0,0,0-1.8Zm0-3.6a.9.9,0,0,0,0,1.8h7.111a.9.9,0,0,0,0-1.8ZM8,1.8a.9.9,0,1,0,.889.9A.9.9,0,0,0,8,1.8Z"
		                            transform="translate(-21086 1400)"
		                            fill=""
		                          />
		                        </g>
		                      </svg>
		                      <ul class="list">
		                      	@if(isset($thirtyTopProduct))
		                      		@foreach($thirtyTopProduct as $row)
									<li>
										<span class="list-label">@if($row->package_name){{$row->package_name}}@else{{$row->pass_type_name}}@endif</span>
										<span class="list-count">{{$row->count}}</span>
									</li>
									@endforeach
								@endif
							</ul>
		                    </div>
		                    <svg
		                      id="small-card-bg-icon"
		                      class="blue"
		                      xmlns="http://www.w3.org/2000/svg"
		                      width="24"
		                      height="24"
		                      viewBox="0 0 24 24"
		                    >
		                      <g transform="translate(21090 -1397)">
		                        <rect
		                          width="24"
		                          height="24"
		                          transform="translate(-21090 1397)"
		                          fill="none"
		                        />
		                        <path
		                          d="M14.222,18H1.778A1.791,1.791,0,0,1,0,16.2V3.6A1.792,1.792,0,0,1,1.778,1.8H5.494a2.646,2.646,0,0,1,5.014,0h3.715A1.791,1.791,0,0,1,16,3.6V16.2A1.791,1.791,0,0,1,14.222,18ZM4.445,12.6a.9.9,0,0,0,0,1.8H8.89a.9.9,0,0,0,0-1.8Zm0-3.6a.9.9,0,0,0,0,1.8h7.111a.9.9,0,0,0,0-1.8Zm0-3.6a.9.9,0,0,0,0,1.8h7.111a.9.9,0,0,0,0-1.8ZM8,1.8a.9.9,0,1,0,.889.9A.9.9,0,0,0,8,1.8Z"
		                          transform="translate(-21086 1400)"
		                          fill=""
		                        />
		                      </g>
		                    </svg>
		                  </div>
		                </div>
		              </div>
		          	
		            </div>
		           
		           <!-- Filter box -->
		            <div class="card">
		              <div class="card-body">
		                  <div class="form-row filter-row">
		                    <div class="form-group col-md-3">
		                      <select  id="product_type_filter" name="product_type_filter" class="form-control input-sm search_filter">
		                        <option value="" selected>Product Type</option>
		                        <option value="1" >Test Series</option>
		                        <option value="2" >Pass</option>
		                      </select>
		                    </div>
		                    <div class="form-group col-md-9">
		                      <div class="input-group search-filter">
		                        <select  id="search_product_filter" name="search_product_filter" class="form-control input-sm search_filter">
		                        <option value="" selected>Select & Search Porduct</option>
		                      </select>
		                      </div>
		                    </div>
		                  </div>
		                
		              </div>
		            </div>
		            <!-- Table -->
		            <div class="card">
		              <div class="card-header pt-5">
		                <h2>Sales</h2>
		                <div class="dropdown custom-date">
		                  <button class="btn btn-custom-toggle dropdown-toggle btn-block" type="button" id="dropdownMenuButton"
		                    data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
		                    Custom Date
		                  </button>
		                  <div class="dropdown-menu custom-dropdown-menu right-move" aria-labelledby="dropdownMenuButton"
		                    x-placement="bottom-start"
		                    style="position: absolute; will-change: transform; top: 0px; left: 0px; transform: translate3d(0px, 44px, 0px);">
		                    <div class="custom-date-content">
		                      <h6>Quick Dates</h6>
		                      <ul>
		                        <li data-id="1" style="cursor: pointer;" class="date_selector">Today</li>
		                        <li data-id="2" style="cursor: pointer;" class="date_selector">Last 7 Days</li>
		                        <li data-id="3" style="cursor: pointer;" class="date_selector">This Month</li>
		                        <li data-id="4" style="cursor: pointer;" class="date_selector">This Year: {{date('Y')}}</li>
		                        <li data-id="5" style="cursor: pointer;" class="date_selector">Last Year: {{date('Y')-1}}</li>
		                        <li data-id="6" style="cursor: pointer;" class="date_selector">All Time</li>
		                      </ul>
		                      <h6>Quick Dates</h6>
		                      <div class="date-group">
		                        <div class="input-group">
		                          <div class="input-group-prepend">
		                            <div class="input-group-text">
		                              <i class="fa fa-calendar tx-16 lh-0 op-6"></i>
		                            </div>
		                          </div>
		                          <input class="form-control input-sm all_from_date" placeholder="MM/DD/YYYY" type="text" id="dp1588836251073">
		                        </div>
		                        <span>To</span>
		                        <div class="input-group">
		                          <div class="input-group-prepend">
		                            <div class="input-group-text">
		                              <i class="fa fa-calendar tx-16 lh-0 op-6"></i>
		                            </div>
		                          </div>
		                          <input class="form-control input-sm all_to_date" placeholder="MM/DD/YYYY" type="text" id="dp1588836251074">
		                        </div>
		                      </div>
		                      <div class="btn-content">
		                        <button class="btn btn-outline-primary btn-pill add-btn-sm btn-streach-md cancel_date">Cancel</button>
		                        <button class="btn btn-primary add-btn-sm btn-streach-md apply">Apply</button>
		                      </div>
		                    </div>

		                  </div>
		                </div>
		              </div>
		              <div class="card-body pt-0">
		                <p class="">You can view dated, monthly, yearly performance</p>
		                <!-- <div id="engagement" style="height: 370px; max-width: 920px; margin: 0px auto;"></div> -->
							<div class="details-box vertical-text-box">
								<h4 class="text-verticle">Total Sales</h4>
                       			<canvas id="canvas" style="height:40vh; width:80vw"></canvas>
                       			<h4 class="text-center chart-footer">Last Six Month</h4>
							</div>
		              </div>
		              
		            </div>

		            <div class="card">
		            
		              <div class="card-header pt-5">
										<h2 id="product_details">Product Sales Details</h2>
										<div class="filter-group">
		                <form action="{{route('coaching.analytics.sales-refund.export')}}" method="post" id="excel_export_frm" style="display: inline-flex;">
		                	{{csrf_field()}}
	                		<button type="button" class="btn btn-outline-primary btn-pill excel_export">Export In Excel</button>
		                </div>
		                <input type="hidden" name="date_type" id="date_type">
		                <input type="hidden" name="sale_type_hide" id="sale_type_hide">

		                <div class="dropdown custom-date ml-3">
		                  <button class="btn btn-custom-toggle dropdown-toggle btn-block" type="button" id="dropdownMenuButton"
		                    data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
		                    Custom Date
		                  </button>
		                  <div class="dropdown-menu custom-dropdown-menu right-move" aria-labelledby="dropdownMenuButton"
		                    x-placement="bottom-start"
		                    style="position: absolute; will-change: transform; top: 0px; left: 0px; transform: translate3d(0px, 44px, 0px);">
		                    <div class="custom-date-content">
		                      <h6>Quick Dates</h6>
		                      <ul>
		                        <li data-id="1" style="cursor: pointer;" class="date_selector1">Today</li>
		                        <li data-id="2" style="cursor: pointer;" class="date_selector1">Last 7 Days</li>
		                        <li data-id="3" style="cursor: pointer;" class="date_selector1">This Month</li>
		                        <li data-id="4" style="cursor: pointer;" class="date_selector1">This Year: {{date('Y')}}</li>
		                        <li data-id="5" style="cursor: pointer;" class="date_selector1">Last Year: {{date('Y')-1}}</li>
		                        <li data-id="6" style="cursor: pointer;" class="date_selector1">All Time</li>
		                      </ul>
		                      <h6>Quick Dates</h6>
		                      <div class="date-group">
		                        <div class="input-group">
		                          <div class="input-group-prepend">
		                            <div class="input-group-text">
		                              <i class="fa fa-calendar tx-16 lh-0 op-6"></i>
		                            </div>
		                          </div>
		                          <input class="form-control input-sm all_from_date" name="all_from_date1" placeholder="MM/DD/YYYY" type="text" id="dp1588836251070">
		                        </div>
		                        <span>To</span>
		                        <div class="input-group">
		                          <div class="input-group-prepend">
		                            <div class="input-group-text">
		                              <i class="fa fa-calendar tx-16 lh-0 op-6"></i>
		                            </div>
		                          </div>
		                          <input class="form-control input-sm all_to_date" name="all_to_date1" placeholder="MM/DD/YYYY" type="text" id="dp1588836251072">
		                        </div>
		                      </div>
		                      <div class="btn-content">
		                        <button class="btn btn-outline-primary btn-pill add-btn-sm btn-streach-md cancel_date1">Cancel</button>
		                        <button class="btn btn-primary add-btn-sm btn-streach-md apply1">Apply</button>
		                      </div>
		                    </div>

		                  </div>
		                
											</form>
											</div>
		            </div>
		                <div class="card-body pt-0">
			              	<p class="text-right font-bold total_test">Total No of Search: {{$testtotalRecord}}</p>
			                <div class="table-responsive">
			                  <table id="sale-manager" class="table card-table dataTable table-hover table-vcenter text-nowrap">
			                    <thead>
			                      <tr>
			                        <th>Package Type</th>
			                        <th>Product Name</th>
			                        <th>Exam Type</th>
			                        <th>Coupon Used</th>
			                        <th id="sales_qty">Sales Qty.</th>
			                        <th id="avg_sale">Avg. Sales</th>
			                        <th id="tot_sale">Total Sales</th>
			                        <th id="tot_gst">Total Gst</th>
			                        <th id="set_amo">Settled Amount</th>
			                      </tr>
			                    </thead>
			                    
			                  </table>
			                </div>
			            </div>
			            <div class="card-body pt-0 allRecord">
			                
			            </div>
		            </div>	
		            
		            </div>
		            </form>
		            <!-- //Table -->
		            <!--// MAIN BODY CONTENT -->
				</div>
			</div>
@endsection
@section('scripts')
<script type="text/javascript">
	var MONTHS = [];
	var labels = [];
	var data_test = [];
	var data_pass = [];
	<?php if(isset($allSales)){ 
			foreach ($allSales as $val){?>
			  MONTHS.push('<?php echo $val->month; ?>');     
			  labels.push('<?php echo $val->month; ?>');     
			  data_test.push('<?php echo $val->test_series; ?>');     
			  data_pass.push('<?php echo $val->pass; ?>');  
	<?php } } ?>
			var color = Chart.helpers.color;
			var barChartData = {
				labels: labels,
				datasets: [{
					label: 'Test Series',
					backgroundColor: '#000080',
					borderColor: '#000080',
					borderWidth: 1,
					data: data_test,
					fill: false
				}, {
					label: 'Pass',
					backgroundColor: '#FFA62F',
					borderColor: '#FFA62F',
					borderWidth: 1,
					data: data_pass,
					fill: false
				}]

			};

		window.onload = function() {
			var ctx = document.getElementById('canvas').getContext('2d');
			window.myBar = new Chart(ctx, {
				type: 'line',
				data: barChartData,
				options: {
					responsive: true,
					legend: {
						position: 'top',
					},
					title: {
						display: true,
						text: ''
					}
				}
			});

		};

</script>
<script type="text/javascript" src="{{asset('js/coaching/analytics_sales.js?v='.time())}}"></script>
@endsection