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

@push('head')
	{!! resource($defaultSkinPath.'asset/common.css') !!}
    {!! resource('edmuhak/component/bbs/common.css') !!} <!-- 게시판 공통 css 하나로 사용 -->
	{!! resource($skinPath.'asset/board.css') !!}
	<link rel="stylesheet" type="text/css" href="/asset/swiper/swiper.min.css"/>
@endpush

@section('content')
    <div class="bbs-banner">
        @if($db=='review-language-school')
            <h1 class="title">어학연수 후기</h1>
            <p class="sub">솔직담백한 리얼 후기를 확인하세요!</p>
        @elseif($db=='review-university')
            <h1 class="title">대학합격 후기</h1>
            <p class="sub">솔직담백한 리얼 후기를 확인하세요!</p>
        @elseif($db=='review-junior-abroad')
            <h1 class="title">조기유학 후기</h1>
            <p class="sub">솔직담백한 리얼 후기를 확인하세요!</p>
        @endif
    </div>
    <div class="max-width">
	    <main class="bbs ">
			<div class="bbs-header">
				<div class="category-tabs">
					<div class="tab">
						<a href="/review-language-school" {!! ($db=='review-language-school') ? 'class="active"':'' !!}>어학연수 후기</a>
					</div>

					<div class="tab">
						<a href="/review-university" {!! ($db=='review-university') ? 'class="active"':'' !!}>대학합격 후기</a>
					</div>

					<div class="tab">
						<a href="/review-junior-abroad" {!! ($db=='review-junior-abroad') ? 'class="active"':'' !!}>조기유학 후기</a>
					</div>
					<div class="tab">
						<a href="/review-thanks-edm" {!! ($db=='review-thanks-edm') ? 'class="active"':'' !!}>감사해요edm</a>
					</div>
				</div>
			</div>

			@if (isset($cfg->use->notice) and count($notices)>0)
			<div class="review-slider">
				<div class="notice-wrap">
					@if($db=='review-language-school')
						<p class="title">어학연수 V-log</p>
                        <p class="sub">솔직담백한 리얼 후기를 확인하세요!</p>
					@elseif($db=='review-university')
						<p class="title">대학합격 후기</p>
					@elseif($db=='review-junior-abroad')
						<p class="title">조기유학 후기</p>
					@endif
					<div class="reviewSlideWrap">
					    <div class="slideArea">
    					    <div class="slider-wrap">
        						<ul class="index notice swiper-wrapper">
        							@foreach($notices as $var)
        								@include($viewPath.'notice-loop')
        							@endforeach
        						</ul>
        					</div>
    					</div>
                        <div class="swiper-arrow">
                            <div class="navi-prev navi"></div>
                            <div class="navi-next navi"></div>
                        </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>
			@endif

			@if($db=='review-language-school')
				<ul class="value-tabs">
					<li @class(['active' => empty(request()->country)])>
						<a href="/{{ $db }}">전체</a>
					</li>
					@foreach($countries as $country)
						<li @class([
							'active' => request()->country == $country
						])>
							<a href="/{{ $db }}?country={{ $country }}">{{ $country }}</a>
						</li>
					@endforeach
				</ul>
			@endif


			@if (isset($cfg->use->search))
				<div class="search-form">
		            <form name="bbs-search" method="get" action="/{{ $db }}">
		                <div class="input-group input-group-sm">
		                    <input class="form-control" type="text" name="keyword" autocomplete="off" placeholder="{{!empty($keyword)? $keyword:'검색어를 입력하세요'}}">
		                    <button class="btn btn-outline-secondary" type="submit"></button>
		                </div>
		            </form>
					<div class="countBox">전체 <span>{{$countAll}}</span>건의 후기</div>
				</div>
            @endif

			<ul class="listWrap thumbnail">
				@foreach($vars as $var)
					@include($viewPath.'index-loop')
				@endforeach
			</ul>

			@if (!empty($cfg->show->pagemenu))
			<div class="page-links area-pagination">
				{{ $vars->withQueryString()->links('vendor.pagination.default') }}
			</div>
			@endif

			@include($defaultPath.'footer')
		</main>
    </div>
	<script>
        var $scrollOffset = $('.category-tabs .tab .active').offset().left;
        $('.category-tabs').animate({
            scrollLeft: $scrollOffset - '16'
        }, 200);

        if($('.value-tabs').length > 0) {
            var $scrollOffset2 = $('.value-tabs li.active').offset().left;
            $('.value-tabs').animate({
                scrollLeft: $scrollOffset2 - '16'
            }, 200);
        }

		/* 유학후기 슬라이더 */
        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 .navi-prev',
                nextEl: '.review-slider .navi-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":""}','*');
                        }
                    }
                },
            }
        });
	</script>
@endsection