<?php
/**
 * Bulk Edit Hindi Translations
 *
 * Shows ALL questions in an exam on ONE page, with:
 *   - English text (read-only, gray background)
 *   - Hindi text fields (editable, yellow background, Devanagari font)
 *
 * The branch admin can fill in all Hindi translations in one go, then click
 * "Save All Hindi Translations" to save them all at once. This is the FASTEST
 * way to add Hindi to questions that were originally created in English only.
 */
$bp = defined('BASE_PATH') ? BASE_PATH : '/gmind';
$exam = $exam ?? [];
$questions = $questions ?? [];
$csrfToken = $csrfToken ?? '';
?>
<style>
.bulk-hindi-card {
    background: #fff; border-radius: 10px; padding: 18px;
    margin-bottom: 14px; box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    border-left: 4px solid #16a085;
}
.bulk-hindi-q-num {
    display: inline-block; background: #16a085; color: #fff;
    padding: 3px 10px; border-radius: 50px; font-size: 0.78rem;
    font-weight: 700; margin-bottom: 8px;
}
.bulk-hindi-en {
    background: #f4f4f4; padding: 8px 12px; border-radius: 6px;
    font-size: 0.86rem; color: #555; margin-bottom: 6px;
    border-left: 3px solid #999;
}
.bulk-hindi-en strong { color: #333; }
.bulk-hindi-field {
    width: 100%; padding: 9px 12px; border: 1.5px solid #f5d68b;
    border-radius: 6px; font-size: 0.86rem; margin-bottom: 6px;
    background: #fffbe6; font-family: 'Noto Sans Devanagari', sans-serif;
    color: #333; box-sizing: border-box;
}
.bulk-hindi-field:focus { outline: none; border-color: #f39c12; background: #fff8e1; }
.bulk-hindi-field::placeholder { color: #d4b16e; font-style: italic; }
.bulk-hindi-options {
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px;
}
@media (max-width: 600px) { .bulk-hindi-options { grid-template-columns: 1fr; } }
.bulk-hindi-option-pair {
    background: #fafafa; padding: 8px; border-radius: 6px;
    border: 1px solid #eee;
}
.bulk-hindi-option-en {
    font-size: 0.78rem; color: #888; margin-bottom: 4px;
}
.bulk-hindi-option-en strong { color: #555; }
.bulk-hindi-label {
    display: block; font-size: 0.74rem; font-weight: 600;
    color: #b8731a; margin-bottom: 3px; text-transform: uppercase;
    letter-spacing: 0.5px;
}
.bulk-hindi-actions {
    position: sticky; bottom: 0; left: 0; right: 0;
    background: #fff; padding: 14px 0; margin-top: 20px;
    border-top: 2px solid #16a085; text-align: center;
    box-shadow: 0 -4px 14px rgba(0,0,0,0.08); z-index: 100;
}
.btn-save-hindi {
    padding: 13px 36px; background: linear-gradient(135deg, #16a085, #117a65);
    color: #fff; border: none; border-radius: 8px; font-weight: 700;
    font-size: 0.95rem; cursor: pointer; box-shadow: 0 4px 12px rgba(22,160,133,0.3);
    transition: all 0.2s;
}
.btn-save-hindi:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(22,160,133,0.4); }
.bulk-hindi-stats {
    display: inline-block; background: #eafaf1; color: #1a7a4f;
    padding: 6px 14px; border-radius: 50px; font-size: 0.78rem;
    font-weight: 600; margin-left: 10px;
}
</style>

<div class="admin-section">
    <div style="margin-bottom:14px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;">
        <a href="<?= $bp ?>/branch/exams/<?= (int)$exam['id'] ?>/questions" style="color:#16a085;text-decoration:none;font-size:0.85rem;">← Back to Questions</a>
        <span class="bulk-hindi-stats">📝 <?= count($questions) ?> questions to translate</span>
    </div>

    <!-- Exam header -->
    <div style="background:linear-gradient(135deg,#0d3b3b,#16a085);color:#fff;border-radius:12px;padding:18px;margin-bottom:18px;">
        <h2 style="margin:0;font-size:1.05rem;">
            🌐 Bulk Edit Hindi Translations
        </h2>
        <p style="margin:6px 0 0;opacity:0.9;font-size:0.84rem;">
            <strong><?= htmlspecialchars($exam['title'] ?? '', ENT_QUOTES, 'UTF-8') ?></strong> ·
            Fill in the Hindi text for each question and option below. English text is shown for reference (read-only).
            When done, click the green "Save All Hindi Translations" button at the bottom.
        </p>
    </div>

    <!-- Instructions -->
    <div style="background:#eaf0fb;border-left:4px solid #1a4fa0;padding:12px 16px;border-radius:8px;margin-bottom:18px;font-size:0.82rem;color:#1a4fa0;line-height:1.6;">
        <strong>📌 How to use:</strong>
        <ol style="margin:6px 0 0 18px;padding:0;">
            <li>For each question, type the Hindi translation in the yellow field below the English text.</li>
            <li>Type Hindi translations for each option (A, B, C, D) — only fill what exists in English.</li>
            <li>You can use Google Input Tools (inputtools.google.com) or any Hindi keyboard to type in Devanagari.</li>
            <li>Leave a field blank if you don't have the translation yet — the student will see English as fallback.</li>
            <li>Click "Save All Hindi Translations" at the bottom when done.</li>
        </ol>
    </div>

    <?php if (empty($questions)): ?>
        <div style="background:#fff;border-radius:10px;padding:40px;text-align:center;color:#999;box-shadow:0 2px 8px rgba(0,0,0,0.06);">
            <p style="margin:0;">No questions in this exam yet. Add questions first, then come back to translate them.</p>
        </div>
    <?php else: ?>

    <form method="POST" action="<?= $bp ?>/branch/exams/<?= (int)$exam['id'] ?>/bulk-hindi">
        <input type="hidden" name="csrf_token" value="<?= htmlspecialchars($csrfToken, ENT_QUOTES, 'UTF-8') ?>">

        <?php foreach ($questions as $i => $q): ?>
        <div class="bulk-hindi-card">
            <span class="bulk-hindi-q-num">Question <?= $i + 1 ?></span>
            <input type="hidden" name="question_id[]" value="<?= (int)$q['id'] ?>">

            <!-- English question text (read-only reference) -->
            <div class="bulk-hindi-en">
                <strong>EN:</strong> <?= htmlspecialchars($q['question_text'] ?? '', ENT_QUOTES, 'UTF-8') ?>
                <span style="background:#eaf0fb;color:#1a4fa0;padding:1px 6px;border-radius:4px;font-size:0.7rem;margin-left:6px;"><?= (int)($q['marks'] ?? 1) ?> mark(s)</span>
                <span style="background:#eafaf1;color:#1a7a4f;padding:1px 6px;border-radius:4px;font-size:0.7rem;margin-left:4px;">Correct: <?= strtoupper($q['correct_answer'] ?? 'a') ?></span>
            </div>

            <!-- Hindi question text (editable) -->
            <label class="bulk-hindi-label">हिंदी प्रश्न (Hindi Question)</label>
            <input type="text" name="question_text_hindi[]" class="bulk-hindi-field"
                   value="<?= htmlspecialchars($q['question_text_hindi'] ?? '', ENT_QUOTES, 'UTF-8') ?>"
                   placeholder="हिंदी में प्रश्न यहाँ लिखें...">

            <!-- Options grid -->
            <div class="bulk-hindi-options">
                <?php
                $optionKeys = ['a','b','c','d'];
                foreach ($optionKeys as $key):
                    $optEn = $q['option_' . $key] ?? '';
                    $optHi = $q['option_' . $key . '_hindi'] ?? '';
                    if (empty($optEn)) continue;
                ?>
                <div class="bulk-hindi-option-pair">
                    <div class="bulk-hindi-option-en">
                        <strong><?= strtoupper($key) ?>.</strong> <?= htmlspecialchars($optEn, ENT_QUOTES, 'UTF-8') ?>
                    </div>
                    <input type="text" name="option_<?= $key ?>_hindi[]" class="bulk-hindi-field"
                           value="<?= htmlspecialchars($optHi, ENT_QUOTES, 'UTF-8') ?>"
                           placeholder="विकल्प <?= strtoupper($key) ?> हिंदी में..."
                           style="margin-bottom:0;">
                </div>
                <?php endforeach; ?>
            </div>
        </div>
        <?php endforeach; ?>

        <!-- Sticky save bar -->
        <div class="bulk-hindi-actions">
            <button type="submit" class="btn-save-hindi">
                💾 Save All Hindi Translations
            </button>
            <p style="margin:10px 0 0;font-size:0.78rem;color:#666;">
                This will save Hindi text for all <?= count($questions) ?> questions in one go. You can come back and edit again later.
            </p>
        </div>
    </form>

    <?php endif; ?>
</div>
