<?php
require_once 'db_connect.php';

$success_msg = '';

// ডাটাবেস থেকে কোর্সগুলো আনা
$courses = [];
try {
    $stmt = $pdo->query("SELECT id, title FROM courses WHERE status = 'active'");
    $courses = $stmt->fetchAll(PDO::FETCH_ASSOC);
} catch (PDOException $e) {}

if ($_SERVER['REQUEST_METHOD'] == 'POST') {
    // ডাটা সংগ্রহ
    $name = $_POST['name'];
    $phone = $_POST['phone'];
    $email = $_POST['email'];
    $age = $_POST['age'];
    $gender = $_POST['gender'];
    $course_id = $_POST['course_id'];
    $preferred_date = $_POST['preferred_date'];

    try {
        // এই অংশটিই ডাটা সেভ করবে
        $sql = "INSERT INTO free_trials (name, phone, email, age, gender, course_id, preferred_date, status) 
                VALUES (?, ?, ?, ?, ?, ?, ?, 'pending')";
        $stmt = $pdo->prepare($sql);
        $stmt->execute([$name, $phone, $email, $age, $gender, $course_id, $preferred_date]);

        $success_msg = '<div class="alert alert-success mt-3">Alhamdulillah! Your request has been received.</div>';
    } catch (PDOException $e) {
        $success_msg = '<div class="alert alert-danger mt-3">Error: ' . $e->getMessage() . '</div>';
    }
}
include 'header.php'; 
?>

<style>
    /* --- Page Header --- */
    .page-header-wrap {
        background: linear-gradient(rgba(2, 44, 34, 0.85), rgba(6, 78, 59, 0.9)), 
                    url('https://images.unsplash.com/photo-1584551246679-0daf3d275d0f?auto=format&fit=crop&w=1920&q=80') center/cover;
        padding: 80px 0;
        color: white;
        text-align: center;
        border-bottom: 4px solid var(--accent);
    }
    .page-title { font-size: 36px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; }
    
    /* --- Trial Section Styling --- */
    .trial-section { padding: 80px 0; background-color: var(--bg-soft); }
    
    /* Left Side Info */
    .trial-info-box { background: white; padding: 40px; border-radius: 20px; border: 1px solid #e2e8f0; height: 100%; box-shadow: 0 10px 30px rgba(0,0,0,0.03); }
    .info-list { list-style: none; padding: 0; margin-top: 30px; }
    .info-list li { display: flex; align-items: flex-start; margin-bottom: 25px; }
    .info-icon { width: 45px; height: 45px; background: rgba(212, 175, 55, 0.15); color: var(--accent); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; margin-right: 15px; }
    .info-text h5 { font-size: 18px; font-weight: 700; color: var(--primary-dark); margin-bottom: 5px; }
    .info-text p { color: #64748b; font-size: 14px; line-height: 1.6; margin: 0; }

    /* Right Side Form */
    .trial-form-wrapper {
        background: white;
        padding: 40px;
        border-radius: 20px;
        border-top: 5px solid var(--accent);
        box-shadow: 0 15px 40px rgba(0,0,0,0.08);
    }
    .trial-form-wrapper .form-label { font-weight: 600; color: var(--primary-dark); font-size: 14px; }
    .trial-form-wrapper .form-control, .trial-form-wrapper .form-select {
        border-radius: 10px;
        padding: 12px 15px;
        border: 1px solid #e2e8f0;
        background-color: #f8fafc;
        transition: 0.3s;
    }
    .trial-form-wrapper .form-control:focus, .trial-form-wrapper .form-select:focus {
        border-color: var(--accent);
        box-shadow: 0 0 0 0.2rem rgba(212, 175, 55, 0.2);
        background-color: white;
    }
    .btn-submit-trial {
        background: var(--primary-dark);
        color: var(--accent);
        padding: 14px 20px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 1px;
        border-radius: 10px;
        border: none;
        width: 100%;
        transition: 0.3s;
    }
    .btn-submit-trial:hover {
        background: var(--accent);
        color: var(--primary-dark);
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(212, 175, 55, 0.3);
    }

    @media (max-width: 991px) {
        .trial-info-box { margin-bottom: 30px; padding: 25px; }
        .trial-form-wrapper { padding: 25px; }
    }
</style>

<section class="page-header-wrap">
    <div class="container">
        <h1 class="page-title">Book a Free Trial Class</h1>
        <p class="fs-5 mt-2 opacity-75">Experience our teaching methodology before you enroll.</p>
    </div>
</section>

<section class="trial-section">
    <div class="container">
        
        <?= $success_msg; ?>

        <div class="row g-4 align-items-center">
            
            <div class="col-lg-5">
                <div class="trial-info-box">
                    <h3 class="fw-bold mb-2" style="color: var(--primary);">Why Take a Free Trial?</h3>
                    <p class="text-muted mb-4">A free trial helps you evaluate our platform and teachers to ensure it's the right fit for your Islamic learning journey.</p>
                    
                    <ul class="info-list">
                        <li>
                            <div class="info-icon"><i class="fas fa-chalkboard-teacher"></i></div>
                            <div class="info-text">
                                <h5>Evaluate the Teacher</h5>
                                <p>Get to know your tutor's teaching style and see how comfortable you are.</p>
                            </div>
                        </li>
                        <li>
                            <div class="info-icon"><i class="fas fa-laptop-house"></i></div>
                            <div class="info-text">
                                <h5>Check the Platform</h5>
                                <p>Experience our 1-on-1 live session environment via Zoom or Google Meet.</p>
                            </div>
                        </li>
                        <li>
                            <div class="info-icon"><i class="fas fa-list-ol"></i></div>
                            <div class="info-text">
                                <h5>Level Assessment</h5>
                                <p>The teacher will evaluate your current level to suggest the best starting point.</p>
                            </div>
                        </li>
                        <li>
                            <div class="info-icon"><i class="fas fa-credit-card"></i></div>
                            <div class="info-text">
                                <h5>No Credit Card Required</h5>
                                <p>The trial is 100% free with absolutely no obligation to enroll.</p>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>

            <div class="col-lg-7">
                <div class="trial-form-wrapper">
                    <div class="text-center mb-4">
                        <h3 class="fw-bold" style="color: var(--primary-dark);">Trial Registration Form</h3>
                        <p class="text-muted small">Fill out the details below and we will contact you to schedule.</p>
                    </div>

                    <form action="" method="POST">
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label class="form-label">Student Name *</label>
                                <input type="text" name="name" class="form-control" placeholder="e.g. Abdullah" required>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">WhatsApp Number *</label>
                                <input type="tel" name="phone" class="form-control" placeholder="+880 1XXX XXXXXX" required>
                            </div>
                            
                            <div class="col-md-12">
                                <label class="form-label">Email Address *</label>
                                <input type="email" name="email" class="form-control" placeholder="youremail@example.com" required>
                            </div>

                            <div class="col-md-6">
                                <label class="form-label">Student Age *</label>
                                <input type="number" name="age" class="form-control" placeholder="e.g. 12" required>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Gender *</label>
                                <select name="gender" class="form-select" required>
                                    <option value="" disabled selected>Select Gender</option>
                                    <option value="Male">Male</option>
                                    <option value="Female">Female</option>
                                </select>
                            </div>

                            <div class="col-md-6">
                                <label class="form-label">Interested Course *</label>
                                <select name="course_id" class="form-select" required>
                                    <option value="" disabled <?= !$selected_course_id ? 'selected' : ''; ?>>Select Course</option>
                                    
                                    <?php if (!empty($courses)): ?>
                                        <?php foreach ($courses as $c): ?>
                                            <option value="<?= $c['id']; ?>" <?= ($selected_course_id == $c['id']) ? 'selected' : ''; ?>>
                                                <?= htmlspecialchars($c['title']); ?>
                                            </option>
                                        <?php endforeach; ?>
                                    <?php else: ?>
                                        <option value="" disabled>No courses available right now</option>
                                    <?php endif; ?>
                                    
                                </select>
                            </div>
                            
                            <div class="col-md-6">
                                <label class="form-label">Preferred Trial Date *</label>
                                <input type="date" name="preferred_date" class="form-control" required>
                            </div>
                        </div>

                        <div class="mt-4 pt-2">
                            <button type="submit" class="btn-submit-trial">
                                Book Free Trial <i class="fas fa-paper-plane ms-2"></i>
                            </button>
                        </div>
                    </form>
                </div>
            </div>

        </div>
    </div>
</section>

<?php include 'footer.php'; ?>