@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') }}"> 
@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('center-report')) }}">
<div class="header-holder {{ (Auth::user()->type == 3) ? ' pt-2' : '' }}">
	<h2 class="pull-right"> 
		@yield('title')
	</h2> 
	<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-12">
		 <select name="center_id" class="form-control select2" required="">
			<option value="">اختر</option>
	 		@foreach($centers as $cr)
			 	<option value="{{ $cr->id }}" {{ (isset($request) and $request->center_id == $cr->id) ? 'selected' : '' }}>{{$cr->name}}</option>
			@endforeach
		 </select>
		</div>
			<br/>
			<br/>
			<br/>
		<h3 class="reports-form-title">
			الفترة الزمنية
		</h3>
		<div class="col-md-6"> 
			<h4>
				من التاريخ 
			</h4> 
			<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"> 
			<h4>
				الى التاريخ 
			</h4>
			<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="clearfix"></div>  

@endif

<div class="reports-button-holder"> 
	<button class="with-background btn  mt-2" type="submit">عرض التفاصيل</button> 
</div>
@if(isset($request))
<!-- <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">
			معلومات عامة لـ {{$center->name}} للمدة من {{$date_from}} حتي {{$date_to}}
		</h3>
		<table class="margin-bottom-20">
			<thead>
				<tr> 
					<th>عدد الجلسات</th> 
					<th>عدد التخصصات</th>   
					<th>عدد المرضى</th>  
					<th>عدد التشخيصات</th>  
					<th>تحويل الي تخصص اخر</th>  
					<th>متابعة</th>  
					<th>اجمالي</th>  
					<th>لم يحضر</th>  
				</tr>
			</thead> 
			<tbody> 
				 <tr>
				 	@php($total= $statistics['total_followups'] + @$statistics['total_change-specialty'] + @$statistics['total_continue'])
				 	<td>{{$statistics['total_seesions']}}</td>
				 	<td>{{$statistics['total_specials']}}</td>
				 	<td>{{$statistics['total_patients']}}</td>
				 	<td>{{$statistics['total_followups']}}</td>
				 	<td>{{$statistics['total_change-specialty'] ?? 0}}</td>
				 	<td>{{$statistics['total_continue'] ?? 0}}</td>
				 	<td>{{$total ?? 0}}</td>
				 	<td>{{$statistics['total_not-come'] ?? 0}}</td>
			</tbody> 
		</table>
	</div>
</div>


<div class="reports-table-container">
	<div class="col-md-12">
		<h3 class="reports-title">
			تفاصيل الجلسات الخاصة بـ {{$center->name}} للمدة من {{$date_from}} حتي {{$date_to}}
		</h3>
		<table class="margin-bottom-20">
			<thead>
				<tr>
					<th>رقم الجلسة</th> 
					<th>التاريخ</th>
					@if($center->type == 'RC')
						<th>مقدم الخدمة</th>
					@else
						<th>متلق الخدمة</th>
					@endif
					<th>التخصص</th> 
					<th>طبيب مقدم الخدمة</th> 
					<th>طبيب متلق الخدمة</th> 
					<th>المرضى</th>  
				</tr>
			</thead> 
			<tbody> 
				@foreach($sessions as $session)
				<tr> 
					<td> 
						@if(count($session->details)>0)
							<a href="#" onclick="$('.row_details_'+{{$session->id}}).toggleClass('hidden');return false;">{{$session->id}}</a>
						@else
							{{$session->id}}
						@endif
						 </td>  
					<td style="direction:ltr;">{{date('Y-m-d H-i',strtotime($session->date_time))}}</td>  
					@if($center->type == 'RC')
						<td>{{$session->hcp_center->name}}</td>  
					@else
						<td>{{$session->rc_center->name}}</td>  
					@endif
					<td>{{$session->hcp_doctor->specials[0]->name}}</td>  
					<td>{{$session->hcp_doctor->name ?? ''}}</td>   
					<td>{{$session->rc_doctor->name ?? ''}}</td>   
					 
					<td>
						@foreach($session->patients as $patient)
							{{$patient->name}}
							@if(!$loop->last)
								-
							@endif
						@endforeach
					</td>
				</tr>

              	@php($session_status = array('needless'=>'لا يحتاج الي تشخيص','change-specialty'=>'تحويل الي تخصص اخر','continue'=>'متابعة','add-follow-up'=>'انتهت بتشخيص','not-come'=>'لم يحضر المريض'))

				@if(count($session->details)>0)
					<tr class="row_details_{{$session->id}} hidden">
						<th >المريض</th> 
						<th >حالة الجلسة</th> 
						<th  >السبب</th> 
						<th  >المرض</th> 
						<th >الحساسية</th> 
						<th colspan="2">ملاحظات اخرى</th>  
					</tr>
					@foreach($session->details as $detail)
						<tr class="row_details_{{$session->id}} hidden">
							<td >{{ $detail->patient->name ?? '' }}</td>
							<td >{{ $session_status[$detail->session_status] ?? '' }}</td>
							<td  >{{ $detail->reason }}</td>
							<td >
								@if($detail->session_status == 'add-follow-up')
									@foreach($detail->general_follow_up->follow_up_details as $follow_up_detail)
										@if($follow_up_detail->disease)
											{{$follow_up_detail->disease->name}} 
											@if(!$loop->last)
												-
											@endif
										@endif
									@endforeach
								@endif
							</td>
							<td  >
								@if($detail->session_status == 'add-follow-up')
									@foreach($detail->general_follow_up->follow_up_details as $follow_up_detail)
										@if($follow_up_detail->allergenic)
											{{$follow_up_detail->allergenic->name}} 
											@if(!$loop->last)
												-
											@endif
										@endif
									@endforeach
								@endif
							</td>
							<td colspan="2">
								@if($detail->session_status == 'add-follow-up') 
									{{ $detail->general_follow_up->suggested_note ?? '' }}
								@endif
							</td>
						</tr>
					@endforeach
				@endif
				
				@endforeach
			</tbody> 
		</table>
	</div>
</div>


@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); 
}
 
$('.select2').select2();
</script>

@endsection