@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">

<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>
        Demo Doctor Template
        
      </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">Demo Doctor Template</li>
      </ol>  
      @include('layouts.partials.active-menu')	  
    </section> 
<form id="contentFrm" action="{{route('SaveContentInFile')}}" method="post">
<textarea id="note-textarea" name="name" style="display: none;"></textarea>
<input type="hidden" name="_token" value="{{ csrf_token() }}">

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="x-apple-disable-message-reformatting">  
    <title></title> 

    <link href="https://fonts.googleapis.com/css?family=Nunito+Sans:200,300,400,600,700" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Great+Vibes:200,300,400,600,700" rel="stylesheet">

    <!-- CSS Reset : BEGIN -->
    <style>

        html,
body {
    margin: 0 auto !important;
    padding: 0 !important;
    height: 100% !important;
    width: 100% !important;
    background: #f1f1f1;
    overflow-x: hidden;
}

* {
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

div[style*="margin: 16px 0"] {
    margin: 0 !important;
}

table,
td {
    mso-table-lspace: 0pt !important;
    mso-table-rspace: 0pt !important;
}

/* What it does: Fixes webkit padding issue. */
table {
    border-spacing: 0 !important;
    border-collapse: collapse !important;
    table-layout: fixed !important;
    margin: 0 auto !important;
}

    </style>


    <!-- : BEGIN -->
    <style>

	  
.bg_white{
	background: #ffffff;
}
.email-section{
	padding:0.5em;
}

/*heading*/

h1,h2,h3,h4,h5,h6{
	font-family: 'Nunito Sans', sans-serif;
	color: #000000;
	margin-top: 0;
}

body{
	font-family: 'Nunito Sans', sans-serif;
	font-weight: 800;
	font-size: 15px;
	line-height: 1.2;
	color: rgba(0,0,0);
}

.des {
    font-weight: 700;
    font-size: 12px;
}
.txt-upper {
    text-transform: uppercase;
}
.mb-0 {
    margin-bottom: 0!important;
}
.mt-0
{
  margin-top: 0!important;
}
input
{
  border-top:none;
  border-left:none;
  border-right: none;
  border-bottom: 1px dashed black;
}
input :active
{
  border:none
}
/* Hide scrollbar for Chrome, Safari and Opera */
.example::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE and Edge */
.example {
  -ms-overflow-style: none;
}
@media screen and (max-width: 500px) {

	.icon{
		text-align: left;
	}

	.text-services{
		padding-left: 0;
		padding-right: 20px;
		text-align: left;
	}

}

.footer p
{
  margin:0px auto !important
}


    </style>


</head>

<body width="100%" style="margin: 0; padding: 0 !important; mso-line-height-rule: exactly; background-color: #222222;" >
    
    <div style="margin: 0 auto;" id="printArea">
    	<!-- BEGIN BODY -->
      <table align="center" role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="margin: auto;">
      	<tr>
          <td valign="top" class="bg_white" style="padding: 1em 2.5em;">
          	<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%">
          		<tr>
          			<td width="10%" class="logo" style="text-align: right; ">
                  <img src="{{ URL::asset('images/doclogo.png') }}" alt="logo" />
			          </td>
			          <td width="70%"  style="text-align: center;">
			            <h2 class="text-center" style="padding-top:10%;font-family: Great Vibes;font-weight: 600;margin-bottom: 0px;">Dental stylers</h2>
                </td>
                <td width="20%" style="font-weight:800">
			            <p style="margin:0px auto">Contact
                      <span style="margin-left:10px;font-size: 12px;">4276610</span>
                      <span style="margin-left:70px;display: block;font-size: 12px;">2355222</span>
                      <span style="margin-left:70px;display: block;font-size: 12px;">2358610</span>
                      <span style="margin-left:70px;display: block;font-size: 12px;">2358609</span>
                      <span style="margin-left:70px;display: block;font-size: 12px;">2351159</span>

                    </p>

                  <p style="margin:0px auto">Mobile
                    <span style="margin-left:5px;font-size: 12px;">9810297979</span>
                    <span style="margin-left:55px;display: block;font-size: 12px;">9810296979</span>
                    <span style="margin-left:55px;display: block;font-size: 12px;">9697998888</span>

                  </p>
                </td>
              </tr>
              <tr>
                <td style="width:100%;text-align: center;" colspan="3">
                  <h1 style="text-transform: uppercase; font-family:none; color: #232394;font-weight: 600; font-size: 32px; text-align: center;margin-bottom: 0px;">                 
                    DENTAL & ORTHODONTIC CLINC
                  </h1>
                  <p style="margin-top: 0px; font-weight: 400;">8, Dakshin Marg,	DLF City, Phase - II,Gurgaon - 122002 (HARYANA) India</p> 
               
                </td>
              </tr>
          	</table>
          </td>
	      </tr><!-- end tr -->
			  <tr>
          
		      <td class="bg_white">
		        <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
		          <tr>
		            <td class="bg_white " style="border-top: 2px solid black;">		            	
		            	<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%">
		            		<tr>
                      <td valign="top" width="30%" style="padding-top: 20px; padding-right:5px; border-right: 2px solid black;height:650px" class="services">
                        <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
                          
                          <tr style="display: grid;">
                            <td class="text-services" style="text-align: right;">
                            	<h3 style="    text-transform: capitalize;
                              color: #232394;
                              font-weight: 600;
                              font-size: 21px;margin:0px auto">Dr. Heman Verma</h3>
                               <p style="margin:0px auto">B.D.S M.D.S F.A.G.E</p>
                               <p class="des txt-upper mb-0 mt-0"> M.I.O.S   M.I.D.A</p>
                                <p class="des txt-upper mt-0 mb-0">ORTHODONTIST &</p>
                                <p class="des txt-upper mt-0 mb-0">  DENTOFACIAL</p>
                                <p class="des txt-upper mt-0 mb-0"> ORTHOPAEDICIAN</p>
                                <p class="des txt-upper mt-0 mb-0"> IMPLANTOLOGIST</p>
                                

                                <p class="des mb-0" >Associate fellow</p>
                                <p class="des mb-0" >American Academy</p>                                
                                <p class="des mt-0 mb-0"> of implant Dentistry</p>

                                <p class="des mb-0" >Fellow International </p>
                                <p class="des mb-0" >Congress of ORAL</p>                                                             
                                <p class="des mt-0 mb-0">Implants (ICOI)</p>

                                <p class="des mb-0" >Fellow World Federation </p>
                                <p class="des mb-0" >of Orthodontics</p>
                                
                            </td>
                            <td class="text-services" style="text-align: right;margin-top:35px">
                            	<h3 style="    text-transform: capitalize;
                              color: #232394;
                              font-weight: 600;
                              font-size: 21px;margin:0px auto">Dr Priyanka Verma</h3>
                               <p style="margin:0px auto">B.D.S  M.I.D.A  F.A.G.E</p>
                               <p class="des  mb-0 mt-0"> Dental Surgeon</p>
                                <P class="des  mt-0 mb-0">Master in</p>
                                  <P class="des  mt-0 mb-0">Cosmetic Dentistry</p>

                            </td>
                          </tr>
                        </table>
                      </td>
                      <td valign="top" width="70%" style="padding-top: 20px;padding-left:20px ;height: 650px;"  class="services">
                        <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
                         <tr>
                            <td class="text-services" style="float:right">
                            	<div >
                                <label for="Date">Date:</label>
                                <div contenteditable="true" style="display:inline-block;outline:none;word-break: break-word; min-width:150px;width:auto;" class="custome-input"></div>
                              </div> 
                            </td>                           
                          </tr>

                         <tr>
                           <td>
                            <div class="form-group">
                              <label for="email">Name:</label>
                    <div contenteditable="true" style="display:inline-block;outline:none;word-break: break-word; min-width:150px;width:auto;" class="custome-input"></div>					   
				</div>
                            </div>
                           </td>
                          
                          </tr>
                          <tr>
                            <td>
                             <div class="form-group" style="margin-top:10px">
                               <label for="age">Age:</label>                     
                               <div contenteditable="true" style="display:inline-block;outline:none;word-break: break-word; min-width:150px;width:auto;" class="custome-input"></div>
                               <span style="margin-left:10px">M/F </span>
                               <div contenteditable="true" style="display:inline-block;outline:none;word-break: break-word; min-width:150px;width:auto;" class="custome-input"></div>
                             </div>
                            </td>
                           
                           </tr>
                           <tr>
                             <td >
                               	
                              <div contenteditable="true" style="display:inline-block;outline:none;word-break: break-word; min-width:150px;width:auto;height: 560px;" class="custome-input"></div>

                             </td>
                           </tr>
                        </table>
                      </td>
                    </tr>
		            	</table>
		            </td>
		          </tr><!-- end: tr -->
		        </table>

		      </td>
		    </tr><!-- end:tr -->
      </table>
      <!-- footer -->
      <table align="center" role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="margin: auto;">
        <tr>
        	<td valign="middle" class="bg_white" style="    border-top: 2px solid black;">
         
        		<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="margin: auto;">
        			<tr>
        				<td width="100%" class ="footer" style="text-align: center;">
                  <p>Email :hemanverma@hotmail.com</p>
                  <p>Timings : 10:00 A.M. to 2:30 P.M., 3:30 P.M. to 7:00 P.M</p>
                  <p >(Tuesday Closed)</p>
                  <p>www.dentalstylers.com</p>
                </td>
        			</tr>        		
            </table>
        	</td>
        </tr>
      </table>

    </div>
 
</body>
</html>
            
</form>	

  </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>
		

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

<script>






		
	
		
			$(function(){
				
				$('#SaveInFile').click(function(){
					var conts = $('#printArea').html();alert(conts);
					$('#note-textarea').val(conts);
					$('#contentFrm').submit();
					
				});
				
				$('#sendEmail').click(function(){
					var email = prompt("", "{{ucfirst(Auth::guard('doctor')->user()->email)}}");
					var conts = $('#printArea').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