<?php
require_once dirname(__DIR__).'/config.php';
$u = current_user();
if (!$u) { header('Location: ' . url('?login=1')); exit; }
$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);color:var(--text);min-height:100vh}
    .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;font-size:1rem}
    .back{color:rgba(255,255,255,.6);font-size:.82rem;text-decoration:none}
    .hero{background:linear-gradient(135deg,var(--dark),#0a2a1a);padding:32px 16px;text-align:center}
    .hero h1{color:#fff;font-size:1.5rem;font-weight:900;margin-bottom:8px}
    .hero p{color:rgba(255,255,255,.65);font-size:.85rem;line-height:1.65;max-width:460px;margin:0 auto}
    .steps{display:flex;justify-content:center;gap:20px;margin-top:20px;flex-wrap:wrap}
    .step{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);border-radius:12px;padding:12px 16px;text-align:center;min-width:100px}
    .step-num{color:var(--g);font-size:1.3rem;font-weight:900}
    .step-lbl{color:rgba(255,255,255,.7);font-size:.72rem;margin-top:4px}
    .container{max-width:640px;margin:0 auto;padding:20px 16px;padding-bottom:calc(30px + var(--safe-bottom))}
    .section{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:20px;margin-bottom:16px;box-shadow:0 1px 6px rgba(0,0,0,.04)}
    .sec-title{font-size:.95rem;font-weight:800;color:var(--dark);margin-bottom:16px;display:flex;align-items:center;gap:8px}
    .field{margin-bottom:14px}
    .field label{display:block;font-size:.75rem;font-weight:700;color:var(--muted);margin-bottom:5px}
    .field input,.field select,.field textarea{width:100%;background:#f8fafc;border:1.5px solid var(--border);border-radius:10px;padding:11px 14px;font-family:inherit;font-size:16px;color:var(--text)}
    .field textarea{height:90px;resize:vertical}
    .field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--g);background:#fff}
    .domain-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:4px}
    .domain-btn{background:#f8fafc;border:1.5px solid var(--border);border-radius:10px;padding:10px 6px;text-align:center;cursor:pointer;font-family:inherit;transition:.15s;font-size:.7rem}
    .domain-btn.active{border-color:var(--g);background:#f0fdf4;font-weight:700}
    .earnings-preview{background:linear-gradient(135deg,var(--dark),#0a2a1a);border-radius:14px;padding:16px;color:#fff;margin:12px 0}
    .earn-val{font-size:1.4rem;font-weight:900;color:var(--g)}
    .earn-lbl{font-size:.75rem;color:rgba(255,255,255,.6);margin-top:4px}
    .earn-demand{display:inline-block;background:rgba(239,68,68,.2);color:#fca5a5;border-radius:20px;padding:3px 10px;font-size:.7rem;margin-top:8px}
    .btn-submit{background:linear-gradient(135deg,var(--g),#059669);color:#fff;border:none;border-radius:12px;padding:14px;width:100%;font-family:inherit;font-weight:800;font-size:.95rem;cursor:pointer;margin-top:8px}
    .privacy-note{font-size:.72rem;color:var(--muted);text-align:center;margin-top:10px;line-height:1.6}
    .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}
    @media(max-width:480px){.domain-grid{grid-template-columns:repeat(2,1fr)}.steps{gap:10px}}
  </style>
</head>
<body>
<header class="hdr">
  <div class="logo">🤝 انضم كمزود</div>
  <a href="/app/dashboard.php" class="back">← الرئيسية</a>
</header>

<div class="hero">
  <h1>حوِّل خبرتك لدخل حقيقي 💡</h1>
  <p>انضم لآلاف المزودين في سودانا — أنت من تحدد وقتك وسعرك وتخصصك</p>
  <div class="steps">
    <div class="step"><div class="step-num">10</div><div class="step-lbl">دقائق للتسجيل</div></div>
    <div class="step"><div class="step-num">0</div><div class="step-lbl">رسوم مسبقة</div></div>
    <div class="step"><div class="step-num">10%</div><div class="step-lbl">عمولة فقط</div></div>
  </div>
</div>

<div class="container">

  <div class="section">
    <div class="sec-title">🎯 اختر مجالك</div>
    <div class="domain-grid" id="domain-grid">
      <button class="domain-btn" onclick="selectDomain('medical','⚕️ طب وصحة')">⚕️<br>طب وصحة</button>
      <button class="domain-btn" onclick="selectDomain('legal','⚖️ قانوني')">⚖️<br>قانوني</button>
      <button class="domain-btn" onclick="selectDomain('education','🎓 تعليم')">🎓<br>تعليم</button>
      <button class="domain-btn" onclick="selectDomain('business','💼 أعمال')">💼<br>أعمال</button>
      <button class="domain-btn" onclick="selectDomain('craft','🔧 حرف')">🔧<br>حرف</button>
      <button class="domain-btn" onclick="selectDomain('food','🍲 طعام')">🍲<br>طعام</button>
      <button class="domain-btn" onclick="selectDomain('beauty','💄 تجميل')">💄<br>تجميل</button>
      <button class="domain-btn" onclick="selectDomain('agriculture','🌾 زراعة')">🌾<br>زراعة</button>
      <button class="domain-btn" onclick="selectDomain('tech','💻 تقنية')">💻<br>تقنية</button>
    </div>
    <div id="earnings-preview" style="display:none" class="earnings-preview">
      <div class="earn-val" id="earn-val">-</div>
      <div class="earn-lbl">متوسط الدخل الشهري الإضافي بمتوسط 3 ساعات/أسبوع</div>
      <div class="earn-demand" id="earn-demand">طلب عالٍ</div>
    </div>
  </div>

  <div class="section">
    <div class="sec-title">📋 معلوماتك المهنية</div>
    <div class="field"><label>التخصص الدقيق *</label>
      <input type="text" id="specialty" placeholder="مثال: طب باطنة، محامي تجاري، مدرِّس IGCSE..."></div>
    <div class="field"><label>سنوات الخبرة *</label>
      <select id="experience">
        <option value="">اختر</option>
        <option value="1-3">1-3 سنوات</option>
        <option value="3-7">3-7 سنوات</option>
        <option value="7-15">7-15 سنة</option>
        <option value="15+">أكثر من 15 سنة</option>
      </select></div>
    <div class="field"><label>الشهادة أو المؤهل (اختياري)</label>
      <input type="text" id="qualification" placeholder="مثال: بكالوريوس طب — جامعة الخرطوم"></div>
    <div class="field"><label>وصف مختصر عنك *</label>
      <textarea id="bio" placeholder="أخبر الزبائن عنك — خبرتك وما تقدمه..."></textarea></div>
  </div>

  <div class="section">
    <div class="sec-title">⏰ توافرك</div>
    <div class="field"><label>الأوقات المتاحة</label>
      <select id="availability">
        <option value="morning">صباحاً (8-12)</option>
        <option value="afternoon">ظهراً (12-5)</option>
        <option value="evening">مساءً (5-10)</option>
        <option value="flexible">مرن</option>
      </select></div>
    <div class="field"><label>سعرك (SDG للساعة أو الجلسة)</label>
      <input type="number" id="price" placeholder="مثال: 500" min="50"></div>
  </div>

  <button class="btn-submit" onclick="submitRegistration()">
    🚀 سجِّل كمزود خدمة — مجاناً
  </button>
  <p class="privacy-note">
    بالتسجيل تقبل شروط سودانا.<br>
    بياناتك آمنة ومحمية. لا تُشارَك مع أي جهة.
  </p>
</div>

<div class="toast" id="toast"></div>

<script>
let selectedDomain = '';
const earnings = {
  medical:{avg:'42,000',demand:'طلب حرج 🔴'},
  legal:{avg:'35,000',demand:'طلب عالٍ 🟡'},
  education:{avg:'28,000',demand:'طلب عالٍ 🟡'},
  business:{avg:'32,000',demand:'طلب متوسط 🟢'},
  craft:{avg:'25,000',demand:'طلب متوسط 🟢'},
  food:{avg:'18,000',demand:'طلب عالٍ 🟡'},
  beauty:{avg:'20,000',demand:'طلب عالٍ 🟡'},
  agriculture:{avg:'22,000',demand:'طلب متوسط 🟢'},
  tech:{avg:'30,000',demand:'طلب عالٍ 🟡'},
};

function selectDomain(domain, label) {
  selectedDomain = domain;
  document.querySelectorAll('.domain-btn').forEach(b=>b.classList.remove('active'));
  event.target.closest('.domain-btn').classList.add('active');
  const e = earnings[domain]||{avg:'25,000',demand:'طلب جيد'};
  document.getElementById('earn-val').textContent = e.avg + ' SDG';
  document.getElementById('earn-demand').textContent = e.demand;
  document.getElementById('earnings-preview').style.display='block';
}

async function submitRegistration() {
  const specialty = document.getElementById('specialty').value.trim();
  const bio       = document.getElementById('bio').value.trim();
  const price     = document.getElementById('price').value;
  if (!selectedDomain) { showToast('اختر مجالك أولاً'); return; }
  if (!specialty || specialty.length < 5) { showToast('أدخل تخصصك الدقيق'); return; }
  if (!bio || bio.length < 20) { showToast('أضف وصفاً مختصراً عنك (20 حرف على الأقل)'); return; }

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

  try {
    const r = await fetch('/api/providers/apply.php', {
      method:'POST', headers:{'Content-Type':'application/json'},
      body: JSON.stringify({
        domain:       selectedDomain,
        specialty:    specialty,
        experience:   document.getElementById('experience').value,
        qualification:document.getElementById('qualification').value,
        bio:          bio,
        availability: document.getElementById('availability').value,
        hourly_rate:  parseFloat(price)||0,
      })
    });
    const d = await r.json();
    if (d.ok || d.success) {
      showToast('🎉 تم استلام طلبك! سنتواصل معك خلال 24 ساعة.');
      setTimeout(()=>window.location.href='/app/dashboard.php', 2500);
    } else {
      showToast('❌ ' + (d.message || d.error || 'حدث خطأ'));
      btn.disabled=false; btn.textContent='🚀 سجِّل كمزود خدمة — مجاناً';
    }
  } catch(e) {
    showToast('❌ تعذّر الاتصال');
    btn.disabled=false; btn.textContent='🚀 سجِّل كمزود خدمة — مجاناً';
  }
}

function showToast(msg) {
  const t=document.getElementById('toast');
  t.textContent=msg; t.style.display='block';
  setTimeout(()=>t.style.display='none',3000);
}
</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:#64748b;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>