Untitled

<!doctype html>
<html lang="en" data-bs-theme="dark">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
    <meta name="generator" content="Hugo 0.84.0">
    <title>Album example · Bootstrap v5.0</title>

    <link rel="canonical" href="https://getbootstrap.com/docs/5.0/examples/album/">

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>

    <!-- Bootstrap core CSS -->
    <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>
      .bd-placeholder-img {
        font-size: 1.125rem;
        text-anchor: middle;
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
      }
      .col{
        width: 20%;
      }
      @media (min-width: 768px) {
        .bd-placeholder-img-lg {
          font-size: 3.5rem;
        }
      }
    </style>


  </head>
  <body>

<header>
  <div class="collapse bg-dark" id="navbarHeader">
    <div class="container">
      <div class="row">
        <div class="col-sm-8 col-md-7 py-4">
          <h4 class="text-white">About</h4>
          <p class="text-muted">Add some information about the album below, the author, or any other background context. Make it a few sentences long so folks can pick up some informative tidbits. Then, link them off to some social networking sites or contact information.</p>
        </div>
        <div class="col-sm-4 offset-md-1 py-4">
          <h4 class="text-white">Contact</h4>
          <ul class="list-unstyled">
            <li><a href="#" class="text-white">Follow on Twitter</a></li>
            <li><a href="#" class="text-white">Like on Facebook</a></li>
            <li><a href="#" class="text-white">Email me</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  <div class="navbar navbar-dark bg-dark shadow-sm">
    <div class="container">
      <a href="#" class="navbar-brand d-flex align-items-center">
        <img src="logo.png" width="60" height="60">
        <strong>|</strong>
      </a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarHeader" aria-controls="navbarHeader" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
    </div>
  </div>
</header>

<main>

  <section class="py-5 text-center container">
    <div class="row py-lg-5">
      <div class="col-lg-6 col-md-8 mx-auto">
        <h1 class="fw-light">محرك بحث مكتبة </h1>
        <br>

        <span id="quote" class="badge text-bg-info">وقل ربي زدني علماً</span>
        <br>
        <br>
        <div class="container">
          <div class="row justify-content-center">
              <div class="col">
                  <form>

                      <div class="input-group mb-3">
                        <button onclick="searchBooks()"   class="btn btn-success" type="submit">بحث</button>

                          <input id="titleSearch" type="text" class="form-control" placeholder="أبحث هُنا....">
                          <select id="genreSearch" class="form-select" style="max-width: 150px;">
                            <option value="" selected>جميع تصنيفات الكُتب</option>
                            <option value="اللغة الإنجليزية">اللغة الإنجليزية</option>
                            <option value="اللغة العربية">اللغة العربية</option>
                            <option value="العلوم الدينية">العلوم الدينية</option>
                            <option value="الحاسب الإلي والبرمجة">الحاسب الإلي والبرمجة</option>
                            <option value="العلوم العامة">العلوم العامة</option>
                        </select>
                      </div>
                  </form>
              </div>
          </div>
      </div>

      </div>
    </div>
  </section>

  <div class="album py-5 bg-dark">
    <div class="container">
      <div id="book-container" class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">
        <script>
          // Function to perform a search and fetch filtered books from the server
          function searchBooks() {
              const titleSearch = document.getElementById('titleSearch').value;
              const genreSearch = document.getElementById('genreSearch').value;

              // Prepare URL with query parameters
              const url = new URL('http://127.0.0.1:3000/search');
              const params = new URLSearchParams();

              if (titleSearch) {
                  params.append('book_title', titleSearch);
              }
              if (genreSearch) {
                  params.append('book_genre', genreSearch);
              }

              url.search = params.toString();

              // Fetch books based on search parameters
              fetch(url)
                  .then(response => response.json())
                  .then(data => {
                      displayBooks(data);
                  })
                  .catch(error => {
                      console.error('Error fetching book data:', error);
                  });
          }

          // Function to render books dynamically
          function displayBooks(books) {
              const container = document.getElementById("book-container");
              container.innerHTML = '';  // Clear previous books

              if (books.length === 0) {
                  container.innerHTML = '<p>لم يتم العثور على نتيجة</p>';
                  return;
              }

              // Sort books by genre
              books.sort((a, b) => a.book_genre.localeCompare(b.book_genre));

              let currentGenre = null;

              // Create and display each book dynamically
              books.forEach(book => {
                  if (book.book_genre !== currentGenre) {
                      currentGenre = book.book_genre;

                      // Genre Divider
                      const genreDivider = document.createElement("h1");
                      genreDivider.textContent = currentGenre;
                      genreDivider.style.textAlign = "right";

                      const genreDiv = document.createElement("div");
                      genreDiv.classList.add("row", "w-100");
                      genreDiv.appendChild(genreDivider);
                      container.appendChild(genreDiv);
                  }

                  // Book Card
                  const colDiv = document.createElement("div");
                  colDiv.classList.add("col");

                  const cardDiv = document.createElement("div");
                  cardDiv.classList.add("card", "shadow-sm");

                  const imgTag = document.createElement("img");
                  imgTag.classList.add("bd-placeholder-img", "card-img-top");
                  imgTag.setAttribute("src", book.book_thumbnail);
                  imgTag.setAttribute("width", "100%");
                  imgTag.setAttribute("height", "225");

                  const cardBodyDiv = document.createElement("div");
                  cardBodyDiv.classList.add("card-body");

                  const h5Tag = document.createElement("h5");
                  h5Tag.textContent = book.book_title;

                  const h8Tag = document.createElement("h8");
                  h8Tag.textContent = book.book_genre;

                  cardBodyDiv.appendChild(h5Tag);
                  cardBodyDiv.appendChild(h8Tag);
                  cardDiv.appendChild(imgTag);
                  cardDiv.appendChild(cardBodyDiv);
                  colDiv.appendChild(cardDiv);

                  container.appendChild(colDiv);
              });
          }
          document.getElementById('titleSearch').addEventListener('input', searchBooks);
    document.getElementById('genreSearch').addEventListener('input', searchBooks);
          // Initial display of all books (optional, if needed)
          searchBooks();  // Call to show books on page load
      </script>
    </div>
  </div>

</main>

<footer class="text-muted py-5">

</footer>


    <script src="../assets/dist/js/bootstrap.bundle.min.js"></script>


  </body>
</html>