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

@push('head')
    <link rel="stylesheet" type="text/css" href="/css/board/common.css"/>
    <link rel="stylesheet" type="text/css" href="/css/board/review/board.css?v=1"/>
@endpush

@section('content')
    <div class="bbs-banner">
        @if (str_contains(url()->current(), 'language-school'))
            <h1 class="title">어학연수 후기</h1>
            <p class="sub">솔직담백한 리얼 후기를 확인하세요!</p>
        @elseif (str_contains(url()->current(), 'university'))
            <h1 class="title">대학합격 후기</h1>
            <p class="sub">솔직담백한 리얼 후기를 확인하세요!</p>
        @elseif (str_contains(url()->current(), 'junior-abroad'))
            <h1 class="title">조기유학 후기</h1>
            <p class="sub">솔직담백한 리얼 후기를 확인하세요!</p>
        @endif
    </div>

    <div class="max-width">
        <!-- 메인 컨텐츠 -->
        <div class="bbs">

            <!-- TOP 네비게이션 -->
            @include('review.nav')

            <!-- Content Manager -->
            <section class="review-slider">
                <div class="notice-wrap">
                    @if (str_contains(url()->current(), 'language-school'))
                        <p class="title">어학연수 V-log</p>
                        <p class="sub">솔직담백한 리얼 후기를 확인하세요!</p>
                    @elseif (str_contains(url()->current(), 'university'))
                        <p class="title">대학합격 후기</p>
                    @elseif (str_contains(url()->current(), 'junior-abroad'))
                        <p class="title">조기유학 후기</p>
                    @endif

                    <div class="reviewSlideWrap">
                        <div class="slideArea">
                            @contentManager('REVIEWS', $upperType)

                            <div class="slider-banner-basic">
                                <ul>
                                    @foreach ($items = @contentItems('REVIEWS', $upperType)->get() as $item)
                                        <li>
                                            @contentItem(['item' => $item])
                                            @endcontentItem
                                        </li>
                                    @endforeach
                                </ul>
                            </div>
                            <div class="review-video">
                                <div class="slider-wrap">
                                    <div class="swiper-wrapper">
                                        @foreach ( $list['top-slider'] as $value)
                                            <div class="swiper-slide area-slider">
                                                <div class="slider-item">
                                                    @if ($value->type == 'video')
                                                        <div class="video-wrap thumb" data-url="{{ $value->url }}">
                                                            <figure><img src="{{ $value->image }}" draggable="false"></figure>
                                                        </div>
                                                        <p class="subject ellipsis_3">
                                                            {{ $value->subject }}
                                                        </p>
                                                    @else
                                                        <a href="javascript:reviewPopup('{{ $value->url }}', '{{ $type }}')">
                                                            <p class="thumb">
                                                                <img src="{{ $value->image }}" alt="{{ $value->subject }}">
                                                            </p>
                                                            <p class="subject ellipsis_3">
                                                                {{ $value->subject }}
                                                            </p>
                                                        </a>
                                                    @endif
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                                <div class="swiper-controls round-style">
                                    <div class="swiper-controls-direction">
                                        <div class="swiper-button-prev"></div>
                                        <div class="swiper-button-next"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <div class="review-list">
                @include('review.real-review', ['type' =>  $type, 'realReviewList' => $realReviewList, 'country' => $country, 'searchData' => $searchData])
                {{--                <iframe id="real-review-view" class="real-review-view" src="{{ route('review.'.$type.'.real-reviews') }}" frameborder="0" width="100%" scrolling="no" onload="autoHeight()">--}}
                {{--                </iframe>--}}
            </div>
        </div>

        <!-- 팝업 -->
        <div class="area-layer-popup commonPopup" id="commonPopup" >
            <div class="popup-container">
                <div class="popup-title">
                    <p class="heading-text"></p>
                </div>
                <div class="popup-content">
                </div>
                <div class="popup-close-x">
                    <i class="ui-layout-close"></i>
                </div>
            </div>
        </div>
    </div>

    <script>
        /* 유학후기 슬라이더 */
        var reviewSlider = new Swiper('.review-slider .slider-wrap', {
            loop: false,
            slidesPerView: 1.5,
            spaceBetween: 8,
            slidesPerGroup: 1,
            slideClass: 'area-slider',
            speed: 700,
            navigation: {
                prevEl: '.review-slider .swiper-button-prev',
                nextEl: '.review-slider .swiper-button-next',
            },
            breakpoints: {
                768: {
                    slidesPerView: 3,
                    spaceBetween: 24,
                    slidesPerGroup: 3,
                },
            },
            on: {
                slideChange: function () {
                    var iframe = $('.slider-wrap').find('.video-wrap iframe');
                    if (iframe.length) {
                        for(var i = 0; i < iframe.length; i++) {
                            iframe[i].contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}','*');
                        }
                    }
                },
            }
        });

        $('.review-video .video-wrap').click(function(){
            $(this).find('figure').remove();
            $(this).append('<iframe src="'+$(this).data('url')+'?enablejsapi=1&autoplay=1" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>');
        });

        function autoHeight() {
            $('#real-review-view').css('height', 'auto');
            $('#real-review-view').css('overflow', 'hidden');
            var the_height = $('#real-review-view').get(0).contentDocument.body.scrollHeight;
            $('#real-review-view').css('height', the_height);
        }

        // 후기팝업
        // param info
        //    content: review type
        //    id: page id
        function reviewPopup(id, type) {
            url =  '/review/'+ type + '/content/' + id;
            methodType = 'GET';

            $.ajax({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                url : url,
                type: methodType,
                dataType: "JSON",
                success : function (response) {
                    //console.log(response);
                    if (response.code === 200) {
                        //console.log(response.data);
                        $("#commonPopup .heading-text").html(response.data.title);
                        $("#commonPopup .popup-content").html(response.data.content);
                        $("#commonPopup").css('display', 'block');
                        $('#commonPopup .popup-content').scrollTop(0);
                    }
                    return false;
                },
                error:function(request,status,error){
                    //console.log(error);
                    //console.log(request.responseText);
                }
            });
        }

        function commonPopup(address) {
            window.location = address;
        }

        // 팝업
        $('.ui-layout-close').click(function() {
            $('.area-layer-popup').css('display', 'none');
        });
    </script>
@endsection