@extends(env('APP_NAME').'.layout')

@push('head')
    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/odometer.js/0.4.8/themes/odometer-theme-minimal.min.css">

    {!! resource('asset/css/uhak/edm/main.css') !!}
@endpush

@section('content')
    <div class="mainWrap submain-language">
        <div class="container">
            <!-- 페이지타이틀 - 숨김 -->
            <div class="area-pages-top hidden">
                <h1 class="page-title">어학연수 메인</h1>
            </div>

            <!-- 메인 배너 슬라이드 -->
            <header class="mainBannerSlide">
                @php
                $contents1 = $Main->content('메인 배너');
                @endphp
                <div class="maxWidth">
                    <div class="slideWrap slideBeforeNone">
                        <div class="slide">
                            <!--
                                화면에 보이는 슬라이드 개수 이상의 슬라이드가 존재해야 다음 슬라이드가 안 보이는 오류가 없음
                                :: 등록 슬라이드의 개수가 적을 경우 main.js에서 보이는 슬라이드 개수 수정 필요
                            -->
                            <div class="swiper-wrapper">
                                @foreach ($contents1 as $cont)
                                <a href="{{ $cont->link }}" class="swiper-slide" target="_self"> <!-- 현재 창에서 열림 -->
                                    <img src="{{ Storage::disk('s3')->url($cont->image) }}" alt="텍스트"> <!-- alt=""에 텍스트가 들어갑니다. -->
                                    {{-- <img src="{{ Storage::url($cont->image) }}" alt="텍스트"> <!-- alt=""에 텍스트가 들어갑니다. --> --}}
                                    <p>{{$cont->title}}</p> <!-- text -->
                                </a>
                                @endforeach
                            </div>
                        </div>
                        <div class="navigation">
                            <div class="fraction"></div>
                            <button type="button" class="control"></button>
                            <button type="button" class="nav-prev"></button>
                            <button type="button" class="nav-next"></button>
                        </div>
                    </div>
                </div>
            </header>

            <section class="contentsWrap">
                <!-- 검색 -->
                <article class="userSearch">
                    <div class="maxWidth">
                        <div class="flex">
                            <div class="left flex">
                                <div class="icon"><figure style="background-image: url('{{ env('UHAKIMG_S3') }}/uhak/r/v1/main/common/searchArticle_icon.png');"></figure></div>
                                <p><span class="pc-txt">당신을 위한 </span>어학연수 <br class="pc-br"><b>영어권 <em>56개</em> 도시 <em>283개</em> 학교 <br>엄선된 과정을 검색해 보세요.</b></p>
                            </div>
                            <div class="right">
                                <div class="mo-category">
                                    <div class="category">
                                        <p>유학프로그램, 추천학교</p>
                                    </div>
                                </div>
                                <div class="searchPopup">
                                    <button type="button" class="closeBtn"><span>닫기</span></button>
                                    <form method="GET" id="search" action="">
                                        <input type="hidden" name="type" id="type" value="language-abroad">
                                        <input type="hidden" name="type_id" id="type_id" value="1">
                                        <input type="hidden" name="country" id="country" value="">
                                        <input type="hidden" name="theme" id="theme" value="">
                                        <input type="hidden" name="city" id="city" value="">

                                        <div class="category">
                                            <div class="category flex">
                                                <button type="button" class="cat active">추천 과정</button>
                                                <button type="button" class="cat">학교 찾기</button>
                                            </div>
                                        </div>

                                        <div class="searchSelectWrap">
                                            <div class="searchSelect programTheme">
                                                <div class="dropDownMenu select type2 flex">
                                                    <div class="selectArea">
                                                        <div class="current"><div class="selected" data-type="">국가 전체</div></div>
                                                        <div class="optionWrap programCountryList" id="programCountryList">
                                                            <button type="button" data-type="type1" class="option" data-value="">국가 전체</button>
                                                            @foreach ($countries as $val)
                                                            <button type="button" data-type="type1" class="option" data-value="{{ $val['id'] }}">{{ $val['name'] }}</button>
                                                            @endforeach
                                                        </div>
                                                    </div>

                                                    <div class="selectArea">
                                                        <div class="current"><div class="selected" data-type="">테마 전체</div></div>
                                                        <div class="optionWrap programThemeList" id="programThemeList">
                                                            <button type="button" data-type="type1" class="option" data-value="">테마 전체</button>
                                                            @foreach($themes as $val)
                                                            <button type="button" data-type="type1" class="option" data-value="{{ $val['id'] }}">{{ $val['name'] }}</button>
                                                            @endforeach
                                                        </div>
                                                    </div>
                                                    <button class="submitBtn" type="button" onclick="searchPrograms();">검색</button>
                                                </div>
                                            </div>

                                            <div class="searchSelect school">
                                                <div class="dropDownMenu select type2 flex">
                                                    <div class="selectArea">
                                                        <div class="current"><div class="selected" data-type="">국가 전체</div></div>
                                                        <div class="optionWrap schoolCountryList" id="schoolCountryList">
                                                            <button type="button" data-type="type1" class="option" data-value="">국가 전체</button>
                                                            @foreach(countries() as $val)
                                                            <button type="button" data-type="type1" class="option" data-value="{{ $val->config_oldcode }}">{!! $val->config_name !!}</button>
                                                            @endforeach
                                                        </div>
                                                    </div>

                                                    <div class="selectArea">
                                                        <div class="current"><div class="selected" data-type="">도시 전체</div></div>
                                                        <div class="optionWrap schoolCityList" id="schoolCityList">
                                                            <button type="button" data-type="type1" class="option" data-value="">도시 전체</button>
                                                        </div>
                                                    </div>
                                                    <button class="submitBtn" type="button" onclick="searchSchools();">검색</button>
                                                </div>
                                            </div>
                                        </div>
                                    </form>
                                    <div class="mo-course">
                                        <p class="title">어학연수 인기 과정</p>
                                        <a href="">시험 영어 과정 어학연수</a>
                                        <a href="">30대 이상을 위한 어학연수</a>
                                        <a href="">비즈니스 영어 어학연수</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </article>

                <!-- 어학연수 수속자 혜택 -->
                <article class="checkInBenefit" data-aos="">
                    @php
                    $contents2 = $Main->content('수속자 혜택');
                    @endphp

                    <div class="maxWidth">
                        <h2>어학연수 <em>수속자 혜택</em></h2>
                        <h3>국내 1위이기에 가능한 8개의 역대급 혜택!</h3>
                        <div class="slideWrap slideBeforeNone">
                            <div class="navigation">
                                <div class="fraction"></div>
                                <button type="button" class="control"></button>
                                <button type="button" class="nav-prev"></button>
                                <button type="button" class="nav-next"></button>
                            </div>
                            <div class="slide">
                                <div class="swiper-wrapper">
                                    @foreach ($contents2 as $cont)
                                    <div class="swiper-slide">
                                        <p class="title">{{$cont->title}}</p>
                                        <p class="sub">{{$cont->description}}</p>
                                        <div class="icon"><figure style="background-image: url('{{ Storage::disk('s3')->url($cont->image) }}');"></figure></div>
                                    </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    </div>
                </article>

                <!-- 어학연수 V-log 70vh -->
                <article class="v-logWrap">
                    @php
                    $contents3 = $Main->content('백그라운드 영상');
                    @endphp
                    <!-- 어학연수 v-log 70vh video -->
                    @foreach ($contents3 as $cont)
                    <div class="videoWrap-bg">
                        <div class="maxWidth">
                            <div class="video">
                                <video src="{{$cont->link}}" loop muted autoplay playsinline id="v-log-video"></video>
                            </div>
                            <div class="textWrap">
                                <h2>{{$cont->title}}</h2>
                                <h3>{{$cont->description}}</h3>
                                <div class="button-medium"><a href="{{ $cont->options['더보기'] ?? '#' }}" class="btn">더보기</a></div>
                            </div>
                        </div>
                    </div>
                    @endforeach

                    @php
                    $contents4 = $Main->content('브이로그');
                    @endphp
                    <!-- 어학연수 V-log 70vh - slide -->
                    <div class="slideWrap common-videoPlay popupArea">
                        <div class="slide" id="vLogSlide">
                            <div class="maxWidth">
                                <div class="navigation">
                                    <button class="splide__toggle control" type="button"></button>
                                </div>
                            </div>
                            <div class="marquee">
                                <div class="marquee_list">
                                    @foreach ($contents4 as $cont)
                                    <div class="box">
                                        <div class="videoWrap youtube popupOn" data-youtube="{{$cont->link}}"> <!-- ?si 앞에 있는 텍스트가 썸네일 주소 (vi/여기/mqdefaultjpg)에 들어갑니다. -->
                                            <figure style="background-image:url('https://img.youtube.com/vi/{{$cont->link}}/mqdefault.jpg')"></figure>
                                        </div>
                                    </div>
                                    @endforeach
                                    {{-- <div class="box">
                                        <div class="videoWrap youtube popupOn" data-youtube="_PdGH2KXQhs?si=pvwuX2uZoxR7Tw3u"> <!-- ?si 앞에 있는 텍스트가 썸네일 주소 (vi/여기/mqdefaultjpg)에 들어갑니다. -->
                                            <figure style="background-image:url('https://img.youtube.com/vi/_PdGH2KXQhs/mqdefault.jpg')"></figure>
                                        </div> --}}
                                </div>
                            </div>
                        </div>
                        <div class="videoPopup" style="display: none;">
                            <div class="popup">
                                <button type="button" class="closeBtn"><span>닫기</span></button>
                                <iframe src="" title="조기유학 후기 동영상" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
                            </div>
                            <div class="dim"></div>
                        </div>
                    </div>

                    <a href="" class="mo-btn moreViewMobile">더보기</a>
                </article>

                <!-- 국가별 어학연수 한눈에 보기 -->
                <article class="allCountry"  data-aos="">
                    @php
                    $contents5 = $Main->content('국가별 어학연수');
                    @endphp
                    <div class="maxWidth">
                        <div class="titleWrap">
                            <h2>국가별 어학연수 <br>한눈에 보기</h2>
                            <h3>국가별 핵심 정보 총정리!</h3>
                            <div class="slideWrap">
                                <div class="navigation">
                                    <div class="fraction"></div>
                                    <button type="button" class="control"></button>
                                    <button type="button" class="nav-prev"></button>
                                    <button type="button" class="nav-next"></button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="countrySlide">
                        <div class="slide">
                            <div class="swiper-wrapper">

                                @foreach ($contents5 as $cont)
                                <div class="swiper-slide">
                                    <div class="imgWrap" style="background-image: url('{{ Storage::disk('s3')->url($cont->image) }}');"> <!-- 국가 이미지 -->
                                        <p class="country">{{$cont->title}}</p>
                                        <p class="info">{{$cont->description}}</p>
                                    </div>
                                    <div class="textWrap">
                                        <div class="box flex">
                                            <p class="week">12주</p>
                                            <p class="cost">{{ $cont->options['12주'] ?? '0' }}</p>
                                        </div>
                                        <div class="box flex">
                                            <p class="week">24주</p>
                                            <p class="cost">{{ $cont->options['24주'] ?? '0' }}</p>
                                        </div>
                                        <div class="buttonWrap">
                                            <div class="flex">
                                                <a href="{{ $cont->options['자세히보기'] ?? '#' }}" class="moreInfoBtn">자세히보기</a>
                                                <a href="{{ $cont->options['상담신청'] ?? '#' }}" class="contactBtn">상담신청</a>
                                            </div>
                                            <p class="noticeTxt">{{$cont->tag}}</p>
                                        </div>
                                    </div>
                                </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </article>

                <!-- 어학연수 후기 -->
                <article class="languageTraining-review">
                    @php
                    $contents6 = $Main->content('어학연수 후기');
                    @endphp
                    <div class="maxWidth">
                        <div class="flex">
                            <div class="titleWrap">
                                <h2>어학연수 후기</h2>
                                <h3>자신 있게 공개합니다! <br>실제 고객 이야기가 가득합니다.</h3>
                                <div class="button-medium"><a href="/review-language-school" class="btn">더보기</a></div>
                            </div>

                            <div class="cardWrap flex">
                                @foreach ($contents6 as $cont)
                                <a href="{{$cont->link}}" class="card" data-aos="fade-up"> <!-- 이미지 -->
                                    <figure style="background-image: url('{{ Storage::disk('s3')->url($cont->image) }}');"></figure>
                                    <div class="textWrap">
                                        <p class="name"><span>{{$cont->title}}</span></p>
                                        <p class="subject">{{$cont->description}}</p>
                                        <span class="moreInfoBtn small">자세히보기</span>
                                    </div>
                                </a>
                                @endforeach
                            </div>
                        </div>
                        <a href="/review-language-school" class="mo-btn moreViewMobile">더보기</a>
                    </div>
                </article>

                <!-- 유학티비 -->
                <article id="uhakTv" class="common-videoPlay iframe">
                    @php
                    $contents7 = $Main->content('유학티비');
                    @endphp
                    <div class="maxWidth">
                        <div class="articleTitle">
                            <h2 class="title">유학티비<figure></figure></h2>
                            <h3 class="sub">가장 신뢰할 수 있는 업계 1위 유학정보 채널</h3>
                            <div class="countWrap" data-aos="">
                                <div class="count video">
                                    <!-- main.js 에서 숫자 입력 가능 :: 339줄 ~ -->
                                    <div class="number"><div class="num odometer1">000</div></div>
                                </div>
                                <div class="count subscriber">
                                    <div class="number subscriber_count flex"><div class="num odometer2">0.00</div><div class="txt"> 만</div></div>
                                </div>
                                <div class="count view">
                                    <div class="number flex"><div class="num odometer3">000</div><div class="txt"> 만</div></div>
                                </div>
                            </div>
                        </div>
                        <div class="slideWrap">
                            <div class="navigation">
                                <div class="fraction"></div>
                                <button type="button" class="nav-prev"></button>
                                <button type="button" class="nav-next"></button>
                            </div>
                            <div class="slide" id="video-swiper">
                                <div class="swiper-wrapper">
                                    @foreach ($contents7 as $cont)
                                    <div class="swiper-slide">
                                        <div class="videoWrap youtube" data-youtube="{{$cont->link}}">
                                            <figure style="background-image:url('https://img.youtube.com/vi/{{$cont->link}}/mqdefault.jpg')"></figure>
                                        </div>
                                        <div class="textWrap ellipsis2">
                                            <p class="text">{{$cont->title}}</p>
                                        </div>
                                    </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    </div>
                </article>

                <!-- 고객 서비스 -->
                <article class="customerService">
                    @php
                    $contents8 = $Main->content('고객 서비스');
                    @endphp
                    <div class="maxWidth">
                        <h2>고객 서비스</h2>
                        <h3>edm유학센터만의 특별한 서비스를 확인하세요.</h3>
                        <ul class="flex">
                            @foreach ($contents8 as $cont)
                            <li style="background-image: url('{{ Storage::disk('s3')->url($cont->image) }}');"> <!-- image url -->
                                <a href="{{$cont->link}}"> <!-- url -->
                                    <p>{{$cont->title}}</p> <!-- text1 -->
                                    <span>{{$cont->description}}</span> <!-- text2 -->
                                </a>
                            </li>
                            @endforeach
                        </ul>
                    </div>
                </article>

                <!-- 하단 배너 -->
                <article class="bottomBanner">
                    @php
                    $contents9 = $Main->content('하단 배너');
                    @endphp
                    <div class="maxWidth">
                        <div class="flex sb">
                            @foreach ($contents9 as $cont)
                            <a href="{{$cont->link}}" class="banner" style="background-image: url('{{ Storage::disk('s3')->url($cont->image) }}');">
                                <span>{{$cont->description}}</span>
                                <p class="title">{{$cont->title}}</p>
                                {{-- <p class="title">edm유학센터 <br class="mo-br">팬데믹 대처 리포트</p> --}}
                                <div class="button-small"><p class="btn">자세히보기</p></div>
                            </a>
                            @endforeach
                        </div>
                    </div>
                </article>
            </section>
        </div>
    </div>
@endsection

@section('script')
    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
    <!-- <script src="https://cdn.jsdelivr.net/npm/jquery.marquee@1.6.0/jquery.marquee.min.js"></script> -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/odometer.js/0.4.8/odometer.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/ScrollTrigger.min.js"></script>
    <script>
        // PHP 데이터를 JavaScript 변수로 설정
        const youtubeChannelStats = {!! json_encode($youtubeChannelStats) !!};
        console.log(youtubeChannelStats);
    </script>
    {!! resource('asset/js/uhak/main.js') !!}

    <script type="text/javascript">
        // 상단 검색창 작업 중
        document.addEventListener('DOMContentLoaded', function() {
            // 추천 과정 - 국가 선택시 테마 리스트 호출
            document.querySelectorAll('.programCountryList .option').forEach(item => {
                item.addEventListener('click', function() {
                    const selectedProgramCountry = this.dataset.value;
                    document.getElementById('country').value = selectedProgramCountry;
                    document.getElementById('theme').value = '';
                    document.getElementById('city').value = '';
                });
            });

            document.querySelectorAll('.programThemeList .option').forEach(item => {
                item.addEventListener('click', function() {
                    const selectedProgramTheme = this.dataset.value;
                    document.getElementById('theme').value = selectedProgramTheme;
                });
            });

            // 학교 찾기 - 국가 선택시 도시 리스트 호출
            document.querySelectorAll('.schoolCountryList .option').forEach(item => {
                item.addEventListener('click', function() {
                    const selectedSchoolCountry = this.dataset.value;
                    const selectedSchoolUhakType = '1';
                    document.getElementById('country').value = selectedSchoolCountry;
                    document.getElementById('theme').value = '';
                    document.getElementById('city').value = '';

                    $.ajax({
                        url: `/schoolinfo/get-cities-language-main?uhaktype=${selectedSchoolUhakType}&country=${selectedSchoolCountry}`,
                        method: 'GET',
                        success: function(response) {
                            document.getElementById('schoolCityList').innerHTML = response;
                        },
                        error: function() {
                            console.error('Error fetching cities');
                        }
                    });

                });
            });

            // 이벤트 위임을 사용하여 동적으로 추가된 요소에도 클릭 이벤트 적용
            document.getElementById('schoolCityList').addEventListener('click', function(event) {
                if (event.target && event.target.classList.contains('option')) {
                    const selectedSchoolCity = event.target.dataset.value;
                    document.getElementById('city').value = selectedSchoolCity;
                }
            });
        });
    </script>

    <script>
        // 추천 과정 검색창 -> 프로그램 검색 페이지로 이동
        function searchPrograms() {
            var type_path = '/'+document.getElementById('type').value;
            var country = document.getElementById('country').value;
            var theme = document.getElementById('theme').value;

            location.href='/programs'+type_path+'?'+'country='+country+'&'+'theme='+theme;
        }

        // 학교 찾기 검색창 -> 학교 검색 페이지로 이동
        function searchSchools() {
            var uhak_type_id = document.getElementById('type_id').value;
            var country = document.getElementById('country').value;
            var city = document.getElementById('city').value;

            location.href='/schoolinfo'+'?'+'uhak_type='+uhak_type_id+'&'+'country='+country+'&'+'city='+city;
        }
    </script>
@endsection