@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> Version Child </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">Version Child</li>
		</ol> 
        @include('layouts.partials._actionlink') 
    </section> 
	
	
    <div id="appendreport">
	@if(!empty($data))
	{!!  $data !!}
	@else	
	<div class="defoultpage" style="width:21cm;min-height: 29.5cm;background:#fff;float:left;">  
			<!--- START TOP TEMPLATE HEADER --->

                <div style="width:100%;float:left;"> 
					<div style="font-size:15px;width:100%;float:left;"> 
						<div style="width:40%;float:left;"> 
							<div style="width:100%;">  
								<span>  Case FIR/DD No.   </span>
								<div contenteditable="true" style="display:inline-block;outline:none;word-break: break-word;min-width:165px;width:auto;border-bottom:1px dashed #000;" class="keyboard"></div> 
							</div> 
						</div>
						<div style="float: left; width:22%;"> 
							<div style="width: 100%;">  
								<span> Date   </span>
								<div contenteditable="true" style="display:inline-block;outline:none;word-break: break-word;min-width:110px;width:auto;border-bottom:1px dashed #000;" class="keyboard"></div>
							</div>  
						</div>

						<div style="float: right; width: 38%;"> 
							<div style="width: 100%;">  
								<span> U/Sec.   </span>
								<div contenteditable="true" style="display:inline-block;outline:none;word-break: break-word;min-width:223px;width:auto;border-bottom:1px dashed #000;" class="keyboard"></div>
							</div>  
						</div>				
					</div>   
					  
					<div style=" float: left;  width: 100%; padding:5px 0px;font-size:15px;">
						<ul style="margin: 0px; padding: 0px;width: 100%;">
							<li style="list-style: none;float:left;width:40%;">  
								<div style="width: 100%;">
								   <span>P.S </span>
								   <div contenteditable="true" style="display:inline-block;outline:none;word-break: break-word; min-width:250px;width:auto;border-bottom:1px dashed #000;margin-top:15px;" class="keyboard"></div>
								</div>   
						   </li>
						   <li style="list-style: none;float:left;width:30%"> 
								<div style="width: 100%;">
								   <span>   Distt.  </span>
								  <div contenteditable="true" style="display:inline-block;outline:none;word-break: break-word; min-width:170px;width:auto;border-bottom:1px dashed #000;margin-top:15px;" class="keyboard"></div>
								</div> 			   
						   </li>
						   <li style="list-style: none;float:left;width:30%"> 
								<div style="width: 100%;">
								   <span>  Delhi</span>
								  <div contenteditable="true" style="display:inline-block;outline:none;word-break: break-word; min-width:176px;width:auto;border-bottom:1px dashed #000;margin-top:15px;" class="keyboard"></div>
								</div> 		   
						   </li>  
						</ul>
					</div> 				
				</div>
            <!--- END TOP TEMPLATE HEADER ---> 
			
			<div style="width:100%;float:left;text-align:center;">
			    <h4 style="margin:20px 0px 30px 0px; display: inline-block; border-bottom: 1px solid #000;font-size:20px;">(verion of Child in conflict with law</h4>
			</div>	
			
			<div style="width:100%;float:left;">
			    <p style="font-size: 17px;text-align: center;">(to be recorded in presence of his father / mother / guardian / fit person / probation officer.)</p>
				<div style="width:100%;float:left;">
				    <div contenteditable="true" style="display:inline-block;outline:none;word-break: break-word; min-width:100%;width:auto;min-height:500px;text-align:justify;" class="keyboard"></div>
				</div>
            </div>
			<div style="width:100%;float:left;">
			    <span style="font-size: 18px;text-align: left;">Proceedings conducted from</span>		
                <div contenteditable="true" style="display:inline-block;outline:none;word-break: break-word; min-width:480px;width:auto;border-bottom:1px dashed #000;" class="keyboard"></div>				
            </div>
			 

			 
 				
			<!--- END TEMPLATE FILL OUT AREA --->
			
			<div style="width:100%;float:left;"> 
				<div style="float:right;width:40%;">	 
					<div style="float:left;width:100%;">	 
						<p style="text-align:left;line-height:30px;">Signature of father/mother/<br>guardian /fit person/probation officer</p>				
					</div>
					<div style="float:left;width:100%;">	 
						<p style="text-align:left;line-height:30px;margin-bottom: 0px;">Signature of IO / JWO</p>
						<div style="width:100%;float:left;">
						   <span>P.S.</span>
						   <div contenteditable="true" style="display:inline-block;border:none;outline:none;min-width:250px !important;width:auto;word-break: break-word;" class="keyboard"></div>
						    
						</div>	

						<div style="width:100%;float:left;">
						   <span>Distt</span>
						   <div contenteditable="true" style="display:inline-block;border:none;outline:none;min-width:250px !important;width:auto;word-break: break-word;" class="keyboard"></div>
						    
						</div>

						<div style="width:100%;float:left;">
						   <span>Date</span>
						   <div contenteditable="true" style="display:inline-block;border:none;outline:none;min-width:250px !important;width:auto;word-break: break-word;" class="keyboard"></div>
						    
						</div>						
					</div> 				
				</div> 		
			</div> 
            <div style="width:100%;float:left;margin-top:30px;">
 			    <p style="font-size:18px;">Follow up action recommended specially in case allegations of mistreatment / about etc. are made out against any person on basis of version of CCL.</p>
			</div> 	
			
			<div style="width:100%;float:left;margin-top:50px;text-align:right;font-size:20px;">
			     <span>Signature of IO / JWo</span>
			</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/VoiceSoftware/printThis.js') }}"></script>
    <script> 
	$('#PrntBtn').on("click", function () {
      //$('.printable').printThis();
      $('#appendreport').printThis();
      //window.print();
    });	
   </script>
   
   
   @endsection