<?php
/**
 * Reusable Editor Block — included by edit.php for both Certificate & Marksheet tabs
 * 
 * IMPORTANT: All IDs are prefixed with $docType to avoid duplicate ID conflicts
 */
?>
<div class="row">
    <!-- Left: Field List -->
    <div class="col-md-3">
        <div class="card">
            <div class="card-header py-2">
                <small class="fw-bold"><i class="fas fa-list"></i> <?= ucfirst($docType) ?> Fields</small>
            </div>
            <div class="card-body p-2" id="field-list-<?= $docType ?>" style="max-height:650px;overflow-y:auto;">
                <!-- Populated by JS -->
            </div>
        </div>
    </div>

    <!-- Center: Canvas -->
    <div class="col-md-6">
        <div class="card">
            <div class="card-header py-2 d-flex justify-content-between align-items-center">
                <small class="fw-bold">
                    <i class="fas fa-image"></i>
                    <?= $bgUrl ? 'Background Loaded' : 'No Background' ?>
                </small>
                <?php if (!$isLocked): ?>
                <label class="btn btn-sm btn-outline-primary mb-0">
                    <i class="fas fa-upload"></i> Upload JPG
                    <input type="file" id="bg-upload-<?= $docType ?>"
                           accept="image/jpeg,image/png"
                           onchange="uploadBackground('<?= $docType ?>')"
                           style="display:none">
                </label>
                <?php endif; ?>
            </div>
            <div class="card-body p-2 text-center">
                <div class="pattern-canvas" id="canvas-<?= $docType ?>"
                     style="width: <?= (int)(600) ?>px; height: <?= $displayHeight ?>px; position: relative;">
                    <?php if ($bgUrl): ?>
                        <img src="<?= htmlspecialchars($bgUrl) ?>" class="bg" alt="background">
                    <?php else: ?>
                        <div class="d-flex align-items-center justify-content-center h-100 text-muted">
                            <div>
                                <i class="fas fa-image fa-3x mb-2"></i>
                                <p class="small mb-0">Upload a <?= $docType ?> background JPG to start mapping</p>
                                <p class="small text-muted">Recommended: A4 portrait (2480×3508 px @ 300 DPI)</p>
                            </div>
                        </div>
                    <?php endif; ?>
                </div>
                <small class="text-muted mt-1 d-block">
                    Drag fields to position | Page: <?= $pageWidth ?> × <?= $pageHeight ?> pt (A4 Portrait)
                </small>
            </div>
        </div>

        <?php if (!$isLocked): ?>
        <div class="card mt-2">
            <div class="card-body p-2 text-center">
                <button type="button" class="btn btn-info btn-sm" onclick="previewDocument('<?= $docType ?>')">
                    <i class="fas fa-file-pdf"></i> Live Preview <?= ucfirst($docType) ?>
                </button>
                <small class="text-muted d-block mt-1">Generates real PDF with sample student data — verify before locking</small>
            </div>
        </div>

        <!-- Test Photo Upload (for preview only) -->
        <div class="card mt-2">
            <div class="card-body p-2">
                <small class="fw-bold d-block mb-2"><i class="fas fa-camera"></i> Test Photo (for preview)</small>
                <label class="btn btn-sm btn-outline-secondary w-100 mb-1">
                    <i class="fas fa-upload"></i> Upload Test Photo
                    <input type="file" id="test-photo-upload-<?= $docType ?>" accept="image/jpeg,image/png" style="display:none" onchange="uploadTestPhoto(this)">
                </label>
                <button type="button" class="btn btn-sm btn-outline-danger w-100" onclick="clearTestPhoto()">
                    <i class="fas fa-trash"></i> Clear Test Photo
                </button>
                <small class="text-muted d-block mt-1">Upload a sample student photo to see how it looks in the preview PDF</small>
            </div>
        </div>
        <?php endif; ?>
    </div>

    <!-- Right: Property Panel — UNIQUE ID per doc type -->
    <div class="col-md-3">
        <div class="card">
            <div class="card-header py-2">
                <small class="fw-bold"><i class="fas fa-sliders"></i> Properties (<?= ucfirst($docType) ?>)</small>
            </div>
            <div class="card-body p-2" id="property-panel-<?= $docType ?>">
                <div class="text-muted text-center py-4">
                    <i class="fas fa-hand-pointer"></i><br>
                    Click a field to edit
                </div>
            </div>
        </div>

        <div class="card mt-2">
            <div class="card-body p-2">
                <small class="text-muted">
                    <strong>Quick Tips:</strong><br>
                    • Drag boxes on image to move<br>
                    • Click box → edit on right<br>
                    • Use precise X/Y for accuracy<br>
                    • Use arrow keys to nudge<br>
                    • Live Preview = real PDF<br>
                    • Save before locking
                </small>
            </div>
        </div>
    </div>
</div>
