<?php
// rules.php - Se incluye dentro de support.php o se carga solo
// Asegúrate de que la sesión esté iniciada en el archivo que incluye este
$is_seller = (isset($_SESSION['user_role']) && ($_SESSION['user_role'] === 'seller' || $_SESSION['user_role'] === 'admin'));
?>

<style>
    :root {
        --primary: #00ff88; /* Ajusta según tu variable real si es diferente */
        --border: #2d333b;
        --nav-bg: #11141b;
        --bg-dark: #090b0f;
        --text-gray: #8b949e;
    }

    .rules-container { max-width: 850px; margin: 40px auto; font-family: 'Inter', sans-serif; color: white; }
    .rules-header { border-bottom: 2px solid var(--primary); padding-bottom: 20px; margin-bottom: 30px; display: flex; align-items: center; gap: 15px; }
    .rules-header h2 { font-family: 'Syncopate', sans-serif; font-size: 22px; margin: 0; text-transform: uppercase; }
    
    .rules-box { 
        background: #1c2128; padding: 35px; border-radius: 12px; 
        border: 1px solid var(--border); line-height: 1.8; color: #adbac7;
        max-height: 500px; overflow-y: auto; margin-bottom: 30px;
        scrollbar-width: thin; scrollbar-color: var(--primary) transparent;
    }
    
    .rules-box h3 { color: #fff; font-size: 17px; margin-top: 25px; border-left: 4px solid var(--primary); padding-left: 15px; }
    .rules-box p, .rules-box li { font-size: 14px; margin-bottom: 12px; }
    .important { color: #ffeb3b; font-weight: 700; }

    /* QUIZ STYLING */
    #quiz-section { display: none; animation: fadeIn 0.4s ease-in-out; }
    .question-card { background: #22272e; padding: 25px; border-radius: 10px; margin-bottom: 20px; border: 1px solid var(--border); }
    .question-text { font-size: 15px; font-weight: 700; margin-bottom: 18px; color: #fff; display: block; }
    
    .option-label { 
        display: block; padding: 14px 18px; background: #2d333b; border: 1px solid #444c56; 
        border-radius: 8px; margin-bottom: 12px; cursor: pointer; transition: 0.3s; font-size: 14px;
    }
    .option-label:hover { border-color: var(--primary); background: rgba(0,255,136,0.05); }
    .option-label input { margin-right: 12px; accent-color: var(--primary); }

    .btn-rules { 
        background: var(--primary); color: #000; border: none; padding: 18px; 
        width: 100%; border-radius: 8px; font-weight: 900; cursor: pointer; 
        font-size: 14px; text-transform: uppercase; transition: 0.3s;
    }
    .btn-rules:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0,255,136,0.3); }
    .btn-rules:disabled { opacity: 0.5; cursor: not-allowed; }

    @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
</style>

<div class="rules-container">
    <div id="reading-section">
        <div class="rules-header">
            <i class="fa-solid fa-gavel" style="color: var(--primary); font-size: 24px;"></i>
            <h2>Seller Guidelines</h2>
        </div>

        <div class="rules-box">
            <p>To ensure a safe environment for all users on <strong>VVAULT</strong>, all sellers must adhere to the following protocols:</p>
            
            <h3>1. Internal Communication Only</h3>
            <p>All deals, details, and support must happen within the VVAULT chat. <span class="important">Exchanging Discord, Telegram, or any external contact information is strictly prohibited.</span></p>

            <h3>2. Payment Security</h3>
            <p>Never request or accept direct payments (PayPal Friends & Family, Crypto direct, etc.). All transactions must go through our secure checkout to guarantee protection for both parties.</p>

            <h3>3. Honest Fulfillment</h3>
            <p>Only mark an order as "Delivered" once the buyer has full access to the product. Fake delivery confirmations will lead to permanent account suspension.</p>

            <h3>4. Item Origin</h3>
            <p>Sellers are responsible for the items they list. If an account is "pulled back" or recovered, the seller must provide a full refund or an identical replacement immediately.</p>

            <h3>5. Respectful Behavior</h3>
            <p>Treat buyers with respect. Harassment, threats, or pressure to confirm orders prematurely is not allowed.</p>
        </div>

        <?php if(!$is_seller): ?>
            <button class="btn-rules" onclick="startQuiz()">I HAVE READ AND UNDERSTAND THE RULES</button>
        <?php else: ?>
            <div style="background: rgba(0,255,136,0.1); padding: 25px; border-radius: 10px; text-align: center; border: 1px solid var(--primary); color: var(--primary);">
                <i class="fa-solid fa-circle-check" style="font-size: 24px; margin-bottom: 10px;"></i><br>
                <strong>VERIFIED SELLER STATUS ACTIVE</strong><br>
                <span style="font-size: 12px; color: #adbac7;">You are authorized to publish and sell items.</span>
            </div>
        <?php endif; ?>
    </div>

    <div id="quiz-section">
        <div class="rules-header">
            <i class="fa-solid fa-clipboard-check" style="color: var(--primary); font-size: 24px;"></i>
            <h2>Seller Verification Test</h2>
        </div>
        
        <form id="rules-form">
            <div class="question-card">
                <span class="question-text">1. A buyer insists on paying you directly via PayPal to avoid site fees. Your response?</span>
                <label class="option-label"><input type="radio" name="q1" value="wrong"> Accept it, as long as the buyer sends the money first.</label>
                <label class="option-label"><input type="radio" name="q1" value="correct"> Decline and explain that all payments must stay on VVAULT for safety.</label>
            </div>

            <div class="question-card">
                <span class="question-text">2. When is it appropriate to mark an order as "Delivered"?</span>
                <label class="option-label"><input type="radio" name="q2" value="correct"> Only after the buyer has received the product/service in-game.</label>
                <label class="option-label"><input type="radio" name="q2" value="wrong"> Immediately after the buyer completes the payment.</label>
            </div>

            <div class="question-card">
                <span class="question-text">3. What happens if you are caught trading Discord tags in the chat?</span>
                <label class="option-label"><input type="radio" name="q3" value="wrong"> You get a warning and can continue selling.</label>
                <label class="option-label"><input type="radio" name="q3" value="correct"> Your account will be permanently banned for off-site trading.</label>
            </div>

            <div class="question-card">
                <span class="question-text">4. A sold account is recovered by the original owner. What is your obligation?</span>
                <label class="option-label"><input type="radio" name="q4" value="correct"> Issue a full refund or provide a valid replacement.</label>
                <label class="option-label"><input type="radio" name="q4" value="wrong"> None, once the warranty period (24h) ends, it's not my problem.</label>
            </div>

            <button type="button" id="submit-quiz-btn" class="btn-rules" onclick="checkAnswers()">SUBMIT & ACTIVATE SELLER STATUS</button>
        </form>
    </div>
</div>

<script>
function startQuiz() {
    document.getElementById('reading-section').style.display = 'none';
    document.getElementById('quiz-section').style.display = 'block';
    window.scrollTo({ top: 0, behavior: 'smooth' });
}

function checkAnswers() {
    const form = document.getElementById('rules-form');
    const f = new FormData(form);
    
    // Obtenemos respuestas
    const answers = {
        q1: f.get('q1'),
        q2: f.get('q2'),
        q3: f.get('q3'),
        q4: f.get('q4')
    };

    // 1. Validar que todas estén respondidas
    if (!answers.q1 || !answers.q2 || !answers.q3 || !answers.q4) {
        alert("Please answer all questions before submitting.");
        return;
    }

    // 2. Verificar si son correctas
    const isCorrect = Object.values(answers).every(val => val === 'correct');

    if (isCorrect) {
        const btn = document.getElementById('submit-quiz-btn');
        btn.innerHTML = '<i class="fa-solid fa-spinner fa-spin"></i> UPGRADING ACCOUNT...';
        btn.disabled = true;

        // Llamada al backend para subir de rango
        fetch('addons/support_system/api_upgrade_seller.php')
        .then(r => r.json())
        .then(data => {
            if(data.success) {
                alert("Congratulations! Your seller status is now ACTIVE.");
                window.location.href = 'publish.php';
            } else {
                alert("Error: " + (data.error || "Could not update status."));
                btn.disabled = false;
                btn.innerHTML = 'SUBMIT & ACTIVATE SELLER STATUS';
            }
        })
        .catch(err => {
            console.error(err);
            alert("Connection error. Ensure api_upgrade_seller.php exists in the correct path.");
            btn.disabled = false;
            btn.innerHTML = 'SUBMIT & ACTIVATE SELLER STATUS';
        });
    } else {
        alert("Some answers are incorrect. Please read the rules again carefully.");
        location.reload(); // Reiniciar para que vuelva a leer
    }
}
</script>