@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-4">
						<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-4">
						<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-4">
						<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>
			</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" style="background-color: #4285F4">
						<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" style="background-color: #4285F4">
						<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" style="background-color: #4285F4">
						<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>
@stop
@section('adminlte_js')
	<script src="{{ asset('js/admin/chart.js') }}"></script>
    <script>
		var dataValuesPot = ;
		var dataValuesSup = ;
		var docCount = ;
		var doctorsTextTemp = ' | Doctors : ';
		
        $(document).ready(function () {
			var ctx = document.getElementById('potentailVsActualSupportChart').getContext('2d');
			var productSupportChart = new Chart(ctx, {
				type: 'bar',
				data: {
					datasets: [{
						label: 'Monthly Support',
						data: dataValuesSup,
						// this dataset is drawn below
						order: 2,
						backgroundColor: '#3366cc',
					}, {
						label: 'Potential',
						data: dataValuesPot,
						type: 'line',
						// this dataset is drawn on top
						order: 1,
						backgroundColor: '#dc3912',
						fill: false,
						borderColor: '#dc3912',
					}],
					labels: ['APR'+doctorsTextTemp+docCount.apr, 'MAY'+doctorsTextTemp+docCount.may, 'JUN'+doctorsTextTemp+docCount.jun, 'JUL'+doctorsTextTemp+docCount.jul,'AUG'+doctorsTextTemp+docCount.aug, 'SEP'+doctorsTextTemp+docCount.sep, 'OCT'+doctorsTextTemp+docCount.oct, 'NOV'+doctorsTextTemp+docCount.nov,'DEC'+doctorsTextTemp+docCount.dec, 'JAN'+doctorsTextTemp+docCount.jan, 'FEB'+doctorsTextTemp+docCount.feb, 'MAR'+doctorsTextTemp+docCount.mar]
				},
			});
			// FUNCTION TO FILTER PRODUCT VS SUPPORT PAGE 
			$(document).on('change','#select_sm,#select_rbm,#select_abm,#select_be,#select_product,#select_speciality,#select_hq',function(e){
				e.preventDefault();
				//$(document).find('.loader-process').addClass('show');
				cmnPreloaderPopup('');
				var that = $(this);
				var type = '';
				var isDirect = 0;

				var form_data = new FormData();
				if(that.attr('id')=='select_product' || that.attr('id')=='select_speciality' || that.attr('id')=='select_hq'){
					if($(document).find('#select_be').val()!=''){
						var type = 'BE';
						var id = $(document).find('#select_be').val();
					}else if($(document).find('#select_abm').val()!=''){
						var type = 'ABM';
						var id = $(document).find('#select_abm').val();
					}else if($(document).find('#select_rbm').val()!=''){
						var type = 'RBM';
						var id = $(document).find('#select_rbm').val();
					}else if($(document).find('#select_sm').val()!=''){
						var type = 'SM';
						var id = $(document).find('#select_sm').val();
					}else{
						var type = '';
						var id = '';
					} 
					var productId = $(document).find('#select_product').val();
					var specialityId = $(document).find('#select_speciality').val(); 
					var hqId = $(document).find('#select_hq').val(); 
				}else{
					if(that.val()!=''){
						if(that.attr('id')=='select_sm'){
							var type = 'SM';
						}else if(that.attr('id')=='select_rbm'){
							var type = 'RBM';
						}else if(that.attr('id')=='select_abm'){
							var type = 'ABM';
						}else if(that.attr('id')=='select_be'){
							var type = 'BE';
						}
						if(that.hasClass('direct-sel')){
							isDirect = 1;
						}
						var id = that.val(); 
						var productId = $(document).find('#select_product').val(); 
						var specialityId = $(document).find('#select_speciality').val();
						var hqId = $(document).find('#select_hq').val(); 
					}else{
						if(that.attr('id')=='select_sm'){
							var type = '';
							var id = ''; 
						}else if(that.attr('id')=='select_rbm'){
							var type = 'SM';
							var id = $(document).find('#select_sm').val(); 
						}else if(that.attr('id')=='select_abm'){
							var type = 'RBM';
							var id = $(document).find('#select_rbm').val(); 
						}else if(that.attr('id')=='select_be'){
							var type = 'ABM';
							var id = $(document).find('#select_abm').val(); 
						}
						if(id==''){
							type = '';
						}
						var productId = $(document).find('#select_product').val();
						var specialityId = $(document).find('#select_speciality').val(); 
						var hqId = $(document).find('#select_hq').val();
					}
				}
				form_data.append('id',id);
				form_data.append('productId',productId);
				form_data.append('specialityId',specialityId);
				form_data.append('hqId',hqId);
				form_data.append('type',type);
				form_data.append('isDirect',isDirect);
				$.ajaxSetup({ headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') } });
				$.ajax({    
					dataType: 'json',
					cache: false,
					contentType: false,
					processData: false,
					data: form_data,
					type: 'post',
                    async: true,
					url: SITE_URL + '/potential-vs-support/filter-records',
					success: function(obj) {
						//$(document).find('.loader-process').removeClass('show');
						cmnPreloaderPopup('hide');
						if (obj.code == 1) {
							var suppDataSet = jQuery.parseJSON(obj.support_dataset);
							var potDataSet = jQuery.parseJSON(obj.potential_dataset);
							var docCountData = jQuery.parseJSON(obj.doc_count);
							productSupportChart.data = {
								type: 'bar',
								datasets: [{
									label: 'Monthly Support',
									data: suppDataSet,
									order: 2,
									backgroundColor: '#3366cc',
								}, {
									label: 'Potential',
									data: potDataSet,
									type: 'line',
									order: 1,
									backgroundColor: '#dc3912',
									fill: false,
									borderColor: '#dc3912',
								}],
								labels: ['APR'+doctorsTextTemp+docCountData.apr, 'MAY'+doctorsTextTemp+docCountData.may, 'JUN'+doctorsTextTemp+docCountData.jun, 'JUL'+doctorsTextTemp+docCountData.jul,'AUG'+doctorsTextTemp+docCountData.aug, 'SEP'+doctorsTextTemp+docCountData.sep, 'OCT'+doctorsTextTemp+docCountData.oct, 'NOV'+doctorsTextTemp+docCountData.nov,'DEC'+doctorsTextTemp+docCountData.dec, 'JAN'+doctorsTextTemp+docCountData.jan, 'FEB'+doctorsTextTemp+docCountData.feb, 'MAR'+doctorsTextTemp+docCountData.mar]
							};
							productSupportChart.update();

							if(that.attr('id')=='select_sm' || that.attr('id')=='select_rbm' || that.attr('id')=='select_abm' || that.attr('id')=='select_be'){
								$('#'+that.attr('id')).selectpicker('toggle');
							}
							
							if (type=='SM'){
								$(document).find('#select_abm').empty();
								$(document).find('#select_be').empty();
								$(document).find('#select_rbm').empty();
								obj.rbm_users.forEach(function(v,k){
									$(document).find('#select_rbm').append('<option value="'+v.id+'">'+v.name+'</option>');
								});
								$('#select_rbm').selectpicker('refresh');
								obj.abm_users.forEach(function(v,k){
									$(document).find('#select_abm').append('<option value="'+v.id+'">'+v.name+'</option>');
								});
								$('#select_abm').selectpicker('refresh');
								obj.be_users.forEach(function(v,k){
									$(document).find('#select_be').append('<option value="'+v.id+'">'+v.name+'</option>');
								});
								$('#select_be').selectpicker('refresh');
								$(document).find('#select_rbm').removeClass('direct-sel');
								$(document).find('#select_abm').removeClass('direct-sel');
								$(document).find('#select_rm').removeClass('direct-sel');
							}else if (type=='RBM'){
								$(document).find('#select_abm').empty();
								$(document).find('#select_be').empty();
								obj.abm_users.forEach(function(v,k){
									$(document).find('#select_abm').append('<option value="'+v.id+'">'+v.name+'</option>');
								});
								$('#select_abm').selectpicker('refresh');
								obj.be_users.forEach(function(v,k){
									$(document).find('#select_be').append('<option value="'+v.id+'">'+v.name+'</option>');
								});
								$('#select_be').selectpicker('refresh');
								// SHOW PREFILLED PARENTS
								if(isDirect==1){
									$(document).find('#select_sm').empty();
									obj.pre_sm_users.forEach(function(v,k){
										$(document).find('#select_sm').append('<option value="'+v.id+'">'+v.name+'</option>');
									});
									$('#select_sm').selectpicker('refresh');
								}

								$(document).find('#select_abm').removeClass('direct-sel');
								$(document).find('#select_rm').removeClass('direct-sel');
							}else if (type=='ABM'){
								$(document).find('#select_be').empty();
								obj.be_users.forEach(function(v,k){
									$(document).find('#select_be').append('<option value="'+v.id+'">'+v.name+'</option>');
								});
								$('#select_be').selectpicker('refresh');
								// SHOW PREFILLED PARENTS
								if(isDirect==1){
									$(document).find('#select_sm').empty();
									obj.pre_sm_users.forEach(function(v,k){
										$(document).find('#select_sm').append('<option value="'+v.id+'">'+v.name+'</option>');
									});
									$('#select_sm').selectpicker('refresh');
									$(document).find('#select_rbm').empty();
									obj.pre_rbm_users.forEach(function(v,k){
										$(document).find('#select_rbm').append('<option value="'+v.id+'">'+v.name+'</option>');
									});
									$('#select_rbm').selectpicker('refresh');
								}

								$(document).find('#select_rm').removeClass('direct-sel');
							}else if (type=='BE'){
								// SHOW PREFILLED PARENTS
								if(isDirect==1){
									$(document).find('#select_sm').empty();
									obj.pre_sm_users.forEach(function(v,k){
										$(document).find('#select_sm').append('<option value="'+v.id+'">'+v.name+'</option>');
									});
									$('#select_sm').selectpicker('refresh');
									$(document).find('#select_rbm').empty();
									obj.pre_rbm_users.forEach(function(v,k){
										$(document).find('#select_rbm').append('<option value="'+v.id+'">'+v.name+'</option>');
									});
									$('#select_rbm').selectpicker('refresh');
									$(document).find('#select_abm').empty();
									obj.pre_abm_users.forEach(function(v,k){
										$(document).find('#select_abm').append('<option value="'+v.id+'">'+v.name+'</option>');
									});
									$('#select_abm').selectpicker('refresh');
								}
							}
							
							$(document).find('#noOfDrs').text(obj.tot_doctors);
							$(document).find('#averagePotentail').text(obj.avg_potential);
							$(document).find('#averageSupport').text(obj.avg_support);
						}
						else {
							
						}
					},
					error: function(obj) {
						//
					},
				});
			});
        });
    </script>
@stop