<?php
$bp = defined('BASE_PATH') ? BASE_PATH : '/gmind';
$courses = $courses ?? [];
$fieldKeys = $fieldKeys ?? [];
?>
<div class="admin-section">
    <div style="margin-bottom:20px;">
        <h1 style="margin:0;font-size:1.4rem;color:#2c1e4a;">📋 Certificate & Marksheet Mapping</h1>
        <p style="margin:6px 0 0;font-size:0.88rem;color:#666;">
            Map field positions (student name, father name, enrollment no, etc.) on the certificate/marksheet JPG background for each course.
            Branch admins will use these mappings to auto-generate PDFs.
        </p>
    </div>

    <!-- Info box: available fields -->
    <div style="background:#f4f0fa;border-left:4px solid #6c3fe8;padding:14px 18px;border-radius:8px;margin-bottom:20px;">
        <strong style="color:#4a2db8;">📌 Standard Fields (15):</strong>
        <div style="margin-top:8px;display:flex;flex-wrap:wrap;gap:6px;">
            <?php foreach ($fieldKeys as $key => $def): ?>
                <span style="background:#fff;padding:4px 10px;border-radius:12px;font-size:0.76rem;color:#4a2db8;border:1px solid #d0c4f0;">
                    <strong><?= htmlspecialchars($key, ENT_QUOTES, 'UTF-8') ?></strong>
                    <span style="color:#999;margin-left:4px;"><?= htmlspecialchars($def['label'], ENT_QUOTES, 'UTF-8') ?></span>
                    <?php if ($def['type'] !== 'text'): ?>
                        <span style="color:#6c3fe8;font-size:0.68rem;margin-left:4px;text-transform:uppercase;"><?= $def['type'] ?></span>
                    <?php endif; ?>
                </span>
            <?php endforeach; ?>
        </div>
        <p style="margin:10px 0 0;font-size:0.78rem;color:#666;">
            Each course needs ONE Certificate mapping + ONE Marksheet mapping. The marksheet additionally shows the <strong>subject_marks</strong> field as a table.
        </p>
    </div>

    <!-- Courses table -->
    <div style="background:#fff;border-radius:10px;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,0.06);">
        <?php if (empty($courses)): ?>
            <div style="text-align:center;padding:60px 20px;color:#999;">
                <p style="margin:0 0 6px;font-size:1rem;">No courses found.</p>
                <p style="margin:0;font-size:0.84rem;">Create courses first from Website Admin → Courses.</p>
            </div>
        <?php else: ?>
            <table style="width:100%;border-collapse:collapse;font-size:0.86rem;">
                <thead><tr style="background:#f8f9fa;border-bottom:2px solid #dee2e6;">
                    <th style="padding:12px;text-align:left;">Course Name</th>
                    <th style="padding:12px;text-align:center;">Duration</th>
                    <th style="padding:12px;text-align:center;">Certificate Mapping</th>
                    <th style="padding:12px;text-align:center;">Marksheet Mapping</th>
                    <th style="padding:12px;text-align:right;">Actions</th>
                </tr></thead>
                <tbody>
                <?php foreach ($courses as $c): ?>
                    <tr style="border-bottom:1px solid #f0f0f0;">
                        <td style="padding:12px;font-weight:600;color:#2c1e4a;">
                            <?= htmlspecialchars($c['name'], ENT_QUOTES, 'UTF-8') ?>
                            <?php if (!empty($c['subjects'])): ?>
                                <br><span style="font-weight:400;color:#999;font-size:0.76rem;">
                                    <?php
                                    $subs = json_decode($c['subjects'], true);
                                    if (is_array($subs)) {
                                        $names = array_column($subs, 'name');
                                        echo htmlspecialchars(implode(' · ', $names), ENT_QUOTES, 'UTF-8');
                                    }
                                    ?>
                                </span>
                            <?php endif; ?>
                        </td>
                        <td style="padding:12px;text-align:center;color:#666;"><?= htmlspecialchars($c['duration'] ?? '—', ENT_QUOTES, 'UTF-8') ?></td>
                        <td style="padding:12px;text-align:center;">
                            <?php if ($c['has_certificate']): ?>
                                <span style="background:#eafaf1;color:#1a7a4f;padding:3px 10px;border-radius:12px;font-size:0.74rem;font-weight:600;">✓ Mapped</span>
                            <?php else: ?>
                                <span style="background:#fff5f5;color:#e84118;padding:3px 10px;border-radius:12px;font-size:0.74rem;font-weight:600;">✗ Not Mapped</span>
                            <?php endif; ?>
                        </td>
                        <td style="padding:12px;text-align:center;">
                            <?php if ($c['has_marksheet']): ?>
                                <span style="background:#eafaf1;color:#1a7a4f;padding:3px 10px;border-radius:12px;font-size:0.74rem;font-weight:600;">✓ Mapped</span>
                            <?php else: ?>
                                <span style="background:#fff5f5;color:#e84118;padding:3px 10px;border-radius:12px;font-size:0.74rem;font-weight:600;">✗ Not Mapped</span>
                            <?php endif; ?>
                        </td>
                        <td style="padding:12px;text-align:right;white-space:nowrap;">
                            <a href="<?= $bp ?>/super-admin/cert-marksheet-mapping/<?= (int)$c['id'] ?>/certificate" style="background:#6c3fe8;color:#fff;text-decoration:none;padding:6px 12px;border-radius:5px;font-size:0.76rem;font-weight:600;">
                                📜 Certificate
                            </a>
                            <a href="<?= $bp ?>/super-admin/cert-marksheet-mapping/<?= (int)$c['id'] ?>/marksheet" style="background:#4a2db8;color:#fff;text-decoration:none;padding:6px 12px;border-radius:5px;font-size:0.76rem;font-weight:600;">
                                📋 Marksheet
                            </a>
                            <?php foreach ($c['templates'] as $t): ?>
                                <a href="<?= $bp ?>/super-admin/cert-marksheet-mapping/preview/<?= (int)$t['id'] ?>" style="background:#7f8c8d;color:#fff;text-decoration:none;padding:6px 12px;border-radius:5px;font-size:0.76rem;font-weight:600;">
                                    👁 Preview
                                </a>
                            <?php endforeach; ?>
                        </td>
                    </tr>
                <?php endforeach; ?>
                </tbody>
            </table>
        <?php endif; ?>
    </div>

    <!-- Workflow help -->
    <div style="margin-top:20px;padding:16px;background:#eaf0fb;border-left:4px solid #1a4fa0;border-radius:8px;font-size:0.82rem;color:#1a4fa0;line-height:1.7;">
        <strong>📌 How mapping works:</strong>
        <ol style="margin:6px 0 0 18px;padding:0;">
            <li>Click <strong>"Certificate"</strong> or <strong>"Marksheet"</strong> next to a course.</li>
            <li>Upload the JPG background image (your certificate/marksheet design).</li>
            <li>For each of the 15 fields, enter the X and Y position (in points) where the text should appear on the image.</li>
            <li>Set font family, size, style, color, and alignment for each field.</li>
            <li>Untick the "Enabled" checkbox for any field you don't want to display.</li>
            <li>Click <strong>"Save Mapping"</strong>. The branch admin can now generate PDFs for this course.</li>
        </ol>
        <p style="margin:8px 0 0;font-size:0.78rem;">
            💡 <strong>Tip:</strong> Use the "Preview" button to see how the field positions look on the background image before saving.
        </p>
    </div>
</div>
