@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('patients-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 
			@endif">
				<span class="count">2</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=" 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>  

<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> 
					<th>مرضى اضيفوا لجلسة</th> 
					<th>مرضى شخصوا بجلسة</th> 
				</tr>
			</thead> 
			<tbody>
				@for($row=0; $row < count($report); $row++)
				<tr>
					@php(@$total_patients += $report[$row]['patients'] ?? 0) 
					@php(@$total_patients_in_sessions += $report[$row]['patients_in_sessions'] ?? 0) 
					@php(@$total_patients_has_followups += $report[$row]['patients_has_followups'] ?? 0) 
					<td>{{$report[$row]['city']}}</td>  
					<td>{{$report[$row]['patients'] ?? 0}}</td>  
					<td>{{$report[$row]['patients_in_sessions'] ?? 0}}</td>  
					<td>{{$report[$row]['patients_has_followups'] ?? 0}}</td> 
				</tr>
				@endfor
			</tbody>
			<tfoot>
				<tr>
					<th>المجموع</th>   
					<th>{{$total_patients ?? 0}}</th>  
					<th>{{$total_patients_in_sessions ?? 0}}</th>  
					<th>{{$total_patients_has_followups ?? 0}}</th>  
				</tr>
			</tfoot>
		</table>
	</div>
</div>


@endif

<div class="reports-button-holder"> 
	@if(isset($step) and $step < 1)
	<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('patients-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
  
{{ 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

<script src="{{ URL('/temp_frontend/app-assets/js/scripts/forms/select/form-select2.js') }}" type="text/javascript"></script> 
@section('page_level_js') 

<script>
	function check_all_fields(class_val,value) {
		$('.'+class_val).each(function(){
        this.checked = value;
    });
	}
	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: "