ایجاد صفحه تسویه حساب برای فروشگاه اینترنتی

<!-- بخش اصلی صفحه تسویه حساب -->
<div class="checkout-container">
  <h2>تسویه حساب</h2>
  <div class="row">
    <div class="col-75">
      <form id="checkoutForm">
        <!-- فیلدهای فرم پرداخت -->
      </form>
    </div>
    <div class="col-25">
      <div class="cart-summary">
        <h3>خلاصه سبد خرید</h3>
        <div id="cartItems"></div>
        <hr>
        <div class="total">
          <span>جمع کل</span>
          <span id="cartTotal">0 تومان</span>
        </div>
      </div>
    </div>
  </div>
</div>

// اعتبارسنجی فرم پرداخت
document.getElementById('checkoutForm').addEventListener('submit', function(e) {
  const name = document.getElementById('name').value;
  const email = document.getElementById('email').value;
  const address = document.getElementById('address').value;
  const cardNumber = document.getElementById('cardNumber').value;
  if (!name || !email || !address) {
    alert('لطفا تمام فیلدهای ضروری را پر کنید');
    e.preventDefault();
    return;
  }
  // اعتبارسنجی ایمیل
  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  if (!emailRegex.test(email)) {
    alert('لطفا یک ایمیل معتبر وارد کنید');
    e.preventDefault();
    return;
  }
  // اعتبارسنجی شماره کارت (اگر پرداخت با کارت انتخاب شده)
  if (document.getElementById('paymentMethod').value === 'creditCard' && !cardNumber) {
    alert('لطفا شماره کارت خود را وارد کنید');
    e.preventDefault();
  }
});

// نمایش محصولات سبد خرید و محاسبه جمع کل
function displayCartItems() {
  const cartItems = JSON.parse(localStorage.getItem('cart')) || [];
  const cartContainer = document.getElementById('cartItems');
  const totalElement = document.getElementById('cartTotal');
  let total = 0;
  cartContainer.innerHTML = '';
  if (cartItems.length === 0) {
    cartContainer.innerHTML = '<p>سبد خرید شما خالی است</p>';
    totalElement.textContent = '0 تومان';
    return;
  }
  cartItems.forEach(item => {
    const itemElement = document.createElement('div');
    itemElement.className = 'cart-item';
    itemElement.innerHTML = `
      <span class="item-name">${item.name}</span>
      <span class="item-quantity">${item.quantity} عدد</span>
      <span class="item-price">${item.price.toLocaleString()} تومان</span>
    `;
    cartContainer.appendChild(itemElement);
    total += item.price * item.quantity;
  });
  totalElement.textContent = total.toLocaleString() + ' تومان';
}
// فراخوانی تابع هنگام لود صفحه
document.addEventListener('DOMContentLoaded', displayCartItems);

// پردازش سفارش و نمایش پیام موفقیت
function processOrder(e) {
  e.preventDefault();
  const cartItems = JSON.parse(localStorage.getItem('cart')) || [];
  const formData = new FormData(document.getElementById('checkoutForm'));
  const order = {
    id: Date.now(),
    customer: {
      name: formData.get('name'),
      email: formData.get('email'),
      address: formData.get('address')
    },
    items: cartItems,
    total: cartItems.reduce((sum, item) => sum + item.price * item.quantity, 0),
    date: new Date().toISOString()
  };
  // ذخیره سفارش در localStorage
  const orders = JSON.parse(localStorage.getItem('orders')) || [];
  orders.push(order);
  localStorage.setItem('orders', JSON.stringify(orders));
  // خالی کردن سبد خرید
  localStorage.removeItem('cart');
  // نمایش پیام موفقیت
  document.getElementById('checkoutForm').innerHTML = `
    <div class="success-message">
      <h3>سفارش شما با موفقیت ثبت شد!</h3>
      <p>کد پیگیری سفارش: ${order.id}</p>
      <p>جزئیات سفارش به ایمیل ${order.customer.email} ارسال شد.</p>
      <a href="/" class="btn">بازگشت به صفحه اصلی</a>
    </div>
  `;
}
// اتصال تابع پردازش به رویداد submit فرم
document.getElementById('checkoutForm').addEventListener('submit', processOrder);

/* استایل کلی صفحه تسویه حساب */
.checkout-container {
  max-width: 1200px;
  margin: 2rem auto;
  padding: 1rem;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
/* استایل سطرها و ستون‌ها */
.row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -16px;
}
.col-75 {
  flex: 75%;
  padding: 0 16px;
}
.col-25 {
  flex: 25%;
  padding: 0 16px;
}
/* استایل خلاصه سبد خرید */
.cart-summary {
  background-color: #f9f9f9;
  padding: 20px;
  border-radius: 8px;
}
.cart-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}
.total {
  display: flex;
  justify-content: space-between;
  font-weight: bold;
  font-size: 1.2rem;
}
/* استایل پیام موفقیت */
.success-message {
  text-align: center;
  padding: 2rem;
  background-color: #e8f5e9;
  border-radius: 8px;
}

// 1. اضافه کردن کد تخفیف
function applyDiscount() {
  // کد خود را اینجا بنویسید
}
// 2. محاسبه هزینه ارسال بر اساس شهر
function calculateShipping() {
  // کد خود را اینجا بنویسید
}
// 3. ذخیره اطلاعات کاربر برای خریدهای بعدی
function saveCustomerInfo() {
  // کد خود را اینجا بنویسید
}