<style>
/* --- کدهای CSS شخصی شما --- */
.mbti-quiz-container {
    width: 95%; 
    max-width: 1200px; 
    margin: 30px auto; 
    padding: 30px; 
    border: 1px solid #e0e0e0; 
    border-radius: 12px; 
    background: #fff; 
    direction: rtl; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.question-group {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 25px;
    background-color: #f9f9f9;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.context-header {
    font-size: 1.1em;
    font-weight: bold;
    color: #333;
    margin-top: 0;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid #ccc;
}

.question-block {
    margin-bottom: 30px; 
    padding: 20px; 
    background: #fdfdfd;
    border: 1px solid #f0f0f0;
    border-radius: 8px;
}

.question-block:last-child {
    margin-bottom: 0;
}

.main-question {
    font-weight: 600;
    margin-bottom: 15px;
    display: block;
}

/* اصلاح نمایش گزینه‌ها برای مانیتورهای عریض */
.options-container {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-top: 15px;
    background: #f1f5f9;
    padding: 15px;
    border-radius: 6px;
}

.options-container label {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 10px;
}

/* در مانیتورهای بزرگ، گزینه‌ها در یک ردیف پخش شوند */
@media (min-width: 768px) {
    .options-container {
        justify-content: space-between;
    }
}

/* --- استایل‌های تکمیلی برای پیمایش و فرم --- */
.mbti-slide { display: none; }
.mbti-slide.active { display: block; animation: fadeIn 0.4s; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.mbti-navigation { 
    margin-top: 30px; 
    display: flex; 
    justify-content: space-between; 
    flex-direction: row-reverse;
}

.mbti-navigation button { 
    padding: 12px 35px; 
    cursor: pointer; 
    border-radius: 6px; 
    font-family: tahoma; 
    font-size: 16px;
    border: none;
    transition: background 0.3s;
}

#mbti-next-btn { background-color: #0073aa; color: #fff; }
#mbti-prev-btn { background-color: #eee; color: #333; border: 1px solid #ccc; }
#mbti-submit-btn { background-color: #4CAF50; color: #fff; display: none; }

.user-info-field { margin-bottom: 15px; }
.user-info-field label { display: block; font-weight: bold; margin-bottom: 5px; }
.user-info-field input, .user-info-field select { 
    width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 4px; 
}
.error-message { color: #d32f2f; display: none; text-align: center; font-weight: bold; margin-top: 15px; }
</style>

<div class="mbti-quiz-container">
    <form id="mbti-quiz-form" method="post">
        <?php wp_nonce_field('submit_mbti_quiz', 'mbti_quiz_nonce'); ?>

        <!-- اسلاید ۱: اطلاعات -->
        <div class="mbti-slide active">
            <div class="question-group">
                <h3 class="context-header">اطلاعات پایه داوطلب</h3>
                <div class="user-info-field"><label>نام و نام خانوادگی:</label><input type="text" name="user_name" required></div>
                <div class="user-info-field">
                    <label>جنسیت:</label>
                    <select name="user_gender" required>
                        <option value="">انتخاب کنید...</option>
                        <option value="مرد">مرد</option>
                        <option value="زن">زن</option>
                    </select>
                </div>
                <div class="user-info-field">
                    <label>مدرک تحصیلی:</label>
                    <select name="user_education" required>
                        <option value="">انتخاب کنید...</option>
                        <option value="دیپلم">دیپلم</option>
                        <option value="کاردانی">کاردانی</option>
                        <option value="کارشناسی">کارشناسی</option>
                        <option value="کارشناسی ارشد">کارشناسی ارشد</option>
                        <option value="دکتری">دکتری</option>
                    </select>
                </div>
                <div class="user-info-field"><label>شغل:</label><input type="text" name="user_job" required></div>
                <div class="user-info-field"><label>سابقه کار (سال):</label><input type="number" name="user_experience" required></div>
                <div class="user-info-field"><label>محل کار:</label><input type="text" name="user_workplace" required></div>
            </div>
        </div>

        <?php
        // ... (منطق ترکیب سوالات که قبلاً نوشته بودیم) ...
        $slides = array_chunk($final_questions, 5);
        $question_number = 1;

        foreach ($slides as $slide_qs) {
            echo '<div class="mbti-slide">';
            echo '<div class="question-group">';
            
            $last_context = '';
            foreach ($slide_qs as $q) {
                $context = trim($q->context);
                if ($context !== '' && $context !== $last_context) {
                    $label = ($q->question_group == 1) ? 'سناریو' : 'سوال کلی';
                    echo '<h4 class="context-header">' . $label . ': ' . esc_html($context) . '</h4>';
                    $last_context = $context;
                }
                
                echo '<div class="question-block">';
                echo '<span class="main-question">سوال ' . $question_number . ': ' . esc_html($q->main_question) . '</span>';
                echo '<div class="options-container">';
                
                if ($q->question_group == 1) {
                    $opts = [1=>'کاملاً مخالفم', 2=>'مخالفم', 3=>'نظری ندارم', 4=>'موافقم', 5=>'کاملاً موافقم'];
                    foreach($opts as $v=>$t) {
                        echo '<label><input type="radio" name="q_'.$q->id.'" value="'.$v.'" required> '.$t.'</label>';
                    }
                } else {
                    echo '<label><input type="radio" name="q_'.$q->id.'" value="1" required> '.esc_html($q->option_1).'</label>';
                    echo '<label><input type="radio" name="q_'.$q->id.'" value="2" required> '.esc_html($q->option_2).'</label>';
                }
                echo '</div></div>';
                $question_number++;
            }
            echo '</div></div>';
        }
        ?>

        <div class="mbti-navigation">
            <button type="button" id="mbti-next-btn">بعدی</button>
            <button type="button" id="mbti-prev-btn" style="display:none;">قبلی</button>
            <button type="submit" name="submit_mbti_quiz" id="mbti-submit-btn">پایان و مشاهده نتیجه</button>
        </div>
        <p class="error-message" id="mbti-error-message">لطفاً برای ادامه، تمام سوالات این بخش را پاسخ دهید.</p>
    </form>
</div>
