@extends('templates.default')
@section('title', 'Dashboard')
@section('content')
<script src="{{ asset('js/pages/wizard/wizard-3.js?v=7.2.8') }}"></script>
<style type="text/css">
	.buildTypes {
		border-bottom: solid 2px #B5B5C3;
    	padding: 20px;
	}
	.buildTypes:hover {
		background: #f1f1f3;
	}
	.previewDiv {
		background-color: #fff;
	  	box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
	  	-moz-box-sizing: border-box;
	  	-webkit-box-sizing: border-box;
	  	box-sizing: border-box;
	  	overflow-y: scroll;
	  	padding: 10px;
	}
	.previewDiv::-webkit-scrollbar {
  		width: 10px !important;
	  	transition-delay: 0.2s !important;
	  	cursor: pointer !important;
	}
	.previewDiv::-webkit-scrollbar-thumb {
	  	border-radius: 5px !important;
	  	background: rgba(0,0,0,.2) !important;
	  	transition-delay: 0.2s !important;
	}
	.previewDiv::-webkit-scrollbar:hover {
	  	height: 5px !important;
	  	background: rgba(0,0,0,.2) !important;
	  	transition-delay: 0.2s !important;
	}
	.previewDiv::-webkit-scrollbar-thumb:hover {
	  	background: rgba(0,0,0,.4) !important;
	  	transition-delay: 0.2s !important;
	}
	.wizardHeaders {
		box-shadow: rgb(34 34 34) -2px 3px 6px -6px;
	}
	.mainDivCus {
		background: #fafafa !important;
	}
</style>
<div class="d-flex flex-column-fluid" style="margin-top:-10px">
	<div class="container" style="max-width:100%;padding:0;border-radius:0;">
		<div class="card card-custom" style="border-radius:0;height:100%;">
			<div class="card-body p-0 mainDivCus">
				<div class="wizard wizard-3" id="kt_wizard_v3" data-wizard-state="last" data-wizard-clickable="true">
					<div class="wizard-nav border-bottom" style="width:100%;background:#fff;">
						<div class="wizard-steps px-8 py-8 px-lg-15 py-lg-3 wizardHeaders">
							<div id="buildBtn" class="wizard-step" data-wizard-type="step" data-wizard-state="current">
								<div class="wizard-label" style="padding:15px">
									<h3 class="wizard-title">
									<span>1.</span>Build</h3>
									<div class="wizard-bar"></div>
								</div>
							</div>
							<div id="candBtn" class="wizard-step" data-wizard-type="step" data-wizard-state="done">
								<div class="wizard-label" style="padding:15px">
									<h3 class="wizard-title">
									<span>2.</span>Candidate</h3>
									<div class="wizard-bar"></div>
								</div>
							</div>
							<div id="shareInviteBtn" class="wizard-step" data-wizard-type="step" data-wizard-state="done">
								<div class="wizard-label" style="padding:15px">
									<h3 class="wizard-title">
									<span>3.</span>Share and Invite</h3>
									<div class="wizard-bar"></div>
								</div>
							</div>
							<div id="resultsBtn" class="wizard-step" data-wizard-type="step" data-wizard-state="done">
								<div class="wizard-label" style="padding:15px">
									<h3 class="wizard-title">
									<span>4.</span>Results</h3>
									<div class="wizard-bar"></div>
								</div>
							</div>
						</div>
					</div>
					<div class="justify-content-center my-10 px-8 my-lg-15 px-lg-10" style="padding:0px !important;margin-top: 0px !important;">
						<div class="col-xl-12 col-xxl-7" style="max-width:100%;padding:0;">
							<form class="form fv-plugins-bootstrap fv-plugins-framework" id="kt_form">
								<div id="buildTab" class="navTab pb-5" data-wizard-type="step-content" data-wizard-state="current"></div>
								<div id="candTab" class="navTab pb-5" data-wizard-type="step-content"></div>
								<div id="shareTab" class="navTab pb-5" data-wizard-type="step-content"></div>
								<div id="resultsTab" class="navTab pb-5" data-wizard-type="step-content"></div>
								<div class="d-flex justify-content-between border-top mt-5 pt-10" style="display:none !important">
									<div class="mr-2">
										<button type="button" class="btn btn-light-primary font-weight-bolder text-uppercase px-9 py-4" data-wizard-type="action-prev">Previous</button>
									</div>
									<div>
										<button type="button" class="btn btn-success font-weight-bolder text-uppercase px-9 py-4" data-wizard-type="action-submit">Submit</button>
										<button type="button" id="nxtBtn" class="btn btn-primary font-weight-bolder text-uppercase px-9 py-4" data-wizard-type="action-next">Next</button>
									</div>
								</div>
							</form>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<script type="text/javascript">
const primary = '#6993FF';
const success = '#1BC5BD';
const info = '#8950FC';
const warning = '#FFA800';
const danger = '#F64E60';

jQuery(document).ready(function() {

	$.ajaxSetup({
         headers: {
             'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
         }
     });

	KTApp.block('.mainDivCus', {
		overlayColor: '#000000',
		state: 'primary',
		message: 'Loading...'
	});

	var build_id = '{{$build_id}}';
	if (build_id == 'none') {
		jQuery('#addSubComp').click();
		jQuery('#noBuildWarn').show();
		jQuery('.btnCloseForm').hide();
		jQuery('#closeBuildForm').hide();
	}
	else {

		var main = localStorage.getItem("main");
        if (main != '' && main != null) {
            setTimeout(function() {
                switch(main) {
                	case 'candBtn':
                		KTApp.unblock('.mainDivCus');
                		jQuery('#nxtBtn').click();
						jQuery.post('/public/cand', {id:1}, function(data) {
							jQuery('#candTab').html(data);
						});
                	break;
                }
            }, 500);
            localStorage.setItem("main", "");
        }
        else {
        	setTimeout(function() {
				KTApp.unblock('.mainDivCus');
				jQuery.post('/public/build', {id:1}, function(data) {
					jQuery('#buildTab').html(data);
				});
			}, 500);
        }

		jQuery('#shareInviteBtn').click(function(e) {
			e.preventDefault();
			jQuery('#shareTab').html('');
			KTApp.block('.mainDivCus', {
				overlayColor: '#000000',
				state: 'primary',
				message: 'Loading...'
			});
			jQuery.post('/public/share', {id:1}, function(data) {
				KTApp.unblock('.mainDivCus');
				jQuery('#shareTab').html(data);
			});
		});

		jQuery('#candBtn').click(function(e) {
			e.preventDefault();
			jQuery('#candTab').html('');
			jQuery('#buildTab').html('');
			KTApp.block('.mainDivCus', {
				overlayColor: '#000000',
				state: 'primary',
				message: 'Loading...'
			});
			jQuery.post('/public/cand', {id:1}, function(data) {
				KTApp.unblock('.mainDivCus');
				jQuery('#candTab').html(data);
			});
		});

		jQuery('#resultsBtn').click(function(e) {
			e.preventDefault();
			jQuery('#resultsTab').html('');
			KTApp.block('.mainDivCus', {
				overlayColor: '#000000',
				state: 'primary',
				message: 'Loading...'
			});
			jQuery.post('/public/results', {id:1}, function(data) {
				KTApp.unblock('.mainDivCus');
				jQuery('#resultsTab').html(data);
			});
		});
		
		jQuery('#buildBtn').click(function(e) {
			e.preventDefault();
			jQuery('#resultsTab').html('');
			jQuery('#buildTab').html('');
			KTApp.block('.mainDivCus', {
				overlayColor: '#000000',
				state: 'primary',
				message: 'Loading...'
			});
			jQuery.post('/public/build', {id:1}, function(data) {
				KTApp.unblock('.mainDivCus');
				jQuery('#buildTab').html(data);
			});
		})
	}

});
</script>
@endsection