File: /home/durgeshpandey215/www/ipsol.skilladders.com/course.php
<?php
require_once 'controller/security_headers.php';
require_once 'controller/DB_Config.php';
$con = OpenCon();
// Get the requested page URL
$page_url = isset($_GET['pageurl']) ? $_GET['pageurl'] : '';
// 1. Fetch Course Details
$stmt = $con->prepare("SELECT id, parent_course_id, course_logo, name, title, course_summery, duration, training_type, weekdays, weekends, img_file, course_details, tab_title, meta_keyword, meta_description, canonical FROM `courses` WHERE page_url = ? AND delete_status = 'N'");
$stmt->bind_param("s", $page_url);
$stmt->execute();
$stmt->store_result();
$stmt->bind_result($id, $parent_course_id, $course_logo, $name, $title, $course_summery, $duration, $training_type, $weekdays, $weekends, $img_file, $course_details, $tab_title, $meta_keyword, $meta_description, $canonical);
$stmt->fetch();
$stmt->close(); // Close this statement so we can run others
// If no course found, redirect to all-courses
if (!$id) {
header("Location: " . $base_url . "all-courses.php");
exit();
}
// 2. Helper to fix encoding issues (Mojibake)
function fix_text_encoding($text) {
if (!$text) return "";
// Check if double-encoded (common if UTF-8 data is treated as Latin1 then converted to UTF-8 again)
// If we detect universal sequences like '•' (which is E2 80 A2 seen as C3 A2 E2 82 AC C2 A2)
// We try to reverse it using utf8_decode or iconv
// First, try to restore common Windows-1252 characters
// This map handles the "Mojibake" characters often seen
$utf8_to_latin1 = [
"\xC2\x80" => "\xE2\x82\xAC", // €
"\xC2\x82" => "\xE2\x80\x9A", // ‚
"\xC2\x83" => "\xC6\x92", // ƒ
"\xC2\x84" => "\xE2\x80\x9E", // „
"\xC2\x85" => "\xE2\x80\xA6", // …
"\xC2\x86" => "\xE2\x80\xA0", // †
"\xC2\x87" => "\xE2\x80\xA1", // ‡
"\xC2\x88" => "\xCB\x86", // ˆ
"\xC2\x89" => "\xE2\x80\xB0", // ‰
"\xC2\x8A" => "\xC5\xA0", // Š
"\xC2\x8B" => "\xE2\x80\xB9", // ‹
"\xC2\x8C" => "\xC5\x92", // Œ
"\xC2\x8E" => "\xC5\xBD", // Ž
"\xC2\x91" => "\xE2\x80\x98", // ‘
"\xC2\x92" => "\xE2\x80\x99", // ’
"\xC2\x93" => "\xE2\x80\x9C", // “
"\xC2\x94" => "\xE2\x80\x9D", // ”
"\xC2\x95" => "\xE2\x80\xA2", // •
"\xC2\x96" => "\xE2\x80\x93", // –
"\xC2\x97" => "\xE2\x80\x94", // —
"\xC2\x98" => "\xCB\x9C", // ˜
"\xC2\x99" => "\xE2\x84\xA2", // ™
"\xC2\x9A" => "\xC5\xA1", // š
"\xC2\x9B" => "\xE2\x80\xBA", // ›
"\xC2\x9C" => "\xC5\x93", // œ
"\xC2\x9E" => "\xC5\xBE", // ž
"\xC2\x9F" => "\xC5\xB8", // Ÿ
];
// Attempt to detect if it looks like UTF-8 but messed up
if (preg_match('/[âÂ]/', $text)) {
// Aggressive fix: try to decode potential double-UTF8
$try_decode = utf8_decode($text);
if ($try_decode && mb_check_encoding($try_decode, 'UTF-8')) {
// If decoding yields valid UTF-8, use it
$text = $try_decode;
} else {
// Fallback: simple string replacement for the most annoying ones
$replacements = [
'•' => '•',
'–' => '-',
'—' => '--',
'’' => "'",
'“' => '"',
'â€' => '"',
'Â' => '',
'â„¢' => '™', // Fixes ™ appearing as â„¢
'®' => '®', // Fixes ® appearing as ®
'©' => '©' // Fixes © appearing as ©
];
$text = strtr($text, $replacements);
}
}
// Final cleanup of non-printable ASCII
$text = preg_replace('/[\x00-\x1F\x7F]/', '', $text);
return trim($text);
}
// 3. Fetch data and clean it immediately
$title = fix_text_encoding($title);
$name = fix_text_encoding($name);
$course_summery = fix_text_encoding($course_summery);
$course_details = fix_text_encoding($course_details);
// 4. Function to generate recursive topics
function generate_multilevel_topic($con, $course_id , $parent_id=NULL){
$topic = '';
$sql2 = '';
if( is_null($parent_id)){
$sql2 = "SELECT * FROM `course_topics` WHERE `parent_id` IS NULL AND course_id = $course_id ORDER BY `course_topics`.`id` ASC" ;
}
else{
$sql2 = "SELECT * FROM `course_topics` WHERE `parent_id`= $parent_id ORDER BY `course_topics`.`id` ASC";
}
$result2 = mysqli_query($con, $sql2);
if($result2 && mysqli_num_rows($result2) > 0) {
// If it's a nested list (inside a parent), styling is different
if(!is_null($parent_id)){
$topic .= '<ul class="space-y-3 pt-2 pb-2">';
}
while($row2 = mysqli_fetch_assoc($result2)){
// Recursively get children first
$children = generate_multilevel_topic($con, $row2['course_id'], $row2['id']);
// Clean topic text (remove leading bullets, dashes, spaces)
$clean_topic = fix_text_encoding($row2['topic']);
// Remove lingering hyphens if they were used as bullets
$clean_topic = ltrim($clean_topic, "- .");
// If it is a ROOT element (Module/Section)
if(is_null($row2['parent_id'])){
$topic .= '<div class="mb-4 last:mb-0">';
$topic .= '<details class="group bg-white rounded-2xl border border-slate-200 overflow-hidden open:shadow-md transition-shadow duration-300">';
// Summary (Header)
$topic .= '<summary class="flex items-center justify-between p-5 cursor-pointer bg-slate-50 hover:bg-slate-100 transition-colors list-none select-none">';
$topic .= '<div class="flex items-center gap-4">';
$topic .= '<span class="w-8 h-8 rounded-lg bg-white border border-slate-200 flex items-center justify-center text-brand-blue shadow-sm font-bold text-sm"><i class="fa fa-book"></i></span>';
$topic .= '<strong class="text-slate-800 text-lg">'.$clean_topic.'</strong>';
$topic .= '</div>';
$topic .= '<span class="w-8 h-8 rounded-full bg-white flex items-center justify-center text-slate-400 group-open:text-brand-blue group-open:rotate-180 transition-all duration-300 shadow-sm border border-slate-100"><i class="fa fa-chevron-down text-xs"></i></span>';
$topic .= '</summary>';
// Content (Children)
if($children) {
$topic .= '<div class="px-5 py-4 border-t border-slate-100 bg-white">';
$topic .= $children; // These will be <ul><li>...</li></ul>
$topic .= '</div>';
} else {
$topic .= '<div class="px-5 py-4 border-t border-slate-100 bg-white text-slate-400 italic text-sm">No topics recorded yet.</div>';
}
$topic .= '</details>';
$topic .= '</div>';
} else {
// Nested Element (Lesson/Topic)
$topic .= '<li class="flex items-start gap-3 group/item">';
$topic .= '<span class="text-slate-600 text-[15px] leading-relaxed group-hover/item:text-slate-900 transition-colors">' . $clean_topic . '</span>';
// If this nested item has children (3rd level+), display them
if($children){
$topic .= '<div class="pl-4 mt-2 border-l border-slate-100">' . $children . '</div>';
}
$topic .= '</li>';
}
}
if(!is_null($parent_id)){
$topic .= '</ul>';
}
}
return $topic;
}
// 3. Function for Contact Form Dropdown
function show_option_course($con){
$courses = "";
$sql = "SELECT id, name FROM `courses` WHERE `parent_course_id` IS NULL AND delete_status = 'N' ORDER BY `sort_order` ASC";
$result = mysqli_query($con, $sql);
if($result) {
while($row = mysqli_fetch_assoc($result)){
$courses .= "<option value='".$row['id']."'>" .$row['name']."</option>";
}
}
return $courses;
}
// 4. Fetch Parent/Category Name for Breadcrumb
$categoryName = "Certification";
if($parent_course_id) {
$catStmt = $con->prepare("SELECT name FROM courses WHERE id = ?");
$catStmt->bind_param("i", $parent_course_id);
$catStmt->execute();
$catStmt->bind_result($pName);
if($catStmt->fetch()) {
$categoryName = $pName;
}
$catStmt->close();
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<?php
$base_dir = dirname($_SERVER['SCRIPT_NAME']);
$base_url = rtrim(str_replace('\\', '/', $base_dir), '/') . '/';
?>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?php echo $tab_title ? $tab_title : $name . ' | IP Solutions'; ?></title>
<meta content="<?php echo $meta_keyword; ?>" name="keywords">
<meta content="<?php echo $meta_description; ?>" name="description">
<link rel="canonical" href="<?php echo $canonical; ?>" />
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-PH5QQMK');</script>
<!-- Tailwind & Fonts -->
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
<script>
tailwind.config = {
theme: {
extend: {
colors: {
brand: {
blue: '#2957A4',
navy: '#00062F',
light: '#F5F5F5',
accent: '#38bdf8'
}
},
fontFamily: {
sans: ['"Plus Jakarta Sans"', 'sans-serif'],
},
boxShadow: {
'glass': '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(255, 255, 255, 0.5) inset',
}
}
}
}
</script>
<style>
body { font-family: 'Plus Jakarta Sans', sans-serif; background-color: #f8fafc; }
.glass-panel {
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.5);
}
.gradient-text {
background: linear-gradient(to right, #2957A4, #0ea5e9);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
/* Prose styling for dynamic content */
.prose p { margin-bottom: 1rem; color: #475569; line-height: 1.7; }
.prose ul { list-style-type: disc; padding-left: 1.5rem; margin-bottom: 1rem; }
.prose li { margin-bottom: 0.5rem; }
.prose h1, .prose h2, .prose h3 { color: #1e293b; font-weight: 700; margin-top: 2rem; margin-bottom: 1rem; }
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in {
animation: fadeIn 0.5s ease-out forwards;
}
</style>
</head>
<body class="text-slate-800 antialiased selection:bg-brand-blue selection:text-white">
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-PH5QQMK"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- Navigation -->
<?php include 'header_v2.php'; ?>
<!-- Hero Section with Banner -->
<div class="relative bg-[#0B1120] pt-8 pb-16 lg:pt-12 lg:pb-20 overflow-hidden">
<?php if($img_file): ?>
<!-- Dynamic Course Background -->
<div class="absolute inset-0 z-0">
<img src="<?php echo $base_url; ?>img/course_img/<?php echo $img_file; ?>" class="w-full h-full object-cover opacity-20 select-none pointer-events-none">
<!-- Gradient Overlay -->
<div class="absolute inset-0 bg-gradient-to-r from-[#0B1120] via-[#0B1120]/90 to-[#0B1120]/60"></div>
<div class="absolute inset-0 bg-gradient-to-t from-[#0B1120] via-transparent to-transparent"></div>
</div>
<?php else: ?>
<!-- Geometric Fallback -->
<div class="absolute inset-x-0 top-0 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80" aria-hidden="true">
<div class="relative left-[calc(50%-11rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 rotate-[30deg] bg-gradient-to-tr from-[#ff80b5] to-[#9089fc] opacity-20 sm:left-[calc(50%-30rem)] sm:w-[72.1875rem]"></div>
</div>
<div class="absolute inset-0 bg-[#0B1120]/80"></div>
<?php endif; ?>
<div class="max-w-[1400px] mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
<!-- Breadcrumbs -->
<nav class="flex mb-6 text-sm font-medium text-slate-400">
<a href="<?php echo $base_url; ?>index.php" class="hover:text-white transition">Home</a>
<span class="mx-3 text-slate-600">/</span>
<a href="<?php echo $base_url; ?>all-courses.php" class="hover:text-white transition">Courses</a>
<span class="mx-3 text-slate-600">/</span>
<span class="text-white font-semibold"><?php echo $name; ?></span>
</nav>
<!-- Hero Content -->
<div class="max-w-3xl">
<div class="inline-flex items-center gap-2 px-3 py-1 rounded-md bg-white/10 text-brand-accent text-xs font-bold uppercase tracking-wider mb-4 border border-white/10 backdrop-blur-sm">
<?php echo $categoryName; ?>
</div>
<h1 class="text-3xl md:text-5xl font-bold text-white mb-6 leading-tight">
<?php echo $title ? $title : $name; ?>
</h1>
<p class="text-slate-300 text-lg leading-relaxed font-light [&>*]:text-slate-300">
<?php
$clean_summary = strip_tags($course_summery);
echo strlen($clean_summary) > 300 ? substr($clean_summary, 0, 300) . '...' : $clean_summary;
?>
</p>
<?php if(strlen($clean_summary) > 300): ?>
<div class="mt-6">
<a href="#overview" class="inline-flex items-center gap-2 px-6 py-3 rounded-full bg-white/10 text-white font-bold text-sm hover:bg-white/20 hover:scale-105 transition-all border border-white/10 backdrop-blur-md">
Read More <i class="fa fa-arrow-down animate-bounce"></i>
</a>
</div>
<?php endif; ?>
</div>
</div>
</div>
<!-- Main Content Layout -->
<div class="bg-slate-50 min-h-screen pb-20 -mt-8 relative z-20">
<div class="max-w-[1400px] mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
<!-- LEFT COLUMN -->
<div class="lg:col-span-2 space-y-6 order-2 lg:order-1">
<!-- Overview Section -->
<div id="overview" class="bg-white rounded-2xl p-6 md:p-8 shadow-sm border border-slate-200scroll-mt-32">
<div class="flex items-center justify-between mb-6">
<h2 class="text-xl font-bold text-slate-900 flex items-center gap-2">
<span class="w-1 h-6 bg-brand-blue rounded-full"></span>
Course Overview
</h2>
<?php if($duration): ?>
<div class="flex items-center gap-2 bg-slate-50 px-3 py-1 rounded-lg border border-slate-100">
<i class="fa fa-clock-o text-brand-blue"></i>
<span class="text-sm font-bold text-slate-700"><?php echo $duration; ?></span>
</div>
<?php endif; ?>
</div>
<?php if($course_details): ?>
<div class="prose prose-slate max-w-none text-slate-600">
<?php echo $course_details; ?>
</div>
<?php else: ?>
<p class="text-slate-500 italic">No detailed description available.</p>
<?php endif; ?>
</div>
<!-- Curriculum Section -->
<div class="bg-white rounded-2xl p-6 md:p-8 shadow-sm border border-slate-200">
<div class="flex items-center justify-between mb-6">
<h2 class="text-xl font-bold text-slate-900 flex items-center gap-2">
<span class="w-1 h-6 bg-purple-600 rounded-full"></span>
Course Content
</h2>
</div>
<div class="border border-slate-200 rounded-xl overflow-hidden divide-y divide-slate-100">
<?php
$topicsHtml = generate_multilevel_topic($con, $id);
if(!empty($topicsHtml)):
echo $topicsHtml;
else:
?>
<div class="p-8 text-center text-slate-500">
Curriculum is being updated. <a href="#contact-section" class="text-brand-blue font-bold hover:underline">Request Syllabus</a>
</div>
<?php endif; ?>
</div>
</div>
<!-- Related Courses (Horizontal Scroll or Grid) -->
<div class="mt-8">
<h3 class="text-lg font-bold text-slate-900 mb-4">Learners Also Viewed</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<?php
$parent_id = $parent_course_id;
$sql = $con->prepare("SELECT page_url, name, img_file, course_logo FROM `courses` WHERE parent_course_id = ? AND delete_status = 'N' AND id != ? ORDER BY `courses`.`id` ASC LIMIT 4");
$sql->bind_param("ii", $parent_id, $id);
$sql->execute();
$sql->bind_result($rel_url, $rel_name, $rel_img, $rel_logo);
while ($sql->fetch()) {
?>
<a href="<?php echo $base_url; ?>course/<?php echo $rel_url; ?>.php" class="flex gap-4 p-4 bg-white rounded-xl border border-slate-200 hover:border-brand-blue/30 hover:shadow-md transition group">
<div class="w-20 h-20 shrink-0 bg-slate-50 rounded-lg flex items-center justify-center p-2">
<?php if ($rel_img): ?>
<img src="<?php echo $base_url; ?>img/course_img/<?php echo $rel_img; ?>" class="w-full h-full object-cover rounded-md">
<?php elseif ($rel_logo): ?>
<img src="<?php echo $base_url; ?>img/course_logo/<?php echo $rel_logo; ?>" class="max-w-full max-h-full">
<?php else: ?>
<i class="fa fa-graduation-cap text-2xl text-slate-300"></i>
<?php endif; ?>
</div>
<div class="flex-1">
<h4 class="font-bold text-slate-800 text-sm mb-1 group-hover:text-brand-blue transition line-clamp-2"><?php echo $rel_name; ?></h4>
<span class="text-xs text-slate-500 font-medium bg-slate-100 px-2 py-0.5 rounded"><?php echo $categoryName; ?></span>
</div>
</a>
<?php
}
$sql->close();
?>
</div>
</div>
</div>
<!-- RIGHT COLUMN: Sidebar (Sticky) -->
<div class="lg:col-span-1 order-1 lg:order-2">
<div class="sticky top-24 space-y-6 mt-8 lg:-mt-48">
<!-- Course Preview Card -->
<div class="bg-white rounded-2xl shadow-xl shadow-slate-200/50 border border-slate-200 overflow-hidden relative group">
<!-- Header Strip -->
<!-- Preview Media Area -->
<div class="aspect-video bg-slate-900 relative flex items-center justify-center border-b border-slate-100">
<?php if ($img_file): ?>
<img src="<?php echo $base_url; ?>img/course_img/<?php echo $img_file; ?>" class="w-full h-full object-contain p-1 bg-white">
<?php else: ?>
<div class="absolute inset-0 bg-gradient-to-br from-brand-navy to-brand-blue"></div>
<i class="fa fa-graduation-cap text-white text-5xl relative z-10"></i>
<?php endif; ?>
</div>
<div class="p-6">
<div class="mb-6 space-y-3">
<a href="#contact-section" class="block w-full py-4 bg-brand-blue text-white text-center font-bold text-lg rounded-xl hover:bg-brand-navy transition shadow-lg shadow-blue-200">
Enquire Now
</a>
<a href="tel:9820193115" class="block w-full py-4 bg-white text-slate-700 border-2 border-slate-200 text-center font-bold text-lg rounded-xl hover:border-brand-blue hover:text-brand-blue transition">
Call for Details
</a>
</div>
<div class="space-y-4 pt-4 border-t border-slate-100">
<h4 class="font-bold text-slate-900 text-sm">Course Features:</h4>
<ul class="space-y-3">
<li class="flex items-center justify-between text-sm">
<span class="text-slate-600 flex items-center gap-2"><i class="fa fa-users text-slate-400 w-4"></i> Batches</span>
<span class="font-bold text-slate-800">Available</span>
</li>
<li class="flex items-center justify-between text-sm">
<span class="text-slate-600 flex items-center gap-2"><i class="fa fa-desktop text-slate-400 w-4"></i> Mode</span>
<span class="font-bold text-slate-800"><?php echo $training_type ? $training_type : 'Hybrid'; ?></span>
</li>
<li class="flex items-center justify-between text-sm">
<span class="text-slate-600 flex items-center gap-2"><i class="fa fa-book text-slate-400 w-4"></i> Material</span>
<span class="font-bold text-slate-800">Included</span>
</li>
</ul>
</div>
</div>
</div>
<!-- Mini Help Card -->
<div class="bg-white rounded-2xl p-5 shadow-sm border border-slate-200 flex items-center gap-4">
<div class="w-12 h-12 rounded-full bg-green-50 text-green-600 flex items-center justify-center font-bold text-xl"><i class="fa fa-whatsapp"></i></div>
<div>
<p class="text-xs text-slate-500 font-bold uppercase">Chat on WhatsApp</p>
<a href="https://wa.me/919820193115" class="text-sm font-bold text-slate-900 hover:text-green-600">+91 9820193115</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Contact Section -->
<div id="contact-section" class="bg-slate-50 border-t border-slate-200 py-20 relative">
<div class="max-w-[1400px] mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
<!-- Helper Text / Map -->
<div>
<h2 class="text-3xl md:text-4xl font-black text-slate-900 mb-6">Start Your Journey Today</h2>
<p class="text-lg text-slate-600 mb-8 leading-relaxed">
Fill out the form to get detailed syllabus, fee structure, and upcoming batch details. Our experts will get back to you within 24 hours.
</p>
<div class="rounded-3xl overflow-hidden shadow-lg border border-slate-200 h-[300px]">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d15087.903968047962!2d72.84288530000002!3d19.020779550000004!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0000000000000000%3A0xbccac7faae84a04f!2sIPsolutions!5e0!3m2!1sen!2sin!4v1415712270900" width="100%" height="100%" frameborder="0" style="border:0;" allowfullscreen=""></iframe>
</div>
</div>
<!-- Form -->
<div class="bg-white rounded-3xl shadow-[0_10px_40px_-10px_rgba(0,0,0,0.1)] p-8 border border-slate-100">
<form action="<?php echo $base_url; ?>controller/contact_form.php" method="post" name="form1" onSubmit="return validateForm()">
<div class="space-y-4">
<div>
<label class="block text-xs font-bold text-slate-500 uppercase tracking-wider mb-2">Your Name</label>
<input type="text" name="name" required class="w-full px-4 py-3 rounded-xl bg-slate-50 border border-slate-200 focus:bg-white focus:border-brand-blue focus:ring-4 focus:ring-brand-blue/10 transition outline-none font-bold text-slate-700" placeholder="John Doe">
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<label class="block text-xs font-bold text-slate-500 uppercase tracking-wider mb-2">Email Address</label>
<input type="email" name="email" required class="w-full px-4 py-3 rounded-xl bg-slate-50 border border-slate-200 focus:bg-white focus:border-brand-blue focus:ring-4 focus:ring-brand-blue/10 transition outline-none font-bold text-slate-700" placeholder="john@example.com">
</div>
<div>
<label class="block text-xs font-bold text-slate-500 uppercase tracking-wider mb-2">Phone Number</label>
<input type="text" name="number" required class="w-full px-4 py-3 rounded-xl bg-slate-50 border border-slate-200 focus:bg-white focus:border-brand-blue focus:ring-4 focus:ring-brand-blue/10 transition outline-none font-bold text-slate-700" placeholder="+91 98765 43210">
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<label class="block text-xs font-bold text-slate-500 uppercase tracking-wider mb-2">State</label>
<select name="state" required class="w-full px-4 py-3 rounded-xl bg-slate-50 border border-slate-200 focus:bg-white focus:border-brand-blue focus:ring-4 focus:ring-brand-blue/10 transition outline-none font-bold text-slate-700">
<option value="">Select State</option>
<option value="Maharashtra">Maharashtra</option>
<option value="Karnataka">Karnataka</option>
<option value="Delhi">Delhi</option>
<option value="Other">Other</option>
</select>
</div>
<div>
<label class="block text-xs font-bold text-slate-500 uppercase tracking-wider mb-2">Course of Interest</label>
<select name="course_id" required class="w-full px-4 py-3 rounded-xl bg-slate-50 border border-slate-200 focus:bg-white focus:border-brand-blue focus:ring-4 focus:ring-brand-blue/10 transition outline-none font-bold text-slate-700">
<option value="">Select Course</option>
<?php echo show_option_course($con); ?>
</select>
</div>
</div>
<div>
<label class="block text-xs font-bold text-slate-500 uppercase tracking-wider mb-2">Message</label>
<textarea name="message" rows="3" class="w-full px-4 py-3 rounded-xl bg-slate-50 border border-slate-200 focus:bg-white focus:border-brand-blue focus:ring-4 focus:ring-brand-blue/10 transition outline-none font-bold text-slate-700" placeholder="I have a question about..."></textarea>
</div>
<button type="submit" name="submit" class="w-full py-4 bg-brand-blue text-white font-bold rounded-xl hover:bg-blue-700 transition shadow-lg shadow-blue-100 mt-2">
Send Inquiry
</button>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- Footer -->
<?php include 'footer_v2.php'; ?>
<!-- Chatbot & Scripts -->
<?php include_once 'chatbotscript.php';?>
<script>
// Form Validation
function validateForm() {
var x = document.forms["form1"]["name"].value;
if (x == "") { alert("Name must be filled out"); return false; }
var y = document.forms["form1"]["email"].value;
if (y == "") { alert("Email must be filled out"); return false; }
// Basic email pattern check
var emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!emailPattern.test(y)) { alert("Please enter a valid email address"); return false; }
var z = document.forms["form1"]["number"].value;
if (z == "") { alert("Phone Number must be filled out"); return false; }
var a = document.forms["form1"]["state"].value;
if (a == "") { alert("State must be selected"); return false; }
var b = document.forms["form1"]["course_id"].value;
if (b == "") { alert("Course must be selected"); return false; }
}
</script>
</body>
</html>