@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>

            <div class="bannerWrap flex">
                @foreach ($top as $item)
                <a href="{{ $item['link'] }}" class="banner {{ isset($item['class']) ? $item['class'] : '' }}" style="background-image: url('{{ env("AWS_S3_IMG_URL") }}/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

            </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>

    @if ( $service == 'academy')
        @include("common.popup.consult" )
    @endif
@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 onOpenInquiry() {
        $('.common-contact').addClass('active')
    }

    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 result = await useFetch(getRoute("winner", $('.prizewinner .post_id').val()), {
            "body" : new FormData(document.getElementById("winner-form")),
            'method' : "POST",
        });

        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