<?php
require_once dirname(__DIR__).'/config.php';
$u = current_user();
if (!$u) { header('Location: ' . url('?login=1')); exit; }
$uid = (int)$u['id'];
$plan = $u['plan_key'] ?? 'free';
?><!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
  <meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">
  <title>شحن المحفظة — سودانا</title>
  <style>
    :root{--g:#00d97e;--dark:#073328;--bg:#f0fdf4;--card:#fff;--text:#1e293b;--muted:#64748b;--border:#e2e8f0;--gold:#f59e0b;--safe-bottom:env(safe-area-inset-bottom,0px)}
    *{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
    body{font-family:'Cairo','Noto Sans Arabic',system-ui,sans-serif;background:var(--bg);min-height:100vh;padding-bottom:calc(70px + env(safe-area-inset-bottom,0px));padding-bottom:calc(30px + var(--safe-bottom))}
    .hdr{background:var(--dark);height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;position:sticky;top:0;z-index:100}
    .logo{color:#fff;font-weight:900}.back{color:rgba(255,255,255,.6);font-size:.82rem;text-decoration:none}
    .hero{background:linear-gradient(135deg,var(--dark),#0a2a1a);padding:24px 16px;text-align:center}
    .balance-lbl{color:rgba(255,255,255,.6);font-size:.8rem;margin-bottom:6px}
    .balance-val{color:#fff;font-size:2rem;font-weight:900}
    .container{max-width:540px;margin:0 auto;padding:20px 16px}
    .section{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:18px;margin-bottom:14px;box-shadow:0 1px 6px rgba(0,0,0,.04)}
    .sec-title{font-size:.9rem;font-weight:800;color:var(--dark);margin-bottom:14px}
    .amounts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px}
    .amt-btn{background:#f8fafc;border:1.5px solid var(--border);border-radius:10px;padding:12px;text-align:center;cursor:pointer;font-family:inherit;font-size:.85rem;font-weight:700;transition:.15s}
    .amt-btn.active{border-color:var(--g);background:#f0fdf4;color:var(--g)}
    .field{margin-bottom:14px}
    .field label{display:block;font-size:.75rem;font-weight:700;color:var(--muted);margin-bottom:5px}
    .field input{width:100%;background:#f8fafc;border:1.5px solid var(--border);border-radius:10px;padding:11px 14px;font-family:inherit;font-size:16px}
    .field input:focus{outline:none;border-color:var(--g);background:#fff}
    .method-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
    .method-btn{background:#f8fafc;border:1.5px solid var(--border);border-radius:10px;padding:12px;text-align:center;cursor:pointer;font-family:inherit;font-size:.8rem;transition:.15s}
    .method-btn.active{border-color:var(--g);background:#f0fdf4}
    .method-icon{font-size:1.5rem;display:block;margin-bottom:4px}
    .bank-info{background:#f0fdf4;border:1px solid #bbf7d0;border-radius:10px;padding:14px;margin-top:12px;font-size:.82rem;line-height:1.7;display:none}
    .btn-submit{background:linear-gradient(135deg,var(--g),#059669);color:#fff;border:none;border-radius:12px;padding:13px;width:100%;font-family:inherit;font-weight:800;font-size:.92rem;cursor:pointer;margin-top:6px}
    .toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--dark);color:#fff;padding:10px 20px;border-radius:10px;font-size:.82rem;font-weight:700;z-index:999;display:none}
  </style>
</head>
<body>
<header class="hdr">
  <div class="logo">💰 شحن المحفظة</div>
  <a href="/wallet.php" class="back">← المحفظة</a>
</header>
<div class="hero">
  <div class="balance-lbl">رصيدك الحالي</div>
  <div class="balance-val" id="balance-val">جاري التحميل...</div>
</div>
<div class="container">
  <div class="section">
    <div class="sec-title">💵 اختر المبلغ</div>
    <div class="amounts">
      <button class="amt-btn" onclick="setAmount(5000,this)">5,000</button>
      <button class="amt-btn" onclick="setAmount(10000,this)">10,000</button>
      <button class="amt-btn" onclick="setAmount(20000,this)">20,000</button>
      <button class="amt-btn" onclick="setAmount(50000,this)">50,000</button>
      <button class="amt-btn" onclick="setAmount(100000,this)">100,000</button>
      <button class="amt-btn" id="custom-btn" onclick="focusCustom()">مبلغ آخر</button>
    </div>
    <div class="field">
      <label>أو أدخل مبلغاً مخصصاً (SDG)</label>
      <input type="number" id="custom-amount" placeholder="أدخل المبلغ" min="100" oninput="setCustom(this.value)">
    </div>
  </div>

  <div class="section">
    <div class="sec-title">💳 طريقة الدفع</div>
    <div class="method-grid">
      <button class="method-btn active" onclick="setMethod('bank',this)">
        <span class="method-icon">🏦</span>تحويل بنكي
      </button>
      <button class="method-btn" onclick="setMethod('mobile',this)">
        <span class="method-icon">📱</span>دفع موبايل
      </button>
    </div>
    <div class="bank-info" id="bank-info" style="display:block">
      <strong>بيانات التحويل:</strong><br>
      البنك: بنك السودان الزراعي<br>
      رقم الحساب: 1001-2345-6789<br>
      اسم الحساب: سودانا للحلول الذكية<br>
      <br>
      <strong>مهم:</strong> أرسل صورة الحوالة بعد التحويل
    </div>
    <div class="field" style="margin-top:12px">
      <label>رقم مرجع الدفع أو الحوالة *</label>
      <input type="text" id="pay-ref" placeholder="مثال: TRX123456789">
    </div>
  </div>

  <button class="btn-submit" onclick="submitTopup()">✅ تأكيد الشحن</button>
</div>
<div class="toast" id="toast"></div>
<script>
let selectedAmount = 0;
let selectedMethod = 'bank';

async function loadBalance(){
  try{
    const r=await fetch('/api/wallet/summary.php');
    const d=await r.json();
    document.getElementById('balance-val').textContent=Number(d.balance||0).toLocaleString('ar-SA')+' SDG';
  }catch(e){document.getElementById('balance-val').textContent='—';}
}

function setAmount(amt,btn){
  selectedAmount=amt;
  document.querySelectorAll('.amt-btn').forEach(b=>b.classList.remove('active'));
  btn.classList.add('active');
  document.getElementById('custom-amount').value='';
}

function focusCustom(){document.getElementById('custom-amount').focus();}

function setCustom(val){
  selectedAmount=parseInt(val)||0;
  document.querySelectorAll('.amt-btn').forEach(b=>b.classList.remove('active'));
  document.getElementById('custom-btn').classList.add('active');
}

function setMethod(m,btn){
  selectedMethod=m;
  document.querySelectorAll('.method-btn').forEach(b=>b.classList.remove('active'));
  btn.classList.add('active');
  document.getElementById('bank-info').style.display=m==='bank'?'block':'none';
}

function showToast(msg){const t=document.getElementById('toast');t.textContent=msg;t.style.display='block';setTimeout(()=>t.style.display='none',3000);}

async function submitTopup(){
  const ref=document.getElementById('pay-ref').value.trim();
  if(!selectedAmount||selectedAmount<100){showToast('اختر مبلغاً (100 SDG على الأقل)');return;}
  if(!ref){showToast('أدخل رقم مرجع الدفع');return;}

  const btn=document.querySelector('.btn-submit');
  btn.disabled=true;btn.textContent='جاري المعالجة...';

  try{
    const r=await fetch('/api/wallet/topup.php',{
      method:'POST',headers:{'Content-Type':'application/json'},
      body:JSON.stringify({amount_sdg:selectedAmount,payment_ref:ref,method:selectedMethod})
    });
    const d=await r.json();
    if(d.ok){
      showToast('✅ تم استلام طلب الشحن! سيُراجَع خلال ساعة.');
      setTimeout(()=>window.location.href='/wallet.php',2500);
    }else{
      showToast('❌ '+(d.message||d.error||'حدث خطأ'));
      btn.disabled=false;btn.textContent='✅ تأكيد الشحن';
    }
  }catch(e){
    showToast('❌ تعذّر الاتصال');
    btn.disabled=false;btn.textContent='✅ تأكيد الشحن';
  }
}

loadBalance();
</script>

<nav style="position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:1px solid #e2e8f0;display:flex;padding:8px 0 calc(8px + env(safe-area-inset-bottom,0px));z-index:100">
  <a href="/app/hub.php" style="flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;text-decoration:none;color:#64748b;font-size:.6rem;font-family:inherit;padding:4px 0"><span style="font-size:1.1rem">&#127968;</span><span>الهب</span></a>
  <a href="/app/pay.php" style="flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;text-decoration:none;color:#00d97e;font-size:.6rem;font-family:inherit;padding:4px 0"><span style="font-size:1.1rem">&#128179;</span><span>Pay</span></a>
  <a href="/app/invest/index.php" style="flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;text-decoration:none;color:#64748b;font-size:.6rem;font-family:inherit;padding:4px 0"><span style="font-size:1.1rem">&#128185;</span><span>استثمار</span></a>
  <a href="/app/community.php" style="flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;text-decoration:none;color:#64748b;font-size:.6rem;font-family:inherit;padding:4px 0"><span style="font-size:1.1rem">&#127968;</span><span>مجتمع</span></a>
  <a href="/app/profile.php" style="flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;text-decoration:none;color:#64748b;font-size:.6rem;font-family:inherit;padding:4px 0"><span style="font-size:1.1rem">&#128100;</span><span>حسابي</span></a>
</nav>
</body>
</html>