@extends(getTemplate('cp'))
@section('content')
	@push('custom-css')
		<script src="{{asset('assets/themes/admin/admin_color/assets/js/jquery.js')}}"></script>
		<script src="{{asset('assets/themes/admin/admin_color/assets/js/jquery-ui.min.js')}}"></script>
		<link href="{{asset('assets/modules/memberships/assets/plugins/jquery-smart-wizard/src/css/smart_wizard.css')}}" rel="stylesheet" />
		<link href="{{asset('assets/modules/memberships/assets/css/style.css')}}" rel="stylesheet" />
		<link href="{{asset('assets/modules/memberships/assets/plugins/bootstrap-daterangepicker/daterangepicker.css')}}" rel="stylesheet" />
		<script src="{{asset('assets/modules/memberships/assets/plugins/bootstrap-daterangepicker/moment.js')}}"></script>
		<script src="{{asset('assets/modules/memberships/assets/plugins/bootstrap-daterangepicker/daterangepicker.js')}}"></script>
		<script src="{{asset('assets/core/plugins/konva-v4/konva-v4.js')}}"></script>
		<link href="{{asset('assets/core/plugins/bootstrap-datepicker/css/bootstrap-datepicker.css')}}" />
		<script src="{{asset('assets/core/plugins/bootstrap-datepicker/js/bootstrap-datepicker.js')}}"></script>
	@endpush
	<!-- begin #content -->
<div class="panel panel-inverse">
	<div class="panel-heading">
		<h4 class="panel-title">{{$title}}</h4>
	</div>
	<div class="panel-body">
		<div id="home" class="membership-wizard-1-content has-bg membership-wizard-1-home" style="margin-top:0;min-height: 100vh;">
			<!-- begin content-bg -->
			@if($membership)
				@if($membership->image != '')
					<div class="membership-wizard-1-content-bg" style="background-image: url({{asset($membership->image)}});"
						 data-paroller="true"
						 data-paroller-factor="0.5"
						 data-paroller-factor-xs="0.25">
					</div>
				@endif
			@else
				<div class="membership-wizard-1-content-bg" style="background-image: url(@asset('images/bg-content-wizard-1.jpg'));"
					 data-paroller="true"
					 data-paroller-factor="0.5"
					 data-paroller-factor-xs="0.25">
				</div>
			@endif
		<!-- end content-bg -->
			<div class="container membership-wizard-1-home-content">
				<div class="col-md-12">
					<div class="row">
						<div class="col-md-12">
							<div class="booking-membership-application-form">
								@if($membership && $membership->active == 'yes')
									@php $groups_allowed_to_book = explode(',', setting('shop_groups', 'memberships')); @endphp
									@if(auth()->user()->hasAnyRole($groups_allowed_to_book))
										<form id="membership-desk-form" action="{{url('payments/checkout')}}" method="post" name="form-wizard" class="form-control-with-bg" data-module="true">
                                            <input type="hidden" name="module" value="Memberships" />
                                            <input type="hidden" name="id" value="{{$membership->id}}" />
                                            <div id="wizard">
												{!!$membership->getQuestionnaireFields()!!}<hr>
											</div>
											<div class="stats-progress progress">
												<div class="progress-bar" style="width: 0%;"></div>
											</div>
										</form>
                                        @if ($errors->any())
                                            <div class="alert alert-danger">
                                                <ul>
                                                    @foreach ($errors->all() as $error)
                                                        <li>{{ $error }}</li>
                                                    @endforeach
                                                </ul>
                                            </div>
                                        @endif
									@else
										<div class="alert alert-info"><i class="fa fa-inf-circle"></i> SORRY,YOU ARE NOT ALLOWED TO BOOK A MEMBERSHIP.PLEASE CONTACT ADMIN</div>
									@endif
								@else
									<div class="alert alert-info"><i class="fa fa-inf-circle"></i><h1 class="text-center">No Such Membership </h1></div>
								@endif
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
	<!-- end #home -->
	<!-- end #content -->
	@push('custom-js')
		<script src="{{asset('assets/core/plugins/parsley/dist/parsley.js')}}"></script>
		<script src="{{asset('assets/modules/memberships/assets/plugins/jquery-smart-wizard/src/js/jquery.smartWizard.js')}}"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				$('#wizard').smartWizard({
					selected: 0,
					theme: 'default',
					transitionEffect:'',
					transitionSpeed: 0,
					useURLhash: false,
					showStepURLhash: false,
					lang: {
						next:'>',
						previous:'<'
					},
					toolbarSettings: {
						toolbarPosition: 'bottom'
					}
				});

				$('#wizard').on('leaveStep', function(e, anchorObject, stepNumber, stepDirection) {
					var res = $('form[name="form-wizard"]').parsley().validate('step-' + (stepNumber + 1));
					progress_bar();
					return res;
				});

				function progress_bar() {
					var completed = 0;
					var count = 0;
					$('form[name="form-wizard"]').find('.progress_input').each(function(i, v) {
						count++;
						if ($(v).val()) {
							completed++;
						}
					});
					var step = 100 / count;
					var completed_step = step * completed;
					$('.progress-bar').css('width', completed_step + '%');
				}

				$('#wizard').keypress(function( event ) {
					if (event.which == 13 ) {
						$('#wizard').smartWizard('next');
					}
				});

				if ($('#wizard .step-anchor li').length == 1) {
					$('#wizard .btn-toolbar').css('display', 'none');
					$('.stats-progress').hide();
				}
			});
		</script>
	@endpush
@endsection