@extends('layouts.app')
@section('title', 'Email Signatures')
@section('content')
<div class="container page-content">
	<div class="row justify-content-xl-center page-col">
		<div class="col-12">
			<h1 class="font-weight-bold typography-4 mb-0">Email Signatures</h1>
		</div>
	</div><!-- Header -->
	<div class="row justify-content-xl-start page-col">
		<div class="col-xl-8 col-lg-8 col-12 mb-3">
			<div class="card signature-content">
				<div class="card-header text-end">
                    <button class="btn btn-purple btn-action btn-download" data-signature="signature-v1" data-name="{{ Auth::user()->getName() }}" role="button">
                    	<i class="fas fa-download"></i>
                    </button>
				</div>
				<div class="card-body">
					<div class="signature-body">
					    <div class="signature-from">Best regards,</div>
					    <table width="470px" cellspacing="0" cellpadding="0">
					        <tbody>
					            <tr>
					                <td valign="top" class="signature-left">
					                    <div class="signature-left-top">
					                        <span>[Name]</span>
					                    </div>
					                    <div class="signature-left-bottom">
					                         <span>[Job Title]</span>
					                    </div>
					                </td>
					                <td valign="top" class="signature-separator">&nbsp;</td>
					                <td valign="top" class="signature-right">
					                	<table cellspacing="0" cellpadding="0">
					                		<tbody>
					                			<tr>
					                				<td valign="top" class="signature-company">
					                					<div>
					                						<span>WEBQLO</span>
					                					</div>
					                				</td>
					                			</tr>
					                			<tr>
					                				<td valign="top" class="signature-address">
					                					<div>
					                					    <span>
					                					        B-2-5, Pacific Place Commercial Center,<br/> 
					                					        Jalan PJU 1A/4, Ara Damansara, 47301, <br/> 
					                					        Petaling Jaya, Selangor, Malaysia.
					                					    </span>
					                					</div>
					                				</td>
					                			</tr>
					                			<tr>
					                				<td valign="top" class="signature-contact">
					                					<div>
					                					    <span class="signature-contact-title">T:</span>
					                					    <span class="signature-contact-details">
					                					        <a href="tel:+60377347247" target="_blank" rel="noreferrer">
					                					            +6 03 7734 7247
					                					        </a>
					                					    </span>
					                					    <span class="signature-contact-separator">&nbsp;|&nbsp;</span>
					                					    <span class="signature-contact-title">W:</span>
					                					    <span class="signature-contact-details">
					                					        <a href="https://www.webqlo.com" target="_blank" rel="noreferrer">
					                					            www.webqlo.com
					                					        </a>
					                					    </span>
					                					</div>
					                				</td>
					                			</tr>
					                			<tr>
					                				<td valign="top" class="signature-social">
					                					<div>
					                					    <a href="https://www.facebook.com/webqlo" target="_blank" rel="noreferrer">
					                					        <img title="Facebook" alt="Facebook" src="https://www.webqlo.com/images/signature/email_signature_fb_icon.png?ver=1.2">
					                					    </a>&nbsp;
					                					    <a href="https://www.instagram.com/webqlo/" target="_blank" rel="noreferrer">
					                					        <img title="Instagram" alt="Instagram" src="https://www.webqlo.com/images/signature/email_signature_ig_icon.png?ver=1.2">
					                					    </a>&nbsp;
					                					    <a href="https://www.linkedin.com/company/webqlo-sdn-bhd" target="_blank" rel="noreferrer">
					                					        <img title="Linkedin" alt="Linkedin" src="https://www.webqlo.com/images/signature/email_signature_in_icon.png?ver=1.2">
					                					    </a>
					                					</div>
					                				</td>
					                			</tr>
					                		</tbody>
					                	</table>
					                </td>
					            </tr>
					            <tr>
					                <td colspan="3" valign="bottom" class="signature-banner">
					                    <div>
					                        <a href="https://www.webqlo.com" target="_blank" rel="noreferrer">
					                            <img title="Webqlo Event Banner" alt="Webqlo Event Banner" src="https://www.webqlo.com/images/signature/email_signature_webqlo_banner_x_500.png?ver=1.2" height="55px" width="470px">
					                        </a>
					                    </div>
					                </td>
					            </tr>
					        </tbody>
					    </table>
					</div>
				</div>
			</div>
		</div><!-- Default Theme -->
		<div class="col-xl-8 col-lg-8 col-12">
			<div class="card signature-content">
				<div class="card-header text-end">
                    {{--<button class="btn btn-purple btn-action btn-download" data-signature="signature-v2" data-name="{{ Auth::user()->getName() }}" role="button">
                    	<i class="fas fa-download"></i>
                    </button>--}}
				</div>
				<div class="card-body">
					<div class="signature-body">
					    <div class="signature-from">Best regards,</div>
					    <table width="470px" cellspacing="0" cellpadding="0">
					        <tbody>
					            <tr>
					                <td valign="top" class="signature-left">
					                    <div class="signature-left-top">
					                        <span>[Name]</span>
					                    </div>
					                    <div class="signature-left-bottom">
					                         <span>[Job Title]</span>
					                    </div>
					                </td>
					                <td valign="top" class="signature-separator">&nbsp;</td>
					                <td valign="top" class="signature-right">
					                	<table cellspacing="0" cellpadding="0">
					                		<tbody>
					                			<tr>
					                				<td valign="top" class="signature-company">
					                					<div>
					                					    <span>WEBQLO</span>
					                					</div>
					                				</td>
					                			</tr>
					                			<tr>
					                			    <td valign="top" class="signature-slogan">
					                			        <div>
					                			            <span><i>Award-winning 360&deg; digital marketing agency</i></span>
					                			        </div>
					                			    </td>
					                			</tr>
					                			<tr>
					                				<td valign="top" class="signature-address">
					                					<div>
					                					    <span>
					                					        B-2-5, Pacific Place Commercial Center,<br/> 
					                					        Jalan PJU 1A/4, Ara Damansara, 47301, <br/> 
					                					        Petaling Jaya, Selangor, Malaysia.
					                					    </span>
					                					</div>
					                				</td>
					                			</tr>
					                			<tr>
					                				<td valign="top" class="signature-contact">
					                					<div>
					                					    <span class="signature-contact-title">T:</span>
					                					    <span class="signature-contact-details">
					                					        <a href="tel:+60377347247" target="_blank" rel="noreferrer">
					                					            +6 03 7734 7247
					                					        </a>
					                					    </span>
					                					    <span class="signature-contact-separator">&nbsp;|&nbsp;</span>
					                					    <span class="signature-contact-title">W:</span>
					                					    <span class="signature-contact-details">
					                					        <a href="https://www.webqlo.com" target="_blank" rel="noreferrer">
					                					            www.webqlo.com
					                					        </a>
					                					    </span>
					                					</div>
					                				</td>
					                			</tr>
					                			<tr>
					                				<td valign="top" class="signature-social">
					                					<div>
					                					    <a href="https://www.facebook.com/webqlo" target="_blank" rel="noreferrer">
					                					        <img title="Facebook" alt="Facebook" src="https://www.webqlo.com/images/signature/email_signature_fb_icon.png?ver=1.2">
					                					    </a>&nbsp;
					                					    <a href="https://www.instagram.com/webqlo/" target="_blank" rel="noreferrer">
					                					        <img title="Instagram" alt="Instagram" src="https://www.webqlo.com/images/signature/email_signature_ig_icon.png?ver=1.2">
					                					    </a>&nbsp;
					                					    <a href="https://www.linkedin.com/company/webqlo-sdn-bhd" target="_blank" rel="noreferrer">
					                					        <img title="Linkedin" alt="Linkedin" src="https://www.webqlo.com/images/signature/email_signature_in_icon.png?ver=1.2">
					                					    </a>
					                					</div>
					                				</td>
					                			</tr>
					                			<tr>
					                			    <td valign="top" class="signature-event-link">
					                			        <table cellspacing="0" cellpadding="0">
					                			            <tbody>
					                			                <tr>
					                			                	<td valign="middle" class="signature-event-icon">
						                			                    <div>
						                			                        <img title="christmas tree" alt="christmas tree" src="https://www.webqlo.com/images/signature/email_signature_christmas_tree_icon.png?ver=1.0">
						                			                    </div>
					                			                	</td>
					                			                    <td valign="middle" class="signature-event-title">
					                			                        <span>
					                			                            Send a wish and spread the joy: <br>
					                			                            <a href="#" target="_blank" rel="noreferrer">
					                			                                www.wishmakingfactory.webqlo.com
					                			                            </a>
					                			                        </span>
					                			                     </td>
					                			                </tr>
					                			            </tbody>
					                			        </table>
					                			    </td>
					                			</tr>
					                		</tbody>
					                	</table>
					                </td>
					            </tr>
					            <tr>
					                <td colspan="3" valign="bottom" class="signature-event-banner">
					                    <div>
					                        <a href="#" target="_blank" rel="noreferrer">
					                            <img title="Webqlo Christmas Campaign Banner" alt="Webqlo Christmas Campaign Banner" src="https://www.webqlo.com/images/signature/email_signature_webqlo_christmas_banner.png?ver=1.0" height="89px" width="470px">
					                        </a>
					                    </div>
					                </td>
					            </tr>
					        </tbody>
					    </table>
					</div>
				</div>
			</div>
		</div><!-- Christmas Theme -->
	</div>
</div>
<div class="overlap-rotate-guide">
   	<img src="{{ asset('images/landscape-mobile-orientation-portrait-rotation-screen-portrait-orientation.png') }}" alt="Image portrait landscape rotation" width="150px" height="150px" />
</div>
@endsection
@push('modal')
<div class="modal fade" id="signatureModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="signatureLabel" aria-hidden="true">
	<div class="modal-dialog modal-dialog-centered">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title" id="signatureLabel">Signature Info</h5>
				<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
			</div>
			<form method="POST" id="signatureInfoForm" action="{{ route('signatures-download') }}" autocomplete="off">
				<div class="modal-body">
					<p class="mb-3 text-info">**Job title will auto selected based on your WISDOM account, if found that your job title is incorrect, please contact our HR.</p>
					@csrf
					<input id="signature" type="hidden" name="signature" value="" />
					<input id="phone" type="hidden" name="phone" value="{{ Auth::user()->getPhone() }}" />
					<input id="position" type="hidden" name="position" value="{{ Auth::user()->details->job ? Auth::user()->details->job->job_title : 'Webqlo Admin' }}" />
					<div class="mb-3 row">
						<label for="name" class="col-12 col-form-label required-label">
							{{ __('Name that display in signature') }}
						</label>
						<div class="col-12">
							<input id="name" type="text" class="form-control" name="name" value="" />
							<span class="invalid-feedback" role="alert">
								<strong id="error_name"></strong>
							</span>
						</div>
					</div>
					<div class="row">
						<div class="col-12">
							<div class="form-check form-switch">
								<input class="form-check-input" type="checkbox" name="include_phone" id="include_phone" value="1" />
								<label class="form-check-label" for="include_phone">
									{{ __('Include Personal Phone Number?') }}
								</label>
							</div>
						</div>
					</div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-black" data-bs-dismiss="modal">Close</button>
					<button type="submit" class="btn btn-purple btn-modal-save">Save</button>
				</div>
			</form>
		</div>
	</div>
</div>
@endpush
@push('js')
	<script type="text/javascript">
		$(document).ready(function() {
			$( "#signatureInfoForm" ).submit(function(event) {
			  	event.preventDefault();
			  	$('.btn-modal-save').prop('disabled', true);
				$('.btn-modal-save').html('<i class="fas fa-circle-notch  fa-spin"></i> Loading');
			  	var formData = new FormData(this);
			  	var action_url = $(this).attr('action');
			  	$.ajax({
			  		type: 'POST',
			  		url: action_url,
			  		data: formData,
			  		processData: false,
			  		contentType: false,
			  		success: function(data) {
			  			if (typeof data === 'string') {
			  				$('#signatureModal').modal('hide');
			  				var element = document.createElement('a');
			  				element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(data));
			  				element.setAttribute('download', "signature.html");
			  				element.style.display = 'none';
  							document.body.appendChild(element);
  							element.click();
  							document.body.removeChild(element);
			  			}else{
  				  		    $.each(data, function(k, v) {
  				  		    	$('input[name='+k+']').addClass('is-invalid');
  				  		    	$('#error_'+k).html(v);
  				  		    	$('.btn-modal-save').prop('disabled', false);
  								$('.btn-modal-save').html('Save');
  				  		   	});
			  			}
					},
					error: function(jqXHR, textStatus) {
						$('#signatureModal').modal('hide');
						$("#app").append('<div class="alert alert-block alert-danger">' + jqXHR.responseJSON.error + '</div>');
					}
			  	});
			});

			//When download button is clicked; Appear Form to insert name and position
			$('body').on('click', '.btn-download', function () {
			    var signature_version = $(this).data('signature');
			    var position = $(this).data('position');
			    var name = $(this).data('name');
			    $( "#signature" ).val(signature_version);
				$('#name').val(name);
		      	$('#signatureModal').modal('show');
			});

			// Reload the form when modal is closed
			$('#signatureModal').on('hidden.bs.modal', function () {
				$('.btn-modal-save').prop('disabled', false);
				$('.btn-modal-save').html('Save');
				$('#signature').val('');
				$('#name').val('');
				$('input[name=is_outlook]').prop('checked', false);	
	      		$('input[name=include_phone]').prop('checked', false);
			});
		});
	</script>
@endpush