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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>purchase page 🗽 </title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            margin: 0;
            padding: 0;
            font-family: sans-serif;
            display: flex;
            flex-direction: column;
            min-height: 100vh;
        }

        .navbar {
        
            display: flex;
            position: sticky;
            align-items: center;
            justify-content: space-between;
            top:9px;
            background: linear-gradient(to right, #ff6699, #ffcc66); 
            background-blend-mode: darken;
            background-size: cover;
            color: white;
            padding: 10px 20px;
        }

        .nav-list {
            display: flex;
            list-style: none;
        }

        .nav-list li {
          
            
            margin-right: 20px;
        }

        .nav-list li a {
           
         
      
           font-size: 18px;
           transition: color 0.3s ease-in-out;
           text-decoration: none;
            color: white;
            padding: 10px;
            border-radius: 5px;
            transition: background 0.3s;
 
        }

        .nav-list li a:hover {
            color: #ffd700;
            background: rgba(255, 255, 255, 0.2);
        }

        .dropdown{
   position: relative;

        }
        .dropdown-content {
    display: none;
    position: absolute;
    right: 0; 
    background-color: rgba(255, 255, 255, 0.95); 
    z-index: 1;
    border-radius: 10px; 
    padding: 10px; 
    margin-top: 5px; 
    width: 300px; 
    column-count: 2; 
    column-gap: 15px;
}

        .dropdown-content ul {
            list-style-type: none;
            padding: 0;
            margin: 0;
        }

        .dropdown-content li {
            margin: 5px 0; 
        }

        .dropdown-content li a {
            display: block; 
            color: black;
            padding: 10px; 
            border-radius: 5px; 
            transition: background 0.3s;
            text-align: center; 
        }

        .dropdown-content li a:hover {
            background: rgba(0, 0, 0, 0.1); 
            color: red;
        }

        .dropdown:hover .dropdown-content {
            display: block; 
        }


        .header {
            background-color: #fff;
            padding: 20px;
            display: flex;
            align-items: center;
         
          
        }
       .logo img {
           width: 150px;
            height: 150px;
            border-radius: 50%;
            overflow: hidden;
            margin-right: 30px;
     
         }

        .content {
            padding: 30px;
            flex-grow: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .content h3{
            border:2px solid #008080;
           padding: 20px ;
           border-radius: 50px;
        }

        .h {
            background-color: #f0f0f0;
            padding: 20px;
            text-align: center;
        }
        
        
        h1 {
            color: #ffcc66;
            text-shadow: 0 0 5px rgba(255, 255, 255, 0.8);
            margin-bottom: 20px;
        }

        #books-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
        }

        .book {
            width: 200px;
            margin: 20px;
            padding: 20px;
            border: 1px solid #ddd;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            background-color: rgba(172, 255, 47, 0.336);
        }

        .book img {
            width: 100%;
            height: 150px;
            object-fit: contain;
            border-radius: 5px 5px 0 0;
            transition: transform 0.3s;
        }

        .book img:hover {
            transform: scale(1.1);
        }

        .accordion {
            width: 100%;
            max-width: 600px;
            margin: 20px 0;
        }

        .accordion-item {
            background: #fff;
            border: 1px solid #ddd;
            border-radius: 5px;
            margin-bottom: 10px;
            overflow: hidden;
        }

        .accordion-title {
            padding: 15px;
            cursor: pointer;
            font-size: 18px;
            color:black;
            transition: background 0.3s;
        }

        .accordion-content {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease;
            padding: 0 15px;
            background: #f9f9f9;
        }

        .accordion-content p {
            padding: 15px 0;
            margin: 0;
        }

        .footer {
            background-color: #fff;
            padding: 20px;
            text-align: center;
        }

        #search-input {
            padding: 8px;
            font-size: 16px;
            border: 2px solid #fff;
            border-radius: 5px;
        }

        #search-button { 
        background-color: #ffd700;
            color: #000;
            border: none;
            padding: 8px 12px;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s ease-in-out;
        }

        #search-button:hover {
            background-color: #000;
            /* Change the background color on hover */
            color: #ffd700;
        }
        
    #books-section {
      background-color: #f7f7f7;
      padding: 20px;
      border: 1px solid #ddd;
      border-radius: 5px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }
    
    #books-section h2 {
      font-size: 24px;
      margin-top: 0;
    }
    /**/
        main{
          background: linear-gradient(to bottom, #ff6699, #ffcc66); 
        }
       
        
        .payment-section {
            background: #fff; 
            padding: 20px; 
            box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.2); 
            border-radius: 8px; 
        

        }

        .payment-section h2 {
            border-right: 5px dotted red;
            margin-bottom: 20px; 
            margin-left: 90vh;
            color: #ff69b4;
        }

        .payment-section button {
            padding: 10px 20px; 
            margin-right: 10px; 
            border: none; 
            background-color: #007bff; 
            color: white; 
            cursor: pointer; 
            border-radius: 5px; 
           margin-left: 50vh
            
        }

        .payment-section button:hover {
            background-color: #0056b3; 
        }

        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;300;400;500;600&display=swap');

.container {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: 100vh;
    padding: 20px;
    gap: 40px; /* المسافة بين النماذج */
}

form {
    width: 100%;
    max-width: 700px; /* عرض النموذج */
    padding: 15px; /* تقليل الحشوة */
    background: #fff;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    transition: transform 0.3s;
}

form + form {
    border-left: 2px solid #e53e3e; /* الخط الأفقي بين النماذج */
    padding-left: 40px; /* المسافة بين الخط والنموذج الثاني */
}

.row {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.col {
    flex: 1 1 250px;
    min-width: 300px;
}

.title {
    font-size: 24px;
    color: #e53e3e;
    margin-bottom: 20px;
    border-bottom: 2px solid #e53e3e;
    padding-bottom: 5px;
}

.inputBox {
    margin-bottom: 20px;
}

.inputBox label {
    margin-bottom: 8px;
    display: block;
    font-weight: 500;
}

.inputBox input,
.inputBox select {
    width: 100%;
    border: 1px solid #ccc;
    padding: 12px;
    font-size: 16px;
    border-radius: 4px;
    transition: border-color 0.3s;
}

.inputBox input:focus,
.inputBox select:focus {
    border-color: #3182ce;
    box-shadow: 0 0 5px rgba(49, 130, 206, 0.5);
}

.submit_btn {
    width: 100%;
    padding: 14px;
    font-size: 18px;
    background: #2b6cb0;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.3s, transform 0.2s;
}

.submit_btn:hover {
    background: #2c5282;
    transform: translateY(-1px);
}

@media (max-width: 768px) {
    .row {
        flex-direction: column;
    }
}
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;300;400;500;600&display=swap');

* {
   
    box-sizing: border-box;
  
}



.container {
    background: url(./1/buyer/bg.jpg);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: 100vh;
    padding: 20px;
    margin-top: 20px; /* إرجاع النموذج للأعلى */
}

form {
    width: 100%;
    max-width: 700px; /* عرض النموذج */
    padding: 15px; /* تقليل الحشوة */
    background: #fff;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    transition: transform 0.3s;
}

form:hover {
    transform: scale(1.02);
}

.row {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.col {
    flex: 1 1 250px;
    min-width: 300px;
}

.title {
    font-size: 24px;
    color: #e53e3e;
    margin-bottom: 15px; /* تقليل الهامش السفلي */
    border-bottom: 2px solid #e53e3e;
    padding-bottom: 5px;
}

.inputBox {
    margin-bottom: 15px; /* تقليل الهامش */
}

.inputBox label {
    margin-bottom: 5px; /* تقليل الهامش */
    display: block;
    font-weight: 500;
}

.inputBox input,
.inputBox select {
    width: 100%;
    border: 1px solid #ccc;
    padding: 10px; /* تقليل الحشوة */
    font-size: 16px;
    border-radius: 4px;
    transition: border-color 0.3s;
}

.inputBox input:focus,
.inputBox select:focus {
    border-color: #3182ce;
    box-shadow: 0 0 5px rgba(49, 130, 206, 0.5);
}

.flex {
    display: flex;
    gap: 20px;
}

.submit_btn {
    width: 100%;
    padding: 12px; /* تقليل الحشوة */
    font-size: 18px;
    background: #2b6cb0;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.3s, transform 0.2s;
}

.submit_btn:hover {
    background: #2c5282;
    transform: translateY(-1px);
}

.inputBox img {
    max-width: 60%; /* تقليل حجم الصورة */
    margin-top: 10px;
    border-radius: 4px;
}

@media (max-width: 768px) {
    .row {
        flex-direction: column;
    }
}

.inputBoxxx .ra {
            border-left: 3px solid red; /* إضافة border-left */
            padding-left: 10px; /* إضافة مسافة داخلية */
        }

        .payment-accounts {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }

        .payment-accounts div {
            flex: 1;
        }
        .mor {
         list-style: none;
     
         background-color: transparent;
        
         text-align:center;
      
    
        }
        .mor a{
            text-decoration: none;
             font-size: 30px;
           
             border:2px solid #008080;
             padding:  5px 30px ;
             border-radius: 50px;
            
            
        }
        
        .mor a:hover{
           
            border:3px solid #008080;
          
             
        }
        

    </style>
</head>

<body>
    <nav class="navbar">
        <ul class="nav-list">
            <li><a href="login.html">تسجيل الخروج </a></li>
            <li><a href="contact.html">للتواصل</a></li>
            <li><a href="sell.html">بيع</a></li>
            <li><a href="buyer.html">🛒</a></li>
            <li class="dropdown">
                <a href="#" class="dropbtn">الكتب</a>
                <div class="dropdown-content">
                    <ul>
                    
                        <li><a href="rw2.html">مدرسية</a></li>
                        <li><a href="علمية.html">علمية</a></li>
                        <li><a href="other.html">أخرى</a></li>
                        <li><a href="علمية.html">الكترونية</a></li>
                        <li><a href="علمية.html">دينية</a></li>
                        <li><a href="علمية.html">الفلسفية</a></li>
                    </ul>
                </div>
            </li>
            <li><a href="about.html"> عننا</a></li>
            <li><a href="home.html">الرئيسيه</a></li>
        </ul>
        <div class="rightNav">
            <input type="text" id="search-input" placeholder="ابحث عن كتاب">
            <button id="search-button">بحث</button>
        </div>
    </nav>
    <header class="header">
        <div class="logo">
            <img src="./1/school/feem_5dc1479c8482e_IMG-20250327-WA0032.jpg"  >
       
        </div>
        <h1>Welcome to Our 🛒</h1>
    </header>
    <div class="h">
        <h1>Books</h1>
    </div>

    <section id="books-section">
        <div id="books-container"></div>
    </section>
    
    <main class="content">
        <h3> سياسه الخصوصيه </h3>
        <div class="accordion">
            <div class="accordion-item">
                <div class="accordion-title">  ✊ الدفع نقدا عند الاستلام  </div>
                <div class="accordion-content">
                    <p>  خيار الدفع نقدا عند الاستلام يسمح لك بالدفع نقدا علي عتبة منزلك فور استلام الطلب .وهو متوفر كطريقه دفع للمنتجات 
                      المشحونه من قبل ادراك وبعض المنتجات المشحونه من قبل البائع .لن يكون الدفع النقدي عند الاستلام متاحا لديك كطريقة دفع 
                      اذا كان لديك شرط واحد علي الاقل لايتوافق مع اهليه الدفع نقدا عند الاستلام.
                    </p>
                </div>
            </div>
            <div class="accordion-item">
                <div class="accordion-title"> 15 يوم للارجاع</div>
                <div class="accordion-content">
                    <p> مدة الارجاع 15 يوم بعد التوصيل.</p>
                    <p> سبب الارجاع :سلعه خاطئه و مفقوده معيبه ضرر مادي اسباب اخري</p>
                    <p> سياسة الارجاع : استرداد المبلغ بالكامل او التبديل</p>
                </div>
            </div>
            <div class="accordion-item">
                <div class="accordion-title"> 🚛 توصيل مجاني </div>
                <div class="accordion-content">
                    <p>توصيل مجاني على الطلبات فوق مبلغ معين.</p>
                </div>
            </div>
            <div class="accordion-item">
                <div class="accordion-title"> 🛒تشحن من ادراك </div>
                <div class="accordion-content">
                    <p>تريد ادراك عملية تسليم هذا المنتج تتوفر خاصية تتبع تسليم الطلب الي عتبة المنزل.</p>
                </div>
            </div>
            <div class="accordion-item">
                <div class="accordion-title"> ✔معاملتك آمنة </div>
                <div class="accordion-content">
                    <p>نحن نعمل بجد لحماية أمنك وخصوصيتك يقوم نظام امان الدفع لدينا بتشفير معلوماتك اثنناء نقلها .نحن لا نشارك تفاصيل بطاقة الائتمان الخاصة بك مع البائعين 
                      الخارجيين ولا نبيع معلوماتك للأخرين.</p>
                </div>
            </div>
           
            <li class="mor"><a href="./s.html">اكثر</a></li>

        </div>
        

    </main>


    <div class="container">
        <form id="order-summary-form">
            <h3 class="title">Order Summary</h3>
            <div class="row">
                <div class="col">
                    <h4 class="title">Book Information</h4>
                    <img src="./1/buyer/assets_12cbceb6be9648e2a8a23b8c10684f0b_e0079f42ff1f47adb80d6c794781f913.webp" alt="credit/debit card image" height="80vh">
                    
                    <div class="inputBox">
                        <label for="bookName">Book Name:</label>
                        <input type="text" id="bookName" placeholder="Enter book name" required>
                    </div>
    
                    <div class="inputBox">
                        <label for="author">Author:</label>
                        <input type="text" id="author" placeholder="Enter author's name" required>
                    </div>
    
                    <div class="inputBox">
                        <label for="quantity">Quantity:</label>
                        <input type="number" id="quantity" placeholder="Enter quantity" required min="1">
                    </div>
                    
                    <div class="inputBox">
                        <label for="bookQuality">Book Quality:</label>
                        <select id="bookQuality" name="bookQuality" required>
                            <option value="new">New</option>
                            <option value="vintage">Vintage</option>
                        </select>
                       
                    </div>
                    
    
                    <div class="inputBox">
                        <label for="category">Category:</label>
                        <input type="text" id="category" name="category" placeholder="Enter category name" required>

                    </div>
                    
                    <div class="inputBox">
                        <label for="paymentLanguage">Book Language:</label>
                        <input type="text" id="paymentLanguage" placeholder="Enter book Language" required>
                    </div>
                </div>
    
                <div class="col">
                    <h4 class="title">Customer Information</h4>
                    <img src="./1/buyer/IMG-20250209-WA0000.jpg" alt="customer info image" height="80vh">
                    
                    <div class="inputBox">
                        <label for="name">Full Name:</label>
                        <input type="text" id="name" placeholder="Enter your full name" required>
                    </div>
    
                    <div class="inputBox">
                        <label for="email">Email:</label>
                        <input type="email" id="email" placeholder="Enter email address" required>
                    </div>
                    
                    <div class="inputBox">
                        <label for="number">Phone Number:</label>
                        <input type="text" id="number" placeholder="Enter your number" required>
                    </div>
    
                    <div class="inputBox">
                        <label for="address">Address:</label>
                        <input type="text" id="address" placeholder="Enter address" required>
                    </div>
    
                    <div class="inputBox">
                        <label for="city">City:</label>
                        <input type="text" id="city" placeholder="Enter city" required>
                    </div>
    
                    <div class="inputBox">
                        <label for="zip">Zip Code:</label>
                        <input type="text" id="zip" placeholder="123 456" required>
                    </div>
                </div>
            </div>
    
            <button type="submit" class="submit_btn">Confirm Order</button>
        </form>
    
        <form id="payment-form">
            <h3 class="title">Order Payment</h3>
            <div class="row">
                <div class="col">
                    <h3 class="title">Payment Information</h3>
                    <img src="./1/buyer/assets_12cbceb6be9648e2a8a23b8c10684f0b_e0079f42ff1f47adb80d6c794781f913.webp" alt="payment image" height="60vh">
                    
                    <div class="inputBox">
                        <label for="paymentBookName">Book Name:</label>
                        <input type="text" id="paymentBookName" placeholder="Enter book name" required>
                    </div>
        
                    <div class="inputBox">
                        <label for="paymentAuthor">Author:</label>
                        <input type="text" id="paymentAuthor" placeholder="Enter author's name" required>
                    </div>
        
                    <div class="inputBox">
                        <label for="paymentQuantity">Quantity:</label>
                        <input type="number" id="paymentQuantity" placeholder="Enter quantity"  required min="1">
                    </div>
        
                    <div class="inputBox">
                        <label for="paymentQuality">Book Quality:</label>
                        <input type="text" id="paymentQuality" placeholder="Enter book quality" required>
                    </div>
        
                    <div class="inputBox">
                        <label for="paymentCategory">Book Category:</label>
                        <input type="text" id="paymentCategory" placeholder="Enter book Category" required>
                    </div>
                    
        
                    <div class="inputBox">
                        <label for="paymentLanguage">Book Language:</label>
                        <input type="text" id="paymentLanguage" placeholder="Enter book Language" required>
                    </div>
        
                    <div class="inputBox">
                        <label for="currency">Currency:</label>
                        <select id="currency" required>
                            <option value="usd">US Dollar</option>
                            <option value="sdg">Sudanese Pound</option>
                        </select>
                    </div>
                </div>
                
    
                <div class="col">
                    <h3 class="title">Billing Address</h3>
                    <img src="./1/buyer/IMG-20250209-WA0000.jpg" alt="credit/debit card image" height="60vh">
                    
                    <div class="inputBox">
                        <label for="name">Full Name:</label>
                        <input type="text" id="name" placeholder="Enter your full name" required>
                    </div>
    
                    <div class="inputBox">
                        <label for="email">Email:</label>
                        <input type="email" id="email" placeholder="Enter email address" required>
                    </div>

                    <div class="inputBox">
                        <label for="number">Phone Number:</label>
                        <input type="text" id="number" placeholder="Enter your number" required>
                    </div>
                    <div class="inputBox">
                        <label for="address">Address:</label>
                        <input type="text" id="address" placeholder="Enter address" required>
                    </div>
    
                    <div class="inputBox">
                        <label for="city">City:</label>
                        <input type="text" id="city" placeholder="Enter city" required>
                    </div>
    
                    <div class="flex">
                        <div class="inputBox">
                            <label for="state">State:</label>
                            <input type="text" id="state" placeholder="Enter state" required>
                        </div>
    
                        <div class="inputBox">
                            <label for="zip">Zip Code:</label>
                            <input type="text" id="zip" placeholder="123 456" required>
                        </div>
                    </div>
                </div>
    
                <div class="col">
                    <h3 class="title">Payment</h3>
    
                    <div class="payment-accounts">
                        <div class="inputBoxxx">
                            <img src="./1/buyer/a45834997dcd4a0c032c542bc4750c2b.jpg" alt="credit/debit card image" height="80px">
                            <br>
                            <label for="accountNum" class="ra">Account Book Number:</label>
                            <h2>0127194084</h2>
                        </div>
                        <div class="inputBoxxx">
                            <img src="./1/buyer/FB_IMG_17388341177309072.jpg" alt="credit/debit card image" height="80px">
                            <br>
                            <label for="accountNum" class="ra">Account Cash Number:</label>
                            <h2>0127194084</h2>
                        </div>
                    </div>
    
                    <div class="flex">
                        <div class="inputBox">
                            <label for="expMonth">Exp Month:</label>
                            <select id="expMonth" name="expMonth" required>
                                <option value="">Choose month</option>
                                <option value="01">January</option>
                                <option value="02">February</option>
                                <option value="03">March</option>
                                <option value="04">April</option>
                                <option value="05">May</option>
                                <option value="06">June</option>
                                <option value="07">July</option>
                                <option value="08">August</option>
                                <option value="09">September</option>
                                <option value="10">October</option>
                                <option value="11">November</option>
                                <option value="12">December</option>
                            </select>
                        </div>
    
                        <div class="inputBox">
                            <label for="expYear">Exp Year:</label>
                            <select id="expYear" name="expYear" required>
                                <option value="2025">2025</option>
                            </select>
                        </div>
    
                        <div class="inputBox">
                            <label for="expToday">Exp Today:</label>
                            <select id="expToday" name="expToday" required>
                                <option value="">Choose Today</option>
                                <option value="1">1</option>
                                <option value="2">2</option>
                                <option value="3">3</option>
                                <option value="4">4</option>
                                <option value="5">5</option>
                                <option value="6">6</option>
                                <option value="7">7</option>
                                <option value="8">8</option>
                                <option value="9">9</option>
                                <option value="10">10</option>
                                <option value="11">11</option>
                                <option value="12">12</option>
                            </select>
                        </div>
                    </div>
    
                    <div class="inputBox">
                        <label for="paymentImage">Attach Payment Image (Optional):</label>
                        <input type="file" id="paymentImage" name="paymentImage" accept="image/*">
                    </div>
                </div>            <!-- باقي الفورم -->
            </div>
            <button type="submit" class="submit_btn">Proceed to Checkout</button>
        </form>
         </div>
    </div>

    <footer class="footer">
        <p>&copy; 2025 [ادراك] جميع الحقوق محفوظة.✔ في</p>
    </footer>

    <script>
        document.addEventListener("DOMContentLoaded", function () {
            const titles = document.querySelectorAll('.accordion-title');
            titles.forEach(title => {
                title.addEventListener('click', function () {
                    const content = this.nextElementSibling;
                    const isOpen = content.style.maxHeight;

            
                    document.querySelectorAll('.accordion-content').forEach(item => {
                        item.style.maxHeight = null;
                    });

                    if (!isOpen) {
                        content.style.maxHeight = content.scrollHeight + "px";
                    }
                });
            });
        });
</script>
  
<script>
    function loadIframe(page) {
     
        document.getElementById('content').src = page; 
    }
</script>
    <script>
        const books = [
            { title: "It Starts With One", author: "Jason Lipshutz", price: 30.00, quantity: 5, image: "./1/other/فن/1.jpg", category: "أخري", language: "Englsh", condition: "غلاف ورقي",details: " <del> $5.00 <del> "},
            { title: "Twisted", author: "Mclntire", price: 7.49, quantity: 5, image: "./1/other/فن/4.webp", category: "أخري", language: "Englsh",condition: "غلاف ورقي", details: " <del> $5.00 <del> "},
            { title: "المكتبات الالكترونية والرقمية", author: "ربحي مصطفي عليان", price: 60, quantity: 5, image: "./2/الكترونية/990051bc88de9ef6f66cc33e7c991960.png.webp",category: "أخري", language: "Englsh",condition: "غلاف ورقي", details: " <del> $5.00 <del> " },
  
        ];

        const searchInput = document.getElementById("search-input");
        const searchButton = document.getElementById("search-button");
        const booksContainer = document.getElementById("books-container");

        searchButton.addEventListener("click", () => {
            const searchTerm = searchInput.value.trim().toLowerCase();
            const results = books.filter(book => book.title.toLowerCase().includes(searchTerm));
            displayResults(results);
        });

        function displayResults(results) {
    booksContainer.innerHTML = "";
    results.forEach(book => {
        const bookHTML = `
            <div class="book" onclick="selectBook('${book.title}', '${book.author}', ${book.quantity})">
                <img src="${book.image}" alt="${book.title}">
                <h2>${book.title}</h2>
                <p>🖋: ${book.author}</p>
                <p>💰السعر: ${book.price} دولار</p>
                <p>📦 الكمية المتاحة: ${book.quantity || 'غير محددة'}</p>
                <p>الفئة: ${book.category}</p>
                <p>اللغة: ${book.language}</p>
                <p>نوعه: ${book.condition}</p>
                <p>مستعمل: ${book.details}</p>
            </div>
        `;
        booksContainer.insertAdjacentHTML("beforeend", bookHTML);
    });
}function selectBook(title, author, availableQuantity) {
    document.getElementById("bookName").value = title;
    document.getElementById("author").value = author;
    document.getElementById("quantity").max = availableQuantity; // تعيين الحد الأقصى للكمية
    document.getElementById("quantity").value = 1; // تعيين القيمة الافتراضية


    
    // تحديث الفورم الثاني
    document.getElementById("paymentBookName").value = title;
    document.getElementById("paymentAuthor").value = author;
    document.getElementById("paymentQuantity").max = availableQuantity; // تعيين الحد الأقصى للكمية في الفورم الثاني
    document.getElementById("paymentQuantity").value = 1; // تعيين القيمة الافتراضية
}
document.getElementById("order-summary-form").addEventListener("submit", function(event) {
    event.preventDefault(); // منع إعادة تحميل الصفحة
    const quantityInput = document.getElementById("quantity");
    const quantity = parseInt(quantityInput.value, 10);
    const selectedBookTitle = document.getElementById("bookName").value.trim();

    const bookToUpdate = books.find(book => book.title === selectedBookTitle);

    if (bookToUpdate && bookToUpdate.quantity >= quantity) {
        bookToUpdate.quantity -= quantity; // خصم الكمية المطلوبة
        alert(`تم تأكيد الطلب. الكمية المتبقية: ${bookToUpdate.quantity}`);

        // تحديث عرض الكتب
        displayResults(books); // عرض الكتب المحدثة
        // تحديث الحقول في الفورم الثاني
        document.getElementById("paymentBookName").value = bookToUpdate.title;
        document.getElementById("paymentAuthor").value = bookToUpdate.author;
        document.getElementById("paymentQuantity").value = quantity; // تعيين الكمية المطلوبة
        document.getElementById("paymentQuality").value = document.getElementById("bookQuality").value; // نقل جودة الكتاب
    } else {
        alert("عذراً، الكمية المطلوبة أكثر من المتاحة.");
    }
});    </script>
<script>
    // ... الكود الحالي هنا ...

    // هذا هو الكود الجديد لفورم الدفع
    document.getElementById("payment-form").addEventListener("submit", function(event) {
        event.preventDefault(); // منع إعادة تحميل الصفحة

        // هنا يمكنك إضافة أي كود لمعالجة الدفع، مثل التحقق من المدخلات
        const paymentBookName = document.getElementById("paymentBookName").value.trim();
        const paymentQuantity = document.getElementById("paymentQuantity").value;

        // مثال على معالجة الدفع (يمكن تخصيصه)
        alert(`تم تأكيد الدفع لـ ${paymentQuantity} من "${paymentBookName}".`);

        // يمكنك أيضًا مسح حقول النموذج بعد الإرسال
        this.reset();
    });
</script>
</body>

</html> بمشروعي ضفت للفورم  <div class="inputBox">
                        <label for="paymentLanguage">Book Language:</label>
                        <input type="text" id="paymentLanguage" placeholder="Enter book Language" required>
                    </div>
        و  <div class="inputBox">
                        <label for="paymentCategory">Book Category:</label>
                        <input type="text" id="paymentCategory" placeholder="Enter book Category" required>
                    </div>
                     عايزة في دالله ديfunction selectBook(title, author, availableQuantity) {
    document.getElementById("bookName").value = title;
    document.getElementById("author").value = author;
    document.getElementById("quantity").max = availableQuantity; // تعيين الحد الأقصى للكمية
    document.getElementById("quantity").value = 1; // تعيين القيمة الافتراضية


    
    // تحديث الفورم الثاني
    document.getElementById("paymentBookName").value = title;
    document.getElementById("paymentAuthor").value = author;
    document.getElementById("paymentQuantity").max = availableQuantity; // تعيين الحد الأقصى للكمية في الفورم الثاني
    document.getElementById("paymentQuantity").value = 1; // تعيين القيمة الافتراضية
}تضيم لي في التحديد زي اسم الكتاب المؤلف الكمية المتاحة عايزة الفئة و اللغه تتكتب بالفورم اول م حددهاعمله في الفورمين