@extends('hr_report')
@section('title', '| Vehicle Loan Receive Report')

@section('stylesheets')
<style>
    @media screen {
		.report-header{ text-align:center; font-family:arial; }
		.report-header h3{ margin:0px;}
		.report-header p{ margin:0px;}
		.report-header .report-month{ margin-bottom:20px;}
		.employee-information h5{ margin-bottom: 0;}
		.fund-information h5{ margin-bottom: 0;}
		.loan-information h5{ margin-bottom: 0;}
		table { 
		width: 100%; 
		border-collapse: collapse;
		font-family: arial;
		overflow: visible !important; 
		}
		th { 
		color: #000; 
		font-weight: 900; 
		font-size: 13px;
		}
		td, th { 
		padding: 6px; 
		border: 1px solid #000; 
		/*text-align: left; */
		}
		.text-right{
			text-align: right;
		}
		.text-center{
			text-align: center;
		}
		tr td { font-size: 13px; }
		.page {
			page-break-after: always;
			page-break-inside: avoid;
		}
		.signature{
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 60px;
			font-family: arial;
		}
	}

    @media print{
		html, body{
			padding: 0 0px;
			margin: 5px;
			font-family: Arial, Helvetica, sans-serif;
		}
		.report-header{ text-align:center; font-family:arial; }
		.report-header h3{ margin:0px;}
		.report-header p{ margin:0px;}
		.report-header .report-month{ margin-bottom:20px;}
		.employee-information h5{ margin-bottom: 0;}
		.fund-information h5{ margin-bottom: 0;}
		.loan-information h5{ margin-bottom: 0;}
		table { 
		width: 100%; 
		border-collapse: collapse;
		font-family: arial;
		overflow: visible !important; 
		}
		th { 
		color: #000; 
		font-weight: 900; 
		font-size: 13px;
		}
		td, th { 
		padding: 6px; 
		border: 1px solid #000; 
		/*text-align: left; */
		}
		.text-right{
			text-align: right;
		}
		.text-center{
			text-align: center;
		}
		tr td { font-size: 13px; }
		.page {
			page-break-after: always;
			page-break-inside: avoid;
		}
		.signature{
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 60px;
			font-family: arial;
		}
   	}
</style>
@endsection

@section('content')
<div class="row">
	<div class="col-md-12">
		<div class="col-md-12 text-center">
			<h2>{{ $data['reportName_label'] }}</h2>
			<p>{{ @$data['project_label'] }}</p>
			<p>{{ @$data['branch_label'] }}</p>
			<p>{{ @$data['employee_label'] }}</p>
			<p>{{ @$data['duration_label'] }}</p>
		</div>

		<div class="col-md-12">
			<table class="table table-striped table-bordered table-condensed table-report" id="employee-data">
				@include('hr.report.vehicleloanregister.table', [$data])
			</table>
		</div>
	</div>
</div>
@endsection

@section('scripts')
	<script>
		window.onload = function() {
			window.print();
			window.close();
		};
		// (function () {
			

		// 	var afterPrint = function () {
		// 		window.close();
		// 	};

		// 	if (window.matchMedia) {
		// 		var mediaQueryList = window.matchMedia('print');

		// 		mediaQueryList.addListener(function (mql) {
		// 			//alert($(mediaQueryList).html());
		// 			if (mql.matches) {
		// 				beforePrint();
		// 			} else {
		// 				afterPrint();
		// 			}
		// 		});
		// 	}

		// 	window.onbeforeprint = beforePrint;
		// 	window.onafterprint = afterPrint;

		// }());
	</script>
@endsection