<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
		<title>Top Turf Arena</title>
		<!-- Meta Tags -->
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta name="description" content="">
		<meta name="keywords" content="">
		<link rel="shortcut icon" type="image/x-icon" href="assets/img/favicon.png">
		<!-- Bootstrap CSS -->
		<link rel="stylesheet" href="assets/css/bootstrap.min.css">
		<!-- Owl Carousel CSS -->
		<link rel="stylesheet" href="assets/plugins/owl-carousel/owl.carousel.min.css">
		<link rel="stylesheet" href="assets/plugins/owl-carousel/owl.theme.default.min.css">
		<!-- Aos CSS -->
		<link rel="stylesheet" href="assets/plugins/aos/aos.css">
		<!-- Fontawesome CSS -->
		<link rel="stylesheet" href="assets/plugins/fontawesome/css/fontawesome.min.css">
		<link rel="stylesheet" href="assets/plugins/fontawesome/css/all.min.css">
		<!-- Select CSS -->
		<link rel="stylesheet" href="assets/plugins/select2/css/select2.min.css">
		<!-- Fancybox CSS -->
		<link rel="stylesheet" href="assets/css/jquery.fancybox.min.css">
		<!-- Feathericon CSS -->
		<link rel="stylesheet" href="assets/css/feather.css">
		<!-- Main CSS -->
		<link rel="stylesheet" href="assets/css/style.css">
	</head>
	<body>
		<!-- Main Wrapper -->
		<div class="main-wrapper">
			<!-- Header -->
			<header class="header header-trans">
				<div class="container-fluid">
					<nav class="navbar navbar-expand-lg header-nav">
						<div class="navbar-header">
							<a href="index.html" class="navbar-brand logo">
								<img src="assets/img/logo.png" class="img-fluid" alt="Logo">
							</a>
						</div>
						<ul class="nav header-navbar-rht">
							<li class="nav-item">
								<div class="nav-link btn btn-white log-register">
									<a href="#"><span><i class="feather-users"></i></span>Login</a> / <a href="#">Register</a>
								</div>
							</li>
							<li class="nav-item">
								<a class="nav-link btn btn-secondary" href="#"><span><i class="feather-check-circle"></i></span>Book Your Game</a>
							</li>
						</ul>
					</nav>
				</div>
			</header>
			<!-- /Header -->
			<!-- Breadcrumb -->
			<section class="breadcrumb breadcrumb-list mb-0">
				<span class="primary-right-round"></span>
				<div class="container">
					<h1 class="text-white">Booking History</h1>
					<ul>
						<li><a href="index.html">Home</a></li>
						<li>User Bookings</li>
					</ul>
				</div>
			</section>
			<!-- /Breadcrumb -->
			<!-- Dashboard Menu -->
			<div class="dashboard-section">
				<div class="container">
					<div class="row">
						<div class="col-lg-12">
							<div class="dashboard-menu">
								<ul>
									<li>
										<a href="booking-history.html" class="active">
											<img src="assets/img/icons/booking-icon.svg" alt="Icon">
											<span>My Bookings</span>
										</a>
									</li>
									<li>
										<a href="profile.html">
											<img src="assets/img/icons/profile-icon.svg" alt="Icon">
											<span>Profile Setting</span>
										</a>
									</li>
								</ul>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!-- /Dashboard Menu -->
			<!-- Page Content -->
			<div class="content court-bg">
				<div class="container">
					<div class="row">
						<div class="col-sm-12">
							<div class="court-tab-content">
								<div class="card card-tableset">
									<div class="card-body">
										<div class="coache-head-blk">
											<div class="row align-items-center">
												<div class="col-md-5">
													<div class="court-table-head">
														<h4>My Bookings</h4>
														<p>Manage and track all your upcoming court bookings.</p>
													</div>
												</div>
											</div>
										</div>
										<div class="tab-content">
											<div class="tab-pane fade show active" id="nav-Recent" role="tabpanel" aria-labelledby="nav-Recent-tab"
												tabindex="0">
												<div class="table-responsive table-datatble">
													<table class="table  datatable">
														<thead class="thead-light">
															<tr>
																<th>Game Name</th>
																<th>Date & Time  </th>
																<th>Payment</th>
																<th>Status</th>
																<th>action</th>
															</tr>
														</thead>
														<tbody>
															<tr>
																<td>
																	<h2 class="table-avatar">
																	<a href="#" class="avatar avatar-sm flex-shrink-0"><img class="avatar-img" src="assets/img/gallery-02.png" alt="User"></a>
																	<span class="table-head-name flex-grow-1">
																		<a href="#" data-bs-toggle="modal" data-bs-target="#profile-court">Pickleball</a>
																		<span>Court 1 </span>
																	</span>
																	</h2>
																</td>
																<td class="table-date-time">
																	<h4>Mon, Jul 11<span>06:00 PM - 08:00 PM</span></h4>
																</td>
																<td><span class="pay-dark fs-16">₹1200</span></td>
																<td><span class="badge bg-success"><i class="feather-check-square me-1"></i>Accepted</span></td>
																<td class="text-pink view-detail-pink"><a href="javascript:;" data-bs-toggle="modal" data-bs-target="#upcoming-court">Cancel Booking</td>
															</tr>
															<tr>
																<td>
																	<h2 class="table-avatar">
																	<a href="#" class="avatar avatar-sm flex-shrink-0"><img class="avatar-img" src="assets/img/gallery-04.png" alt="User"></a>
																	<span class="table-head-name flex-grow-1">
																		<a href="#" data-bs-toggle="modal" data-bs-target="#profile-court">Cricket</a>
																		<span>Court 3 </span>
																	</span>
																	</h2>
																</td>
																<td class="table-date-time">
																	<h4>Mon, Jul 12<span>02:00 PM - 05:00 PM</span></h4>
																</td>
																<td><span class="pay-dark fs-16">₹900</span></td>
																<td><span class="badge bg-info"><i class="feather-clock me-1"></i>Awaiting</span></td>
																<td class="text-pink view-detail-pink"><a href="javascript:;" data-bs-toggle="modal" data-bs-target="#upcoming-court">Cancel Booking </a></td>
															</tr>
															
														</tbody>
													</table>
												</div>
											</div>
										</div>
										
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!-- /Page Content -->
			<!-- Footer -->
			<footer class="footer">
				<div class="container">
					<!-- Footer Join -->
					<div class="footer-join aos" data-aos="fade-up">
						<h2>We Welcome Your Passion And Expertise</h2>
						<p class="sub-title">Join our empowering sports community today and grow with us.</p>
						<a href="#" class="btn btn-primary"><i class="feather-user-plus"></i> Join With Us</a>
					</div>
					<!-- /Footer Join -->
					
					<!-- Footer Top -->
					<div class="footer-top">
						<div class="row">
							<div class="col-lg-4 col-md-6">
								<!-- Footer Widget -->
								<div class="footer-widget footer-menu">
									<h4 class="footer-title">Contact us</h4>
									<div class="footer-address-blk">
										<div class="footer-call">
											<span>Call Us</span>
											<p>+91-62904-66302</p>
										</div>
										<div class="footer-call">
											<span>Need Live Suppot</span>
											<p><a href="#" class="__cf_email__">info@topturfarena.com</a></p>
										</div>
									</div>
									<div class="social-icon">
										<ul>
											<li>
												<a href="javascript:void(0);" class="facebook" ><i class="fab fa-facebook-f"></i> </a>
											</li>
											<li>
												<a href="javascript:void(0);" class="twitter" ><i class="fab fa-twitter"></i> </a>
											</li>
											<li>
												<a href="javascript:void(0);" class="instagram" ><i class="fab fa-instagram"></i></a>
											</li>
											<li>
												<a href="javascript:void(0);" class="linked-in" ><i class="fab fa-linkedin-in"></i></a>
											</li>
										</ul>
									</div>
								</div>
								<!-- /Footer Widget -->
							</div>
							<div class="col-lg-4 col-md-6">
								<!-- Footer Widget -->
								<div class="footer-widget footer-menu">
									<h4 class="footer-title">Policy</h4>
									<ul>
										<li><a href="#">Terms & Condition</a></li>
										<li><a href="#">Cancellation Policy</a></li>
										<li><a href="#">Refund Policy</a></li>
										<li><a href="#">Privacy Policy</a></li>
									</ul>
								</div>
								<!-- /Footer Widget -->
							</div>
							<div class="col-lg-4 col-md-6">
								<!-- Footer Widget -->
								<div class="footer-widget footer-menu">
									<h4 class="footer-title">Book Your Games</h4>
									<ul>
										<li><a href="#">Pickleball</a></li>
										<li><a href="#">Turf Football</a></li>
										<li><a href="#">Turf Cricket</a></li>
									</ul>
								</div>
								<!-- /Footer Widget -->
							</div>
						</div>
					</div>
					<!-- /Footer Top -->
				</div>
				
				<!-- Footer Bottom -->
				<div class="footer-bottom">
					<div class="container">
						<!-- Copyright -->
						<div class="copyright">
							<div class="row align-items-center">
								<div class="col-md-12" align="center">
									<div class="copyright-text text-center">
										<p class="mb-0">&copy; 2025 Top Turf Arena  - All rights reserved.</p>
									</div>
								</div>
							</div>
						</div>
						<!-- /Copyright -->
					</div>
				</div>
				<!-- /Footer Bottom -->
				
			</footer>
			<!-- /Footer -->
		</div>
		<!-- /Main Wrapper -->
		<!-- scrollToTop start -->
		<div class="progress-wrap active-progress">
			<svg class="progress-circle svg-content" width="100%" height="100%" viewBox="-1 -1 102 102">
			<path d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" style="transition: stroke-dashoffset 10ms linear 0s; stroke-dasharray: 307.919px, 307.919px; stroke-dashoffset: 228.265px;"></path>
		</svg>
	</div>
	<!-- scrollToTop end -->
	<!-- jQuery -->
	<script src="assets/js/jquery-3.7.1.min.js" type="ed01cc82b2a0364b0d3dade5-text/javascript"></script>
	<!-- Bootstrap Core JS -->
	<script src="assets/js/bootstrap.bundle.min.js" type="ed01cc82b2a0364b0d3dade5-text/javascript"></script>
	<!-- Select JS -->
	<script src="assets/plugins/select2/js/select2.min.js" type="ed01cc82b2a0364b0d3dade5-text/javascript"></script>
	<!-- Owl Carousel JS -->
	<script src="assets/plugins/owl-carousel/owl.carousel.min.js" type="ed01cc82b2a0364b0d3dade5-text/javascript"></script>
	<!-- Aos -->
	<script src="assets/plugins/aos/aos.js" type="ed01cc82b2a0364b0d3dade5-text/javascript"></script>
	<!-- Counterup JS -->
	<script src="assets/js/jquery.waypoints.js" type="ed01cc82b2a0364b0d3dade5-text/javascript"></script>
	<script src="assets/js/jquery.counterup.min.js" type="ed01cc82b2a0364b0d3dade5-text/javascript"></script>
	<!-- Top JS -->
	<script src="assets/js/backToTop.js" type="ed01cc82b2a0364b0d3dade5-text/javascript"></script>
	<!-- Masonry JS -->
	<script src="assets/js/isotope-docs.min.js" type="68f6e4a04310ba1ebc264028-text/javascript"></script>
	<!-- Fancybox JS -->
	<script src="assets/js/jquery.fancybox.min.js" type="68f6e4a04310ba1ebc264028-text/javascript"></script>
	<!-- Custom JS -->
	<script src="assets/js/script.js" type="ed01cc82b2a0364b0d3dade5-text/javascript"></script>
	<script src="assets/js/rocket-loader.min.js" data-cf-settings="ed01cc82b2a0364b0d3dade5-|49" defer></script>
</body>
</html>