@extends('layouts.app')
@section('titlePage', 'Comprehensive Report')
@push('styles')

@endpush
@section('content')
<script>
    document.getElementById("kts-14").classList.add("is-expanded");
    document.getElementById("ktss-14").classList.add("active","is-expanded");
    document.getElementById("assessments-14").classList.add("active");
</script>
@push('script')
	<style>
	#client_count, #naxeed_count{
		font-weight: 600;
		font-size: 18px;
	}
	.class_note{
		font-size: 15px;
		font-weight: bold;
	}
	</style>
	<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.3/jspdf.debug.js"></script>
	<script src="https://unpkg.com/chart.js@2.8.0/dist/Chart.bundle.js"></script>
	<script src="https://unpkg.com/chartjs-gauge@0.3.0/dist/chartjs-gauge.js"></script>
	<script src="https://unpkg.com/chartjs-plugin-datalabels@0.7.0/dist/chartjs-plugin-datalabels.js"></script>
@endpush
<div class="page-wrapper">
	<!-- [ breadcrumb ] start -->
	<div class="breadcrumb-header justify-content-between">
					<div class="left-content">
					<span class="main-content-title mg-b-0 mg-b-lg-1">Assessments & Reports</span>
					</div>
					<div class="justify-content-center mt-2">
						<ol class="breadcrumb breadcrumb-style3">
							<li class="breadcrumb-item tx-15"><a href=""><i class="feather icon-home"></i></a></li>
							<li class="breadcrumb-item active">Reports</li>
						</ol>
					</div>
				</div>
	<!-- [ breadcrumb ] end -->
	<!-- [ Main Content ] start -->
	<div class="row">
		<div class="col-xl-12">
            @if(session()->has('message.level'))
                <div class="mt-2 alert alert-{{session('message.level')}} alert-dismissible" role="alert">
                    <button type="button" class="close" data-dismiss="alert">&times;</button>
                    {!! session('message.content') !!}
                </div>
            @endif
			<div class="card">

				<div class="card-body" style="margin-bottom: 20px;">
                    <div class="row">
                        <!-- product profit end -->
                        <div class="col-md-12">
                            <div class="row">
								<div class="col-md-12">
									@php
										$test_id = request()->get('test_id');
										$company_id = request()->get('company_id');
										$testseries_id = request()->get('testseries_id');
									@endphp
									<form action="" method="get">
										<div class="row col-12">
						                     <div class="col-md-4 pb-3">
						                        <label for="degree">Select Batch</label>
						                        <select name="batch" id="batch" class="form-control">
						                        	<option value="" selected>All Batches</option>
						                            @foreach ($dataMap['batches'] as $batch)
						                                <option {{request()->get('batch') == $batch->id ? 'selected' : ''}} value="{{$batch->id}}">{{$batch->batch_title}}</option>
						                            @endforeach
						                            
						                        </select>
						                    </div>
						                    
						                    <div class="col-md-4 pb-3">
						                        <label for="degree">Select Department</label>
						                        <select name="department" id="department" class="form-control">
						                           <option value="" selected>All Departments</option>
						                            @foreach ($dataMap['departments'] as $department)
						                                <option {{request()->get('department') == $department->id ? 'selected' : ''}}  value="{{$department->id}}">{{$department->d_name}}</option>
						                            @endforeach
						                        </select>
						                    </div>
						                    <div class="col-md-4 pb-3">
						                        <label for="degree">Select Type of Report</label>
						                        <select name="report_type" id="report_type" class="form-control">
						                           <option value="" selected>-- Select Type of Report --</option>
						                           		<option {{request()->get('report_type') == 'monitored' ? 'selected' : ''}}  value="monitored">Test report</option>
						                           		<option {{request()->get('report_type') == 'company' ? 'selected' : ''}}  value="company">Company specific Test report</option>
						                           		<option {{request()->get('report_type') == 'test_series' ? 'selected' : ''}}  value="test_series">Test Series report</option>
						                           		<option {{request()->get('report_type') == 'assignment' ? 'selected' : ''}}  value="assignment">Assignment Wise report</option>
						                        </select>
						                    </div>
						                   
						                </div>
										<input type="hidden" name="type" value="view">
										<div class="row col-12">
											<div class="col-md-6 pb-3 company_paper" id="company_paper" @if(request()->get('report_type') != 'company') style="display:none" @endif>
												<label for="my-input">Select Company</label>
												<select class="form-control" name="company_id" id="company_id" >
													<option value="">-- Select Company --</option>
													@foreach ($test_category as $test_cat)
														<option value="{{$test_cat->id}}" @if($company_id == $test_cat->id) selected @endif>{{$test_cat->category}}</option>
													@endforeach
												</select>
											</div>
											<div class="col-md-6 pb-3" id="test_series_paper" @if(request()->get('report_type') != 'test_series') style="display:none" @endif>
												<label for="my-input">Select Test Series</label>
												<select class="form-control" name="testseries_id" id="testseries_id" >
													<option value="">-- Select Test Series --</option>
													@foreach ($test_series as $test_ser)
														<option value="{{$test_ser->id}}" @if($testseries_id == $test_ser->id) selected @endif>{{$test_ser->title}}</option>
													@endforeach
												</select>
											</div>
											<div class="col-md-6 pb-3" id="test_list" @if(request()->get('report_type') == 'assignment') style="display:none" @endif>
												<label for="my-input">Select Test</label>
												<select class="form-control" name="test_id" id="test_id" @if(request()->get('report_type') != 'assignment') required @endif>
													<option value="">-- Select Test --</option>
													@foreach ($tests as $test)
														<option value="{{$test->id}}" @if($test_id == $test->id) selected @endif>{{$test->title}}</option>
													@endforeach
												</select>
											</div>
										</div>
										<div class="row company_paper text-center" @if(request()->get('report_type') != 'company') style="display:none" @endif >
											<div class="col-12 class_note">
												 <span>Total number of company specific papers assigned by Knewton admin to the client: <label id="naxeed_count">{{ $naxeed_assigned ?? 0 }}</label></span>
												 <br>
												 <span>Total number of company specific papers published by client to the students: <label id="client_count">{{ $client_assigned_to_student ?? 0 }}</label></span>
											</div>
										</div>
										<div class="form-group" id="button_monitored" @if(request()->get('report_type') == 'assignment') style="display:none" @endif>
											<button type="submit" name="view" class="btn btn-primary">View Chart Now</button>
											<button type="submit" name="export" class="btn btn-secondary">Generate Report Excel</button>
											@if(request()->get('type')=="view")
											<button type="button" class="btn btn-primary" id="get-pdf" onclick="getPDF();">Download as PDF</button>
											@endif
										</div>
										<div class="form-group" id="button_assignment" @if(request()->get('report_type') != 'assignment') style="display:none" @endif>
											<a href="{{ route('client.reports.company-specific-test-report').'?batch=&department=&report_type=assignment' }}" class="btn btn-secondary"><i class="fa fa-times me-1"></i>Reset</a>
											<button type="submit" name="search"  class="btn btn-primary"><i class="fa fa-search me-1"></i>Search</button>
											<button type="button" class="btn btn-primary" id="get-current-page-pdf" onclick="getCurrentPagePDF();">Export/Download current page</button>
										</div>
									</form>
								</div>
								
								<div class="col-md-12">
									<hr>
								</div>
                            </div>
							
                        </div>
                    </div>
					<div class="row" id="budgeting-pdf">
						<div class="col-12" >
						<div style="display:none; font-size: 22px;" class="alert alert-info" id="alert_subscription">
							<center>Your subscription not have this facility.</center>
						</div>
						<div id="assignment_report">
						@if(request()->report_type=="assignment")
						{!! $assignment !!}
						@endif
						</div>
						@if(request()->has('test_id') && request()->get('report_type') != 'assignment')
							<div id="monitored-test-report" class="monitored-test-report" style="margin-left: 20px;">
								@include('client.reports.company-specific-report.charts')
							</div>
						@endif
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- [ Main Content ] end -->
</div>

@endsection

@push('script')
<script>
$(document).ready(function(){

	$('#report_type').on('change', function(){
			
		var batch_id = $('#batch').val();
		var department_id = $('#department').val();
		$(".company_paper").hide();
		$("#test_series_paper").hide();
		$("#company-line-chart").hide();
		$("#button_monitored").hide();
		$("#button_assignment").hide();
		$("#monitored-test-report").hide();
		$("#test_list").show();
		$("#assignment_report").hide();
		$("#alert_subscription").hide();
		$("#test_id").prop('required',true);
		$("#company_id").prop('required',false);
		if($(this).val() == 'monitored'){
			$("#monitored-test-report").show();
			$("#button_monitored").show();
			$.ajax({
		          url: "{{_route('client.tests.get-monitored-tests')}}",
		          type: 'POST',
		          headers: {
					    'X-CSRF-Token': '{{ csrf_token() }}',
					},
		          data: {batch_id:batch_id, department_id:department_id},
		          dataType: 'json',
		          success: function(data) {
		            $('select[name="test_id"]').html('');
		            $('select[name="test_id"]').html(data.options);
		          }
		     });
		}else if($(this).val() == 'company'){
			$(".company_paper").show();
			$("#button_monitored").show();
			$("#company_id").prop('required',true);
			$.ajax({
		          url: "{{_route('client.tests.get-company-tests')}}",
		          type: 'POST',
		          headers: {
					    'X-CSRF-Token': '{{ csrf_token() }}',
					},
		          data: {batch_id:batch_id, department_id:department_id},
		          dataType: 'json',
		          success: function(data) {
		            $('select[name="test_id"]').html('');
		            $('select[name="test_id"]').html(data.options);
		            $('select[name="company_id"]').html('');
		            $('select[name="company_id"]').html(data.options2);
					$("#naxeed_count").html(data.naxeed_assignment);
					$("#client_count").html(data.client_assignment);
					if(!data.client_subscribe){						
						$('#alert_subscription').show();
						$(".company_paper").hide();
						$("#test_list").hide();
						$("#button_monitored").hide();
					}
		          }
		     });
		}else if($(this).val() == 'test_series'){
			$("#test_series_paper").show();
			$("#button_monitored").show();
			$("#testseries_id").prop('required',true);
			$.ajax({
		          url: "{{_route('client.tests.get-tests-series')}}",
		          type: 'POST',
		          headers: {
					    'X-CSRF-Token': '{{ csrf_token() }}',
					},
		          data: {batch_id:batch_id, department_id:department_id},
		          dataType: 'json',
		          success: function(data) {
		            $('select[name="test_id"]').html('');
		            $('select[name="test_id"]').html(data.options);
		            $('select[name="testseries_id"]').html('');
		            $('select[name="testseries_id"]').html(data.options2);
					$("#naxeed_count").html(data.naxeed_assignment);
					$("#client_count").html(data.client_assignment);
					/* if(!data.client_subscribe){						
						$('#alert_subscription').show();
						$(".company_paper").hide();
						$("#test_list").hide();
						$("#button_monitored").hide();
					} */
		          }
		     });
		}else if($(this).val() == 'assignment'){
			$("#button_assignment").show();
			$("#test_list").hide();
			$("#assignment_report").show();
			$("#test_id").prop('required',false);
			$("#company_id").prop('required',false);
			$.ajax({
		          url: "{{_route('client.reports.assignment-report-ajax')}}",
		          type: 'POST',
		          headers: {
					    'X-CSRF-Token': '{{ csrf_token() }}',
					},
		          data: {batch:batch_id, department:department_id},
		          dataType: 'text',
		          success: function(record) {
					 // console.log(data);
					  $("#assignment_report").html(record);
		           /*  $('select[name="test_id"]').html('');
		            $('select[name="test_id"]').html(data.options);
		            $('select[name="company_id"]').html('');
		            $('select[name="company_id"]').html(data.options2); */
		          }
		     });
		}
	});

	$('#company_id').on('change', function(){
		var test_cat_id = $(this).val();
		$("#company-line-chart").hide();
		$("#monitored-test-report").hide();
		$.ajax({
		          url: "{{_route('client.tests.get-company-tests-result')}}",
		          type: 'POST',
		          headers: {
					    'X-CSRF-Token': '{{ csrf_token() }}',
					},
		          data: {test_cat_id:test_cat_id},
		          dataType: 'json',
		          success: function(result) {
		            $('select[name="test_id"]').html('');
		            $('select[name="test_id"]').html(result.options);
		          }
		     });
	});
	
	$('#testseries_id').on('change', function(){
		var test_cat_id = $(this).val();
		$("#company-line-chart").hide();
		$("#monitored-test-report").hide();
		$.ajax({
		          url: "{{_route('client.tests.get-testseries-tests-result')}}",
		          type: 'POST',
		          headers: {
					    'X-CSRF-Token': '{{ csrf_token() }}',
					},
		          data: {test_cat_id:test_cat_id},
		          dataType: 'json',
		          success: function(result) {
		            $('select[name="test_id"]').html('');
		            $('select[name="test_id"]').html(result.options);
		          }
		     });
	});
	
})
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script>
<script>
function getPDF () {
    var quotes = $("#budgeting-pdf");
	var divHeight = $("#budgeting-pdf").height();
	var divWidth = $("#budgeting-pdf").width();
	@if(request()->get('report_type') == 'company')
		divHeight +=500;
		divWidth +=100;
	@else
		divHeight *=2;
		divWidth *=2;
	@endif
	
	var ratio = divHeight / divWidth;
    html2canvas(quotes, {
		height: divHeight,
		width: divWidth,
        onrendered: function(canvas) {
       var image = canvas.toDataURL("image/png");
          var doc = new jsPDF('p', 'mm', [canvas.height, canvas.width]); // using defaults: orientation=portrait, unit=mm, size=A4
          var width = doc.internal.pageSize.getWidth();    
          var height = doc.internal.pageSize.getHeight();
          //height = ratio * width;
          doc.addImage(image, 'png', 40, 10, (width-20), (height-10));
          doc.save('Test-report-charts.pdf'); //Download the rendered PDF.
		}
	});
}
function getCurrentPagePDF () {
	var divHeight = $("#dt-ajax-array").height();
	var divWidth = $("#dt-ajax-array").width();
	
    return html2canvas($('#dt-ajax-array'), {
		height: (divHeight*10),
		width: (divWidth*10),
        background: "#ffffff",
        onrendered: function(canvas) {
            var myImage = canvas.toDataURL("image/png");
            // Adjust width and height
            // jspdf changes
			console.log(myImage);
            var pdf = new jsPDF('1', 'mm', [canvas.width, canvas.height]);
            var imgWidth =  pdf.internal.pageSize.getWidth();
            var imgHeight =  pdf.internal.pageSize.getHeight();
            pdf.addImage(myImage, 'png', 10, 10, (imgWidth-20), (imgHeight-20)); // 2: 19
            pdf.save('Assignment-wise-report.pdf');
        }
    });
}
</script>
@endpush