<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">
</script>
<link rel="stylesheet"	href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">
<link rel="stylesheet"	href="https://www.bifms.net/gymapp/wp-content/plugins/gym-management/assets/css/custom.css">
<link rel="stylesheet"	href="https://www.bifms.net/gymapp/wp-content/plugins/gym-management/assets/css/frontend_calender.css">
<link rel="stylesheet"	href="https://www.bifms.net/gymapp/wp-content/plugins/gym-management/assets/css/fullcalendar.css">
<link rel="stylesheet"	href="https://www.bifms.net/gymapp/wp-content/plugins/gym-management/assets/css/gymmgt_min.css">
<script type="text/javascript"	src="https://www.bifms.net/gymapp/wp-content/plugins/gym-management/assets/js/moment_min.js"></script>
<script type="text/javascript"	src="https://www.bifms.net/gymapp/wp-content/plugins/gym-management/assets/js/fullcalendar_min.js"></script>
<script type="text/javascript"	src="https://www.bifms.net/gymapp/wp-content/plugins/gym-management/assets/js/popper.min.js"></script>
<!-------------------- METERIAL DESIGN AND JS ------------------>
<link rel="stylesheet"	href="https://www.bifms.net/gymapp/wp-content/plugins/gym-management/assets/css/material/bootstrap-inputs.css">
<script type="text/javascript"	src="https://www.bifms.net/gymapp/wp-content/plugins/gym-management/assets/js/material/material.min.js"></script>
<!-------------------- METERIAL DESIGN AND JS END ------------------>

<script type="text/javascript"	src="https://www.bifms.net/gymapp/wp-content/plugins/gym-management/assets/js/calendar-lang/en.js"></script>
<link rel="stylesheet"	href="https://www.bifms.net/gymapp/wp-content/plugins/gym-management/assets/css/bootstrap-multiselect.css">	
<link rel="stylesheet"	href="https://www.bifms.net/gymapp/wp-content/plugins/gym-management/assets/css/bootstrap_min.css">	
<script type="text/javascript"	src="https://www.bifms.net/gymapp/wp-content/plugins/gym-management/assets/js/bootstrap-multiselect.js"></script>
<script type="text/javascript"	src="https://www.bifms.net/gymapp/wp-content/plugins/gym-management/assets/js/bootstrap_min.js"></script>

<link rel="stylesheet"	href="https://www.bifms.net/gymapp/wp-content/plugins/gym-management/assets/css/new_style.css">
<link rel="stylesheet"	href="https://www.bifms.net/gymapp/wp-content/plugins/gym-management/assets/css/responsive_new_design.css">
<link rel="stylesheet"	href="https://www.bifms.net/gymapp/wp-content/plugins/gym-management/assets/css/material/bootstrap-inputs.css">
<link rel="stylesheet"	href="https://www.bifms.net/gymapp/wp-content/plugins/gym-management/assets/css/popping_font.css">
<script type="text/javascript"	src="https://www.bifms.net/gymapp/wp-content/plugins/gym-management/assets/js/material/material.min.js"></script>
<script type="text/javascript">
	//var $ = jQuery.noConflict();
	var calendar_laungage ="en";
    document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('calendar');
    var calendar = new FullCalendar.Calendar(calendarEl, {
			  headerToolbar: {
		        left: 'prev,next today',
		        center: 'title',
		        right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth'
		      },
			  locale: calendar_laungage,
				editable: false,
			slotEventOverlap: false,
			
			dayMaxEventRows: true,
			eventTimeFormat: { // like '14:30:00'
		   		hour: 'numeric',
			   	minute: '2-digit',
			  	meridiem: 'short'
		  	},
			 // allow "more" link when too many events
			events: [],
			forceEventDuration : true,
			//start add class in pop up//
	        eventClick: function(event, jsEvent, view) 
	        {
				//console.log(event);
	        	"use strict";
								var dateformate_value='dd-mm-yy';	
				if(dateformate_value == 'yy-mm-dd')
				{	
				  var dateformate='YYYY-MM-DD h:mm A';
				}
				if(dateformate_value == 'yy/mm/dd')
				{	
				  var dateformate='YYYY/MM/DD h:mm A';	
				}
				if(dateformate_value == 'dd-mm-yy')
				{	
				  var dateformate='DD-MM-YYYY h:mm A';
				}
				if(dateformate_value == 'mm-dd-yy')
				{	
				  var dateformate='MM-DD-YYYY h:mm A';
				}
				if(dateformate_value == 'mm/dd/yy')
				{	
				  var dateformate='MM/DD/YYYY h:mm A';	
				}
				jQuery("#eventContent #class_name").html(event.event._def.title);
				jQuery("#eventContent #startTime").html(moment(event.event.start).format(dateformate));
				jQuery("#eventContent #endTime").html(moment(event.event.end).format(dateformate)); 
				jQuery("#eventContent #staff_member_name ").html(event.event._def.extendedProps.trainer);
				jQuery("#eventContent #membership_name ").html(event.event._def.extendedProps.membership_name);
				jQuery("#eventContent #Member_limit ").html(event.event._def.extendedProps.Member_limit);
				jQuery("#eventContent #btn_submit ").html(event.event._def.extendedProps.btn_submit);
				jQuery("#eventContent #Remaining_Member_limit ").html(event.event._def.extendedProps.remaning_memmber);
				jQuery("#eventContent #class_date_id ").html(event.event._def.extendedProps.class_date);
				jQuery("#class_name_1").val(event.event._def.title);
				jQuery("#class_name_2").val(event.event._def.title);
				jQuery("#class_name_1_guest").val(event.event._def.title);
				jQuery("#startTime_1").val(moment(event.event.start).format(dateformate));
				jQuery("#startTime_2").val(moment(event.event.start).format(dateformate));
				jQuery("#startTime_1_guest").val(moment(event.event.start).format(dateformate));
				jQuery("#endTime_1").val(moment(event.event.end).format(dateformate));
				jQuery("#endTime_2").val(moment(event.event.end).format(dateformate));
				jQuery("#endTime_1_guest").val(moment(event.event.end).format(dateformate));
				jQuery("#staff_member_name_1").val(event.event._def.extendedProps.trainer);
				jQuery("#staff_member_name_1_guest").val(event.event._def.extendedProps.trainer);
				jQuery("#Member_limit_1").val(event.event._def.extendedProps.Member_limit);
				jQuery("#Member_limit_1_guest").val(event.event._def.extendedProps.Member_limit);
				jQuery("#Remaining_Member_limit_1").val(event.event._def.extendedProps.remaning_memmber);
				jQuery("#Remaining_Member_limit_2").val(event.event._def.extendedProps.remaning_memmber);
				jQuery("#Remaining_Member_limit_1_guest").val(event.event._def.extendedProps.remaning_memmber);
				jQuery("#class_id1").val(event.event._def.extendedProps.class_id);
				jQuery("#class_id2").val(event.event._def.extendedProps.class_id);
				jQuery("#class_id1_guest").val(event.event._def.extendedProps.class_id);
				jQuery("#day_id1").val(event.event._def.extendedProps.day);
				jQuery("#day_id2").val(event.event._def.extendedProps.day);
				jQuery("#day_id1_guest").val(event.event._def.extendedProps.day);
				jQuery("#bookedclass_membershipid").val(event.event._def.extendedProps.membership_id);
				jQuery("#bookedclass_membershipid2").val(event.event._def.extendedProps.membership_id);
				jQuery("#bookedclass_membershipid_guest").val(event.event._def.extendedProps.membership_id);
				jQuery("#class_date1").val(event.event._def.extendedProps.class_date);
				jQuery("#class_date2").val(event.event._def.extendedProps.class_date);
				jQuery("#class_date1_guest").val(event.event._def.extendedProps.class_date);
				jQuery("#btn_submit").val(event.event._def.extendedProps.btn_submit);
				jQuery("#d_id").html();
				
				var remaning_memmber_0 = event.event._def.extendedProps.remaning_memmber;
				if(remaning_memmber_0 == '0')
				{
					jQuery("#d_id").css("display","none");
					jQuery("#show").css("display","none");
					jQuery("#buy_membership_class_div").css("display","none");
				}
				else
				{
					jQuery("#d_id").css("display","block");
					jQuery("#show").css("display","block");
					jQuery("#buy_membership_class_div").css("display","block");
				}
				
				var membership_name_1  = event.event._def.extendedProps.membership_name;
				if(membership_name_1 == '')
				{
					jQuery(".merbership_name_min").css("display","none");
					jQuery("#show").css("display","none");
					jQuery("#d_id").css("display","none");
				}
				else
				{
					jQuery(".merbership_name_min").css("display","block");
					jQuery("#show").css("display","block");
					jQuery("#d_id").css("display","block");
				}
				var today = new Date();
				var class_dates= event.event._def.extendedProps.class_date;
				var dd = today.getDate();
				var mm = today.getMonth()+1; 
				var yyyy = today.getFullYear();
				if(dd<10) 
				{
					dd='0'+dd;
				} 

				if(mm<10) 
				{
					mm='0'+mm;
				} 
				var new_today = yyyy+'-'+mm+'-'+dd;
				
				if(new_today <= class_dates )
				{
					$("#eventLink").attr('href', event.event._def.extendedProps.url);
					$("#eventContent").dialog({ modal: true, title: 'Class Book',width:500, height:420 });
					$( "#eventContent" ).removeClass( "display_none" );
					$(".ui-dialog-titlebar-close").text('x');
					$(".ui-dialog-titlebar-close").css('height',30);
				}

		    },
			eventAfterRender: function (event, element, view) {
					var today = new Date();
					var class_dates= event.class_date;
					var dd = today.getDate();
					var mm = today.getMonth()+1; 
					var yyyy = today.getFullYear();
					if(dd<10) 
					{
						dd='0'+dd;
					} 

					if(mm<10) 
					{
						mm='0'+mm;
					} 
					var new_today = yyyy+'-'+mm+'-'+dd;
	
					if (class_dates < new_today)
					{
						element.css('opacity','0.5');
					}
				},
			//end  add class in pop up//
	})
calendar.render();	
});
</script>
<script>
jQuery(document).ready(function($) 
{
	"use strict";
	// add the responsive classes after page initialization
	window.onload = function () {
		$('.fc-toolbar.fc-header-toolbar').addClass('row col-lg-12');
	};

	// add the responsive classes when navigating with calendar buttons
	$(document).on('click', '.fc-button', function(e) {
		$('.fc-toolbar.fc-header-toolbar').addClass('row col-lg-12');
	});
	
	//Open Guest Booking POP-UP
	$('#show').on('click', function ()
	{
		$('#eventContent').dialog('close')
		$('.center').show();
		$(this).hide();
	});
	
	//Close Guest Booking POP-UP
	$('#close').on('click', function () {
		$('.center').hide();
		$('#show').show();
	});
	$('#classis_id').multiselect(
	{
		nonSelectedText :'Select Class',
		includeSelectAllOption: true,
		allSelectedText :'All Selected',
		selectAllText : 'Select all',
		templates: {
				button: '<button class="multiselect btn btn-default dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false"><span class="multiselect-selected-text"></span><b class="caret"></b></button>',
			},
		buttonContainer: '<div class="dropdown" />'
	});	
	 $("body").on("click", "#buy_membership_class", function(event){	
	 
		var id = $(this).attr("ids");
		var membership_id =$(".buy_membership_"+id).attr("attr_");
		var class_id = $('#class_id1').val();
		var startTime_1 = $('#startTime_1').val();
		var class_date = $('#class_date1').val();
		var day_id1 = $('#day_id1').val();
		var bookedclass_membershipid = $(".buy_membership_"+id).attr("attr_");
		var Remaining_Member_limit_1 = $('#Remaining_Member_limit_1').val();
		//var action='?action=fronted_membership&membership_id='+membership_id+'&class_id='+class_id;
		var action='?action=frontend_class_book_with_membership_id&membership_id='+membership_id+'&class_id='+class_id+'&startTime_1='+startTime_1+'&class_date='+class_date+'&day_id1='+day_id1+'&bookedclass_membershipid='+bookedclass_membershipid+'&Remaining_Member_limit_1='+Remaining_Member_limit_1;
		var home="https://www.bifms.net/gymapp/member-registration-or-login"+action;
		window.location.replace(home); 
	 });
});
</script>


<script type="text/javascript">
$(function () {
	$("body").on("click","td.fc-event-container a.fc-start",function(){
		$("body").addClass("calender-popup-open");
   });
   
});

jQuery(document).ready(function () {
	   $("body").on("click", ".ui-dialog-titlebar-close", function(event){
		  // $("body").removeClass("calender-popup-open");
	   });
	
	$("body").on("change", "#membership_id ", function(event){		
	event.preventDefault(); // disable normal link function so that it doesn't refresh the page
	var ajaxurl = "https://www.bifms.net/gymapp/wp-admin/admin-ajax.php";
	
	var res_json;
	var membership_id = $(this).val();
		
	var membership_hidden = $('.membership_hidden').val();
	var categCheck = jQuery('.classis_ids').multiselect();	

	if(membership_id!="")
	{		
		var curr_data = {
			url: ajaxurl,
			action: 'MJ_gmgt_get_class_id_by_membership',
			membership_id : membership_id,	 	
			membership_hidden : membership_hidden,	 	
			dataType: 'json'
		};
		
		$.post(ajaxurl, curr_data, function(response) 
		{		
			
			if(response == 1)
			{		
				alert(language_translate.membership_member_limit_alert);
								
				$('#membership_id').val('');	
				$('#classis_id').html('');		
				categCheck.multiselect('rebuild');						
			}
			else
			{		
				$('#classis_id').html('');	
				$('#classis_id').html(response);	
				categCheck.multiselect('rebuild');		
			}
			return true; 					
		});
	}
	else
	{
		$('#classis_id').html('');	
		categCheck.multiselect('rebuild');		
		return true; 
	}
});
});
</script>
<style>
	body
	{
		background-color: var(--global--color-background);
	}
	.form-control
	{
		line-height: 2.5 !important;
	}
	.search_responisve_pd_b_calendar .btn_filter{
			border-radius: 28px;
			padding: 4px 20px !important;
			background-color: #014D67 !important;
			border: 0px;
			color: #ffffff;
			font-size: 16px !important;
			text-transform: uppercase;
		}
	.btn_filter
	{
		margin-left: 10px !important;
		float: left!important;
		padding: 4px!important;
		margin-top: 2px!important;
		font-size: 15px!important;
	}
	#buy_membership_class
	{
		padding: 1px;
	}
	.min_width_300
	{
		max-width: 300px;
		min-width: 300px;
	}
	.mb_10 
	{
		margin-bottom:10px;
	}
	.margin_right_10
	{
		margin-right:10px;
	}
	.alert_msg
	{
		font-size: 16px;
   		color: red;
	}
	.msg2
	{
		font-size: 16px;
   		color: green;
	}
	.width_80
	{
		width:80%;
	}
	#calendar .fc-view-harness
	{
		height: 534px !important;
	}
	/* .calender_classbooking_div .row>*
	{
		width: auto !important;
	} */
</style>
<!------------ Twenty Nineteen CSS ----------->
<style>
	.image-filters-enabled .btn_filter 
	{
		margin-left: 10px !important;
		float: left!important;
		padding: 4px!important;
		margin-top: 26px!important;
		font-size: 15px!important;
	}
	.image-filters-enabled #buy_membership_class 
	{
    	padding: 5px;
	}
	@media only screen and (max-width : 768px) {
		.dis_flex {
			display: flow-root !important;
		}
		.ui-dialog {
			margin-left: 0% !important;
		}
		.center.hideform {
			left: 10px !important;
			width: 100%;
		}
		.fc-daygrid-event
		{
			overflow: hidden;
		}
		.fc-more-link
		{
			font-size: 11px !important;
		}
	}
</style>
<div class="class_booking_custom_div">
			<style>
			.theme_padding_top_20px
			{
				padding-top: 20px;
			}
		</style>
			<form method="post" class="filter_cal">
		<input type="hidden" name="membership_hidden" class="membership_hidden" value="0">
		<div class=" dis_block_res">
			<div class="form-body user_form theme_padding_top_20px"> <!--form-Body div Strat-->   
				<div class="row"><!--Row Div--> 
					<div class="col-sm-12 col-md-4 col-lg-4 col-xl-4 input avada_custome_div">
												<select name="membership_id" class="form-control validate[required] width_300" id="membership_id">
							<option value="">Select Membership </option>
							<option value=5 >Golden Membership</option><option value=4 >5 Session plus 1</option><option value=1 >Tenant Membership Andorra</option>						</select>
					</div>
					<div class="col-sm-12 col-md-4 col-lg-4 col-xl-4 input avada_custome_div2">
												<select name="staff_id" class="form-control validate[required] width_300" id="staff_id">
							<option value="">Select Staff Member</option>
							<option value=37 >Danika Vines</option><option value=90 >Chan .</option><option value=29 >Afzal Hussain</option><option value=60 >Jeewan Moril</option><option value=57 >Yassin latiri</option><option value=26 >Lucy Webb</option><option value=25 >Nouf Abdallah</option><option value=10 >Mohammad Othman</option><option value=91 >Dalia .</option><option value=58 >Sara Darweesh</option><option value=35 >Shifa Omer</option><option value=19 >Sima Ghannam</option><option value=45 >Mohammed Al Jamal</option><option value=23 >Tahani Farahat</option><option value=36 >Samar Alturk</option><option value=59 >Dana D</option><option value=18 >Yousef Seedou</option>						</select>
					</div>
					<div class="col-sm-12 col-md-4 col-lg-4 col-xl-4 input">
						<input type="submit" value="Search" name="guset_book_front_filter" class="save_btn">
					</div>
				</div>
			</div>
		</div>
	</form>
	<!--task-event POP up code -->
	<div class="popup-bg">
		<div class="overlay-content content_width">
			<div class="modal-content" id="border_top_5">
				<div class="task_event_list">
				</div>     
			</div>
		</div>     
	</div>
	<!-- End task-event POP-UP Code -->
	<!-- CLASS BOOK IN CALANDER POPUP HTML CODE -->
	<div id="eventContent" class="modal-body display_none"><!--MODAL BODY DIV START-->
		<style>
			.ui-dialog-titlebar-close
			{
				font-size: 13px !important;
				border: 1px solid transparent !important;
				border-radius: 0 !important;
				outline: 0!important;
				background-color: #fff !important;
				background-image: url("https://www.bifms.net/gymapp/wp-content/plugins/gym-management/assets/images/dashboard_icon/Close.png");
				background-repeat: no-repeat;
				float: right;
				color: #fff !important;
				width: 10% !important;
				height: 30px !important;
			}
			.ui-widget-header {
				border: 0px solid #aaaaaa !important;
				background: unset !important;
				font-size: 22px !important;
				color: #333333 !important;
				font-weight: 500 !important;
				font-style: normal!important;
				font-family: Poppins!important;
			}
			.ui-dialog {
				background: #ffffff none repeat scroll 0 0;
				border-radius: 4px;
				box-shadow: 0 0 5px rgb(0 0 0 / 90%);
				cursor: default;
			}
			.popup_padding_15px
			{
				padding: 0 15px 15px 15px;
			}
			@media (max-width: 768px)
			{
				.ui-dialog.ui-corner-all.ui-widget.ui-widget-content.ui-front.ui-draggable.ui-resizable
				{
					width: 332px !important;
					left: -131px !important;
					top: 2878.5px !important;
				}
			}
			.content_main_div_for_class_booking
			{
				height: 260px;
				overflow: scroll;
				overflow-x: hidden;
			}
			.margin_top_10px
			{
				margin-top: 10px !important;
			}
		</style>
		
		<input type="hidden" id="class_name_1" name="class_name_1" value="" />
		<input type="hidden" id="startTime_1" name="startTime_1" value="" />
		<input type="hidden" id="endTime_1" name="endTime_1" value="" />
		<input type="hidden" id="class_id1" name="class_id1" value="" />
		<input type="hidden" id="day_id1" name="day_id1" value="" />
		<input type="hidden" id="bookedclass_membershipid" name="bookedclass_membershipid" value="" />
		<input type="hidden" id="Remaining_Member_limit_1" name="Remaining_Member_limit_1" value="" />
		<input type="hidden" id="class_date1" name="class_date" value="" />
		<div class="content_main_div_for_class_booking">
			<div class="penal-body">
				<div class="row">
					<div class="col-md-6 popup_padding_15px">
						<label for="" class="popup_label_heading">Name</label><br>
						<label for="" class="label_value" id="class_name"></label>
					</div>
					<div class="col-md-6 popup_padding_15px">
						<label for="" class="popup_label_heading">Start Date &amp; Time</label><br>
						<label for="" class="label_value" id="startTime"></label>
					</div>
					<div class="col-md-6 popup_padding_15px">
						<label for="" class="popup_label_heading">End Date &amp; Time</label><br>
						<label for="" class="label_value" id="endTime"></label>
					</div>
					<div class="col-md-6 popup_padding_15px">
						<label for="" class="popup_label_heading">Trainer Name:</label><br>
						<label for="" class="label_value" id="staff_member_name"></label>
					</div>
					<div class="col-md-6 popup_padding_15px">
						<label for="" class="popup_label_heading">Member Limit</label><br>
						<label for="" class="label_value" id="Member_limit"></label>
					</div>
					<div class="col-md-6 popup_padding_15px">
						<label for="" class="popup_label_heading">Remaining Member</label><br>
						<label for="" class="label_value " id="Remaining_Member_limit"> </label>
					</div>
				</div>  
			</div>
		
			<div class="merbership_name_min">
				<b class="wdth_170"> Membership Name :</b> 
				<div class="dis_flex"><span id="membership_name" class="min_width_300"></span>
				<span id="btn_submit" class="save_btn divi_display"></span></div>
			</div>
		</div>
		<div class="main_div_bookiing_popup_form gmgt_child_class_booking_form">
			<form method="post" class="gmgt_child_login_book" accept-charset="utf-8" action="?action=frontend_book">
				<input type="hidden" id="class_name_2" name="class_name_1" value="" />
				<input type="hidden" id="startTime_2" name="startTime_1" value="" />
				<input type="hidden" id="endTime_2" name="endTime_1" value="" />
				<input type="hidden" id="class_id2" name="class_id1" value="" />
				<input type="hidden" id="day_id2" name="day_id1" value="" />
				<input type="hidden" id="bookedclass_membershipid2" name="bookedclass_membershipid" value="" />
				<input type="hidden" id="Remaining_Member_limit_2" name="Remaining_Member_limit_1" value="" />
				<input type="hidden" id="class_date2" name="class_date" value="" />
				
				<div class="frontend_booking_btn col-md-5 col-lg-5 submit margin_top_10px">
											<input type="submit" name="frontend_guest_book" id="d_id" style="line-height:18px;" class=" sumit display save_btn book_buy_btn" value="LOGIN TO BOOK"/>
									</div>	
				
			</form>	
			<div class="frontend_book_Class_div col-md-5" style="margin-top: 22px;">
				
				<a href="#" name="frontend_book_Class" class="save_btn btn" style="line-height: 34px;" id="show">Book Demo Class</a>
			</div>
		</div>	
	</div><!--MODAL BODY DIV END-->

	<div class="cal_width col-md-12 float_initial calender_classbooking_div">		
		<div class="panel panel-white cad">
			<div class="panel-body">
				<div id="calendar">
				</div>
			</div>
		</div>
	</div>
</div>
	<style>
		.center {
		margin: auto;
		width: 50%;
		padding: 20px;
		box-shadow: 0 5px 15px rgb(0 0 0 / 50%);
		}
		.divi_text_center .fnt_color{
			margin: 0.5rem auto 2rem !important;
		}
		.class_booking_custom_div .cal_width{
			max-width: 80%!important;
   			margin: auto;
		}
		.class_booking_custom_div .cal_width .cad{
			margin-top: 20px;
		}
		.class_booking_custom_div .filter_cal{
			max-width: 80%;
			margin: auto;
			margin-bottom: 20px;
		}
		.class_booking_custom_div{
			max-width: 100% !important;
		}
		.hideform {
			display: none;
		}
		.center.hideform
		{
			position: fixed;
			top: 41px;
			left: 391px;
			z-index: 999999;
			background: #ffffff url("images/ui-bg_flat_75_ffffff_40x100.png") 50% 50% repeat-x;
			border: 1px solid #aaaaaa;
			color: #222222;
			box-shadow: none;
		}
		.classs_booking_div_main_class_guest .col-sm-12{
			padding-bottom: 10px;
		}
		.booking_class_btn{
			border-radius: 28px !important;
			padding: 6px 30px !important;
			background-color: #ba170b !important;
			border: 0px !important;
			color: #ffffff !important;
			font-size: 20px !important;
			text-transform: uppercase;
			text-decoration: none !important;
		}

		.clas_booking_cls_btn_css
		{
			font-size: 13px !important;
			border: 1px solid transparent !important;
			border-radius: 0 !important;
			outline: 0!important;
			background-color: #fff !important;
			background-image: url("https://www.bifms.net/gymapp/wp-content/plugins/gym-management/assets/images/dashboard_icon/Close.png");
			background-repeat: no-repeat;
			float: right;
			color: #fff !important;
			width: 10% !important;
			height: 30px !important;
		}
		.divi_text_center .fnt_color{
			font-size: 22px !important;
			color: #333333 !important;
			font-weight: 500 !important;
			font-style: normal!important;
			font-family: 'Poppins'!important;
		}
	</style>
	
	<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  -->

	<div class="center hideform" id="guset_booking">
		<div class="col-sm-12 col-md-12" style="float: left;width: 100%;">
			<div class="col-sm-10 col-md-10 divi_text_center" style="float: left;">
				<h4 class="fnt_color">Book Demo Class </h4>
			</div>
			<div class="col-sm-2 col-md-2 clas_booking_cls" style="float: right;">
				<button id="close" class="model_close clas_booking_cls_btn_css" style="padding: 10px;line-height: 10px; margin-top: 10%;"></button>
			</div>
		</div>
		<form action="" method="post" id="guest_book_form">
			<input type="hidden" id="class_name_1_guest" name="class_name_1" value="" />
			<input type="hidden" id="startTime_1_guest" name="startTime_1" value="" />
			<input type="hidden" id="endTime_1_guest" name="endTime_1" value="" />
			<input type="hidden" id="class_id1_guest" name="class_id1" value="" />
			<input type="hidden" id="day_id1_guest" name="day_id1" value="" />
			<input type="hidden" id="bookedclass_membershipid_guest" name="bookedclass_membershipid" value="" />
			<input type="hidden" id="Remaining_Member_limit_1_guest" name="Remaining_Member_limit_1" value="" />
			<input type="hidden" id="class_date1_guest" name="class_date" value="" />
				<br>
				<div class="classs_booking_div_main_class_guest">
					<div class="col-sm-12 col-md-12">
						<label class="ml_10">First name: <span class="require-field">*</span></label>
						
						<div class="align_center divi_display">
							<input type="text" name="firstname" maxlength="20" class="width_80" required>
						</div>
					</div>
		
					<div class="col-sm-12 col-md-12">
						<label class="ml_10">Last name: <span class="require-field">*</span></label>
					
						<div class="align_center divi_display">
							<input type="text" name="lastname" maxlength="20" class="width_80" required>
						</div>
					</div>
			
					<div class="col-sm-12 col-md-12">
						<label class="ml_10"> Email: <span class="require-field">*</span></label>
						
						<div class="align_center divi_display">
							<input type="email" pattern="[a-zA-Z0-9!#$%&'*+\/=?^_`{|}~.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*" name="email" maxlength="100" class="width_80" required>
						</div>
					</div>
				
					<div class="col-sm-12 col-md-12">
						<label class="ml_10">Phone Number: <span class="require-field">*</span></label>
						
						<div class="align_center divi_display">
							<input type="text" name="phonenumber" maxlength="15" class="width_80" maxlength="15"  oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*?)\..*/g, '$1');" required> 
						</div>
					</div>
					<br>
					<div class="col-sm-12 col-md-12 align_center divi_demo_book_btn">	
						<input type="submit" value="Class Booking" name="guset_book_front" class="padding_8 booking_class_btn">
					</div>
			</div>
		</form>
	</div>
{"id":10,"date":"2021-10-08T23:38:56","date_gmt":"2021-10-08T21:38:56","guid":{"rendered":"https:\/\/www.bifms.net\/gymapp\/reservation-de-classe\/"},"modified":"2021-10-10T04:14:09","modified_gmt":"2021-10-10T02:14:09","slug":"class-booking","status":"publish","type":"page","link":"https:\/\/www.bifms.net\/gymapp\/class-booking\/","title":{"rendered":"Class booking"},"content":{"rendered":"\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-10","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.bifms.net\/gymapp\/wp-json\/wp\/v2\/pages\/10","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.bifms.net\/gymapp\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.bifms.net\/gymapp\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.bifms.net\/gymapp\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bifms.net\/gymapp\/wp-json\/wp\/v2\/comments?post=10"}],"version-history":[{"count":2,"href":"https:\/\/www.bifms.net\/gymapp\/wp-json\/wp\/v2\/pages\/10\/revisions"}],"predecessor-version":[{"id":242,"href":"https:\/\/www.bifms.net\/gymapp\/wp-json\/wp\/v2\/pages\/10\/revisions\/242"}],"wp:attachment":[{"href":"https:\/\/www.bifms.net\/gymapp\/wp-json\/wp\/v2\/media?parent=10"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}