<!DOCTYPE html>
<html lang="ar" dir="rtl">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Bookstore</title>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"
      integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    />
    <link rel="shortcut icon" href="../icons/book.svg" type="image/x-icon" />
    <link rel="stylesheet" href="../css/vendors/normalize.css" />
    <link rel="stylesheet" href="../css/vendors/owl.carousel.min.css" />
    <link rel="stylesheet" href="../css/vendors/owl.theme.default.min.css" />
    <link rel="stylesheet" href="../css/style.css" />
    <script src="../js/vendors/jquery-3.6.0.min.js"></script>
  </head>

  <body>
    <!-- navbar start -->
    <nav>
      <div class="container nav">
        <div class="nav-logo">
          <a href="../index.html">
            <img src="../images/logobookstore.svg" alt="logo png" />
          </a>
        </div>

        <div class="nav-links">
          <a href="#">الأقسام</a>
          <a href="books.html">الكتب</a>
          <a href="authors.html">المؤلفين</a>
          <a href="quotes.html">الاقتباسات</a>
          <a href="add.html">إضافة كتاب</a>
          <!-- <a href="#"><i class="fas fa-search search-icon"></i></a> -->
        </div>

        <div class="nav-log">
          <a href="#"
            >دخول
            <i class="fas fa-user-alt"></i>
          </a>
          <i class="fas fa-bars nav-bars"></i>
        </div>
      </div>
    </nav>
    <!-- navbar end -->

    <!-- All books section start -->
    <div class="books-sec">
      <div class="container">
        <form action="" class="search-pages-box">
          <input
            id="bookFilter"
            type="text"
            placeholder="بحث عن كتاب أو قسم أو مؤلف أو سلسلة كتب"
            autocomplete="off"
          />
        </form>
        <div class="books" id="pg-authors"></div>
      </div>
      <div class="btn" id="showMore">
        <a href="#">عرض المزيد</a>
      </div>
    </div>
    <!-- All books section end -->

    <!-- footer start -->
    <footer>
      <div class="container footer">
        <div class="footer-links">
          <h5>روابط تهمك</h5>
          <div>
            <a href="#">حقوق النشر</a>
            <a href="#">سياسة الخصوصية</a>
            <a href="#">شروط وأحكام الاستخدام</a>
            <a href="#">الإبلاغ عن مشكلة</a>
            <a href="#">أتصل بنا</a>
          </div>
        </div>
        <div class="footer-tags">
          <h5>أهم التصنيفات</h5>
          <div>
            <span>كتب اسلامية</span>
            <span>كتب تاريخ</span>
            <span>سير وتراجم</span>
            <span>علوم القرآن</span>
            <span>اللغة العربية</span>
            <span>الفلسفة والمنطق</span>
            <span>روايات</span>
            <span>علم نفس</span>
            <span>أدب انجليزي</span>
            <span>تنمية بشرية</span>
          </div>
        </div>
        <div class="footer-social">
          <h5>تواصل معنا</h5>
          <div class="links">
            <a href="#">Youtube</a>
            <a href="#">Facebook</a>
            <a href="#">Twitter</a>
            <a href="#">Instagram</a>
            <a href="#">RSS</a>
            <a href="#">support@name.com</a>
          </div>
        </div>
      </div>
    </footer>
    <!-- footer end -->

    <script>
      // search books page
      // let inputBox = document.getElementById("bookFilter")
      // let booksBlock = document.querySelectorAll(".book");
      // let bookTitle = document.querySelectorAll(".book-title a");
      // let bookAuthors = document.querySelectorAll(".book-author");
      // inputBox.addEventListener("keyup", function () {
      //     for (i = 0; i < booksBlock.length; i++){
      //         bookTitle[i].innerHTML.toLowerCase().indexOf(inputBox.value.toLowerCase()) > -1 || bookAuthors[i].innerHTML.toLowerCase().indexOf(inputBox.value.toLowerCase()) > -1 ? booksBlock[i].style.display = "block": booksBlock[i].style.display = "none";
      //     }
      //  })

      // auhtors search event
      let inputBox = document.getElementById("bookFilter");

      inputBox.addEventListener("keyup", function () {
        for (
          i = 0;
          i < document.querySelectorAll(".author-block").length;
          i++
        ) {
          document
            .querySelectorAll(".author-name")
            [i].innerHTML.toLocaleLowerCase()
            .indexOf(inputBox.value.toLocaleLowerCase()) > -1
            ? (document.querySelectorAll(".author-block")[i].style.display =
                "flex")
            : (document.querySelectorAll(".author-block")[i].style.display =
                "none");
        }
      });

      // authors pages
      let authorsImges = [
        "../images/authors/Abdullah.jpg",
        "../images/authors/Ahmed.jpg",
        "../images/authors/Aref.jpg",
        "../images/authors/author (2).jpg",
        "../images/authors/author (3).jpg",
        "../images/authors/author (4).jpg",
        "../images/authors/author (5).jpg",
        "../images/authors/author (6).jpg",
        "../images/authors/author (7).jpg",
        "../images/authors/author (8).jpg",
        "../images/authors/author (9).jpg",
        "../images/authors/author (10).jpg",
        "../images/authors/author (11).jpg",
        "../images/authors/author (12).jpg",
        "../images/authors/author (13).jpg",
        "../images/authors/author (14).jpg",
        "../images/authors/author (15).jpg",
        "../images/authors/author (16).jpg",
        "../images/authors/author (17).jpg",
        "../images/authors/author (18).jpg",
        "../images/authors/author (19).jpg",
        "../images/authors/author (20).jpg",
        "../images/authors/author (21).jpg",
        "../images/authors/author (22).jpg",
        "../images/authors/author (23).jpg",
        "../images/authors/author (24).jpg",
        "../images/authors/author (25).jpg",
        "../images/authors/Mohamed.jpg",
        "../images/authors/Salman.jpg",
        "../images/authors/Sami.jpg",
      ];
      let authorsNames = [
        "عبدالله العجيري",
        "احمد يوسف السيد",
        "عارف حجاوي",
        "سلطان العميري",
        "سامي عامري",
        "فهد العجلان",
        "عبدالله الوهيبي",
        "وليد الهويريني",
        "عبدالله القرشي",
        "عبدالوهاب الطريري",
        "عبدالله الداوود",
        "موسى العازمي",
        "ماهر القرشي",
        "علي العمران",
        "محمد المهنا",
        "علي العمري",
        "سلمان العودة",
        "علي الفيفي",
        "داود العبيدي",
        "جعفر ادريس",
        "احمد ياسين",
        "عبدالرحمن رأفت الباشا",
        "عمرو المقبل",
        "فاضل السامرائي",
        "عبدالكريم بكار",
        "فريد الانصاري",
        "عارف حجاوي",
        "محمد علي يوسف",
        "سلمان العودة",
        "سامي عامري",
      ];
      let authorsTags = [
        "داعية",
        "باحث",
        "روائي",
        "مترجم",
        "أديب",
        "اقصتادي",
        "أجتماعي",
        "سياسي",
        "اعلامي",
        "داعية",
        "باحث",
        "روائي",
        "مترجم",
        "أديب",
        "اقصتادي",
        "أجتماعي",
        "سياسي",
        "اعلامي",
        "داعية",
        "باحث",
        "روائي",
        "مترجم",
        "أديب",
        "اقصتادي",
        "أجتماعي",
        "سياسي",
        "اعلامي",
        "داعية",
        "باحث",
        "روائي",
        "اعلامي",
      ];
      for (let i = 0; i < authorsImges.length; i++) {
        document.getElementById("pg-authors").innerHTML += `
        <div class="author-block">
    <div class="img">
    <img src="${authorsImges[i]}" alt="${authorsNames[i]}"></div>
    <div class="text">
        <h4 class="author-name">
            <i class="fas fa-user"></i>
            ${authorsNames[i]}</h4>
        <div class="author-books">
            <i class="fas fa-book"></i>
            عدد المؤلفات: ${i + 3}</div>
        <div class="author-tag">
            <i class="fas fa-hashtag"></i>
            ${authorsTags[i]}</div>
    </div>
    </div>`;
      }
      document.querySelector(".nav-bars").onclick = function () {
        document.querySelector(".nav-links").classList.toggle("show");
        this.classList.toggle("fa-times");
      };
    </script>
    <script src="../js/main.js"></script>
  </body>
</html>