<script type="text/javascript" src="https://dawellgym.24hr-fitness.eu/wp-content/plugins/gym-management/assets/js/jquery_3.6.0.js">
</script>
<script type="text/javascript" src="https://dawellgym.24hr-fitness.eu/wp-content/plugins/gym-management/assets/js/jquery-ui-1.12.1.min.js">
</script>
<link rel="stylesheet"	href="https://dawellgym.24hr-fitness.eu/wp-content/plugins/gym-management/assets/css/jquery-ui.css" >
<link rel="stylesheet"	href="https://dawellgym.24hr-fitness.eu/wp-content/plugins/gym-management/assets/css/custom.css">
<link rel="stylesheet"	href="https://dawellgym.24hr-fitness.eu/wp-content/plugins/gym-management/assets/css/frontend_calender.css">
<link rel="stylesheet"	href="https://dawellgym.24hr-fitness.eu/wp-content/plugins/gym-management/assets/css/fullcalendar.css">
<link rel="stylesheet"	href="https://dawellgym.24hr-fitness.eu/wp-content/plugins/gym-management/assets/css/gymmgt_min.css">
<script type="text/javascript"	src="https://dawellgym.24hr-fitness.eu/wp-content/plugins/gym-management/assets/js/moment_min.js"></script>
<script type="text/javascript"	src="https://dawellgym.24hr-fitness.eu/wp-content/plugins/gym-management/assets/js/fullcalendar_min.js"></script>
<script type="text/javascript"	src="https://dawellgym.24hr-fitness.eu/wp-content/plugins/gym-management/assets/js/popper.min.js"></script>
<!-------------------- METERIAL DESIGN AND JS ------------------>
<link rel="stylesheet"	href="https://dawellgym.24hr-fitness.eu/wp-content/plugins/gym-management/assets/css/material/bootstrap-inputs.css">
<script type="text/javascript"	src="https://dawellgym.24hr-fitness.eu/wp-content/plugins/gym-management/assets/js/material/material.min.js"></script>
<!-------------------- METERIAL DESIGN AND JS END ------------------>

<script type="text/javascript"	src="https://dawellgym.24hr-fitness.eu/wp-content/plugins/gym-management/assets/js/calendar-lang/en.js"></script>
<link rel="stylesheet"	href="https://dawellgym.24hr-fitness.eu/wp-content/plugins/gym-management/assets/css/bootstrap-multiselect.css">	
<link rel="stylesheet"	href="https://dawellgym.24hr-fitness.eu/wp-content/plugins/gym-management/assets/css/bootstrap_min.css">	
<script type="text/javascript"	src="https://dawellgym.24hr-fitness.eu/wp-content/plugins/gym-management/assets/js/bootstrap-multiselect.js"></script>
<script type="text/javascript"	src="https://dawellgym.24hr-fitness.eu/wp-content/plugins/gym-management/assets/js/bootstrap_min.js"></script>

<link rel="stylesheet"	href="https://dawellgym.24hr-fitness.eu/wp-content/plugins/gym-management/assets/css/new_style.css">
<link rel="stylesheet"	href="https://dawellgym.24hr-fitness.eu/wp-content/plugins/gym-management/assets/css/responsive_new_design.css">
<link rel="stylesheet"	href="https://dawellgym.24hr-fitness.eu/wp-content/plugins/gym-management/assets/css/material/bootstrap-inputs.css">
<link rel="stylesheet"	href="https://dawellgym.24hr-fitness.eu/wp-content/plugins/gym-management/assets/css/popping_font.css">
<script type="text/javascript"	src="https://dawellgym.24hr-fitness.eu/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 eventsData = [];
				console.log('PHP Debug: No class data found');
				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: eventsData,
				forceEventDuration : true,
				//start add class in pop up//
				eventClick: function(info) 
				{
					try {
						"use strict";
						var event = info.event; // Get the event object from info
						
						if (!event) {
							console.error('Event object is undefined');
							return;
						}
												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._def.title);
						jQuery("#eventContent #startTime").html(moment(event.start).format(dateformate));
						jQuery("#eventContent #endTime").html(moment(event.end).format(dateformate)); 
						jQuery("#eventContent #staff_member_name ").html(event._def.extendedProps.trainer);
						jQuery("#eventContent #membership_name ").html(event._def.extendedProps.membership_name);
						jQuery("#adImage").attr('src', event._def.extendedProps.image_path);

						if (event._def.extendedProps.page == '') {
							jQuery('#open_adImage').css('display', 'none');
							jQuery("#open_adImage").attr('href', event._def.extendedProps.image_path);
						} else {
						//  jQuery('#adImage').css('cursor', 'pointer');
							jQuery("#open_adImage").attr('href', event._def.extendedProps.page);
						}
						jQuery("#eventContent #Member_limit ").html(event._def.extendedProps.Member_limit);
						jQuery("#eventContent #btn_submit ").html(event._def.extendedProps.btn_submit);
						jQuery("#eventContent #Remaining_Member_limit ").html(event._def.extendedProps.remaning_memmber);
						jQuery("#eventContent #class_date_id ").html(event._def.extendedProps.class_date);
						jQuery("#class_name_1").val(event._def.title);
						jQuery("#class_name_2").val(event._def.title);
						jQuery("#class_name_1_guest").val(event._def.title);
						jQuery("#startTime_1").val(moment(event.start).format(dateformate));
						jQuery("#startTime_2").val(moment(event.start).format(dateformate));
						jQuery("#startTime_1_guest").val(moment(event.start).format(dateformate));
						jQuery("#endTime_1").val(moment(event.end).format(dateformate));
						jQuery("#endTime_2").val(moment(event.end).format(dateformate));
						jQuery("#endTime_1_guest").val(moment(event.end).format(dateformate));
						jQuery("#staff_member_name_1").val(event._def.extendedProps.trainer);
						jQuery("#staff_member_name_1_guest").val(event._def.extendedProps.trainer);
						jQuery("#Member_limit_1").val(event._def.extendedProps.Member_limit);
						jQuery("#Member_limit_1_guest").val(event._def.extendedProps.Member_limit);
						jQuery("#Remaining_Member_limit_1").val(event._def.extendedProps.remaning_memmber);
						jQuery("#Remaining_Member_limit_2").val(event._def.extendedProps.remaning_memmber);
						jQuery("#Remaining_Member_limit_1_guest").val(event._def.extendedProps.remaning_memmber);
						jQuery("#class_id1").val(event._def.extendedProps.class_id);
						jQuery("#class_id2").val(event._def.extendedProps.class_id);
						jQuery("#class_id1_guest").val(event._def.extendedProps.class_id);
						jQuery("#day_id1").val(event._def.extendedProps.day);
						jQuery("#day_id2").val(event._def.extendedProps.day);
						jQuery("#day_id1_guest").val(event._def.extendedProps.day);
						jQuery("#bookedclass_membershipid").val(event._def.extendedProps.membership_id);
						jQuery("#bookedclass_membershipid2").val(event._def.extendedProps.membership_id);
						jQuery("#bookedclass_membershipid_guest").val(event._def.extendedProps.membership_id);
						jQuery("#class_date1").val(event._def.extendedProps.class_date);
						jQuery("#class_date2").val(event._def.extendedProps.class_date);
						jQuery("#class_date1_guest").val(event._def.extendedProps.class_date);
						jQuery("#btn_submit").val(event._def.extendedProps.btn_submit);
						jQuery("#d_id").html();
						
						var remaning_memmber_0 = 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._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._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._def.extendedProps.url);

							var isLoggedIn = "";
							if (isLoggedIn == '1') {
								if (Array.isArray(eventsData) && Array(eventsData).length > 0)
								{
									$("#eventContent").dialog({ modal: true, title: 'Class Book',width:500, height: 500 });
									$( "#eventContent" ).removeClass( "display_none" );
									$(".ui-dialog-titlebar-close").text('x');
									$(".ui-dialog-titlebar-close").css('height',30);
								}
							} else {
								var modal = document.getElementById('myModal');
								var myModal = new bootstrap.Modal(modal);
								myModal.show();
							}
						}
					} catch(error) {
						console.error('Error in eventClick:', error);
					}

				},
				eventDidMount: function (info) {
						var today = new Date();
						var class_dates= info.event.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 (class_dates < new_today)
						{
							info.el.style.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 price = $(this).attr("ids");
        var currencySymbol = $(this).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 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://dawellgym.24hr-fitness.eu/en/member-registration-or-login"+action;

        var isLoggedIn = "";

        isLoggedIn = "1"

        var guest_id = $('#guest_id').val();

        if (isLoggedIn == '1') {
            if (parseInt(Remaining_Member_limit_1) > 0)
            {
                var curr_data = {
                    action: 'MJ_gmgt_create_book',
                    _id: 'create',
                    class_id: class_id,
                    start_time: startTime_1,
                    class_date: class_date,
                    day_id: day_id1,
                    member_limit: Remaining_Member_limit_1,
                    payment: 'paypal',
                    price: price,
                    currency: currencySymbol
                };

                if (guest_id == '')
                {
                    $ = jQuery.noConflict();
                    $.post("https://dawellgym.24hr-fitness.eu/wp-admin/admin-ajax.php", curr_data, function(response) {

                        var res_v = jQuery.parseJSON(response)

                        var currentURL = window.location.href;

                        var url = new URL(currentURL);

                        // Access different components of the URL
                        var protocol = url.protocol; // "https:"
                        var hostname = url.hostname; // "www.example.com"
                        var pathname = url.pathname; // "/path"

                        var newURL = protocol + "//" + hostname + '/' + pathname + '?message=' + res_v.status_code

                        if ( res_v.status_code === 2)
                        {
                            curr_data['book_id'] = res_v.book_id
                            curr_data['guest_id'] = ''
                            redirectWithPostData(protocol + "//" + hostname + '/' + pathname, curr_data)
                        }
                        else {
                            window.location.replace(newURL);
                        }
                    });
                } else {
                    var currentURL = window.location.href;

                    var url = new URL(currentURL);

                    // Access different components of the URL
                    var protocol = url.protocol; // "https:"
                    var hostname = url.hostname; // "www.example.com"
                    var pathname = url.pathname; // "/path"

                    curr_data['guest_id'] = guest_id
                    curr_data['book_id'] = ''
                    redirectWithPostData(protocol + "//" + hostname + '/' + pathname, curr_data)
                }
            }
            else {
                alert("Already full");
            }
        } else {
            var modal = document.getElementById('myModal');
            var myModal = new bootstrap.Modal(modal);
            myModal.show();
        }

    });

    // Attach an event listener to the form submission
    $('#myModal form').submit(function(event) {
        event.preventDefault(); // Prevent the default form submission behavior
        
        // Disable the submit button and show loading state
        var submitBtn = $(this).find('button[type="submit"]');
        var originalText = submitBtn.text();
        submitBtn.prop('disabled', true);
        submitBtn.text('Please wait...');
        
        // Serialize the form data
        var formData = $(this).serializeArray();

        var curr_data = {
            action: 'MJ_gmgt_create_guest_for_book',
            firstname: formData[0]['value'],
            lastname: formData[1]['value'],
            email: formData[2]['value'],
            phonenumber: formData[3]['value'],
        };

        $ = jQuery.noConflict();
        $.post("https://dawellgym.24hr-fitness.eu/wp-admin/admin-ajax.php", curr_data, function(response) {
            // Re-enable the submit button
            submitBtn.prop('disabled', false);
            submitBtn.text(originalText);
            
            $('#myModal').modal('hide');
			$('#guest_id').val(response);
			$('#guest_id_guest').val(response);
        }).fail(function() {
            // Re-enable button on error too
            submitBtn.prop('disabled', false);
            submitBtn.text(originalText);
            alert('Error occurred. Please try again.');
        });
    });

});
function redirectWithPostData(url, postData) {
    // Create a dynamic form element
    var form = document.createElement('form');
    form.method = 'post';
    form.action = url;

    // Populate the form with hidden input fields
    for (var key in postData) {
        if (postData.hasOwnProperty(key)) {
            var input = document.createElement('input');
            input.type = 'hidden';
            input.name = key;
            input.value = postData[key];
            form.appendChild(input);
        }
    }

    // Append the form to the document body and submit it
    document.body.appendChild(form);
    form.submit();
}

</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://dawellgym.24hr-fitness.eu/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>
<style>
    .my_modal {
        display: none;
        position: fixed;
        z-index: 1;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        background-color: rgb(0,0,0);
        background-color: rgba(0,0,0,0.4);
    }

    .my_modal-content {
        background-color: #fefefe;
        margin: 15% auto;
        padding: 20px;
        border: 1px solid #888;
        width: 80%;
    }

    .close {
        color: #aaa;
        float: right;
        font-size: 28px;
        font-weight: bold;
    }

    .close:hover,
    .close:focus {
        color: black;
        text-decoration: none;
        cursor: pointer;
    }
</style>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        var closeButton = document.getElementsByClassName("btn-close")[0];
        if (closeButton) {
            closeButton.addEventListener("click", function() {
                document.getElementById("myModal").style.display = "none";
            });
        }
    });
</script>
<div class="modal fade" id="myModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Please enter your reservation information.</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form action="/index.php" method="POST">
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="firstName" class="form-label">First name:</label>
                        <input type="text" class="form-control" name="firstName" id="firstName" required>
                    </div>
                    <div class="mb-3">
                        <label for="lastName" class="form-label">Last name:</label>
                        <input type="text" class="form-control" name="lastName" id="lastName" required>
                    </div>
                    <div class="mb-3">
                        <label for="email" class="form-label">Email:</label>
                        <input type="email" class="form-control" name="email" id="email" required>
                    </div>
                    <div class="mb-3">
                        <label for="phone" class="form-label">Phone:</label>
                        <input type="text" class="form-control" name="phone" id="phone" required>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" style="margin-right: 15px;margin-top: 10px">Close</button>
                    <button type="submit" class="btn btn-primary" style="margin-top: 10px">Submit</button>
                </div>
            </form>
        </div>
    </div>
</div>
<div class="class_booking_custom_div">
			<style>
			.theme_padding_top_20px
			{
				padding-top: 20px;
			}
		</style>
			<form method="post" class="filter_cal" style="display: none">
		<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=1 >Golden Membership</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=1460 >Staff Member</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" style="height: auto !important;">
			<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://dawellgym.24hr-fitness.eu/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: 13px;
			}
            #buy_membership_class:hover{background-color:steelblue !important;}

            @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;*/
				}
			}

			.margin_top_10px
			{
				margin-top: 10px !important;
			}
		</style>

        <form name="booking_buy_form" id="booking_buy_form" method="post" action="/index.php">

            <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="guest_id" name="guest_id" 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>
                    <div class="row">
                        <div class="col-md-12">
<!--                            <img src="#" id="adImage" alt="" style="height: 80px;text-align: center;margin: auto;border-radius: 50%"><-->
                            <a href="#" target="_blank" id="open_adImage" style="color: #0a58ca">View Page</a>
                        </div>
                        <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" style="margin-top: 20px">
                    <span id="btn_submit" class="save_btn divi_display">Buy By Paypal</span></div>
                </div>
            </div>

        </form>
	</div><!--MODAL BODY DIV END-->

	<div class="cal_width col-md-12 float_initial calender_classbooking_div" style="margin: auto">
		<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://dawellgym.24hr-fitness.eu/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="guest_id_guest" name="guest_id_guest" 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":184,"date":"2025-11-10T10:27:28","date_gmt":"2025-11-10T09:27:28","guid":{"rendered":"https:\/\/dawellgym.24hr-fitness.eu\/?page_id=184"},"modified":"2025-11-10T10:27:28","modified_gmt":"2025-11-10T09:27:28","slug":"class-booking","status":"publish","type":"page","link":"https:\/\/dawellgym.24hr-fitness.eu\/en\/class-booking\/","title":{"rendered":"Class Booking"},"content":{"rendered":"","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"_links":{"self":[{"href":"https:\/\/dawellgym.24hr-fitness.eu\/en\/wp-json\/wp\/v2\/pages\/184"}],"collection":[{"href":"https:\/\/dawellgym.24hr-fitness.eu\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/dawellgym.24hr-fitness.eu\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/dawellgym.24hr-fitness.eu\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/dawellgym.24hr-fitness.eu\/en\/wp-json\/wp\/v2\/comments?post=184"}],"version-history":[{"count":1,"href":"https:\/\/dawellgym.24hr-fitness.eu\/en\/wp-json\/wp\/v2\/pages\/184\/revisions"}],"predecessor-version":[{"id":185,"href":"https:\/\/dawellgym.24hr-fitness.eu\/en\/wp-json\/wp\/v2\/pages\/184\/revisions\/185"}],"wp:attachment":[{"href":"https:\/\/dawellgym.24hr-fitness.eu\/en\/wp-json\/wp\/v2\/media?parent=184"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}