detail-group.html

{% extends 'base.html' %}
{%block title%} Booking {% endblock %}

{% block js %} 
			<!-- web3 -->
			<script src="https://github.com/ChainSafe/web3.js/blob/v1.2.11/dist/web3.min.js"></script>
			<script src="https://unpkg.com/tailwindcss-jit-cdn"></script>
{% endblock %}

{% block css %}
	<style>
		#pay{
			margin-bottom: 5px;
			width: 100px !important;
		}
	</style>
{% endblock %}

{% block body %}

		<div class="content">
			<div class="ic"></div>
			<div class="container_12">
				<div class="grid_12">
					<h3>Services Overview</h3>
				</div>
				
											
				<!-- Snippet -->
				<section class="flex w-full flex-col justify-center antialiased bg-gray-100 text-gray-600  p-1 mb-8">
					<div class="h-full">
						<!-- Table -->
						<div class="w-full  mx-auto bg-white shadow-lg rounded-sm border border-gray-200">
							<header class="px-5 py-4 border-b border-gray-100">
								<h2 class="font-semibold text-gray-800"> Your Bookings</h2>
							</header>
							<div class="p-3">
								<div class="overflow-x-auto">
									<table class="table-auto w-full">
										<thead class="text-xs font-semibold uppercase text-gray-400 bg-gray-50">
																			
											<tr>
												<th class="p-2 whitespace-nowrap">
													<div class="font-semibold text-left">Destination</div>
												</th>
												<th class="p-2 whitespace-nowrap">
													<div class="font-semibold text-left">Person</div>
												</th>
												<th class="p-2 whitespace-nowrap">
													<div class="font-semibold text-left">Fare</div>
												</th>
												<th class="p-2 whitespace-nowrap">
													<div class="font-semibold text-center">Status</div>
												</th>
											</tr>
										</thead>
										<tbody class="text-sm divide-y divide-gray-100">
											

											

												{%for booking in grp_bookings%}

													<tr>
														<td class="p-2 whitespace-nowrap">
															<div class="flex items-center">
				
																<div class="font-medium text-gray-800">{{booking.destination}}</div>
															</div>
														</td>
														<td class="p-2 whitespace-nowrap">
															
															<div class="text-left" style="color: orange;">{{booking.user.email}}</div>
																											
														
														</td>
														<td class="p-2 whitespace-nowrap">
															{%if booking.status == 1%}
																<div class="text-left font-medium text-green-500">₹{{booking.cost}}</div>
															{%else%}
															<div class="text-left font-medium text-green-500">0</div>

															{%endif%}														
														</td>
														<td class="p-2 whitespace-nowrap">
															{%if booking.status == 1%}
																<div class="text-lg text-center" style="color: green;">Cab Booked</div>
															{%else%}
																<div class="text-lg text-center" style="color: red;">ongoing</div>
															{%endif%}
															
														</td>
													</tr>

												{%endfor%}								
										</tbody>
									</table>
								</div>
								<div>
									
								</div>
							</div>
						</div>
					</div> 
					<button class="btn btn-primary" onclick="redirect()">Chat</button>
				</section>

				<div class="mod-directions">
					<div class="mod-directions-map">
					  <iframe id="mod-directions-map-passive-iframe" width="600" height="450" frameborder="0" src="https://www.google.com/maps/embed/v1/place?q={arrival}&key={{MAPS_APIKEY}}"></iframe>
					  <iframe id="mod-directions-map-active-iframe" width="600" height="450" frameborder="0" style="display: none;" src="https://www.google.com/maps/embed/v1/directions?origin={departure}&destination={arrival}&key={{MAPS_APIKEY}}"></iframe>
					  <button id="mod-directions-form-submit" class="btn btn-primary">Show Route</button>
					</div>
				</div>


				<script>
					
					let redirect = ()=>{
						window.location.href = "{{ url_for('views.chat', pk=pk) }}"
					}

					jQuery(document).ready(function(){
						var departure = {value:"{{ SOURCE }}"};
						var arrival = {value:"{{ DROP }}"};
						var submit = document.getElementById("mod-directions-form-submit");
						var active_frame = document.getElementById("mod-directions-map-active-iframe");
						var passive_frame = document.getElementById("mod-directions-map-passive-iframe");

						changePassiveFrameUrl();
						
						function changeActiveFrameUrl(){
							var departure_value = departure.value;
							var arrival_value = arrival.value;
							var active_frame_url = active_frame.src;
							active_frame_url = active_frame_url.replace("{arrival}", arrival_value)
							.replace("{departure}", departure_value);
							active_frame.src = active_frame_url;
						}
						
						function changePassiveFrameUrl(){
							var arrival_value = arrival.value;
							var passive_frame_url = passive_frame.src;
							passive_frame_url = passive_frame_url.replace("{arrival}", arrival_value);
							passive_frame.src = passive_frame_url;
						}
						
						submit.onclick = function(){
							changeActiveFrameUrl();
							passive_frame.style.display = "none";
							active_frame.style.display = "block";
						}
					});
				</script>
    </div>
</div>
</div>
<script type="text/javascript" src="{{ url_for('static', filename='js/Web3Payments.js') }}"></script>

{% endblock %}