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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Reserve Date</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">
  <style>
    .heading {
      margin-top: 3rem;
      margin-bottom: 2rem;
      font-weight: bold;
      text-align: center;
      font-size: 2.5rem;
      font-family: 'Roboto', sans-serif;
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
    }

    .date-button {
      background-color: #c2892d;
      color: #121111;
      border: none;
      border-radius: 10px;
      padding: 10px 20px;
      font-size: 1.2rem;
      transition: opacity 0.3s ease;
    }

    .date-button:hover {
      opacity: 0.9;
    }

    .options {
      display: flex;
      justify-content: center;
      gap: 20px;
      margin-bottom: 3rem;
    }

    .navbar {
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      padding-top: 0.5rem;
    }

    .navbar-brand img {
      height: 50px;
      max-height: 100%;
    }

    .form-control-dark {
      background-color: #f2f2f2;
      border-color: #ccc;
    }

    .nav-link {
      font-size: 0.9rem;
      color: #ffffff;
    }

    .nav-link:hover {
      opacity: 0.8;
    }

    .container{
      display: flex;
      align-items: center;
      justify-content: center;
      width: 200vh;
    }
    .card {
      border: none;
      background: linear-gradient(to bottom right, #89288f, #49185c);
      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
      border-radius: 20px;

      padding: 2rem;
      margin-top: 2rem;
      transition: all 0.3s ease;
      color: white;
    }

    .card h4 {
      font-size: 2.5rem;
      margin-bottom: 1rem;
    }

    @media (max-width: 768px) {
      .heading {
        font-size: 1.5rem;
      }

      .date-button {
        padding: 8px 16px;
        font-size: 1rem;
      }
    }

    .card p {
      font-size: 1.1rem;
      line-height: 1.6;
    }

    .card:hover {
      transform: translateY(-5px);
      box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3);
    }
  </style>
</head>

<body>
  <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>
        <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-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-clock" viewBox="0 0 16 16">
                <path d="M8 3.5a.5.5 0 0 0-1 0V9a.5.5 0 0 0 .252.434l3.5 2a.5.5 0 0 0 .496-.868L8 8.71z" />
                <path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m7-8A7 7 0 1 1 1 8a7 7 0 0 1 14 0" />
              </svg>
              Reservation
            </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-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-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-2zm15 2h-4v3h4zm0 4h-4v3h4zm0 4h-4v3h3a1 1 0 0 0 1-1zm-5 3v-3H6v3zm-5 0v-3H1v2a1 1 0 0 0 1 1zm-4-4h4V8H1zm0-4h4V4H1zm5-3v3h4V4zm4 4H6v3h4z" />
              </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>
              Upcoming
            </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>
  <div class="container">
    <div class="card">
      <div class="card-body">
        <h4 class="heading">Select a time-slot to reserve your book.</h4>

        <div class="options">
          <% var a=new Date().toLocaleDateString(); %>
            <% var b=new Date(); %>
              <% b.setDate(b.getDate()+1); %>
                <% b=b.toLocaleDateString(); %>
                  <form action="/reserve_day" method="post">
                    <input type="hidden" name="day" value="Date1">
                    <input type="hidden" name="title" value="<%= title %>">
                    <button class="btn-info date-button" data-date="Date1">
                      <%= a %>
                    </button>
                  </form>
                  <form action="/reserve_day" method="post">
                    <input type="hidden" name="day" value="Date2">
                    <input type="hidden" name="title" value="<%= title %>">
                    <button class="btn-info date-button" data-date="Date2">
                      <%= b %>
                    </button>
                  </form>
        </div>
      </div>
    </div>
  </div>
</body>

</html>
