<?php

  include('../config/config.php');
  include('../config/db.php');
  include('libs/display_library.php');
  
  include('libs/library.php');
  
  include('includes/file-head.php');
  
  $pagetitle = 'Court Booking';
  include('includes/header-start.php');
  //can put extra page header code here.  Like more head tags, or a custom body start
  ?>
<style>

  th:first-child, td:first-child
  {
    position:sticky;
    left:-1px;
    background-color:white;
  }
</style>
  <?php
  //End Extra Header
  include('includes/header-end.php');
    
?>


<?php
  include('includes/body-start.php');

  
  include('includes/messages.php');

  if(isset($_GET['date'])){
    $date = $_GET['date'];
  }
  else{
    $date = date('Y-m-d');
  }

  $club_info = getClubInfo(CLUB_ID);
  $_SESSION[APP_NAME]['DEBUGDATA']['Club Info'] = print_r($club_info,true);

  $resources = getResources($date);

  $_SESSION[APP_NAME]['DEBUGDATA']['Resources'] = print_r($resources,true);

  $earliest_start = getEarliestStartTime($resources);
  
  $_SESSION[APP_NAME]['DEBUGDATA']['Earliest_Start'] = $earliest_start;

  $latest_end = getLatestEndTime($resources);
  
  $_SESSION[APP_NAME]['DEBUGDATA']['Latest End'] = $latest_end;

  $num_of_resources = count($resources);

  $_SESSION[APP_NAME]['DEBUGDATA']['Number of Resources'] = $num_of_resources;

  $bookings = getBookingsByResourceByTime($date);

  $_SESSION[APP_NAME]['DEBUGDATA']['Bookings'] = $bookings;
?>
<script type="text/javascript">
  function showDatePicker(){
    document.getElementById('selected_date').style.display = 'inline';
  }
  function switchDate(){
    var selected_date = document.getElementById('selected_date').value;
    window.location.href = 'index.php?date=' + selected_date;
  }
</script>
<div>
  <h1>
    <?php echo $club_info[0]['club_name']; ?>
  </h1>
  <h2>
    <a style="text-decoration: none" href="index.php?date=<?php echo date('Y-m-d',strtotime('-1 day', strtotime($date))); ?>" aria-label="Previous Day">
      <span aria-hidden="true">&laquo;</span>
    </a>
    <?php echo date('l, F j, Y',strtotime($date)); ?>
    <a style="text-decoration: none;" href="index.php?date=<?php echo date('Y-m-d',strtotime('+1 day', strtotime($date))); ?>" aria-label="Next Day">
      <span aria-hidden="true">&raquo;</span>
    </a>
    &nbsp;
    <i class="fa-solid fa-calendar-days" onclick="showDatePicker()" title="Show Date Picker" alt="Show Date Picker"></i>
    <input type="date" value="<?php echo $date; ?>" onchange="switchDate();" id="selected_date" style="display: none;"></input>
  </h2>
  <div class="btn-group mb-3" role="group" aria-label="Basic outlined example">
    <button type="button" class="btn btn-outline-primary" onclick="document.getElementById('<?php echo $earliest_start; ?>').scrollIntoView();">Jump to Beginning</button>
    <button type="button" class="btn btn-outline-primary" onclick="document.getElementById('<?php echo round(($earliest_start + $latest_end) / 2,0,PHP_ROUND_HALF_UP); ?>').scrollIntoView();">Jump to Middle</button>
    <button type="button" class="btn btn-outline-primary" onclick="document.getElementById('<?php echo $latest_end; ?>').scrollIntoView();">Jump to End</button>
  </div>
  
</div>
<div class="table-responsive" style="">
  <table class="table table-bordered" style="table-layout: fixed;">
    <thead>
      <tr style="height: 50px;">
        <th style="width: 150px;">&nbsp;<!--blank cell to start off --></th>
        <?php
          /**
           * Print out each of the time blocks
           */
          //One hour blocks
          if($club_info[0]['one_hour_blocks'] == 1){
            for($i = $earliest_start; $i <= $latest_end; $i++){
              echo '<th style="width: 100px;" id="' . $i . '">' . formatTimeString($BLOCKS[$i]) . '</th>';
              $i++;
            }
          }
          else{
            //If not one hour, print out 30 minute blocks
            for($i = $earliest_start; $i <= $latest_end; $i++){
              echo '<th style="width: 100px;" id="' . $i . '">' . formatTimeString($BLOCKS[$i]) . '</th>';
            }
          }
        ?>
      </tr>
    </thead>
    <tbody>
      <!-- Now print out each of the resources -->
      <?php
        if($club_info[0]['one_hour_blocks'] == 1){
          print_1hour_blocks($resources,$bookings,$date,$earliest_start,$latest_end);
        }
        else{
          print_30minute_blocks($resources,$bookings,$date,$earliest_start,$latest_end);
        }

      ?>
    </tbody>

  </table>
</div>
<script>
//   (function($) {
//     $.fn.jTranspose = function () {
//         return this.each(function () {
//             let $table = $(this),
//                 $rows = $table.find('tr'),
//                 nRows = $rows.length,
//                 nColumns = $rows.first().children().length;

//             $table.empty();

//             for (let c = 0; c < nColumns; c++) {
//                 let $row = $('<tr>');

//                 for (let r = 0; r < nRows; r++) {
//                     let $r = $rows.eq(r),
//                         $cell = $r.children().eq(c).clone();

//                     $row.append($cell);
//                 }

//                 $table.append($row);
//             }
//         });
//     };
// }(jQuery));

// $(document).ready(function () {
//   $('table').jTranspose();
// });
</script>
<?php
  include('includes/body-end.php');

  include('includes/footer-start.php');
  //can put extra page footer code here.
  include('includes/footer-end.php');
?>