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

@section("header")

@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">서비스 구분</label>
                                <select name="service" id="service">
                                    <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>
                                    <option value="" >Academic</option>
                                    <option value="" >General</option>
                                    <option value="" >공통</option>
                                </select>
                            </div>
                            <div class="search-input">
                                <label for="is_accepted">접수 상태</label>
                                <select name="is_accepted" id="is_accepted">
                                    <option value="">전체</option>
                                    <option value="1">오픈</option>
                                    <option value="0">마감</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="product_id">상품명</label>
                                <input type="text" name="product_id" id="product_id" value="" >
                            </div>
                            <div class="search-input">
                                <label for="option_name">옵션명</label>
                                <input type="text" name="option_name" id="option_name" value="">
                            </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="product_name">추가 상품명</label>
                                <input type="text" name="product_name" id="product_name" value="">
                            </div>
                            <div class="search-input">
                                <input type="hidden" name="paginate">
                                <input type="hidden" name="order_by">
                                <input type="hidden" name="sort">
                            </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 class='form-select-sm data-length-select'>
                                <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>
                            <label class="switch">
                                <input type="checkbox" id="togBtn">
                                <div class="slider round">
                                <!--ADDED HTML -->
                                    <span class="on">모두 펼침</span>
                                    <span class="off">모두 접힘</span>
                                <!--END-->
                                </div>
                            </label>
                            <a href="#none" class="button btn-style-8">추가 상품 제외</a>
                            <a href="#none" class="button btn-style-1">상품 추가</a>
                        </div>
                    </div>
                    <table class="default-table">
                        <colgroup>
                            <col width="40">
                            <col width="40">
                            <col width="120">
                            <col>
                            <col>
                            <col>
                            <col>
                            <col>
                            <col>
                            <col>
                            <col>
                            <col>
                        </colgroup>
                        <thead>
                            <tr>
                                <th scope="col"><input type="checkbox"></th>
                                <th scope="col" class="th_nm">번호</th>
                                <th scope="col">등록일시</th>
                                <th scope="col">모듈</th>
                                <th scope="col">접수 상태</th>
                                <th scope="col">카테고리</th>
                                <th scope="col">상품명</th>
                                <th scope="col">옵션명</th>
                                <th scope="col">쿠폰/<br>구매 혜택</th>
                                <th scope="col">판매가</th>
                                <th scope="col">할인가</th>
                                <th scope="col">펼침/접힘</th>
                            </tr>
                        </thead>
                        <tbody style="text-align: center">
                            <tr>
                                <td><input type="checkbox"></td>
                                <td>1</td>
                                <td>2024.05.05<br>00:00:00</td>
                                <td>General</td>
                                <td>마감</td>
                                <td>오전반</td>
                                <td class="text-left"><a href="#none">One Stop IELTS</a></td>
                                <td class="text-left">IELTS</td>
                                <td>포함</td>
                                <td>1,000,000</td>
                                <td>900,000</td>
                                <td>▲</td>
                            </tr>
                            <tr class="collapse_tr">
                                <td><input type="checkbox"></td>
                                <td class="text-right" colspan="11" style="padding-right: 2.2rem;">
                                    <strong>추가 구매 상품</strong><a href="#none">%상품명%</a>
                                    <strong></strong><span>%옵션명%</span>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div> <!-- end card-body-->
            </div> <!-- end card-->
        </div> <!-- end col-->
    </div>
    <!-- end row -->
</div>
<style>
.collapse_tr strong {
    margin-left: 72px;
    margin-right: 16px;
}
.switch {
  position: relative;
  display: inline-block;
  width: 120px;
  height: 36px;
  margin-left: 0.5rem;
}

.switch input {display:none;}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ca2222;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 28px;
  width: 28px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #013193;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(84px);
  -ms-transform: translateX(84px);
  transform: translateX(84px);
}

/*------ ADDED CSS ---------*/
.on
{
  display: none;
}

.on, .off
{
  color: white;
  position: absolute;
  transform: translate(-50%,-50%);
  top: 50%;
  left: 50%;
  font-family: Verdana, sans-serif;
}

input:checked+ .slider .on
{
    display: block;
    margin-left: -16px;
}

input + .slider .off
{   
    display: block;
    margin-left: 16px;
    width: 100%;
}

input:checked + .slider .off
{
    display: none!important;
}


/*--------- END --------*/

/* Rounded sliders */
.slider.round {
  border-radius: 3px;
}

.slider.round:before {
  border-radius: 3px;}
</style>
@endsection

@push("script")
<script>
</script>
@endpush