@extends('hr_main')
@section('title', '| ' . $data['pageTitle'])
@section('content')

@php
function get_browser_name($user_agent)
{
	if (strpos($user_agent, 'Opera') || strpos($user_agent, 'OPR/')) return 'Opera';
	elseif (strpos($user_agent, 'Edge')) return 'Edge';
	elseif (strpos($user_agent, 'Chrome')) return 'Chrome';
	elseif (strpos($user_agent, 'Safari')) return 'Safari';
	elseif (strpos($user_agent, 'Firefox')) return 'Firefox';
	elseif (strpos($user_agent, 'MSIE') || strpos($user_agent, 'Trident/7')) return 'Internet Explorer';

	return 'Other';
}

if(get_browser_name($_SERVER['HTTP_USER_AGENT']) == 'Chrome'){
	$topForFooter = '76.4mm';
	$height = "87mm";
	$bottom = "8.9";
	$printBottom = "12.8";

	$backBlueColor = '#3abfdb';
	$opacity = ".8";

}else if(get_browser_name($_SERVER['HTTP_USER_AGENT']) == 'Firefox'){
	$topForFooter = '75.4mm';
	$height = "86mm";
	$bottom = "8.9";
	$printBottom = "12";

	$backBlueColor = '#0acbf3';

	$backBlueColor = '#3abfdb';
	$opacity = ".8";
}else{	
	$topForFooter = '75.4mm';
	$height = "auto";
	$backBlueColor = '#3abfdb';
}
@endphp

<style>
	:root{
		--width: 54mm;
		--height: 86mm;
	}
	.panel-body{
		display: flex;gap: 3mm;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}
	.idcard{
		width: 54mm;
		height: 86mm;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 3mm;
	}
	button{
		padding: 2mm 5mm;
		font-size: 13px;
		font-weight: bold;
		color: black;
		border: 1px solid #d1d1d1;
	}
	.box{
		position: relative;
	}
	.box img{
		width: 100%;
		object-fit: fill !important;
		-webkit-filter: brightness(105%) contrast(105%) !important;
	}
	.box .card.front{
		position: absolute;
		width: 100%;
		bottom: {{ $bottom }}mm;	
	}
	.box .card .photo {
		width: 100px !important;
		height: 120px !important;
		margin-bottom: 1mm !important;
		object-fit: fill !important;
		-webkit-filter: brightness(105%) contrast(105%) !important;
	}
	h2{
		font-weight: bold;
		color: black;
		font-size: 3mm;
		margin: 0px;
		margin-bottom: 4px;
		white-space: nowrap;
	}
	p{
		margin: 0px !important;
	}
	.block{
		width: 100%;
		position: absolute;
	}
	.block h3, .block h4, .block h5 {
		font-size: 1.5mm !important;
		font-weight: bolder !important;
		color: black;
		margin: 0px !important;
	}
	.block p {
		font-size: 1.5mm !important;
		font-weight: bolder !important;
		color: black !important;
		margin: 0px !important;
	}
	.block p strong span {
		color: #63c5da !important;
	}
	.block.one{ top: 6mm; }
	.block.two{ top: 33mm; }
	.block.two p span {
		color: black !important;
	}
	.block.three{ top: 63mm; }
	.block.four{ top: 71mm; }
	.block.four p {
		color: black !important;
		font-weight: 500 !important;
	}
	.block.signature{ top: 28mm; }
</style>
<style type="text/css" media="print">
	@media print {
		* {
			-webkit-print-color-adjust: exact !important;
		}
		@page { 
			margin: -2px; padding: 0;
			size: 55mm 86mm;
		}
		h2{
			font-weight: bold !important;
			color: black !important;
			font-size: 3mm !important;
			margin: 0px !important;
			margin-bottom: 4px !important;
			white-space: nowrap !important;
		}
		.block h3, .block h4, .block h5 {
			font-size: 1.5mm !important;
			font-weight: bolder !important;
			color: black;
			margin: 0px !important;
		}
		.box .card.front{
			position: absolute;
			width: 100%;
			bottom: {{ $printBottom }}mm !important;	
		}
		.box, img {
			height: <br />
<b>Warning</b>:  Undefined variable $height in <b>/home/shikkhaplus/public_html/guk_bk/resources/views/hr/employee/viewIdCard.blade.php</b> on line <b>164</b><br />
;
		}
		/* .block.four{ top: 75.4mm; } */
		.block.four{ top: <br />
<b>Warning</b>:  Undefined variable $topForFooter in <b>/home/shikkhaplus/public_html/guk_bk/resources/views/hr/employee/viewIdCard.blade.php</b> on line <b>167</b><br />
; }
		.block.signature{ top: 30mm; }
		#printBoth{
			display: block !important;
		}
		#printBoth .idcard{
			width: 100% !important;
			height: 100% !important;
		}
		.block.two{ top: 35mm !important; }
		.block p strong span {
			color: #34dbff !important;
			font-weight: bold !important;
			opacity: {{ $opacity }};
		}
		
	}
</style>

<div class="row add-data-form" style="margin-top: 4rem;">
	<div class="container">
		<div class="viewTitle" style="border-bottom: 1px solid white;">
			<a href="{!! $data['viewIdCardUrl'] !!}" class="btn btn-info pull-right addViewBtn"><i
				class="glyphicon glyphicon-th-list viewIcon">
			</i>{!! $data['viewIdCardLabel'] !!}</a>
		</div>
		<div class="panel panel-default panel-border" style="min-height: 300px;">

			<div class="panel-heading">
				<div class="panel-title">{!! $data['pageTitle'] !!}</div>
				<a class="btn btn-info pull-right" type="button" href="{{ $data['backToConfig'] }}">&#8592 Back</a>
			</div>

			<p><b>Print Type:</b> <span>{{ $data['printType']->name  }}</span></p>
			<p><b>Issue Date:</b> <span>{{ date('M d, Y', strtotime($data['issueDate']))  }}</span></p>
			<p><b>Validity Date:</b> <span>{{ date('M d, Y', strtotime($data['validityDate']))  }}</span></p>
			<hr>

			<div class="panel-body">
				
				<div class="idcard">
					<button onclick="printModal('#printFront')" class="buttonClass">🖨️ Front Side</button>
					<div id="printFront">
						<div class="box">
							<img src="{{ asset('hr/idcard/front.jpg') }}">
							<div class="card front" align="center">
								<img style="width: 100px !important; height: 120px !important;" src="<br />
<b>Warning</b>:  Undefined variable $data in <b>/home/shikkhaplus/public_html/guk_bk/resources/views/hr/employee/viewIdCard.blade.php</b> on line <b>213</b><br />
<br />
<b>Warning</b>:  Trying to access array offset on value of type null in <b>/home/shikkhaplus/public_html/guk_bk/resources/views/hr/employee/viewIdCard.blade.php</b> on line <b>213</b><br />
<br />
<b>Fatal error</b>:  Uncaught Error: Call to a member function getEmpInfoDirBaseUrl() on null in /home/shikkhaplus/public_html/guk_bk/resources/views/hr/employee/viewIdCard.blade.php:213
Stack trace:
#0 {main}
  thrown in <b>/home/shikkhaplus/public_html/guk_bk/resources/views/hr/employee/viewIdCard.blade.php</b> on line <b>213</b><br />