@extends('layouts.app')

@section('title','Statistic reports - visitors | admitdoctors')

@section('content')

<div class="container">

	<div class="dc-docsingle-holder">
		<div class="tab-content dc-haslayout">
			<div class="dc-contentdoctab dc-feedback-holder" id="feedback">
				<div class="dc-feedback">
					<div class="dc-searchresult-head">
						<div class="dc-title"><h4>Public Health Forum For All</h4></div>
						<div class="dc-rightarea">
							<div class="dc-select">
								
							</div>
						</div>
					</div>
					<div class="dc-consultation-content">
						@foreach($statistics as $key=>$data)
						<div class="dc-consultation-details">
							<figure class="dc-consultation-img dc-imgcolor1">
								<img src="https://seeklogo.com/images/G/google-analytics-logo-D04405AE8C-seeklogo.com.png" style="height:30px">
							</figure>
							<div class="dc-consultation-title">
								<h5><a href="javascript:void(0);">Google Analytics report</a><em>{{date('F d, Y',strtotime($data->document_date))}}</em></h5>
								<span><b>{{$data->visitor_num}}</b> Visitors</span>
							</div>
							<div class="dc-description">
								@foreach (explode(',',$data->document ) as $file)
									<img src="{{url($file)}}" class="reportImg" data-enlargeable width="100" style="cursor: zoom-in" >
								@endforeach
							</div>
						</div>
						@endforeach
					</div>
				</div>
			</div>
		</div>
	</div>
</div>


<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
	<div class="modal-dialog" role="document">
	  <div class="modal-content modal-lg">
	
		<div class="modal-body"></div>
		
	  </div>
	</div>
  </div>
@endsection

@push('scripts')
	<style type="text/css" scoped>
		.reportImg{
			height:50px;border: 1px solid #f05620;border-radius: 10px;padding: 2px;margin: 5px;
		}
	</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

	<script>
		$('img[data-enlargeable]').addClass('img-enlargeable').click(function() {
		var src = $(this).attr('src');
		var modal;

		function removeModal() {
			modal.remove();
			$('body').off('keyup.modal-close');
		}
		modal = $('<div>').css({
			background: 'RGBA(0,0,0,.5) url(' + src + ') no-repeat center',
			backgroundSize: 'contain',
			width: '100%',
			height: '100%',
			position: 'fixed',
			zIndex: '10000',
			top: '0',
			left: '0',
			cursor: 'zoom-out'
		}).click(function() {
			removeModal();
		}).appendTo('body');
		//handling ESC
		$('body').on('keyup.modal-close', function(e) {
			if (e.key === 'Escape') {
			removeModal();
			}
		});
		});
	</script>

@endpush