<!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 soutes section start -->
    <div class="page-wrapper">
      <!-- sections  aside start -->
      <aside class="authors-list">
        <h4>
          <i class="fas fa-users"></i>
          المؤلفين
        </h4>
        <ul></ul>
      </aside>
      <div class="books-sec qoutes-sec">
        <div class="container">
          <form action="" class="search-pages-box">
            <input
              id="bookFilter"
              type="text"
              placeholder="بحث عن كتاب أو قسم أو مؤلف أو سلسلة كتب"
              autocomplete="off"
            />
          </form>
          <div class="books" id="pg-quotes"></div>
        </div>
        <div class="btn" id="showMore">
          <a href="#">عرض المزيد</a>
        </div>
      </div>
      <!-- All quotes section end -->

      <!-- authors names aside start -->
      <aside class="sections-list">
        <h4>
          <i class="fas fa-users"></i>
          المؤلفين
        </h4>
        <ul></ul>
      </aside>
    </div>
    <!-- authors names aside 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>
      // auhtors search event
      let inputBox = document.getElementById("bookFilter");

      inputBox.addEventListener("keyup", function () {
        for (i = 0; i < document.querySelectorAll(".quote").length; i++) {
          document
            .querySelectorAll(".quote-text span")
            [i].innerHTML.toLocaleLowerCase()
            .indexOf(inputBox.value.toLocaleLowerCase()) > -1 ||
          document
            .querySelectorAll(".quote-writer")
            [i].innerHTML.toLocaleLowerCase()
            .indexOf(inputBox.value.toLocaleLowerCase()) > -1
            ? (document.querySelectorAll(".quote")[i].style.display = "flex")
            : (document.querySelectorAll(".quote")[i].style.display = "none");
        }
      });

      // authors pages
      let quotes = [
        "أن يتمّ إسقاطُك في الحياة هو أمرٌ خارج نِطاقك، الاستيقاظ والتحرُّك للأمام هو خيارك.",
        "لو كان بوسع المرء أن يغرس خنجراً في مخه ليقتطع الجزء الذي يحمل ذكريات معينة، لغدت الحياة جنة.",
        "لو تستطيع أن تُحب شخص ما بكُل جوارحك، حتى لو كان شخص واحد فقط، فُهناك فُرصة للنجاة في هذه الحياة.",
        "لا يمكنك تهدئة العاصفة، لذلك توقف عن المُحاولة، ما يمكنك القيام به هو تهدِئة نفسك، سوف تمر العاصفة.",
        "عِش الحياة يومًا بعد يوم وكن ممتناً للأشياء الصَّغيرة، لا تتوتر حول ما لا يُمكنك التحكُّم به.",
        "أصعب المشي هو المشي مُنفرداً، ولكنه أيضاً المشي الذي يجعلك الأقوى",
        "غرّد النص عبر تويتر أصعب المشي هو المشي مُنفرداً، ولكنه أيضاً المشي الذي يجعلك الأقوى.",
        "أعظم النعم في الحياة راحة البال، إن شعرت بها فأنت تملك كل شيئ.",
        "تحْتَ كُلِّ حجرةٍ من حجارةِ الألَم فِي هذِه الحيَاة تُوجَد فُرصَة للتّقرب إلى الله.",
        "في بعض الأحيان تحتاج إلى أخذ استراحة من الجميع وقضاء بعض الوقت وحدك لتجربة وتقدير وحب نفسك.",
        "العقل السِّلبي لن يعطيك حياةً إيجابية.",
        "لا تغرق السُّفن بسببِ المياه المُحيطة بها، تغرق السُّفن بسببِ المياه التي تدخُل إليها، لا تدع ما يحدث من حولك يدخل إلى داخلك ويُثقل كاهلك.",
        "الحياةُ مثل رُكوب الدراجة، لتُحافظ علي توازُنك يجب أن تواصل التحرُّك.",
        "كلّما تقدَّمت في السّن، كلّما أدركت أنه لا يوجد لدى أيّ شخص فكرة عما يفعله وأن الجميع يتظاهرُون.",
        "الأحلام هي طريق الإنسان في هذه الحياغرّد النص عبر تويتر الأحلام هي طريق الإنسان في هذه الحياة.",
        "تكتمل حياتنا بأشياء وتنقص بأخرى، ليست مسألة حظ ، إنما هي أقدار يعطي اللّه لكل ذي حقٍ حقه، فالحمد لله دائماً وأبد.",
        "دائماً في الغيب شيء جميل ينتظرنا يستحق الصبر.",
        "لا وقت أفضل كي تكون سعيداً أكثر من الآن.",
        "تسامحوا، فمصير الأجساد هو التراب، وتبقى المواقف ولا تبقى الوجوه.",
        "الإبتلاء في الحياة، ليس اختباراً لقوتك الذاتية إنما اختبار لقوة استعانتك بالله.",
        "كل شيء قابل للتغيير في هذه الحياة، حتى الشيء الذي تستثنيه دائماً.",
        "القناعة أهم أسباب السعادة، لأنها تجعلك ترى الحياة جميلة.",
        "علّمتني الحياة أن أصدّق نصيحة أندريه مالرو(لا تُهيّء أفراحك) فالخيبات الكبرى تأتي دائماً على سجاد فاخر فرشناه لاستقبال السعادة.",
        "لولا القلوب الطيبة، لكانت الحياة قاسية لا تطاق غرّد النص عبر تويتر لولا القلوب الطيبة، لكانت الحياة قاسية لا تطاق.",
        "ليعرف الأحياء قيمة الحياة بشكل أكبر، لا بد لأحدهم أن يموت.",
        "قل للذي مَلأ التشاؤمُ قلبَه، ومضى يُضيِّقُ حولنا الآفاق، سرُّ السعادةِ حسنُ ظنك بالذي خلق الحياةَ وقسَّم الأرزاق.",
        "إن الحمقى وحدهم يجدون الحياة بسيطة.",
      ];
      for (let i = 0; i < quotes.length; i++) {
        document.getElementById("pg-quotes").innerHTML += `
              <div class=" quote">
                  <i class="fa fa-quote-right qr" aria-hidden="true"></i>
                  <div class="quote-text">
                    <i class="fa fa-quote-right" aria-hidden="true"></i>
                    <span>${quotes[i]}</span
                    >
                    <i class="fa fa-quote-left" aria-hidden="true"></i>
                  </div>
                  <div class="quote-writer">مصدر رقم ${i + 1}</div>

                  <i class="fa fa-quote-left ql" aria-hidden="true"></i>
                </div>`;
      }

      //   aside authors list
      let authorsNames = [
        "عبدالله العجيري",
        "احمد يوسف السيد",
        "عارف حجاوي",
        "سلطان العميري",
        "سامي عامري",
        "فهد العجلان",
        "عبدالله الوهيبي",
        "وليد الهويريني",
        "عبدالله القرشي",
        "عبدالوهاب الطريري",
        "عبدالله الداوود",
        "موسى العازمي",
        "ماهر القرشي",
        "علي العمران",
        "محمد المهنا",
        "علي العمري",
        "سلمان العودة",
        "علي الفيفي",
        "داود العبيدي",
        "جعفر ادريس",
        "احمد ياسين",
        "عبدالرحمن رأفت الباشا",
        "عمرو المقبل",
        "فاضل السامرائي",
        "عبدالكريم بكار",
        "فريد الانصاري",
        "عارف حجاوي",
        "محمد علي يوسف",
        "سلمان العودة",
        "سامي عامري",
      ];
      let authList = document.querySelector(".authors-list ul");
      for (let i = 0; i < authorsNames.length; i++) {
        authList.innerHTML += `
                <li><i class="fas fa-angle-left"></i><a href="#">${authorsNames[i]}</a></li>
                `;
      }

      let sectionsNames = [
        "روايات عربية",
        "نصوص",
        "الأدب الساخر",
        "أمثال وحكم",
        "قصص عربية",
        "دواوين الشعر",
        "نثر",
        "رسائل",
        "نقد أدبي",
        "دراسات أدبية",
        "مختارات أدبية",
        "مقالات أدبية",
        "روايات رومانسية",
        "روايات رعب",
        "كتب أدبية",
        "مسرحيات عربية",
        "روايات خيالية",
        "تاريخ الأدب",
        "خواطر",
        "فكر وثقافة",
        "روايات مترجمة",
        "أدب مترجم",
        "شعر مترجم",
        "قصص مترجمة",
        "ابيوغرافيا ومذكرت",
        "نصوص مترجمة",
        "مسرحيات",
        "رسائل مترجمة",
        "روايات رومانسية مترجمة",
        "روايات رعب مترجمة",
        "روايات خيال علمي",
        "دراسات أدبية مترجمة",
        "علم القانون",
        "القضاء",
        "قانون إداري",
        "قانون مدني",
        "قانون سياسي",
        "قانون تجاري",
        "علوم اللغة العربية",
        "دراسات في الترجمة",
        "لسانيات",
        "دراسات لغوية",
        "النحو والصرف",
        "الأمراض والأوبئة",
        "التغذية",
        "العلاج",
      ];

      let secList = document.querySelector(".sections-list ul");
      for (let i = 0; i < sectionsNames.length; i++) {
        secList.innerHTML += `
                <li><i class="fas fa-angle-left"></i><a href="#">${sectionsNames[i]}</a></li>
                `;
      }

      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>