@extends('layouts.master')

@section('content')
<meta http-equiv="content-type" content="text/html;CHARSET=UTF-8">
<link href="https://fonts.googleapis.com/css?family=Montserrat|Open+Sans:300i,400,400i,600,700,700i" rel="stylesheet">
<link rel="stylesheet" href="{{ URL::asset('css/style.css') }}">
<style>
.login-box, .register-box {
    width: 360px;
    margin: 11% auto;
}
button.close {
    background: #f36d21 none repeat scroll 0 0;
    border-radius: 50%;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.08);
    cursor: pointer;
    font-size: 22px;
    height: 35px;
    opacity: 1;
    position: absolute;
    right: -16px;
    top: -19px;
    width: 35px;
    z-index: 9999;
    color: #fff !important;
    outline: none;
    text-shadow: none;
    font-size: 18px;
    z-index: 9999999;
    background: #158cbb !important;
    opacity: 1;
}
button.close:hover{
	opacity: 1;
	background: #158cbb !important;
	color: #fff !important;
}
</style>
<style>
body{background:#222d32 !important}
.vetualHolder{position:relative;}
.pogessimg img { 
    width: 50px; 
}
.content-header>h1{
	font-family: 'Montserrat', sans-serif !important;
}
.vetualHolder h3{
	font-family: 'Montserrat', sans-serif !important;
}
.buttonHolder h3{
	font-family: 'Montserrat', sans-serif !important;
}
#recording-instructions{margin:15px 0px;font-family: 'Montserrat', sans-serif !important;color: #3c8dbc;word-spacing: 2px;}
#notes .content {
    min-height: auto !important; 
    padding: 0px !important; 
}
.note-editable{
	font-family: 'Montserrat', sans-serif !important;
	height: auto !important;
    min-height: 600px !important;
    padding: 20px 30px !important; 
}
#contentFrm{margin-top:20px;}
.content{
	font-family: 'Montserrat', sans-serif !important;
	min-height:100% !important;
	float:none !important;
} 
.content-header{padding-left:0px;padding-right:0px;}
.note-editable {line-height:30px !important;font-family: 'Montserrat', sans-serif !important;font-size
:16px;margin-bottom:0px !important;}
.note-editable p{line-height:30px !important;font-family: 'Montserrat', sans-serif !important;font-size
:16px;margin-bottom:0px !important;}
.note-toolbar-wrapper .note-btn-group.btn-group.note-view{margin-right:0px !important;}
.note-toolbar-wrapper.panel-default{height: 21px !important;}
.note-editable{
	background-color: #fff;
    background-image: -webkit-linear-gradient(#f6abca 1px,transparent 1px),-webkit-linear-gradient(#f6abca 1px,transparent 1px),-webkit-linear-gradient(#e8e8e8 1px,transparent 1px);
    background-image: -moz-linear-gradient(#f6abca 1px,transparent 1px),-moz-linear-gradient(#f6abca 1px,transparent 1px),-moz-linear-gradient(#e8e8e8 1px,transparent 1px);
    background-image: -o-linear-gradient(#f6abca 1px,transparent 1px),-o-linear-gradient(#f6abca 1px,transparent 1px),-o-linear-gradient(#e8e8e8 1px,transparent 1px);
    background-image: linear-gradient(#f6abca 1px,transparent 1px),linear-gradient(#f6abca 1px,transparent 1px),linear-gradient(#e8e8e8 1px,transparent 1px);
    background-size: 1px 1px,1px 1px,30px 30px;
    background-repeat: repeat-y,repeat-y,repeat;
    background-position: 22px 0,25px 0,0 30px;
    -xwebkit-box-shadow: 0 0 0 1px rgba(0,0,0,.15),0 0 4px rgba(0,0,0,.5);
    box-shadow: 0 23px 40px rgba(0,0,0,.2)!important;
	margin-top: 54px;
	font-family: 'Poppins', sans-serif !important;
	padding-top: 0px !important;
}
 
.note-editor.note-frame{width:100% !important;}
#notes{padding:0px;font-family: 'Poppins', sans-serif !important;}
#notes li{list-style:none;}
.table-bordered>thead>tr>th, .table-bordered>tbody>tr>th, .table-bordered>tfoot>tr>th, .table-bordered>thead>tr>td, .table-bordered>tbody>tr>td, .table-bordered>tfoot>tr>td{
	border: 1px solid #a2a0a0 !important;
}
.table-bordered {
    border: 1px solid #a2a0a0 !important;
} 
.table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th{padding:5px !important;line-height:20px !important;}
		#button-style-switcher {
			background: #fff;
			box-shadow: 0 4px 14px rgba(0,0,0,.14); 
			position: fixed;
			top: 207px;
			width: 180px;
			z-index: 9999;
			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;
}
ul.buttons li select{padding: 2px 12px !important;}
#record-instruct{ 
    margin: 10px 0px 0px 0px;
    padding: 0px 0px 0px 10px;
}
#offline_user{
	margin: 10px 0px 0px 0px;
    padding: 0px 0px 0px 10px;
}
.header span.date{display:block;}
</style>

<!-- Default box -->
    <section class="content-header"> 
      <h1>
        Note-Pad
        
      </h1>
      <ol class="breadcrumb" style="right:0;">
        <li><a href="/"><i class="fa fa-dashboard"></i> Home</a></li>
        <li class="active">Dashboard</li>
        <li class="active">Note-Pad</li>
      </ol>  
      @include('layouts.partials.active-menu')	  
    </section> 

	  
            <div class="row">  
                <div class="col-md-10 app" style="padding-right: 0px;"> 
			         
					<div class="vetualHolder" > 

						<!-- keyboard input -->
						<h3 style="font-size: 18px;">Add New Note</h3>
						<p id="recording-instructions">
							 Press the <strong>Start Recognition</strong> button and allow access.
						</p>
						<div id="printable">
							<form id="contentFrm" action="{{route('SaveContentInFile')}}" method="post">
							<!--<textarea id="test" name="name"></textarea> -->
							<input type="hidden" name="_token" value="{{ csrf_token() }}">
							<div class="input-single"> 
							<textarea class="keyboard" rows="20" cols="80" id="note-textarea" name="contents" ></textarea>
							<style>		
							@media print
							{    
								.note-editable
								{
									box-shadow: none !important; 
									background:#fff !important;
								}
								@page{margin:0px;}
							}					
							</style>							
							<!--<div id="note-textarea"></div>-->
							</div>  
							
							</form>					
						</div>
					</div>    						
		        </div>
				<div class="col-md-2 buttonHolder">  
					<h3 style="font-size: 18px;">My Saved Notes</h3>
					<ul id="notes">
						<li>
							<p class="no-notes">You don't have any notes.</p>
						</li>
					</ul>				   
				</div>  
			</div> 

<div class="modal fade" id="subscriptionMOdal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">BhashaLekhan Subscription Plan</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
  <div class="container-fluid">
    
			
			        <div class="col-md-12 " style="clear:both;">   
  					    <div class="row clearfix">
					        <div class="col-md-7">
								<div class="subscriptionHoldr">
									<div class="item">
										<div class="sg-package">
											<div class="sg-package__header sg-target-sh5">
												<h4>6 Months<span> PLAN</span></h4>
												<span>Starting at <b>₹ 5999/-</b> <br>GST Included </br></span>
											</div>
											<div class="sg-package__specs">
												<div class="sg-package__specsrow">
													<div class="cntHolder_">
														<i style="color: #40d4a5;" class="fa fa-rupee"></i><span>Price</span>
													</div>
													<div>
														<span class="sg-boxed">₹ 5999/- </span>
													</div>
												</div>
												
												<div class="sg-package__specsrow">
													<div class="cntHolder_">
														<i style="color: #40d4a5;" class="fa fa-rupee"></i><span>GST</span>
													</div>
													<div>
														<span>18%</span>
													</div>
												</div>												
												<div class="sg-package__specsrow">
													<div class="cntHolder_">
														<i style="color: #40d4a5;" class="fa fa-clock-o"></i><span> Tenure</span>
													</div>
													<div>
														<span>6 Months</span>
													</div>
												</div>
												<div class="sg-package__specsrow">
													<div class="cntHolder_">
														<i style="color: #40d4a5;" class="fa fa-circle-o-notch fa-spin"></i><span>Updates</span>
													</div>
													<div>
														<span><b>1 Updates</b></span>
													</div>
												</div> 
												<div class="sg-action">
													<a href="javascript:void(0);" subscriptioncat="2" class="sg-button sg-button--darkblue plan_button" data-val="0">Interested</a>
												</div>
											</div>
										</div>
									</div>
								</div> 
							</div>
							
					        <div class="col-md-5">
								<div class="owl-item active">
									<div class="item">
										<div class="sg-package">
											<div class="sg-package__header sg-target-sh5">
												<h4>1 Year<span> PLAN</span></h4>
												<span>Starting at <b>₹ 11999/-</b> <br> GST Included </br></span>
											</div>
											<div class="sg-package__specs">
												<div class="sg-package__specsrow">
													<div class="cntHolder_">
														<i style="color: #40d4a5;" class="fa fa-rupee"></i><span>Price</span>
													</div>
													<div>
														<span class="sg-boxed">₹  11999/- </span>
													</div>
												</div>
												
												<div class="sg-package__specsrow">
													<div class="cntHolder_">
														<i style="color: #40d4a5;" class="fa fa-rupee"></i><span>GST</span>
													</div>
													<div>
														<span>18% </span>
													</div>
												</div>
												
												<div class="sg-package__specsrow">
													<div class="cntHolder_">
														<i style="color: #40d4a5;" class="fa fa-clock-o"></i><span>Tenure</span>
													</div>
													<div>
														<span>12 Months</span>
													</div>
												</div>
												<div class="sg-package__specsrow">
													<div class="cntHolder_">
														<i style="color: #40d4a5;" class="fa fa-circle-o-notch fa-spin"></i><span>Updates</span>
													</div>
													<div>
														<span><b> 2 Updates</b></span>
													</div>
												</div> 
												<div class="sg-action">
													<a href="javascript:void(0);" subscriptioncat="1"class="sg-button sg-button--darkblue plan_button" data-val="1">Interested</a>
													 
												</div>
											</div>
										</div>
									</div>
								</div> 
							</div>						
					    </div>
					</div>
			    </div>
			</div>
		
  </div>
</div>
      
    </div>
  </div>
</div>		
<script src="{{ URL::asset('assets/VoiceSoftware/ready-lang-script.js') }}"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/summernote.css" rel="stylesheet">
<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>
		function myFunction() {
			//$.print("#printable");
			//$('#printable').printThis();
		}

	$('#PrntBtn').on("click", function () {
      $('.note-editable').printThis({
		  importCSS: true,
          importStyle: true,//thrown in for extra measure
          loadCSS: "{{ URL::asset('assets/template/css/style.css') }}",
		});
    });	
   </script>

<script>

var explode = function(){
	var options = {
  		'backdrop' : 'static'
	}
  	$('#subscriptionMOdal').modal(options);
};
<br />
<b>Fatal error</b>:  Uncaught Error: Call to undefined function auth() in /opt/lampp/htdocs/bhashalekhan.com/resources/views/user/hindi-recog.blade.php:434
Stack trace:
#0 {main}
  thrown in <b>/opt/lampp/htdocs/bhashalekhan.com/resources/views/user/hindi-recog.blade.php</b> on line <b>434</b><br />