@extends('layouts.default', [
    'activatedNavItem' => 'MAIN',
])

@push('head')
    <link rel="stylesheet" type="text/css" href="/css/main.css?ver=20220310"/>
    <script type="text/javascript" src="/js/main.js?ver=20200807"></script>
@endpush

@section('content')
    <div class="container main">

        <!-- 페이지타이틀 - 숨김 -->
        <div class="area-pages-top hidden">
            <h1 class="page-title">edm유학센터</h1>
        </div>

        <!-- 메인 컨텐츠 -->
        <div class="area-sm-content">
            <!-- full-banner -->
            <div class="sm-fullbanner">
                <h2 class="sm-cont-title hidden">edm유학센터 대표상품</h2>
                @contentManager('MAIN', 'TOP-IMAGES')
                <div class="slider-full">
                    <div class="swiper-wrapper">
                        @foreach ($items = @contentItems('MAIN', 'TOP-IMAGES')->get() as $item)
                            <div class="swiper-slide">
                                @contentItem(['item' => $item])
                                @endcontentItem
                            </div>
                        @endforeach
                    </div>
                </div>
                <div class="swiper-controls-wrap">
                    <div class="swiper-controls">
                        <div class="swiper-controls-direction">
                            <div class="swiper-button-prev">prev</div>
                            <div class="swiper-auto">
                                <div class="swiper-button-stop visible">멈춤</div>
                                <div class="swiper-button-start">재생</div>
                            </div>
                            <div class="swiper-button-next">next</div>
                        </div>
                        <div class="swiper-pagination"></div>
                    </div>
                </div>
            </div>
            <script>
                $(function(){
                    var mainSwiper = new Swiper('.sm-fullbanner .slider-full', {
                        loop: true,
                        navigation: {
                            nextEl: '.swiper-button-next',
                            prevEl: '.swiper-button-prev',
                        },
                        autoplay: {
                            delay: 6000,
                            disableOnInteraction: false,
                        },
                        pagination: {
                            el: '.swiper-pagination',
                            type: 'fraction',
                        },
                        breakpoints: {
                            768: {
                                pagination: {
                                    el: '.swiper-pagination',
                                    type: 'bullets',
                                    clickable: true,
                                }
                            }
                        }
                    });

                    $(".swiper-button-stop").click(function(){
                        mainSwiper.autoplay.stop();
                        $(".swiper-button-start").addClass('visible')
                        $(this).removeClass('visible')
                    });

                    $(".swiper-button-start").click(function(){
                        mainSwiper.autoplay.start();
                        $(".swiper-button-stop").addClass('visible')
                        $(this).removeClass('visible')
                    });

                    mainSwiper.on('resize', function () {
                        this.pagination.render();
                        this.pagination.update();
                    });
                });
            </script>

            <!-- 프로그램 -->
            @include('main.programs-search')

            <!-- why edm -->
            @include('main.why-edm')

            <!-- 역시edm -->
            @include('main.recommend-edm')

            <!-- 인기 프로그램 : 와이드 -->
            @include('main.programs-popular')

            <!-- 프로그램 : 기본형 -->
            <div class="sm-programs-basic">
                <article class="fix-wrap country" data-tab="tab-wrap">
                    <div class="sm-cont-title">
                        <h2>국가별 {{ $type->code !== 'main' ? $type->name : '' }} 프로그램</h2>
                        <p class="add-text"> 국가별로 가고싶은 프로그램을 확인해보세요</p>
                        <a href="{{ route('programs.submain') }}" class="more-txt">더보기</a>
                    </div>
                    <div class="md-tabs-wrap">
                        <ul class="md-tabs-line" data-tab="tab-menu">
                            <li class="active"><a href="#sm-pg-cont0">전체</a></li>
                            <li><a href="#sm-pg-cont1">미국</a></li>
                            <li><a href="#sm-pg-cont2">영국</a></li>
                            <li><a href="#sm-pg-cont3">캐나다</a></li>
                            <li><a href="#sm-pg-cont4">호주</a></li>
                            <li><a href="#sm-pg-cont5">아일랜드</a></li>
                            <li><a href="#sm-pg-cont6">뉴질랜드</a></li>
                            <li><a href="#sm-pg-cont7">몰타</a></li>
                        </ul>
                    </div>
                    <!-- 국가별 -->
                    @include('main.programs-country')
                </article>
                <!-- 초특가패키지 -->
                @include('main.programs-sale')
            </div>

            <!-- 풀 배너 영역 -->
            <div class="sm-fullbanner-event">
                @contentManager('MAIN', 'MIDDLE-FULL-BANNERS')
                <ul class="slider-cont-full">
                    @foreach ($items = @contentItems('MAIN', 'MIDDLE-FULL-BANNERS')->get() as $item)
                        <li>
                            @contentItem(['item' => $item])
                            @endcontentItem
                        </li>
                    @endforeach
                </ul>
            </div>

            <!-- 유학 후기 -->
            <article class="sm-review-full" data-tab="tab-wrap">
                <div class="sm-cont-title">
                    <h2>{{ $type->name }}후기</h2>
                    <p class="add-text">솔직한 유학이야기가 궁금하다면? <br class="mo-br"> 유학 전 확인 필수!</p>
                    <a href="{{ route('review.index') }}" class="more-txt">더보기</a>
                </div>
                @include('main.reviews')
            </article>

            <!-- 유학로그 -->
            {{-- @include('main.uhak-log') --}}

            <!-- edm유튜브 -->
            @include('main.youtube')

            <!-- 게시판 등 -->
            <div class="sm-extra">
                <!-- 게시판 미리보기 -->
                @include('main.qna-notice')

                <!-- 이벤트 -->
                <div class="event-wrap flex-wrap">
                    <div class="col2">
                        @contentManager('MAIN', 'BOTTOM-LEFT-IMAGES')
                        @php
                            $query = contentItems('MAIN', 'BOTTOM-LEFT-IMAGES');
                            $query->getQuery()->orders = null;
                        @endphp
                        @if ($item = $query->inRandomOrder()->first())
                            @contentItem(['item' => $item])
                            @endcontentItem
                            {{--<div class="author">
                                <p>{!! nl2br($item->description) !!}</p>
                            </div>--}}
                        @endif
                    </div>
                    <div class="col2">
                        @contentManager('MAIN', 'BOTTOM-RIGHT-IMAGES')
                        @php
                            $query = contentItems('MAIN', 'BOTTOM-RIGHT-IMAGES');
                            $query->getQuery()->orders = null;
                        @endphp
                        @if ($item = $query->inRandomOrder()->first())
                            @contentItem(['item' => $item])
                            @endcontentItem
                            {{--<div class="author">
                                <p>{!! nl2br($item->description) !!}</p>
                            </div>--}}
                        @endif
                    </div>
                </div>
            </div>
        </div>

        <!-- 지사안내 -->
        @include('main.branches')

        <!-- 공지 레이어팝업 -->
        @include('layouts.popup-layer.notice')

        @php
        $currentDateTime = new DateTime(); // 현재 날짜와 시간
        $startDateTime = new DateTime('2025-04-30 16:00:00'); // 시작 시간
        $endDateTime = new DateTime('2025-05-07 01:00:00'); // 종료 시간
        @endphp
        @if ($currentDateTime >= $startDateTime && $currentDateTime <= $endDateTime) {
        @include('layouts.popup-layer.main')
        @endif

    </div>
@endsection