@php
$price = $productOption->is_discounted && $productOption->isInDiscountPeriod() ? $productOption->discount_price : $productOption->sales_price;
$discount = $productOption->consumer_price - $price;

$exam_ticket = false;
if ($productOption->etcProducts->count()) {
    $filteredProducts = $productOption->etcProducts->where('etc_product_type', '응시권');
    if ($filteredProducts->count())
        $exam_ticket = true;
}

$isDelivery = $productOption->getHasTextbook();

$isHasDefaultAddress = $User->address ? true : false

@endphp

@extends($service . '.layout')

@section('page-title', "주문상품 결제")

@section($service . '-css')
	{!! resource('js/kakaoPost.js') !!}
	{!! resource('js/checkout/default.js') !!}
    {!! resource('js/checkout/toss.js') !!}
    {!! resource('js/checkout/inicis.js') !!}
	{!! resource('css/' . $service . '/sub.css') !!}
	{!! resource('css/myclass/lecture.css') !!}
@endsection

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

@section($service . "-content")
<div id="wrap" class="lecturePayment payPage {{ $service }}">
	<div class="max-width">
		<div class="pageTitle">
			<button type="button" onclick="history.back()" class="backBtn mo-backBtn"></button>
			<h1>결제하기</h1>
		</div>
		<form name="checkout-form" method="post" action="{{ route('enrol-process') }}" id="checkout_form">
			@csrf
			<input type="hidden" name="product_option_id" value="{{ $productOption->id }}">
			<input type="hidden" name="module" value="{{ $module }}">
			<input type="hidden" name="payment_id" id="payment_id" value="">
			<input type="hidden" name="location" id="location" value="TOSS">
			<input type="hidden" name="method" id="method" value="">
			<input type="hidden" name="device_type" id="device_type" value="">

			<div class="container lecture-container">
				<!-- 주문상품 -->
				<article>
					<h2 class="customLine">주문상품</h2>
					<div class="infoArea flex sb">
					    <div class="lectureInfoWrap">
    						<div class="category">{{ $product->service == 'academy' ? '어학센터' : '인강' }}</div>
    						<div class="lectureName">({{ ucFirst($module) }}) {{ $product->name }} {{ $productOption->name }}</div>
    					</div>
    					<div class="infoTable">
    						<div class="box">
    							<div class="tit">상품정가</div><div class="content"><span>{{ number_format($productOption->consumer_price) }}원</span></div>
    						</div>
    						<div class="box">
    							<div class="tit">판매가</div><div class="content">{{ number_format($price) }}원</div>
    						</div>
    						@if ($availableCoupons->count() > 0)
    							<div class="box">
    								<div class="tit">쿠폰적용</div>
    								<div class="content">
    									<p class="couponAfter"><span>0</span>원</p>
    									<button type="button" class="couponBtn" onclick="showPop('coupon')">쿠폰선택</button>
    								</div>
    							</div>
    						@endif
    						<div class="box">
    							<div class="tit">총 결제금액</div>
    							<div class="content"><span>{{ number_format($price) }}</span>원
                                    <input type="hidden" id="final_price" name="final_price" value="{{ $price }}">
                                    <input type="hidden" id="discount_price" name="discount_price">
                                </div>

    						</div>
    					</div>
					</div>
				</article>

				<!-- 배송지 정보 -->
				@if ($isDelivery)
                <article>
                    <h2 class="customLine">배송지 정보</h2>
                    <div class="infoWrap deliveryInfo">
                        <div class="input flex address">
                            <label class="box"><input type="radio" name="address_option" id="address-option01" value="default" @checked($isHasDefaultAddress || ( $oldDelivery && ! $oldDelivery?->isNew)) @disabled(!$isHasDefaultAddress)><span>기본배송지</span><i></i></label>
                            <label class="box"><input type="radio" name="address_option" id="address-option02" value="new" @checked(!$isHasDefaultAddress || ( $oldDelivery && $oldDelivery?->isNew))><span>신규배송지</span><i></i></label>
                        </div>

                        <!-- 기본배송지 -->
                        <div @class(['display-address-option default-address', 'hidden' => (! $isHasDefaultAddress) || ( $oldDelivery && $oldDelivery?->isNew)])>
                            <div class="input">
                                <div class="tit">배송국가</div>
                                <div class="inputBox">
                                    <label><input type="text" value="{{ $User->country?->name }}" readonly disabled></label>
                                    <input type="hidden" name="country_id" value="{{ $User->country_id }}" />
                                </div>
                            </div>
                            <div class="input">
                                <div class="tit">받는사람</div>
                                <div class="inputBox">
                                    <label><input type="text" name="name" value="{{ $User->name }}" readonly disabled ></label>
                                </div>
                            </div>
                            <div class="input">
                                <div class="tit">주소</div>
                                <div class="col2-pc">
                                    <div class="inputBox">
                                        <label><input type="text" value="{{ $User->zip_code ? '(' . $User->zip_code . ')' : '' }} {{ $User->address }}" readonly disabled></label>
                                    </div>
                                    <div class="inputBox">
                                        <label><input type="text" value="{{ $User->address_detail }}" readonly disabled></label>
                                    </div>
                                </div>
                            </div>
                            <div class="input">
                                <div class="tit">휴대폰번호</div>
                                <div class="inputBox">
                                    <label><input type="text" name="mobile" value="{{ $User->phone }}" readonly disabled></label>
                                </div>
                            </div>
                            <div class="input">
                                <div class="tit">배송 요청사항</div>
                                <div class="inputBox">
                                    <label><input id="default_shipping_note" name="default_shipping_note" type="text" placeholder="배송 요청사항을 입력해 주세요." autocomplete="off" value="{{ old('default_shipping_note') }}"></label>
                                </div>
                            </div>
                        </div>
                        <!-- @//endif -->

                        <!-- 신규배송지 -->
                        <div @class(['display-address-option new-address ', 'hidden' => ( ! $oldDelivery && $isHasDefaultAddress ) || ( $oldDelivery && ! $oldDelivery?->isNew)])>
                            @php
                                $local_phone_code = $countryId = 30;
                                $local_phone_text = $countryText = '(+82) 대한민국';
                                $en_first = $en_last = $local_region = $local_address = $local_address_detail = $local_zip_code = $local_phone = '';
                                $address = $address_detail = $zip_code = $phone = $tel = '';
                                if ($oldDelivery) {
                                    if ( $oldDelivery->shipping_country == 30 ) {
                                        $address = $oldDelivery->address;
                                        $address_detail = $oldDelivery->address_detail;
                                        $zip_code = $oldDelivery->zip_code;

                                        $phone = $oldDelivery->mobile;
                                    } else {
                                        $countryId = $oldDelivery->country_id;
                                        $countryText = "(+ ".$oldDelivery->country->phone_code.") " . $oldDelivery->country->name ;

                                        list($en_first, $en_last) = explode(" " , $oldDelivery->receiver);
                                        $local_region = $oldDelivery->region;
                                        $local_address = $oldDelivery->address;
                                        $local_address_detail = $oldDelivery->address_detail;
                                        $local_zip_code = $oldDelivery->zip_code;

                                        $local_phone_code = $oldDelivery->phone_code;
                                        $local_phone_text = $oldDelivery->getPhoneCodeText();
                                        $local_phone = $oldDelivery->mobile;
                                    }
                                }
                            @endphp
                            <div class="input">
                                <div class="tit">배송국가<i></i></div>
                                <div class="inputBox">
                                    <div class="dropDownMenu type2">
                                        <div class="selectBox">
                                            <button type="button" class="label" data-selected="국가 선택" data-default="{{ $countryText }}">{{ $countryText }}</button>
                                            <input type="hidden" name="shipping_country" id="shipping_country" value="{{ $countryId }}" />
                                            <div class="optionListWrap">
                                                <div class="scrollWidth">
                                                    <ul class="optionList scrollWrap">
                                                        @foreach ($countries as $country)
                                                            <li @class(['optionItem', 'selected' => $country->id == $countryId])>
                                                                <button type="button" data-account="{{ $country->id }}" data-code="{{ $country->phone_code }}"  data-iso="{{ $country->iso_code }}">(+{{ $country->phone_code }}) {{ $country->name }}</button></li>
                                                        @endforeach
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- 대한민국 선택 -->
                            <div class="sectionWrap display-kor" style="{{ $countryId == 30 ? "" : "display:none" }}">
                                <div class="input">
                                    <div class="tit">받는사람<i></i></div>
                                    <div class="inputBox">
                                        <label><input id="name" name="name" type="text" placeholder="받는사람을 입력해 주세요." autocomplete="off" value="{{ $oldDelivery?->receiver ? $oldDelivery?->receiver : $User->name }}"></label>
                                        <div class="text-error" id="error_name"></div>
                                    </div>
                                </div>
                                <div class="input">
                                    <div class="tit">주소<i></i></div>

                                    <div class="col2-pc">
                                        <div class="inputBox flex searchPost">
                                            <label><input id="zip_code" name="zip_code" type="text" placeholder="우편 번호" disabled value="{{ $zip_code }}"></label>
                                            <button type="button" class="searchPostBtn" onclick="execKakaoPostcode()">우편번호 검색</button>
                                        </div>
                                        <div class="inputBox">
                                            <input id="address" name="address" type="text" disabled value="{{ $address }}" placeholder="기본주소">
                                            <div class="text-error" id="error_address"></div>
                                        </div>
                                        <div class="inputBox">
                                            <input id="address_detail" name="address_detail" type="text" autocomplete="off" value="{{ $address_detail }}" placeholder="상세주소를 입력해 주세요.">
                                            <div class="text-error" id="error_address_detail"></div>
                                        </div>
                                        <div class="inputBox chkBox">
                                            <label><input type="checkbox" id="chk_default_address" name="chk_default_address" value="1"><span>해당 주소를 기본배송지로 설정</span></label>
                                        </div>
                                    </div>
                                </div>
                                <div class="input">
                                    <div class="tit">휴대폰번호<i></i></div>
                                    <div class="col2-pc">
                                        <div class="inputBox">
                                            <label><input type="number" autocomplete="off" name="mobile" value="{{ $phone }}" placeholder="전화번호를 입력해 주세요." maxlength="12"></label>
                                        </div>
                                        <div class="text-error" id="error_mobile"></div>
                                        <div class="inputBox chkBox">
                                            <label><input type="checkbox" class="use-mine" id="chk-phone-mine" name="chk-phone-mine"  data-target="mobile"><span>회원님 본인 휴대폰 번호</span></label>
                                        </div>
                                    </div>
                                </div>
                                <div class="input">
                                    <div class="tit">전화번호</div>
                                    <div class="inputBox">
                                        <label><input type="number" autocomplete="off" name="tel" placeholder="전화번호를 입력해 주세요." maxLength="12" value="{{ $tel }}"></label>
                                    </div>
                                </div>
                                <div class="input">
                                    <div class="tit">배송 요청사항</div>
                                    <div class="inputBox">
                                        <label><input id="shipping_note" name="shipping_note" type="text" placeholder="배송 요청사항을 입력해 주세요." maxlength="50" autocomplete="off" value="{{ $oldDelivery?->note }}"></label>
                                    </div>
                                </div>
                            </div>

                            <!-- 해외 선택 -->
                            <div class="sectionWrap display-abroad" style="{{ $countryId != 30 ? "" : "display:none" }}">
                                <div class="input">
                                    <div class="tit">영문이름</div>
                                    <div class="inputBox flex col2">
                                        <div class="box"><label><input id="first-name" name="en_first" type="text" placeholder="이름 (First name)" autocomplete="off" value="{{ $en_first }}"></label></div>
                                        <div class="box"><label><input id="last-name" name="en_last" type="text" placeholder="성 (Last name)" autocomplete="off" value="{{ $en_last }}"></label></div>
                                        <div class="text-error" id="error_en_name"></div>
                                    </div>
                                    <div class="text-error" id="error_en_name"></div>
                                </div>
                                <div class="input">
                                    <div class="tit">카카오톡ID <span>(해외배송 알림용)</span></div>
                                    <div class="inputBox">
                                        <label><input id="kakao_id" name="kakao_id" type="text" autocomplete="off" value="{{ $oldDelivery?->kakao_id  }}" placeholder="카카오톡ID 입력"></label>

                                    <div class="text-error" id="error_kakao_id"></div>
                                    </div>
                                </div>
                                <div class="input">
                                    <div class="tit">현지연락처(휴대폰)<i></i></div>
                                    <div class="inputBox flex col2-type2">
                                        <div class="dropDownMenu type2 small left" id="local-phone">
                                            <div class="selectBox">
                                                <button type="button" class="label" data-selected="국가 선택" data-default="{{ $local_phone_text }}">{{ $local_phone_text }}</button>
                                                <input type="hidden" name="phone_code" id="phone_code" value="" />
                                                <div class="optionListWrap">
                                                    <div class="scrollWidth">
                                                        <ul class="optionList scrollWrap">
                                                            @foreach ($countries as $country)
                                                                <li @class(['optionItem', 'selected' => $country->phone_code == $local_phone_code ])>
                                                                    <button type="button" data-account="{{ $country->phone_code }}" data-iso="{{ $country->iso_code }}">(+{{ $country->phone_code }}) {{ $country->name }}</button></li>
                                                            @endforeach
                                                        </ul>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <label class="right">
                                            <input id="local_phone" name="local_phone" type="number" autocomplete="off" value="{{ $local_phone }}" placeholder="전화번호를 입력해 주세요.">
                                        </label>
                                        <div class="text-error" id="error_local_phone"></div>
                                    </div>

                                </div>
                                <div class="input">
                                    <div class="tit">현지우편번호<i></i></div>
                                    <div class="inputBox">
                                        <label><input id="local_zip_code" name="local_zip_code" type="text" placeholder="우편번호를 입력해 주세요." autocomplete="off" value="{{ $local_zip_code }}"></label>
                                        <div class="text-error" id="error_local_zip_code"></div>
                                    </div>
                                </div>
                                <div class="input">
                                    <div class="tit">현지주소<i></i></div>
                                    <div class="col2-pc">

                                        <div class="inputBox"><label><input id="local_region" name="local_region" type="text" value="{{ $local_region }}" placeholder="도시/주/도 (City, State, Province)"></label></div>
                                        <div class="inputBox"><label><input id="local_address" name="local_address" type="text" value="{{ $local_address }}" placeholder="도로명 + 번지 (Street Address)"></label></div>
                                        <div class="inputBox"><label><input id="local_address_detail" name="local_address_detail" type="text" autocomplete="off" value="{{ $local_address_detail }}" placeholder="건물명/아파트명 + 호수 (Building Name, Apartment, Unit)"></label></div>
                                        <div class="text-error" id="error_local_address"></div>
                                    </div>
                                </div>
                                <div class="input">
                                    <div class="tit">배송 요청사항</div>
                                    <div class="inputBox">
                                        <label><input id="new_shipping_note" name="new_shipping_note" type="text" placeholder="배송 요청사항을 입력해 주세요." maxlength="50" autocomplete="off" value="{{ $oldDelivery?->note }}"></label>
                                    </div>
                                </div>
                                <div class="input textInput">
                                    <div class="pointTextBox">
                                        <p>해외 수취인 부재, 주소 불명 등으로 발생하는 반송 및 추가 비용은 고객 부담이며, 회사는 이에 대한 책임을 지지 않습니다</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </article>
                @endif

				<!-- 응시자 정보 -->
				@if ($exam_ticket)

					<article class="section" id="ticket">
                        <input type="hidden" name="exam_ticket" value="1">
						<h2 class="customLine">응시자 정보</h2>
						<ul class="infoWrap">
							<li class="input">
								<p class="tit">영문이름<i></i></p>
								<div class="inputBox flex col2">
									<div class="box"><label><input id="en_first_name" name="en_first_name" type="text" placeholder="이름 (First name)" autocomplete="off" value="{{ $oldTicket?->en_first_name }}"></label></div>
									<div class="box"><label><input id="en_last_name" name="en_last_name" type="text" placeholder="성 (Last name)" autocomplete="off" value="{{ $oldTicket?->en_last_name }}"></label></div>
                                    <div class="small-text pc-text">영문대문자만 입력 가능합니다.</div>
                                    <div class="text-error" id="error_passport_en_name"></div>
								</div>
							</li>
							<li class="input">
								<p class="tit">한글이름<i></i></p>
								<div class="inputBox">
									<!-- 기존 한글이름 input 코드 -->
                                    <input id="passport_name" name="passport_name" type="text" placeholder="홍길동" autocomplete="off" value="{{ $oldTicket?->passport_name }}" required>
                                    <div class="text-error" id="error_passport_name"></div>
								</div>

							</li>
							<li class="input">
								<p class="tit">생년월일(8자리)<i></i></p>
								<div class="inputBox">
									<div class="box"><label><input id="birth" type="text" name="birthday" placeholder="YYYYMMDD" maxlength="8" autocomplete="off" value="{{ $oldTicket ? date('Ymd', strtotime($oldTicket?->birthday)) : "" }}" class="onlynumber"></label></div>
                                    <div class="text-error" id="error_passport_birthday"></div>
								</div>

							</li>
							<li class="input phone">
								<p class="tit">휴대폰번호<i></i></p>
								<div class="col2-pc">
								    <div class="inputBox flex col2-pc">
                                        <label class="right"><input type="number" autocomplete="off" name="passport_phone" maxlength="12" placeholder="전화번호를 입력해 주세요." value="{{ $oldTicket?->exam_phone }}"></label>
                                        <div class="text-error" id="error_passport_phone"></div>
    								</div>

    								<div class="inputBox chkBox">
    									<label><input type="checkbox" class="use-mine" data-target="passport_phone" id="chk-phone-mine02" name="chk-phone-mine02"><span>회원님 본인 휴대폰 번호</span></label>
    								</div>
								</div>
							</li>
							<li class="input textInput">
								<div class="pointTextBox">
                                    @if ( $service == 'academy')
                                        <p>본 시험 응시권은 주한영국문화원에서만 사용 가능합니다. (국내 시험만 신청가능)</p>
                                        <p>위 입력한 응시자 정보가 영국문화원에 전달되며, 이 정보는 실제 응시자와 일치하여야 하며 타인에게 양도 및 변경이 불가합니다.</p>
                                        <p>응시자 정보는 최초 입력하신 내용 그대로 영국문화원에 전달되오니, 수정을 원하시는 경우 시험접수 전 edm아이엘츠 어학센터로 연락주시기 바랍니다.</p>
                                        <p>본 시험 응시권으로 UKVI (PBT/CDT) 시험응시가 불가능합니다.</p>
                                        <p>Academic/General, 일반 PBT/CDT 시험 접수 가능하며, 접수 후 시험 연기, 변경, 환불은 절대 불가합니다.</p>
                                        <p>유효기간은 응시권 코드를 받은 날로부터 6개월(180일)입니다. 유효기간 내 접수를 완료해야 하며, 유효기간이 지난 응시권은 접수가 불가합니다.</p>
                                        <p>유효기간이 지나거나 접수마감일 5일 전에 접수 신청을 완료하지 않아 접수가 불가하게 된 경우에 대해 당사는 책임지지 않습니다.</p>
                                        <p>응시권은 영업일(평일) 09:00~17:00 구매한 경우 결제 후 회원가입하신 번호로 30분 이내 프로모션 코드가 문자로 발송됩니다.(영업시간 외, 주말 및 공휴일 구매 시 다음 영업일/영업시간에 발송)</p>
                                        <p>응시권은 기재하신 휴대폰 번호로 문자 발송되며, 원활한 수신을 위해 수신 차단 해제 및 MMS 수신 가능 여부를 미리 확인해주시기 바랍니다.</p>
                                        <p>응시권 사용 관련 자세한 사항은 '자주 묻는 질문' 또는 '공지사항' 게시판을 통해 확인 가능합니다</p>
                                    @else
                                        <p>해당 응시권은 국내에서만 사용 가능합니다.</p>
                                        <p>해외 거주 중이시더라도 국내에서 시험 응시를 희망하시는 경우, 반드시 응시자 정보를 정확히 남겨주시기 바랍니다.</p>
                                        <p>해외 거주로 인해 국내 시험 응시가 불가한 경우, [1:1 문의]를 통해 별도로 문의 부탁드립니다.</p>
                                        <p>응시자 정보는 최초 입력하신 내용 그대로 영국문화원에 전달되오니, 수정을 원하시는 경우 반드시 1:1 문의로 요청해주시기 바랍니다.</p>
                                        <p>응시권 쿠폰은 기재하신 휴대폰 번호로 MMS 문자 발송되며, 원활한 수신을 위해 수신 차단 해제 및 MMS 수신 가능 여부를 미리 확인해주시기 바랍니다.</p>
                                        <p>수신 차단 또는 MMS 불가 환경으로 인해 메시지를 받지 못한 경우, 해당 부분에 대한 책임은 도움드리기 어려운 점 양해 부탁드립니다.</p>
                                    @endif
								</div>
							</li>
						</ul>
					</article>
				@endif

				<!-- 결제수단 -->
				<article>
					<h2 class="customLine">결제 수단</h2>
					<div class="infoWrap paymentMethod">
						<div class="input">
							<div class="inputBox flex col3" id="payMethod">
                                <!-- 선택된 결제수단 : button 태그에 class="active" 추가 -->
								<div class="box card"><button type="button" onclick="onChangeMethod('CARD')"><i></i>신용카드</button></div>
								<div class="box transfer"><button type="button" onclick="onChangeMethod('TRANSFER')"><i></i>계좌이체</button></div>
								<div class="box naverpay"><button type="button" class="btn-naverpay" onclick="onChangeMethod('NAVERPAY')"><i></i></button></div>
							</div>
						</div>
						<div class="input privacyBox">
							<div class="inputBox flex sb">
								<label><input type="checkbox" id="chk-privacy" name="chk-privacy"><span>개인정보 수집이용 및 제공 동의(필수)</span></label>
								<a href="#none" class="bottomSheetOpen">보기</a>
							</div>
							<div class="inputBox flex sb">
								<label><input type="checkbox" id="chk-notice" name="chk-notice"><span>결제 및 배송 관련 유의사항(필수)</span></label>
								<a href="#none" class="bottomSheetOpen">보기</a>
							</div>
						</div>
					</div>
				</article>
			</div>


            <div class="bottom-sheetArea">
                <!-- 개인정보 수집·이용 및 처리 동의 팝업 -->
                <div class="bottom-sheet type2 verChange">
                    <div class="slidingWrap">
                        <div class="max-width">
                            <div class="dragWrap"></div>
                            <button type="button" class="closeBtn"><span class="el-hide">닫기</span></button>
                            <p class="title"><b>개인정보 수집·이용 및 처리동의</b></p>
                            <div class="scrollWidth">
                                <div class="scrollWrap">
                                    <div class="textWrap">
                                        <p class="tit">수집항목</p>
                                        <p class="dotTxt">[필수] 이름, 받는분, 주소, 휴대폰 번호</p>
                                        <p class="dotTxt">[선택] 전화번호, 배송메모</p>
                                        <p class="tit">수집항목</p>
                                        <p class="dotTxt">제공된 날로부터 edm 교육그룹이 운영하는 사이트 가입 해지(탈퇴확정)시 까지</p>
                                        <p>서비스 제공 위탁업체</p>
                                        <p class="dotTxt">[물품배송] 위탁 업체명: 씨제이대한통운(주), 로젠(주)</p>
                                        <p class="dotTxt">[전자결제서비스] 위탁업체명: (주)네이버페이, 토스페이먼츠 주식회사</p>
                                        <p class="dotTxt">[호스팅 및 동영상 서버관리] 카테노이드(주)</p>
                                        <p class="tit">개인정보취급 위탁</p>
                                        <p class="dotTxt">접속 기기를 제한하기 위해 IP를 수집하여 이용 기기를 식별합니다.</p>
                                    </div>
                                </div>
                            </div>
                            <div class="buttonWrap pc-btn">
                                <a href="#none" class="btn close">확인</a>
                            </div>
                        </div>
                    </div>

                    <div class="dim"></div>
                </div>
                <!-- 결제 및 배송 관련 유의사항 팝업 -->
                <div class="bottom-sheet type2 verChange large">
                    <div class="slidingWrap">
                        <div class="max-width">
                            <div class="dragWrap"></div>
                            <button type="button" class="closeBtn"><span class="el-hide">닫기</span></button>
                            <p class="title"><b>결제 및 배송 관련 유의사항</b></p>
                            <div class="scrollWidth">
                                <div class="scrollWrap">
                                    <div class="textWrap">
                                        <p class="tit">환불접수</p>
                                        <p class="dotTxt">환불은 일할 공제금액과 교재 공제금액이 적용됩니다.</p>
                                        <p class="dotTxt">연락처를 꼭 남겨주셔야 원활한 환불 처리가 이루어질 수 있습니다.</p>
                                        <p class="dotTxt">환불 신청일은 최초 환불신청서 접수일로 간주하며, 게시판에서 접수 후 환불가능금액을 답글로 남겨드립니다.</p>
                                        <p class="dotTxt">환불 요청 시 결제에 사용된 포인트 또는 쿠폰은 반납되지 않고 소멸되니 신중하게 결정해 주세요.</p>
                                        <p class="tit">환불규정</p>
                                        <p class="sub-tit">1. 강의환불</p>
                                        <p class="dotTxt type2">7일 이내 환불 요청 시</p>
                                        <p class="sub-txt">[단과강좌]</p>
                                        <p class="dotTxt">수강률 50% 미만인 경우 전액 환불, 50% 이상인 경우 경과 일수(결제일로부터 환불 요청한 날짜까지) 만큼 일할 차감 후 부분환불, 수강률 100%(완강) 시 환불 불가</p>
                                        <p class="dotTxt">OT/맛보기 강의 제외, 2강 이하 수강 시 : 전액 환불 가능</p>
                                        <p class="dotTxt">3강 이상 수강 시 : 경과 일수(결제일로부터 환불 요청한 날짜까지) 만큼 일할 차감 후 부분 환불</p>
                                        <p class="sub-txt">[패키지 강의]</p>
                                        <p class="dotTxt">OT/맛보기 강의 제외, 2강 이하 수강 시 : 전액 환불 가능</p>
                                        <p class="dotTxt">3강 이상 수강 시 : 경과 일수(결제일로부터 환불 요청한 날짜까지) 만큼 일할 차감 후 부분 환불</p>
                                        <p class="dotTxt type2">8일 이후 환불 요청 시</p>
                                        <p class="sub-txt">[단과강좌]</p>
                                        <p class="dotTxt">경과일수(결제일로부터 환불 요청한 날짜까지) 만큼 일할 차감 후 부분 환불 *단, 수강률 100%(완강) : 환불 불가</p>
                                        <p class="sub-txt">[패키지 강의]</p>
                                        <p class="dotTxt">경과 일수(결제일로부터 환불 요청한 날짜까지) 만큼 일할 차감 후 부분 환불 <br>
                                            *단, 수강률 100%(완강) : 환불 불가(강의 파일을 다운로드 한 경우 시청여부와 관계 없이 해당 강의는 수강한 것으로 인정합니다.) <br>
                                            *한 강의의 시청완료 기준은 강의 시간의 80%를 초과 시청 시 수강한 것으로 인정합니다. <br>
                                            *환불 규정은 사이트 하단 이용약관 내 "제 33조 [회원의 청약철회 불가시의 환불규정]"에 따릅니다.
                                        </p>
                                        <p class="sub-tit">2. 교재환불</p>
                                        <p>교재 환불은 결제일로부터 10일 이내의 사용하지 않은 교재에 한해 아래 기준에 따라 가능 (강의와 별도로 교재만 따로 환불 불가) <br>
                                            *결제일로 부터 10일 이내 요청 시
                                        </p>
                                        <p class="dotTxt type2">교재가 이미 출고된 경우</p>
                                        <p class="dotTxt">환불 처리는 교재 반납 후 교재에 이상이 없는 것을 확인한 후 진행</p>
                                        <p class="dotTxt">취소된 금액이 입금되는 시점은 카드사 마다 상이</p>
                                        <p class="dotTxt type2">교재가 출고되지 않은 경우</p>
                                        <p class="dotTxt">1:1문의 또는 전화 문의 시 100% 환불 [결제일로부터 10일 이후 요청 시] 환불 불가</p>
                                        <p class="sub-txt">[유의사항]</p>
                                        <p class="dotTxt">반납 가능한 교재명을 정확하게 작성해주세요.</p>
                                        <p class="dotTxt">캠브리지 교재의 경우 비닐이 뜯겨져 있으면 환불이 불가하며, 비닐이 없는 교재는 사용 흔적, 접힌 흔적 등이 전혀 없어야 합니다.</p>
                                        <p class="dotTxt">교재 반납을 원하시는 경우 배송비는 본인이 부담해야 합니다.</p>
                                        <p class="dotTxt">교재 반납하거나, 하지 않는 경우 모두 무료로 진행해드렸던 배송비 2,900원이 차감되어 최종 환불금이 책정됩니다.</p>
                                        <p class="dotTxt">교재를 이미 사용 하셨거나 파손된 경우 교재비를 공제 후 환불해 드리니 주의 부탁 드립니다.</p>
                                        <p class="dotTxt">교재 반납을 원하시지 않은 경우 환불금액에서 교재비(소비자가 기준)를 공제 후 지급됩니다.</p>
                                        <p class="dotTxt">결제일로부터 10일이 경과한 교재는 반품 불가</p>
                                        <p class="dotTxt">응시권의 경우, 이미 영국문화원에 접수/응시 이력이 있거나 유효기간이 지난 경우(구매 후 6개월) 변경/환불이 불가합니다.</p>
                                        <p class="dotTxt">교재 반납 주소 : 서울특별시 서초구 서초대로 78길 22, 서초홍우빌딩(제2홍우) 6층, edm아이엘츠 인강 (배송비 본인 부담)</p>
                                    </div>
                                </div>
                            </div>
                            <div class="buttonWrap pc-btn">
                                <a href="#none" class="btn close">확인</a>
                            </div>
                        </div>
                    </div>

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


			{{--팝업 묶음: 차후 약관 관리자 완성 후 database에서 가져오도록--}}
			<div class="wrap-pop wrap-pay-pop">
				<div class="bg-pop" onclick="closePop()"></div>

				{{--쿠폰--}}
				@if ($availableCoupons->count() > 0)
					<div class="pop pop-coupon">
						<div class="inner-pop">
							<p class="bar-pop-title">
								<strong>선택상품 쿠폰사용</strong>
								<button type="button" class="btn-pop-close" onclick="closePop()"></button>
							</p>
							<div class="box-price">
								<span>
									{{ $product->service == 'academy' ? '어학원' : '인강' }}<strong>{{ $product->name }} {{ $productOption->name }}</strong>
								</span>
								<em>{{ number_format($productOption->consumer_price) }}원</em>
							</div>
						</div>
						<div class="cont-pop">
							<p class="tit-cont-coupon">보유쿠폰 <em>{{ $availableCoupons->count() }}</em>개</p>
							<div class="wrap-coupon-list">
								<ul class="list-coupon">
									<li onclick="selectCoupon(this);">
										<div class="radio-wrapper">
											<input type="radio" name="coupons[]" value="" onclick="selectOneCoupon(this);">
											<label for="select-coupon-none">선택안함</label>
										</div>
									</li>

									@php
    $coupon_amounts = [];
									@endphp
									@foreach ($availableCoupons as $coupon)
										@php
        // 최대 할인 쿠폰
        if ($coupon->discount_type == '정액') {
            $coupon_amounts[$coupon->id] = $coupon->discount_value;
        } else {
            $am = round(($productOption->sales_price * $coupon->discount_value) / 100);
            if ($coupon->discount_max > 0) {
                $coupon_amounts[$coupon->id] = min($coupon->discount_max, $am);
            } else {
                $coupon_amounts[$coupon->id] = $am;
            }
        }

										@endphp
									@endforeach

									@php
    // 할인 금액이 큰 순으로 정렬
    $sortedCoupons = $availableCoupons->sort(function ($a, $b) use ($coupon_amounts) {
        return $coupon_amounts[$b->id] <=> $coupon_amounts[$a->id]; // 내림차순
    });
									@endphp

									@foreach ($sortedCoupons as $coupon)
										<li id="coupon-{{ $coupon->id }}" onclick="selectCoupon(this);">
											@if ($coupon->is_combinable == 0)
											<div class="radio-wrapper">
												<input type="radio"
													name="coupons[]" class="coupon"
													value="{{ $coupon->id }}"
													data-discount-type="{{ $coupon->discount_type }}"
													data-discount-value="{{ $coupon->discount_value }}"
													data-discount-max="{{ $coupon->discount_max }}">
											@else
											<div class="check-label-wrapper">
												<input type="checkbox"
													name="coupons[]" class="coupon"
													value="{{ $coupon->id }}"
													data-discount-type="{{ $coupon->discount_type }}"
													data-discount-value="{{ $coupon->discount_value }}"
													data-discount-max="{{ $coupon->discount_max }}">
											@endif

												<label>
													<span class="text-coupon-desc">
														@if ($coupon->use_end_date)
															~ {{ $coupon->use_end_date }}까지
                                                        @elseif($coupon->is_after_valid_day == 1)

                                                            {{ $coupon->issuedCoupons->where('user_id',Auth::user()->id)->first()->created_at->addDays($coupon->after_valid_day)->format('Y.m.d')}}
                                                            까지
														@else
															기간제한 없음
														@endif

														{{-- @if ($coupon->issue_type == "선착순" && $coupon->is_unlimited == 0)
															<b style="margin-left: 0.5rem; color:rgb(16, 123, 255);">{{ $coupon->issue_max - $coupon->issued_count }}</b>개 남음
														@endif --}}
														<span>{{ $coupon->name }}</span>
													</span>

													@if ($coupon->discount_type == '정액')
														<strong>{{ number_format($coupon->discount_value) }}원 할인</strong>
													@else
														<strong>{{ $coupon->discount_value }}% 할인</strong>
														@if($coupon->discount_max > 0)
														<span>최대 할인 금액 {{ number_format($coupon->discount_max) }}원</span>
														@endif
													@endif

													@if ($coupon->is_combinable == 0)
													<span>중복사용불가</span>
													@endif
												</label>
											</div>
										</li>
									@endforeach
								</ul>
							</div>
						</div>
						<div class="box-result">
							<div class="price-result">
								<dl>
									<dt>판매가</dt>
									<dd>{{ number_format($productOption->sales_price) }}원</dd>
								</dl>
								<dl>
									<dt>할인쿠폰</dt>
									<dd id="coupon_amount">0원</dd>
								</dl>
								<dl>
									<dt>쿠폰 적용 금액</dt>
									<dd id="coupon_applied_amount">{{ number_format($productOption->sales_price) }}원</dd>
								</dl>
							</div>
							<div class="bottom-result">
								<p>
									쿠폰은 적용한 상품 환불 및 취소 시 반환되지 않습니다.<br>
									쿠폰은 유효기간 내에 적용 가능한 상품에만 이용이 가능합니다.
									{{--<br>쿠폰은 마이페이지> 쿠폰내역에서 등록하실 수 있습니다. <a href="#none">등록하러가기</a>--}}
								</p>
								<button type="button" onclick="applyCoupon()">적용</button>
							</div>
						</div>
					</div>
				@endif
			</div>

            <div class="applyWrap bottom-fix-btn">
                <label><input type="button" value="결제하기" onclick="onValidCheckout()"></label>
            </div>
		</form>
	</div>
</div>
@endsection

@section($service . '-script')
<script src="https://js.tosspayments.com/v2/standard"></script>
<script src="https://cdn.iamport.kr/v1/iamport.js"></script>
<script>

	function getKakaoPostCode() {
		execKakaoPostcode()
	}

	$(document).ready(function () {
		$('.use-mine').each(function(){
			$(this).on('click', function(e){
                if ($(this).is(":checked")) {
                    let target = $(this).attr('data-target');

                    $.ajax({
                        url: '/api/get-phone',
                        type: 'GET',
                        success: function(result) {
                            $('input[name='+target+']').val(result[0] + result[1] + result[2]);
                            checkEventHandler(target);
                        }
                    });
                }

			});

		});

		// radio 신규/기존 배송지 선택 시
		$("input[name=address_option]").change(function(){
			var radioChecked = $("input[name=address_option]:checked");
			var radioOption = $(radioChecked).val();
			if(radioOption == 'new') {
				$(".display-address-option.new-address").removeClass("hidden").addClass('active');
				$(".display-address-option.default-address").addClass("hidden").removeClass('active');

                $('#default_address_box').hide();
                $('#default_address_box input[type=checkbox]').prop("disabled", true);
			} else {
				$(".display-address-option.default-address").removeClass("hidden").addClass('active');
				$(".display-address-option.new-address").addClass("hidden").removeClass('active');

                $('#default_address_box').show();
                $('#default_address_box input[type=checkbox]').prop("disabled", false);

			}
		});

        $('#ticket input[id^=en_]').on("keyup", function() {
            const text = $(this).val().replace(/[^A-Za-z]/g, "").toUpperCase();
            $(this).val(text);
        })

        // 팝업 닫기 추가
        $('.bottomSheetOpen').each(function(index, item){
            $(item).on('click',function(){
                $('.bottom-sheetArea .bottom-sheet').eq(index).addClass('active');
                $('body,html').addClass('noScroll');
            });
        });
        $('.bottom-sheet.type2 .close').on('click',function(){
            $('.bottom-sheet.type2').removeClass('active');
            $('body,html').removeClass('noScroll');
        });
	});
    if ($("#birth").length > 0) {
        const options = {
            maxDate: new Date(),
            dateFormat: 'yymmdd',      // 포맷 (예: 2025-06-18)
            yearRange: '1950:c',
            changeMonth: true,
            changeYear: true,
            onSelect: function (dateText, inst) {
                $("#birth").removeClass('invalid');
                $("#birth").parents('.input').find('.error').html('');
            }
        }
        setDatePicker($("#birth"), options);
    }

    function onChangeDropbox(input) {
        const id = input.attr("id");
        if ( id == "shipping_country" ) {
            let code = input.data("iso")
            if ( input.val() == 30 ) {
                $(".display-kor").show();
				$(".display-abroad").hide();

                $('#ticket .tit i').show();
            } else {
                $(".display-abroad").show();
				$(".display-kor").hide();
                const item = $("#local-phone .optionItem").filter(function() {
                    return $(this).find("button").data('iso') == code
                })
                item.trigger("click");

            }
        }
    }

	// 팝업 열기/닫기
	function showPop(popName) {
		$(".wrap-pop").addClass("show");
		$(".pop").hide();
		$(".pop-"+popName).show();

		@if($availableCoupons->count() > 0)
			@php
    $max_value = max($coupon_amounts);
    $max_key = array_search($max_value, $coupon_amounts);
			@endphp

			@if ($max_key)
			if (popName == 'coupon') {
				$('#coupon-{{ $max_key }}').click();
				/*$('.wrap-coupon-list').animate({
					scrollTop:  $('#coupon-{{ $max_key }}').offset().top
				}, 500);*/
			}
			@endif
		@endif
	}

	function closePop() {
		$(".wrap-pop").removeClass("show");
		$(".pop").hide();
	}

	// input number maxlength 확인
	function maxLengthCheck(object){
		if (object.value.length > object.maxLength){
			object.value = object.value.slice(0, object.maxLength);
		}
	}

	function selectCoupon(obj) {
		const $obj = $(obj);
		const $input = $obj.find('input');
		const inputType = $input.attr('type');

		const originalPrice = parseFloat({{ $productOption->sales_price }}); // 원가
		let couponDiscountedAmount = 0; // 누적 할인 금액
		let discountedPrice = originalPrice; // 할인 적용 후 가격

		// 쿠폰 선택 처리
		if (inputType === 'radio') {
			$obj.parents(".list-coupon").find("input").prop('checked', false);
			$input.prop("checked", true);
		} else if (inputType === 'checkbox') {
			const isChecked = $input.prop('checked');
			$obj.parents(".list-coupon").find("input[type='radio']").prop('checked', false);
			$input.prop('checked', !isChecked);
		}

		// 선택된 쿠폰 정보 가져오기
		const $selectedCoupons = $obj.parents(".list-coupon").find("input:checked");

		$selectedCoupons.each(function () {
			const $coupon = $(this);
			const discountType = $coupon.data('discount-type'); // 할인 유형 ('정액' 또는 '정률')
			const discountValue = parseFloat($coupon.data('discount-value')); // 할인 값
			const discountMax = parseFloat($coupon.data('discount-max')) || 0; // 최대 할인 금액 (없으면 0)

			if (discountType === '정액') {
				// 정액 할인
				discountedPrice -= discountValue;
				couponDiscountedAmount += discountValue;
			} else if (discountType === '정률') {
				// 정률 할인
				const percentageDiscount = Math.round((discountedPrice * discountValue) / 100);

				// 최대 할인 금액이 0인 경우 전체 정률 적용
				const appliedDiscount = discountMax > 0 ? Math.min(percentageDiscount, discountMax) : percentageDiscount;
				discountedPrice -= appliedDiscount;
				couponDiscountedAmount += appliedDiscount;
			}

			// 할인 금액이 음수가 되지 않도록 처리
			if (discountedPrice < 0) {
				discountedPrice = 0;
			}
		});

		// 최종 가격 계산
		discountedPrice = Math.max(discountedPrice, 0); // 할인 금액은 원가를 초과할 수 없음

		// UI 업데이트
		$("#coupon_amount").text(`${couponDiscountedAmount.toLocaleString()}원`);
		$("#coupon_applied_amount").text(`${discountedPrice.toLocaleString()}원`);
	}

    function applyCoupon() {
        // 할인 금액 및 최종 결제 금액 가져오기
        const couponDiscountedAmountText = $("#coupon_amount").text(); // 쿠폰 금액
        const finalPriceText = $("#coupon_applied_amount").text(); // 쿠폰 적용 금액

        // 할인 금액 및 최종 결제 금액을 숫자로 변환
        const couponDiscountedAmount = parseFloat(couponDiscountedAmountText.replace(/[^0-9]/g, '')) || 0;
        const finalPrice = parseFloat(finalPriceText.replace(/[^0-9]/g, '')) || 0;

        // 디버깅용 로그
        // console.log("쿠폰 할인 금액:", couponDiscountedAmount);
        // console.log("최종 결제 금액:", finalPrice);

        // 쿠폰 적용 UI 업데이트 (infoTable 내의 쿠폰적용 금액 표시)
        $(".infoTable .box:contains('쿠폰적용') .content .couponAfter span").text(couponDiscountedAmount.toLocaleString());

        // 총 결제 금액 업데이트 (infoTable 내의 총 결제금액 표시)
        $(".infoTable .box:contains('총 결제금액') .content span").text(finalPrice.toLocaleString());

        // 히든 필드 업데이트
        $("#final_price").val(finalPrice);
        $("#discount_price").val(couponDiscountedAmount);

        if ( finalPrice == 0 ) {
            $('.paymentMethod').addClass("empty");
        } else {
            $('.paymentMethod').removeClass("empty");
        }

        // 팝업 닫기
        closePop();
    }


    if (performance.navigation.type === 2) {
        alertPopup("만료된 페이지입니다.", {
            onConfirm: () => {
                window.location.href = "{{ route('main', $service) }}";
            }, onClose : () => {
                window.location.href = "{{ route('main', $service) }}";
            }
        })
    }


</script>
<style>
    .ui-datepicker select.ui-datepicker-year,
    .ui-datepicker select.ui-datepicker-month {
        min-width : 80px;
        width : 80px;
        font-size: 14px;
    }
    .ui-datepicker select.ui-datepicker-month{
    margin-left : 10px;
    }
</style>
@endsection