admin.html

<!doctype html><html lang="ar" dir="rtl"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>لوحة تحكم مؤسسة الوليد</title><style>:root{font-family:Arial,sans-serif;color:#17352b;background:#f4f7f5}*{box-sizing:border-box}body{margin:0}.shell{max-width:1200px;margin:auto;padding:24px}.card{background:#fff;border-radius:18px;padding:22px;box-shadow:0 8px 30px #0b573117;margin-bottom:18px}h1,h2{margin-top:0;color:#007f4e}input,textarea,select,button{font:inherit;border:1px solid #dbe6df;border-radius:10px;padding:10px}input,textarea,select{width:100%;margin:6px 0 12px}button{background:#007f4e;color:#fff;border:0;cursor:pointer;padding:10px 16px}button.danger{background:#ad2e35}button.muted{background:#6b7a72}.top{display:flex;justify-content:space-between;align-items:center;gap:12px}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.stat{font-size:28px;font-weight:bold}.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}.tabs button.active{background:#005c39}.row{display:flex;gap:8px;align-items:center;justify-content:space-between;border-bottom:1px solid #edf1ee;padding:12px 0}.row:last-child{border-bottom:0}.small{font-size:12px;color:#6b7a72}.hidden{display:none!important}.login{max-width:420px;margin:10vh auto}.actions{display:flex;gap:7px;flex-wrap:wrap}.notice{padding:10px;border-radius:10px;background:#fff7d6;color:#715d00;margin:8px 0}@media(max-width:700px){.grid{grid-template-columns:1fr}.top{align-items:flex-start;flex-direction:column}}</style></head><body><main class="shell"><section id="login" class="card login"><h1>لوحة التحكم</h1><p>تسجيل دخول المشرف</p><form id="loginForm"><label>البريد الإلكتروني<input name="email" type="email" value="fthyhsyn0712@gmail.com" required></label><label>كلمة المرور<input name="password" type="password" value="cfuhfyusrygf6326985#$67" required></label><button>دخول آمن</button><div id="loginError" class="notice hidden"></div></form></section><section id="app" class="hidden"><div class="top card"><div><h1>لوحة تحكم مؤسسة الوليد</h1><div class="small" id="who"></div></div><button id="logout" class="muted">تسجيل الخروج</button></div><div class="grid" id="stats"></div><div class="tabs"><button data-tab="applications">التقديمات</button><button data-tab="messages">رسائل التواصل</button><button data-tab="content">إدارة المحتوى</button></div><section id="panel" class="card"></section></section></main><script>
const $=s=>document.querySelector(s), tokenKey='alw-admin-token'; let token=localStorage.getItem(tokenKey), tab='applications';
const esc=s=>String(s??'').replace(/[&<>"']/g,c=>({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#039;'}[c]));
async function api(path,opt={}){opt.headers={...(opt.headers||{}),Authorization:'Bearer '+token,'Content-Type':'application/json'};const r=await fetch(path,opt);const d=await r.json().catch(()=>({}));if(!r.ok)throw Error(d.error||'حدث خطأ');return d}
function showApp(){ $('#login').classList.add('hidden');$('#app').classList.remove('hidden');load(); }
async function load(){ $('#who').textContent='حساب المشرف: '+(JSON.parse(localStorage.getItem('alw-admin-user')||'{}').email||''); const s=await api('/api/stats');$('#stats').innerHTML=[['التقديمات',s.applications],['الرسائل',s.messages],['عناصر المحتوى',s.content]].map(x=>`<div class="card"><div class="small">${x[0]}</div><div class="stat">${x[1]}</div></div>`).join('');document.querySelectorAll('[data-tab]').forEach(b=>b.classList.toggle('active',b.dataset.tab===tab));if(tab==='applications')renderApplications();if(tab==='messages')renderMessages();if(tab==='content')renderContent()}
async function renderApplications(){const rows=await api('/api/applications');$('#panel').innerHTML='<h2>التقديمات</h2><input id="search" placeholder="بحث برقم الطلب أو البيانات"><div id="list"></div>';const draw=()=>{$('#list').innerHTML=rows.filter(r=>(r.reference_number+' '+r.data_json).includes($('#search').value)).map(r=>`<article class="row"><div><b>${esc(r.reference_number)}</b><div class="small">${esc(r.created_at)} · ${esc(JSON.stringify(r.data))}</div></div><div class="actions"><select data-status="${r.id}"><option ${r.status==='قيد المراجعة'?'selected':''}>قيد المراجعة</option><option ${r.status==='مقبول'?'selected':''}>مقبول</option><option ${r.status==='مرفوض'?'selected':''}>مرفوض</option></select><button class="danger" data-delete-app="${r.id}">حذف</button></div></article>`).join('')||'<p>لا توجد تقديمات.</p>';document.querySelectorAll('[data-status]').forEach(e=>e.onchange=async()=>{await api('/api/applications/'+e.dataset.status,{method:'PATCH',body:JSON.stringify({status:e.value})});load()});document.querySelectorAll('[data-delete-app]').forEach(e=>e.onclick=async()=>{if(confirm('حذف السجل؟')){await api('/api/applications/'+e.dataset.deleteApp,{method:'DELETE'});load()}})};$('#search').oninput=draw;draw()}
async function renderMessages(){const rows=await api('/api/contact');$('#panel').innerHTML='<h2>رسائل التواصل</h2>'+(rows.map(r=>`<article class="row"><div><b>${esc(r.name||'زائر')}</b> <span class="small">${esc(r.email)} · ${esc(r.phone)}</span><div>${esc(r.message)}</div><div class="small">${esc(r.created_at)}</div></div><div class="actions"><button data-read="${r.id}">تمت القراءة</button><button class="danger" data-delete-msg="${r.id}">حذف</button></div></article>`).join('')||'<p>لا توجد رسائل.</p>');document.querySelectorAll('[data-read]').forEach(e=>e.onclick=async()=>{await api('/api/contact/'+e.dataset.read,{method:'PATCH',body:JSON.stringify({status:'مقروء'})});load()});document.querySelectorAll('[data-delete-msg]').forEach(e=>e.onclick=async()=>{if(confirm('حذف الرسالة؟')){await api('/api/contact/'+e.dataset.deleteMsg,{method:'DELETE'});load()}})}
async function renderContent(){const rows=await api('/api/content');$('#panel').innerHTML='<h2>إدارة المحتوى</h2>'+rows.map(r=>`<article class="card"><label>العنوان<input data-title="${r.id}" value="${esc(r.title)}"></label><label>النص<textarea data-body="${r.id}" rows="4">${esc(r.body)}</textarea></label><button data-save="${r.id}">حفظ التعديل</button></article>`).join('');document.querySelectorAll('[data-save]').forEach(e=>e.onclick=async()=>{const id=e.dataset.save;await api('/api/content/'+id,{method:'PUT',body:JSON.stringify({title:$('[data-title="'+id+'"]').value,body:$('[data-body="'+id+'"]').value})});alert('تم الحفظ')})}
$('#loginForm').onsubmit=async e=>{e.preventDefault();try{const d=await fetch('/api/auth/login',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify(Object.fromEntries(new FormData(e.target)))}).then(r=>r.json());if(!d.token)throw Error(d.error);localStorage.setItem(tokenKey,d.token);localStorage.setItem('alw-admin-user',JSON.stringify(d.user));token=d.token;showApp()}catch(err){$('#loginError').textContent=err.message;$('#loginError').classList.remove('hidden')}};document.querySelectorAll('[data-tab]').forEach(b=>b.onclick=()=>{tab=b.dataset.tab;load()});$('#logout').onclick=()=>{localStorage.removeItem(tokenKey);location.reload()};if(token)showApp();
</script></body></html>