@extends('layouts.master')

@section('content')

<meta http-equiv="content-type" content="text/html;CHARSET=UTF-8">
<!--
<link href="{{ URL::asset('assets/template/css/bootstrap.min.css') }}" rel="stylesheet">
<link href="{{ URL::asset('assets/template/css/style.css') }}" rel="stylesheet" type="text/css"> 
<link href="{{ URL::asset('assets/template/css/font-family.css') }}" rel="stylesheet" type="text/css"> 
 Default box -->
 	<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: 170px;
			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.on-print-hide {
    width: 21cm;
    margin: 0px auto;
    padding-right: 0px;
    padding-left: 0px;
    margin-left: 20px !important;
    margin-bottom: 30px;
}
.content { 
    float: left;
    width: 100%;
}
.main-footer{float:left;width:100%;}
			 
	</style>
    <section class="content-header on-print-hide">
		<h1> Accident </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">Accident</li>
		</ol>
		
        @include('layouts.partials._actionlink')
		
		 
    </section> 
	
	
		<div id="appendreport">
			@if(!empty($data))
{!!  $data !!}
@else
		<div id="printable" style="box-shadow: 0 0 0.5cm rgba(0,0,0,0.5);padding: 40px 40px !important;width: 21cm !important;min-height: 29cm !important;margin:0 auto !important;background:#fff !important; float:left;margin-left: 20px !important;"> 
   
		  
		<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%;margin:0px;padding:0px;margin-top: 60px;margin-bottom: 60px;float:left;">
			<ul style="width:100%;margin:0px;padding:0px;"> 
				<li style="width:100%;float:left;list-style:none;">  
					<div style="width:100%;float:left;">  
						<div class="width: 100%;">
							<span style="display:inline-block;float:left;"> राज्य द्वारा:- </span> 
							<div contenteditable="true" style="display:inline-block;outline:none;word-break: break-word; min-width:640px;width:auto;border:none;" class="keyboard"></div>
							
						</div>  
					</div>
				</li>
			</ul>		
		</div>
		<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>मुक़दमा नo- </span>
					   <div contenteditable="true" style="display:inline-block;outline:none;word-break: break-word; min-width:45px;width:auto;border:none;" class="keyboard"></div>
					</div>
				</div>  
			   </li>
			   <li style="list-style: none; display: inline-block;"> 
				<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:129px;width:auto;border:none;" class="keyboard"></div>
					</div>
				</div>			   
			   </li>
			   <li style="list-style: none; display: inline-block;"> 
				<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:195px;width:auto;border:none;" class="keyboard"></div>
					</div>
				</div>			   
			   </li>
			   <li style="list-style: none; display: inline-block;">
				<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:129px;width:auto;border:none;" class="keyboard"></div>
					</div>
				</div>			   
			   </li>
			</ul>
		</div> 
		
		 <div style="text-align: center;clear: both;margin: 30px 0px; float: left; width: 100%;">
		     <h4 style="text-align: center;display: inline-block; border-bottom: 1px solid #000;">ईतलानामा बन्दी तफतीश</h4> 
		 </div>
        
		<div style="float: left; text-align: justify; line-height: 36px;">
			<div>
			  <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 style="width:100%;margin-top: 100px;float:left;">
			<div style="width:30%;float:right;"> 
			    <p style="width:100%;padding-left: 50px;">प्रबंधक</p>
				<div style="width:100%;margin-bottom:20px;"> 
					<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 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>
			 
	  </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