@extends('layouts.master')

@section('content')

<meta http-equiv="content-type" content="text/html;CHARSET=UTF-8"> 
<style>
	table, th, td {
		border: 1px solid black;
		border-collapse: collapse;
	}
	th, td {
		padding: 5px;
		text-align: left;    
	}
	
 	
	.vetualHolder{position:relative;}
	.pogessimg img { 
		width: 50px; 
	}
	#button-style-switcher img{
		width: 50px;
	}
    #recording-instructions{margin:15px 4px;}
	#button-style-switcher {
		background: #fff;
		box-shadow: 0 4px 14px rgba(0,0,0,.14); 
		position: fixed;
		top: 156px;
		width: 180px; 
		transition: all 1s ease;
		right:0;
	}	
	#button-style-switcher div {
		padding: 5px 10px;
	}
	#button-style-switcher div h3 {
		color: #2d2d2d;
		font-size: 16px;
		margin: 8px 3px 12px;
	}		
	ul.buttons {
		list-style: none outside none;
		margin: 10px 0 10px;
		overflow: hidden;
		padding: 0;
	}		
	ul.buttons li {
		float: left;
		margin: 2px;
	}
	
	ul.buttons li a.active {
		position: relative;
	}		
	#button-style-switcher .bottom {
		padding: 0;
	}
	#button-style-switcher .bottom a.settings {
		background-color: #fff;
		box-shadow: -7px 2px 14px 0 rgba(0,0,0,.14);
		display: block;
		height: 45px;
		position: absolute;
		left: -45px;
		top: 0;
		width: 45px;
		text-align: center;
	}
	ul.buttons li a {
		cursor: pointer;
		display: block;
		height: 35px;
		width: 35px;
		border-radius: 2px;
		-webkit-border-radius: 2px;
	}		

	#button-style-switcher .bottom a i {
		font-size: 24px;
		line-height: 45px;
	}

	#button-style-switcher .bottom a i {
		color: #3c8dbc;
	}		
	
	.alert-box { 
		border-radius: 4px;  
	}
	.alert-box p{margin:0px;} 
	.success {
		color: #3c763d;
		background-color: #dff0d8;
		border-color: #d6e9c6; 
		text-align: center; 
		z-index: 999; 
		position: fixed;
		top: 50%;
		left: 50%; 
		transform: translate(-50%, -50%);	
	}
	.success p{
		font-family: Montserrat;
		font-weight: normal;
	}
	.toggleIn-out{
		right: -180px !important;
	} 
	#recording-instructions{
		position:relative;
		padding-left:20px;
	}
	#recording-instructions:before {
		content: "\f05a";
		font-family: FontAwesome;
		font-style: normal;
		font-weight: normal;
		text-decoration: inherit;
		color: #3c8dbc;
		font-size: 16px;
		padding-right: 0.5em;
		position: absolute; 
		left: 0;
	} 
	.content-wrapper, .right-side{
		float:left;
		width:100%;
	}
	.content-header{
		width: 21cm;  
		padding-right: 0px;
		padding-left: 0px;
	}
	.content-header>.breadcrumb {
		float: right;
		padding-right: 0px;
		right: 0px;
	}   
	.subpage{float: left !important;}
    .space-top{margin-top:50px;}
	.spce-btm{margin-bottom:50px;}
    .mrT{margin-top:1cm !important;}
    .defoultpage{padding:40px;}	
	.defoultpage td, th, p, span{word-spacing: 3px !important;font-weight: normal !important;}
</style>
    <section class="content-header on-print-hide">
		<h1> Application Doctor </h1>
		<p id="recording-instructions">
			 Press the <strong>Start Recognition</strong> button and allow access.
		</p>
		<ol class="breadcrumb">
			<li><a href="/"><i class="fa fa-dashboard"></i> Home</a></li>
			<li class="active">Dashboard</li>
			<li class="active">Application Doctor</li>
		</ol> 
        @include('layouts.partials._actionlink') 
    </section> 
	
	
	<div id="appendreport"> 
		@if(!empty($data))
		{!!  $data !!}
		@else
		<div class="defoultpage spce-btm" style="width:21cm;min-height: 29.5cm;background:#fff;float:left;"> 
			<div> 
				 <div style="width:50%;float:left;"> 
					<div style="width:100%;"> 
						<div class="width: 100%;">
						   <span>थाना: </span> 
						   <div contenteditable="true" style="display:inline-block;outline:none;word-break: break-word; min-width:174px;width:auto;border:none;" class="keyboard"></div>
						</div>
					</div> 
				</div>
				<div style="float: right; width: 50%;"> 
					<div style="width: 100%;padding-left:100px;"> 
						<div class="width: 100%;">
						   <span>जिला: </span>  
						   <div contenteditable="true" style="display:inline-block;outline:none;word-break: break-word; min-width:200px;width:auto;border:none;" class="keyboard"></div>					   
						</div>
					</div> 
				 </div>		   
			</div> 
			  
			<div style="width:100%;float:left;margin-top:50px;">
				<p> सेवा में, </p>
				<div style="padding-left: 80px; line-height: 24px;margin-bottom:20px;"> 
					<p style="margin:0px;">M.O.साहव, </p>
					<p style="margin:0px;">सामन्य हस्पताल,  </p>
					 <div contenteditable="true" style=" display:inline-block;outline:none;word-break: break-word; min-width:200px;width:auto;"class="keyboard"></div>
				</div> 
				<p>श्री मान जी, </p>
				<div style="padding-left: 80px; line-height: 24px;"> 
					<div style="margin:0px;display:inline-block;margin-bottom: 15px;">बकार  सरकार निवेदन है कि मुस्मी <div contenteditable="true" style=" display:inline-block;outline:none;word-break: break-word; min-width:455px;width:auto;border-bottom:1px dashed #000;"class="keyboard"></div></div>
					<div style="margin-bottom: 15px;">
					<div  style="margin-bottom: 15px;"> <div contenteditable="true" style=" display:inline-block;outline:none;word-break: break-word; min-width:580px;width:auto;border-bottom:1px dashed #000;"class="keyboard"></div> को मन. </div> 
					</div>
					<div  style="margin-bottom: 15px;">
					<div contenteditable="true" style=" display:inline-block;outline:none;word-break: break-word; min-width:378px;width:auto;border-bottom:1px dashed #000;"class="keyboard"></div>
					ने दौराने चैकिंग शराब मशीन आपरेटर  द्वारा आज 
					</div>
				    <div  style="margin-bottom: 15px;line-height:34px;">
					 <div contenteditable="true" style=" line-height: inherit; height: 27px;display:inline-block;outline:none;word-break: break-word; min-width:200px;width:auto;border-bottom:1px dashed #000;"class="keyboard"></div> पर शराब पीने वालो को चेक करने पर धारा  185/203(3) Act No.
					59 Dt-1988 M.V.Act थाना  <div contenteditable="true" style=" line-height: inherit; height: 27px;display:inline-block;outline:none;word-break: break-word; min-width:200px;width:auto;border-bottom:1px dashed #000;"class="keyboard"></div>  में गिरफतार किया गया है कृपा नतीजा मेडिकल से सूचित करें। 
					
					   
					</div> 
				</div>
				
			</div>
			<div style="width:100%;margin-top: 100px;float:left;">
				<div style="width:30%;float:right;">  
					<div style="width:100%;margin-bottom:20px;"> 				
						<div style="width:100%;">
						   <span style="padding-right:3px;"> थाना</span>
						   <div contenteditable="true" style="display:inline-block;outline:none;word-break: break-word; min-width:167px;width:auto;border:none;" class="keyboard"></div>
						</div>
					</div>	

					<div style="width:100%;"> 
						<div style="width:100%;">
						   <span> दिनांक  </span>
						   <div contenteditable="true" style="display:inline-block;outline:none;word-break: break-word; min-width:167px;width:auto;border:none;" class="keyboard"></div>
						</div>
					</div> 					    
				</div>		
			</div>

			<style type="text/css" media="print">
				@media print {  
					.space-top{margin-top:0px !important;}	
					.mrT{margin-top:0cm !important;}	 
					.defoultpage{padding:0px !important;}	 
					.alignJ{text-align:justify !important;}
					.alignJ span{text-align:justify !important;}
					.bordernone{border:none !important;}
					.defoultpage td, th, p, span{word-spacing: 3px !important;font-weight: normal !important;}
					.print_Mode{min-height:29.7cm !important;} 
					.printTime{margin:30px 0 !important;}
					table, th, td {
						border: 1px solid black;
						border-collapse: collapse;
					}						
				}
			</style>		
				
		</div>	
		@endif
	</div>	
		
    <script src="{{ URL::asset('assets/VoiceSoftware/ready-lang-script.js') }}"></script>
    <script src="{{ URL::asset('assets/plugins/jQuery/resize.js') }}"></script>
   <script src="{{ URL::asset('assets/VoiceSoftware/printThis.js') }}"></script>
    <script>
		function myFunction() {
			//$.print("#printable");
			//$('#printable').printThis();
		}

	$('#PrntBtn').on("click", function () {
      //$('.printable').printThis();
      $('#appendreport').printThis();
      //window.print();
    });	
   </script> 
   @endsection