<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<style>
.card-body {
    min-height: 140px;
	height:140px !important;
    min-width: 260px;
	width:260px !important;
    margin-right: 5px;
    margin-left: 5px;
	border-radius:10px;
	text-align:center;
}
.background-tint {
  background-color: rgba(0,0,0,.7);
  background-blend-mode: multiply;
}
body{
	color:white;
	text-decoration: none;
}
a{
	color:white;
	text-decoration: none;
}
a:hover {
  color:white;
  text-decoration: none;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js" integrity="sha512-pumBsjNRGGqkPzKHndZMaAG+bir374sORyzM3uulLV14lN5LyykqNk8eEeUlUkB3U0M4FApyaHraT65ihJhDpQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>

</script> 
</head> 

<?php
$functionsFile = "../includes/functions.php";
include($functionsFile);
$allSportsEvents = loadHAXSportsEvents($urlParts[2]);
$data = [];

foreach ($allSportsEvents as $row) {
	$datetime = new DateTime($row['start_timestamp']);
	$datetime->setTimezone(new DateTimeZone('UTC'));
	array_push($data, $datetime->format('Y-m-d'));
}
$data = array_unique($data);
$data = array_slice($data,0,8);
						
?>
<body style="background:transparent;">
<?php
foreach($data as $thisDay)
{
	?>
    <h4 class="font-weight-light"><?php echo $thisDay; ?></h4>

<div style="width:100%;overflow:scroll;">
<div class="container-fluid py-2">
    <div class="d-flex flex-row flex-nowrap">
	<?php
	$results = loadHAXSportsEventsForDate($thisDay);
	foreach($results as $event)
	{
		
		$description = str_replace($thisDay,"-",$event['description']) . "<br><br>" . date("h:i A",strtotime($event['start_timestamp']));
	?>
        <a href='#' onclick="return handleclick(<?php echo $event['id']; ?>)"><div style="background-image:url(<?php echo $event['backdrop']; ?>); background-size: 260px 140px;" class="card card-body background-tint"><?php echo $description; ?></div></a>
       <?php
	}
	?>
	  </div>
	
</div>
</div>
<?php
}
?>
<div id="channelmodal" class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" style="color:black">Channels showing this event</h5>
      
      </div>
      <div class="modal-body" id="modalbody">

      </div>
    
    </div>
  </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script>
  $('#channelmodal').on('show.bs.modal', function(e) {
        window.location.hash = "modal";
    });
  $('#channelmodal').on('hide.bs.modal', function(e) {
        window.location.hash = "";

    });
    $(window).on('hashchange', function (event) {
        if(window.location.hash != "#modal") {
            $('#channelmodal').modal('hide');
        }
    });
	function handleclick(id)
	{
		  
		 var xhttp = new XMLHttpRequest();
		  xhttp.onreadystatechange = function() {
			if (this.readyState == 4 && this.status == 200) {
			  document.getElementById("modalbody").innerHTML = this.responseText;
			  
			  $('#channelmodal').modal('show');
			}
		  };
		  xhttp.open("GET", "getchannels.php?id=" + id, true);
		  xhttp.send();
		
		return false;
	}
	function LoadSearch(searchString)
	{
		Android.showToast(searchString);
	}
</script>
</body>