<!DOCTYPE html>
<html>
<head>
   <link rel="icon" href="/images/favicon.ico" type="image/x-icon">
    <link rel="shortcut icon" href="/images/favicon.ico" type="image/x-icon">
  <title>Inventory</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 20px;
      background: linear-gradient(to bottom right, #8cf0c6, #85b31c);

    }
    
    h1 {
      text-align: center;
    }
    .container {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 20px;
    }
    .item {
      background-color: white;
      border: 1px solid #ccc;
      border-radius: 8px;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
      padding: 20px;
      width: 300px;
      transition: border-color 0.3s;
    }
    .item:hover {
      border-color: #007bff;
      box-shadow: 6 3 30px;
      border-width: 10px;
    }
    .item.expired {
      border-color: red;
      box-shadow: 0 0 10px red;
    }
    .item h2 {
      margin-top: 0;
    }
    .item p {
      margin: 10px 0;
    }
     .notification-container {
      position: fixed;
      top: 20px;
      right: 20px;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .notification {
      background-color: #f8d7da;
      color: #721c24;
      border: 1px solid #f5c6cb;
      padding: 10px;
      border-radius: 5px;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
      transition: transform 0.5s, opacity 0.5s;
      opacity: 0;
      transform: translateY(-20px);
    }
    .notification.show {
      opacity: 1;
      transform: translateY(0);
    }
    .header {
            background-color: rgba(255, 126, 95, 0.9);
            padding: 10px 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }
    .header a {
        color: #fff;
        text-decoration: none;
        font-size: 24px;
    }
    .nav {
        display: flex;
    }
    .nav a {
        margin-left: 20px;
        color: #fff;
        text-decoration: none;
        font-size: 18px;
        transition: color 0.3s;
    }
    .nav a:hover {
        color: #ffd1a9;
    }
    .adder {
     display: flex;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    height: 14px; 
    text-decoration: none;
      color: #ffffff;
      
    }
    .adder button:hover{
      background-color: #0084ff;
    }
    .adder-container{
      text-decoration: none;
      background-color: #0084ff;
      padding: 15px;
      border: 1px solid #000000;
      
      border-radius: 8px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      text-align: center;
      margin-top: 20px;
      
    }
    .adder-container:hover{
      background-color: #0056b3;
    }
    .adder a{
      text-decoration: none;
     color: #ccc;
    }
    .adder-container .adder a{
      text-decoration: none;
    }
    .adder .adder-container a{
      text-emphasis: none;
    }
    /* .adder{
      padding: 10px 20px;
      font-size: 16px;
      background-color: #007BFF;
      color: rgb(14, 79, 221);
      border: none;
      border-radius: 4px;
      cursor: pointer;
     
      
    } */
    .div-link {
    text-decoration: none; /* Remove underline */
    color: inherit; /* Inherit color from parent */
    }

    /* Reset link styles for all children elements inside the div-link */
    .div-link * {
        color: inherit; /* Inherit color from parent */
    }
    .search-container {
        text-align: center;
    }
    .search-bar {
        display: flex;
        justify-content: center;
        margin-bottom: 20px;
    }
    .search-bar input[type="text"] {
        width: 300px;
        padding: 10px;
        font-size: 16px;
        border: 1px solid #ccc;
        border-radius: 4px;
        margin-right: 10px;
    }
    .search-bar button {
        padding: 10px 20px;
        font-size: 16px;
        background-color: #007BFF;
        color: white;
        border: none;
        border-radius: 4px;
        cursor: pointer;
    }
    .search-bar button:hover {
        background-color: #0056b3;
    }
  </style>
</head>
<body>
  <div class="header">
        <a href="/">Food Optimization</a>
            
            <a href="/">Home</a>
            <a href="/ingredients">Ingredients</a>
            <a href="/foods/getsuggestion">optimize</a>
            <a href="/profile">Profile</a>
            <a href="/about">About</a>
            <a href="/register">Register</a>
            <a href="/login">Login</a></div>
      <a href="/foods/addDish">      
  <br>
  <div class="adder">
    <div class="adder-container">
      Add New Dish
    </div>
  </div>
  </a>

  <!-- <a href="/foods/ingredients">
    <br>
    <div class="addr">
      <div class="adder-container">
        Ingredients list
      </div>

    </div>
  </a> -->
  <!-- <a href="/foods/getsuggestion">
  <div class="addr">
    <div class="adder-container">
      
      get Optimized suggestions
      
      </div>
  </div>
  </a> -->
  

<br>
  <h1>Inventory List</h1>
  <div class="search-container">
    <form class="search-bar" action="/foods/search" method="get">
    <input type="text" name="q" placeholder="Search...">
    <button type="submit">Search</button>
    </form>
  </div>

  <div class="container">
    <% inventory.forEach(item => { %>
      <a href="/foods/dish/<%=item.foodid%>" class="div-link">
      <div class="item <%= new Date(item.expiration_date) < new Date() ? 'expired' : '' %>">
        <h2><%= item.dist_name %></h2>
        <p><strong>Ingredients:</strong> <%= item.ingredients.join(', ') %></p>
        <p><strong>Difficulty Cooking:</strong> <%= item.difficulty_cooking %></p>
        <p><strong>Quality:</strong> <%= item.quality %></p>
        <p><strong>Expiration Date:</strong> <%= item.expiration_date %></p>
        <p><strong>Quantity:</strong> <%= item.quantity %></p>
        <p><strong>Storage Location:</strong> <%= item.storage_location %></p>
        <p><strong>Average Rate:</strong><%= item.average_rating.toFixed(2) %> </p>
         <form action="/foods/rate" method="POST">
          <input type="hidden" name="dist_name" value="<%= item.dist_name %>">
          <label for="rating">Rate this dish:</label>
          <select name="rating" id="rating">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
          </select>
          <button type="submit">Submit Rating</button>
        </form>
      </div>
      </a>
    <% }); %>
  </div>
  <br>
  <br>
  <div class="adder">
    <div class="adder-container">
      <a href="/foods/addDish">Add New Dish</a>
    </div>
  </div>
   <div class="notification-container" id="notification-container"></div>
   <audio id="notification-sound" src="/media/alert.mp3"></audio>

  <script>
      document.addEventListener('DOMContentLoaded', (event) => {
      const inventory = <%- JSON.stringify(inventory) %>;
      const today = new Date();
      inventory.forEach(item => {
        const expirationDate = new Date(item.expiration_date);
        if (expirationDate < today) {
          spawnNotification(`The item "${item.dist_name}" has expired.`);
        }
      });

      function spawnNotification(message) {
        const notificationContainer = document.getElementById('notification-container');
        const notification = document.createElement('div');
        notification.className = 'notification';
        notification.textContent = message;
        notificationContainer.appendChild(notification);
        const notificationSound = document.getElementById('notification-sound');
        notificationSound.muted = true;
        notificationSound.autoplay = true;
        notificationSound.play();
        // notsound = new Audio('/media/alert.mp3');
        // var playpromise = notsound.play();
        // playpromise.play()
        setTimeout(() => {
          notification.classList.add('show');
        }, 100); // delay k

        setTimeout(() => {
          notification.classList.remove('show');
          setTimeout(() => {
            notification.remove();
          }, 700); // Wait for the slide-out transition to complete before removing
        }, 10000);
      }
    });

  </script>
</body>
</html>
