<!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=Cairo:wght@400;600;700&display=swap" rel="stylesheet">
    <style>
        body { font-family: Cairo, sans-serif; background: #0a0a0a; color: #fff; margin: 0; padding: 24px 16px 48px; line-height: 1.7; }
        .wrap { max-width: 640px; margin: 0 auto; }
        h1 { font-size: 1.35rem; color: #FFD000; margin-bottom: 8px; }
        .box { background: #161616; border: 1px solid #2a2a2a; border-radius: 12px; padding: 20px; margin-bottom: 20px; }
        .terms { white-space: pre-wrap; font-size: 0.95rem; color: #ddd; min-height: 80px; }
        .empty { color: #888; font-style: italic; }
        label { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: 0.95rem; }
        input[type="checkbox"] { margin-top: 4px; width: 18px; height: 18px; accent-color: #FFD000; }
        button { width: 100%; padding: 14px; border: none; border-radius: 10px; background: #FFD000; color: #000; font-weight: 700; font-size: 1rem; cursor: pointer; font-family: inherit; }
        button:disabled { opacity: 0.5; cursor: not-allowed; }
        .alert { padding: 12px 16px; border-radius: 8px; margin-bottom: 16px; font-size: 0.9rem; }
        .alert-success { background: #0d3d1f; color: #8fefa8; border: 1px solid #1a6b35; }
        .alert-error { background: #3d0d0d; color: #f8a8a8; border: 1px solid #6b1a1a; }
        a.link { color: #FFD000; }
    </style>
</head>
<body>
<div class="wrap">
    <h1>تسجيل سائق جديد</h1>
    <p style="color:#aaa;font-size:0.9rem;">اقرأ التعليمات القانونية ثم وافق للانتقال إلى استمارة البيانات والمستمسكات.</p>

    @if(session('success'))
        <div class="alert alert-success">{{ session('success') }}</div>
    @endif
    @if(session('error'))
        <div class="alert alert-error">{{ session('error') }}</div>
    @endif

    <div class="box">
        <h2 style="font-size:1.05rem;margin:0 0 12px;color:#FFD000;">التعليمات القانونية</h2>
        @if(trim((string) $driver_legal_terms) !== '')
            <div class="terms">{{ $driver_legal_terms }}</div>
        @else
            <p class="empty">لم يتم تعيين نص بعد من لوحة التحكم. يمكن للإدارة إضافته من إعدادات التطبيق.</p>
        @endif
    </div>

    <form method="post" action="{{ route('driver.subscribe.accept') }}" id="legalForm">
        @csrf
        <div class="box">
            <label>
                <input type="checkbox" name="legal_accept" value="1" id="legal_accept" required>
                <span>أقر بأنني قرأت التعليمات القانونية وأوافق عليها، وأتعهد بصحة البيانات التي سأرسلها.</span>
            </label>
        </div>
        <button type="submit" id="btnNext">متابعة إلى استمارة التسجيل</button>
    </form>

    <p style="text-align:center;margin-top:24px;font-size:0.85rem;color:#666;">
        لديك حساب؟ <a class="link" href="/">العودة للرئيسية</a>
    </p>
</div>
</body>
</html>
