<?php
include('../includes/functions.php');
session_start();
make_connection();
if(is_loggedin());
else
  redirect_to('index.php');
$user=get_user();
if(!$user)
 redirect_to('index.php');
$user_id=$user['regno'];
?>
<!DOCTYPE html>
<html lang="en">
<head>
  <?php include('../includes/head.php');?>
  <title>Utopia- View Recommendations</title>
  <link rel="stylesheet" type="text/css" href="font-awesome/css/font-awesome.min.css">
  <link rel="stylesheet" type="text/css" href="materialize/css/materialize.css">
  <link rel="stylesheet" type="text/css" href="css/home.css">

  <link rel="stylesheet" type="text/css" href="css/searchbook.css">
</head>
<body>
  <div class="body row">
    <?php
    global $navactive;
    $navactive="viewrecommendations";
    include('../includes/nav-recom.php');
    ?>

    <div class="main">
      <div class="container">
        <header>
          <h3 class="center">View Recommendations</h3>
        </header>
      <div class="searchform">
        <form id="searchform">
          <div class="row">
            <div class="col offset-s1 s6">
              <div class="input-field">
                <input id="searchinput" name="searchinput" type="text" class="validate">
                <label for="searchinput">Search for..</label>
              </div>
            </div>
            <div class="col s3 left-align valign">
              <br>
              <a class="waves-effect waves-light btn valign">
                <input type="submit" class="valign" name="searchsubmit" value="Search"/>&nbsp;&nbsp;<i class="fa fa-angle-right" aria-hidden="true"></i>
              </a>
            </div>
          </div>
        </form>
      </div>
      <div class="booksdiv">
        <?php
        $all_books_result=get_all_recommendations();
        $nobooks=0;
        while($row=mysqli_fetch_assoc($all_books_result))
        {

         print_a_recommendation($row,$user_id);
         $nobooks++;
       }
       
       if($nobooks==0)
        echo "<div class='nobook'>No Recommendations found..</div>";
      ?>
    </div>
  </div>
</div>
</div>
<script src="js/jquery.js"></script>
<script src="materialize/js/materialize.js"></script>
<script>
  $(".button-collapse").sideNav();
  $('.button-collapse').sideNav({
      menuWidth: 300, // Default is 240
      edge: 'left', // Choose the horizontal origin
      closeOnClick: false // Closes side-nav on <a> clicks, useful for Angular/Meteor
    }
    );
  </script>
  <script>
    $(document).ready(function(){
    // the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered
    $('.modal-trigger').leanModal();
  });
</script>
<script type="text/javascript">
  <?php
  if(isset($succ) and $succ)
    echo "alert('Request sending successfull!');";
  elseif(isset($succ) and !$succ)
    echo "alert('Request sending failed. Please try later.');";
  ?>

  $( "#searchform" ).submit(function( event ) {
    event.preventDefault();

    var search = $("#searchinput").val();
    console.log(search);
    var booksdiv = $(".book");
    for(var i=0;i<booksdiv.length;i++){
      $($(".book")[i]).removeClass("hide");
    }

    for(var i=0;i<booksdiv.length;i++){
      var booktitle=$($(".book")[i]).find(".booktitle")[0].innerHTML.toLowerCase();;
      console.log(booktitle)
      if(booktitle.indexOf(search.toLowerCase())==-1){
        $($(".book")[i]).addClass("hide");
      }
    }
  });
</script>
</body>
</html>