@extends('templates.default')
@section('title', 'Login')
@section('content')
<style type="text/css">
	.reportsDiv {
		max-width: 100% !important;
		width: 100% !important;
	}
	#kt_inbox_listEmail {
		margin-left: 0px !important;
	}
	.brandBtn {
	  	background: #0a70b8 !important;
	}
	.brandBtn:hover {
	  background: #094f99 !important;
	}
</style>
<!-- Modal-->
<div class="modal fade" id="modal_add_email_temp" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <form class="form" id="add_new_email_template_form">
        	<div class="modal-content">
	            <div class="modal-header">
	                <h5 class="modal-title" id="exampleModalLabel">Add New Email Template</h5>
	                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
	                    <i aria-hidden="true" class="ki ki-close"></i>
	                </button>
	            </div>
	            <div class="modal-body">
	                <div class="mb-2">
	                  <div class="form-group row">
	                      <div class="col-lg-12">
	                        <label>Email Template Name</label>
	                        <input class="form-control" name="emailTemplateName" value="" autofocus="" />
	                         <span class="form-text text-muted"></span>
	                       </div>
	                   </div>
	              	</div>
	            </div>
	            <div class="modal-footer">
	                <button type="button" class="btn btn-light-primary font-weight-bold" data-dismiss="modal">Close</button>
	                <button type="button" class="btn btn-primary font-weight-bold" id="save_new_email_template">Save changes</button>
	            </div>
	        </div>
        </form>
    </div>
</div>

<div class="d-flex flex-column-fluid">
	<div class="container reportsDiv">
		<div class="d-flex flex-row">
			<div class="flex-row-fluid ml-lg-12 d-block" id="kt_inbox_listEmail">
				<div class="card card-custom card-stretch">
					<div class="card-header row row-marginless align-items-center flex-wrap py-5 h-auto">
						<div class="col-12 col-sm-6 col-xxl-4 order-2 order-xxl-1 d-flex flex-wrap align-items-center">
							<ul class="nav">
							    <li class="nav-item" style="padding-top:12px">
							        <label data-inbox="group-select" class="checkbox checkbox-inline checkbox-primary mr-3">
										<input type="checkbox" class="cbxThisAllRes">
										<span class="symbol-label"></span>
									</label>
							    </li>
							    <li class="nav-item" style="padding-top:5px">
							        <span class="btn btn-clean btn-icon btn-sm mr-2 reloadData">
										<i class="ki ki-refresh icon-1x"></i>
									</span>
							    </li>
							    <li class="nav-item" style="padding-top:5px">
							        <button class="btn btn-primary brandBtn" data-toggle="modal" data-target="#modal_add_email_temp">
							        	Add New Email Template
							        </button>
							    </li>
							</ul>
						</div>
						<div class="col-xxl-3 d-flex order-1 order-xxl-2 align-items-center justify-content-center">
							<div class="input-group input-group-lg input-group-solid my-2">
								<input type="text" class="searchResponse form-control pl-4" placeholder="Search...">
								<div class="input-group-append">
									<a href="#" class="btnsearchResponse input-group-text pr-3">
										<span class="svg-icon svg-icon-lg">
											<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
												<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
													<rect x="0" y="0" width="24" height="24"></rect>
													<path d="M14.2928932,16.7071068 C13.9023689,16.3165825 13.9023689,15.6834175 14.2928932,15.2928932 C14.6834175,14.9023689 15.3165825,14.9023689 15.7071068,15.2928932 L19.7071068,19.2928932 C20.0976311,19.6834175 20.0976311,20.3165825 19.7071068,20.7071068 C19.3165825,21.0976311 18.6834175,21.0976311 18.2928932,20.7071068 L14.2928932,16.7071068 Z" fill="#000000" fill-rule="nonzero" opacity="0.3"></path>
													<path d="M11,16 C13.7614237,16 16,13.7614237 16,11 C16,8.23857625 13.7614237,6 11,6 C8.23857625,6 6,8.23857625 6,11 C6,13.7614237 8.23857625,16 11,16 Z M11,18 C7.13400675,18 4,14.8659932 4,11 C4,7.13400675 7.13400675,4 11,4 C14.8659932,4 18,7.13400675 18,11 C18,14.8659932 14.8659932,18 11,18 Z" fill="#000000" fill-rule="nonzero"></path>
												</g>
											</svg>
										</span>
									</a>
								</div>
							</div>
						</div>
						<div class="col-12 col-sm-6 col-xxl-4 order-2 order-xxl-3 d-flex align-items-center justify-content-sm-end text-right my-2">
							<div style="cursor:pointer" class="d-flex align-items-center mr-2" data-toggle="tooltip" title="" data-original-title="Records per page">
								<span class="text-muted font-weight-bold mr-2" data-toggle="dropdown">
									@php
										// print ((count($eval)>0)?'1':'0').' - ';
										// print '<span id="countQuery">'.((count($eval)<20)?count($eval):'20').'</span>';
										// print ' of '.count($eval);
									@endphp
								</span>
								<div class="dropdown-menu dropdown-menu-right p-0 m-0 dropdown-menu-sm">
									<ul class="navi py-3">
										<li class="navi-item">
											<a href="#" data="20" class="pagBtn navi-link active">
												<span class="navi-text">20 per page</span>
											</a>
										</li>
										<li class="navi-item">
											<a href="#" data="50" class="pagBtn navi-link">
												<span class="navi-text">50 par page</span>
											</a>
										</li>
										<li class="navi-item">
											<a href="#" data="100" class="pagBtn navi-link">
												<span class="navi-text">100 per page</span>
											</a>
										</li>
									</ul>
								</div>
							</div>
							<div class="dropdown mr-2" data-toggle="tooltip" title="" data-original-title="Sort">
								<span class="btn btn-default btn-icon btn-sm" data-toggle="dropdown">
									<i class="flaticon2-console icon-1x"></i>
								</span>
								<div class="dropdown-menu dropdown-menu-right p-0 m-0 dropdown-menu-sm">
									<ul class="navi py-3">
										<li class="navi-item">
											<a href="#" data="desc" class="sortBtn navi-link active">
												<span class="navi-text">Newest</span>
											</a>
										</li>
										<li class="navi-item">
											<a href="#" data="asc" class="sortBtn navi-link">
												<span class="navi-text">Oldest</span>
											</a>
										</li>
									</ul>
								</div>
							</div>
			
						</div>
					</div>
					<div class="card-body table-responsive px-0">
						<div class="list list-hover min-w-500px" data-inbox="list" id="emailTemplates">
							<center>
								<h4>Fetching Data.....</h4>
							</center>
						</div>
					</div>
				</div>
			</div>
			<div class="flex-row-fluid ml-lg-8 d-none" id="kt_email_data"></div>
		</div>
	</div>
</div>
<div class="divExport"></div>
@endsection
@push('scripts')
<script type="text/javascript">
$(function () {
	$('[data-toggle="tooltip"]').tooltip()
});
var KTAppInbox = function() {
    var _listEl;
    var _viewEl;


    return {
        init: function() {
            _listEl = KTUtil.getById('kt_inbox_listEmail');
            _viewEl = KTUtil.getById('kt_email_data');

            KTAppInbox.initList();
            KTAppInbox.initView();
        },

        initList: function() {
            // View message
            KTUtil.on(_listEl, '[data-inbox="emailRes"]', 'click', function(e) {
                var actionsEl = KTUtil.find(this, '[data-inbox="actions"]');
                // skip actions click
                if (e.target === actionsEl || (actionsEl && actionsEl.contains(e.target) === true)) {
                    return false;
                }

                var datId = jQuery(this).find('.datID').val();

                // Demo loading
                var loading = new KTDialog({
                    'type': 'loader',
                    'placement': 'top center',
                    'message': 'Loading ...'
                });
                loading.show();
                jQuery.post('/public/emailTemplatesData', {id:datId}, function(data) {
				    jQuery('#kt_email_data').html(data);
				});

                setTimeout(function() {
                    loading.hide();

                    KTUtil.addClass(_listEl, 'd-none');
                    KTUtil.removeClass(_listEl, 'd-block');

                    KTUtil.addClass(_viewEl, 'd-block');
                    KTUtil.removeClass(_viewEl, 'd-none');
                }, 700);
            });

            // Group selection
            KTUtil.on(_listEl, '[data-inbox="group-select"] input', 'click', function() {
                var messages = KTUtil.findAll(_listEl, '[data-inbox="emailRes"]');

                for (var i = 0, j = messages.length; i < j; i++) {
                    var message = messages[i];
                    var checkbox = KTUtil.find(message, '.checkbox input');
                    checkbox.checked = this.checked;

                    if (this.checked) {
                        KTUtil.addClass(message, 'active');
                    } else {
                        KTUtil.removeClass(message, 'active');
                    }
                }
            });

            // Individual selection
            KTUtil.on(_listEl, '[data-inbox="emailRes"] [data-inbox="actions"] .checkbox input', 'click', function() {
                var item = this.closest('[data-inbox="emailRes"]');
                if (item && this.checked) {
                    KTUtil.addClass(item, 'active');
                } else {
                    KTUtil.removeClass(item, 'active');
                }
            });
        },

        initView: function() {
            // Back to listing
            KTUtil.on(_viewEl, '[data-inbox="back"]', 'click', function() {
                // demo loading
                jQuery('#kt_email_data').html('');
                var loading = new KTDialog({
                    'type': 'loader',
                    'placement': 'top center',
                    'message': 'Loading ...'
                });
                loading.show();

                setTimeout(function() {
                    loading.hide();

                    KTUtil.addClass(_listEl, 'd-block');
                    KTUtil.removeClass(_listEl, 'd-none');

                    KTUtil.addClass(_viewEl, 'd-none');
                    KTUtil.removeClass(_viewEl, 'd-block');
                }, 700);
            });

            // Expand/Collapse reply
            KTUtil.on(_viewEl, '[data-inbox="emailRes"]', 'click', function(e) {
                var message = this.closest('[data-inbox="emailRes"]');
                var dropdownToggleEl = KTUtil.find(this, '[data-toggle="dropdown"]');
                var toolbarEl = KTUtil.find(this, '[data-inbox="toolbar"]');

                // skip dropdown toggle click
                if (e.target === dropdownToggleEl || (dropdownToggleEl && dropdownToggleEl.contains(e.target) === true)) {
                    return false;
                }

                // skip group actions click
                if (e.target === toolbarEl || (toolbarEl && toolbarEl.contains(e.target) === true)) {
                    return false;
                }

                if (KTUtil.hasClass(message, 'toggle-on')) {
                    KTUtil.addClass(message, 'toggle-off');
                    KTUtil.removeClass(message, 'toggle-on');
                } else {
                    KTUtil.removeClass(message, 'toggle-off');
                    KTUtil.addClass(message, 'toggle-on');
                }
            });
        },
 
    };
}();

jQuery(document).ready(function() {
	KTAppInbox.init();
	localStorage.setItem("responseCbx", []);
	CandData('created_at', 'desc', 0, 20, '');

	jQuery('#exportPDFRes').click(function(e) {
		e.preventDefault();
		KTApp.block('.reportsDiv', {
	     	overlayColor: '#000000',
	     	state: 'primary',
	     	message: 'Loading...'
	    });
		var valCbx = localStorage.getItem("responseCbx");
		// jQuery.post('/public/exportData', {res:1, type:1, valCbx:valCbx}, function(data) {
			// var obj = JSON.parse(data);
			// if (obj['data'] == 'ok') {
				
			// }
		// });
		var newExp = valCbx.split(',');
		for (var i = 0; i < newExp.length; i++) {
			console.log(newExp[i]);
			window.open('/public/exportData?res=1&type=1&id='+newExp[i], '_blank');
		}
		KTApp.unblock('.reportsDiv');
		
	});

	jQuery('.reloadData').click(function(e) {
		e.preventDefault();
		jQuery('#emailTemplates').html('<br><br><br>');
		KTApp.block('#emailTemplates', {
	     	overlayColor: '#000000',
	     	state: 'primary',
	     	message: 'Loading...'
	    });
		CandData('created_at', 'desc', 0, 20, '');
	});

	jQuery('.sortBtn').click(function(e) {
		e.preventDefault();
		var data = jQuery(this).attr('data');
		var length = jQuery('#countQuery').html();
		var search = jQuery('.searchReports').val();
		jQuery('#emailTemplates').html('<br><br><br>');
		KTApp.block('#emailTemplates', {
	     	overlayColor: '#000000',
	     	state: 'primary',
	     	message: 'Loading...'
	    });
		CandData('created_at', data, 0, length, search);
	});

	jQuery('.pagBtn').click(function(e) {
		e.preventDefault();
		var data = jQuery(this).attr('data');
		var search = jQuery('.searchReports').val();
		jQuery('#countQuery').html(data);
		jQuery('#emailTemplates').html('<br><br><br>');
		KTApp.block('#emailTemplates', {
	     	overlayColor: '#000000',
	     	state: 'primary',
	     	message: 'Loading...'
	    });
		CandData('created_at', 'desc', 0, data, search);
	});

	jQuery('.searchResponse').keypress(function(e){  
	    var x = e.which || e.KeyCode;
	    if (x == 13 && e.shiftKey) {
	      return true;
	    }
	    else if (x == 13) {
	      jQuery('.btnsearchResponse').click();
	      return false;
	    }
	});

	jQuery('.searchResponse').focusout(function(e){  
	    var data = jQuery(this).val();
	    if (data == '') {
	    	CandData('created_at', 'desc', 0, 20, '');
	    }
	});

	jQuery('.btnsearchResponse').click(function(e) {
			e.preventDefault();
			var data = jQuery('.searchResponse').val();
			var ord = 'created_at';
			var length = jQuery('#countQuery').html();
			var sortDir = jQuery('.sortBtn').attr('data');

			jQuery('#emailTemplates').html('');

			var loading = new KTDialog({
	            'type': 'loader',
	            'placement': 'top center',
	            'message': 'Loading ...'
	        });
	        loading.show();

	        jQuery.post('/public/emailTemplates', {ord:ord, sortDir:sortDir, start:0, length:length, search:data}, function(data) {
			    jQuery('#emailTemplates').html(data);
			    loading.hide();
			});
		});

		function CandData(ord, sortDir, start, length, search) {
			jQuery.post('/public/emailTemplates', {ord:ord, sortDir:sortDir, start:start, length:length, search:search}, function(data) {
			    jQuery('#emailTemplates').html(data);
			});
		}
	});

	jQuery(document).off('click', '#save_new_email_template');
	jQuery(document).on('click', '#save_new_email_template', function(e){
    e.preventDefault();

    var validation;
    var form = KTUtil.getById("add_new_email_template_form");
    if (!form) {
        return;
    }
    validation = FormValidation.formValidation(form,
        {
         fields: {
            	emailTemplateName: {
                	validators: {
                	    notEmpty: {
                	      message: 'Email Template Name is required'
                	    },
                	}
            	},     
         	},
        	plugins: {
            	trigger: new FormValidation.plugins.Trigger(),
            	bootstrap: new FormValidation.plugins.Bootstrap({
            		eleValidClass: "",
            	}),
            	// submitButton: new FormValidation.plugins.SubmitButton(),
            }
                   
        }
    );
    validation.validate().then(function(status) {
     	if (status == 'Valid') {
        	KTApp.blockPage({
        	 	overlayColor: '#000000',
        	 	state: 'primary',
        	 	message: 'Processing...'
        	});
            $.ajax({
		       url: "/saveEmailTemp",
		       type: "POST",
		       data: $("#add_new_email_template_form").serialize(),
		       headers: {
		          'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
		       },
		       dataType: "JSON",
		       success: function(data){
		            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();
		                   		KTApp.unblockPage();
		                   	}
		                }).then(function() {
		                    KTUtil.scrollTop();
		                });
		            }
		            else {
		            	KTApp.unblockPage();
		                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>
@endpush