@php
	$serverOrigin = $_SERVER['HTTP_ORIGIN'];
	$id = $email->id;
@endphp
<style type="text/css">
	.text-center {
		text-align: center !important;
	}
	.inboxDivHead {
		background-color: #f0f3f7;
		padding:20px;
		box-shadow:rgb(34 34 34) -2px 3px 6px -6px
	}
	.rowCus {
		width: 100%;
		/*padding:20px;
		padding-bottom:0px;
		box-shadow:rgb(34 34 34) -2px 3px 6px -6px;*/
	}
	.rowMarg {
		margin: 0;
		margin-bottom: -10px;
	}
	.cardBodyStyle {
		height: 100% !important;
	}
	.divClss {
		position: absolute;
    	right: 20px;
	}
	.spinnerDefault {
		top: 19px;
    	right: -19px;
    	position: absolute;
	}
</style>
<input type="hidden" value="{{$id}}" id="idEmailTemplate">
<div class="card card-custom card-stretch">
	<div class="card-header align-items-center flex-wrap justify-content-between py-5 h-auto">
		<div class="d-flex align-items-center my-2">
			<a href="#" class="btn btn-clean btn-icon btn-sm mr-6" data-inbox="back">
				<i class="flaticon2-left-arrow-1"></i>
			</a>
		</div>
		<div class="editEmailDiv divClss">
			<a class="btn btn-default btn-sm btn-icon editEmailBtn" style="width: 100%;padding: 20px;">
				Edit Email Template&nbsp;&nbsp;&nbsp;<i class="flaticon2-check-mark"></i>
			</a>
		</div>
		<div class="updateEmailDiv divClss" style="display:none">
			<a class="btn btn-default btn-sm btn-icon updateEmailBtn" style="width: 100%;padding: 20px;">
				Done Editing Email Template&nbsp;&nbsp;&nbsp;<i class="flaticon2-check-mark"></i>
			</a>
		</div>
	</div>
	<div class="card-body p-0">
		<div class="d-flex align-items-center justify-content-between flex-wrap card-spacer-x py-5">
			<div class="d-flex align-items-center mr-2 py-2">
				<div class="font-weight-bold font-size-h3 mr-3" id="emailNameDiv">{{$email->email_name}}</div>
				<div class="form-group row" id="emailUpddate" style="display:none">
	               <div class="col-lg-12">
	                 <label>Email Template Name</label>
	                 <input class="form-control" id="emailTemplateName" style="width:250px" value="{{$email->email_name}}" autofocus="" />
	                  <span class="form-text text-muted"></span>
	                </div>
	            </div>
			</div>
			<div class="d-flex align-items-center mr-2 py-2">
				<span class="font-weight-bolder font-size-lg mr-2">
					<span class="switch switch-lg">
					    <label>
					     	<input id="checkboxData" type="checkbox" {{($email->status == 1)?'checked="checked"':""}} disabled="true" style="cursor:default;" />
					     	<span></span>
					    </label>
					</span>
				</span>
			</div>
		</div>
		
		<form id="updateEvalForm">
			<div class="mb-3-data" style="background:#fff; padding:50px!important;margin-top:-50px;">
				<div class="card-spacer mb-3" id="kt_inbox_reply">
					<div class="card card-custom shadow-sm">
						<div class="card-body p-0">
							<form id="kt_inbox_reply_form">
								<div class="d-block">
									<div class="border-bottom">
										<input id="compose_subject" class="form-control border-0 px-8 min-h-45px" name="compose_subject" placeholder="Subject" value="{{$email->email_subject}}" />
									</div>
									<div id="kt_inbox_reply_editor" class="border-0" style="height: 350px">
										@php
											print $email->email_data;
										@endphp
									</div>
									<div class="dropzone dropzone-multi px-8 py-4" id="kt_inbox_reply_attachments">
										<div class="dropzone-items">
											<div class="dropzone-item" style="display:none">
												<div class="dropzone-file">
													<div class="dropzone-filename" title="some_image_file_name.jpg">
														<span data-dz-name="">some_image_file_name.jpg</span>
														<strong>( 
														<span data-dz-size="">340kb</span>)</strong>
													</div>
													<div class="dropzone-error" data-dz-errormessage=""></div>
												</div>
												<div class="dropzone-progress">
													<div class="progress">
														<div class="progress-bar bg-primary" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" data-dz-uploadprogress=""></div>
													</div>
												</div>
												<div class="dropzone-toolbar">
													<span class="dropzone-delete" data-dz-remove="">
														<i class="flaticon2-cross"></i>
													</span>
												</div>
											</div>
										</div>
									</div>
								</div>
								<div class="saveBtnDiv align-items-center justify-content-between py-5 pl-8 pr-5 border-top">
									<div class="align-items-center mr-3">
										<div class="btn-group mr-4">
											<span id="btnSaveEmail" style="width:150px" class="btn btn-primary font-weight-bold px-6">Save</span>
										</div>
									</div>
								</div>
							</form>
						</div>
					</div>
				</div>
			</div>
		</form>
	</div>
</div>
<script type="text/javascript">
var KTAppInbox = function() {
    var _replyEl;
    var _initEditor = function(form, editor) {
        var options = {
            modules: {
                toolbar: {}
            },
            placeholder: '',
            theme: 'snow'
        };
        var NewEditor = new Quill('#' + editor, options);
        var toolbar = KTUtil.find(form, '.ql-toolbar');
        var editor = KTUtil.find(form, '.ql-editor');
        if (toolbar) {
            KTUtil.addClass(toolbar, 'px-5 border-top-0 border-left-0 border-right-0');
        }
        if (editor) {
            KTUtil.addClass(editor, 'px-8');
        }

        NewEditor.enable(false);
        jQuery('.saveBtnDiv').hide();
        jQuery('#compose_subject').attr('disabled', true);
		jQuery('#checkboxData').attr('disabled', true);
		jQuery('#checkboxData').css('cursor', 'default');

		

        jQuery('.editEmailBtn').click(function(e) {
			e.preventDefault();
			var dt = jQuery(this);
			dt.html('Loading..&nbsp;&nbsp;&nbsp;<div class="spinnerDefault spinner spinner-track spinner-success mr-15 spinnerPrint"></div>');
			setTimeout(function() {
				dt.html('Edit Email Template&nbsp;&nbsp;&nbsp;<i class="flaticon-cogwheel-1"></i>');
				jQuery('.editEmailDiv').hide();
				jQuery('.updateEmailDiv').show();
				jQuery('.saveBtnDiv').show();
				NewEditor.enable(true);
				jQuery('#compose_subject').attr('disabled', false);
				jQuery('#checkboxData').attr('disabled', false);
				jQuery('#checkboxData').css('cursor', 'pointer');
				jQuery('#emailNameDiv').hide();
				jQuery('#emailUpddate').show();
			}, 1000);
		});

		jQuery('.updateEmailBtn').click(function(e) {
			e.preventDefault();
			var dt = jQuery(this);
			dt.html('Loading..&nbsp;&nbsp;&nbsp;<div class="spinnerDefault spinner spinner-track spinner-success mr-15 spinnerPrint"></div>');
			setTimeout(function() {
				dt.html('Done Editing Email Template&nbsp;&nbsp;&nbsp;<i class="flaticon-cogwheel-1"></i>');
				jQuery('.updateEmailDiv').hide();
				jQuery('.editEmailDiv').show();
				jQuery('.saveBtnDiv').hide();
				NewEditor.enable(false);
				jQuery('#compose_subject').attr('disabled', true);
				jQuery('#checkboxData').attr('disabled', true);
				jQuery('#checkboxData').css('cursor', 'default');
				jQuery('#emailNameDiv').show();
				jQuery('#emailUpddate').hide();
			}, 1000);
		});

    }

    var _initForm = function(formEl) {
        var formEl = KTUtil.getById(formEl);
 
        KTUtil.on(formEl, '[data-inbox="cc-show"]', 'click', function(e) {
            var inputEl = KTUtil.find(formEl, '.inbox-to-cc');
            KTUtil.removeClass(inputEl, 'd-none');
            KTUtil.addClass(inputEl, 'd-flex');
            KTUtil.find(formEl, "[name=compose_cc]").focus();
        });

        // CC input hide
        KTUtil.on(formEl, '[data-inbox="cc-hide"]', 'click', function(e) {
            var inputEl = KTUtil.find(formEl, '.inbox-to-cc');
            KTUtil.removeClass(inputEl, 'd-flex');
            KTUtil.addClass(inputEl, 'd-none');
        });

        // BCC input show
        KTUtil.on(formEl, '[data-inbox="bcc-show"]', 'click', function(e) {
            var inputEl = KTUtil.find(formEl, '.inbox-to-bcc');
            KTUtil.removeClass(inputEl, 'd-none');
            KTUtil.addClass(inputEl, 'd-flex');
            KTUtil.find(formEl, "[name=compose_bcc]").focus();
        });

        // BCC input hide
        KTUtil.on(formEl, '[data-inbox="bcc-hide"]', 'click', function(e) {
            var inputEl = KTUtil.find(formEl, '.inbox-to-bcc');
            KTUtil.removeClass(inputEl, 'd-flex');
            KTUtil.addClass(inputEl, 'd-none');
        });
    }


    return {
        init: function() {
            _replyEl = KTUtil.getById('kt_inbox_reply');
            KTAppInbox.initReply();
        },

        initReply: function() {
            _initEditor(_replyEl, 'kt_inbox_reply_editor');
            _initForm('kt_inbox_reply_form');
        },

    };
}();


	jQuery(document).ready(function() {
		KTAppInbox.init();

		$('[data-toggle="tooltip"]').tooltip();

		jQuery('#btnSaveEmail').click(function(e) {
			e.preventDefault();
			var dt = jQuery(this);
			updateEvalForm

			var myEditor = document.querySelector('.ql-editor');
			var html = myEditor.innerHTML;
		
			KTApp.blockPage({
                overlayColor: '#000000',
                state: 'primary',
                message: 'Processing...'
            });
		
			var id_email = $("#idEmailTemplate").val();
			var subject = $("#compose_subject").val();
			var status_email = $('#checkboxData').prop('checked');
			var emName = $("#emailTemplateName").val();

            $.ajax({
		        url: "/updateEmailTemp",
		        type: "POST",
		        data: 'emName='+emName+'&subject='+subject+'&body='+encodeURIComponent(html)+'&id='+id_email+'&status_email='+status_email,
		        headers: {
		           'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
		        },
		        dataType: "JSON",
		        success: function(data){
		           KTApp.unblockPage();

		        	if(data.error == 'false'){
		           	swal.fire({
		               	text: data.msg,
		               	icon: "success",
		               	buttonsStyling: false,
		               	confirmButtonText: "Ok, got it!",
		               	customClass: {
		               	    confirmButton: "btn font-weight-bold btn-light-primary"
		               	},onClose: function(e) {
		               		// location.reload();
		               		KTUtil.scrollTop();
		               	}
		               	}).then(function() {
		               	    KTUtil.scrollTop();
		               	});
		         	}
		         	else {
		              	swal.fire({
		              	text: data.msg,
		              	icon: "error",
		              	buttonsStyling: false,
		              	confirmButtonText: "Ok, got it!",
		              	customClass: {
		              	    confirmButton: "btn font-weight-bold btn-light-primary"
		              	}
		              	}).then(function() {
		              	   KTUtil.scrollTop();
		              	});
		            }
		        }
		    });   
		});
		
	});
</script>