@extends("domains.common.layouts.layout")

@section("header")
@vite([
    'resources/js/domains/common/tomSelect.js',
])
@endsection

@section("main-content")
<div class="container-fluid">
    <!-- start page title -->
    <div class="row">
        <div class="col-12">
            <div class="page-title-box">
                <h1>구매 혜택 관리</h1>
            </div>
        </div>
    </div>
    <!-- end page title -->

    <div class="row">
        <div class="col-xl-12 col-lg-12 order-lg-2 order-xl-1">
            <div class="card">
                <div class="card-body">
                    <form action="" class="search-form" method="GET">
                        <div class="search-input-wrap">
                            <div class="search-input">
                                <label for="register_start_date">등록일</label>
                                <input type="date" id="register_start_date" name="register_start_date"><span class="btw-bullet">-</span><input type="date" id="register_end_date" name="register_end_date">
                            </div>
                            <div class="search-input">
                                <label for="service_id" class="req">서비스 구분</label>
                                <select name="service_id" id="service_id">
                                    <option value="" >인강</option>
                                    <option value="" >어학원</option>
                                </select>
                            </div>
                            <div class="search-input">
                                <label for="module_id">모듈</label>
                                <select name="module_id" id="module_id">
                                    <option value="" >전체</option>
                                </select>
                            </div>
                            <div class="search-input">
                                <label for="">접수 상태</label>
                                <select name="" id="">
                                    <!-- 인강 -->
                                    <option value="" >전체</option>
                                    <option value="" >오픈</option>
                                    <option value="" >마감</option>
                                </select>
                            </div>
                            <div class="search-input">
                                <label for="">카테고리</label>
                                <select name="" id="">
                                    <!-- 인강 -->
                                    <option value="" >선택</option>
                                    <option value="" >전강좌+응시권패스</option>
                                    <option value="" >N개월 알짜패스</option>
                                    <option value="" >페이백 200% 환급반</option>
                                    <option value="" >W/S 30일 완성</option>
                                    <option value="" >시험응시권</option>
                                    <option value="" >1:1 첨삭</option>
                                    <option value="" >캠브리지</option>
                                    <option value="" >기타</option>
                                    <!-- 어학원 -->
                                    <option value="" >선택</option>
                                    <option value="" >오전반</option>
                                    <option value="" >종일반</option>
                                    <option value="" >저녁반</option>
                                    <option value="" >점수보장반</option>
                                    <option value="" >인텐시브</option>
                                    <option value="" >단과반</option>
                                    <option value="" >응시권</option>
                                </select>
                            </div>
                            <div class="search-input">
                                <label for="name">상품명</label>
                                <input type="text" name="name" id="name" autocomplete='on'>
                            </div>
                            <div class="search-input">
                                <label for="name">옵션명</label>
                                <input type="text" name="name" id="name" autocomplete='on'>
                            </div>
                            <div class="search-input">
                                <label for="">쿠폰</label>
                                <select name="" id="">
                                    <!-- 인강 -->
                                    <option value="" >전체</option>
                                    <option value="" >포함</option>
                                    <option value="" >미포함</option>
                                </select>
                            </div>
                            <div class="search-input">
                                <label for="">구매 혜택</label>
                                <select name="" id="" class="long-input">
                                    <!-- 인강 -->
                                    <option value="" >전체</option>
                                    <option value="" >없음</option>
                                    <option value="" >%지급&구매 혜택 상품명%</option>
                                </select>
                            </div>
                        </div>
                        <button type="submit" class="search-button">조회</button>
                    </form>

                </div> <!-- end card-body-->
            </div> <!-- end card-->
        </div> <!-- end col-->
    </div>
    <!-- end row -->

    <div class="row">
        <div class="col-xl-12 col-lg-12 order-lg-2 order-xl-1">
            <div class="card">
                <div class="card-body">
                    <div class="user-btn-wrap">
                        <div class="pagination-result">
                            <span>총 <strong class="point-color">999</strong>건</span>
                        </div>
                        <div class="pagination-helper">
                            <div class="pagination-wrapper">
                            </div>
                            <select id='paginate-control' class='form-select-sm data-length-select' onchange="copyValue('.data-length-select', 'input[name=paginate]', '.search-form')">
                                <option value="10">10개씩 보기</option>
                                <option value="30">30개씩 보기</option>
                                <option value="50">50개씩 보기</option>
                                <option value="100">100개씩 보기</option>
                            </select>
                            <button type="button" class="button btn-style-2" onclick="">엑셀다운로드</button>
                            <a href="#none" class="button btn-style-1">적용</a>
                        </div>
                    </div>
                    <table class="default-table">
                        <colgroup>
                            <col width="50">
                            <col>
                            <col>
                            <col>
                            <col>
                            <col>
                            <col>
                            <col>
                            <col>
                            <col>
                            <col>
                            <col>
                            <col>
                        </colgroup>
                        <thead>
                            <tr>
                                <th>
                                    <input type="checkbox">
                                </th>
                                <th>번호</th>
                                <th>등록일시</th>
                                <th>모듈</th>
                                <th>접수 상태</th>
                                <th>카테고리</th>
                                <th>상품명</th>
                                <th>옵션명</th>
                                <th>쿠폰</th>
                                <th>판매가</th>
                                <th>할인가</th>
                                <th class="editable">구매 혜택</th>
                            </tr>
                        </thead>
                        <tbody style="text-align: center">
                            <tr>
                                <td class="table-alert" colspan="9">
                                    <p>
                                        일괄 적용할 값을 선택 및 입력 후 적용할 옵션들을 목록에서 체크하여 상단의 적용 버튼 선택 시 일괄 적용 가능합니다.<br>
                                        목록에는 전시 / 판매 상품만 노출됩니다.
                                    </p>
                                </td>
                                <td class="table-alert">1,800,000</td>
                                <td class="table-alert">900,000</td>
                                <td>
                                   <select name="" id="" class="long-input">
                                        <option value="">없음</option>
                                        <option value="">%지급&구매 혜택 상품명%</option>
                                   </select>
                                </td>
                            </tr>
                            <tr>
                                <td><input type="checkbox"></td>
                                <td>1</td>
                                <td>2023.06.16<br>00:00:00</td>
                                <td>General</td>
                                <td>오픈</td>
                                <td>오전반</td>
                                <td class="text-left">
                                    <a href="#none">%상품명%</a>
                                </td>
                                <td>%옵션명%</td>
                                <td>포함</td>
                                <td>1,000,000</td>
                                <td>900,000</td>
                                <td>
                                   <select name="" id="" class="long-input">
                                        <option value="">없음</option>
                                        <option value="">%지급&구매 혜택 상품명%</option>
                                   </select>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div> <!-- end card-body-->
            </div> <!-- end card-->
        </div> <!-- end col-->
    </div>
    <!-- end row -->
</div>
@endsection

@push("script")
<script>
    let selectTmp;

    window.addEventListener("load", () => {
        selectTmp = new TomSelect("#subjects", {
            plugins: [
                "checkbox_options",
                "caret_position",
                "input_autogrow"
            ],
            maxItems: null
        });
    });
</script>
@endpush