<?php
declare(strict_types=1);

require_once __DIR__ . '/bootstrap_public.php';
$pdo = getPDO();

$errors = [];

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $beneficiary_id  = (int)($_POST['beneficiary_id'] ?? 0);
    $name            = trim((string)($_POST['requester_name'] ?? ''));
    $phone           = trim((string)($_POST['requester_phone'] ?? ''));
    $q1              = trim((string)($_POST['q1'] ?? ''));
    $q2              = trim((string)($_POST['q2'] ?? ''));
    $q3              = trim((string)($_POST['q3'] ?? ''));

    if ($beneficiary_id <= 0) $errors[] = 'اختر اليتيم من نتائج البحث.';
    if ($name === '') $errors[] = 'الاسم مطلوب.';
    if ($phone === '') $errors[] = 'رقم الجوال مطلوب.';

    // ensure orphan type
    if ($beneficiary_id > 0) {
        $chk = $pdo->prepare("SELECT beneficiary_type_id FROM beneficiaries WHERE id=? LIMIT 1");
        $chk->execute([$beneficiary_id]);
        $tid = (int)($chk->fetchColumn() ?: 0);
        if ($tid !== 2) $errors[] = 'المنتفع المختار ليس من   سم الأيتام.';
    }

    if (!$errors) {
        $answers = ['q1'=>$q1,'q2'=>$q2,'q3'=>$q3];

        try {
            $st = $pdo->prepare("
                INSERT INTO sponsor_access_requests
                (beneficiary_id, requester_name, requester_phone, answers_json, status, created_at)
                VALUES (?,?,?,?, 'pending', NOW())
            ");
            $st->execute([$beneficiary_id, $name, $phone, orphan_json($answers)]);
        } catch (Throwable $e) {
            error_log("SPONSOR_REQUEST_INSERT_FAILED: " . $e->getMessage());
            $errors[] = 'حدث خطأ داخلي أثناء حفظ الطلب. يرجى المحاولة لاحقًا.';
        }

        if (!$errors) {
            header('Location: ' . ORPHAN_PUBLIC_BASE . '/public/verify.php?msg=sent');
            exit;
        }
    }
}
?>
<!doctype html>
<html lang="ar" dir="rtl">
<head>
  <meta charset="utf-8">
  <title>طلب كفالة يتيم | لجنة زكاة وصدقات مخيم حطين</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Bootstrap 5 RTL -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.rtl.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
  <!-- Cairo -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;800&display=swap" rel="stylesheet">

  <style>
    body{font-family:'Cairo',sans-serif;background:#f2f6fb;color:#142033}
    .hero{
      background: radial-gradient(1200px 600px at 20% 20%, rgba(255,255,255,.22), transparent 60%),
                  linear-gradient(135deg,#0b2550,#123b78 55%, #195aa8);
      color:#fff;border-radius:18px;padding:22px 20px;
      box-shadow:0 18px 40px rgba(16,38,76,.20);
      position:relative;overflow:hidden
    }
    .hero:after{
      content:''; position:absolute; left:-60px; bottom:-60px; width:240px; height:240px;
      background:rgba(255,255,255,.08); border-radius:50%;
    }
    .cardx{border:0;border-radius:18px;box-shadow:0 18px 40px rgba(16,38,76,.10)}
    .step{
      border:1px solid #e9eef6;border-radius:16px;background:#fff;padding:14px;height:100%
    }
    .step .n{
      width:32px;height:32px;border-radius:12px;background:#f2f6ff;color:#1a4a8a;
      font-weight:900;display:flex;align-items:center;justify-content:center
    }
    .btn{font-weight:800;border-radius:14px}
    .form-label{font-weight:800}
    input,select,textarea{direction:rtl}
    .smallhint{color:#6b7a8e;font-size:.9rem}
  </style>
</head>
<body>

<div class="container py-4">

  <!-- Header -->
  <div class="hero mb-3">
    <div class="d-flex justify-content-between align-items-start flex-wrap gap-3">
      <div>
        <h3 class="fw-bold mb-1">طلب الوصول لملف كفالة (الأيتام)</h3>
        <div class="opacity-75">
          بعد مراجعة الطلب سيتم إرسال كود/رابط واتساب يدويًا من الإدارة.
        </div>
      </div>
      <div class="d-flex gap-2 flex-wrap">
        <a class="btn btn-light" href="<?= ORPHAN_PUBLIC_BASE ?>/index.php">
          <i class="bi bi-arrow-right-circle me-1"></i> الرجوع
        </a>
        <a class="btn btn-outline-light" href="/zaka/">
          <i class="bi bi-grid-1x2 me-1"></i> بوابة النظام
        </a>
      </div>
    </div>
  </div>

  <!-- Errors -->
  <?php if (!empty($errors)): ?>
    <div class="alert alert-danger d-flex align-items-start gap-2" role="alert">
      <i class="bi bi-exclamation-triangle-fill"></i>
      <div>
        <div class="fw-bold mb-1">يرجى تصحيح الأخطاء التالية:</div>
        <ul class="mb-0">
          <?php foreach ($errors as $err): ?>
            <li><?= e((string)$err) ?></li>
          <?php endforeach; ?>
        </ul>
      </div>
    </div>
  <?php endif; ?>

  <div class="row g-3 align-items-stretch">
    <!-- Left info -->
    <div class="col-12 col-lg-5">
      <div class="card cardx h-100">
        <div class="card-body p-4">
          <h5 class="fw-bold mb-3"><i class="bi bi-info-circle me-1"></i>كيف تتم الكفا  ة؟</h5>

          <div class="row g-2">
            <div class="col-12">
              <div class="step">
                <div class="d-flex gap-2 align-items-center mb-1">
                  <div class="n">1</div><div class="fw-bold">ابحث واختر اليتيم</div>
                </div>
                <div class="smallhint">اكتب الاسم أو رقم الملف، ثم اختر من القائمة.</div>
              </div>
            </div>
            <div class="col-12">
              <div class="step">
                <div class="d-flex gap-2 align-items-center mb-1">
                  <div class="n">2</div><div class="fw-bold">أدخل بيانات التواصل</div>
                </div>
                <div class="smallhint">رقم الهاتف/الواتساب بدقة لتلقي الرد.</div>
              </div>
            </div>
            <div class="col-12">
              <div class="step">
                <div class="d-flex gap-2 align-items-center mb-1">
                  <div class="n">3</div><div class="fw-bold">إرسال الطلب</div>
                </div>
                <div class="smallhint">بعد مراجعة الإدارة سيتم التواصل معك.</div>
              </div>
            </div>
          </div>

          <hr class="my-3">

          <div class="smallhint">
            <i class="bi bi-shield-lock me-1"></i>
            نلتزم بالخصوصية: سيتم مشاركة المعلومات والوثائق المسموح بها فقط.
          </div>
        </div>
      </div>
    </div>

    <!-- Form -->
    <div class="col-12 col-lg-7">
      <div class="card cardx">
        <div class="card-body p-4">
          <form method="post" id="reqForm" novalidate>
            <h5 class="fw-bold mb-3"><i class="bi bi-ui-checks-grid me-1"></i>نموذج الطلب</h5>

            <div class="row g-3">
              <div class="col-12">
                <div class="fw-bold mb-2">اختيار اليتيم</div>
              </div>

              <div class="col-12 col-md-6">
                <label class="form-label">بحث عن اليتيم <span class="text-danger">*</span></label>
                <input type="text" id="orphanSearch" class="form-control" placeholder="اكتب الاسم أو رقم الملف..." autocomplete="off" required>
                <div class="form-text">البحث محصور على قسم الأيتام فقط.</div>
              </div>

              <div class="col-12 col-md-6">
                <label class="form-label">نتائج البحث <span class="text-danger">*</span></label>
                <!-- ✅ name=beneficiary_id لضمان وصوله في POST -->
                <select id="orphanPick" name="beneficiary_id" class="form-select" required>
                  <option value="">— اختر من النتائج —</option>
                </select>
              </div>

              <div class="col-12">
                <hr class="my-2">
                <div class="fw-bold mb-2">بيانات مقدم الطلب</div>
              </div>

              <div class="col-12 col-md-6">
                <label class="form-label">الاسم <span class="text-danger">*</span></label>
                <input type="text" name="requester_name" class="form-control" required value="<?= e((string)($_POST['requester_name'] ?? '')) ?>">
              </div>

              <div class="col-12 col-md-6">
                <label class="form-label">رقم الجوال (واتساب) <span class="text-danger">*</span></label>
                <input type="text" name="requester_phone" class="form-control" placeholder="مثال: 079xxxxxxx" required value="<?= e((string)($_POST['requester_phone'] ?? '')) ?>">
              </div>

              <div class="col-12">
                <hr class="my-2">
                <div class="fw-bold mb-2">أسئلة سريعة (اختياري)</div>
              </div>

              <div class="col-12 col-md-6">
                <label class="form-label">لماذا تريد الكفالة؟</label>
                <input type="text" name="q1" class="form-control" value="<?= e((string)($_POST['q1'] ?? '')) ?>">
              </div>

              <div class="col-12 col-md-6">
                <label class="form-label">هل سبق لك كفالة من قبل؟</label>
                <input type="text" name="q2" class="form-control" value="<?= e((string)($_POST['q2'] ?? '')) ?>">
              </div>

              <div class="col-12">
                <label class="form-label">ملاحظات إضافية</label>
                <textarea name="q3" class="form-control" rows="3"><?= e((string)($_POST['q3'] ?? '')) ?></textarea>
              </div>

              <div class="col-12 d-flex gap-2 flex-wrap mt-2">
                <button class="btn btn-primary" type="submit">
                  <i class="bi bi-send me-1"></i> إرسال الطلب
                </button>
                <a class="btn btn-outline-secondary" href="<?= ORPHAN_PUBLIC_BASE ?>/index.php">
                  <i class="bi bi-arrow-right me-1"></i> رجوع
                </a>
              </div>

              <div class="col-12">
                <div class="smallhint mt-2">
                  بالضغط على “إرسال الطلب” أنت توافق على أن يتم التواصل معك لمتابعة الطلب.
                </div>
              </div>
            </div>

          </form>
        </div>
      </div>
    </div>
  </div>

  <div class="text-center text-muted small mt-4">
    © <?= date('Y') ?> — لجنة زكاة وصدقات مخيم حطين
  </div>

</div>

<script>
(function(){
  const search = document.getElementById('orphanSearch');
  const pick = document.getElementById('orphanPick');
  const form = document.getElementById('reqForm');
  let timer = null;

  async function fetchOrphans(q){
    const url = 'ajax_orphans.php?q=' + encodeURIComponent(q || '');
    const res = await fetch(url, {credentials:'same-origin'});
    return res.json();
  }

  async function refresh(){
    const q = (search.value || '').trim();
    const data = await fetchOrphans(q);
    if (!data.ok) return;

    pick.innerHTML = '<option value="">— اختر من النتائج —</option>';
    data.data.forEach(r => {
      const opt = document.createElement('option');
      opt.value = String(r.id);
      opt.textContent = `(${r.file_number}) ${r.full_name}`;
      pick.appendChild(opt);
    });
  }

  search.addEventListener('input', () => {
    clearTimeout(timer);
    timer = setTimeout(refresh, 250);
  });

  form.addEventListener('submit', (e) => {
    if (!pick.value) {
      e.preventDefault();
      alert('اختر اليتيم من نتائج البحث.');
    }
  });
})();
</script>

</body>
</html>