<?php
include "language.php";
global $lg;

$title = "SMLIVE";
include "header.php";

/**
 * custom data note
 * @param race_event: Race Event listing id
 *
 * @param btn-race-event-date: For Race Event date dropdown,
 * 			data-race-event-date (dropdown onclick event child class: search-race-event-date)
 *
 * @param btn-race-event-region: For Race Event country dropdown,
 * 			data-region-code (dropdown onclick event child class: search-race-event-region)
 * 			data-region-name (display purpose, show full country name)
 *
 * @param btn-race-event-status: For Race Event status dropdown,
 * 			data-race-status (dropdown onclick event child class: search-race-event-status)
 *
 * @param btn-racecard-region: For Race Card country dropdown,
 * 			data-region-code (dropdown onclick event child class: search-racecard-region)
 *
 * @param btn-racecard-date: For Race Card date dropdown,
 * 			data-race-date (dropdown onclick event child class: search-racecard-date)
 */

?>


<body data-plugin-page-transition>
	<div class="body" style="position: relative;">
		<?php include "loader.php"; ?>

		<div role="main" class="main">
			<div class="swiper mySwiper">
				<div class="swiper-wrapper">
					<div class="swiper-slide">
						<div><a href="https://smvegas888.com" target="_blank"><img id="home_hero_banner" src="<?php echo $lg['hero_banner'];?>" style="width: 100%"></a></div>
					</div>
					<div class="swiper-slide">
						<div><a href="https://smvegas888.com" target="_blank"><img id="home_hero_banner" src="<?php echo $lg['hero_banner2'];?>" style="width: 100%"></a></div>
					</div>
				</div>
				<!--<div class="swiper-pagination"></div>-->
			</div>

			<div class="container py-4">
				<div class="row pt-4 mt-5">
					<div class="col-lg-3">
						<h3><?php echo $lg['racing_events'];?></h3>
					</div>
					<div class="col-lg-9">
						<div class="row justify-content-end">
							<div class="col-6 col-lg-3 mb-3">
								<div role="group">
									<button id="btnGroupDrop1" type="button" class="btn btn-search-horse btn-race-event-region" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-region-code=""><?php echo $lg['hong_kong'];?><i class="fas fa-caret-down"></i></button>

									<div class="dropdown-menu country_list_event" aria-labelledby="btnGroupDrop1">
									</div>
								</div>
							</div>
							<div class="col-6 col-lg-3 mb-3">
								<div role="group">
									<button id="btnGroupDrop1" type="button"
										class="btn btn-search-horse btn-race-event-status" data-bs-toggle="dropdown"
										aria-haspopup="true" aria-expanded="false"><?php echo $lg['status'];?><i
											class="fas fa-caret-down"></i></button>
									<div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
										<a class="dropdown-item search-race-event-status" data-race-status="all"><?php echo $lg['all'];?></a>
										<a class="dropdown-item search-race-event-status" data-race-status="upcoming"><?php echo $lg['upcoming'];?></a>
										<a class="dropdown-item search-race-event-status" data-race-status="inprogress"><?php echo $lg['in_progress'];?></a>
										<a class="dropdown-item search-race-event-status" data-race-status="completed"><?php echo $lg['completed'];?></a>
									</div>
								</div>
							</div>
							<div class="col-12 col-lg-3 mb-3">
								<div role="group">
									<button id="btnGroupDrop1" type="button"
										class="btn btn-search-horse btn-race-event-date" data-bs-toggle="dropdown"
										aria-haspopup="true" aria-expanded="false"><?php echo $lg['date'];?><i
											class="fas fa-caret-down"></i></button>
									<div class="dropdown-menu dropdown-race-event-date" aria-labelledby="btnGroupDrop1">
									</div>
								</div>
							</div>
							<!-- <div class="col-12 col-lg-3">
								<div><a onclick="getRaceEvent()" class="btn btn-search">Search</a></div>
							</div> -->

						</div>

					</div>

					<div class="col-lg-12">
						<div class="row mt-3">
							<div class="col-lg-12">
								<div class="event-block">
									<div><img id="race-event-img-region"></div>
									<div>
										<p class="eb-cty race-event-title-region"></p>
									</div>
								</div>
							</div>
						</div>

						<div class="row mt-3" id="race_event">
						</div>

						<div class="row" id="list_msg_event" style="display:none;">
							<div class="col-lg-12">
								<div class="alert alert-secondary">
									<i class="fa-solid fa-triangle-exclamation"></i>
									<?php echo $lg['no_results'];?>
								</div>
							</div>
						</div>
					</div>
				</div>


				<div class="row pt-4 mt-5">
					<div class="col-lg-12">
						<h3><?php echo $lg['hot_news'];?></h3>
					</div>
					<div class="col-lg-12 mt-3">
						<!-- <div class="owl-carousel owl-theme stage-margin rounded-nav" data-plugin-options="{'responsive': {'0': {'items': 1}, '476': {'items': 1}, '768': {'items': 2}, '992': {'items': 3}, '1200': {'items': 4}}, 'autoplay': false, 'autoplayTimeout': 3000,'margin': 20, 'loop': false, 'nav': true, 'dots': false, 'stagePadding': 0}"></div> -->
						<div class="swiper newsSwiper">
							<div class="swiper-wrapper newsSwiperList">
							</div>
							<div class="swiper-pagination"></div>
						</div>

					</div>
				</div>
			</div>

		</div>

		<!-- <div id="example-container"></div> -->

	</div>

</body>

<?php
include "footer.php";
include "race-card-js.php";
?>


<script>
	$(".ajaxLoader").show();
	$(document).ready(function() {
		init();
	});

	 function init() {
		raceCardInit();
		getCountryList();
		getRaceCardDate();
		getRaceEventDate();
		// getRaceCard(true);
		// getRaceEvent(true);
		getNewsList();
	}

	function getNewsList() {

		return $.ajax({
			url: "/api.php",
			type: 'POST',
			data: {
				'apiname': 'news/get-news',
			},
			dataType: 'json',
			success: function(response) {
				console.log(response);
				if (typeof response.data.item !== 'undefined') {
					let d = response.data.item;
					for (let i = 0; i < d.length; i++) {
						if (i > 20) {
							break;
						}
						$('.newsSwiperList').append(`
							<div class="swiper-slide">
								<div class="news-box">
									<a href="news-inner?news_id=${d[i].id}"><img class="img-fluid" src="${d[i].img}" alt=""></a>
									<span class="news-tag">News</span>
									<div class="news-entry">
										<a href="news-inner?news_id=${d[i].id}"><p style="display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical;">${d[i].title}</p></a>
											<p>${d[i].created_at}</p>
									</div>
								</div>
							</div>
						`);
					}
					new Swiper(".newsSwiper", {
						slidesPerView: 1,
						spaceBetween: 20,
						pagination: {
							el: ".swiper-pagination",
							clickable: true,
						},
						breakpoints: {
							640: {
								slidesPerView: 1,
								spaceBetween: 20,
							},
							768: {
								slidesPerView: 3,
								spaceBetween: 30,
							},
							1024: {
								slidesPerView: 4,
								spaceBetween: 30,
							},
						},
					});
				}
			},
			error: function(err) {
				console.log(err);
				// alert("Something went wrong, please try again later.");
			}
		});
	}
</script>


<!-- <script src="https://challenges.cloudflare.com/turnstile/v0/api.js?onload=onloadTurnstileCallback" defer></script> -->
<!-- <script src="https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit"></script> -->


<script>
// 	turnstile.ready(function () {
//     turnstile.render('#example-container', {
//         sitekey: '2x00000000000000000000AB',
//         callback: function(token) {
//             console.log(`Challenge Success ${token}`);
//         },
//     });
// });


// window.onloadTurnstileCallback = function () {
//     turnstile.render('#example-container', {
//         sitekey: '0x4AAAAAAAbF5AaWzBWfnc1S',
//         callback: function(token) {
//             console.log(`Challenge Success ${token}`);
//         },
//     });
// };
</script>