<?php
    $page = 3;
    require("inc_header.php");

    // ======================================================
    // LATEST GAMES
    // ======================================================
    
    $table = "";

    $query = "SELECT `title`, `difficulty`, songinstance.id as siid, song.id as sid, `username`, `score`, `date` 
              FROM `highscore`, `songinstance`, `song`
              WHERE highscore.songinstance = songinstance.id AND songinstance.song = song.id
              ORDER BY `date` DESC";

    $result_temp = mysqli_query($connection, $query);
    while($result = mysqli_fetch_assoc($result_temp))
    {
      $table .= "<tr>";
      $table .= "<td><a href='" . returnurl('song.php?id=' . $result['sid']) . "'>" . $result['title'] . "</a></td>";
      $table .= "<td><a href='" . returnurl('songinstance.php?id=' . $result['siid']) . "'>" . $result['difficulty'] . "</a></td>";
      $table .= "<td>" . $result['username'] . "</td>";
      $table .= "<td>" . $result['score'] . "</td>";
      $table .= "<td>" . $result['date'] . "</td>";
      $table .= "</tr>";
    }  


    // ======================================================
    // DATA POINTS FOR SCORES GRAPH
    // ======================================================
    
    $scores_array = array();
    $scores_names_array = array();

    $query = "SELECT `date`, `score`, `username` 
              FROM highscore 
              ORDER BY `date` DESC
              LIMIT 0,28";

    $result_temp = mysqli_query($connection, $query);
    while($result = mysqli_fetch_assoc($result_temp))
    {
      $scores_array[] = "{y: '" . $result['date'] . "', sc: " . $result['score'] . "}";
      $scores_names_array[] = "'" . $result['username'] . "'";
    }

    $scores_array = array_reverse($scores_array);
    $scores_names_array = array_reverse($scores_names_array);


    // ======================================================
    // SELECT HIGHEST SCORE OF TODAY
    // ======================================================
    
    $query = "SELECT `username`, `score` 
              FROM highscore 
              ORDER BY `score` DESC 
              LIMIT 1";

    $result_temp = mysqli_query($connection, $query);
    $result = mysqli_fetch_assoc($result_temp);

    $highest_score = $result['score'];
    $best_player = $result['username'];
    if($highest_score==null)
    {
      $highest_score=0;
      $best_player="BORF";
    }

?>

<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">

  <!-- Content Header (Page header) -->
  <section class="content-header">
    <h1>
      Scores
      <small>All score activity in one quick overview</small>
    </h1>
    <ol class="breadcrumb">
      <li class="active"><a href="#"><i class="ion ion-ribbon-b"></i> Scores</a></li>
    </ol>
  </section>

  <section class="content">

    <div class="row">

      <div class="col-lg-9">

        <!-- games played graph -->
        <div class="box box-solid bg-purple">
          <div class="box-header">
            <i class="ion ion-ribbon-b"></i>
            <h3 class="box-title">Scores</h3>
          </div>

          <div class="box-body border-radius-none">
            <div class="chart" id="scores-chart" style="height: 165px;"></div>
          </div><!-- /.box-body -->
        </div><!-- /.box -->

      </div>

      <div class="col-lg-3 col-md-6 col-xs-12">
        <!-- small box -->
        <div class="small-box bg-aqua">
          <div class="inner">
            <h3><?php echo $best_player; ?></h3>
            <p>Best Player</p>
          </div>
          <div class="icon">
            <i class="ion ion-ios-game-controller-a"></i>
          </div>
        </div>
      </div><!-- ./col -->

       <div class="col-lg-3 col-sm-6 col-xs-12">
        <!-- small box -->
        <div class="small-box bg-yellow">
          <div class="inner">
            <h3><?php echo $highest_score; ?><sup style="font-size: 20px"> points</sup></h3>
            <p>Highscore</p>
          </div>
          <div class="icon">
            <i class="ion ion-ribbon-b"></i>
          </div>
        </div>
      </div><!-- ./col -->
    </div>

    <div class="row">

      <div class="col-lg-12">
        <!-- TABLE: LATEST SONGS -->
        <div class="box">
          <div class="box-header with-border">
            <i class="ion ion-ribbon-b"></i>
            <h3 class="box-title">Scores</h3>
          </div><!-- /.box-header -->
          <div class="box-body">
              <table id="scores-table" class="table table-bordered">
                <thead>
                  <tr>
                    <th>Song Name</th>
                    <th>Difficulty</th>
                    <th>Name</th>
                    <th>Score</th>
                    <th>Time</th>
                  </tr>
                </thead>
                <tbody>
                  <?php
                       echo $table;
                  ?>
                </tbody>
              </table>
          </div><!-- /.box-body -->
        </div><!-- /.box -->
      </div><!-- /.col -->

    </div><!-- /.row -->
    

  </section><!-- /.content -->
</div><!-- /.content-wrapper -->

<!-- Morris.js charts -->
    <script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
    <script src="plugins/morris/morris.min.js" type="text/javascript"></script>
<!-- DATA TABES SCRIPT -->
    <script src="plugins/datatables/jquery.dataTables.min.js" type="text/javascript"></script>
    <script src="plugins/datatables/dataTables.bootstrap.min.js" type="text/javascript"></script>
<!-- Page specific javascript -->
    <script type="text/javascript">
        var scores_data = [ <?php
             foreach ($scores_array as $value)
             {
                echo $value . ",\n";
             }
        ?> ];

        var scores_names_data = [ <?php
             foreach ($scores_names_array as $value)
             {
                echo $value . ",\n";
             }
        ?> ];
    </script>
    <script src="dist/js/pages/scores.js" type="text/javascript"></script> 

<?php
    require("inc_footer.php");
?>