@extends('adminlte::page')
@section('title', $title)
@section('content_header')
<h1 class="page-title">{{@$title}}</h1>
    <a class="page-btn" href="{{url('admin/doctors/')}}"><button class="btn btn-block btn-default import-btn">Back</button></a>
@stop

@section('content')
@include('admin.includes.notification')
<section class="content">
	<div class="container-fluid">
		<!-- Filter User -->
		<div class="card">
			<div class="card-body">
				<div class="row">
					<div class="col-md-2">
						<div class="form-group" align="center">
							<label>SM</label>
							<select class="form-control select2" name="" id="select_sm" multiple data-live-search="true">
								@foreach($list_sm as $row)
								<option value="{{$row->id}}">{{$row->name}}</option>
								@endforeach
							</select>
						</div>
					</div>
					<div class="col-md-2">
						<div class="form-group" align="center">
							<label>RBM</label>
							<select class="form-control select2 direct-sel" name="" id="select_rbm" multiple data-live-search="true">
								@foreach($list_rbm as $row)
								<option value="{{$row->id}}">{{$row->name}}</option>
								@endforeach
							</select>
						</div>
					</div>
					<div class="col-md-2">
						<div class="form-group" align="center">
							<label>ABM</label>
							<select class="form-control select2 direct-sel" name="" id="select_abm" multiple data-live-search="true">
								@foreach($list_abm as $row)
								<option value="{{$row->id}}">{{$row->name}}</option>
								@endforeach
							</select>
						</div>
					</div>
					<div class="col-md-2">
						<div class="form-group" align="center">
							<label>BE</label>
							<select class="form-control select2 direct-sel" name="" id="select_be" multiple data-live-search="true">
								@foreach($list_be as $row)
								<option value="{{$row->id}}">{{$row->name}}</option>
								@endforeach
							</select>
						</div>
					</div>
					<div class="col-md-2">
						<div class="form-group" align="center">
							<label>HQs</label>
							<select class="form-control select2 direct-sel" name="" id="select_hq">
								<option value="">-- Select HQ --</option>
								@foreach($list_hqs as $row)
								<option value="{{$row->id}}">{{$row->name}}</option>
								@endforeach
							</select>
						</div>
					</div>
				</div>
				<!-- /.row -->
				<!-- Filter Product -->
				<div class="row">
					<div class="col-md-2">
						<div class="form-group" align="center">
							<label>Product</label>
							<select class="form-control select2" id="select_product">
								<option value="">-- Select Product --</option>
								@foreach($list_products as $row)
								<option value="{{$row->id}}">{{$row->name}}</option>
								@endforeach
							</select>
						</div>
					</div>
					<div class="col-md-2">
						<div class="form-group" align="center">
							<label>Speciality</label>
							<select class="form-control select2" id="select_speciality">
								<option value="">-- Select Speciality --</option>
								@foreach($list_specialities as $row)
								<option value="{{$row->id}}">{{$row->speciallity_name}}</option>
								@endforeach
							</select>
						</div>
					</div>
					<div class="col-md-2">
						<div class="form-group" align="center">
							<label>Rxbers Category</label>
							<select class="form-control select2" id="select_rxbers">
								<option value="green">Heavy Rxbers</option>
								<option value="orange">Low Rxbers</option>
								<option value="red">Non Rxbers</option>
							</select>
						</div>
					</div>
					<div class="col-md-2">
						<div class="form-group m-t-35">
							<a href="{{url('admin/potential-vs-support')}}" class="btn btn-primary btn-sm">Clear</a>
						</div>
					</div>
					<div class="col-md-4">
						<br>
						<div class="row" align="center">
							<div class="col-md-4 js-rxbers-color-div green">
								<div style="height: 20px; width: 20px; background-color: #008000;"></div>
								&gt;= <span>{{config('custom_config.rxbers_category_colors.green')}}</span>
							</div>
							<div class="col-md-4 js-rxbers-color-div orange">
								<div style="height: 20px; width: 20px; background-color: #FFA500;"></div>
								<span>{{(config('custom_config.rxbers_category_colors.green')-1)}} To {{(config('custom_config.rxbers_category_colors.red')+1)}}</span>
							</div>
							<div class="col-md-4 js-rxbers-color-div red">
								<div style="height: 20px; width: 20px; background-color: #FF0000;"></div>
								&lt;= <span>{{config('custom_config.rxbers_category_colors.red')}}</span>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- /.row -->
		<!-- Chart -->
		<div class="row">
			<!-- BAR CHART -->
			<div class="col-lg-9 col-12">
				<div class="card">
					<div class="card-header">
						<h3 class="card-title">Potentail Vs Actual Support</h3>
						<div class="card-tools">
							<button type="button" class="btn btn-tool" data-card-widget="collapse">
								<i class="fas fa-minus" style="color: #686869"></i>
							</button>
						</div>
					</div>
					<div class="card-body">
						<canvas id="potentailVsActualSupportChart"></canvas>
					</div>
					<!-- /.card-body -->
				</div>
				<!-- /.card -->
			</div>
			<!-- /.row -->
			<div class="col-lg-3 col-12" align="center">
				<div class="col-lg-12 col-12">
					<h3>Average No of Doctors</h3>
					<div class="small-box side-info green-bg">
						<div class="inner" align="center">
							<h3 style="font-size: xx-large; color: white" id="noOfDrs">{{@$tot_doctors}}</h3>
						</div>
					</div>
				</div>
				<div class="col-lg-12 col-12">
					<h3>Average Monthly Potential</h3>
					<div class="small-box side-info green-bg">
						<div class="inner" align="center">
							<h3 style="font-size: xx-large; color: white" id="averagePotentail">
								<i class="fas fa-rupee-sign"></i> {{@$avg_potential}}
							</h3>
						</div>
					</div>
				</div>
				<div class="col-lg-12 col-12">
					<h3>Average Monthly Support</h3>
					<div class="small-box side-info green-bg">
						<div class="inner" align="center">
							<h3 style="font-size: xx-large; color: white" id="averageSupport">
								<i class="fas fa-rupee-sign"></i> {{@$avg_support}}
							</h3>
						</div>
					</div>
				</div>
			</div>
			<!-- /.row -->
		</div>
		<!-- /.row -->
	</div>
	<!-- /.container-fluid -->
</section>
<div class="modal fade" id="rxbers_cat_popup" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Set color values here</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
	  	<form action="javascript:;" id="frm_rxber_range">
		<input type="text" class="form-control" name="rxbers_value_green" id="rxbers_value_green" placeholder="Enter value for Green" value="{{config('custom_config.rxbers_category_colors.green')}}" />
		<input type="text" class="form-control m-t-15" name="rxbers_value_red" id="rxbers_value_red" placeholder="Enter value for Red" value="{{config('custom_config.rxbers_category_colors.red')}}" />
		</form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary confirm">Ok</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
@stop
@section('adminlte_js')
	<script src="{{ asset('js/admin/chart.js') }}"></script>
    <script>
		var js_green_val =