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

@push('head')
    <link rel="stylesheet" type="text/css" href="/css/main.css"/>
@endpush

@section('content')
    <div class="container review camp-report">
        <!-- 메인 컨텐츠 -->
        <div class="area-sm-content">

            <!-- Content Manager -->
            <div class="review-list">

                <div class="area-sm-content review">
                    <section class="review-board-wrap" data-tab="tab-wrap">
                        <header class="fix-wrap">
                            <div class="sm-cont-title">
                                <h1>캠프다이어리</h1>
                            </div>

                            <form id="realReviewForm" method="get" action="{{ route('camp.report.camp-diary') }}">
                                <input type="hidden" id="page_focus" value="{{request()->input('page')}}">
                            @csrf

                            <!-- 어학원 캠프만 국가 노출 -->
                                <ul class="md-tabs-basic" id="country-tab" data-tab="tab-menu">
                                    <li class="@if($country == 'all' || $country == '') ? active @endif"><a href="#" onclick="submitForm('all')">전체</a></li>
                                    <li class="@active($country, '5') country5"><a country-data="5" href="#" onclick="submitForm(5)">미국</a></li>
                                    <li class="@active($country, '1') country1"><a country-data="1" href="#" onclick="submitForm(1)">영국</a></li>
                                    <li class="@active($country, '6') country6"><a country-data="6" href="#" onclick="submitForm(6)">캐나다</a></li>
                                    <li class="@active($country, '4') country4"><a country-data="4" href="#" onclick="submitForm(4)">필리핀</a></li>
                                    <li class="@active($country, '8') country8"><a country-data="8" href="#" onclick="submitForm(8)">뉴질랜드</a></li>
                                    <li class="@active($country, '17') country17"><a country-data="17" href="#" onclick="submitForm(17)">말레이시아</a></li>
                                </ul>
                                <input id="country" type="hidden" name="country" value="{{$country}}">

                                <div class="area-board-search">
                                    <div class="search-cate">
                                        <select id="searchSelect" name="search_type" class="choose">
                                            <option value="all" @if($searchData['search_type'] == 'all') ? selected @endif>전체</option>
                                            <option value="title" @if($searchData['search_type'] == 'title') ? selected @endif>제목</option>
                                            <option value="content" @if($searchData['search_type'] == 'content') ? selected @endif>내용</option>
                                        </select>
                                    </div>
                                    <div class="search-input">
                                        <h2 class="hidden"><label for="search-board-review">게시판검색</label></h2>
                                        <input type="text" id="search-board-review" name="search_text" value="{{ $searchData['search_text'] }}" placeholder="검색어를 입력하세요">
                                        <button class="btn-search">검색</button>
                                    </div>
                                    <div class="review-all-num">
                                        전체 <span class="text-color">{{ $realReviewList->total() }}</span>건의 후기
                                    </div>
                                </div>
                            </form>
                        </header>

                        <!-- 전체 -->
                        <div class="flex-wrap" data-tab="tab-content" id="review-ls-all">
                            <!-- [D]: col3, col4로 pc화면 배치 갯수 조절, 모바일은 1단 / m-col2는 모바일 2단 배열 -->
                            <div class="area-board-thumb-line col3 m-col2">
                                <!-- 검색결과 없을 시-->
                                    @if ($realReviewList->total() == '0')
                                        <article class="area-board-item">
                                            <div class="search-result-zero">
                                                검색 결과가 없습니다.
                                            </div>
                                        </article>
                                    @else

                                    <!-- 검색 결과 -->
                                        @foreach ($realReviewList as $value)
                                            <article class="area-board-item">
{{--                                                <a href="#" onclick="location.href='{{ route('camp.report.camp-diary.show', $value->p_id) }}'">--}}
                                                <a href="{{ route('camp.report.camp-diary.show', $value->p_id) }}">
                                                    <div class="thumb">
                                                        <img class="real-review-img" src="{{ $value->img }}" alt="썸네일">
                                                    </div>
                                                    <div class="content">
                                                        <p class="subject">
{{--                                                            <em class="country">{{ $value->country_name }}</em>--}}
                                                            <i class="city">{!! $value->p_title !!}</i>
                                                        </p>
                                                        <p class="context">
                                                            {!! $value->p_content !!}
                                                        </p>
                                                        <p class="info">
                                                            <span class="date">{{ $value->p_reg_date->format('Y.m.d') }}</span>
                                                            <span class="count"> 조회 {{ $value->p_read }}회</span>
                                                        </p>
                                                    </div>
                                                </a>
                                            </article>
                                        @endforeach
                                    @endif
                                </div>
                                {{ $realReviewList->onEachSide(2)->appends(request()->input())->links('layouts.pagination') }}
                            </div>
                    </section>
                </div>

                <script>
                    function submitForm(country) {
                        $('#country').val(country);
                        $('#search-board-review').val('');
                        $('#searchSelect').val('all');
                        $('#realReviewForm').submit();
                    }

                    $(document).ready(function() {
                        if($('#search-board-review').val() != '' || $('#page_focus').val() > 1 || $('#country').val() > 1 || $('#country').val() == 'all') {
                            $('#search-board-review').focus();
                        }
                        $('.btn-search').click(function() {
                            /* 검색 시 국가 유지 않는 것으로 변경
                            $(".md-tabs-basic li").each(function(){
                                if($(this).hasClass('active')){
                                    $('#country').val($(this).children('a').attr('country-data'));
                                }
                            });*/
                            $('#realReviewForm').submit();
                        });

                        if($('.md-tabs-basic').length > 0) {
                            var country = '{{$country}}';
                            if( '' !== country && null !== country) {
                                var $scrollOffset = $('.country'+ country).offset().left;
                                $('#country-tab').animate({
                                    scrollLeft: $scrollOffset
                                }, 200);
                            }
                        }
                        //parent.calcHeight();
                    });
                </script>

            </div>
        </div>

    </div>
@endsection