<?php
 
error_reporting(E_ALL);

// Include the database page
include ('../inc/dbconfig.php');

$query = "SELECT 
 CONCAT_WS(' ', handlers.firstName, handlers.lastName) AS name, 
 DATE_FORMAT(characters.dateCreated, '%M %d, %Y') AS dateCreated, 
 characters.ID, 
 characters.characterName, 
 statuses.statusName, 
 styles.styleName 
FROM 
 characters
 INNER JOIN handlers 
 ON characters.creatorID = handlers.ID
 INNER JOIN statuses
 ON characters.statusID = statuses.ID
 INNER JOIN styles
 ON characters.styleID = styles.ID
ORDER BY 
 characters.characterName";
$result = mysqli_query ( $dbc, $query ); // Run The Query
$rows = mysqli_num_rows($result);

$itemsPerPage = 10;
$pages = ceil( $rows / $itemsPerPage );

?>

<script>
$(document).ready(function() {
 $('a', $('div#addform')).click(function() {
 $('#innerContent').load('forms/' + $(this).attr('id') + '.php?case=addnew');
 });
 
 
 // Add the table sorter and table paginator plugins
 $('#charactersPageList').tablesorter() 
 .tablesorterPager({
 container: $( '#charactersPageList .paginate' ),
 cssPageLinks: 'a.pageLink'
 });
 $('.edit').click(function(){
 var characterID = $(this).attr('rel'); 
 $('#innerContent').load('forms/character.php?id=' + characterID + '&case=edit');
 }); 
});
</script>

<!-- Title -->
<div id="title" class="b2">
 <h2>Characters</h2>
 <!-- TitleActions -->
 <div id="titleActions">
 <!-- ListSearch -->
 <div class="listSearch actionBlock">
 <div class="search">
 <label for="search">Content Pages</label>
 <input type="text" name="search" id="search" class="text" />
 </div>
 <div class="submit">
 <button type="submit" id="search-button" class="button"><strong><img src="img/icons/search_48.png" alt="search" class="icon "/></strong></button>
 </div>
 </div>
 <!-- /ListSearch -->
 <!-- newPost -->
 <div id="addform" class="addNew actionBlock">
 <a href="#" id="character" class="button"><strong>Add New Character<img src="img/icons/add_48.png" alt="add new" class="icon "/></strong></a>
 </div>
 <!-- /newPost -->
 </div>
 <!-- /TitleActions -->
</div>
<!-- Title -->
<!-- Inner Content -->
<div id="innerContent">
 <!-- ListHeader -->
 <div id="listHeader">
 <p class="listInfos">
 You have <?php echo $rows; ?> characters.
 </p>
 </div>
 <!-- /ListHeader -->
 <?php
 if ($rows > 0) {
 ?>
 <!-- ListTable -->
 <table cellspacing="0" class="listTable" id="charactersPageList">
 <!-- Thead -->
 <thead>
 <tr>
 <th class="first"><div><a href="#" title="Character Name">Character Name</a></div></th>
 <th><a href="#" title="Character Status">Status</a></th>
 <th><a href="#" title="Character Style">Style</a></th>
 <th><a href="#" title="Creator">Creator</a></th>
 <th><a href="#" title="Date Created">Date Created</a></th>
 <th class="last">Edit/Delete</th>
 </tr>
 </thead>
 <!-- /Thead -->
 <!-- Tfoot -->
 <tfoot>
 <tr>
 <td colspan="6">
 <div class="inner">
 <div class="paginate">
 <?php
 if( $pages > 1 ) {
 for( $i = 1; $i <= $pages; $i++ ) {
 echo '<span style="padding-left: 5px; padding-right: 5px;"><a class="pageLink" href="#">' . $i . '</a></span>';
 }
 }
 ?>
 </div>
 </div>
 </td>
 </tr>
 </tfoot>
 <!-- /Tfoot -->
 <!-- Tbody -->
 <tbody>
 <?php 
 while ( $row = mysqli_fetch_array ( $result, MYSQL_ASSOC ) ) {
 echo '
 <tr>
 <td><a href=# title="' . $row['characterName'] . '">' . $row['characterName'] . '</a></td>
 <td>' . $row['statusName'] . '</td>
 <td>' . $row['styleName'] . '</td>
 <td>' . $row['name'] . '</td>
 <td>' . $row['dateCreated'] . '</td>
 <td style="text-align:center;"><img src="img/notepad.png" class="edit" rel="' . $row['ID'] . '"/></td>
 </tr>';
 }
 ?>
 </tbody>
 <!-- /Tbody -->
 </table>
 <?php
 }
 ?>
 <!-- /ListTable -->
</div>
<!-- /Inner Content -->