{extend name="default/base/base_home" /}
{block name="mall_main"}
<link rel="stylesheet" href="{$Think.HOME_SITE_ROOT}/new/css/course.css">
<style>
	.list-banner .con2 .filter-container {
		justify-content: flex-start;
	}

	.list-banner .con2 .filter-container>div {
		flex: none;
		width: calc((100% - .5rem * 3) / 4);
	}

	.hint-search-content .program-item {
		display: none;
	}

	.bba {
		margin-right: 4rem;
	}

	.label span {
		font-size: .85rem;
	}

	.label span:nth-of-type(3) {
		width: 5rem;
	}

	.label span:nth-of-type(4) {
		width: 5rem;
	}

	.label span:nth-of-type(5) {
		width: 5rem;
	}

	.label span:nth-of-type(6) {
		width: 5rem;
	}

	.label span:nth-of-type(7) {
		width: 7rem;
	}

	.linknone {
		border-bottom: 1px solid #C0C0C0 !important;
		padding: 1rem 0 !important;
	}

	.linknone span {
		font-size: 0.75rem;
		color: #8B8B8B;
	}

	.label span.b {
		font-size: 0.9rem;
	}

	.form-mask .ui.form {
		max-height: 20rem;
		overflow-x: hidden;
		padding-bottom: 1rem;
	}

	.m-box {
		margin-top: 20px;
	}

	.m-item {
		width: 50%;
	}

	.m-box .line {
		margin: 0 10px;
		display: block;
		width: 1px;
		;
		height: 200px;
		background: #3b52f6;
	}

	.m-item h5 {
		text-align: left;
		font-size: 22px !important;
	}

	@media screen and (max-width:768px) {
		.list-banner .con2 .filter-container {
			justify-content: space-between;
		}

		.list-banner .search-con1 {
			margin-bottom: 4rem;
		}

		.list-banner .search-con1 .inp {
			display: block;
			padding-left: 0;
		}

		.list-banner .search-con1 .inp input {
			padding: 0 10px;
		}

		.list-banner .search-con1 .inp .submit-btn {
			margin-top: 10px;
		}

		.list-banner .search-con1 .inp>span {
			display: none;
		}

	}
</style>
<script>
	$(document).ready(function() {
		if ($(".select-wrap #selected div").text() == "") {
			sessionStorage.removeItem("flag")
		}
		$(".ui.dropdown").dropdown();
	})
</script>
{if $show_type == 1}
<div class="course-banner list-banner">
	<!-- <div class="position">Position: <a href="/">Home</a> > Courses </div> -->
	<div class="content con1 wow fadeInUp" data-wow-duration="0.8s" data-wow-delay="0">
		<div class="left">
			<h2 class="wow fadeInRight" data-wow-duration="0.8s" data-wow-delay="0.2s">7000+</h2>
			<h3 class="wow fadeInRight" data-wow-duration="0.8s" data-wow-delay="0.2s">Featured For-Credit Courses</h3>
			<span class="wow fadeInUp" data-wow-duration="0.8s" data-wow-delay="0.6s">
				In collaboration with our global partner institutions, <br />
				LightCourse offers 7000+ accredited college courses encompassing 300+ majors and disciplines. <br />
				Join us today to earn college credits in a flexible and saving way.
			</span>
		</div>
		<div class="img wow fadeIn" data-wow-duration="0.8s" data-wow-delay="0.2s"><img
				src="{$Think.HOME_SITE_ROOT}/new/images/courses-top-bg.png" alt=""></div>
	</div>
	<div class="main-center main-center-course container wow fadeInUp" data-wow-duration="0.8s" data-wow-delay="0">
		<div action="" class="search-con1" id="filter">
			<h5 class="wow fadeInUp" data-wow-duration="0.8s" data-wow-delay="0.2s">Please enter keywords</h5>
			<div class="inp wow fadeInUp" data-wow-duration="0.8s" data-wow-delay="0.2s">
				<input type="text" class="homeinputvals" placeholder="Course Code or Title (e.g. ACC 100/Accounting)">
				<button type="submit" class="submit-btn homesearchs">
					<i class="iconfont icon-search"></i>
				</button>
				<span class="form-clk" style="cursor: pointer;">Find an equivalent course</span>
				<div class="hint-search-content">
					<div class="item course-item">
						<h4>Course</h4>
						<div class="i-list">

						</div>
					</div>
					<div class="item program-item">
						<h4>Programs</h4>
						<div class="i-list">

						</div>
					</div>
				</div>
			</div>
			<!--  <div class="hot-s">
                <span>Popular Search:</span>
                {foreach name="hot_search" item="val" key="key" }
                <a href="">{$val}</a>
                {/foreach}
            </div>-->
		</div>
		{else /}
		<div class="course-banner list-banner">
			<div class="main-center main-center-course container">
				<div class="positionwow fadeInUp" data-wow-duration="0.8s" data-wow-delay="0.2s">Position：Home >
					{$header_title_eng} </div>
				<div class="content con1 wow fadeInUp" data-wow-duration="0.8s" data-wow-delay="0.2s">
					<div class="left">
						<h2>{$header_title_eng}</h2>
						<!-- <h3>所有课程</h3> -->
						<div class="des">
							{$pro_desc}
						</div>
						<div class="tags">
							<h6>Related topics:</h6>
							<div class="list">

								{notempty name="recommend"}
								{foreach name="recommend" key="goods_key" item="goods"}
								<a href="/brand?c_id={$goods.gc_id}" style="color:lightblue;">{$goods.gc_name}</a>
								<span style="margin-right:10px;">|</span>
								{/foreach}
								{/notempty}
							</div>
						</div>
					</div>
					<div class="img"><img src="{$header_image}" alt=""></div>
				</div>
				<div class="search-con wow fadeInUp" data-wow-duration="0.8s" data-wow-delay="0">
					<h5>Please enter keywords</h5>
					<div class="inp">
						<input type="text" placeholder="Course name or ID (e.g. END/100)">
						<i class="iconfont icon-search"></i>
						<span class="form-clk" style="cursor: pointer;">Find an equivalent course</span>
					</div>
					<!-- <div class="hot-s">
                        <span>Popular Search：</span>
                        {foreach name="hot_search" item="val" key="key" }
                        <a href="">{$val}</a>
                        {/foreach}
                    </div>-->
				</div>
				{/if}

				<div class="content con2 wow fadeInUp" data-wow-duration="0.8s" data-wow-delay="0">
					<div class="filter-container ui form" id="filter">
						{notempty name="attr_array"}
						{php}$j = 0;{/php}
						{foreach name="attr_array" item="val" key="key" }
						{php}$j++;{/php}

						<div class="field">
							<label>{$val.name}</label>
							<div class="ui selection dropdown">
								<input type="hidden" name="gender">
								<i class="dropdown icon"></i>
								<div class="default text">{$val.name}</div>
								<div class="menu">
									{php}$i = 0;{/php}
									{foreach name="$val.value" item="v" key="k" }
									{php}$i++;{/php}
									<div value="{$v.attrvalue_id}" class="item" data-value="1">
										{$v.attrvalue_name}
									</div>
									{/foreach}
								</div>
							</div>
						</div>

						{/foreach}
						{/notempty}
					</div>
					<div class="select-wrap wow fadeInUp" data-wow-duration="0.8s" data-wow-delay="0.2s">
						{if (isset($checked_brand) && is_array($checked_brand)) || (isset($checked_attr) &&
						is_array($checked_attr))}
						<div id="selected">
							<p>You have selected:</p>
							<div>
								{notempty name="checked_brand"}

								{foreach name="checked_brand" item="val" key="key" }
								<a href="{:removeParam(array('b_id' => $key))}"><span>{$Think.lang.ds_brand}:</span>{$val.brand_name}<i
										data-uri="{:removeParam(array('b_id' => $key))}">X</i></a>
								{/foreach}

								{/notempty}

								{notempty name="checked_attr"}

								{foreach name="checked_attr" item="val"}
								<a href="{:removeParam(array('a_id' => $val['attrvalue_id']))}"><span>{$val.attr_name}:
										&nbsp;</span>{$val.attrvalue_name}<i
										data-uri="{:removeParam(array('b_id' => $key))}">X</i></a>
								{/foreach}

								{/notempty}
							</div>
						</div>
						{/if}
						<!-- <div class="submit-btn">
						  <a href="javascript:;">Click on the query</a>
						</div> -->
					</div>
					<div class="show-num ui form wow fadeInUp" data-wow-duration="0.8s" data-wow-delay="0"
						style="display: flex;justify-content: flex-end;margin-top: 1rem;">
						<div class="field inline">
							<label>Show</label>
							<div class="ui selection dropdown">
								<input type="hidden" name="gender">
								<i class="dropdown icon"></i>
								<div class="default text">{$page_size} Results</div>
								<div class="menu">
									<div value="5" class="item" data-value="5">5 Results</div>
									<div value="15" class="item" data-value="10">10 Results</div>
									<div value="25" class="item" data-value="15">15 Results</div>
									<div value="20" class="item" data-value="20">20 Results</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<main class="course wow fadeInUp" data-wow-duration="0.8s" data-wow-delay="0">
		<section class="main-1">
			<div class="main-center  main-center-course container wow fadeInUp" data-wow-duration="0.8s" data-wow-delay="0.2s">
				<div class="link linknone">
					<div class="label">
						<span>Course Title/Institution</span>
						<span class="">Mode of Instruction</span>
						<span>Course Code</span>
						<span>Credits</span>
						<span>Start Date</span>
						<span>Duration</span>
						<span>More</span>
					</div>
				</div>
			</div>
			<div class="main-center main-center-course container">
				{foreach name="goods_list" item="value"}
				<a href="/Goods?goods_id={$value.goods_id}" class="link wow fadeInUp" data-wow-duration="0.8s" data-wow-delay="0.6s">
					<h6>{$value.goods_name}&nbsp;</h6>
					<!--<p>{$value.ke_eng}</p>-->
					<div class="label">
						<span>{$value.ke_college}</span>
						<span class="b bba">{$value.ke_online}</span>
						<span>{$value.goods_serial}</span>
						<span>{$value.ke_credit}</span>
						<span>{$value.ke_start_time}</span>
						{if $value.ke_period == 'Self-paced'}
						<span>{$value.ke_period}</span>
						{else}
						<span>{$value.ke_period} weeks</span>
						{/if}

						<span class="b c">Course details</span>
					</div>
				</a>
				{/foreach}
			</div>
			<div class="pagination">{$show_page|raw}</div>
		</section>
		<section class="main-QA wow fadeInUp" data-wow-duration="0.8s" data-wow-delay="0">
			<div class="main-center container">
				<div class="t wow fadeInUp" data-wow-duration="0.8s" data-wow-delay="0.2s">
					<h2>FAQ</h2>
					<div class="more-btn">
						<a href="/qa">Learn more <em>></em></a>
					</div>
				</div>
				<div class="content wow fadeInUp" data-wow-duration="0.8s" data-wow-delay="0.2s">
					<ul id="accordion1" class="accordion">
						<li class="wow fadeInUp" data-wow-duration="0.8s" data-wow-delay="0.4s">
							<div class="link">
								<h5><span>01. Registration Procedure </span> <i></i></h5>
							</div>
							<div class="submenu">
								<h6>1. Online Registration Procedure </h6>
								<p>Pay tuition - Select course - Course approval - Course registration - Sign the
									agreement - Receive
									student manual- Begin classes - Get grades - Send transcripts - Transfer credits</p>
							</div>
						</li>
						<li class="wow fadeInUp" data-wow-duration="0.8s" data-wow-delay="0.4s">
							<div class="link">
								<h5><span>02. Tuition/Fees</span> <i></i></h5>
							</div>
							<div class="submenu">
								<h6>1. Pricing</h6>
								<p>All courses offered on LightCourse are priced individually based on the institution
									offering the course. Please check the top right of the course page for specific
									prices or contact your advisor for a one-on-one consultation.</p>
								<h6>2. Payment</h6>
								<p>LightCourse offers a variety of payment methods. Tuition can be paid in USD or RMB,
									WeChat, Alipay, bank transfer, and PayPal transfer are all accepted.</p>
								<h6>3. Fees</h6>
								<p>The course price, application fee, and file management charge are included in the
									pricing. However, other fees—such as those covering course materials, third-party
									platforms such as Cengage, Labster, and other course-related costs such as VPN,
									accommodation, etc.—may apply. Contact your advisor for a one-on-one consultation.
								</p>
							</div>
						</li>

						<li class="wow fadeInUp" data-wow-duration="0.8s" data-wow-delay="0.4s">
							<div class="link">
								<h5><span>03. Select the Right Course(s) for You</span> <i></i></h5>
							</div>
							<div class="submenu">
								<h6>1. Choosing the best program/course for your needs</h6>
								<p>Throughout the year, LightCourse offers programs and courses from institutions around
									the world in a variety of disciplines, including engineering, business, natural
									sciences, social sciences, humanities, and arts. These courses are intended to meet
									the needs of a wide range of students seeking major, elective, and general education
									courses. There are a variety of study alternatives available, including online
									for-credit courses (live/recorded/self-paced) and in-person courses, as well as
									study abroad programs.
								</p>
								<p>LightCourse will provide you with an advisor who will work directly with you to help
									determine the best options for your needs.</p>
								<p>(Note: Since all courses have limited capacity, we recommend registering as soon as
									possible to ensure a spot.)</p>
							</div>
						</li>

						<li class="wow fadeInUp" data-wow-duration="0.8s" data-wow-delay="0.4s">
							<div class="link">
								<h5><span>04. Complete Course Approval</span> <i></i></h5>
							</div>
							<div class="submenu">
								<h6>1. Does my home school approve these courses?</h6>
								<p>LightCourse will provide you with an advisor who will provide you with one-on-one
									support throughout the transfer process according to your university's transfer
									credit policy to ensure that you can complete the credit transfer successfully.</p>
							</div>
						</li>


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

		<section class="container-mask form-wrap2">
			<div class="container form-mask" style="max-width:45rem">
				<div class="iconf close-iconf"></div>
				<div action="" onsubmit="return false" class="form-container form ui ">
					<h2 class="c1" style="text-align: center">Find an equivalent course</h2>
					<div class="m-box" style="display: flex">
						<div class="m-item">
							<h5>Option 1</h5>
							<p>Please scan the WeChat QR Code to add our academic advisor and receive additional
								details.</p>
							<img style="width:100px; display:block; margin: 0 auto"
								src="{$Think.HOME_SITE_ROOT}/new/images/wwww.jpg">
						</div>
						<div class="line"></div>
						<div class="m-item">
							<h5>Option 2</h5>
							<p>Do you have the course information at your home institution? Your LightCourse advisor
								will find the equivalent course on LightCourse and send it to you via email within 24
								hours. </p>
							<p>To target the course you are looking for, please enter:</p>
							<form action="">
								<div class="field">
									<input type="text" name="school" id="school"
										placeholder="Please enter the name of your school*">
								</div>

								<input type="hidden" name="fb_code" id="fb_code" value="{$goodss.goods_serial}">
								<input type="hidden" name="fb_course" id="fb_course" value="{$goodss.goods_name}">
								<input type="hidden" name="fb_school" id="fb_school" value="{$goodss.ke_college}">


								<p>Please tell us your name</p>
								<div class="fields two">
									<div class="field">
										<input type="text" name="fname" id="fname" placeholder="First name*">
									</div>
									<div class="field">
										<input type="text" name="lname" id="lname" placeholder="Last name*">
									</div>
								</div>
								<div class="field">
									<input type="text" name="fname" id="fname"
										placeholder="What email address can we reach you at?">
								</div>
								<div class="c">
									<p>If you require immediate assistance, please contact us at <a
											href="mailto:studentservice@lightglobal.org"><strong
												class="c1">studentservice@lightglobal.org</strong></a></p>
								</div>
								<div class="sub">
									<button type="submit" class="ui primary button">Submit</button>
								</div>
							</form>
						</div>
					</div>
				</div>
			</div>
		</section>
	</main>
	<script>
		$(".form-clk").click(function() {
			$(".form-wrap").addClass("show")
		})
		//Talk to a LightCourse advisor
		$('.onsubmitfromss').click(function() {
			let data = {
				email: $("#email").val(),
				fname: $("#fname").val(),
				lname: $("#lname").val(),
				school: $("#school").val(),

				fb_code: $("#fb_code").val(),
				fb_course: $("#fb_course").val(),
				fb_school: $("#fb_school").val(),

				type: 2,
			}
			$.ajax({
				url: "/Memberfeedback/add",
				type: 'post',
				data: data,
				success: function(res) {
					var res = JSON.parse(res);
					if (res.code == 10001) {
						layer.msg(res.message);
					}
					if (res.code == 10000) {
						$(".form-wrap").removeClass("show")
					}
				},
			});
		});


		if (sessionStorage.getItem("flag")) {
			$(window).scrollTop($("#filter").offset().top)

		}
		$(".form-clk").click(function() {
			$(".form-wrap2").addClass("show")
		})
	</script>
	<script>
		$("body").on("click", ".homesearchs", function() {
			var name = $('.homeinputvals').val();
			window.location.href = "/brand?keyword=" + name
		})

		function GetQueryString(name) {
			var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
			var r = window.location.search.substr(1).match(reg);
			if (r != null) return unescape(r[2]);
			return null;
		}
		var secret = GetQueryString("keyword");
		$(".homeinputvals").val(secret);

		// 获取参数
		function getQueryString(name) {
			var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
			var r = window.location.search.substr(1).match(reg);
			if (r != null) {
				return unescape(r[2]);
			};
			return null;
		}
		// 参数修改 目标url,替换参数名,替换参数值
		function changeURLArg(url, arg, arg_val) {
			var pattern = arg + '=([^&]*)';
			var replaceText = arg + '=' + arg_val;
			if (url.match(pattern)) {
				var tmp = '/(' + arg + '=)([^&]*)/gi';
				tmp = url.replace(eval(tmp), replaceText);
				return tmp;
			} else {
				if (url.match('[\?]')) {
					return url + '&' + replaceText;
				} else {
					return url + '?' + replaceText;
				}
			}
		}
		var arr = []
		$(".filter-container .menu > .item").on("click", function() {
			sessionStorage.setItem("flag", 1)
			if ($(this).attr("value") != undefined) {
				arr.push($(this).attr("value"))
			}
			$.each($(".filter-container .field"), function() {
				//$(".filter-container .field").find(".active").length == $(".filter-container .field").length
				//if ($(".filter-container .field").find(".active").length == $(".filter-container .field").length) {
				var str;
				if (getQueryString("a_id") == '0') {
					var url = window.location.href
					var str = ""
					arr.forEach((item, index) => {
						if (index === 0) {
							str += item
						} else {
							str += "_"
							str += item
						}
					});
					window.location.href = changeURLArg(url, "a_id", str)
				} else {
					if (window.location.search.indexOf("a_id") !== -1) {
						var url = window.location.href
						var str = getQueryString("a_id")
						arr.forEach((item, index) => {
							str += "_"
							str += item
						});
						window.location.href = changeURLArg(url, "a_id", str)
					} else {
						if (window.location.search == "") {
							str = "/brand?a_id="
						} else {
							str = window.location.search + "&a_id="
						}
						arr.forEach((item, index) => {
							if (index === 0) {
								str += item
							} else {
								str += "_"
								str += item
							}
						});
						window.location.href = str
					}
				}
				//}
			})
		})
	</script>

	{/block}