<style>.pjAsTimeAvailable {
    display: flex;
    justify-content: center; 
    align-items: center;
    text-align: center;
}</style>

<div class="container-fluid">
	<div class="row">
		<div class="col-lg-12 text-right">
			<?php // include PJ_VIEWS_PATH . 'pjFrontEnd/elements/locale.php';?>
		</div>
	</div>
	<div class="row">
		<div class="col-lg-12">
			<?php 
			//echo "<pre>"; print_r($tpl); 
					
			// include PJ_VIEWS_PATH . 'pjFrontEnd/elements/filter.php';?>
		</div>
	</div>
	<div class="row">
		<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
			<div class="panel panel-default pjAsContainer pjAsAside">
				<div class="panel-heading pjAsHead">
					<h2 class="pjAsHeadTitle"><?php __('front_select_date'); ?></h2><!-- /.pjAsHeadTitle -->
				</div><!-- /.panel-heading pjAsHead -->

				<div class="panel-body pjAsCalendarInline">
					<?php include PJ_VIEWS_PATH . 'pjFrontEnd/elements/calendar.php'; ?>
				</div><!-- /.panel-body pjAsCalendarInline -->

				<ul class="list-group pjAsAsideServices">
					<?php
					$cart = $controller->cart->getAll();
					$cart_arr = $tpl['cart_arr'];
					include PJ_VIEWS_PATH . 'pjFrontPublic/elements/cart_layout2.php';
					?>
				</ul>
				<!-- /.list-group pjAsAsideServices -->
			</div><!-- /.panel panel-default pjAsContainer pjAsAside -->
		</div><!-- /.col-lg-4 col-md-4 col-sm-4 col-xs-12 -->

		<div id="pjAsServicesWrapper" class="col-lg-8 col-md-8 col-sm-8 col-xs-12">
			<div class="panel panel-default pjAsContainer pjAsAside">
				<?php 
				include PJ_VIEWS_PATH . 'pjFrontPublic/elements/header.php';
				$selected_date = $controller->_get->toString('date');

				$totalprice = $tpl['option_arr']['o_price_per_people']*2;
			
				?>
			<input type="hidden" id="price_per_peopel" name="price_per_peopel" value="<?php echo isset($tpl['option_arr']['o_price_per_people']) ? $tpl['option_arr']['o_price_per_people'] : "xx"; ?>" />
	
			
			<ul class="list-group pjAsListElements pjAsServices">
				<li class="list-group-item pjAsListElement pjAsService">
					<div class="row pjAsNavCalendarDate">
						<div class="col-xs-6">
							<?php if ($selected_date > $tpl['first_working_date']) { ?>
								<a href="javascript:void(0);" class="pjAsCalendarDate" data-iso="<?php echo date('Y-m-d', strtotime($selected_date.' -1 day'));?>"><i class="glyphicon glyphicon-chevron-left"></i> <?php __('front_previous');?></a>
							<?php } ?>&nbsp;
						</div>
						<div class="col-xs-6 text-right">
							<a href="javascript:void(0);" class="pjAsCalendarDate" data-iso="<?php echo date('Y-m-d', strtotime($selected_date.' +1 day'));?>"><?php __('front_next');?> <i class="glyphicon glyphicon-chevron-right"></i></a>
						</div>
					</div>
					<div class="form-horizontal asEmployeeInfo">
						<?php
						//  echo "<pre>";
						 // print_r($tpl['available_slote_arr']); echo "</pre>";
						if(!isset($tpl['unavailable']))
						{
							?>
							<?php if ($tpl['available_slote_arr']) { ?>
								<form class="pjAsAddToCartForm" action="" method="post">
									<div class="form-group">
										<div class="col-sx-12">
											<ul class="list-group pjAsSelectedDateWrapper">
												<li class="list-group-item">
													<div class="form-group row align-items-center">
														<label class="col-lg-6 col-md-6 col-sm-6 col-12" style="color:#45494a;">
															Please select the number of people: </label>
														<div class="col-lg-2 col-md-2 col-sm-2 col-2">
															<input class="form-control text-center touchspin3 number_of_people" name="number_of_people" id="number_of_people" type="number" value="2" max="6" min="2">
														</div>
														<div class="col-lg-4 col-md-4 col-sm-4 col-8">
															<span class="font-weight-bold">Total Price: <span class="text-primary" id="totla_price"><?php echo isset($totalprice) ? $totalprice : "xx"; ?> CHF</span></span>
														</div>
													</div>
												</li>
											</ul>
											<div class="pjAsTableTimes">
											<div class="row">
												<!-- Left Column: First 3 Slots -->
												<div class="col-lg-6 col-md-6 col-sm-6 col-sx-12">
													<?php 
													$count = 0; // Counter to track slot position
													foreach ($tpl['available_slote_arr'] as $slot) { 
														if ($count < 3) { // Only process first 3 slots
															//print_r($slot);
															$formatted_time = $slot['slot']; // Get the slot time directly
															$class = ($slot['status'] == 'booked') ? 'pjAsTimeBooked' : ''; // Add class based on status
															?>
															<span class="pjAsTimeAvailable <?php echo $class; ?>">
																<a href="javascript:void(0);" class="pjAsSlotAvailable number_of_people"
																slot_id="<?php echo $count; ?>"
																data-times="<?php echo htmlspecialchars($formatted_time, ENT_QUOTES, 'UTF-8'); ?>"><?php echo $formatted_time; ?></a>
															</span>
															<?php 
																} 
																$count++; 
															} ?>
													</div>


												<!-- Right Column: Last 2 Slots with Custom Text -->
												<div class="col-lg-6">
													<?php 
													if (isset($tpl['available_slote_arr'][3])) {
														//print_r($tpl['available_slote_arr'][3]['status']);
														$class = ($tpl['available_slote_arr'][3]['status'] == 'booked') ? 'pjAsTimeBooked' : ''; // Add class based on status
														list($start_ts, $end_ts) = ''; //explode('|', $tpl['available_slote_arr'][3]);
														 //echo "hoo";//	print_r($start_ts); 
														$start_time = !empty($start_ts) ? date('H:i', $start_ts) : null;
														$end_time = !empty($end_ts) ? date('H:i', $end_ts) : null;

														$formatted_time = $tpl['available_slote_arr'][3]['slot'];// "$start_time – $end_time";
													?> 
														<span class="pjAsTimeAvailable <?php echo $class; ?>">
															<a href="javascript:void(0);" class="pjAsSlotAvailable number_of_people" 
															slot_id="4" 
															data-times="<?php echo $formatted_time; ?>">Morning and Afternoon<br>(<?php echo $formatted_time;?>)</a>
														</span>
													<?php } ?>
													<input type="hidden" id="selected_slot" name="slot_id" value="">
													<?php 
													if (isset($tpl['available_slote_arr'][4])) {
														list($start_ts, $end_ts) = //explode('|', $tpl['available_slote_arr'][4]);
														$start_time = date('H:i', $start_ts);
														$end_time = date('H:i', $end_ts);
														$class = ($tpl['available_slote_arr'][4]['status'] == 'booked') ? 'pjAsTimeBooked' : ''; // Add class based on status

														$formatted_time =$tpl['available_slote_arr'][4]['slot']; //"$start_time – $end_time";
													?>
														<span class="pjAsTimeAvailable <?php echo $class; ?>">
															<a href="javascript:void(0);" class="pjAsSlotAvailable number_of_people" 
															slot_id= "5" 
															data-times="<?php echo $formatted_time; ?>">Afternoon and Evening<br>(<?php echo $formatted_time; ?>)</a>
														</span>
													<?php } ?>
												</div>
											</div>
											
											</div><!-- /.pjAsTableTimes -->
										</div><!-- /.col-lg-8 col-md-8 col-sm-8 col-sx-12 -->
									</div><!-- /.form-group -->		
									
									<div class="form-group">
										<div class="col-sx-12">
											<div class="pjAsTableTimes">
												<div class="row">
													<!-- Left Column: First 3 Slots -->
													<div class="col-lg-6 col-md-6 col-sm-6 col-sx-12">
														<p>Evening: prolongation</p>
														<?php 
														foreach ($tpl['extraHours'] as $exhours) { 
															// echo "<pre>";
															// print_r($exhours);
														?>
															<div>
																<label>
																	<input type="checkbox" class="extra_hours_checkbox" name="extra_hours[]" data-name="<?php echo $exhours['hours']; ?>" data-price="<?php echo $exhours['price']; ?>" value="<?php echo $exhours['price']; ?>"> 
																	+<?php echo $exhours['until_time']; ?>h <?php echo $exhours['hours']; ?> (+<?php echo $exhours['price']; ?> CHF)
																</label>
															</div>
															
														<?php 
														} 
														?>
													</div>
												</div>
											</div><!-- /.pjAsTableTimes -->
										</div><!-- /.col-lg-8 col-md-8 col-sm-8 col-sx-12 -->
									</div><!-- /.form-group -->		

									
									<div class="form-group">
										<div class="col-lg-9 col-lg-offset-3 col-md-9 col-md-offset-3 col-sm-9 col-sm-offset-3 col-sx-12">
											<input class="btn btn-default pjAsBtn pjAsBtnPrimary pjAsBtnAppointment" value="<?php __('front_btn_book_slot', false, true); ?>" disabled="disabled" type="submit">
											<a href="#" class="btn btn-default pjAsBtn pjAsBtnSecondary pjAsBtnBackToServices"><?php __('btnCancel'); ?></a>
										</div><!-- /.col-lg-8 col-lg-offset-4 col-md-8 col-md-offset-4 col-sm-8 col-sm-offset-4 col-sx-12 -->
									</div><!-- /.form-group -->
									
									<input type="hidden" name="date" value="<?php echo date($tpl['option_arr']['o_date_format'], strtotime($controller->_get->toString('date')));?>" />
									<input type="hidden" name="times" value="" />
									
								</form>
							<?php } else { ?>
								<div class="text-danger"><?php __('front_no_timeslots_available');?></div>
							<?php } ?>
						</div><!-- /.form-horizontal asEmployeeInfo -->
						<?php
					} else { ?>
						<div class="text-danger"><?php echo sprintf(__('front_accept_booking_days_ahead_msg', true), (int)$tpl['option_arr']['o_booking_days_earlier']);?></div>
					<?php } ?>
				</li>
			</ul>						
			</div><!-- /.panel panel-default pjAsContainer -->
		</div><!-- /.col-lg-8 col-md-8 col-sm-8 col-xs-12 -->
	</div><!-- /.row -->
</div><!-- /.container-fluid -->

<!-- <script src="http://localhost/varunsir/fabian/reservationssystem/third-party/touchspin/3.0.1/jquery.bootstrap-touchspin.min.js"></script>
<script>


if($(".touchspin3").length > 0)
		{
			$(".touchspin3").TouchSpin({
				min: 0,
				max: 1000000000,
				step: 1,
				verticalbuttons: true,
	            buttondown_class: 'btn btn-white',
	            buttonup_class: 'btn btn-white'
	        });
		}


function changeValue(step) {
    let input = document.getElementById('peopleInput');
    let value = parseInt(input.value) || 1; // Convert to number (default to 1 if empty)
    let min = 1, max = 10; // Define min & max values
    
    value = Math.min(max, Math.max(min, value + step)); // Ensure within min/max
    input.value = value; // Set updated value
}


</script> -->

<script>
document.querySelector('form').addEventListener('submit', function() {
    document.querySelectorAll('.extra_hours_checkbox:checked').forEach(function(checkbox) {
        let hiddenInput = document.createElement('input');
        hiddenInput.type = 'hidden';
        hiddenInput.name = 'extra_hours_name[]';
        hiddenInput.value = checkbox.getAttribute('data-name');
        checkbox.closest('form').appendChild(hiddenInput);
    });
});
</script>