{extend name="default/base/base_home" /}

{block name="mall_main"}
<style>
	.partner-login {
		display: none;
	}

	.quick-login .mc .text {
		height: 100%;
		line-height: 1;
	}

	.dialog_title {
		height: 40px;
	}

	.clk {
		cursor: pointer;
	}

	.quick-login .mc dl dd {
		display: flex;
		align-items: center;
	}

	.quick-login .mc dl dd::after {
		display: none;
	}

	.quick-login .mc dl dd input {
		width: auto !important;
		flex: 1;
	}

	.quick-login .mc dl dd img {
		height: 36px;
	}
</style>
<link rel="stylesheet" href="{$Think.HOME_SITE_ROOT}/new/css/program.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);
	}

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

		.list-banner .con1 .img {
			display: none;
		}

		.list-banner .con1 .left {
			padding: 2rem 0;
			margin-bottom: 0;
		}

		.list-banner .con1 .left h2 {
			margin-bottom: 0;
		}

		.list-banner .con2 {
			padding-top: 1rem;
		}
	}
</style>
<script>
	$(document).ready(function() {
		if ($(".select-wrap #selected div").text() == "") {
			sessionStorage.removeItem("flag")
		}
		$(".ui.dropdown").dropdown();
	})
</script>
<div class="program-top">
	<div class="main-center container wow fadeIn" data-wow-duration="0.8s" data-wow-delay="0.2s">
		<h2>STUDY ABROAD<br />PROGRAMS</h2>
		<span>
			In collaboration with our global partner institutions, <br />
			LightCourse offers 7000+ accredited college courses<br />
			encompassing 300+ majors and disciplines. <br />
			Join us today to earn college credits in a flexible and saving way.
		</span>
		<div class="program-btn">
			<a href="">All Programs<em>></em></a>
		</div>
	</div>
	<img class="wow fadeIn" data-wow-duration="0.8s" data-wow-delay="0.2s" src="{$Think.HOME_SITE_ROOT}/new/images/program-top-bg.png" alt="背景">
</div>
<div class="list-banner">
	<div class="main-center container" style="display: none;">
		<div class="position">Position: <a href="/">Home</a> > Programs </div>
		<div class="content con1">
			<div class="left">
				<h2>All Programs</h2>
				<p class="mb-block" style="text-align: center;">Study abroad summer programs</p>
			</div>
			<div class="img"><img src="{$Think.HOME_SITE_ROOT}/new/images/program.png" alt="program"></div>
		</div>
		<hr style="height:0.5px;border:none;border-top:1px solid #E6E6FA" />
		<!--   <div class="content con2" id="filter">
            <div class="filter-container ui form">
         {notempty name="attr_array"}
          {php}$j = 0;{/php}
          {foreach name="attr_array" item="val" key="key" }
          {php}$j++;{/php}
          {if !isset($checked_attr[$key]) && !empty($val['value']) && is_array($val['value'])}
            <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>
            {/if}
            {/foreach}
            {/notempty}




      </div>

            </div>-->
		<!--<div class="select-wrap">
              {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}:</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>-->
	</div>
</div>
<main class="program">
	<img src="{$Think.HOME_SITE_ROOT}/new/images/program-swiper-bg.png" alt="背景">
	<section class="main-1">
		<div class="main-center container">
			<div class="swiper-container">
				<div class="swiper-wrapper">
					{foreach name="class" item="value" key="index"}
					<a href="/Goods/program?gc_id={$value.gc_id}" target="_blank" class="swiper-slide">
						<ins></ins>
						<em class="ani" swiper-animate-effect="fadeIn" swiper-animate-duration="0.5s" swiper-animate-delay="0">{if $index>=9}{$index + 1}{else}0{$index + 1}{/if}</em>
						<img src="/uploads/home/common/{$value.gc_image}" alt="">
						<div class="program-txt">
							<span class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0">Program Name</span>
							<em class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">{$value.gc_name}</em>
						</div>
					</a>
					{/foreach}
				</div>
				<div class="swiper-pagination"></div>
			</div>
			
			{foreach name="class" item="value"}
			<div class="link" style="display: none;">
				<div class="con">
					<a class="img" href="/Goods/program?gc_id={$value.gc_id}" target="_blank"><img
							src="/uploads/home/common/{$value.gc_image}" alt=""></a>
					<div class="text">
						<a href="/Goods/program?gc_id={$value.gc_id}" target="_blank">
							<h3><span>Program Name:</span>&nbsp;{$value.gc_name}</h3>
						</a>
						<a href="/Goods/program?gc_id={$value.gc_id}" target="_blank">
							<h3><span>Partner Institution:</span>&nbsp;{$value.pro_college}</h3>
						</a>
						<div class="field">
							<div>Time:&nbsp;<span>{$value.pro_period}</span></div>
							<div>Location:&nbsp;<span>{$value.pro_locate}</span></div>
							<div>Type:&nbsp;<span>Study abroad</span></div>
							<div>No. of courses:&nbsp;<span>{$value.pro_course}</span></div>
							<div>Length:&nbsp;<span>{$value.pro_duration}</span></div>
							<div>Popularity:&nbsp;<div class="icon-start">
									<div class="i-start">
										<div class="i">
											<svg class="iconf" aria-hidden="true">
												<use xlink:href="#icon-icon"></use>
											</svg>
											<svg class="iconf" aria-hidden="true">
												<use xlink:href="#icon-icon"></use>
											</svg>
											<svg class="iconf" aria-hidden="true">
												<use xlink:href="#icon-icon"></use>
											</svg>
											<svg class="iconf" aria-hidden="true">
												<use xlink:href="#icon-icon"></use>
											</svg>
											<svg class="iconf" aria-hidden="true">
												<use xlink:href="#icon-icon"></use>
											</svg>
										</div>

									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<object class="link-btn">
					<a href="/Goods/program?gc_id={$value.gc_id}" class="b">Learn more</a>
				</object>
			</div>
			{/foreach}
		</div>
	</section>
	<div class="pagination">{$show_page|raw}</div>
</main>
<script>
	if (sessionStorage.getItem("flag")) {
		$(window).scrollTop($("#filter").offset().top)
	}
</script>
<script>
	// 获取参数
	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() {
			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 = "/program?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>
<script>
	$(function(){
		var programSwiper = new Swiper('.program .swiper-container',{
			loop:false,//开启循环播放
			autoplay: true, //自动播放
			effect : 'slide',//轮播的动效 默认为"slide"（普通位移切换），还可设置为"fade"（淡入）、"cube"（方块）、"coverflow"（3d流）、"flip"（3d翻转）、"cards"(卡片式)、"creative"（创意性）。
			pagination: {
				el: '.program .swiper-pagination',
				clickable :true,
			},
			on:{
				init: function(){
					swiperAnimateCache(this); // 隐藏动画元素 
					swiperAnimate(this); // 初始化完成开始动画
				}, 
				slideChangeTransitionEnd: function(){ 
					swiperAnimate(this); // 每个slide切换结束时也运行当前slide动画
					// this.slides.eq(this.activeIndex).find('.ani').removeClass('ani'); 动画只展现一次，去除ani类名
				},
			}
		});
	})
</script>
{/block}