@extends('academy.layout')

@section('gnb', view('gnb', ['service'=>'academy']))

@section('subgnb', view('academy.gnb'))

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

@section("progress")
    @include('progress')
@endsection

@section("academy-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">
                <a href="" class="banner" style="background-image: url('https://s3.ap-northeast-2.amazonaws.com/new.edmclass.com/common/board/eventBanner-join.png');">
                    <p class="title"><b><em style="color: #0059FF;">가입</em>만 하면 </b><br>싹 - 다 드려요! </p>
                    <div class="bottom-text">
                        <p>1분만에 회원 가입하고 100% 혜택 받기</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="" 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="" 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>

            <div class="board-top">
                <!--  텝메뉴 -->
                <div class="categoryWrap customLine">
                    <div class="flex">
                        <a href="" class="active">전체 이벤트</a>
                        <a href="">진행중 이벤트</a>
                    </div>
                </div>

                <!-- 검색 -->
                <div class="searchWrap">
                    <form action="">
                        <div class="search">
                            <input type="text" placeholder="이벤트명 검색">
                            <input type="submit" value="검색" class="search-submit">
                        </div>
                    </form>
                </div>
            </div>

            <!-- 게시판 리스트 -->
            <div class="board-list flex">
                <!-- 이벤트 종료 : list에 class end가 추가됩니다. -->
                <div href="" class="list">
                    <a href="view" class="link"></a>
                    <div class="imgWrap" style="background-image: url('https://s3.ap-northeast-2.amazonaws.com/new.edmclass.com/common/board/test_eventImg.png');">
                        <button type="button" class="alertOn endAlert">당첨자 조회</button> <!-- 종료된 이벤트에만 생성되는 버튼 -->
                    </div>
                    <div class="textWrap">
                        <span class="progress"></span>
                        <p class="subject ellipsis_1">제목 1</p>
                        <div class="date flex">
                            <b>이벤트기간</b>
                            <p>24.07.01-24.08.30</p>
                        </div>
                    </div>
                </div>
                <div href="" class="list end">
                    <a href="view" class="link"></a>
                    <div class="imgWrap" style="background-image: url('https://s3.ap-northeast-2.amazonaws.com/new.edmclass.com/common/board/test_eventImg.png');">
                        <button type="button" class="alertOn endAlert">당첨자 조회</button> <!-- 종료된 이벤트에만 생성되는 버튼 -->
                    </div>
                    <div class="textWrap">
                        <span class="progress"></span>
                        <p class="subject ellipsis_1">제목 2</p>
                        <div class="date flex">
                            <b>이벤트기간</b>
                            <p>24.07.01-24.08.30</p>
                        </div>
                    </div>
                </div>
                <div href="" class="list end">
                    <a href="view" class="link"></a>
                    <div class="imgWrap" style="background-image: url('https://s3.ap-northeast-2.amazonaws.com/new.edmclass.com/common/board/test_eventImg.png');">
                        <button type="button" class="alertOn endAlert">당첨자 조회</button> <!-- 종료된 이벤트에만 생성되는 버튼 -->
                    </div>
                    <div class="textWrap">
                        <span class="progress"></span>
                        <p class="subject ellipsis_1">제목 3</p>
                        <div class="date flex">
                            <b>이벤트기간</b>
                            <p>24.07.01-24.08.30</p>
                        </div>
                    </div>
                </div>
                <div href="" class="list">
                    <a href="view" class="link"></a>
                    <div class="imgWrap" style="background-image: url('https://s3.ap-northeast-2.amazonaws.com/new.edmclass.com/common/board/test_eventImg.png');">
                        <button type="button" class="alertOn endAlert">당첨자 조회</button> <!-- 종료된 이벤트에만 생성되는 버튼 -->
                    </div>
                    <div class="textWrap">
                        <span class="progress"></span>
                        <p class="subject ellipsis_1">제목 4</p>
                        <div class="date flex">
                            <b>이벤트기간</b>
                            <p>24.07.01-24.08.30</p>
                        </div>
                    </div>
                </div>
            </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="">
                                <div class="flex">
                                    <span class="tit1">아이디 입력</span>
                                    <label>
                                        <input type="text" placeholder="아이디(이메일 계정)를 입력해 주세요." class="inputId">
                                    </label>
                                    <button type="button" class="submitBtn" disabled>조회</button>
                                </div>
                                <!-- 당첨 메시지 -->
                                <div class="winner prize-message" style="display: block;">
                                    <figure></figure>
                                    <b>축하합니다! 이벤트에 당첨되셨습니다.</b>
                                    <p>당첨자 혜택 및 지급일정 등은 <br><a href="">이벤트 상세 페이지</a>를 확인해 주세요. </p>
                                </div>
                                <!-- 꽝 메시지 -->
                                <div class="lose prize-message">
                                    <figure></figure>
                                    <b>아쉽네요. 이벤트 당첨 리스트에 존재하지 않습니다.</b>
                                    <p>다른 이벤트에 도전해 보세요!</p>
                                </div>
                            </form>
                        </div>
                        <button type="button" class="btn alert-btn closeBtn">확인</button>
                    </div>

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

        </div>
    </div>
@endsection

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