@extends('frontend.lfair.layout.default')
@section('content')

	<!-- css -->
	{!! _asset( '/assets/css/lfair/fair.css' ) !!}


	<main class="participating-school" id="wrap">
		<div class="page-banner">
			<h1>參與學校</h1>
		</div>

		<section class="fair-allList">
			<div class="max-width">
				<div class="tabMenu">
					<a href="/lfair/participating-school?tab=0" class="tab active" data-tab-country="all">全部</a> <!-- 전부 -->
					<a href="/lfair/participating-school?tab=1" class="tab" data-tab-country="us">美國</a> <!-- 미국 -->
					<a href="/lfair/participating-school?tab=2" class="tab" data-tab-country="uk|ie">英國/愛爾蘭</a> <!-- 영국/ 아일랜드 -->
					<a href="/lfair/participating-school?tab=3" class="tab" data-tab-country="ca">加拿大</a> <!-- 캐나다 -->
					<a href="/lfair/participating-school?tab=4" class="tab" data-tab-country="au|nz">澳洲/紐西蘭</a> <!-- 오스트레일리아/ 뉴질랜드 -->
					<a href="/lfair/participating-school?tab=5" class="tab" data-tab-country="mt|ko">馬爾他/韓國</a> <!-- 몰타/한국 -->
				</div>

				<!-- 리스트 -->
				<div class="fair-con-wrap listWrap">
					<p class="sub-title">*學校機構不斷更新</p> 
				
					<!-- 추천 학교 -->
					<div class="recommend listSection">
						<h2>推薦學校</h2>
						<ul class="list">
							<li data-country="uk, us, ca, ie, mt" data-school="ec-english">
								<a href="/lfair/participating-school/2">
									<img src="/images/lfair/participating-school/logo/ec.png" alt="EC English" class="logo">
									<h3 class="ellipsis_2">EC English</h3>
									<div class="flagWrap">
										<img src="/images/lfair/participating-school/flag/mk_uk.png" alt="uk">
										<img src="/images/lfair/participating-school/flag/mk_us.png" alt="us">
										<img src="/images/lfair/participating-school/flag/mk_ca.png" alt="ca">
										<img src="/images/lfair/participating-school/flag/mk_ie.png" alt="ie">
										<img src="/images/lfair/participating-school/flag/mk_mt.png" alt="mt">
									</div>
								</a>
							</li>
							<li data-country="us, ca, au" data-school="ilsc">
								<a href="/lfair/participating-school/3">
									<img src="/images/lfair/participating-school/logo/ilsc.png" alt="ILSC Education Group" class="logo">
									<h3 class="ellipsis_2">ILSC Education Group</h3>
									<div class="flagWrap">
										<img src="/images/lfair/participating-school/flag/mk_us.png" alt="us">
										<img src="/images/lfair/participating-school/flag/mk_ca.png" alt="ca">
										<img src="/images/lfair/participating-school/flag/mk_au.png" alt="au">
									</div>
								</a>
							</li>
							<li data-country="ca">
								<a href="/lfair/participating-school/5">
									<img src="/images/lfair/participating-school/logo/sgic.png" alt="St. George International College (SGIC)" class="logo">
									<h3 class="ellipsis_2">St. George International College (SGIC)</h3>
									<div class="flagWrap">
										<img src="/images/lfair/participating-school/flag/mk_ca.png" alt="ca">
									</div>
								</a>
							</li>
							<li data-country="ca">
								<a href="/lfair/participating-school/4">
									<img src="/images/lfair/participating-school/logo/ilac.png" alt="ILAC Education Group" class="logo">
									<h3 class="ellipsis_2">ILAC Education Group</h3>
									<div class="flagWrap">
										<img src="/images/lfair/participating-school/flag/mk_ca.png" alt="ca">
									</div>
								</a>
							</li>
							<li data-country="uk, us">
								<a href="/lfair/participating-school/7">
									<img src="/images/lfair/participating-school/logo/kings.png" alt="Kings Education" class="logo">
									<h3 class="ellipsis_2">Kings Education</h3>
									<div class="flagWrap">
										<img src="/images/lfair/participating-school/flag/mk_uk.png" alt="uk">
										<img src="/images/lfair/participating-school/flag/mk_us.png" alt="us">
									</div>
								</a>
							</li>
							<li data-country="ko">
								<a href="/lfair/participating-school/6">
									<img src="/images/lfair/participating-school/logo/edm-korean.png" alt="edm Korean" class="logo">
									<h3 class="ellipsis_2">edm Korean</h3>
									<div class="flagWrap">
										<img src="/images/lfair/participating-school/flag/mk_kr.png" alt="ko">
									</div>
								</a>
							</li>
						</ul>
					</div>

					<!-- 인기 학교 -->
					<div class="popular listSection">
						<h2>人氣學校</h2>
						<ul class="list">
							<li data-country="uk, ca">
								<a href="/lfair/participating-school/8" class="box">
									<div class="logo"><img src="/images/lfair/participating-school/logo/logo2-bayswater.png" alt="Bayswater College"></div>
									<h3>Bayswater College</h3>
									<div class="flagWrap">
										<img src="/images/lfair/participating-school/flag/mk_uk.png" alt="uk">
										<img src="/images/lfair/participating-school/flag/mk_ca.png" alt="ca">
									</div>
								</a>
							</li>
							<li data-country="uk, ca, etc">
								<a href="/lfair/participating-school/10" class="box">
									<div class="logo"><img src="/images/lfair/participating-school/logo/logo2-ces.png" alt="Centre of English Studies (CES)"></div>
									<h3>Centre of English Studies (CES)</h3>
									<div class="flagWrap">
										<img src="/images/lfair/participating-school/flag/mk_uk.png" alt="uk">
										<img src="/images/lfair/participating-school/flag/mk_ca.png" alt="ca">
										<img src="/images/lfair/participating-school/flag/mk_ie.png" alt="ie">
									</div>
								</a>
							</li>
							<li data-country="ca">
								<a href="/lfair/participating-school/21" class="box">
									<div class="logo"><img src="/images/lfair/participating-school/logo/logo2-ciccc.png" alt="Centre of English Studies (CES)"></div>
									<h3>Cornerstone International Community College of Canada (CICCC)</h3>
									<div class="flagWrap">
										<img src="/images/lfair/participating-school/flag/mk_ca.png" alt="ca">
									</div>
								</a>
							</li>
							<li data-country="ca">
								<a href="/lfair/participating-school/11" class="box">
									<div class="logo"><img src="/images/lfair/participating-school/logo/logo2-sslc.png" alt="Sprott Shaw Language College (SSLC)"></div>
									<h3>Sprott Shaw Language College (SSLC)</h3>
									<div class="flagWrap">
										<img src="/images/lfair/participating-school/flag/mk_ca.png" alt="ca">
									</div>
								</a>
							</li>
							<li data-country="ca">
								<a href="/lfair/participating-school/12" class="box">
									<div class="logo"><img src="/images/lfair/participating-school/logo/logo2-vanwest.png" alt="Vanwest College"></div>
									<h3>Vanwest College</h3>
									<div class="flagWrap">
										<img src="/images/lfair/participating-school/flag/mk_ca.png" alt="ca">
									</div>
								</a>
							</li>
							<li data-country="ca">
								<a href="/lfair/participating-school/19" class="box">
									<div class="logo"><img src="/images/lfair/participating-school/logo/logo2-rciis.png" alt="Royal Canadian Institute of International Studies(RCIIS)"></div>
									<h3>Royal Canadian Institute of International Studies(RCIIS)</h3>
									<div class="flagWrap">
										<img src="/images/lfair/participating-school/flag/mk_ca.png" alt="ca">
									</div>
								</a>
							</li>
							<li data-country="uk">
								<a href="/lfair/participating-school/13" class="box">
									<div class="logo"><img src="/images/lfair/participating-school/logo/logo2-st-giles.png" alt="St. Giles International"></div>
									<h3>St. Giles International </h3>
									<div class="flagWrap">
										<img src="/images/lfair/participating-school/flag/mk_uk.png" alt="uk">
									</div>
								</a>
							</li>
							<li data-country="au">
								<a href="/lfair/participating-school/18" class="box">
									<div class="logo"><img src="/images/lfair/participating-school/logo/logo2-browns.png" alt="Browns English Language School"></div>
									<h3>Browns English Language School </h3>
									<div class="flagWrap">
										<img src="/images/lfair/participating-school/flag/mk_au.png" alt="au">
									</div>
								</a>
							</li>
							<li data-country="uk, us, ca, etc">
								<a href="/lfair/participating-school/14" class="box">
									<div class="logo"><img src="/images/lfair/participating-school/logo/logo2-kaplan.png" alt="Kaplan International Languages"></div>
									<h3>Kaplan International Languages</h3>
									<div class="flagWrap">
										<img src="/images/lfair/participating-school/flag/mk_uk.png" alt="uk">
										<img src="/images/lfair/participating-school/flag/mk_us.png" alt="us">
										<img src="/images/lfair/participating-school/flag/mk_ca.png" alt="ca">
										<img src="/images/lfair/participating-school/flag/mk_ie.png" alt="ie">
									</div>
								</a>
							</li>
							<li data-country="us">
								<a href="/lfair/participating-school/22" class="box">
									<div class="logo"><img src="/images/lfair/participating-school/logo/logo2-talk.png" alt="TALK English School"></div>
									<h3>TALK English School</h3>
									<div class="flagWrap">
										<img src="/images/lfair/participating-school/flag/mk_us.png" alt="us">
									</div>
								</a>
							</li>
							<li data-country="au">
								<a href="/lfair/participating-school/15" class="box">
									<div class="logo"><img src="/images/lfair/participating-school/logo/logo2-shafston.png" alt="Shafston International College"></div>
									<h3>Shafston International College</h3>
									<div class="flagWrap">
										<img src="/images/lfair/participating-school/flag/mk_au.png" alt="au">
									</div>
								</a>
							</li>
							<li data-country="au">
								<a href="/lfair/participating-school/16" class="box">
									<div class="logo"><img src="/images/lfair/participating-school/logo/logo2-impact.png" alt="Impact English College"></div>
									<h3>Impact English College</h3>
									<div class="flagWrap">
										<img src="/images/lfair/participating-school/flag/mk_au.png" alt="au">
									</div>
								</a>
							</li>
							<li data-country="etc">
								<a href="/lfair/participating-school/23" class="box">
									<div class="logo"><img src="/images/lfair/participating-school/logo/logo2-isi.png" alt="ISI Dublin"></div>
									<h3>ISI Dublin</h3>
									<div class="flagWrap">
										<img src="/images/lfair/participating-school/flag/mk_ie.png" alt="ie">
									</div>
								</a>
							</li>
							<li data-country="etc">
								<a href="/lfair/participating-school/20" class="box">
									<div class="logo"><img src="/images/lfair/participating-school/logo/logo2-emerald.png" alt="Emerald Cultural Institute"></div>
									<h3>Emerald Cultural Institute</h3>
									<div class="flagWrap">
										<img src="/images/lfair/participating-school/flag/mk_ie.png" alt="ie">
									</div>
								</a>
							</li>
							<li data-country="etc">
								<a href="/lfair/participating-school/17" class="box">
									<div class="logo"><img src="/images/lfair/participating-school/logo/logo2-atlas.png" alt="EmeAtlas Language School"></div>
									<h3>Atlas Language School</h3>
									<div class="flagWrap">
										<img src="/images/lfair/participating-school/flag/mk_ie.png" alt="ie">
									</div>
								</a>
							</li>
						</ul>
					</div>

					<!-- 상담 가능 학교 목록 -->
					<div class="consultation listSection">
						<h2>可諮詢學校清單</h2>
						<ul class="list">
							@foreach ($counselSchoolTw as $item)
							<li data-country="">{{$item->name}}</li>
							@endforeach
						</ul>
					</div>
				</div>
			</div> 
		</section>
	</main>

	<!-- js -->
	{!! _asset( '/assets/js/lfair/participating-school.js') !!}

	<script>
		$(document).ready(function () {
			// getTwCounselSchoolListJson();
		});

		// 상담가능학교 리스트 JSON을 받아서 학교정보 처리
		var getTwCounselSchoolListJson = function () {
			$.ajax({
				url: 'https://manager.edmsaf.com/api/v1/counselschools',
				datatype: 'json',
				data: { sch_use: 'Y', sch_country: 'us|ca|ie|uk|au|nz|nld|sgp|sw|ko', sch_studytype : 'L', limit: 10000 },
				success: function (response) {
					// console.log(response.datas); // 데이터 확인용

					// <div class="consultation listSection"> 내부의 <ul class="list"> 요소 선택
					let schoolList = $(".consultation.listSection .list");

					// 기존 목록을 초기화 (이전 데이터 제거)
					schoolList.empty();

					// 데이터 반복하여 <li> 추가
					$(response.datas).each(function (k, v) {
						let schoolNameEng1 = v.schoolNameEng; // 학교 이름
						let schoolCountry = v.schoolCountry ?? ""; // 국가 정보 (필요하면 사용)

						// 새로운 <li> 생성
						let listItem = `<li data-country="${schoolCountry}">${schoolNameEng1}</li>`;

						// <ul>에 추가
						// schoolList.append(listItem);
					});
				},
				error: function (xhr, status, error) {
					console.log(xhr.responseText);
				}
			});
		};
	</script>
@endsection