@extends('layouts.master')

@section('content')<!--
<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>
.vetualHolder{position:relative;}
.pogessimg img { 
    width: 50px; 
}
#button-style-switcher img{
	width: 50px;
}
#recording-instructions{margin:15px 20px;}
		#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;
}
</style>

    <section class="content-header on-print-hide">
		<h1> Case Diary </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">Case Diary</li>
		</ol>
		
        @include('layouts.partials._actionlink')
		
		 
    </section> 
 
 
 
	<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: 27cm !important;margin-left:20px !important;background:#fff !important;"> 
 	
	
		<div style="width: 100%; text-align: center; padding: 0px 0px 30px 0px;"><h2 style="margin:0px;text-align:center;font-family: 'Poppins', sans-serif;font-weight:bold;font-size: 30px;">Case Diary</h2></div>

		<div style="width: 40%; float: left;">
			<h4>थाना <input style="width:184px;border:none;outline:none;" type="" placeholder="" /></h4>     
			<p>  
				<span>
				<span style="font-weight: 500 !important; font-size: 15px;-webkit-box-sizing: border-box; -moz-box-sizing: border-box;  box-sizing: border-box;">प्रथम सूचना रिपोर्ट</span> 
				   <input style="width:166px;border:none;outline:none;" type="" placeholder="" />
				</span>
			</p>			
			<p> 
				<span class="dootedHldr">
					 <span style="font-weight: 500 !important; font-size: 15px;-webkit-box-sizing: border-box; -moz-box-sizing: border-box;  box-sizing: border-box;">घटना स्थल और</span>
				   <input style="width:165px;border:none;outline:none;" type="" placeholder="" />
				</span>
			</p>
			
			<p> 
				<span> 
					 <span style="font-weight: 500 !important; font-size: 15px;-webkit-box-sizing: border-box; -moz-box-sizing: border-box;  box-sizing: border-box;">तारीख</span> 
					 <input style="width:237px;border:none;outline:none;" type="" placeholder="" /> 
				</span> 
			</p> 
			
		</div>
		
		<div style="float: right;width: 52%;">
			<h4>जिला  <input style="width:184px;border:none;outline:none;" type="" placeholder="" /></h4>  
			<p>   
			    <span> 
					 <span style="font-weight: 500 !important; font-size: 15px;-webkit-box-sizing: border-box; -moz-box-sizing: border-box;  box-sizing: border-box;">जिमनी संo</span> 
					 <input style="border:none;width:210px;outline:none;" type="" placeholder="" /> 
				</span>
                
			</p> 
			<p>
					 <span style="font-weight: 500 !important; font-size: 15px;-webkit-box-sizing: border-box; -moz-box-sizing: border-box;  box-sizing: border-box;">थाने में प्राप्त होने का समय व तारीख </span>  
				<span><input style="border:none;outline:none;width:155px;" type="" placeholder="" /></span>
			</p>  
			<p>
					 <span style="font-weight: 500 !important; font-size: 15px;-webkit-box-sizing: border-box; -moz-box-sizing: border-box;  box-sizing: border-box;">थाने से रवाना होने का समय व तारीख  </span> 
				<span><input style="border:none;outline:none;width:150px;" type="" placeholder="" /></span>
			</p> 
			
		</div>
		
		<div style="clear: both;padding: 15px 0px;"> 
			<div style="text-align:left;"> 
				<p style="margin-top: 20px;margin-bottom:0px;"> 
					<span style="width:100%;position:relative;"> 
						<span style=" font-weight: 500 !important; font-size: 15px;"><b>अपराध </b></span> 
						 <input style="border:none;outline:none;width:660px;" type="" placeholder="" /> 
					</span> 
				</p>  
			</div>   
		</div>        	 
		
		<table style="border:1px solid #000;">
			<thead>
			  <tr>
				<th style="width:15%;text-align:center;padding:10px;border-right: 1px solid #000;border-bottom: 1px solid #000;"><span>तारीख और समय जिस  पर कार्यवाही की गई</span></th>
				<th style="width:15%;text-align:center;vertical-align: top !important;padding:10px;border-right: 1px solid #000;border-bottom: 1px solid #000;"><span>क्रमानुसार रिपोर्ट  क्रम संख्या</span></th>
				<th style="text-align:center;padding:10px;width:70%;vertical-align: top !important;text-align:center;padding:10px;border-bottom: 1px solid #000;"><span> अनुसंधान का    विवरण </span></th>
			  </tr>
			</thead>
			<tbody> 
			  <tr>
				<td style="border-right: 1px solid #000;vertical-align: top;padding-right:10px;padding-left:10px;"><textarea style="border:none;outline:none;resize:none;width:100% !important;height:520px;"></textarea></td>
				<td style="border-right: 1px solid #000;vertical-align: top;padding-right:10px;padding-left:10px;"><textarea style="border:none;outline:none;resize:none;width:100% !important;height:520px;"></textarea></td>
				<td style="vertical-align: top;padding-right:10px;padding-left:10px;"><textarea style="border:none;outline:none;width:100% !important;resize:none;height:520px;"></textarea></td> 
			  </tr>  			  
			</tbody>
		</table>  		 
    </div>
 
	
	
    <script src="{{ URL::asset('assets/VoiceSoftware/ready-hin-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({
		  importCSS: true,
          importStyle: true,//thrown in for extra measure
          loadCSS: "{{ URL::asset('assets/template/css/style.css') }}",
		});
    });	
   </script>
   
	<script>
		$(document).ready(function(){
			//$('textarea').autoResize();
			$('.getmoreArea1').click(function(){
				//alert('aaaaa');
				var html = '';
				html +='<div class="date_iming width_200"><div class="fillarea height"><textarea></textarea></div></div>';			

				html += '<div class="date_iming width_200"><div class="fillarea height"><textarea></textarea></div></div>';			
					
				html +='<div class="date_iming width_291"><div class="fillarea height"><textarea></textarea></div></div>';
			
				$('.mainFillarea').append(html);
			});
		});
		function myFunction() {
			//window.print();
		}
   </script>   
       
     
@endsection