<?php
$bp = defined('BASE_PATH') ? BASE_PATH : '/gmind';
$courses = $courses ?? [];
$batches = $batches ?? [];
$csrfToken = $csrfToken ?? '';
?>
<div class="admin-section">
    <div style="margin-bottom:14px;">
        <a href="<?= $bp ?>/branch/cert-gen" style="color:#16a085;text-decoration:none;font-size:0.85rem;">← Back to Status</a>
    </div>

    <div style="background:linear-gradient(135deg,#0d3b3b,#16a085);color:#fff;border-radius:12px;padding:18px;margin-bottom:18px;">
        <h1 style="margin:0;font-size:1.15rem;">👤 Step 1: Student Registration</h1>
        <p style="margin:6px 0 0;opacity:0.9;font-size:0.84rem;">Fill all details below. After submit, you'll see a preview with Edit + Create Result options.</p>
    </div>

    <form method="POST" action="<?= $bp ?>/branch/cert-gen/preview" enctype="multipart/form-data" id="studentForm">
        <input type="hidden" name="csrf_token" value="<?= htmlspecialchars($csrfToken, ENT_QUOTES, 'UTF-8') ?>">

        <div style="background:#fff;border-radius:12px;padding:24px;margin-bottom:16px;box-shadow:0 2px 8px rgba(0,0,0,0.06);">
            <h3 style="margin:0 0 16px;font-size:1rem;color:#0d3b3b;">📝 Personal Details</h3>
            <div style="display:grid;grid-template-columns:1fr 1fr;gap:14px;">
                <div>
                    <label style="display:block;font-size:0.82rem;font-weight:600;color:#0d3b3b;margin-bottom:4px;">Student Name *</label>
                    <input type="text" name="name" required style="width:100%;padding:10px;border:1px solid #ddd;border-radius:6px;font-size:0.88rem;">
                </div>
                <div>
                    <label style="display:block;font-size:0.82rem;font-weight:600;color:#0d3b3b;margin-bottom:4px;">Father's Name *</label>
                    <input type="text" name="father_name" required style="width:100%;padding:10px;border:1px solid #ddd;border-radius:6px;font-size:0.88rem;">
                </div>
                <div>
                    <label style="display:block;font-size:0.82rem;font-weight:600;color:#0d3b3b;margin-bottom:4px;">Date of Birth *</label>
                    <input type="date" name="dob" required style="width:100%;padding:10px;border:1px solid #ddd;border-radius:6px;font-size:0.88rem;">
                </div>
                <div>
                    <label style="display:block;font-size:0.82rem;font-weight:600;color:#0d3b3b;margin-bottom:4px;">Student Photo</label>
                    <input type="file" name="photo" accept="image/jpeg,image/png" style="width:100%;padding:6px;border:1px solid #ddd;border-radius:6px;font-size:0.84rem;">
                </div>
            </div>
        </div>

        <div style="background:#fff;border-radius:12px;padding:24px;margin-bottom:16px;box-shadow:0 2px 8px rgba(0,0,0,0.06);">
            <h3 style="margin:0 0 16px;font-size:1rem;color:#0d3b3b;">📍 Address</h3>
            <div style="margin-bottom:14px;">
                <label style="display:block;font-size:0.82rem;font-weight:600;color:#0d3b3b;margin-bottom:4px;">Full Address</label>
                <textarea name="address" rows="2" style="width:100%;padding:10px;border:1px solid #ddd;border-radius:6px;font-size:0.88rem;resize:vertical;" placeholder="House No, Street, Area"></textarea>
            </div>
            <div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;">
                <div>
                    <label style="display:block;font-size:0.82rem;font-weight:600;color:#0d3b3b;margin-bottom:4px;">City</label>
                    <input type="text" name="city" style="width:100%;padding:10px;border:1px solid #ddd;border-radius:6px;font-size:0.88rem;">
                </div>
                <div>
                    <label style="display:block;font-size:0.82rem;font-weight:600;color:#0d3b3b;margin-bottom:4px;">State</label>
                    <input type="text" name="state" style="width:100%;padding:10px;border:1px solid #ddd;border-radius:6px;font-size:0.88rem;">
                </div>
                <div>
                    <label style="display:block;font-size:0.82rem;font-weight:600;color:#0d3b3b;margin-bottom:4px;">PIN Code</label>
                    <input type="text" name="pin_code" pattern="[0-9]{6}" maxlength="6" style="width:100%;padding:10px;border:1px solid #ddd;border-radius:6px;font-size:0.88rem;">
                </div>
            </div>
        </div>

        <div style="background:#fff;border-radius:12px;padding:24px;margin-bottom:16px;box-shadow:0 2px 8px rgba(0,0,0,0.06);">
            <h3 style="margin:0 0 16px;font-size:1rem;color:#0d3b3b;">🎓 Course & Contact</h3>
            <div style="display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px;">
                <div>
                    <label style="display:block;font-size:0.82rem;font-weight:600;color:#0d3b3b;margin-bottom:4px;">Course *</label>
                    <select name="course_id" required style="width:100%;padding:10px;border:1px solid #ddd;border-radius:6px;font-size:0.88rem;">
                        <option value="">— Select Course —</option>
                        <?php foreach ($courses as $c): ?>
                            <option value="<?= (int)$c['id'] ?>" data-subjects="<?= htmlspecialchars($c['subjects'] ?? '[]', ENT_QUOTES, 'UTF-8') ?>"><?= htmlspecialchars($c['name'], ENT_QUOTES, 'UTF-8') ?> (<?= htmlspecialchars($c['duration'] ?? '', ENT_QUOTES, 'UTF-8') ?>)</option>
                        <?php endforeach; ?>
                    </select>
                </div>
                <div>
                    <label style="display:block;font-size:0.82rem;font-weight:600;color:#0d3b3b;margin-bottom:4px;">Batch</label>
                    <select name="batch_id" style="width:100%;padding:10px;border:1px solid #ddd;border-radius:6px;font-size:0.88rem;">
                        <option value="">— None —</option>
                        <?php foreach ($batches as $b): ?>
                            <option value="<?= (int)$b['id'] ?>"><?= htmlspecialchars($b['batch_name'], ENT_QUOTES, 'UTF-8') ?></option>
                        <?php endforeach; ?>
                    </select>
                </div>
            </div>
            <div style="display:grid;grid-template-columns:1fr 1fr;gap:14px;">
                <div>
                    <label style="display:block;font-size:0.82rem;font-weight:600;color:#0d3b3b;margin-bottom:4px;">Email *</label>
                    <input type="email" name="email" required style="width:100%;padding:10px;border:1px solid #ddd;border-radius:6px;font-size:0.88rem;">
                </div>
                <div>
                    <label style="display:block;font-size:0.82rem;font-weight:600;color:#0d3b3b;margin-bottom:4px;">Mobile Number *</label>
                    <input type="tel" name="phone" required pattern="[0-9]{10}" maxlength="10" style="width:100%;padding:10px;border:1px solid #ddd;border-radius:6px;font-size:0.88rem;">
                </div>
            </div>
        </div>

        <!-- Submit -->
        <div style="display:flex;gap:12px;justify-content:flex-end;">
            <a href="<?= $bp ?>/branch/cert-gen" style="padding:12px 24px;border:1px solid #ddd;border-radius:8px;text-decoration:none;color:#666;font-weight:600;font-size:0.9rem;">Cancel</a>
            <button type="submit" style="padding:12px 32px;background:linear-gradient(135deg,#16a085,#117a65);color:#fff;border:none;border-radius:8px;font-weight:600;font-size:0.9rem;cursor:pointer;">
                👁 Preview Details →
            </button>
        </div>
    </form>
</div>
