<?php
/**
 * Demo Class Registration Page
 *
 * Uses existing header/footer layout.
 * Expected variables: $courses, $branches, $basePath, $settings, $csrfToken
 */

$basePath = defined('BASE_PATH') ? BASE_PATH : '/gmind';
include __DIR__ . '/../layouts/header.php';
?>

<!-- Demo Class Hero -->
<section class="inner-hero" style="background: linear-gradient(135deg, #1e3a8a 0%, #7c3aed 100%); color: #fff; padding: 60px 20px; text-align: center;">
    <div class="container">
        <h1 style="font-size: 2.2rem; margin: 0 0 10px;">Book Your Free Demo Class</h1>
        <p style="font-size: 1.1rem; opacity: 0.9; margin: 0;">Experience our teaching before you enroll — no commitment required!</p>
    </div>
</section>

<!-- Demo Class Form -->
<section style="padding: 40px 20px;">
    <div class="container" style="max-width: 600px; margin: 0 auto;">
        <?php if ($flash_success): ?>
        <div style="background: #d1fae5; color: #065f46; padding: 16px; border-radius: 8px; margin-bottom: 24px; font-weight: 600;">
            <?= htmlspecialchars($flash_success, ENT_QUOTES, 'UTF-8') ?>
        </div>
        <?php endif; ?>

        <?php if ($flash_error): ?>
        <div style="background: #fee2e2; color: #991b1b; padding: 16px; border-radius: 8px; margin-bottom: 24px; font-weight: 600;">
            <?= htmlspecialchars($flash_error, ENT_QUOTES, 'UTF-8') ?>
        </div>
        <?php endif; ?>

        <div style="background: #fff; border-radius: 12px; box-shadow: 0 4px 6px rgba(0,0,0,.1); padding: 32px;">
            <form method="POST" action="<?= $basePath ?>/demo-class" id="demoClassForm">
                <input type="hidden" name="csrf_token" value="<?= htmlspecialchars($csrfToken, ENT_QUOTES, 'UTF-8') ?>">

                <div style="margin-bottom: 16px;">
                    <label style="display: block; font-weight: 600; margin-bottom: 6px; font-size: .875rem;">Student Name *</label>
                    <input type="text" name="student_name" required placeholder="Enter your name"
                        style="width: 100%; padding: 10px 14px; border: 2px solid #e2e8f0; border-radius: 8px; font-size: .95rem; box-sizing: border-box;">
                </div>

                <div style="margin-bottom: 16px;">
                    <label style="display: block; font-weight: 600; margin-bottom: 6px; font-size: .875rem;">Contact Number *</label>
                    <input type="tel" name="contact" required pattern="[0-9]{10}" placeholder="10-digit mobile number"
                        style="width: 100%; padding: 10px 14px; border: 2px solid #e2e8f0; border-radius: 8px; font-size: .95rem; box-sizing: border-box;">
                </div>

                <div style="margin-bottom: 16px;">
                    <label style="display: block; font-weight: 600; margin-bottom: 6px; font-size: .875rem;">Email (Optional)</label>
                    <input type="email" name="email" placeholder="Your email address"
                        style="width: 100%; padding: 10px 14px; border: 2px solid #e2e8f0; border-radius: 8px; font-size: .95rem; box-sizing: border-box;">
                </div>

                <div style="margin-bottom: 16px;">
                    <label style="display: block; font-weight: 600; margin-bottom: 6px; font-size: .875rem;">Select Course</label>
                    <select name="course_id"
                        style="width: 100%; padding: 10px 14px; border: 2px solid #e2e8f0; border-radius: 8px; font-size: .95rem; box-sizing: border-box;">
                        <option value="">-- Select Course --</option>
                        <?php foreach ($courses as $course): ?>
                        <option value="<?= (int) $course['id'] ?>"><?= htmlspecialchars($course['name'], ENT_QUOTES, 'UTF-8') ?></option>
                        <?php endforeach; ?>
                    </select>
                </div>

                <div style="margin-bottom: 16px;">
                    <label style="display: block; font-weight: 600; margin-bottom: 6px; font-size: .875rem;">Select Branch</label>
                    <select name="branch_id"
                        style="width: 100%; padding: 10px 14px; border: 2px solid #e2e8f0; border-radius: 8px; font-size: .95rem; box-sizing: border-box;">
                        <option value="">-- Select Branch --</option>
                        <?php foreach ($branches as $branch): ?>
                        <option value="<?= (int) $branch['id'] ?>"><?= htmlspecialchars($branch['city'] . ' - ' . $branch['name'], ENT_QUOTES, 'UTF-8') ?></option>
                        <?php endforeach; ?>
                    </select>
                </div>

                <div style="margin-bottom: 16px;">
                    <label style="display: block; font-weight: 600; margin-bottom: 6px; font-size: .875rem;">Preferred Time</label>
                    <select name="preferred_time"
                        style="width: 100%; padding: 10px 14px; border: 2px solid #e2e8f0; border-radius: 8px; font-size: .95rem; box-sizing: border-box;">
                        <option value="">-- Select Time --</option>
                        <option value="morning">Morning (8AM - 12PM)</option>
                        <option value="afternoon">Afternoon (12PM - 4PM)</option>
                        <option value="evening">Evening (4PM - 7PM)</option>
                    </select>
                </div>

                <div style="margin-bottom: 16px;">
                    <label style="display: block; font-weight: 600; margin-bottom: 6px; font-size: .875rem;">Preferred Date</label>
                    <input type="date" name="demo_date" min="<?= date('Y-m-d') ?>"
                        style="width: 100%; padding: 10px 14px; border: 2px solid #e2e8f0; border-radius: 8px; font-size: .95rem; box-sizing: border-box;">
                </div>

                <div style="margin-bottom: 20px;">
                    <label style="display: block; font-weight: 600; margin-bottom: 6px; font-size: .875rem;">Message (Optional)</label>
                    <textarea name="message" rows="3" placeholder="Any specific query or message"
                        style="width: 100%; padding: 10px 14px; border: 2px solid #e2e8f0; border-radius: 8px; font-size: .95rem; box-sizing: border-box; resize: vertical;"></textarea>
                </div>

                <button type="submit"
                    style="width: 100%; padding: 14px; background: linear-gradient(135deg, #2563eb, #7c3aed); color: #fff; border: none; border-radius: 8px; font-size: 1rem; font-weight: 700; cursor: pointer; transition: transform .2s;">
                    Book Free Demo Class →
                </button>
            </form>
        </div>

        <div style="text-align: center; margin-top: 24px;">
            <p style="color: #64748b; font-size: .9rem;">Or call us directly: <a href="tel:9305640290" style="color: #2563eb; font-weight: 700;">9305640290</a></p>
        </div>
    </div>
</section>

<?php include __DIR__ . '/../layouts/footer.php'; ?>
