<?php
declare(strict_types=1);

if (session_status() !== PHP_SESSION_ACTIVE) {
    session_start();
}

require_once __DIR__ . '/../../db.php';
require_once __DIR__ . '/../../inc/otp_helper.php';
require_once __DIR__ . '/../../inc/otp_sender.php';

$pdo = db();
if (!$pdo instanceof PDO) {
    http_response_code(500);
    exit('DB not ready');
}

$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
$pdo->setAttribute(PDO::ATTR_DEFAULT_FETCH_MODE, PDO::FETCH_ASSOC);

if (!function_exists('h')) {
    function h($v): string
    {
        return htmlspecialchars((string)$v, ENT_QUOTES, 'UTF-8');
    }
}

if (!function_exists('table_columns')) {
    function table_columns(PDO $pdo, string $table): array
    {
        try {
            $st = $pdo->query("
                SELECT COLUMN_NAME
                FROM INFORMATION_SCHEMA.COLUMNS
                WHERE TABLE_SCHEMA = DATABASE()
                  AND TABLE_NAME = " . $pdo->quote($table)
            );
            return $st->fetchAll(PDO::FETCH_COLUMN) ?: [];
        } catch (Throwable $e) {
            return [];
        }
    }
}

if (!function_exists('has_col')) {
    function has_col(array $cols, string $name): bool
    {
        return in_array($name, $cols, true);
    }
}

if (!function_exists('status_label_ar')) {
    function status_label_ar(?string $status): string
    {
        $status = trim((string)$status);

        return match ($status) {
            'pending'   => 'قيد الانتظار',
            'signed'    => 'تم التوقيع',
            'cancelled' => 'ملغي',
            'expired'   => 'منتهي',
            'draft'     => 'مسودة',
            default     => $status !== '' ? $status : '—',
        };
    }
}

if (!function_exists('first_existing_column')) {
    function first_existing_column(array $columns, array $candidates): ?string
    {
        foreach ($candidates as $col) {
            if (in_array($col, $columns, true)) {
                return $col;
            }
        }
        return null;
    }
}

if (!function_exists('fetch_sign_request_with_contract')) {
    function fetch_sign_request_with_contract(
        PDO $pdo,
        string $token,
        string $shortCode,
        array $contractCols,
        array $signReqCols
    ): array|false {
        $titleCol = first_existing_column($contractCols, [
            'title',
            'contract_name',
            'name',
            'subject'
        ]);

        $contractNoCol = first_existing_column($contractCols, [
            'contract_no',
            'transaction_id',
            'contract_number',
            'reference_no'
        ]);

        $contentHtmlCol = first_existing_column($contractCols, [
            'contract_html',
            'content_html',
            'html_content',
            'template_html',
            'body_html'
        ]);

        $contentTextCol = first_existing_column($contractCols, [
            'contract_content',
            'content',
            'body',
            'description',
            'details',
            'contract_text',
            'text_content'
        ]);

        $titleExpr       = $titleCol ? "c.`{$titleCol}`" : "''";
        $contractNoExpr  = $contractNoCol ? "c.`{$contractNoCol}`" : "CAST(c.id AS CHAR)";
        $contentHtmlExpr = $contentHtmlCol ? "c.`{$contentHtmlCol}`" : "NULL";
        $contentTextExpr = $contentTextCol ? "c.`{$contentTextCol}`" : "NULL";

        $hasShortCode = in_array('short_code', $signReqCols, true);

        $sqlBase = "
            SELECT
                sr.*,
                {$titleExpr} AS contract_title,
                {$contractNoExpr} AS contract_no,
                {$contentHtmlExpr} AS content_html,
                {$contentTextExpr} AS content_text,
                c.id AS contract_id
            FROM contract_sign_requests sr
            JOIN contracts c ON c.id = sr.contract_id
        ";

        if ($shortCode !== '') {
            if (!$hasShortCode) {
                return false;
            }

            $st = $pdo->prepare($sqlBase . " WHERE sr.short_code = ? LIMIT 1");
            $st->execute([$shortCode]);
        } else {
            $st = $pdo->prepare($sqlBase . " WHERE sr.sign_token = ? LIMIT 1");
            $st->execute([$token]);
        }

        return $st->fetch();
    }
}

$token     = trim((string)($_GET['token'] ?? $_POST['token'] ?? ''));
$shortCode = strtoupper(trim((string)($_GET['c'] ?? $_POST['c'] ?? '')));

if ($token === '' && $shortCode === '') {
    exit('رابط التوقيع غير صالح');
}

$contractCols      = table_columns($pdo, 'contracts');
$signReqCols       = table_columns($pdo, 'contract_sign_requests');
$contractLogsCols  = table_columns($pdo, 'contract_logs');

$contentHtmlCol = first_existing_column($contractCols, [
    'contract_html',
    'content_html',
    'html_content',
    'template_html',
    'body_html'
]);

$contentTextCol = first_existing_column($contractCols, [
    'contract_content',
    'content',
    'body',
    'description',
    'details',
    'contract_text',
    'text_content'
]);

$req = fetch_sign_request_with_contract($pdo, $token, $shortCode, $contractCols, $signReqCols);

if (!$req) {
    exit('طلب التوقيع غير موجود');
}

$currentLinkKey = $shortCode !== ''
    ? 'c=' . urlencode($shortCode)
    : 'token=' . urlencode($token);

if ((string)($req['status'] ?? '') === 'signed') {
    header('Location: complete.php?' . $currentLinkKey);
    exit;
}

/* ===== دعم OTP ===== */
$otpSupported =
    has_col($signReqCols, 'otp_code') &&
    has_col($signReqCols, 'otp_channel') &&
    has_col($signReqCols, 'otp_sent_to') &&
    has_col($signReqCols, 'otp_expires_at') &&
    has_col($signReqCols, 'otp_verified_at') &&
    has_col($signReqCols, 'otp_attempts') &&
    has_col($signReqCols, 'otp_last_sent_at');

$errors = [];
$successMessage = '';
$testOtpCode = '';

$action   = trim((string)($_POST['action'] ?? ''));
$name     = trim((string)($_POST['signer_name'] ?? ($req['signer_name'] ?? '')));
$agree    = isset($_POST['agree']) ? '1' : '0';
$sig      = trim((string)($_POST['signature_data'] ?? ''));
$otpInput = trim((string)($_POST['otp_code'] ?? ''));

$signerEmail = trim((string)($req['signer_email'] ?? ''));
$signerPhone = trim((string)($req['signer_phone'] ?? ''));

$otpChannel = '';
$otpSentTo  = '';

if ($signerEmail !== '' && filter_var($signerEmail, FILTER_VALIDATE_EMAIL)) {
    $otpChannel = 'email';
    $otpSentTo  = $signerEmail;
} elseif ($signerPhone !== '') {
    $otpChannel = 'phone';
    $otpSentTo  = $signerPhone;
}

$otpVerified = !empty($req['otp_verified_at']);

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    if (!$otpSupported) {
        $errors[] = 'نظام OTP غير مفعّل بعد. يرجى إضافة أعمدة OTP إلى جدول contract_sign_requests.';
    } else {
        if ($action === 'send_otp') {
            if ($otpChannel === '' || $otpSentTo === '') {
                $errors[] = 'لا توجد وسيلة إرسال متاحة. يرجى التأكد من وجود بريد إلكتروني أو رقم هاتف في طلب التوقيع.';
            } elseif (!empty($req['otp_last_sent_at']) && (strtotime((string)$req['otp_last_sent_at']) + 60) > time()) {
                $errors[] = 'تم إرسال رمز مؤخرًا. يرجى الانتظار دقيقة قبل إعادة الإرسال.';
            } else {
                try {
                    $otpData = create_otp_payload(10);
                    $otpCode = (string)$otpData['code'];
                    $expiresAt = (string)$otpData['expires_at'];

                    $upOtp = $pdo->prepare("
                        UPDATE contract_sign_requests
                        SET otp_code = ?,
                            otp_channel = ?,
                            otp_sent_to = ?,
                            otp_expires_at = ?,
                            otp_verified_at = NULL,
                            otp_attempts = 0,
                            otp_last_sent_at = NOW()
                        WHERE id = ?
                    ");
                    $upOtp->execute([
                        $otpCode,
                        $otpChannel,
                        $otpSentTo,
                        $expiresAt,
                        (int)$req['id']
                    ]);

                    $sent = false;

                    if (function_exists('send_contract_otp')) {
                        $sent = (bool) send_contract_otp([
                            'channel' => $otpChannel,
                            'to'      => $otpSentTo,
                            'code'    => $otpCode,
                            'name'    => $name,
                            'request' => $req,
                        ]);
                    }

                    if (!$sent) {
                        $testOtpCode = $otpCode;
                        $successMessage = 'تم إنشاء رمز التحقق وحفظه بنجاح. الإرسال الفعلي غير مربوط بعد، لذلك يظهر لك رمز الاختبار مؤقتًا.';
                    } else {
                        $successMessage = 'تم إرسال رمز التحقق بنجاح إلى ' .
                            ($otpChannel === 'email' ? mask_email($otpSentTo) : mask_phone($otpSentTo));
                    }

                    $req = fetch_sign_request_with_contract($pdo, $token, $shortCode, $contractCols, $signReqCols);
                    $otpVerified = !empty($req['otp_verified_at']);
                } catch (Throwable $e) {
                    $errors[] = 'تعذر إرسال رمز التحقق: ' . $e->getMessage();
                }
            }
        } elseif ($action === 'verify_otp') {
            if ($otpInput === '') {
                $errors[] = 'يرجى إدخال رمز التحقق.';
            } else {
                try {
                    $checkOtp = $pdo->prepare("
                        SELECT id, otp_code, otp_expires_at, otp_attempts
                        FROM contract_sign_requests
                        WHERE id = ?
                        LIMIT 1
                    ");
                    $checkOtp->execute([(int)$req['id']]);
                    $otpRow = $checkOtp->fetch();

                    if (!$otpRow) {
                        $errors[] = 'طلب التحقق غير موجود.';
                    } elseif ((int)($otpRow['otp_attempts'] ?? 0) >= 5) {
                        $errors[] = 'تم تجاوز عدد محاولات التحقق المسموح.';
                    } elseif (empty($otpRow['otp_code'])) {
                        $errors[] = 'يرجى طلب رمز تحقق أولاً.';
                    } elseif (otp_is_expired((string)($otpRow['otp_expires_at'] ?? null))) {
                        $errors[] = 'انتهت صلاحية رمز التحقق. اطلب رمزًا جديدًا.';
                    } elseif (!otp_match((string)$otpRow['otp_code'], $otpInput)) {
                        $pdo->prepare("
                            UPDATE contract_sign_requests
                            SET otp_attempts = otp_attempts + 1
                            WHERE id = ?
                        ")->execute([(int)$req['id']]);

                        $errors[] = 'رمز التحقق غير صحيح.';
                    } else {
                        $pdo->prepare("
                            UPDATE contract_sign_requests
                            SET otp_verified_at = NOW()
                            WHERE id = ?
                        ")->execute([(int)$req['id']]);

                        $successMessage = 'تم التحقق من رمز OTP بنجاح. يمكنك الآن اعتماد التوقيع.';
                        $req = fetch_sign_request_with_contract($pdo, $token, $shortCode, $contractCols, $signReqCols);
                        $otpVerified = !empty($req['otp_verified_at']);
                    }
                } catch (Throwable $e) {
                    $errors[] = 'تعذر التحقق من رمز OTP: ' . $e->getMessage();
                }
            }
        } elseif ($action === 'sign') {
            if ($name === '') {
                $errors[] = 'يرجى كتابة اسم الموقّع.';
            }

            if ($agree !== '1') {
                $errors[] = 'يرجى تأكيد الموافقة قبل التوقيع.';
            }

            if (!$otpVerified) {
                $errors[] = 'يجب التحقق من رمز OTP قبل اعتماد التوقيع.';
            }

            if ($sig === '') {
                $errors[] = 'يرجى إضافة التوقيع.';
            }

            if (!$errors) {
                if (!preg_match('/^data:image\/png;base64,/', $sig)) {
                    $errors[] = 'صيغة التوقيع غير صالحة.';
                } else {
                    $raw = base64_decode(substr($sig, strpos($sig, ',') + 1), true);

                    if ($raw === false) {
                        $errors[] = 'تعذر قراءة ملف التوقيع.';
                    } else {
                        $dir = __DIR__ . '/../../uploads/signatures/';

                        if (!is_dir($dir) && !mkdir($dir, 0775, true) && !is_dir($dir)) {
                            $errors[] = 'تعذر إنشاء مجلد التوقيعات.';
                        } else {
                            try {
                                $file = 'sign_' . time() . '_' . bin2hex(random_bytes(4)) . '.png';
                                $full = $dir . $file;

                                if (file_put_contents($full, $raw) === false) {
                                    throw new RuntimeException('تعذر حفظ ملف التوقيع.');
                                }

                                $rel = 'uploads/signatures/' . $file;
                                $ip  = $_SERVER['REMOTE_ADDR'] ?? '';

                                $pdo->beginTransaction();

                                $ins = $pdo->prepare("
                                    INSERT INTO contract_signatures
                                    (contract_id, sign_request_id, signer_name, signature_file, signed_at, ip_address)
                                    VALUES (?, ?, ?, ?, NOW(), ?)
                                ");
                                $ins->execute([
                                    (int)$req['contract_id'],
                                    (int)$req['id'],
                                    $name,
                                    $rel,
                                    $ip
                                ]);

                                $upReq = $pdo->prepare("
                                    UPDATE contract_sign_requests
                                    SET status = 'signed',
                                        signed_at = NOW(),
                                        ip_address = ?
                                    WHERE id = ?
                                ");
                                $upReq->execute([
                                    $ip,
                                    (int)$req['id']
                                ]);

                                $upCon = $pdo->prepare("
                                    UPDATE contracts
                                    SET status = 'signed',
                                        updated_at = NOW()
                                    WHERE id = ?
                                ");
                                $upCon->execute([
                                    (int)$req['contract_id']
                                ]);

                                if (
                                    has_col($contractLogsCols, 'contract_id') &&
                                    has_col($contractLogsCols, 'action')
                                ) {
                                    $logCols = ['contract_id', 'action'];
                                    $logVals = ['?', '?'];
                                    $logParams = [(int)$req['contract_id'], 'signed'];

                                    if (has_col($contractLogsCols, 'notes')) {
                                        $logCols[] = 'notes';
                                        $logVals[] = '?';
                                        $logParams[] = 'تم التوقيع إلكترونيًا بواسطة: ' . $name . ' بعد التحقق عبر OTP';
                                    }

                                    if (has_col($contractLogsCols, 'action_by')) {
                                        $logCols[] = 'action_by';
                                        $logVals[] = 'NULL';
                                    }

                                    if (has_col($contractLogsCols, 'created_at')) {
                                        $logCols[] = 'created_at';
                                        $logVals[] = 'NOW()';
                                    }

                                    $log = $pdo->prepare("
                                        INSERT INTO contract_logs
                                        (" . implode(', ', $logCols) . ")
                                        VALUES (" . implode(', ', $logVals) . ")
                                    ");
                                    $log->execute($logParams);
                                }

                                $pdo->commit();

                                header('Location: complete.php?' . $currentLinkKey);
                                exit;
                            } catch (Throwable $e) {
                                if ($pdo->inTransaction()) {
                                    $pdo->rollBack();
                                }
                                $errors[] = 'حدث خطأ أثناء حفظ التوقيع: ' . $e->getMessage();
                            }
                        }
                    }
                }
            }
        }
    }
}

$statusLabel   = status_label_ar((string)($req['status'] ?? ''));
$contractTitle = trim((string)($req['contract_title'] ?? ''));
$contractNo    = trim((string)($req['contract_no'] ?? ''));
$contractHtml  = trim((string)($req['content_html'] ?? ''));
$contractText  = trim((string)($req['content_text'] ?? ''));

$statusClass = '';
if ((string)($req['status'] ?? '') === 'pending') {
    $statusClass = 'status-pending';
} elseif ((string)($req['status'] ?? '') === 'signed') {
    $statusClass = 'status-signed';
} elseif (in_array((string)($req['status'] ?? ''), ['cancelled', 'expired'], true)) {
    $statusClass = 'status-cancelled';
}

$renderedContract = '';
$contractStorageMessage = '';

if ($contractHtml !== '') {
    $renderedContract = $contractHtml;
} elseif ($contractText !== '') {
    $renderedContract = '<div class="plain-contract">' . nl2br(h($contractText)) . '</div>';
} else {
    if ($contentHtmlCol === null && $contentTextCol === null) {
        $contractStorageMessage = 'لا يوجد عمود مخصص لحفظ نص العقد داخل جدول العقود حالياً.';
    } else {
        $contractStorageMessage = 'يوجد عمود للمحتوى لكن هذا العقد لا يحتوي نصًا محفوظًا فيه.';
    }
}

$otpStatusLabel = $otpVerified ? 'تم التحقق' : 'لم يتم التحقق بعد';
$maskedTarget = '';
if ($otpChannel === 'email' && $otpSentTo !== '') {
    $maskedTarget = mask_email($otpSentTo);
} elseif ($otpChannel === 'phone' && $otpSentTo !== '') {
    $maskedTarget = mask_phone($otpSentTo);
}

$progressPercent = 25;
if ($otpSupported && !empty($req['otp_last_sent_at'])) {
    $progressPercent = 50;
}
if ($otpVerified) {
    $progressPercent = 75;
}
if ((string)($req['status'] ?? '') === 'signed') {
    $progressPercent = 100;
}
?>
<!doctype html>
<html lang="ar" dir="rtl">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>توقيع العقد</title>
<link href="https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;800;900&display=swap" rel="stylesheet">
<style>
:root{
  --bg:#06141b;
  --bg2:#0a202a;
  --card:#0d2430;
  --card2:rgba(255,255,255,.06);
  --line:rgba(255,255,255,.08);
  --line2:rgba(255,255,255,.12);
  --text:#f4fbff;
  --muted:#97aab3;
  --teal:#00b7c9;
  --teal2:#008fa3;
  --gold:#d4af37;
  --gold2:#f0cf6b;
  --ok:#1dbf73;
  --warn:#c98a0b;
  --danger:#d84f5f;
  --shadow:0 24px 60px rgba(0,0,0,.35);
  --radius:24px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:'Tajawal',sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at 10% 10%, rgba(0,183,201,.16), transparent 30%),
    radial-gradient(circle at 90% 15%, rgba(212,175,55,.12), transparent 28%),
    radial-gradient(circle at 50% 100%, rgba(0,143,163,.14), transparent 35%),
    linear-gradient(180deg, #06141b 0%, #071821 42%, #081b25 100%);
  min-height:100vh;
}

.page-shell{
  max-width:1400px;
  margin:auto;
  padding:22px;
}

.hero{
  position:relative;
  overflow:hidden;
  border:1px solid var(--line);
  background:
    linear-gradient(135deg, rgba(0,183,201,.18), rgba(212,175,55,.08)),
    linear-gradient(135deg, #092634, #0b3543 55%, #0f4350 100%);
  border-radius:32px;
  box-shadow:var(--shadow);
  padding:28px;
  margin-bottom:18px;
}

.hero::before{
  content:"";
  position:absolute;
  width:260px;
  height:260px;
  border-radius:50%;
  background:rgba(255,255,255,.05);
  top:-120px;
  left:-70px;
}

.hero::after{
  content:"";
  position:absolute;
  width:340px;
  height:340px;
  border-radius:50%;
  background:rgba(255,255,255,.04);
  bottom:-210px;
  right:-120px;
}

.hero-inner{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:18px;
  align-items:center;
}

.brand-line{
  display:flex;
  gap:12px;
  align-items:center;
  margin-bottom:14px;
}

.brand-badge{
  width:54px;
  height:54px;
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,var(--gold),var(--gold2));
  color:#111;
  font-size:24px;
  box-shadow:0 12px 28px rgba(212,175,55,.25);
}

.brand-meta{
  display:flex;
  flex-direction:column;
  gap:3px;
}

.brand-top{
  font-size:12px;
  color:rgba(255,255,255,.7);
}

.brand-name{
  font-size:18px;
  color:#fff;
  line-height:1.2;
}

.hero-title{
  margin:0 0 10px;
  font-size:42px;
  line-height:1.05;
  color:#fff;
}

.hero-sub{
  margin:0;
  color:rgba(255,255,255,.8);
  font-size:15px;
  line-height:2;
  max-width:760px;
}

.hero-side{
  display:grid;
  gap:12px;
}

.hero-stat{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  border-radius:20px;
  padding:14px 16px;
  backdrop-filter:blur(8px);
}

.hero-stat-label{
  font-size:12px;
  color:rgba(255,255,255,.7);
  margin-bottom:6px;
}

.hero-stat-value{
  font-size:20px;
  color:#fff;
  line-height:1.4;
}

.progress-card{
  margin-top:16px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.10);
  border-radius:20px;
  padding:14px;
}

.progress-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-bottom:10px;
  font-size:13px;
  color:rgba(255,255,255,.78);
}

.progress-bar{
  width:100%;
  height:10px;
  background:rgba(255,255,255,.08);
  border-radius:999px;
  overflow:hidden;
}

.progress-bar > span{
  display:block;
  height:100%;
  width:<?= (int)$progressPercent ?>%;
  border-radius:999px;
  background:linear-gradient(90deg,var(--gold),var(--teal));
  box-shadow:0 0 18px rgba(0,183,201,.35);
}

.steps{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
  margin-top:14px;
}

.step{
  border:1px solid var(--line);
  background:rgba(255,255,255,.04);
  border-radius:18px;
  padding:12px;
  min-height:82px;
}

.step-num{
  width:28px;
  height:28px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.08);
  color:#fff;
  font-size:13px;
  margin-bottom:8px;
}

.step-title{
  font-size:14px;
  color:#fff;
  line-height:1.5;
}

.step-text{
  font-size:12px;
  color:var(--muted);
  margin-top:4px;
  line-height:1.7;
}

.step.active{
  border-color:rgba(0,183,201,.36);
  background:linear-gradient(180deg, rgba(0,183,201,.14), rgba(255,255,255,.03));
}

.layout{
  display:grid;
  grid-template-columns:minmax(380px,440px) minmax(0,1fr);
  gap:18px;
  align-items:start;
}

.panel{
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid var(--line);
  border-radius:28px;
  box-shadow:var(--shadow);
  overflow:hidden;
  backdrop-filter:blur(14px);
}

.panel-head{
  padding:20px 22px;
  border-bottom:1px solid rgba(255,255,255,.07);
  background:rgba(255,255,255,.03);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.panel-title{
  margin:0;
  font-size:28px;
  color:#fff;
  line-height:1.1;
}

.panel-sub{
  margin-top:6px;
  color:var(--muted);
  font-size:13px;
}

.panel-body{
  padding:22px;
}

.content-panel .panel-body{
  padding:0;
}

.contract-scroll{
  padding:22px;
  max-height:calc(100vh - 220px);
  overflow:auto;
}

.contract-scroll::-webkit-scrollbar{
  width:10px;
}
.contract-scroll::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.12);
  border-radius:999px;
}
.contract-scroll::-webkit-scrollbar-track{
  background:transparent;
}

.preview-shell{
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02));
  border-radius:0 0 28px 28px;
}

.preview{
  background:#ffffff;
  color:#16323a;
  border:1px solid #e3edf0;
  border-radius:24px;
  padding:30px 24px;
  line-height:2.1;
  min-height:540px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
}

.preview h1,
.preview h2,
.preview h3,
.preview h4{
  color:#0d4250;
  text-align:center;
  margin-top:0;
}

.preview p{
  margin:0 0 14px;
}

.plain-contract{
  white-space:normal;
  line-height:2.2;
}

.content-empty{
  color:#60767d;
  text-align:center;
  padding:40px 10px;
}

.stack{
  display:grid;
  gap:14px;
}

.flash{
  border-radius:18px;
  padding:15px 16px;
  line-height:1.9;
  font-size:14px;
}

.flash.err{
  background:rgba(216,79,95,.12);
  color:#ffd6dc;
  border:1px solid rgba(216,79,95,.3);
}

.flash.ok{
  background:rgba(29,191,115,.12);
  color:#d5ffeb;
  border:1px solid rgba(29,191,115,.28);
}

.flash.info{
  background:rgba(201,138,11,.12);
  color:#ffe6b7;
  border:1px solid rgba(201,138,11,.28);
}

.meta-grid{
  display:grid;
  gap:12px;
}

.meta-card{
  border:1px solid var(--line);
  background:rgba(255,255,255,.03);
  border-radius:18px;
  padding:14px 16px;
}

.meta-label{
  font-size:12px;
  color:var(--muted);
  margin-bottom:6px;
}

.meta-value{
  color:#fff;
  font-size:15px;
  line-height:1.8;
}

.meta-value.status-pending{color:#ffd77f}
.meta-value.status-signed{color:#84efb6}
.meta-value.status-cancelled,
.meta-value.status-expired{color:#ffb0ba}

.section-card{
  border:1px solid var(--line);
  background:rgba(255,255,255,.03);
  border-radius:22px;
  padding:16px;
}

.section-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}

.section-title h3{
  margin:0;
  font-size:18px;
  color:#fff;
}

.section-caption{
  font-size:12px;
  color:var(--muted);
  line-height:1.7;
  margin-top:4px;
}

.field{
  display:grid;
  gap:8px;
  margin-bottom:14px;
}

.field:last-child{
  margin-bottom:0;
}

.field label{
  font-size:14px;
  color:#dff7ff;
}

.input{
  width:100%;
  min-height:56px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:16px;
  padding:14px 16px;
  font-size:15px;
  color:#fff;
  background:rgba(255,255,255,.04);
  outline:none;
  transition:.18s ease;
  backdrop-filter:blur(10px);
}

.input::placeholder{
  color:#8fa5ad;
}

.input:focus{
  border-color:rgba(0,183,201,.5);
  box-shadow:0 0 0 4px rgba(0,183,201,.12);
}

.note{
  font-size:12px;
  color:var(--muted);
  line-height:1.9;
}

.actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.btn{
  border:none;
  border-radius:16px;
  padding:14px 18px;
  text-decoration:none;
  font-size:14px;
  font-weight:800;
  cursor:pointer;
  transition:.18s ease;
  min-height:50px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}

.btn:hover{
  transform:translateY(-1px);
}

.btn-primary{
  background:linear-gradient(135deg,var(--teal2),var(--teal));
  color:#fff;
  box-shadow:0 14px 28px rgba(0,183,201,.22);
}

.btn-gold{
  background:linear-gradient(135deg,var(--gold),var(--gold2));
  color:#111;
  box-shadow:0 14px 28px rgba(212,175,55,.18);
}

.btn-light{
  background:rgba(255,255,255,.05);
  color:#fff;
  border:1px solid rgba(255,255,255,.10);
}

.btn[disabled]{
  opacity:.5;
  cursor:not-allowed;
  transform:none !important;
  box-shadow:none !important;
}

.otp-row{
  display:grid;
  grid-template-columns:1fr auto;
  gap:10px;
}

.otp-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  color:#dff7ff;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-radius:999px;
  padding:8px 12px;
}

.sig-shell{
  border:1px dashed rgba(255,255,255,.16);
  border-radius:22px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  padding:12px;
}

.sig-toolbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:10px;
}

.sig-toolbar-text{
  color:var(--muted);
  font-size:12px;
}

.sig-stage{
  border-radius:18px;
  background:#fff;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
}

.sig-stage canvas{
  width:100%;
  height:230px;
  display:block;
  touch-action:none;
}

.agree-box{
  display:flex;
  gap:10px;
  align-items:flex-start;
  line-height:1.9;
  padding:14px;
  border-radius:18px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
}

.agree-box input{
  margin-top:4px;
}

.mobile-sticky{
  display:none;
}

@media (max-width:1180px){
  .hero-inner{
    grid-template-columns:1fr;
  }

  .steps{
    grid-template-columns:repeat(2,1fr);
  }

  .layout{
    grid-template-columns:1fr;
  }

  .contract-scroll{
    max-height:none;
  }
}

@media (max-width:760px){
  .page-shell{
    padding:14px;
  }

  .hero{
    padding:18px;
    border-radius:26px;
  }

  .hero-title{
    font-size:30px;
  }

  .panel-title{
    font-size:24px;
  }

  .steps{
    grid-template-columns:1fr;
  }

  .preview{
    padding:20px 16px;
    min-height:360px;
    font-size:15px;
  }

  .otp-row{
    grid-template-columns:1fr;
  }

  .actions{
    flex-direction:column;
  }

  .actions .btn{
    width:100%;
  }

  .mobile-sticky{
    display:block;
    position:sticky;
    bottom:10px;
    z-index:30;
    margin-top:14px;
  }

  .mobile-sticky-inner{
    background:rgba(8,27,37,.88);
    backdrop-filter:blur(18px);
    border:1px solid rgba(255,255,255,.1);
    border-radius:20px;
    padding:10px;
    box-shadow:var(--shadow);
  }

  .mobile-sticky .btn{
    width:100%;
  }
}
</style>
</head>
<body>
<div class="page-shell">

  <section class="hero">
    <div class="hero-inner">
      <div>
        <div class="brand-line">
          <div class="brand-badge">✍</div>
          <div class="brand-meta">
            <div class="brand-top">منصة اعتماد العقود الإلكترونية</div>
            <div class="brand-name">Hamdan Legal Group • HLG-ONE</div>
          </div>
        </div>

        <h1 class="hero-title">توقيع إلكتروني لعقدك بشكل آمن واحترافي</h1>
        <p class="hero-sub">
          راجع العقد بعناية، اطلب رمز التحقق، ثم اعتمد توقيعك الإلكتروني. تم تصميم هذه الصفحة لتكون واضحة،
          سريعة، ومريحة على الجوال والكمبيوتر مع أعلى مستوى بصري يتوافق مع هوية النظام.
        </p>

        <div class="progress-card">
          <div class="progress-head">
            <span>مستوى التقدّم في الاعتماد</span>
            <span><?= (int)$progressPercent ?>%</span>
          </div>
          <div class="progress-bar"><span></span></div>

          <div class="steps">
            <div class="step <?= $progressPercent >= 25 ? 'active' : '' ?>">
              <div class="step-num">1</div>
              <div class="step-title">مراجعة العقد</div>
              <div class="step-text">اطّلع على نص العقد كاملًا قبل أي إجراء.</div>
            </div>
            <div class="step <?= $progressPercent >= 50 ? 'active' : '' ?>">
              <div class="step-num">2</div>
              <div class="step-title">إرسال OTP</div>
              <div class="step-text">استلام رمز التحقق على البريد أو الهاتف.</div>
            </div>
            <div class="step <?= $progressPercent >= 75 ? 'active' : '' ?>">
              <div class="step-num">3</div>
              <div class="step-title">التحقق من الرمز</div>
              <div class="step-text">اعتماد الهوية قبل التوقيع النهائي.</div>
            </div>
            <div class="step <?= $progressPercent >= 100 ? 'active' : '' ?>">
              <div class="step-num">4</div>
              <div class="step-title">اعتماد التوقيع</div>
              <div class="step-text">حفظ التوقيع داخل النظام بشكل رسمي.</div>
            </div>
          </div>
        </div>
      </div>

      <div class="hero-side">
        <div class="hero-stat">
          <div class="hero-stat-label">رقم العقد</div>
          <div class="hero-stat-value"><?= h($contractNo !== '' ? $contractNo : '—') ?></div>
        </div>
        <div class="hero-stat">
          <div class="hero-stat-label">عنوان العقد</div>
          <div class="hero-stat-value"><?= h($contractTitle !== '' ? $contractTitle : '—') ?></div>
        </div>
        <div class="hero-stat">
          <div class="hero-stat-label">حالة الطلب الحالية</div>
          <div class="hero-stat-value <?= h($statusClass) ?>"><?= h($statusLabel) ?></div>
        </div>
      </div>
    </div>
  </section>

  <section class="layout">
    <aside class="panel">
      <div class="panel-head">
        <div>
          <h2 class="panel-title">اعتماد التوقيع</h2>
          <div class="panel-sub">أكمل خطوات التحقق والتوقيع من هنا</div>
        </div>
      </div>

      <div class="panel-body">
        <div class="stack">

          <?php if ($errors): ?>
            <div class="flash err">
              <ul style="margin:0;padding-right:18px">
                <?php foreach ($errors as $e): ?>
                  <li><?= h($e) ?></li>
                <?php endforeach; ?>
              </ul>
            </div>
          <?php endif; ?>

          <?php if ($successMessage !== ''): ?>
            <div class="flash ok">
              <?= h($successMessage) ?>
              <?php if ($testOtpCode !== ''): ?>
                <div style="margin-top:8px">رمز الاختبار الحالي: <?= h($testOtpCode) ?></div>
              <?php endif; ?>
            </div>
          <?php endif; ?>

          <?php if (!$otpSupported): ?>
            <div class="flash info">
              نظام OTP غير مفعّل في قاعدة البيانات بعد. أضف أعمدة OTP إلى جدول contract_sign_requests أولاً.
            </div>
          <?php endif; ?>

          <div class="meta-grid">
            <div class="meta-card">
              <div class="meta-label">اسم الموقّع</div>
              <div class="meta-value"><?= h($req['signer_name'] ?? '') ?></div>
            </div>

            <div class="meta-card">
              <div class="meta-label">الحالة</div>
              <div class="meta-value <?= h($statusClass) ?>"><?= h($statusLabel) ?></div>
            </div>

            <div class="meta-card">
              <div class="meta-label">حالة OTP</div>
              <div class="meta-value"><?= h($otpStatusLabel) ?></div>
            </div>

            <?php if ($maskedTarget !== ''): ?>
              <div class="meta-card">
                <div class="meta-label">سيتم الإرسال إلى</div>
                <div class="meta-value"><?= h($maskedTarget) ?></div>
              </div>
            <?php endif; ?>

            <?php if (!empty($req['short_code'])): ?>
              <div class="meta-card">
                <div class="meta-label">الكود المختصر</div>
                <div class="meta-value"><?= h($req['short_code']) ?></div>
              </div>
            <?php endif; ?>
          </div>

          <form method="post" id="signForm" class="stack">
            <?php if ($shortCode !== ''): ?>
              <input type="hidden" name="c" value="<?= h($shortCode) ?>">
            <?php else: ?>
              <input type="hidden" name="token" value="<?= h($token) ?>">
            <?php endif; ?>

            <div class="section-card">
              <div class="section-title">
                <div>
                  <h3>بيانات الموقّع</h3>
                  <div class="section-caption">الاسم الذي سيظهر داخل سجل التوقيع الرسمي</div>
                </div>
              </div>

              <div class="field">
                <label>اسمك كما سيظهر في سجل التوقيع</label>
                <input class="input" type="text" name="signer_name" value="<?= h($name) ?>" placeholder="اكتب اسمك الكامل">
              </div>
            </div>

            <div class="section-card">
              <div class="section-title">
                <div>
                  <h3>التحقق عبر OTP</h3>
                  <div class="section-caption">أرسل رمز التحقق ثم أدخله لاعتماد الهوية قبل التوقيع</div>
                </div>
                <?php if ($maskedTarget !== ''): ?>
                  <div class="otp-badge">🔐 <?= h($maskedTarget) ?></div>
                <?php endif; ?>
              </div>

              <div class="field">
                <label>إرسال رمز التحقق</label>
                <div class="note">
                  <?php if ($maskedTarget !== ''): ?>
                    سيتم إرسال الرمز إلى: <?= h($maskedTarget) ?>
                  <?php else: ?>
                    لا توجد وسيلة إرسال متاحة لهذا الطلب
                  <?php endif; ?>
                </div>
              </div>

              <div class="actions">
                <button class="btn btn-light" type="submit" name="action" value="send_otp" <?= (!$otpSupported || $maskedTarget === '') ? 'disabled' : '' ?>>
                  إرسال OTP
                </button>
              </div>

              <div class="field">
                <label>رمز التحقق</label>
                <div class="otp-row">
                  <input class="input" type="text" name="otp_code" value="<?= h($otpInput) ?>" placeholder="أدخل رمز التحقق">
                  <button class="btn btn-light" type="submit" name="action" value="verify_otp" <?= !$otpSupported ? 'disabled' : '' ?>>
                    تحقق من الرمز
                  </button>
                </div>
              </div>
            </div>

            <div class="section-card">
              <div class="section-title">
                <div>
                  <h3>التوقيع الإلكتروني</h3>
                  <div class="section-caption">استخدم الماوس أو اللمس للتوقيع داخل المساحة التالية</div>
                </div>
              </div>

              <div class="sig-shell">
                <div class="sig-toolbar">
                  <div class="sig-toolbar-text">تأكد أن التوقيع واضح قبل الاعتماد النهائي</div>
                  <button type="button" class="btn btn-light" id="clearBtn">مسح التوقيع</button>
                </div>

                <div class="sig-stage">
                  <canvas id="signature-pad" width="480" height="230"></canvas>
                </div>
              </div>

              <input type="hidden" name="signature_data" id="signature_data">

              <div class="field" style="margin-top:14px;margin-bottom:0">
                <div class="agree-box">
                  <input type="checkbox" name="agree" value="1" <?= isset($_POST['agree']) ? 'checked' : '' ?>>
                  <div>
                    أؤكد أنني راجعت محتوى العقد بالكامل، وأوافق على التوقيع الإلكتروني بالبيانات أعلاه،
                    وأتحمل مسؤولية صحة الاعتماد بعد التحقق من رمز OTP.
                  </div>
                </div>
              </div>
            </div>

            <div class="actions">
              <button class="btn btn-gold" type="submit" name="action" value="sign" <?= (!$otpSupported || !$otpVerified) ? 'disabled' : '' ?>>
                اعتماد التوقيع النهائي
              </button>
            </div>

            <div class="mobile-sticky">
              <div class="mobile-sticky-inner">
                <button class="btn btn-gold" type="submit" name="action" value="sign" <?= (!$otpSupported || !$otpVerified) ? 'disabled' : '' ?>>
                  اعتماد التوقيع النهائي
                </button>
              </div>
            </div>
          </form>
        </div>
      </div>
    </aside>

    <section class="panel content-panel">
      <div class="panel-head">
        <div>
          <h2 class="panel-title">محتوى العقد</h2>
          <div class="panel-sub">راجع البنود كاملة قبل المتابعة إلى خطوة الاعتماد</div>
        </div>
      </div>

      <div class="preview-shell">
        <div class="contract-scroll">
          <div class="preview">
            <?php if ($renderedContract !== ''): ?>
              <?= $renderedContract ?>
            <?php else: ?>
              <div class="content-empty">لا يوجد نص عقد محفوظ لعرضه حالياً.</div>
            <?php endif; ?>
          </div>

          <?php if ($contractStorageMessage !== ''): ?>
            <div class="flash info" style="margin-top:14px">
              <?= h($contractStorageMessage) ?>
            </div>
          <?php endif; ?>
        </div>
      </div>
    </section>
  </section>
</div>

<script>
const canvas = document.getElementById('signature-pad');
const ctx = canvas.getContext('2d');
const signForm = document.getElementById('signForm');
let drawing = false;
let hasSignature = false;
let clickedAction = '';

document.querySelectorAll('button[name="action"]').forEach(btn => {
  btn.addEventListener('click', function () {
    clickedAction = this.value || '';
  });
});

function resizeCanvasForDevicePixelRatio() {
  const ratio = Math.max(window.devicePixelRatio || 1, 1);
  const rect = canvas.getBoundingClientRect();
  const oldImage = hasSignature ? canvas.toDataURL('image/png') : null;

  canvas.width = Math.max(rect.width * ratio, 1);
  canvas.height = Math.max(230 * ratio, 1);

  ctx.setTransform(ratio, 0, 0, ratio, 0, 0);
  ctx.lineWidth = 2.2;
  ctx.lineCap = 'round';
  ctx.lineJoin = 'round';
  ctx.strokeStyle = '#111';

  if (oldImage) {
    const img = new Image();
    img.onload = function () {
      ctx.drawImage(img, 0, 0, rect.width, 230);
    };
    img.src = oldImage;
  }
}

function getPos(e) {
  const rect = canvas.getBoundingClientRect();
  const touch = e.touches ? e.touches[0] : null;
  const x = (touch ? touch.clientX : e.clientX) - rect.left;
  const y = (touch ? touch.clientY : e.clientY) - rect.top;
  return { x, y };
}

function start(e) {
  drawing = true;
  const p = getPos(e);
  ctx.beginPath();
  ctx.moveTo(p.x, p.y);
  e.preventDefault();
}

function move(e) {
  if (!drawing) return;
  const p = getPos(e);
  ctx.lineTo(p.x, p.y);
  ctx.stroke();
  hasSignature = true;
  e.preventDefault();
}

function end() {
  if (!drawing) return;
  drawing = false;
  ctx.beginPath();
}

resizeCanvasForDevicePixelRatio();

canvas.addEventListener('mousedown', start);
canvas.addEventListener('mousemove', move);
canvas.addEventListener('mouseup', end);
canvas.addEventListener('mouseleave', end);

canvas.addEventListener('touchstart', start, { passive:false });
canvas.addEventListener('touchmove', move, { passive:false });
canvas.addEventListener('touchend', end, { passive:false });

window.addEventListener('resize', resizeCanvasForDevicePixelRatio);

document.getElementById('clearBtn').addEventListener('click', () => {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  hasSignature = false;
  document.getElementById('signature_data').value = '';
});

signForm.addEventListener('submit', function () {
  if (clickedAction === 'sign') {
    document.getElementById('signature_data').value = canvas.toDataURL('image/png');
  } else {
    document.getElementById('signature_data').value = '';
  }
});
</script>
</body>
</html>