{% extends 'layout/master.html' %}
{% block addcss %}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>	
	.kbw-signature {
	display: inline-block;
	border: 1px solid #a0a0a0;
	-ms-touch-action: none;
	}
	.kbw-signature-disabled {
	opacity: 0.35;
	}
	.text-gray{
	/*color:rgb(173,185,202);*/
	color:#717171;
	}
	.text-blue{
	font-family:  Inter, Helvetica, "sans-serif";
	color: rgba(5, 5, 5, 0.692);
	font-weight: bold;
	/*font-size: 11.0000pt;*/
	font-size:20px;
	line-height:30px;
	}
	h6{
	font-family:  Inter, Helvetica, "sans-serif";
	font-weight:700;
	}
	h6..text-blue{
	font-family:  Inter, Helvetica, "sans-serif";
	font-weight:700;
	}
	p{
	font-family:  Inter, Helvetica, "sans-serif";
	}
	p{
	margin-bottom:7px;
	}
	h6{
	margin-bottom:13px;
	}
	a.clear_sign.btn.btn-border.btn-round.border-active {
        padding: 8px 25px;
        font-size: 14px !important;
        text-transform: uppercase;
        color: #000;
        border: 1px solid #000 !important;
        border-radius: 50px;
        margin: 0 10px 0 0;
        /* box-shadow: none !important; */
        line-height: 20px;
    }
	a.save-signature{
    	border-radius:50px;
    	padding:8px 25px !important;
    	font-size:14px;
    	line-height:20px;
    	background:#0b9cda !important;
    	border:1px solid #0b9cda !important;
    	color:#fff !important;
    	outline:none !important;
    	box-shadow: none !important;
	}
	input.btn.btn-sm.btn-danger {
	border-radius: 50px;
	padding: 9px 30px;
	font-size: 15px;
	text-transform: uppercase;
	background: #000 !important;
	border: 1px solid #000 !important;
	outline: none !important;
	font-weight: 600;
	letter-spacing: 1px;
	box-shadow: none !important;
	}
	
	input.btn.btn-sm.btn-danger:hover,
	input.btn.btn-sm.btn-danger:focus{
	    background:#000 !important;
	}
	
	.fsize-18{
	    font-size:18px;
	}
	
	table.tablepdf tr th{
	    background:#9e9d9c !important;
	    color:#fff !important;
	}
	
	table.tablepdf{
	    border-collapse:collapse;
	    border:1px solid #9e9d9c;
	}
	
	table.tablepdf tr.subtotal{
	    border-top:2px solid #333;
	}
	
	table.tablepdf tr.gtotal{
	    border-bottom:2px solid #333;
	}
	
	table.tablepdf tr.gtotal td{
	    background:#333;
	    color:#fff !important;
	}
	
	table.table.border-zero{
	    border:0 !important;
	}
	
	.auth-page{
	    background:#fff;
	}
	
	@media  screen and (max-width:991px){
	.colwrap{
	padding:0;
	}
	.logorow img{
	max-width:200px;
	height:auto;
	}
	.headingrow h2 {
	font-size: 20px;
	padding: 10px !important;
	line-height: 30px;
	}
	.sign-date .canwrap{
	width:100%;
	}
	.sign-date .canwrap > div{
	width:100% !important;
	}
	.sign-date .canwrap > div > canvas{
	width:100% !important;
	}
	}
	@media  screen and (max-width:991px) and (min-width:767px){
	.logorow > .col-md-5{
	width:50%;
	flex:unset;
	max-width:50%;
	}
	.logorow .col-md-1{
	width:0;
	flex:unset;
	max-width:0;
	padding:0;
	}
	.logorow > .col-md-5 > .row > .col-md-5{
	width:40%;
	flex:unset;
	max-width:40%;
	padding-right: 0;
	}
	.logorow > .col-md-5 > .row > .col-md-7{
	width:60%;
	flex:unset;
	max-width:60%;
	}
	}
	@media  screen and (max-width:600px){
	.headingrow h2 {
	font-size: 18px;
	padding: 10px !important;
	line-height: 30px;
	}
	.row.mb-4.pararow{
	width:100%;
	display:flex;
	align-items:center;
	}
	.logorow img {
	max-width: 200px;
	height: auto;
	display: block;
	margin: auto;
	}
	.row.mb-4.pararow .col-sm-4 {
	width: 45%;
	}
	.row.mb-4.pararow .col-sm-8{
	width:55%;
	}
	.row.mb-4.pararow .col-sm-8 p{
	margin:0;
	}
	.row.mb-4.mainformrow .text-gray {
	margin:0 0 10px;
	}
	.colwrap {
	padding: 0 15px;
	}
	.mainformrow .my-auto {
	margin: 35px 0 35px!important;
	text-align: center;
	}
	.row.mb-4.mainformrow ul {
	padding: 0 0 0 25px;
	}
	.logorow .col-md-1{
	margin:20px 0 0;
	}
	.logorow .col-md-5 .col-md-5 p{
	margin:0;
	}
	.logorow .col-md-5 .row .col-md-5{
	width: 38%;
	padding-right: 0;
	margin:0 0 10px;
	}
	.logorow .col-md-5 .row .col-md-7{
	width:62%;
	margin:0 0 10px;
	}
	}
	@page {
	size: letter portrait;
	@frame header_frame {           /* Static frame */
	-pdf-frame-content: header_content;
	left: 50pt; width: 512pt; top: 50pt; height: 40pt;
	}
	@frame content_frame {         
	left: 50pt; width: 512pt; top: 90pt; height: 632pt;
	}
	@frame footer_frame {          
	-pdf-frame-content: footer_content;
	left: 50pt; width: 512pt; top: 772pt; height: 20pt;
	}
	}
</style>
{% endblock addcss %}
{% block layout %}
<div class="d-flex flex-column flex-root" id="kt_app_root">
	<div class="d-flex flex-column flex-lg-row flex-column-fluid">
		<div class="d-flex flex-column flex-lg-row-fluid w-lg-50 p-10 order-2 order-lg-1">
			<div class="d-flex  flex-column flex-lg-row-fluid" style="align-items: center;">
				<div class="w-lg-1000px p-5">
					<div class="auth-page">
						{% comment %} 
						<div class="alert alert-{{class}}">
						</div>
						{% endcomment %}
						{% if messages %}
                {% for message in messages %}
                  <div class="alert alert-{% if message.tags == 'error' %}danger{% else %}success{% endif %}" role="alert">
                    {{ message }}
                    </div>  
                {% endfor %}
            {% endif %}
						
						<form role="form" method="post" action="{%url 'quotation:view_quotation_detail' quotation.id %}" onsubmit="return validateForm()" enctype="multipart/form-data" autocomplete="off">
                    		{% csrf_token %}							
							{%if  quotation.manual_quote_pdf%}
    							<object data="{{ request.scheme }}://{{ request.get_host }}{{ quotation.manual_quote_pdf.url }}" type="application/pdf"style="width: 100%; height: 1000px;" frameborder="0">
                                    <embed src="{{ request.scheme }}://{{ request.get_host }}{{ quotation.manual_quote_pdf.url }}" type="application/pdf" />
                                    <p>This browser does not support PDFs. Please download the PDF to view it: <a href="{{ request.scheme }}://{{ request.get_host }}{{ quotation.manual_quote_pdf.url }}">Download PDF</a>.</p>
                                </object>
							{% else %}			
                                <object data="{{ request.scheme }}://{{ request.get_host }}{{ quotation.pdf_file.url }}" type="application/pdf"style="width: 100%; height: 1000px;" frameborder="0">
                                    <embed src="{{ request.scheme }}://{{ request.get_host }}{{ quotation.pdf_file.url }}" type="application/pdf" />
                                    <p>This browser does not support PDFs. Please download the PDF to view it: <a href="{{ request.scheme }}://{{ request.get_host }}{{ quotation.pdf_file.url }}" target="blank">Download PDF</a>.</p>
                                </object>
    	                    {% endif %}	
									
							<div class="row mb-4 mainformrow">
								<div class="col-sm-12">
									<h6 class="fs-3 mb-2 fw-bold mb-2" style='font-family: Inter, Helvetica, "sans-serif"; color: #000;'>Declaration <span class="text-danger">*</span></h6>
								</div>
								<div class="col-sm-12">
									<p class="text-dark"><input type="checkbox" name="terms1_accepted" value="1" required style='font-family: Inter, Helvetica, "sans-serif"; color: #000;'> By ticking this box I confirm that I have viewed and read the accompanying document made available by Excitech.</p>
								</div>
							</div>
							<div class="row mb-4 mainformrow">
								<div class="sign-date col-md-5">
									<div colspan="3">
										<label class="sign-cert signature-main remove-float text-dark" for="" style='font-family: Inter, Helvetica, "sans-serif"; font-size:13px; margin-bottom:7px; color: #000;'>Purchasers Signature:</label>
										<div class="canwrap">
											<div height="200" style="border: 1px solid;margin-bottom:10px;width: 352px;">
												<canvas id="canvas1" width="350" height="200" style="background-color:#ffffff;"></canvas>
											</div>
										</div>
										<a class="clear_sign btn btn-border btn-round border-active" onclick="clear1()">clear</a>
										<!--<a href="" id="clear" class="clear">Clear Signature</a>-->
										<textarea id="signature641" class="signature64" name="signature" style="display: none;"></textarea>
										<a href="javascript:void(0)" id="btnSaveSignature1" class="btn btn-primary btn-border btn-round save-signature" >Save Signature</a>
										<!--<span class="sign_saved" style="display:none"> Signature Saved <i class="icon-check-sign"></i></span>-->
										<!--<p class="signature_error" style="display:none"><strong class="error">Please enter Digital signature or type signature</strong></p>-->
										<!--<p>Signature Image</p>-->
										<!--<br>-->
										<img id="canvasImage1" name="canvasImage" style="display:none; height:100px;">
									</div>
								</div>
								<div  class="col-md-1 my-auto" style='font-family: Inter, Helvetica, "sans-serif"; color: #000;'> OR </div>
								<div class="col-md-5">
									<label style='font-family: Inter, Helvetica, "sans-serif";  font-size:13px; margin-bottom:7px; color: #000;'> Type Signature </label>
									<input type="text" name="signature_text" class="signature_text form-control">
								</div>
							</div>
							<div class="row">
                                <div class="col-sm-12">
                                     <input type="submit" name="confirm" value="Confirm" class="btn btn-sm btn-danger"> 
                                    
                                     <input type="submit"  name="reject" value="Reject" class="btn btn-sm btn-danger">
                                </div>
                                
                             
							</div>
						</form>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
{% block jsscript %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/signature_pad/1.5.3/signature_pad.min.js"></script>
<script type='text/javascript' src="https://github.com/niklasvh/html2canvas/releases/download/0.4.1/html2canvas.js"></script>
<script type="text/javascript">
	$(document).ready(function()
	{
		$('#REPLACE_GRANDTOTAL').html("$"+{{quotation.total}});
	});
	$(function () {
	    window.signaturePad1 = new SignaturePad($('#canvas1').get(0), {
	    });
	    
	  })
	  function validateForm() {
	      var signature_text = $('.signature_text').val();
	               if( signaturePad1.isEmpty() && signature_text == ''){
	                 alert("Please fill one of the field Owner’s Signature or Type Signature");
	                  return false
	             }
	            
	             }
	  var clear1 = function () {
	    window.signaturePad1.clear();
	    document.getElementById("canvasImage1").src="";
	 document.getElementById("signature641").value ="";
	 $('.sign_saved').hide();
	 $('#canvasImage1').hide();
	  }
	  
	      
	  $("#btnSaveSignature1").click(function(e){
	      
	      e.preventDefault();
	                  html2canvas([document.getElementById('canvas1')], {
	                      onrendered: function (canvas) {
	                          var canvas_img_data = canvas.toDataURL('image/png');
	                          var img_data = canvas_img_data.replace(/^data:image\/(png|jpg);base64,/, "");
	                          // console.log(img_data);
	                          document.getElementById("canvasImage1").src="data:image/gif;base64,"+img_data;
	                        //  document.getElementById("signature641").value = img_data;
	                          $("#signature641").val(img_data);
	                          //alert($("#signature641").val());
	                            $data = document.getElementById("signature641").value;
	                          if($data){
	                            $('.sign_saved').show();  
	                            $('#canvasImage1').show();  
	                          }
	                      }
	                  });
	  });
	  $("#btnSaveSignature1").click(function(e) {
	                 $('html,body').animate({
	                     scrollTop: $(".mainformrow").offset().top},
	                     'slow');
	             });
</script>
{% endblock jsscript %}
{% endblock layout %}