<?php
// mysqli_query("SET NAME UTF-8");
if(isset($_POST['search'])){
	$valueToSearch = $_POST['valueToSeach'];
	$query = "SELECT * FROM `food` WHERE fname LIKE '%".$valueToSearch."%' OR cal LIKE '".$valueToSearch."%'";
	$search_result = filterTable($query);

}else{
	$query = "SELECT * FROM `food`";
	$search_result = filterTable($query);
}

function filterTable($query){
  $connect = mysqli_connect("localhost","root","","dbweb");
  mysqli_set_charset($connect,"utf8");
  $filter_Result = mysqli_query($connect,$query);
	return $filter_Result;
}
?>
<!DOCTYPE html>
<html>
<head>
  <title>ตารางแคลอรี่</title>
  <meta http-equiv=Content-Type content="text/html; charset=utf-8">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css">
  <link rel="stylesheet" href="https://v40.pingendo.com/assets/4.0.0/default/theme.css" type="text/css">
  <link type="text/css" rel="stylesheet" href="css/component.css">
  <script type="text/javascript" src="js/modernizr.custom.js"></script>

  <style>
			table,tr,th,td{
				border: 1px solid lightseagreen;
        width: 900px;
        font-size:18px;
        padding: 5px;
        text-align: center;
			}
      th{
        background:lightseagreen;
        font-weight: bold;
        font-size:20px;
        color: white;
      }
    
    </style>
    
</head>
<body >
  <nav class="navbar navbar-expand-md navbar-dark bg-primary">
    <div class="container">
      <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbar3SupportedContent" aria-controls="navbar3SupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div>
        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link text-light"  href="home.php">
              <h5>หน้าแรก</h5>
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link text-light" href="BMI.html">
              <h5>คำนวณหาดัชนีมวลกาย</h5>
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link text-light" href="Weight.html">
              <h5>คำนวณน้ำหนักที่เหมาะสม</h5>
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link text-light" href="Cal.html">
              <h5>คำนวนอัตราการเผาผลาญพลังงาน</h5>
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link text-light" href="search.php">
              <h5>ตารางแคลอรี่</h5>
            </a>
          </li>
        <a class="ml-3 btn navbar-btn btn-warning text-dark" href="About.html">
          <h5>Team</h5>
        </a>
        </ul>
      </div>
    </div>
  </nav>

  <form class="form-inline my-2 my-lg-0 p-2" method = "POST" action = "#">
      <font color = "white">__________________________________________________________________</font>
    <input class="form-control form-control-lg w-50 m-1 p-2 " align="center"  type="text" name="valueToSeach" placeholder="ใส่ชื่ออาหาร,แคลอรี่">
    <button class="btn btn-link my-2 my-sm-0" type="submit" name="search">
        <i class="fa d-inline fa-lg fa-search text-primary"></i>
      </button>
  </form>
  <table align="center">
			<tr>
				<th>ชื่ออาหาร</th>
				<th>ปริมาณ/หน่วย</th>
				<th>แคลอรี่</th>
			</tr>
			<?php while($row = mysqli_fetch_array($search_result)):?>
			<tr>
				<td><?php echo $row['fname'];?></td>
				<td><?php echo $row['num'];?></td>
				<td><?php echo $row['cal'];?></td>
			</tr>
			<?php endwhile;?>
        </table>
    