@extends('layouts.master')
<link href="https://fonts.googleapis.com/css?family=Montserrat|Open+Sans:300i,400,400i,600,700,700i" rel="stylesheet">
@section('content')
<style>
.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;
}
.content-header{padding-left:0px;}
.note-editable p{line-height:30px !important;font-family: 'Montserrat', sans-serif !important;font-size
:12px;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;
}
</style>
<!-- Default box -->
    <section class="content-header">
      <h1>
        English-recognition
        
      </h1>
      <ol class="breadcrumb">
        <li><a href="/"><i class="fa fa-dashboard"></i> Home</a></li>
        <li class="active">Dashboard</li>
        <li class="active">English-recognition</li>
      </ol> 
	   @include('layouts.partials.active-menu')	 
    </section> 
            <div class="row">  
                <div class="col-lg-8 col-md-8 col-xs-8 app" style="padding-right: 0px;">  
                    <!-- keyboard input -->
					<div class="vetualHolder" > 
						<h3>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">
							<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;
								}
							}					
							</style>							
							
							<!--<div id="note-textarea"></div>-->
							</div>  
							
							</form>					
						</div>
					</div>
				</div> 
				<div class="col-md-4 buttonHolder">
					
					
					<h3>My Saved Notes</h3>
					<ul id="notes">
						<li>
							<p class="no-notes">You don't have any notes.</p>
						</li>
					</ul>				   
				</div>  
			</div>  
		
<script src="{{ URL::asset('assets/VoiceSoftware/eng-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>
$(document).ready(function() {
  $('#note-textarea').summernote(
{
    addclass: {
        debug: false,
        classTags: [{title:"Button","value":"btn btn-success"},"jumbotron", "lead","img-rounded","img-circle", "img-responsive","btn", "btn btn-success","btn btn-danger","text-muted", "text-primary", "text-warning", "text-danger", "text-success", "table-bordered", "table-responsive", "alert", "alert alert-success", "alert alert-info", "alert alert-warning", "alert alert-danger", "visible-sm", "hidden-xs", "hidden-md", "hidden-lg", "hidden-print"]
    },
    toolbar: [
                ['style', ['style']],
                ['font', ['bold', 'italic', 'underline', 'clear']],
                ['fontname', ['fontname']],
                ['fontsize', ['fontsize']],
                ['color', ['color']],
                ['para', ['ul', 'ol', 'paragraph']],
                ['height', ['height']],
                ['table', ['table']],
                ['insert', ['link', 'picture', 'video', 'hr']],
                ['view', ['codeview']]
            ],
    		fontSizes: ['8', '9', '10', '11', '12', '14', '16', '18'],
            fontsize: '16',
            height: 1000,
			width: 650,
  			dialogsInBody: true

});

/* summer note default font size initilize here */

$('#note-textarea').summernote('fontSize', 16);

/*end here font size */

  $('#print-btn').on('click',function(){
  	$('#note-textarea').print();
  });
});	
	
		
			$(function(){
				
				$('#SaveInFile').click(function(){
					$('#contentFrm').submit();
					
				});
				
				$('#sendEmail').click(function(){
					var email = prompt("", "{{ucfirst(Auth::guard('doctor')->user()->email)}}");
					var conts = $('.note-editable').html();
						if (email != null && conts != null) {
							$.ajax({

							url : '/Send-email-with-contents',
							type : 'POST',
							data: {
								'contents':conts,
								'email':email,
								'_token': $('meta[name="csrf_token"]').attr('content'),					  
							},
							dataType:'html',
							success : function(data) {              
								alert('Mail sent successfully.');
							},
							error : function(request,error)
							{
								alert("Request: "+JSON.stringify(request));
							}
						});
					}else{
						alert('Email id and contents not empty.');
					}
					
				});
			});
		</script>
        <!-- ./col -->
        <!-- ./col -->
      </div>
      <!-- /.row -->     
@endsection