@extends('layouts.master')
<link href="https://fonts.googleapis.com/css?family=Montserrat|Open+Sans:300i,400,400i,600,700,700i" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Arvo|Charm|Karla|Lobster|Mukta|Noto+Sans|Noto+Serif+SC|Noto+Serif+TC|Rajdhani|Raleway|Roboto|Source+Sans+Pro|Poppins" rel="stylesheet">
@section('content')
<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: 40px 10px !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 {font-family: 'Montserrat', sans-serif !important;font-size
:16px;margin-bottom:0px !important;}
.note-editable p{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; 
    box-shadow: 0 23px 40px rgba(0,0,0,.2)!important;
	margin-top: 70px;
	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;}
.note-editable {
  line-height: 1.0;
}

.tab__content {
	
	border: 1px solid #ccc; background: #fff; 
}
.tab__content table th{ background: #f5f5f5;
    color: #252525;}
.tab__content table td, table th{ padding: 10px;font-size: 14px;}
.slideContent{display:none;}
.viewPrent{text-align:right;}
.slideHldr{position:relative;padding-right: 17px;color: #3c8dbc;cursor:pointer;}
.slideHldr:before {
    content: "\f196";
    font-family: FontAwesome; 
    position: absolute;
    top: 0;
    right: 0;
}
.slideHldr.IconChange:before{
	content: "\f147";
}
</style>
<!-- Default box -->
    <section class="content-header">
    <h1>
       Legal Note Management
    </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">Legal Note</li>
    </ol> 
	   @include('layouts.partials.active-menu')	 
    </section>  
	 
            <div class="row">  
                <div class="col-md-8 app" class="context" style="padding-right: 0px;">  
                    <!-- keyboard input -->
					<div class="vetualHolder" > 
						<h3 style="font-size: 18px;"> Create Legal note</h3>
						<p id="recording-instructions">
							 Press the <strong>Start Recognition</strong> button and allow access.
						</p>
						
						<!-- Tables list commands -->
						<div>
						    <div class="viewPrent"><span id="MenuView" class="slideHldr">View Commands</span></div>
							
							<div class="slideContent"> 
								<p>The following tables list commands that you can use with Speech Recognition.</p>
								<div class="tab__content"> 
									<table class="border--round table--alternate-row" style="width:100%;">
										<thead>
											<tr>
											    <th>Say this</th>
												<th>To do this</th> 
											</tr>
										</thead>
										<tbody>
											<tr>
												
												<td>full stop sign</td>
												<td> <span class="sign_mark"> . </span> </td>
											</tr>
											<tr> 
												<td>comma sign</td>
												<td> <span class="sign_mark"> , </span></td>
											</tr>
											<tr> 
												<td>exclamation mark sign</td>
												<td> <span class="sign_mark"> ! </span></td>
											</tr>
											<tr> 
												<td>ampersand sign</td>
												<td> <span class="sign_mark"> & </span> </td>
											</tr>
											<tr> 
												<td>apostrophe sign</td>
												<td> <span class="sign_mark"> ' </span> </td>
											</tr>
											<tr> 
												<td>degree sign</td>
												<td> <span class="sign_mark"> ° </span></td>
											</tr>
											<tr> 
												<td>hashtag sign</td>
												<td><span class="sign_mark"> # </span></td>
											</tr>
											<tr> 
												<td>vertical bar sign</td>
												<td> <span class="sign_mark"> | </span></td>
											</tr>
											<tr> 
												<td>ellipsis sign</td>
												<td><span class="sign_mark"> ... </span></td>
											</tr>
											<tr> 
												<td>colon sign</td>
												<td><span class="sign_mark"> : </span></td>
											</tr>
											<tr> 
												<td>semicolon sign</td>
												<td> <span class="sign_mark"> ; </span></td>
											</tr>
											<tr> 
												<td>question mark sign</td>
												<td> <span class="sign_mark"> ? </span> </td>
											</tr>
											<tr> 
												<td>forward slash sign</td>
												<td> <span class="sign_mark"> /  </span></td>
											</tr>
											<tr> 
												<td>backslash sign</td>
												<td><span class="sign_mark"> \ </span> </td>
											</tr>
											<tr> 
												<td>underscore sign</td>
												<td> <span class="sign_mark"> _ </span></td>
											</tr>
											<tr>
												
												<td>hyphen sign</td>
												<td> <span class="sign_mark"> - </span></td>
											</tr>
											<tr> 
												<td>dash sign</td>
												<td> <span class="sign_mark"> —  </span></td>
											</tr>
										</tbody>
									</table>
								</div>						
							</div>						
						</div>
						<!-- Tables list commands End -->
						
						
						<div id="printable" oncontextmenu="return true;">
							<form id="contentFrm" action="{{route('SaveContentInFile')}}" method="post">
							<input type="hidden" name="_token" value="{{ csrf_token() }}">
							<div class="input-single"> 
							<textarea class="keyboard legalnotesfile" 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 style="font-size: 18px;">My 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/advocate_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>
    // var content = $('.note-editable').html($('.note-editable').code());
     

		$("body").on('DOMSubtreeModified', ".note-editable", function(evt) { 

    		var re = /(^|[.!?]\s+)([a-z])/g;
			var val = $(evt.target).val().replace(re, function (m, $1, $2) {
				return $1 + $2.toUpperCase() 
  			});

  			$(evt.target).val(val);
		});


	$('#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").autocorrect();
  	$('#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']]
            ],
			fontNames: ['Arial', 'Arial Black', 'Comic Sans MS', 'Courier New', 'Merriweather','Montserrat','Arvo','Charm','Karla','Lobster','Mukta','Noto Sans','Noto Serif SC','Noto Serif TC','Rajdhani','Raleway','Roboto','Source Sans Pro'],
			fontNamesIgnoreCheck: ['Arvo','Charm','Karla','Lobster','Mukta','Noto Sans','Noto Serif SC','Noto Serif TC','Rajdhani','Raleway','Roboto','Source Sans Pro'],
    		fontSizes: ['8', '9', '10', '11', '12', '14', '16', '18','20','22','24','26','28','30','32'],
            fontsize: '16',
            height: 1000,
			width: 650,
  			dialogsInBody: true,
  			callbacks: {
			    onChange: function(contents, $editable) {
			      //console.log(contents);
			    }
  			}

});

/* 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> 
		
		<script>
			$(document).ready(function(){
			  $(".slideHldr").click(function(){
				$(".slideContent").slideToggle();
			  });
			});
		</script>	

		<script> 
			$("#MenuView").click(function () { 
				var hsClass = $(this).hasClass('IconChange');
				if (hsClass) {
					$(this).removeClass('IconChange');
				} else {
					$(this).addClass('IconChange');
				}
			});


		</script>
		
      </div>     
@endsection