<?php
require_once dirname(__DIR__).'/config.php';
$u = current_user(); if(!$u){header('Location: ' . url('?login=1'));exit;}
?><!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;--red:#dc2626;--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 + 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:20px 16px;text-align:center}
.hero h1{color:#fff;font-size:1.1rem;font-weight:900}.hero p{color:rgba(255,255,255,.6);font-size:.78rem;margin-top:4px}
.tabs{display:flex;gap:0;background:var(--dark);padding:0 16px 12px}
.tab{flex:1;background:rgba(255,255,255,.1);border:none;border-radius:10px;padding:9px;color:rgba(255,255,255,.65);font-family:inherit;font-size:.78rem;cursor:pointer;margin:0 3px}
.tab.active{background:var(--g);color:#000;font-weight:700}
.container{max-width:640px;margin:0 auto;padding:16px}
.section{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:16px;margin-bottom:14px}
.sec-title{font-size:.9rem;font-weight:800;color:var(--dark);margin-bottom:12px}
.field{margin-bottom:12px}
.field label{display:block;font-size:.75rem;font-weight:700;color:var(--muted);margin-bottom:4px}
.field input,.field select,.field textarea{width:100%;background:#f8fafc;border:1.5px solid var(--border);border-radius:10px;padding:10px 12px;font-family:inherit;font-size:15px}
.field textarea{resize:none;height:100px}
.btn{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:.9rem;cursor:pointer}
.ticket-card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:14px;margin-bottom:10px}
.tc-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:6px}
.tc-subject{font-weight:700;font-size:.88rem}
.tc-id{font-size:.7rem;color:var(--muted);font-family:monospace}
.tc-status{display:inline-block;padding:3px 10px;border-radius:20px;font-size:.7rem;font-weight:700}
.s-open{background:#dbeafe;color:#1d4ed8}
.s-inprogress{background:#fef3c7;color:#92400e}
.s-resolved{background:#d1fae5;color:#065f46}
.s-escalated{background:#fee2e2;color:var(--red)}
.tc-meta{font-size:.72rem;color:var(--muted);margin-top:6px}
.priority-urgent{color:var(--red);font-weight:700}
.priority-high{color:#d97706;font-weight:700}
.priority-normal{color:var(--muted)}
.sla-badge{font-size:.68rem;background:#f1f5f9;border-radius:20px;padding:2px 8px}
.quick-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px}
.qa-btn{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:12px;text-align:center;cursor:pointer;font-size:.78rem;font-weight:600;color:var(--text)}
.qa-btn:active{transform:scale(.97)}
.qa-icon{font-size:1.3rem;margin-bottom:4px}
.bnav{position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:1px solid var(--border);display:flex;padding:8px 0 calc(8px + var(--safe-bottom));z-index:100}
.ni{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;text-decoration:none;color:var(--muted);font-size:.6rem;padding:4px 0}
.ni.a{color:var(--g)}.ni-i{font-size:1.15rem}
.skel{background:linear-gradient(90deg,#f0f0f0 25%,#e8e8e8 50%,#f0f0f0 75%);background-size:200% 100%;animation:sk 1.2s infinite;border-radius:12px;height:80px;margin-bottom:10px}
@keyframes sk{0%{background-position:200% 0}100%{background-position:-200% 0}}
</style></head><body>
<header class="hdr"><div class="logo">&#127993; الدعم والمساعدة</div><a href="/app/hub.php" class="back">&#8592; الهب</a></header>
<div class="hero"><h1>&#127993; كيف نساعدك؟</h1><p>فريق الدعم متاح 9ص–9م | الرد خلال 4-24 ساعة</p></div>
<div class="tabs">
  <button class="tab active" onclick="switchTab('new',this)">&#43; تكت جديد</button>
  <button class="tab" onclick="switchTab('my',this)">تكتاتي</button>
</div>

<div id="tab-new" class="container">
  <!-- اختصارات سريعة -->
  <div class="quick-actions">
    <div class="qa-btn" onclick="quickIssue('دفع فاشل','لم تكتمل عملية الدفع')">
      <div class="qa-icon">&#10060;</div>دفع فاشل
    </div>
    <div class="qa-btn" onclick="quickIssue('تحويل لم يصل','أرسلت مبلغاً ولم يصل للمستلم')">
      <div class="qa-icon">&#128184;</div>تحويل لم يصل
    </div>
    <div class="qa-btn" onclick="quickIssue('حساب موقوف','لا أستطيع الدخول لحسابي')">
      <div class="qa-icon">&#128274;</div>حساب موقوف
    </div>
    <div class="qa-btn" onclick="quickIssue('مشكلة أخرى','')">
      <div class="qa-icon">&#128221;</div>مشكلة أخرى
    </div>
  </div>
  <div class="section">
    <div class="sec-title">&#128221; افتح تكت دعم</div>
    <div class="field"><label>الموضوع *</label>
      <input type="text" id="t-subject" placeholder="وصف مختصر للمشكلة" maxlength="200"></div>
    <div class="field"><label>الفئة</label>
      <select id="t-category">
        <option value="pay_failed">دفع فاشل</option>
        <option value="transfer_issue">مشكلة تحويل</option>
        <option value="account_suspended">حساب موقوف</option>
        <option value="pin_issue">مشكلة PIN</option>
        <option value="refund_request">طلب استرداد</option>
        <option value="merchant_issue">مشكلة تاجر</option>
        <option value="investment_issue">مشكلة استثمار</option>
        <option value="other">أخرى</option>
      </select></div>
    <div class="field"><label>الأولوية</label>
      <select id="t-priority">
        <option value="normal">عادية (24 ساعة)</option>
        <option value="high">عالية (8 ساعات)</option>
        <option value="urgent">عاجلة (4 ساعات)</option>
      </select></div>
    <div class="field"><label>رقم المعاملة (اختياري)</label>
      <input type="text" id="t-txnref" placeholder="مثال: TRF20241028ABCD"></div>
    <div class="field"><label>وصف المشكلة بالتفصيل *</label>
      <textarea id="t-desc" placeholder="اشرح ما حدث بالتفصيل... متى؟ كم المبلغ؟ ماذا ظهر لك؟"></textarea></div>
    <div class="field"><label>&#128247; لقطة شاشة (اختياري)</label>
      <input type="file" id="t-file" accept="image/*,.pdf" style="background:#fff;border:1.5px dashed var(--border)"></div>
    <button class="btn" onclick="submitTicket()">&#127993; أرسل التكت</button>
  </div>
</div>

<div id="tab-my" class="container" style="display:none">
  <div id="tickets-list"><div class="skel"></div><div class="skel"></div></div>
</div>

<nav class="bnav">
  <a href="/app/hub.php" class="ni"><span class="ni-i">&#127968;</span><span>الهب</span></a>
  <a href="/app/pay.php" class="ni"><span class="ni-i">&#128179;</span><span>Pay</span></a>
  <a href="/app/support.php" class="ni a"><span class="ni-i">&#127993;</span><span>الدعم</span></a>
  <a href="/app/community.php" class="ni"><span class="ni-i">&#127968;</span><span>مجتمع</span></a>
  <a href="/app/profile.php" class="ni"><span class="ni-i">&#128100;</span><span>حسابي</span></a>
</nav>

<script>
function switchTab(tab, btn){
  document.querySelectorAll('.tab').forEach(b=>b.classList.remove('active'));
  btn.classList.add('active');
  document.getElementById('tab-new').style.display = tab==='new'?'block':'none';
  document.getElementById('tab-my').style.display  = tab==='my'?'block':'none';
  if(tab==='my') loadMyTickets();
}

function quickIssue(subject, desc){
  document.getElementById('t-subject').value = subject;
  document.getElementById('t-desc').value    = desc;
  document.getElementById('t-priority').value = subject.includes('موقوف')||subject.includes('فاشل')?'high':'normal';
}

async function submitTicket(){
  const subject  = document.getElementById('t-subject').value.trim();
  const desc     = document.getElementById('t-desc').value.trim();
  const category = document.getElementById('t-category').value;
  const priority = document.getElementById('t-priority').value;
  const txnRef   = document.getElementById('t-txnref').value.trim();
  if(!subject||subject.length<5){alert('أدخل عنواناً وصفياً للمشكلة');return;}
  if(!desc||desc.length<15){alert('يرجى وصف المشكلة بالتفصيل');return;}
  const btn = document.querySelector('#tab-new .btn');
  btn.disabled=true; btn.textContent='جاري الإرسال...';
  try{
    const r = await fetch('/api/support/ticket.php?action=create',{
      method:'POST', headers:{'Content-Type':'application/json'},
      body: JSON.stringify({subject, description:desc, category, priority,
        related_type: txnRef?'sdpay_transaction':null,
        related_id:   txnRef||null})
    });
    const d = await r.json();
    if(d.success||d.ok){
      alert('✅ تم فتح تكت الدعم #'+d.ticket_id+'\nسنرد خلال: '+d.sla);
      document.getElementById('t-subject').value='';
      document.getElementById('t-desc').value='';
      document.getElementById('t-txnref').value='';
      switchTab('my', document.querySelectorAll('.tab')[1]);
    } else {
      alert('❌ '+(d.message||d.error||'حدث خطأ'));
    }
  }catch(e){alert('❌ تعذّر الاتصال بالدعم');}
  btn.disabled=false; btn.textContent='&#127993; أرسل التكت';
}

async function loadMyTickets(){
  const el = document.getElementById('tickets-list');
  el.innerHTML='<div class="skel"></div><div class="skel"></div>';
  try{
    const r = await fetch('/api/support/ticket.php?action=list');
    const d = await r.json();
    const tickets = d.tickets || [];
    if(!tickets.length){
      el.innerHTML='<p style="text-align:center;padding:24px;color:var(--muted)">لا تكتات سابقة</p>';
      return;
    }
    const statusClass = {open:'s-open',in_progress:'s-inprogress',resolved:'s-resolved',escalated:'s-escalated'};
    const statusAr = {open:'مفتوح',in_progress:'قيد المراجعة',resolved:'محلول',escalated:'مُصعَّد'};
    const priorityAr = {urgent:'&#9889; عاجل',high:'&#128308; عالي',normal:'عادي'};
    const slaMap = {urgent:'4 ساعات',high:'8 ساعات',normal:'24 ساعة'};
    el.innerHTML = tickets.map(t => `
      <div class="ticket-card">
        <div class="tc-header">
          <div><div class="tc-subject">${t.subject}</div>
          <div class="tc-id">#${t.id} — ${t.category||'عام'}</div></div>
          <span class="tc-status ${statusClass[t.status]||'s-open'}">${statusAr[t.status]||t.status}</span>
        </div>
        <div class="tc-meta">
          <span class="priority-${t.priority}">${priorityAr[t.priority]||t.priority}</span>
          &nbsp;|&nbsp;<span class="sla-badge">&#128336; ${slaMap[t.priority]}</span>
          &nbsp;|&nbsp;${new Date(t.created_at.replace(' ','T')).toLocaleDateString('ar-SA')}
          ${t.last_reply?'<br>&#128172; آخر رد: '+t.last_reply.substring(0,60)+'...':''}
        </div>
      </div>`).join('');
  }catch(e){
    el.innerHTML='<p style="text-align:center;padding:24px;color:var(--muted)">تعذّر تحميل التكتات</p>';
  }
}
</script>
</body></html>
