@php
$serverOrigin = $_SERVER['HTTP_ORIGIN'];
@endphp
<style type="text/css">
	.reportsDiv {
		max-width: 100% !important;
		width: 100% !important;
	}
	#kt_inbox_listResponse {
		margin-left: 0px !important;
	}
</style>
<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_listResponse">
				<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 dropdown exportDiv" style="display:none">
							        <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
							            Export
							        </a>
							        <div class="dropdown-menu">
							            <a class="dropdown-item" id="exportPDFRes">Export PDF</a>
							            {{-- <a class="dropdown-item" id="exportCSVRes">Export CSV</a> --}}
							        </div>
							    </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="candResponse"></div>
					</div>
				</div>
			</div>
			<div class="flex-row-fluid ml-lg-8 d-none" id="kt_inbox_viewResponse"></div>
		</div>
	</div>
</div>
<div class="divExport"></div>
<script type="text/javascript">
$(function () {
	$('[data-toggle="tooltip"]').tooltip()
});
var KTAppInbox = function() {
    var _listEl;
    var _viewEl;

    return {
        init: function() {
            _listEl = KTUtil.getById('kt_inbox_listResponse');
            _viewEl = KTUtil.getById('kt_inbox_viewResponse');

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

        initList: function() {
            // View message
            KTUtil.on(_listEl, '[data-inbox="messageRes"]', '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/inboxViewResponse', {id:datId}, function(data) {
				    jQuery('#kt_inbox_viewResponse').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="messageRes"]');

                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="messageRes"] [data-inbox="actions"] .checkbox input', 'click', function() {
                var item = this.closest('[data-inbox="messageRes"]');

                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_inbox_viewResponse').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="messageRes"]', 'click', function(e) {
                var message = this.closest('[data-inbox="messageRes"]');

                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('.cbxThisAllRes').click(function() {
		var dt = jQuery(this).is(':checked');
		localStorage.setItem("responseCbx", []);
		if (dt) {
			jQuery('.exportDiv').show();
			console.log('bit');
			var valCbx = $('.cbxAllRes').map((_,el) => el.value).get();
			for (var i = 0; i < valCbx.length; i++) {
				jQuery(".loadDataRes").load('/pdfResponse/'+valCbx[i]+'-1', function(data){
					if(data[0] != '') {
						 jQuery.post('/public/savePDFResponse', {id:data[0], data:data}, function(dar) {});
					}
                });
			}
			localStorage.setItem("responseCbx", valCbx);
		}
		else {
			jQuery('.exportDiv').hide();
		}
	});

	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('#candResponse').html('<br><br><br>');
		KTApp.block('#candResponse', {
	     	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('#candResponse').html('<br><br><br>');
		KTApp.block('#candResponse', {
	     	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('#candResponse').html('<br><br><br>');
		KTApp.block('#candResponse', {
	     	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('#candResponse').html('');

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

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

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

});
</script>