@extends('layouts.master')

@section('content') 
    <link href="{{ URL::asset('assets/template/css/style.css') }}" rel="stylesheet" type="text/css">  
    <link href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/summernote.css" rel="stylesheet">
<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:15px;
}
.content { 
    float: left;
    width: 100%;
}
.main-footer{float:left;width:100%;}
	.page{
	width: 21cm;
    min-height:auto;
    padding: 40px;
    background: white;
    margin-left: 20px !important;
	margin-bottom:20px;
	float:left;
		}			 
	</style> 
<!-- Default box -->
    <section class="content-header on-print-hide">
        <h1> सजा स्लिप </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">सजा स्लिप </li>
		</ol>
        @include('layouts.partials._actionlink')	  
    </section>  

<div id="appendreport">
	@if(!empty($data))
	{!!  $data !!}
	@else
    <div class="page" id="printable">  
    <div class="subpage"> 
		<style>

			.DateOption {
				clear: both;
				float: left;
				width: 100%;
				padding: 20px 0px;
			}
			.DateOption ul {
				margin: 0px;
				padding: 0px;
			}
			.DateOption ul li {
				list-style: none;
				display: inline-block;
			}
			.ghatnaHolder {
				width: 100%;
				display: block;
				overflow: hidden;
			}
			.dootedHldr {
				width: 100%;
				position: relative;
			}
			.content-header{
				width: 21cm; 
				padding-left: 0px;
				padding-right: 0px;
				margin-bottom: 30px;
				margin-left:0px !important;
				float:left;
			}	
			.content-header>.breadcrumb {
				float: right;
				padding-right: 0px;
				right: 0px;

			}  
			.page{
				width: 21cm;
				min-height: 29.7cm;
				padding: 40px;   
				background: white; 
				margin-left: 20px !important;
				float: left !important;
			} 
			.subpage{float: left !important;}
		</style>  
		
	    <div style="width: 100%; text-align: center; padding: 0px 0px 30px 0px;">
		    <h2 style="margin:0px;text-align:center; font-weight:bold;font-size: 30px;">सजा स्लिप</h2>
		</div>

        <div style="width:100%;"> 
			<div style="width:50%;float:left;"> 
				<div style="font-weight: 500 !important; font-size: 18px !important;"> 
				   <span>थाना</span>  
				   <div contenteditable="true" style="display:inline-block;outline:none;word-break: break-word; min-width:150px;width:auto;border:none; " class="keyboard"></div>
				</div> 
			</div>
			<div style="float: right; width: 50%;">  
				<div style="font-weight: 500 !important; font-size: 18px !important;">
				   <span>जिला</span>  
				   <div contenteditable="true" style="display:inline-block;outline:none;word-break: break-word; min-width:150px;width:auto;border:none; " class="keyboard"></div>					   
				</div>  
			 </div>		   
		</div> 		
		
        <div style="float: left;width: 100%; padding: 20px 0px;margin:20px 0px;">
		    <ul style="margin: 0px; padding: 0px;">
			    <li style="list-style: none; display: inline-block;">  
					<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;border-bottom:1px dashed #000;" class="keyboard"></div>
					</div>  
			   </li>
			   <li style="list-style: none; display: inline-block;"> 
					<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;border-bottom:1px dashed #000;" class="keyboard"></div>
					</div> 			   
			   </li>
			   <li style="list-style: none; display: inline-block;">  
					<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;border-bottom:1px dashed #000;" class="keyboard"></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;border-bottom:1px dashed #000;" class="keyboard"></div>
						</div>
					</div>			   
			   </li>
			</ul>
		</div>  		
		
		<table style="border:1px solid #000;" cellspacing="0"> 
			<tr>
				<th style="width:30%;text-align:center;padding:10px;border-right: 1px solid #000;border-bottom: 1px solid #000;    vertical-align: top;"><span>नाम पता दोषी व पहचानने योग्य</span></th>
				<th style="width:6%;text-align:center;padding:10px;border-right: 1px solid #000;border-bottom: 1px solid #000;    vertical-align: top;"><span>तिथि वकू</span></th>
				<th style="border-right: 1px solid #000;text-align:center;padding:10px;vertical-align: top !important;text-align:center;padding:10px;border-bottom: 1px solid #000;width:6%;vertical-align: top;"><span> तिथि रजू </span></th>
				<th style="border-right: 1px solid #000;text-align:center;padding:10px;vertical-align: top !important;text-align:center;padding:10px;border-bottom: 1px solid #000;width:6%;"><span> तिथि गि०</span></th>

				<th style="width:12%;text-align:center;padding:10px;vertical-align: top !important;text-align:center;padding:10px;border-bottom: 1px solid #000;border-right: 1px solid #000;"><span> अपराध</span></th>	
				<th style="text-align:center;padding:10px;vertical-align: top !important;text-align:center;padding:10px;border-bottom: 1px solid #000;width:40%;"><span> आखिरी आदेश अदालत</span></th>						
			</tr> 
			<tbody border="0" cellpadding="0" cellspacing="0">
				<tr>
					<td style="border-right: 1px solid #000;vertical-align: top;padding-right:10px;padding-left:10px;"> 
					   <div contenteditable="true" style="display:inline-block;outline:none;word-break: break-word; min-width:100%;width:auto;border:none;min-height:850px;max-height:100%;text-align: justify;line-height: 25px;" class="keyboard"></div> 
					</td>
					<td style="border-right: 1px solid #000;vertical-align: top;padding-right:10px;padding-left:10px;">
					   <div contenteditable="true" style="display:inline-block;outline:none;word-break: break-word; min-width:100%;width:auto;border:none;min-height:850px;max-height:100%;text-align: justify;line-height: 25px;" class="keyboard"></div>
					</td>
					<td style="border-right: 1px solid #000;vertical-align: top;padding-right:10px;padding-left:10px;">
					   <div contenteditable="true" style="display:inline-block;outline:none;word-break: break-word; min-width:100%;width:auto;border:none;min-height:850px;max-height:100%;text-align: justify;line-height: 25px;" class="keyboard"></div>
					
					</td> 
					<td style="border-right: 1px solid #000;vertical-align: top;padding-right:10px;padding-left:10px;">
					   <div contenteditable="true" style="display:inline-block;outline:none;word-break: break-word; min-width:100%;width:auto;border:none;min-height:850px;max-height:100%;text-align: justify;line-height: 25px;" class="keyboard"></div>
					</td> 
					<td style="border-right: 1px solid #000;vertical-align: top;padding-right:10px;padding-left:10px;">
					   <div contenteditable="true" style="display:inline-block;outline:none;word-break: break-word; min-width:100%;width:auto;border:none;min-height:850px;max-height:100%;text-align: justify;line-height: 25px;" class="keyboard"></div>
					</td> 
					<td style="vertical-align: top;padding-right:10px;padding-left:10px;">
						<div contenteditable="true" style="display:inline-block;outline:none;word-break: break-word; min-width:100%;width:auto;border:none;min-height:850px;max-height:100%;text-align: justify;line-height: 25px;" class="keyboard"></div>
					</td> 					
				</tr>  			  
			</tbody>
		</table>
	</div>
		
		<style type="text/css" media="print">
			@media print {  
				    .page { 
						padding:0px !important;   
						margin-left:0px !important;
						float: left !important;
					} 
                    .subpage{float: left !important;}		 				
			}
		</style>   		
    </div> 
@endif
</div>
	<script src="{{ URL::asset('assets/VoiceSoftware/ready-lang-script.js') }}"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/summernote.js"></script>
   <script src="{{ URL::asset('assets/VoiceSoftware/printThis.js') }}"></script>
    <script> 
		$('#PrntBtn').on("click", function () {
		  $('#printable').printThis({
			  importCSS: true,
			  importStyle: true,//thrown in for extra measure
			  loadCSS: "{{ URL::asset('assets/template/css/style.css') }}",
			});
		});	
   </script>      
@endsection