  <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Queue</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>
<style>
  .book-info {
    font-family: 'Times New Roman', Times, serif;
    color: #89288f;
  }

  .fine-info {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    color: red;
  }

  .no-books-message {
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    text-align: center;
    margin-top: 20px;
  }

  .explore-button {
    display: flex;
    justify-content: center;
    margin-top: 20px;
  }

  .book-card {
    display: flex;
    gap: 20px;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 10px;
    background-color: #f9f9f9;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
  }

  .book-card img {
    border-radius: 5px;
    width: 250px;
    height: 350px;
    object-fit: cover;
  }

  .card-body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .card-body h4,
  .card-body h5,
  .card-body h6 {
    margin: 0;
  }

  .recommendation-title {
    text-align: center;
    margin: 20px 0;
    font-family: 'Times New Roman', Times, serif;
    color: #89288f;
  }
</style>

<body>
  <% const todayDate=new Date() %>
  <div class="px-3 py-2 text-bg-dark border-bottom">
    <div>
      <div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
        <a href="https://iitdh.ac.in"
          class="d-flex align-items-center my-2 my-lg-0 me-lg-auto text-white text-decoration-none">
          <img src="https://election.iitdh.ac.in/static/media/logog.084b1a7a95f4bcd9fccd.png" alt="Logo" height="50px">
        </a>
        <form class="col-12 col-lg-auto mb-3 mb-lg-0 me-lg-3 d-flex" role="search" action="/page" method="post">
          <input type="text" class="form-control form-control-dark mx-2" placeholder="Search..." aria-label="Search"
            list="books" name="book_name">
          <datalist id="books">
            <% if(locals.books) { %>
              <% for(var i=0;i<books.length;i++) { %>
                <option>
                  <%= books[i] %>
                </option>
                <% } } %>
          </datalist>
          <button type="submit" class="btn btn-outline-success">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search"
              viewBox="0 0 16 16">
              <path
                d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0" />
            </svg>
          </button>
        </form>
        <ul class="nav col-12 col-lg-auto my-2 justify-content-center my-md-0 text-small">
          <li>
            <a href="/user_open" class="nav-link text-white">
              <?xml version="1.0"?><svg class="bi d-block mx-auto mb-1" xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 50 50" width="24px" height="24px">
                <path
                  d="M 25 1.0507812 C 24.7825 1.0507812 24.565859 1.1197656 24.380859 1.2597656 L 1.3808594 19.210938 C 0.95085938 19.550938 0.8709375 20.179141 1.2109375 20.619141 C 1.5509375 21.049141 2.1791406 21.129062 2.6191406 20.789062 L 4 19.710938 L 4 46 C 4 46.55 4.45 47 5 47 L 19 47 L 19 29 L 31 29 L 31 47 L 45 47 C 45.55 47 46 46.55 46 46 L 46 19.710938 L 47.380859 20.789062 C 47.570859 20.929063 47.78 21 48 21 C 48.3 21 48.589063 20.869141 48.789062 20.619141 C 49.129063 20.179141 49.049141 19.550938 48.619141 19.210938 L 25.619141 1.2597656 C 25.434141 1.1197656 25.2175 1.0507812 25 1.0507812 z M 35 5 L 35 6.0507812 L 41 10.730469 L 41 5 L 35 5 z" />
              </svg>
              Home
            </a>
          </li>
          <li>
            <a href="/recommendations" class="nav-link text-white">
              <svg class="bi d-block mx-auto mb-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                fill="currentColor" class="bi bi-speedometer2" viewBox="0 0 16 16">
                <path
                  d="M8 4a.5.5 0 0 1 .5.5V6a.5.5 0 0 1-1 0V4.5A.5.5 0 0 1 8 4M3.732 5.732a.5.5 0 0 1 .707 0l.915.914a.5.5 0 1 1-.708.708l-.914-.915a.5.5 0 0 1 0-.707M2 10a.5.5 0 0 1 .5-.5h1.586a.5.5 0 0 1 0 1H2.5A.5.5 0 0 1 2 10m9.5 0a.5.5 0 0 1 .5-.5h1.5a.5.5 0 0 1 0 1H12a.5.5 0 0 1-.5-.5m.754-4.246a.39.39 0 0 0-.527-.02L7.547 9.31a.91.91 0 1 0 1.302 1.258l3.434-4.297a.39.39 0 0 0-.029-.518z" />
                <path fill-rule="evenodd"
                  d="M0 10a8 8 0 1 1 15.547 2.661c-.442 1.253-1.845 1.602-2.932 1.25C11.309 13.488 9.475 13 8 13c-1.474 0-3.31.488-4.615.911-1.087.352-2.49.003-2.932-1.25A8 8 0 0 1 0 10m8-7a7 7 0 0 0-6.603 9.329c.203.575.923.876 1.68.63C4.397 12.533 6.358 12 8 12s3.604.532 4.923.96c.757.245 1.477-.056 1.68-.631A7 7 0 0 0 8 3" />
              </svg>
              Recommendations
            </a>
          </li>
          <li>
            <a href="/order" class="nav-link text-secondary">
              <svg class="bi d-block mx-auto mb-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                fill="currentColor" class="bi bi-table" viewBox="0 0 16 16">
                <path
                  d="M0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2zm15 10V9H1v3h14zm0 1H1v2a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2zm0-5V5H1v3h14zm0-4V2a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v2h14z" />
              </svg>
              Orders
            </a>
          </li>
          <li>
            <a href="/upcoming_reservation" class="nav-link text-white">
              <svg class="bi d-block mx-auto mb-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                fill="currentColor" class="bi bi-bell" viewBox="0 0 16 16">
                <path
                  d="M8 16a2 2 0 0 0 2-2H6a2 2 0 0 0 2 2M8 1.918l-.797.161A4 4 0 0 0 4 6c0 .628-.134 2.197-.459 3.742-.16.767-.376 1.566-.663 2.258h10.244c-.287-.692-.502-1.49-.663-2.258C12.134 8.197 12 6.628 12 6a4 4 0 0 0-3.203-3.92zM14.22 12c.223.447.481.801.78 1H1c.299-.199.557-.553.78-1C2.68 10.2 3 6.88 3 6c0-2.42 1.72-4.44 4.005-4.901a1 1 0 1 1 1.99 0A5 5 0 0 1 13 6c0 .88.32 4.2 1.22 6" />
              </svg>
              Reservation
            </a>
          </li>
          <li>
            <a href="/profile" class="nav-link text-white">
              <svg class="bi d-block mx-auto mb-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                fill="currentColor" class="bi bi-person-circle" viewBox="0 0 16 16">
                <path d="M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0" />
                <path fill-rule="evenodd"
                  d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8m8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1" />
              </svg>
              <%= Name %>
            </a>
          </li>
        </ul>
      </div>
        </div>
      </div>
    <% if(orders.length>0){ %>
      <div class="book-shelf-container">
        <h2 class="recommendation-title ">Your Borrowed Books</h2>
        <div class="book-shelf">
          <% for(var i=0;i<orders.length;i++){ %>
            <div style="display: flex; gap: 20px;" class="container mb-3 book-card">
              <img src="<%= orders[i][1] %>" alt="Book Cover" width="150px">
              <div class="card-body">
                <h3 class="book-title" style="font-family: 'Times New Roman', Times, serif; color: #89288f;">
                  <%= orders[i][0] %>
                    </h4>
                    <h5 class="book-author" style="font-family: 'Times New Roman', Times, serif; color: #89288f;">- <%=
                        orders[i][2] %>
                    </h5>
                    <div class="shelf-divider"></div>
                    <h6 class="book-info" style="font-family: 'Times New Roman', Times, serif; color: #89288f;">Genre:
                      <%= orders[i][4] %>
                    </h6>
                    <h6 class="book-info" style="font-family: 'Times New Roman', Times, serif; color: #89288f;">
                      Department: <%= orders[i][3] %>
                    </h6>
                    <% if(orders[i][7]!==0){ %>
                      <% var a=new Date(orders[i][7]); %>
                        <% a.setDate(a.getDate()+14); %>
                          <% var b=new Date(); %>
                            <h5 class="fine-info"
                              style="font-family: BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; color: red;">
                              Borrowed On: <%= orders[i][7] %>
                            </h5>
                            <h5 class="fine-info"
                              style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; color: red;">
                              Return By: <%= a %>
                            </h5>
                            <%if(((todayDate-orders[i][7]) /(1000 * 60 * 60 * 24))>14){%>
                              <%const fine=(Math.floor((todayDate-orders[i][7])/(1000 * 60 * 60 * 24))-14)*50%>
                                <h5
                                  style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; color: red;">
                                  Fine: â‚¹<%= fine%>
                                </h5>
                                <% } %>
                                  <% if((Math.round(Math.abs(a.getTime()-b.getTime()))/(1000*60*60*24))<=2){ %>
                                    <% if(orders[i][8]==0){ %>
                                      <form action="/return" method="post">
                                        <button class="btn btn-success btn-outline-light">Renew</button>
                                        <input hidden name="title" value="<%= orders[i][0] %>">
                                      </form>
                                      <% } else { %>
                                        <div style="display: flex; gap: 20px;">
                                          <button disabled class="btn btn-danger">Renew</button>
                                          <div class="pt-2">
                                            <p><span style="color: red;">*</span>Shortage of books. Cannot Renew.</p>
                                          </div>
                                        </div>
                                        <% }}} else { %>
                                          <h5
                                            style="font-family: BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; color: red;">
                                            Queue No: <%= orders[i][8] %>
                                          </h5>
                                          <% } %>
              </div>
            </div>
        </div>
      </div>
      <% }} else { %>
        <div class="container">
          <div style="display: flex; justify-content: center;">
            <img
              src="https://png.pngtree.com/png-vector/20230924/ourmid/pngtree-empty-bookshelf-bookshelf-wood-png-image_9985529.png"
              alt="No Books">
          </div>
          <div style="display: flex; justify-content: center;">
            <h4 style="font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;">Looks like you
              have not borrowed any books yet.</h4>
          </div>
          <div style="display: flex; justify-content: center;">
            <h4 style="font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;">Go ahead and
              explore all the categories.</h4>
          </div>
          <div style="display: flex; justify-content: center;">
            <a href="/user_open"><button class="btn btn-success btn-outline-light">Explore Now</button></a>
          </div>
        </div>
        <% } %>
</body>

</html>
