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

@push('head')
	{!! resource('main/asset/main.css') !!}
    <!-- submain.js에 프로그램 상단 공통 영역 슬라이드 컨트롤 추가 -->
    <script type="text/javascript" src="/js/edmuhak/programs/submain.js"></script>
    <script type="text/javascript" src="/js/edmuhak/programs/autocomplete.js"></script>
    <link rel="stylesheet" type="text/css" href="/css/edmuhak/programs/programs.css?ver=20220707"/>
    <style type="text/css">
        .mo-quick-menu {
            display: none;
        }
    </style>
@endpush

@section('content')

    @include('edmuhak.component.programs.include.top.' . $templatename, [
        'element' => $element
    ])

    @yield('details')

    {{-- 하단 고정 CTA 버튼 영역 --}}
    <div class="area-programs-inquiry fixed">
        <div class="api-wrap">
            <strong class="pg-title">{{ isset($element['fixed_cta']['cta_title']) && $element['fixed_cta']['cta_title'] ? $element['fixed_cta']['cta_title'] : '상담 문의' }}</strong>
            <div class="inquiry-button">
                @if(isset($element['fixed_cta']['kakaotalk_button']) && $element['fixed_cta']['kakaotalk_button'] !== 'N')
                    <a class="button color" href="https://pf.kakao.com/_ZYxlVV">카톡상담</a>
                @endif
                <a class="button color" href="{{ isset($element['fixed_cta']['cta_link']) && $element['fixed_cta']['cta_link'] ? $element['fixed_cta']['cta_link'] : 'https://www.edmuhak.com/inquiry-consultation' }}">{{ isset($element['fixed_cta']['cta_text']) && $element['fixed_cta']['cta_text'] ? $element['fixed_cta']['cta_text'] : '상담예약' }}</a>
            </div>
        </div>
    </div>
    {{-- //하단 고정 CTA 버튼 영역 --}}

    {{-- 하단 관련 상품 영역 --}}
    <div class="max-width area-programs-other">
        @if (count($programs['relation']))
            <div class="program-slider">
                <h2 class="ps-title">관련상품</h2>
                <div class="area-pg-list">
                    <div class="swiper-wrapper">
                        @foreach ($programs['relation'] as $program)
                            <div class="swiper-slide pg-item">
                                @include('edmuhak.component.programs.item', ['program' => $program])
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        @endif

        @if (isset($program['type']['code']))
        <div class="program-slider">
            @if ($program['type']['code'] == 'language-abroad')
                <h2 class="ps-title">어학연수 후기<a href="/review-language-school" class="yt-ps-title-link">더보기+</a></h2>
                @include('edmuhak.component.programs.review', ['reviewList'=>$languageReviewList])
            @elseif($program['type']['code'] == 'university-abroad')
                <h2 class="ps-title">해외대학 후기<a href="/review-university" class="yt-ps-title-link">더보기+</a></h2>
                @include('edmuhak.component.programs.review', ['reviewList'=>$universityReviewList])
            @elseif($program['type']['code'] == 'junior-abroad')
                <h2 class="ps-title">조기유학 후기<a href="/review-junior-abroad" class="yt-ps-title-link">더보기+</a></h2>
                @include('edmuhak.component.programs.review', ['reviewList'=>$juniorReviewList])
            @elseif($program['type']['code'] == 'camp')
            @else
            @endif
        </div>
        <div class="program-slider">
            @if (count($uainfo_contentList) && ($program['type']['code'] == 'university-abroad'))
                <h2 class="ps-title">유학정보<a href="/university-abroad-univ-abroad-info" class="yt-ps-title-link">더보기+</a></h2>
                @include('edmuhak.component.programs.univ-abroad-info')
            @endif
        </div>
        <div class="program-slider">
            @if ($program['type']['code'] == 'language-abroad' && count($faq_contentList_language) != 0)
                <h2 class="ps-title">유학 FAQ</h2>
                @include('edmuhak.component.programs.uhak-faq', ['faq_contentList'=>$faq_contentList_language])
            @elseif($program['type']['code'] == 'university-abroad' && count($faq_contentList_university) != 0)
                <h2 class="ps-title">유학 FAQ</h2>
                @include('edmuhak.component.programs.uhak-faq', ['faq_contentList'=>$faq_contentList_university])
            @elseif($program['type']['code'] == 'junior-abroad' && count($faq_contentList_junior) != 0)
                <h2 class="ps-title">유학 FAQ</h2>
                @include('edmuhak.component.programs.uhak-faq', ['faq_contentList'=>$faq_contentList_junior])
            @elseif($program['type']['code'] == 'working-holiday' && count($faq_contentList_working) != 0)
                <h2 class="ps-title">유학 FAQ</h2>
                @include('edmuhak.component.programs.uhak-faq', ['faq_contentList'=>$faq_contentList_working])
            @elseif($program['type']['code'] == 'art-uhak' && count($faq_contentList_art) != 0)
                <h2 class="ps-title">유학 FAQ</h2>
                @include('edmuhak.component.programs.uhak-faq', ['faq_contentList'=>$faq_contentList_art])
            @else
            @endif
        </div>
        @endif

{{--        @if (count($programs['popular']))--}}
{{--            <div class="program-slider">--}}
{{--                <h2 class="ps-title">edm유학센터 인기프로그램</h2>--}}
{{--                <div class="area-pg-list">--}}
{{--                    <div class="swiper-wrapper">--}}
{{--                        @foreach ($programs['popular'] as $program)--}}
{{--                            <div class="swiper-slide pg-item">--}}
{{--                                @include('programs.item', ['program' => $program])--}}
{{--                            </div>--}}
{{--                        @endforeach--}}
{{--                    </div>--}}
{{--                </div>--}}
{{--            </div>--}}
{{--        @endif--}}
    </div>
    {{-- //하단 관련 상품 영역 --}}

    <script type="text/javascript">
        new Swiper('.program-slider .area-pg-list', {
            loop: false,
            slidesPerView: 'auto',
            slideClass: 'pg-item',
            speed: 200,
            slidesPerView: 1.5,
            slidesPerGroup: 1,
            spaceBetween: 13,
            breakpoints:{
                768:{
                    slidesPerView: 4,
                    spaceBetween: 20,
                    slidesPerGroup: 4,
                },
                567:{
                    slidesPerView: 2.5,
                    slidesPerGroup: 1,
                },
            }
        });
    </script>
    {{--    <script type="text/javascript">--}}
    {{--        alert( $('.filter-item input[name="country_code"]').val() );--}}
    {{--    </script>--}}
@endsection