@extends('ielts.layout')

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

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

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

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

@section("ielts-content")
    <div id="wrap" class="boardPage refund">
        <div class="max-width">
            <div class="pageTitle">
                <button type="button" onclick="history.back()" class="backBtn mo-backBtn"></button>
                <h1>환급신청</h1>
            </div>

            <!-- 게시판 리스트 -->
            <div class="board-list">
                <div class="headWrap pc-headWrap">
                    <div class="flex">
                        <div class="number">No</div>
                        <div class="product">신청상품</div>
                        <div class="date">신청일자</div>
                        <div class="approval">승인여부</div>
                        <div class="more">자세히 보기</div>
                    </div>
                </div>
                <!-- 게시글 영역 -->
                <ul class="list flex">
                    <!-- 게시글이 있을 때 -->
                    <li>
                        <div class="box number">
                            <div class="title">No</div>
                            <div class="text"><span>2</span></div>
                        </div>
                        <div class="box product">
                            <div class="title">신청상품</div>
                            <div class="text"><span class="ellipsis_1">200%환급반(입문 페이백) 상품명이 길어질 수 있습니다.</span></div>
                        </div>
                        <div class="box date">
                            <div class="title">신청일자</div>
                            <div class="text"><span>24.10.15</span></div>
                        </div>
                        <div class="box approval">
                            <div class="title">승인여부</div>
                            <div class="text approval"></div> <!-- 환급 승인 : approval 클래스가 추가됩니다. (환급 승인 텍스트는 css로 자동 추가) -->
                        </div>
                        <div class="box more">
                            <div class="title">자세히 <br>보기</div>
                            <div class="text"><a href="">자세히 보기</a></div>
                        </div>
                    </li>
                    <li>
                        <div class="box number">
                            <div class="title">No</div>
                            <div class="text"><span>2</span></div>
                        </div>
                        <div class="box product">
                            <div class="title">신청상품</div>
                            <div class="text"><span class="ellipsis_1">200%환급반(입문 페이백)</span></div>
                        </div>
                        <div class="box date">
                            <div class="title">신청일자</div>
                            <div class="text"><span>24.10.15</span></div>
                        </div>
                        <div class="box approval">
                            <div class="title">승인여부</div>
                            <div class="text no-approval"><span>출석률 충족요건 미달</span></div> <!-- 환급 불가 : no-approval 클래스가 추가됩니다. (환급불가 텍스트는 css로 자동 추가) -->
                        </div>
                        <div class="box more">
                            <div class="title">자세히 <br>보기</div>
                            <div class="text"><a href="">자세히 보기</a></div>
                        </div>
                    </li>
                    <li>
                        <div class="box number">
                            <div class="title">No</div>
                            <div class="text"><span>2</span></div>
                        </div>
                        <div class="box product">
                            <div class="title">신청상품</div>
                            <div class="text"><span class="ellipsis_1">200%환급반(입문 페이백)</span></div>
                        </div>
                        <div class="box date">
                            <div class="title">신청일자</div>
                            <div class="text"><span>24.10.15</span></div>
                        </div>
                        <div class="box approval">
                            <div class="title">승인여부</div>
                            <div class="text review"></div> <!-- 검토중 : review 클래스가 추가됩니다. (검토중 텍스트는 css로 자동 추가) -->
                        </div>
                        <div class="box more">
                            <div class="title">자세히 <br>보기</div>
                            <div class="text"><a href="">자세히 보기</a></div>
                        </div>
                    </li>
                    <li>
                        <div class="box number">
                            <div class="title">No</div>
                            <div class="text"><span>2</span></div>
                        </div>
                        <div class="box product">
                            <div class="title">신청상품</div>
                            <div class="text"><span class="ellipsis_1">200%환급반(입문 페이백)</span></div>
                        </div>
                        <div class="box date">
                            <div class="title">신청일자</div>
                            <div class="text"><span>24.10.15</span></div>
                        </div>
                        <div class="box approval">
                            <div class="title">승인여부</div>
                            <div class="text no-approval"><span class="ellipsis_1">환급 불가사유 레이블 글자수 최대 11자 이내</span></div> <!-- 환급 불가 : no-approval 클래스가 추가됩니다. (환급불가 텍스트는 css로 자동 추가) -->
                        </div>
                        <div class="box more">
                            <div class="title">자세히 <br>보기</div>
                            <div class="text"><a href="">자세히 보기</a></div>
                        </div>
                    </li>

                    <!-- 게시글이 없을 때 -->
                    <li id="noData">
                        <div class="flex"><p>환급신청 내역이 없습니다.</p></div>
                    </li>
                </ul>
            </div>

            <!-- 신청 버튼 -->
            <div class="applyWrap bottom-fix-btn">
                <a href="">신청하기</a>
            </div>

        </div>
    </div>
@endsection

@section('ielts-script')
    <script>

    </script>
@endsection