@extends($service.'.layout')

@section($service.'-css')
    <!-- promotion -->
    {!! resource('css/common/board.css') !!}
    {!! resource('css/common/board-upload.css') !!}
@endsection

@section($service."-content")
    <div id="wrap" class="boardPage event">
        <div class="max-width">
            <div class="pageTitle">
                <button type="button" onclick="history.back()" class="backBtn mo-backBtn"></button>
                <h1>이벤트</h1>
            </div>

            <!-- banner - 하드코딩 영역! -->
            <div class="bannerWrap flex">
                @foreach ($top as $item)
                <a href="{{ $item['link'] }}" class="banner" style="background-image: url('https://s3.ap-northeast-2.amazonaws.com/new.edmclass.com/common/board/{{ $item['image'] }}');">
                    <p class="title">{!! $item['title'] !!}</p>
                    <div class="bottom-text">
                        <p>{{ $item['link-text'] }}</p>
                        <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6 12L10 8L6 4" stroke="#40404E" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
                    </div>
                </a>
                @endforeach
                {{-- <a href="/ielts/board/class" class="banner" style="background-image: url('https://s3.ap-northeast-2.amazonaws.com/new.edmclass.com/common/board/eventBanner-gs25.png');">
                    <p class="title"><b><em style="color: #FF00E5;">수강후기</em> 남기고 </b><br>간식 드세요!</p>
                    <div class="bottom-text">
                        <p>수강생이라면 누구나! 찐후기 작성하러 가기</p>
                        <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6 12L10 8L6 4" stroke="#40404E" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
                    </div>
                </a>
                <a href="/ielts/board/pass" class="banner" style="background-image: url('https://s3.ap-northeast-2.amazonaws.com/new.edmclass.com/common/board/eventBanner-naverpay.png');">
                    <p class="title"><b>점수 <em style="color: #FF7300;">달성후기</em> </b><br>남기고 ‘Pay’받아가세요</p>
                    <div class="bottom-text">
                        <p>인증만 하면 누구나! 찐후기 작성하러 가기</p>
                        <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6 12L10 8L6 4" stroke="#40404E" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
                    </div>
                </a> --}}
            </div>
            <form action="{{ route("event.index", [$service]) }}" method="GET" id="search-form">
                <div class="board-top">
                    <input type="hidden" name="paginate" id='paginate' value="{{ Request::get('paginate', 10) }}" />
                    <input type="hidden" name="tab" id="tab" value="{{ Request::get("tab", 'progress') }}" />
                    <!--  텝메뉴 -->
                    <div class="categoryWrap customLine">
                        <div class="flex">
                            <a href="javascript:onChangeTab('progress')" @class(['progress' , "active" => Request::get("tab", 'progress') == "progress"])>진행중 이벤트</a>
                            <a href="javascript:onChangeTab('all')" @class(['all' , "active" => Request::get("tab", 'progress') == "all"])>전체 이벤트</a>
                        </div>
                    </div>

                    <!-- 검색 -->
                    <div class="searchWrap">
                        <div class="search">
                            <input type="text" name="keyword" id="keyword" value="{{ Request::get("keyword") }}" placeholder="이벤트명 검색">
                            <input type="submit" value="검색" class="search-submit">
                        </div>
                    </div>
                </div>
            </form>

            <!-- 게시판 리스트 -->
            <div class="board-list flex" id="board_list">
                <!-- 이벤트 종료 : list에 class end가 추가됩니다. -->
                @if ( $posts->isNotEmpty() )
                    <x-board.event-wrap :posts="$posts" service="{{ $service }}" />
                @endif
            </div>
            <!-- 당첨자 발표 alert -->
            <div class="alertArea prizewinner">
                <div class="alertWrap">
                    <div class="alert large">
                        <div class="closeIcon closeBtn"></div>
                        <i class="icon-notice"></i>
                        <p class="title"><b>당첨자 발표</b></p>
                        <div class="alert-contents">
                            <form action="" id="winner-form">
                                <input type="hidden" name="post_id" value="" class="post_id" />
                                <div class="flex">
                                    <span class="tit1">아이디 입력</span>
                                    <label>
                                        <input type="text" placeholder="아이디(이메일 계정)를 입력해 주세요." class="inputId" name="email" value="{{ Auth::check() ? Auth::user()->email : ""}}">
                                    </label>
                                    <button type="button" class="submitBtn" onclick="onSearchWinner()" @disabled(! Auth::check())>조회</button>
                                </div>
                            </form>

                            <div id="result-form">
                                <!-- 당첨 메시지 -->
                                <div class="winner prize-message">
                                    <figure></figure>
                                    <b>축하합니다! 이벤트에 당첨되셨습니다.</b>
                                    <p>당첨자 혜택 및 지급일정 등은 <br><a href="javascript:onEventDetail()">이벤트 상세 페이지</a>를 확인해 주세요. </p>
                                </div>
                                <!-- 꽝 메시지 -->
                                <div class="lose prize-message">
                                    <figure></figure>
                                    <b>아쉽네요. 이벤트 당첨 리스트에 존재하지 않습니다.</b>
                                    <p>다른 이벤트에 도전해 보세요!</p>
                                </div>
                            </div>
                        </div>
                        <button type="button" class="btn alert-btn closeBtn">확인</button>
                    </div>

                    <div class="dim"></div>
                </div>
            </div>

        </div>
    </div>
@endsection

@section($service.'-script')
{!! resource('js/common/board/default.js') !!}
{!! resource('js/components/infinite-scroll.js') !!}
    <script>
    setPageConfig({
        "service" : '{{ $service }}',
        "boardType" : '{{ $board["page"] }}',
        "isActiveInfinity" : true,
        "isLogin" : "{{ Auth::check() }}"
    })

        function onChangeTab(tab) {
            if ( $('#tab').val() == tab) return false;

            $('#tab').val(tab);
            $('#keyword').val("");

            $('#search-form').submit();

        }

        new InfiniteScroll("board_list", {
            url: "{{ route($board['page'] . '.index', ['service' => $service]) }}",
            mobileOnly : true,
            maxWidth: 1200,
            getFilter : function() {
                return {'tab' : $('#tab').val(), "keyword" :  $('#keyword').val() } ;
            }
        })


        function onAlertOpenEvent(item) {
            const postId = item.data("post-id");
            $('.prizewinner .post_id').val(postId);
            $('.prizewinner .inputId').val("{{ Auth::check() ? Auth::user()->email : ""}}");
        }

        async function onSearchWinner() {

            $('#result-form .winner, #result-form .lose').hide();
            const response = await useFetch(getRoute("winner", $('.prizewinner .post_id').val()), {
                "body" : new FormData(document.getElementById("winner-form")),
                'method' : "POST",
            });

            const result = await response.json();
            if ( result.status ) {
                const className = result.is_winner ? 'winner' : "lose";
                $('#result-form .' + className).show();
            }
        }

        function onEventDetail() {
            location.href = getRoute("view", $('.prizewinner .post_id').val());
        }

    </script>
    <script>
        // 당첨자 발표 입력하면 조회 버튼 활성화
        $('.prizewinner .inputId').on('keyup',function(){
            if($(this).val() != ''){
                $('.prizewinner .submitBtn').attr('disabled',false);
            }else{
                $('.prizewinner .submitBtn').attr('disabled',true);
            }
        });
    </script>
@endsection