online payment kaspi

index.html

@@ -23,6 +23,9 @@ body{font:17px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,system-ui,s
 .card-title{font-size:20px;font-weight:700;margin-bottom:8px}
 .card-price{font-size:24px;font-weight:800;color:var(--ink);margin-bottom:12px}
 .card-cat{display:inline-block;background:var(--cyan-50);color:var(--ink);padding:4px 12px;border-radius:20px;font-size:14px;font-weight:600;margin-bottom:12px}
+.status-badge{display:inline-block;padding:4px 12px;border-radius:20px;font-size:13px;font-weight:600;margin-left:8px}
+.status-paid{background:#d4edda;color:#155724}
+.status-waiting{background:#fff3cd;color:#856404}
 .btn{display:inline-block;background:var(--cyan);color:var(--ink);padding:14px 28px;border-radius:8px;font-weight:700;text-decoration:none;border:none;cursor:pointer}
 .btn:hover{opacity:0.9}
 .btn-green{background:var(--green);color:#fff}
@@ -85,6 +88,7 @@ body{font:17px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,system-ui,s
     <div style="text-align:center;margin-top:40px;display:flex;gap:16px;justify-content:center;flex-wrap:wrap">
       <button class="btn" onclick="openParentCodeModal()" style="background:var(--green);color:#fff">👨‍👩‍👧 Получить код родителя</button>
       <button class="btn" onclick="showPage('admin');setTimeout(() => document.getElementById('nav-admin').click(), 100)" style="background:var(--ink);color:#fff">➕ Добавить товар</button>
+      <button class="btn" onclick="openPaymentModal()" style="background:#FF5500;color:#fff">💳 Родителям: оплатить онлайн</button>
     </div>
   </div>
 </section>
@@ -130,6 +134,12 @@ body{font:17px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,system-ui,s
         <div id="parents-list" style="margin-bottom:32px"></div>
       </div>
       
+      <div class="admin-panel">
+        <h3>📋 Предоплаченные заказы (онлайн оплата)</h3>
+        <p style="margin-bottom:16px;color:var(--gray-500)">Родитель оплатил онлайн → ребёнок показывает код → забирает товар</p>
+        <div id="orders-list" style="margin-top:16px"></div>
+      </div>
+      
       <div class="admin-panel">
         <h3>➕ Добавить товар</h3>
         <form id="add-form">
@@ -193,6 +203,24 @@ body{font:17px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,system-ui,s
   </div>
 </div>
 
+<div class="modal" id="payment-modal">
+  <div class="modal-content">
+    <h3>💳 Онлайн оплата</h3>
+    <p style="margin-bottom:16px">Родитель оплачивает — ребёнок забирает</p>
+    <div style="background:var(--cyan-50);padding:16px;border-radius:8px;margin-bottom:16px">
+      <strong>Товар:</strong> <span id="pay-product"></span><br>
+      <strong>Цена:</strong> <span id="pay-price"></span> ₸
+    </div>
+    <div class="form-group">
+      <label>Телефон родителя (для входа)</label>
+      <input type="tel" id="pay-phone" placeholder="+7 777 123 45 67" style="width:100%;padding:12px;border:1px solid #ddd;border-radius:8px">
+    </div>
+    <button class="btn btn-green" onclick="processPayment()" style="width:100%">💳 Оплатить через Kaspi Pay</button>
+    <button class="btn" style="background:var(--gray-100);margin-top:12px;width:100%" onclick="closePaymentModal()">Отмена</button>
+    <p style="margin-top:16px;font-size:13px;color:var(--gray-500)">🔒 Тестовый режим — оплата не списывается</p>
+  </div>
+</div>
+
 <div class="modal" id="success-modal">
   <div class="modal-content" style="text-align:center">
     <h3>✅ Покупка разрешена!</h3>
@@ -209,6 +237,7 @@ const CATEGORIES = {еда:'🍫', напитки:'🥤', школа:'✏️',
 let products = [];
 let parents = [];
 let purchases = [];
+let orders = []; // Предоплаченные заказы
 let isAdmin = false;
 const ADMIN_PASS = 'admin123'; // Поменяй на свой!
 
@@ -218,10 +247,12 @@ function loadProducts() {
     products = localStorage.getItem('shop-products') ? JSON.parse(localStorage.getItem('shop-products')) : getDefaults();
     parents = localStorage.getItem('shop-parents') ? JSON.parse(localStorage.getItem('shop-parents')) : [];
     purchases = localStorage.getItem('shop-purchases') ? JSON.parse(localStorage.getItem('shop-purchases')) : [];
+    orders = localStorage.getItem('shop-orders') ? JSON.parse(localStorage.getItem('shop-orders')) : [];
   } catch { 
     products = getDefaults(); 
     parents = [];
     purchases = [];
+    orders = [];
   }
 }
 
@@ -229,6 +260,7 @@ function saveProducts() {
   localStorage.setItem('shop-products', JSON.stringify(products));
   localStorage.setItem('shop-parents', JSON.stringify(parents));
   localStorage.setItem('shop-purchases', JSON.stringify(purchases));
+  localStorage.setItem('shop-orders', JSON.stringify(orders));
 }
 
 function getDefaults() {
@@ -263,7 +295,10 @@ function render(filter = 'all') {
           <div class="card-title">${p.name}</div>
           <div class="card-price">${p.price} ₸</div>
           <p style="color:var(--gray-500);font-size:14px">${p.desc || ''}</p>
-          <button class="btn" style="margin-top:12px;width:100%" onclick="buyProduct(${p.id})">Купить</button>
+          <div style="display:flex;gap:8px;margin-top:12px">
+            <button class="btn" style="flex:1" onclick="buyProduct(${p.id})">Купить</button>
+            <button class="btn btn-green" style="flex:1" onclick="openPaymentModalForProduct(${JSON.stringify(p).replace(/"/g, '&quot;')})">💳 Оплатить</button>
+          </div>
         </div>
       </div>
     `).join('');
@@ -311,6 +346,44 @@ function render(filter = 'all') {
         </div>
       `).join('');
   }
+  
+  // Предоплаченные заказы
+  const ordersList = document.getElementById('orders-list');
+  if (ordersList) {
+    const activeOrders = orders.filter(o => !o.pickedUp);
+    const completedOrders = orders.filter(o => o.pickedUp);
+    
+    if (activeOrders.length === 0 && completedOrders.length === 0) {
+      ordersList.innerHTML = '<p style="color:var(--gray-500)">Предоплаченных заказов пока нет</p>';
+    } else {
+      let html = '';
+      if (activeOrders.length > 0) {
+        html += '<h5 style="margin:16px 0 8px;color:var(--green)">⏳ Ожидают выдачи:</h5>';
+        html += activeOrders.map(o => `
+          <div class="card" style="margin-bottom:12px;padding:16px;border-left:4px solid var(--green)">
+            <strong>${o.product}</strong> 
+            <span class="status-badge status-waiting">⏳ Ждёт выдачи</span><br>
+            <span style="color:var(--gray-500)">Родитель: ${o.parentName} (${o.parentPhone})</span><br>
+            <span style="color:var(--gray-500)">Код выдачи: <strong style="color:var(--cyan);font-size:20px">${o.code}</strong></span><br>
+            <span style="color:var(--gray-500)">Оплачено: ${o.price} ₸ | ${new Date(o.date).toLocaleString('ru-RU')}</span><br>
+            <button class="btn btn-green" style="margin-top:12px;padding:8px 16px" onclick="markAsPickedUp(${o.id})">✅ Товар выдан</button>
+          </div>
+        `).join('');
+      }
+      if (completedOrders.length > 0) {
+        html += '<h5 style="margin:16px 0 8px;color:var(--gray-500)">✅ Выданные:</h5>';
+        html += completedOrders.slice(-5).reverse().map(o => `
+          <div class="card" style="margin-bottom:12px;padding:16px;border-left:4px solid #28a745">
+            <strong>${o.product}</strong> 
+            <span class="status-badge status-paid">✅ Выдан</span><br>
+            <span style="color:var(--gray-500)">Родитель: ${o.parentName} | Код: ${o.code}</span><br>
+            <span style="color:var(--gray-500)">Выдан: ${new Date(o.pickedUpAt).toLocaleString('ru-RU')}</span>
+          </div>
+        `).join('');
+      }
+      ordersList.innerHTML = html;
+    }
+  }
 }
 
 function getSpentToday(parentId) {
@@ -394,6 +467,58 @@ function closeParentModal() {
   document.getElementById('parent-code-modal').classList.remove('on');
 }
 
+let currentProductForPayment = null;
+
+function openPaymentModal() {
+  document.getElementById('payment-modal').classList.add('on');
+}
+
+function closePaymentModal() {
+  document.getElementById('payment-modal').classList.remove('on');
+}
+
+function openPaymentModalForProduct(product) {
+  currentProductForPayment = product;
+  document.getElementById('pay-product').textContent = product.name;
+  document.getElementById('pay-price').textContent = product.price;
+  document.getElementById('payment-modal').classList.add('on');
+}
+
+function processPayment() {
+  const phone = document.getElementById('pay-phone').value.trim();
+  if (!phone || !currentProductForPayment) {
+    alert('Введите номер телефона и выберите товар');
+    return;
+  }
+  
+  // Имитация оплаты Kaspi Pay
+  const orderCode = Math.floor(100000 + Math.random() * 900000).toString();
+  const order = {
+    id: Date.now(),
+    productId: currentProductForPayment.id,
+    product: currentProductForPayment.name,
+    price: currentProductForPayment.price,
+    parentPhone: phone,
+    parentName: phone, // Потом родитель представится при получении
+    code: orderCode,
+    date: new Date().toISOString(),
+    pickedUp: false,
+    pickedUpAt: null
+  };
+  
+  orders.push(order);
+  saveProducts();
+  
+  closePaymentModal();
+  
+  document.getElementById('success-message').textContent = `✅ Оплата прошла успешно!\n\nВаш код выдачи: ${orderCode}\n\nПокажите этот код в магазине и получите товар.`;
+  document.getElementById('success-code').textContent = orderCode;
+  document.getElementById('success-modal').classList.add('on');
+  
+  currentProductForPayment = null;
+  document.getElementById('pay-phone').value = '';
+}
+
 function verifyParentCode() {
   const code = document.getElementById('parent-code-input').value.trim();
   const parent = parents.find(p => p.code === code);
@@ -430,6 +555,19 @@ function verifyParentCode() {
   }
 }
 
+function markAsPickedUp(orderId) {
+  if (confirm('Подтвердить выдачу товара?')) {
+    const order = orders.find(o => o.id === orderId);
+    if (order) {
+      order.pickedUp = true;
+      order.pickedUpAt = new Date().toISOString();
+      saveProducts();
+      render();
+      alert('✅ Товар выдан!');
+    }
+  }
+}
+
 // === Родители ===
 document.getElementById('parent-form').addEventListener('submit', (e) => {
   e.preventDefault();