@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-view">
		<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-section1-con" id="schoolInfoDetail">
				<p class="smallTxt">*學校機構不斷更新</p>
				<!-- school -->
				<div class="fair-section1-top">                        
					<div class="text-box">                                
						<p class="badge" id="schoolCategory">
							<!-- 카테고리  -->
							<span class="{studytypeClass}" id="studytypeBadge">{studytype}</span>
							<!-- 카테고리 -->
						</p>
						<!-- 학교이름 -->
						<h4 class="title" id="schoolTitle">schoolTitle</h4>

						<p class="countries" id="schoolCountry">
							<!-- 국가 -->
							<!-- 국가 -->
						</p>
						
					</div>
					<span class="logo-box"><img src="/images/lfair/ajax-loader.gif" alt="{schoolName}_logo" id="schoolLogo"/></span>
				</div>
				<div class="textBox">
					<!-- 내용 : 하나로 싸여있어야함, 그 안에 세부내용 리스트업됨 20211118 PBccc -->
					<ul id="schoolInfo" class="school-text"></ul>
					<p id="schoolSummary"><img src="/images/lfair/ajax-loader.gif" alt="loader" /></p>
					<ul id="schoolKeyfacts">
					</ul>
					<a href="" id="schoolBrochureLink" target="_blank"><span>E-Brochure <span></span></span></a>
				</div>
				

				<div class="youtube-box-wrap" id="schoolVideo"></div>

				<!-- 이미지 -->
				<div class="img-box" id="schoolImages"></div>
				<!-- 이미지 -->
				<!-- school -->
			</div>

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

<!-- process Code -->
<input type="hidden" name="id" id="id" value="{{$id}}">

<!-- 국가표기용 html -->
<div id="countryString" style="display:none;">
	<span>
		<img src="/images/lfair/participating-school/flag/{countryImg}" alt="{countryName}">
	</span>
</div>

<!-- 학교사진 표기 -->
<div id="schoolImageString" style="display:none;">
	<figure><img src="{schoolPhoto}" alt="schoolImages" /></figure>
</div>

<!-- 학교정보 표기 -->
<div id="schoolInfoString" style="display:none;">
	<li class="text">{schoolInfo}</li>
</div>

<!-- 학교keyfact 표기 -->
<div id="schoolKeyfactString" style="display:none;">
	<li>{schoolKeyfact}</li>
</div>

<!-- 동영상 표기 -->
<div id="schoolVideoString" style="display:none;">
	<div class="youtube-box">
		<iframe width="100%" height="100%" src="{schoolVideo}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
	</div>
</div>

<script>
	var countryInfo = new Array(); // 국가 한글명, 배치할 탭, 국기이미지파일명
	countryInfo["us"] = ["美國", "tab-usa", "mk_us.png"]; 
	countryInfo["uk"] = ["英國", "tab-eng", "mk_uk.png"];
	countryInfo["ie"] = ["愛爾蘭", "tab-eng", "mk_ie.png"];
	countryInfo["ca"] = ["加拿大", "tab-ca", "mk_ca.png"];
	countryInfo["au"] = ["澳洲", "tab-au", "mk_au.png"];
	countryInfo["nz"] = ["紐西蘭", "tab-au", "mk_nz.png"];
	countryInfo["sw"] = ["瑞士", "tab-etc", "mk_sw.png"];
	countryInfo["nld"] = ["荷蘭", "tab-etc", "mk_nld.png"];
	countryInfo["mt"] = ["馬爾他", "tab-etc", "mk_mt.png"];
	countryInfo["ph"] = ["菲律賓", "tab-etc", "mk_etc.png"];
	countryInfo["kr"] = ["韓國", "tab-etc", "mk_kr.png"];
	countryInfo["etc"] = ["其它", "tab-etc", "mk_etc.png"];
	
	// 학교정보 및 국가표기정보 Default HTML String
	var countryImgString = $("#countryString").html();
	var schoolImageString = $("#schoolImageString").html();
	var schoolInfoString = $("#schoolInfoString").html();
	var schoolKeyfactString = $("#schoolKeyfactString").html();
	var schoolVideoString = $("#schoolVideoString").html();
	var schoolIdx = $("#id").val();

	$(document).ready( function() {
		checkSchoolIdx();
		// getSchoolDetailJson();
	});

	// 학교 Idx 값이 넘어왔는지 확인
	var checkSchoolIdx = function(){
		if (schoolIdx == 0) {
			alert("참가학교 데이터 확인에 문제가 발생했습니다.\n잠시 후 다시 시도해주세요.");
			pageTouch(window.location.href, "statErr");
			location.href = "/lfair/participating-school";
		} else {
			getSchoolDetailJson();
		}
	}

	// 학교정보 JSON을 받아서 학교정보 처리
	var getSchoolDetailJson = function(){
		$.ajax({
			url: 'https://manager.edmsaf.com/api/v1/twschools',
			datatype: 'json',
			data : {page : 1, limit : 10000},
			success : function(response){
				setSchoolDetail(response.datas);
				$(".img-box > figure > img").click(function(){
					var src = $(this).attr("src");
					// console.log(src);
					$(".img-box-popup >  figure > img").attr("src", src);
					$('.img-box-popup').slideDown()
				})
				$('.img-box-popup').click(function(){
					$('.img-box-popup').slideUp()
				})
			},
			error : function(xhr, status, error){
				//alert("참가학교 데이터 확인에 문제가 발생했습니다.\n잠시 후 다시 시도해주세요.");
				pageTouch(window.location.href, "statErr");
				location.href = "/";
			}
		});
	}

	// 학교정보 셋팅
	var setSchoolDetail = function(schoolJson){
		$.each(schoolJson, function (i, item){
			if(schoolJson[i].schoolIdx == schoolIdx){
				$("#schoolTitle").html(schoolJson[i].schoolNameEng.replace(/\\/gi, ""));
				$("title").html(schoolJson[i].schoolNameEng.replace(/\\/gi, "")+ " | edm 세계유학박람회 ");
				$("#schoolLogo").attr("src", schoolJson[i].schoolLogo);
				$("#studytypeBadge").addClass(getStudytypeClass(schoolJson[i].schoolStudyType)).html('語言學校');
				$("#schoolCountry").html(getCountryImgs(schoolJson[i].schoolCountries));
				var schoolSummary = schoolJson[i].schoolSummary ? schoolJson[i].schoolSummary : '';
				schoolSummary = schoolSummary.replace(/\n/gi, "<br />");
				$("#schoolSummary").html(schoolSummary);
				$("#schoolKeyfacts").html(setSchoolKeyfacts(schoolJson[i].schoolKeyfacts));
				let schoolBrochure = schoolJson[i].schoolBrochure;
				if(schoolBrochure){
					schoolBrochure = schoolBrochure.replace(/ /gi, "");
					$("#schoolBrochureLink").attr("href", schoolJson[i].schoolBrochure);
				}else{
					$("#schoolBrochureLink").remove();
				}
				$("#schoolImages").html(setSchoolImages(schoolJson[i].schoolPhotos));
				$("#schoolInfo").html(setSchoolInfos(schoolJson[i].schoolInfos));
				schoolJson[i].schoolVideos.length > 0 ? $("#schoolVideo").html(setSchoolVideos(schoolJson[i].schoolVideos)) : $("#schoolVideo").remove();
			}
		});
	}




	/* 묶어야됨 */
	var setSchoolImages = function(arrs){
		var rtVal = "";
		$.each(arrs, function (i, item){
			rtVal += schoolImageString.replace("{schoolPhoto}", arrs[i].photo);
		});
		return rtVal;
	}

	var setSchoolKeyfacts = function(arrs){
		var rtVal = "";
		$.each(arrs, function (i, item){
			rtVal += schoolKeyfactString.replace("{schoolKeyfact}", arrs[i].keyfact);
		});
		return rtVal;
	}

	var setSchoolInfos = function(arrs){
		var rtVal = "";
		$.each(arrs, function (i, item){
			rtVal += schoolInfoString.replace("{schoolInfo}", arrs[i].info);
		});
		return rtVal;
	}

	var setSchoolVideos = function(arrs){
		var rtVal = "";
		$.each(arrs, function (i, item){
			rtVal += schoolVideoString.replace("{schoolVideo}", arrs[i].video);
		});
		return rtVal;
	}


	// 학교정보 중 유학타입 분류 스타일 셋팅
	var getStudytypeClass = function(studytype){
		switch(studytype) {
			case "대학입학준비과정":
			case "대학/대학원":
				return "graduateSchool";
			case "어학연수":
				return "language";
			case "조기유학":
			case "초중고 유학":
				return "uhak";
			default:
				return "all"; // 기본값
		}
	}

	// 학교정보 중 국가마크 셋팅 (학교 리스트와 같음)
	var getCountryImgs = function(countryJson){
		var rtVal = "";
		$.each(countryJson, function (i, item){
			rtVal += countryImgString.replace("{countryImg}", countryInfo[countryJson[i].country][2]).replace("{countryName}", countryInfo[countryJson[i].country][0]);
		});
		return rtVal;
	}

</script>


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

@endsection