@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-app3.css')}}" rel="stylesheet" />
	@endpush
	<!-- begin #content -->
	<div id="content" class="content module-top-fixed" style="">
		<div class="container">
			@if($membership->exists())
				<div class="bw-memberships-2-ad-box">
					<div class="row bw-memberships-module-top">
						<div class="col-md-8">
							@if($membership->files()->exists())
								<div class="owl-images owl-carousel owl-theme">
									@foreach($membership->files() as $image)
										<div class="item bw-memberships-2-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-2-img-item-img" alt="{{$membership->name}}" />
							@endif
							<div class="bw-memberships-2-description-box">
								<div class="row">
									<div class="col-md-8">
										<h4 class="bw-memberships-2-description-title">{{ucwords($membership->name)}} <a class="bw-memberships-4-booknows" href="#bw-memberships-booking"><span class="btn btn-sm btn-success">Book Now</span></a></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-12 bw-memberships-2-description-nopadding">
									{!! $membership->description !!}
								</div>
								@php
									$amenity_ids = strpos($membership->amenities,',') !== FALSE ? explode(',',$membership->amenities) : [$membership->amenities];
									$a = new Amenity();
									if(count($amenity_ids) > 0)
									    $all_amenities = $a->where_in('id', $amenity_ids)->get();
									else
										$all_amenities = $a->get();
									$amenity_category_ids = [];
									foreach($all_amenities as $am){
									    if(!in_array($am->amenity_category->id, $amenity_category_ids))
									        $amenity_category_ids[] = $am->amenity_category_id;
									}
									if(count($amenity_ids) > 0 && count($amenity_category_ids) > 0){
										$ac = new Amenity_category();
										$a_categories = $ac->where_in('id', $amenity_category_ids)->get();
									}
								@endphp
								@if($all_amenities->exists() && $membership->amenities)
									<div class="row">
										@foreach($a_categories as $amenity_category)
											@if($amenity_category->amenity->get()->exists())
												<div class="col-md-6">
													<h6 class="bw-memberships-2-description-ul-titles">{{ucwords($amenity_category->name)}}</h6>
													<ul class="bw-memberships-2-description-ul">
														@foreach($amenity_category->amenity->get() as $amenity)
															@if(in_array($amenity->id, $amenity_ids))
																<li>{{ucwords($amenity->name)}}</li>
															@endif
														@endforeach
													</ul>
												</div>
											@endif
										@endforeach
									</div>
								@endif
							</div>
						</div>
						<div class="col-md-4">
							<h5 class="text-center">Membership Sign-Up</h5>
							<div id="bw-memberships-booking" class="bw-memberships-2-booking-box">
								<div class="col-md-12 bw-memberships-2-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('memberships/ajax/prep/'.$membership->id)}}" method="post" name="form-wizard" class="form-control-with-bg" data-module="true">
													<div id="wizard" class="bw-memberships-4-wizard">
														{!!$membership->get_questionnaire_fields()!!}
													</div>
												</form>
											@else
												<div class="alert alert-info"><i class="fa fa-inf-circle"></i><h1 class="text-center">No Membership Booking</h1></div>
											@endif
										</div>
									@endif
								</div>
							</div>
						</div>
					</div>
				</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;
				});

				$('#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: true,
					dots: true,
					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')
				});
			});
			window.onscroll = function() {myFunction()};
			var header = document.getElementById("bw-memberships-booking");
			var sticky = header.offsetTop;

			// Progress Bar
			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 + '%');
			}
			// 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');
									}
								});
					});
				});
			}

			function myFunction() {
				if (window.pageYOffset > sticky) {
					header.classList.add("bw-memberships-sticky");
				} else {
					header.classList.remove("bw-memberships-sticky");
				}
			}
		</script>
	@endpush
@endsection