@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")
                @if (
                    (! isset($top['banner']['started_at']) && ! isset($top['banner']['ended_at'])) ||
                    (isset($top['banner']['started_at']) && isset($top['banner']['ended_at']) && date("Y-m-d") >= $top['banner']['started_at'] &&  date("Y-m-d") <= $top['banner']['ended_at'] )
                )
                    <div id="eventBannerSlide">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide">
                                <a href="{{ $top['banner']['link'] }}" class="banner">
                                    <picture>
                                        <source srcset="{{ env("AWS_S3_IMG_URL") }}{{ $top['banner']['pc-img'] }}" media="(min-width: 1200px)">
                                        <img src="{{ env("AWS_S3_IMG_URL") }}{{ $top['banner']['mob-img'] }}" alt="{{ $top['banner']['alt'] }}">
                                    </picture>
                                </a>
                            </div>
                        </div>
                    </div>
                @endif

            @endif
        @endif

        @if (! request()->routeIs("pass.view"))
            <!-- filter -->
            <div class="filterWrap" id="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> --}}

<!-- splide -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/splidejs/4.1.4/js/splide.min.js" integrity="sha512-4TcjHXQMLM7Y6eqfiasrsnRCc8D/unDeY1UGKGgfwyLUCTsHYMxF7/UHayjItKQKIoP6TTQ6AMamb9w2GMAvNg==" crossorigin="anonymous" referrerpolicy="no-referrer"></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() }}",
            "id" : "{{ isset($post) ? $post->id : 0 }}"
        })



        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