@extends('layouts.app') 
 @section('title')
  التقارير
	@endsection

@section('vendor_css')
    <link rel="stylesheet" type="text/css" href="{{ URL('/temp_frontend/app-assets/vendors/css/forms/selects/select2.min.css') }}">
	<link rel="stylesheet" type="text/css" href="{{ URL('/temp_dashboard/app-assets/vendors/css/tables/datatable/dataTables.bootstrap4.min.css') }}">
	<link rel="stylesheet" type="text/css" href="{{ URL('/temp_frontend/app-assets/vendors/css/dropzone/dropzone.min.css') }}">
	
@endsection

@section('page_level_css')
    <link rel="stylesheet" type="text/css" href="{{ URL('/temp_dashboard/app-assets/css-rtl/core/menu/menu-types/vertical-menu.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ URL('/temp_dashboard/app-assets/css-rtl/core/menu/menu-types/vertical-overlay-menu.css') }}">
<link rel="stylesheet" href="{{ URL('/temp_frontend/app-assets/css/bootstrap-datepicker.css') }}" />
  <link rel="stylesheet" type="text/css" href="{{ URL('/temp_frontend/app-assets/vendors/css/forms/selects/select2.rtl.css') }}">
    <style type="text/css">.select2 {
		width:100%!important;
		}</style>
@endsection 

@section('content') 
<form method="post" id='frm_report' action="{{ url(route('general-report',[(isset($step)) ? $step+1 : 1])) }}">
<div class="header-holder {{ (Auth::user()->type == 3) ? ' pt-2' : '' }}">
	<h2 class="pull-right"> 
		@yield('title')
	</h2>
	<div class="pull-right steps">
	<ul>
		<li>
			<a href="#" class="
			@if(!isset($step) or !$step)
				active
			@elseif($step>0)
				done
			@endif
			">
				<span class="count">1</span>
				<span class="title">اختيار المحافظة</span>
			</a>
		</li>
		<li>
			<a href="#" class="
			@if($step==1)
				active
			@elseif($step>1)
				done
			@endif">
				<span class="count">2</span>
				<span class="title">اختيار المستشفيات</span>
			</a>
		</li>

		<li>
			<a href="#" class="
			@if($step==2)
				active 
			@elseif($step>2)
				done
			@endif">
				<span class="count">3</span>
				<span class="title">اختيارات اخرى</span>
			</a>
		</li>

		<li>
			<a href="#" class="
			@if($step==3)
				active 
			@endif">
				<span class="count">4</span>
				<span class="title">عرض التقارير</span>
			</a>
		</li>
	</ul>
	</div>
	<br/>
	<br/>
	<br/>
	@if(!isset($step) or !$step)
	<div class="reports-form">
		<div class="col-md-12">
		<h3 class="reports-form-title">
			الفترة الزمنية
		</h3>
		<div class="col-md-6">
			<br/>
			<h4>
				من التاريخ 
			</h4>
			<br/>
			<div class="da-picker-holder">
				<div class="date-picker-input-holder date-picker-day">
					<div data-where="from" data-id="day" data-value="12" class="value-holder value-holder-day value-holder-from">12</div>
					<span class="increase-value fa fa-caret-up"></span>
					<span class="decrease-value fa fa-caret-down"></span>
				</div>
				<div class="date-picker-input-holder date-picker-month">
					<div data-where="from" data-id="month" data-value="1" class="value-holder value-holder-month value-holder-from">يناير</div>
					<span class="increase-value fa fa-caret-up"></span>
					<span class="decrease-value fa fa-caret-down"></span>
				</div>
				<div class="date-picker-input-holder date-picker-year">
					<div data-where="from" data-id="year" data-value="2020" class="value-holder value-holder-year value-holder-from">2020</div>
					<span class="increase-value fa fa-caret-up"></span>
					<span class="decrease-value fa fa-caret-down"></span>
				</div>
				<span class="fa fa-calendar calendar-fire" data-where="from"></span>
			</div>
				<input type="hidden" id="from_date_day" name="from_date_day">
				<input type="hidden" id="from_date_month" name="from_date_month">
				<input type="hidden" id="from_date_year" name="from_date_year">
		</div>
		<div class="col-md-6">
			<br/>
			<h4>
				الى التاريخ 
			</h4>
			<br/>
			<div class="da-picker-holder">
				<div class="date-picker-input-holder date-picker-day">
					<div data-where="to" data-id="day" data-value="12" class="value-holder value-holder-day value-holder-to">12</div>
					<span class="increase-value fa fa-caret-up"></span>
					<span class="decrease-value fa fa-caret-down"></span>
				</div>
				<div class="date-picker-input-holder date-picker-month">
					<div data-where="to" data-id="month" data-value="1" class="value-holder value-holder-month value-holder-to">يناير</div>
					<span class="increase-value fa fa-caret-up"></span>
					<span class="decrease-value fa fa-caret-down"></span>
				</div>
				<div class="date-picker-input-holder date-picker-year">
					<div data-where="to" data-id="year" data-value="2020" class="value-holder value-holder-year value-holder-to">2020</div>
					<span class="increase-value fa fa-caret-up"></span>
					<span class="decrease-value fa fa-caret-down"></span>
				</div>
				<span class="fa fa-calendar calendar-fire" data-where="to"></span>
			</div>
				<input type="hidden" id="to_date_day" name="to_date_day">
				<input type="hidden" id="to_date_month" name="to_date_month">
				<input type="hidden" id="to_date_year" name="to_date_year">
		</div>
		</div>

		<div class="col-md-12">
		<h3 class="reports-form-title">
			المحافظات
		</h3>
		<div>
			<div class="check-box">
				<input type="checkbox" onchange="check_all_fields('cities',this.checked);" />
				<div class="check-box-square">
				</div>
				<div class="check-box-check">
					<span class="fa fa-check"></span>
				</div>
				<label>الكل</label>
			</div>
			@foreach($cities as $city)
			<div class="check-box">
				<input type="checkbox" class="cities"
				@if(isset($request->city_id) and in_array($city->id,$request->city_id))
					checked="true"  
				@endif  
				name='city_id[]' value="{{$city->id}}" />
				<div class="check-box-square">
				</div>
				<div class="check-box-check">
					<span class="fa fa-check"></span>
				</div>
				<label>{{$city->name}}</label>
			</div> 
			@endforeach
		</div>

</div>
<div class="clearfix"></div>
@elseif($step==1)
<div class="col-md-12 pre-centers mb-2 ">
		<h3 class="reports-form-title">
			المستشفيات
		</h3>
		<div>
			<select  onchange="check_all_fields(this.value);" >
				<option value="">اختر</option>
				<option value="centers">الكل</option>
				<option value="hcp_centers">مقدمي الخدمة فقط</option>
				<option value="rc_centers">مستقبلي الخدمة فقط</option>
			</select> 
		</div>
	</div>

<div class="col-md-12 mt-2 ">
	@foreach($centers as $center)
	<div class="check-box hidden centers {{ ($center->type == 'HCP') ? 'hcp_centers' : 'rc_centers'}}">
		<input type="checkbox"
		@if(isset($request->center_id) and in_array($center->id,$request->center_id))
			checked="true"  
		@endif  
		 name='center_id[]' value="{{$center->id}}" />
		<div class="check-box-square">
		</div>
		<div class="check-box-check">
			<span class="fa fa-check"></span>
		</div>
		<label>{{$center->name}}</label>
	</div>
	@endforeach  
</div>

<div class="clearfix"></div>
@elseif($step==2)
@for($i=0; $i < 2; $i++)
	<div class="col-md-4">
		<h3 class="reports-form-title">الاختيار رقم {{ $i+1 }}</h3>
			<select name="columns[]" class="form-control col-md-12">
				<option value="">اختر</option>
				<option {{ (isset($request->columns[$i]) and $request->columns[$i]=='users') ? 'selected' : '' }} value="users">عدد المستخدمين</option>
				<option {{ (isset($request->columns[$i]) and $request->columns[$i]=='clinics') ? 'selected' : '' }} value="clinics">عدد العيادات</option>
				<option {{ (isset($request->columns[$i]) and $request->columns[$i]=='doctors') ? 'selected' : '' }} value="doctors">عدد الاطباء</option>
				<option {{ (isset($request->columns[$i]) and $request->columns[$i]=='followups') ? 'selected' : '' }} value="followups">عدد التشخيصات</option>
				<!-- <option {{ (isset($request->columns[$i]) and $request->columns[$i]=='patients') ? 'selected' : '' }} value="patients">عدد المرضى</option>  -->
				<option {{ (isset($request->columns[$i]) and $request->columns[$i]=='sessions') ? 'selected' : '' }} value="sessions">عدد الجلسات</option>
				<!-- <option {{ (isset($request->columns[$i]) and $request->columns[$i]=='patientsinsessions') ? 'selected' : '' }} value="patientsinsessions">عدد المرضى لهم جلسات</option> -->
				<option {{ (isset($request->columns[$i]) and $request->columns[$i]=='specialties') ? 'selected' : '' }} value="specialties">عدد التخصصات</option> 
			</select>
	</div> 
@endfor

	<div class="col-md-4">
		<h3 class="reports-form-title">الامراض</h3> 
	    <select name="diseases_id" id='diseases_id'  class=" form-control">   </select>  
	</div> 
@elseif($step==3) 
<div class=" mt-2">
	<a href="{{url(route('cpanel-reports-print'))}}" title="طباعة" target="_blank"><i class="fa fa-print font-medium-5" style="color: #cc6600;cursor:pointer;"></i></a>
	<a href="{{url(route('cpanel-reports-image'))}}" title="حفظ كصورة"  target="_blank" class="ml-1"><i class="fa fa-picture-o font-medium-5" style="color: #10cc00;cursor:pointer;"></i></a>
	<a href="{{url(route('cpanel-reports-pdf'))}}" title="حفظ كملف pdf" target="_blank"  class="ml-1"><i class="fa fa-file-pdf-o font-medium-5" style="color: #c00;cursor:pointer;"></i></a>

</div>  

@php($columns_name = array('users'=>'عدد المستخدمين','clinics'=>'عدد العيادات','doctors'=>'عدد الاطباء','followups'=>'عدد التشخيصات','patients'=>'عدد المرضى','sessions'=>'عدد الجلسات','sessions_with_patients'=>'جلسات تمت','sessions_denied'=>'جلسات ملغاه','patientsinsessions'=>'عدد المرضى لهم جلسات','specialties'=>'عدد التخصصات','needless'=>'لا يحتاج الي تشخيص','change-specialty'=>'تحويل الي تخصص اخر','continue'=>'متابعة','add-follow-up'=>'انتهت بتشخيص','not-come'=>'لم يحضر المريض'))
@php($total = array())
<div class="reports-table-container">
	<div class="col-md-12">
		<h3 class="reports-title">
			تقارير المستشفيات للمدة من {{$date_from}} حتي {{$date_to}}
		</h3>
		<table class="margin-bottom-20">
			<thead>
				<tr>
					<th>المحافظات</th>
					<th>المستشفيات</th>
					@for($i=0; $i < count($request->columns); $i++)
						@if(isset($columns_name[$request->columns[$i]]))
							<th>{{$columns_name[$request->columns[$i]]}}</th> 
						@endif  
					@endfor
					@if($request->diseases_id)
					<th>{{$disease_info->name}}</th> 
					@endif
				</tr>
			</thead> 
			<tbody>
				@for($row=0; $row < count($report); $row++)
				<tr>
					<td>{{$report[$row]['city']}}</td>
					<td>{{$report[$row]['center']}}</td>
					@for($i=0; $i < count($request->columns); $i++)
						@if(isset($columns_name[$request->columns[$i]]))
							@if(isset($report[$row][$request->columns[$i]]))
								@php($total[$i] = (isset($total[$i])) ? $total[$i]+$report[$row][$request->columns[$i]] : $report[$row][$request->columns[$i]])
							@endif 
							<td>{{ @$report[$row][$request->columns[$i]] ?? 0 }}</td> 
						@endif     
					@endfor 

					@if($request->diseases_id)
						@if(isset($report[$row]['disease']))
							@php($total[2] = (isset($total[2])) ? $total[2]+$report[$row]['disease'] : $report[$row]['disease'])
						@endif
						<td>{{ $report[$row]['disease'] ?? 0 }}</td> 
					@endif
				</tr>
				@endfor
			</tbody>
			<tfoot>
				<tr>
					<th>المجموع</th> 
					<th></th>  
					@for($i=0; $i < count($request->columns); $i++)
						@if(isset($columns_name[$request->columns[$i]])) 
							@if($request->columns[$i] == 'sessions') 
								<th>{{ @$total_sessions ?? 0 }}</th>  
							@else
								<th>{{ @$total[$i] ?? 0 }}</th> 
							@endif
						@endif     
					@endfor  

					@if($request->diseases_id) 
						<th>{{ @$total[2] ?? 0 }}</th> 
					@endif
				</tr>
			</tfoot>
		</table>
	</div>
</div>

@endif

<div class="reports-button-holder"> 
	@if(isset($step) and $step < 3)
	<button class="with-background btn  mt-2" type="submit">التالي</button> 
	@endif
	@if(isset($step) and $step >0)
	<button class="without-background btn mt-2" onclick="$('#frm_report').attr('action','{{ url(route('general-report',[(isset($step)) ? $step-1 : 0])) }}');">السابق</button>
	@endif
</div>

@if(isset($request->city_id) and $step > 0)
	@foreach($request->city_id as $city_id)
		<input type="hidden" name="city_id[]" value="{{$city_id}}"> 
	@endforeach 
	<input type="hidden"  name="to_date_day" value="{{$request->to_date_day}}">
	<input type="hidden"  name="to_date_month" value="{{$request->to_date_month}}">
	<input type="hidden"  name="to_date_year" value="{{$request->to_date_year}}"> 

	<input type="hidden" name="from_date_day" value="{{$request->from_date_day}}">  
	<input type="hidden" name="from_date_month" value="{{$request->from_date_month}}">  
	<input type="hidden" name="from_date_year" value="{{$request->from_date_year}}">  
@endif

@if(isset($request->center_id) and $step > 1)
	@foreach($request->center_id as $center_id)
		<input type="hidden" name="center_id[]" value="{{$center_id}}"> 
	@endforeach
@endif

@if(isset($request->columns) and $step > 2)
	@foreach($request->columns as $column)
		<input type="hidden" name="columns[]" value="{{$column}}"> 
	@endforeach
@endif

{{ csrf_field() }}
</form>
</div>
<div class="modal-holder">
<div class="modal-shadow"></div>
<div class="modal-body">
<div style="overflow:hidden;">
    <div class="form-group">
        <div class="row">
            <div class="col-md-12">
                <div id="datetimepicker12"></div>
            </div>
        </div>
    </div>
</div>
</div>
</div>



@endsection


@section('page_vendor_js') 
     <script src="{{ URL('/temp_frontend/app-assets/vendors/js/forms/select/select2.full.min.js') }} " type="text/javascript"></script>
	<script src="{{ URL('/temp_frontend/app-assets/js/moment.min.js') }}" ></script>
<script src="{{ URL('/temp_frontend/app-assets/js/bootstrap.min.js') }}" ></script>
<script src="{{ URL('/temp_frontend/app-assets/js/bootstrap-datepicker.min.js') }}" ></script>
     
@endsection

@section('page_level_js') 

<script src="{{ URL('/temp_frontend/app-assets/js/scripts/forms/select/form-select2.js') }}" type="text/javascript"></script> 
<script>
	@if(!isset($step) or !$step)
    function check_all_fields(class_val,value) {
        $('.'+class_val).each(function(){
	        this.checked = value;
	    });
    }
	@elseif($step == 1)
	function check_all_fields(class_val) {  
		$('.centers').addClass('hidden');
		$('.centers input:checkbox').each(function(){
			this.checked = false;
		});

		if(class_val){
			$('.'+class_val).removeClass('hidden');
			if(class_val == 'centers')
			{
		        $('.'+class_val+' input:checkbox').each(function(){
        			this.checked = true;
        		});
			}
		}
	}
	@endif
	
	var selectedDate = {};
$(document).ready(function(){
	var datepickerValues = {
		day: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31],
		month: ['يناير', 'فبراير', 'مارس', 'ابريل', 'مايو', 'يونيو', 'يوليو', 'اغسطس', 'سبتمبر', 'اكتوبر', 'نوفمبر', 'ديسمبر'],
	};
	evaluateDate(new Date());
	function evaluateDate(sentDate) {
		var today = sentDate;
		@if(isset($request->from_date_day)) 
			var day = '{{$request->from_date_day}}';
			var month = '{{$request->from_date_month}}';
			var year = '{{$request->from_date_year}}';
		@else 
			var day = today.getDate();
			var month = today.getMonth() + 1;
			var year = today.getFullYear();
		@endif

		$('.value-holder-from.value-holder-day').data('value', day);
		$('.value-holder-from.value-holder-day').html(day);
		$('.value-holder-from.value-holder-month').data('value', month);
		@if(isset($request->from_date_day)) 
			$('.value-holder-from.value-holder-month').html(datepickerValues['month'][month]);
		@else
			$('.value-holder-from.value-holder-month').html(datepickerValues['month'][month-1]);
		@endif
		$('.value-holder-from.value-holder-year').data('value', year);
		$('.value-holder-from.value-holder-year').html(year);

		@if(isset($request->from_date_day)) 
			var day = '{{$request->to_date_day}}';
			var month = '{{$request->to_date_month}}';
			var year = '{{$request->to_date_year}}'; 
		@endif

		$('.value-holder-to.value-holder-day').data('value', day);
		$('.value-holder-to.value-holder-day').html(day);
		$('.value-holder-to.value-holder-month').data('value', month);
		@if(isset($request->from_date_day)) 
			$('.value-holder-to.value-holder-month').html(datepickerValues['month'][month]);
		@else
			$('.value-holder-to.value-holder-month').html(datepickerValues['month'][month-1]);
		@endif
		$('.value-holder-to.value-holder-year').data('value', year);
		$('.value-holder-to.value-holder-year').html(year);  
		selectedDate = {
			from: {year: $('.value-holder-from.value-holder-year').data('value'), month: $('.value-holder-from.value-holder-month').data('value'), day: $('.value-holder-from.value-holder-day').data('value')},
			to: {year: $('.value-holder-to.value-holder-year').data('value'), month: $('.value-holder-to.value-holder-month').data('value'), day: $('.value-holder-to.value-holder-day').data('value')}
		}; 
		convert_date_to_html();
	}
	function evaluateDateOne(sentDate, fromTo) {
		var today = sentDate;
		var day = today.getDate();
		var month = today.getMonth() + 1;
		var year = today.getFullYear();
		$(`.value-holder-${fromTo}.value-holder-day`).data(`value`, day);
		$(`.value-holder-${fromTo}.value-holder-day`).html(day);
		$(`.value-holder-${fromTo}.value-holder-month`).data(`value`, month);
		$(`.value-holder-${fromTo}.value-holder-month`).html(datepickerValues[`month`][month-1]);
		$(`.value-holder-${fromTo}.value-holder-year`).data(`value`, year);
		$(`.value-holder-${fromTo}.value-holder-year`).html(year);
		selectedDate[fromTo] = {year: $(`.value-holder-${fromTo}.value-holder-year`).data(`value`), month: $(`.value-holder-${fromTo}.value-holder-month`).data(`value`), day: $(`.value-holder-${fromTo}.value-holder-day`).data('value')};

		convert_date_to_html();
	}

	$('.increase-value').click(function(){
		var value = $(this).parent().find('.value-holder').data('value');
		value++;
		var str;
		var fromTo = $(this).parent().find('.value-holder').data('where');
		if ($(this).parent().find('.value-holder').data('id') === 'day' || $(this).parent().find('.value-holder').data('id') === 'month') {
			str = datepickerValues[$(this).parent().find('.value-holder').data('id')][value - 1];
		}
		if ($(this).parent().find('.value-holder').data('id') === 'day' && value - 1 < 0) {
			value = 1;
			str = 1;
		} else if ($(this).parent().find('.value-holder').data('id') === 'day' && value - 1 > 31) {
			value = 31;
			str = 31;
		} else if ($(this).parent().find('.value-holder').data('id') === 'month' && value - 1 < 0) {
			value = 1;
			str = 'يناير';
		} else if ($(this).parent().find('.value-holder').data('id') === 'month' && value - 1 > 12) {
			value = 31;
			str = 'ديسمبر';
		} else if ($(this).parent().find('.value-holder').data('id') === 'year') {
			str = value;
		}
		selectedDate[fromTo][$(this).parent().find('.value-holder').data('id')] = value;
		$(this).parent().find('.value-holder').data('value', value);
		$(this).parent().find('.value-holder').html(str); 
		convert_date_to_html();
	});
	$('.decrease-value').click(function(){
		var value = $(this).parent().find('.value-holder').data('value');
		value--;
		var str;
		var fromTo = $(this).parent().find('.value-holder').data('where');
		if ($(this).parent().find('.value-holder').data('id') === 'day' || $(this).parent().find('.value-holder').data('id') === 'month') {
			str = datepickerValues[$(this).parent().find('.value-holder').data('id')][value - 1];
		}
		if ($(this).parent().find('.value-holder').data('id') === 'day' && value - 1 < 0) {
			value = 1;
			str = 1;
		} else if ($(this).parent().find('.value-holder').data('id') === 'day' && value - 1 > 31) {
			value = 31;
			str = 31;
		} else if ($(this).parent().find('.value-holder').data('id') === 'month' && value - 1 < 0) {
			value = 1;
			str = 'يناير';
		} else if ($(this).parent().find('.value-holder').data('id') === 'month' && value - 1 > 12) {
			value = 31;
			str = 'ديسمبر';
		} else if ($(this).parent().find('.value-holder').data('id') === 'year') {
			str = value;
		}
		selectedDate[fromTo][$(this).parent().find('.value-holder').data('id')] = value;
		$(this).parent().find('.value-holder').data('value', value);
		$(this).parent().find('.value-holder').html(str); 
		convert_date_to_html();
	});





var datePickerFromTo;

$('#datetimepicker12').datetimepicker({
                inline: true,
				sideBySide: true
			});
			


			$("#datetimepicker12").on("dp.change", function (e) {
            evaluateDateOne(e.date._d, datePickerFromTo);
        });

			$('.calendar-fire').click(function(){
				datePickerFromTo = $(this).data('where');
				$('.modal-holder').show();
			});
			$('.modal-shadow').click(function(){
				$('.modal-holder').hide();
			});

}); 

function convert_date_to_html() { 
	$('#from_date_day').val(selectedDate.from.day); 
	$('#from_date_month').val(selectedDate.from.month); 
	$('#from_date_year').val(selectedDate.from.year); 
	$('#to_date_day').val(selectedDate.to.day); 
	$('#to_date_month').val(selectedDate.to.month); 
	$('#to_date_year').val(selectedDate.to.year); 
}


 $("#diseases_id").select2({ 
    minimumInputLength: 3,
    ajax: { 
      url: "