@extends(getTemplate('public'))
@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>
		<link href="{{asset('assets/core/plugins/bootstrap-datepicker/css/bootstrap-datepicker.css')}}" rel="stylesheet" />
		<link href="{{asset('assets/core/plugins/bootstrap-datepicker/css/bootstrap-datepicker3.css')}}" rel="stylesheet" />
		<script src="{{asset('assets/core/plugins/bootstrap-datepicker/js/bootstrap-datepicker.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 id="home" class="membership-wizard-1-content has-bg membership-wizard-1-home module-top-fixed bw-membershipbooking-mainpage">
		<!-- begin content-bg -->
		@if($membership && $membership->active === 'yes' && ($membership->status === 'public' OR ($membership->status === 'private' && ((int)auth()->user()->id === (int)$membership->user_id OR auth()->user()->is_admin))))
			@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('assets/themes/public/'.setting('active_public_theme').'/assets/images/bg-client.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="row bw-memberships-module-top">
					<div class="col-md-12 bw-memberships-5-wizard-col-mobile">
						<div id="">
							<h4>{{$membership->name}}</h4>
							<div class="alert alert-default bw-memberships-5-wizard-alert">
								<i class="fa fa-info-circle"></i> Please complete your booking by following all of the steps involved.
							</div>
						</div>
						<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 MANAGEMENT</div>
								@endif--}}
							@else
								<div class="alert alert-info"><i class="fa fa-inf-circle"></i><h1 class="text-center">Membership Plan not available</h1></div>
							@endif
						</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: 'top'
					}
				});

				$('#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');
					}
				});
				validateVouchers()
			});

			// Validate Voucher Codes
			function validateVouchers()	{
				$('.voucher-code').each(function(){
					var el = $(this);
					el.on('keyup',function(){
						el.removeClass('flash').css('border', '2px solid grey');
						$.post(site_root + 'memberships/ajax/checkVoucherCode',
							{
								membership_id: el.attr('data-membership-id'),
								voucher_id: el.attr('data-voucher-id'),
								code: el.val(),
							},
							function(data){
								if(data === 'true'){
									el.css('border','2px solid green');
									el.attr('readonly',true);
								}else{
									el.addClass('flash').css('border','2px solid red');
								}
							});
					});
				});
			}
		</script>
	@endpush

@endsection