@php
$serverOrigin = $_SERVER['HTTP_ORIGIN'];
@endphp
<style type="text/css">
	.reportsDiv {
		max-width: 100% !important;
		width: 100% !important;
	}
	#kt_inbox_list {
		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_list">
				<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="cbxThisAll">
										<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="exportPDFRep">Export PDF</a>
							            {{-- <a class="dropdown-item" href="#">Export CSV</a> --}}
							        </div>
							    </li>
							    @if($jsonDecodeAsses['opa'] == 1)
							    	<li class="nav-item dropdown exportDiv">
								        <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
								            Talegent Score
								        </a>
								        <div class="dropdown-menu">
								            <a class="dropdown-item" id="importCSV" data-toggle="modal" data-target="#modal_bulk_reports">Import CSV</a>
								        </div>
								    </li>
							    @endif
							</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="searchReports form-control pl-4" placeholder="Search...">
								<div class="input-group-append">
									<a href="" class="btnsearchReports 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($cands)>0)?'1':'0').' - ';
										print '<span id="countQuery">'.((count($cands)<20)?count($cands):'20').'</span>';
										print ' of '.count($cands);
									@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>
							{{-- <span class="btn btn-default btn-icon btn-sm mr-2" data-placement="auto" data-toggle="tooltip" title="Previous page" data-original-title="Previous page">
								<i class="ki ki-bold-arrow-back icon-sm"></i>
							</span>
							<span class="btn btn-default btn-icon btn-sm mr-2" data-placement="auto" data-toggle="tooltip" title="Next page" data-original-title="Next page">
								<i class="ki ki-bold-arrow-next icon-sm"></i>
							</span> --}}
							<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="candData">
							<center>
								<h3>Loading List...</h3>
							</center>
						</div>
					</div>
				</div>
			</div>
			<div class="flex-row-fluid ml-lg-8 d-none" id="kt_inbox_view"></div>
		</div>
	</div>
</div>
<div class="modal fade modCust" id="modal_bulk_reports" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="modal_bulk_reports" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel1">CSV Upload Talegent scores</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">
            	<form>
            		@csrf
					<div id="div-dropzone" class="form-group row">
						<div class="col-lg-12 col-md-9 col-sm-12">
							<div class="dropzone dropzone-default dropzone-primary" id="kt_dropzone_reports">
								<div class="dropzone-msg dz-message needsclick">
									<h3 class="dropzone-msg-title">Drop files here or click to upload.</h3>
									<span class="dropzone-msg-desc">Only Excel & CSV are allowed for upload
									</span>
								</div>
							</div>
						</div>
					</div>
				</form>
            </div>
            <div class="modal-footer">
                <a href="{{asset(Storage::url('Sample Talegent Score.csv'))}}" class="btn btn-primary font-weight-bold">
                    <i class="fas fa-cloud-download-alt"></i> Download CSV Example
                </a>
            </div>
        </div>
    </div>
</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_list');
            _viewEl = KTUtil.getById('kt_inbox_view');
            KTAppInbox.initList();
            KTAppInbox.initView();
        },
        initList: function() {
            KTUtil.on(_listEl, '[data-inbox="message"]', 'click', function(e) {
                var actionsEl = KTUtil.find(this, '[data-inbox="actions"]');
                if (e.target === actionsEl || (actionsEl && actionsEl.contains(e.target) === true)) {
                    return false;
                }
                var datId = jQuery(this).find('.datID').val();

                var loading = new KTDialog({
                    'type': 'loader',
                    'placement': 'top center',
                    'message': 'Loading ...'
                });
                loading.show();
                jQuery.post('/public/inboxView', {id:datId}, function(data) {
				    jQuery('#kt_inbox_view').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);
            });
            KTUtil.on(_listEl, '[data-inbox="group-select"] input', 'click', function() {
                var messages = KTUtil.findAll(_listEl, '[data-inbox="message"]');
                for (var i = 0, j = messages.length; i < j; i++) {
                    var message = messages[i];
                    var checkbox = KTUtil.find(message, '.checkbox input');
                    if (checkbox != null) {
                    	checkbox.checked = this.checked;
                    }
                    if (this.checked) {
                        KTUtil.addClass(message, 'active');
                    } 
                    else {
                        KTUtil.removeClass(message, 'active');
                    }
                }
            });
            KTUtil.on(_listEl, '[data-inbox="message"] [data-inbox="actions"] .checkbox input', 'click', function() {
                var item = this.closest('[data-inbox="message"]');
                if (item && this.checked) {
                    KTUtil.addClass(item, 'active');
                } 
                else {
                    KTUtil.removeClass(item, 'active');
                }
            });
        },

        initView: function() {
            KTUtil.on(_viewEl, '[data-inbox="back"]', 'click', function() {
                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);
            });

            KTUtil.on(_viewEl, '[data-inbox="message"]', 'click', function(e) {
                var message = this.closest('[data-inbox="message"]');

                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');
                }
            });
        },
    };
}();
Dropzone.autoDiscover = false;
jQuery(document).ready(function() {
	KTAppInbox.init();


	localStorage.setItem("reportCbx", []);
	CandData('created_at', 'desc', 0, 20, '');

	var myDropzone = new Dropzone('#kt_dropzone_reports', {
        url: "/importReports", // Set the url for your upload script location
        paramName: "file", // The name that will be used to transfer the file
        headers: {
	      'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
	    },
        maxFiles: 1,
        maxFilesize: 5, // MB
        addRemoveLinks: true,
        acceptedFiles: "text/csv,application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
        accept: function(file, done) {
        	KTApp.blockPage({
                overlayColor: '#000000',
                state: 'primary',
                message: 'Processing...'
            });
        	done();
        },
        success: function(file, response){
		    KTApp.unblockPage();
		    if(response.error == 'false'){
		    	swal.fire({
	                text: response.msg,
	                icon: "success",
	                buttonsStyling: false,
	                confirmButtonText: "Ok, got it!",
	                customClass: {
	                    confirmButton: "btn font-weight-bold btn-light-primary"
	                },onClose: function(e) {    
	                }
	            }).then(function() {
	                KTUtil.scrollTop();
	            });
		    }
		    else{
		    	Swal.fire({
				    text: response.msg,
				    icon: "warning",
				    showCancelButton: true,
				    confirmButtonText: "Download Error Logs",
				    cancelButtonText: "No",
				}).then(function(result) {
				    if (result.value) {
				        var url = '{{ route('pages.dashboard.exportReportsError', ['uniq_id' => ':uniq_id']) }}';
				        url = url.replace(':uniq_id', response.uniq_id);
                    	window.location = url;
				    }else{
				    	location.reload();
				    }
				});
		    }
		 }
    });



	jQuery('.cbxThisAll').click(function() {
		var dt = jQuery(this).is(':checked');
		localStorage.setItem("reportCbx", []);
		if (dt) {
			jQuery('.exportDiv').show();
			var valCbx = $('.cbxAll').map((_,el) => el.value).get();
			for (var i = 0; i < valCbx.length; i++) {
				jQuery(".loadDataRes").load('/pdfReportsData/'+valCbx[i]+'-1', function(data){
					if(data[0] != '') {
						jQuery.post('/public/savePDFReport', {id:data[0], data:data}, function(dar) {});
					}
                });
			}
			localStorage.setItem("reportCbx", valCbx);
		}
		else {
			jQuery('.exportDiv').hide();
		}
	});


	jQuery('#importCSV').click(function(e) {
		e.preventDefault();
	});

	jQuery('#exportPDFRep').click(function(e) {
		e.preventDefault();
		KTApp.block('.reportsDiv', {
	     	overlayColor: '#000000',
	     	state: 'primary',
	     	message: 'Loading...'
	    });
		var valCbx = localStorage.getItem("reportCbx");
		// 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=2&type=1&id='+newExp[i], '_blank');
		}
		KTApp.unblock('.reportsDiv');
		
	});

	jQuery('.reloadData').click(function(e) {
		e.preventDefault();
		jQuery('#candData').html('<br><br><br>');
		KTApp.block('#candData', {
	     	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('#candData').html('<br><br><br>');
		KTApp.block('#candData', {
	     	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('#candData').html('<br><br><br>');
		KTApp.block('#candData', {
	     	overlayColor: '#000000',
	     	state: 'primary',
	     	message: 'Loading...'
	    });
		CandData('created_at', 'desc', 0, data, search);
	});

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

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

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

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

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

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

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

});
</script>