@extends($service.'.layout')


@section($service.'-css')
    <!-- slide -->
    <link href="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/css/splide.min.css" rel="stylesheet">
    <!-- board -->
    {!! resource('css/common/board.css') !!}

@endsection

@section("progress")
    @include('progress')
@endsection

@section($service."-content")

<div id="wrap" @class(["boardPage", "review",
        "login" => request()->routeIs("center.index") && Auth::check(),
        "test-center"  => request()->routeIs("center.index"),
        "pass"  => request()->routeIs("pass.*"),
        "user"  => request()->routeIs("pass.view") && Auth::id() == $post?->content->writer_id,
        "class"  => request()->routeIs("class.index"),
    ]) class="boardPage review pass">
    <div class="max-width">
        <div class="pageTitle">
            <button type="button" onclick="history.back()" class="backBtn mo-backBtn"></button>
            <h1>{{ $board['name'] }}</h1>
        </div>

        @if (! request()->routeIs("pass.view") && isset($top))
            @if ( $top['type'] == 'pick' )
                <!-- 합격자's pick -->
                <div class="passPick">
                    <p class="pc-text title">합격자's Pick</p>
                    <p class="sub-title customLine mo_tab-text">{{ $top['mo-title'] }}</p>
                    <div class="slide splide">
                        <div class="splide__track">
                            <div class="splide__list">
                                @foreach ($top['videos'] as $video)
                                <div class="videoWrap splide__slide">
                                    <div class="playWrap" data-youtube="{{ $video[0] }}">
                                        <figure style="background-image:url('https://img.youtube.com/vi/{{ $video[0] }}/maxresdefault.jpg')"></figure>
                                    </div>
                                    <div class="subject ellipsis_1">{{ $video[1] }}</div>
                                </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
            @elseif ( $top['type'] == "banner")
                {{-- todo 여기에 이미지 들어가게 해주시면 됩니다. PC 이미지 : $top['banner']['pc-img'] | mobile 이미지 :$top['banner']['mob-img'] --}}
                <a href="{{ $top['banner']['link'] }}" class="banner" style="background: linear-gradient(90deg, #FFF9C9 0%, #FFF2D0 50%, #FFE7DD 100%);">
                    <picture>
                        <source srcset="{{ $top['banner']['pc-img'] }}" media="(min-width: 1200px)">
                        <img src="{{ $top['banner']['mob-img'] }}" alt="{{ $top['banner']['alt'] }}">
                    </picture>
                </a>
            @endif
        @endif

        @if (! request()->routeIs("pass.view"))
            <!-- filter -->
            <div class="filterWrap">
                @yield("review-filter")
            </div>
        @endif

        <div class="listArea" id="review-list">
            @yield("review-list")
        </div>

        @if (! request()->routeIs("pass.view"))
            <!-- 신청 버튼 -->
            <div class="writeBtnWrap bottom-fix-btn">
                <button type="button" class="writeBtn">후기 작성</button>
            </div>
        @endif

    </div>
</div>

@endsection

@section($service."-script")
<!-- slide  -->
<script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/js/splide.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@splidejs/splide-extension-intersection@0.2.0/dist/js/splide-extension-intersection.min.js"></script>

{!! resource('js/components/infinite-scroll.js') !!}
{!! resource('js/common/board/default.js') !!}
{!! resource('js/common/board/review.js') !!}
{!! resource('js/common/board/file-upload.js') !!}

    <script>
        const fileUploadType = 'preview';
        setPageConfig({
            "service" : '{{ $service }}',
            "boardType" : '{{ $board["page"] }}',
            "isActiveInfinity" : '{{ ! request()->routeIs("pass.view") }}',
            "isLogin" : "{{ Auth::check() }}"
        })

        function onChangeDropbox(selectValue) {
            const id = selectValue.attr("id");
            const value = selectValue.val();
            if (id == 'goal_description') {
                if (value == '기타') {
                    $('.motive').addClass("directInput");
                } else {
                    $('.motive').removeClass("directInput");
                }
            }

            onChangeValidation(id, false);
        }


        /* TODO 시험장 후기 */
        if($('.boardPage.pass').length){
            // 이미지 클릭 - 팝업
            $('.boardPage.review.pass .board-view .infoWrap .picture figure').on('click',function(){
                let thisImg = $(this).css('background-image'),
                    thisImgUrl = thisImg.match(/url\(["']?(.*?)["']?\)/)[1]; // 진짜 URL만 추출
                let testCenter_imgPopup = `
                    <div id="testCenterImgPopup">
                        <div class="max-width">
                            <div class="pageTitle">
                                <div class="closeIcon closeBtn"></div>
                                <p class="popupTit">상세이미지</p>
                            </div>
                            <div class="imgWrap">
                                <div class="scrollWidth">
                                    <div class="scrollWrap"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                `;
                $('.boardPage.pass').append(testCenter_imgPopup);
                $('#testCenterImgPopup').addClass('active').find('.imgWrap .scrollWrap').append('<img src="' + thisImgUrl + '">');

                $('#testCenterImgPopup .closeBtn').on('click',function(){
                    $('#testCenterImgPopup').removeClass('active').find('.imgWrap img').remove();
                });
            });
        }
    </script>


    @yield("review-script")
@endsection