@extends(getTemplate('public'))
@section('content')
	@push('custom-css')
		<link href="{{asset('assets/plugins/OwlCarousel2-2.3.4/dist/assets/owl.carousel.css')}}" rel="stylesheet">
		<link href="{{asset('assets/plugins/OwlCarousel2-2.3.4/dist/assets/owl.theme.default.css')}}" rel="stylesheet">
		<script src="{{asset('themes/admin/admin_color/assets/js/jquery.js')}}"></script>
		<script src="{{asset('themes/admin/admin_color/assets/js/jquery-ui.min.js')}}"></script>
		<link href="{{asset('modules/memberships/assets/plugins/jquery-smart-wizard/src/css/smart_wizard.css')}}" rel="stylesheet" />
		<link href="{{asset('modules/memberships/assets/css/style.css')}}" rel="stylesheet" />
		<link href="{{asset('modules/memberships/assets/plugins/bootstrap-daterangepicker/daterangepicker.css')}}" rel="stylesheet" />
		<script src="{{asset('modules/memberships/assets/plugins/bootstrap-daterangepicker/moment.js')}}"></script>
		<script src="{{asset('modules/memberships/assets/plugins/bootstrap-daterangepicker/daterangepicker.js')}}"></script>
		<link href="{{asset('assets/plugins/bootstrap-datepicker/css/bootstrap-datepicker.css')}}" rel="stylesheet" />
		<link href="{{asset('assets/plugins/bootstrap-datepicker/css/bootstrap-datepicker3.css')}}" rel="stylesheet" />
		<script src="{{asset('assets/plugins/bootstrap-datepicker/js/bootstrap-datepicker.js')}}"></script>
		<link href="{{asset('assets/plugins/bootstrap-datepicker/css/bootstrap-datepicker.css')}}" />
		<script src="{{asset('assets/plugins/bootstrap-datepicker/js/bootstrap-datepicker.js')}}"></script>
		<link href="{{asset('modules/memberships/assets/css/memberships-app5.css')}}" rel="stylesheet" />
	@endpush
	<!-- begin #content -->
	<div id="content" class="content module-top-fixed" style="">
		<div class="container">
			<div class="bw-memberships-2-ad-box">
				<div class="row bw-memberships-module-top">
					<div class="row col-md-12">
						<div class="col-md-8">
							<h4 class="bw-memberships-3-description-title">{{ucwords($membership->name)}}</h4>
						</div>
						<div class="col-md-4">
							<h4 class="bw-memberships-2-description-price">
							@php $currency = new Currency($membership->currency_id); @endphp
							@if($membership->price > 0)
								@if($membership->vat > 0 && $membership->show_vat === 'yes')
									@php $price = number_format(($membership->price + (($membership->price * $membership->vat) / 100)),2,'.',','); @endphp
									{{$currency->symbol.$price}} <small>VAT Inclusive</small>
								@else
									@php $price = number_format($membership->price,2,'.',','); @endphp
									{{$currency->symbol.$price}} <small>VAT Exclusive</small>
								@endif
							@else
								{{$currency->symbol}}0.00 <small>Free Membership</small>
							@endif
							</h4>
						</div>
					</div>
					<div class="col-md-6">
						<div class="bw-desks-3-booking-box">
							<div class="col-md-12 bw-desks-3-description-nopadding-mobile">
								@if($membership->exists() && $membership->active === 'yes' && ($membership->status === 'public' OR ($membership->status === 'private' && ((int)$this->user->id === (int)$membership->user_id OR auth()->user()->is_admin))))
									<div class="">
										@if($membership->exists() && $membership->active == 'yes' && ($membership->status === 'public' OR ($membership->status === 'private' && ((int)$this->user->id === (int)$membership->user_id OR auth()->user()->is_admin))))
											<form id="membership-desk-form" action="{{url('booking_memberships/ajax/prep/'.$membership->id)}}" method="post" name="form-wizard" class="form-control-with-bg" data-module="true">
												<div class="bw-desks-3-questions">
													{!!$membership->get_questionnaire_fields()!!}
												</div>
											</form>
										@else
											<div class="alert alert-info"><i class="fa fa-inf-circle"></i><h1 class="text-center">No Such Membership </h1></div>
										@endif
									</div>
								@endif
							</div>
						</div>
					</div>
					<div class="col-md-6 bw-memberships-3-description-nopadding">
						<div class="bw-memberships-3-description-box">
							{!! $membership->description !!}
							<div class="row bw-memberships-3-description-facilities">
								@php
									$amenity_ids = strpos($membership->amenities,',') !== FALSE ? explode(',',$membership->amenities) : [$membership->amenities];
								@endphp
								@if(count($amenity_ids) > 0)
									@if(count($amenity_ids) > 0)
										@php
											$a = new Amenity();
											$amenities = $a->where_in('id',$amenity_ids)->get();
										@endphp
										@if($amenities->exists())
											@foreach($amenities as $amenity)
												<div class="col-md-4 bw-memberships-3-facilities-col2">
													<div class="theme-bg-card-default bw-memberships-3-facilities-box">
														<div class="bw-memberships-3-facilities-i">
															<i class="{{$amenity->icon}}"></i>
														</div>
														<span>{{ucwords($amenity->name)}}</span>
													</div>
												</div>
											@endforeach
										@endif
									@endif
								@endif
							</div>
						</div>
					</div>
				</div>
			</div>
			@if($membership->exists())
				<div class="bw-memberships-3-gallery">
					@if($membership->files()->exists())
						<div class="owl-images owl-carousel owl-theme">
							@foreach($membership->files() as $image)
								<div class="item bw-memberships-3-img-item">
									<img class="img-responsive" src="{{asset($image->url)}}" alt="{{$membership->name}}" alt="">
								</div>
							@endforeach
						</div>
					@else
						<img src="{{asset($membership->image)}}" class="img-fluid img-responsive bw-memberships-3-img-item-img" alt="{{$membership->name}}" />
					@endif
				</div>
			@else
				<div class="col-md-12 alert alert-default">
					<p><i class="fa fa-default-circle"></i> No Service Found or has been Deleted</p>
				</div>
			@endif
		</div>
	</div>
	<!-- end #home -->
	<!-- end #content -->
	@push('custom-js')
		<script src="{{asset('assets/plugins/OwlCarousel2-2.3.4/dist/owl.carousel.js')}}"></script>
		<script src="{{asset('assets/plugins/parsley/dist/parsley.js')}}"></script>
		<script src="{{asset('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:'Next',
						previous:'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');
					}
				});
				validateVouchers();

				var secondRow = $(".owl-images");
				secondRow.owlCarousel({
					loop: true,
					autoplay:true,
					autoplayHoverPause:true,
					margin:10,
					responsiveClass:true,
					smartSpeed:700,
					responsive:{
						0:{
							items:1,
							nav:false
						},
						400:{
							items:1,
							nav:false
						},
						768:{
							items:1,
							nav:false
						},
						992:{
							items:1,
							nav:false
						}
					},
					nav: false,
					dots: false,
					navText: [
						'<span aria-label="' + 'Previous' + '">&#x2039;</span>',
						'<span aria-label="' + 'Next' + '">&#x203a;</span>'
					],
				});
				$('.play').on('click',function(){
					secondRow.trigger('play.owl.autoplay',[1000])
				});
				$('.stop').on('click',function(){
					secondRow.trigger('stop.owl.autoplay')
				});
			});
			// 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