@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;}
	.spce-btm{margin-bottom:50px;}
    .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> Form 160 </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">Form 160</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 style="clear: both; float: left;  width: 100%; padding: 20px 0px;">
				<ul style="margin: 0px; padding: 0px;">
					<li style="list-style: none; display: inline-block;"> 
					<div style="width: 100%;"> 
						<div style="width: 100%;">
						   <span>Case FIR no. </span>
						   <div contenteditable="true" style="display:inline-block;outline:none;word-break: break-word; min-width:45px;width:auto;border:none;border-bottom:1px dashed #000;" class="keyboard"></div>
						</div>
					</div>  
				   </li>
				   <li style="list-style: none; display: inline-block;"> 
					<div style="width: 100%;">
						<div style="width: 100%;">
						   <span>  Dated </span>
						   <div contenteditable="true" style="display:inline-block;outline:none;word-break: break-word; min-width:129px;width:auto;border:none;border-bottom:1px dashed #000;" class="keyboard"></div>
						</div>
					</div>			   
				   </li>
				   <li style="list-style: none; display: inline-block;"> 
					<div style="width: 100%;">
						<div style="width: 100%;">
						   <span>  U/S </span>
						   <div contenteditable="true" style="display:inline-block;outline:none;word-break: break-word; min-width:195px;width:auto;border:none;border-bottom:1px dashed #000;" class="keyboard"></div>
						</div>
					</div>			   
				   </li>
				   <li style="list-style: none; display: inline-block;">
					<div style="width: 100%;"> 
						<div style="width: 100%;">
						   <span> P.S. </span>
						   <div contenteditable="true" style="display:inline-block;outline:none;word-break: break-word; min-width:129px;width:auto;border:none;border-bottom:1px dashed #000;" class="keyboard"></div>
						</div>
					</div>			   
				   </li>
				</ul>
			</div>

            <div style="text-align: center;clear: both;float: left; width: 100%;">
		        <h4 style="text-align: center;display: inline-block; border-bottom: 1px solid #000;font-size:20px;">Notice U/S 160 Cr.P.C.</h4> 
		    </div>
			
			<div style="float:left;width:100%;margin-top:15px;">
			    <div style="float:left;width:3%;"><span>To,</span></div>
				<div style="float:left;width:97%;">
					<ul style="padding:0px;margin:0px;">
						<li style="list-style:none;margin-bottom: 20px;">	
							
							<div contenteditable="true" style="display:inline-block;outline:none;word-break: break-word; min-width:360px;width:auto;border:none;border-bottom:1px solid #000;" class="keyboard"></div>
						</li>
						<li style="list-style:none;margin-bottom: 20px;">	
							<div contenteditable="true" style="display:inline-block;outline:none;word-break: break-word; min-width:360px;width:auto;border:none;border-bottom:1px solid #000;" class="keyboard"></div>
						</li>
						<li style="list-style:none;margin-bottom: 20px;">	
							<div contenteditable="true" style="display:inline-block;outline:none;word-break: break-word; min-width:360px;width:auto;border:none;border-bottom:1px solid #000;" class="keyboard"></div>
						</li>

						<li style="list-style:none;margin-bottom: 20px;">	
							<div contenteditable="true" style="display:inline-block;outline:none;word-break: break-word; min-width:360px;width:auto;border:none;border-bottom:1px solid #000;" class="keyboard"></div>
						</li>					
					</ul>
				</div>
			</div>
			<div style="float:left;width:100%;margin:40px 0px;">
			   <div style="display:block;line-height:40px;">Where as Appears that you are acquainted with the facts/circusmstances of the above cited case you are here by informed appear before the undersigned on date <div contenteditable="true" style="display:inline-block;outline:none;word-break: break-word; min-width:250px;width:auto;border:none;border-bottom:1px solid #000;height:28px;" class="keyboard"></div> at <div contenteditable="true" style="display:inline-block;outline:none;word-break: break-word; min-width:150px;width:auto;border:none;border-bottom:1px solid #000;height:28px;" class="keyboard"></div>Police Station<div contenteditable="true" style="display:inline-block;outline:none;word-break: break-word; min-width:260px;width:auto;border:none;border-bottom:1px solid #000;height:28px;" class="keyboard"></div>Haryana in Connection with above cited case, Kindly note that the failure to attend as required may attract penel proceeding/ U/s 174 I.P.C.</div>
			</div>
			
			<div style="float:left;width:100%;margin:10px 0px;">
				<div style="float:right;width:50%;margin:10px 0px;text-align:right;">
					<span>I.O</span><div contenteditable="true" style="display:inline-block;outline:none;word-break: break-word; min-width:163px;width:auto;border:none; text-align:left;" class="keyboard"></div>
				</div>
			</div>
			<div style="float:left;width:100%;margin:0px 0px;">
			    <div style="float:left;width:50%;">
			        <span>Date</span><div contenteditable="true" style="display:inline-block;outline:none;word-break: break-word; min-width:160px;width:auto;border:none;border-bottom:1px solid #000; " class="keyboard"></div>
			    </div>
				
			    <div style="float:right;width:50%;text-align: right;"> 
			        <span>P.S.</span><div contenteditable="true" style="display:inline-block;outline:none;word-break: break-word; min-width:160px;width:auto;border:none;border-bottom:1px solid #000; text-align:left;" class="keyboard"></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;}
						.spce-btm{margin-bottom:50px;}
						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> 
	$('#PrntBtn').on("click", function () {
      //$('.printable').printThis();
      $('#appendreport').printThis();
      //window.print();
    });	
   </script>
   
   
   @endsection