@extends("ielts.layout")

@section("ielts-css")
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

<style>
    input[type="text"], input[type="password"], input[type="tel"], input[type="email"], select {
        padding: .25rem .5rem !important;
        font-size: .875rem !important;
        border-radius: var(--bs-border-radius-sm) !important;
        height: unset !important;
    }
</style>
@endsection

@section("ielts-content")
    <div id="wrap" class="m-5">
        <h2 class="mb-3">결제테스트 페이지</h2>

        <form class="" action="" id="checkout_form">
        <div class="row">

                <div class="input-wrap col-6">
                    <div class="mb-2 row align-center">
                        <label class="required col-3">회원번호</label>
                        <div class="col-8">
                            <input type="text" name="user_id" value="{{ Auth::user()->id }}" class="form-control form-control-sm" />
                        </div>
                    </div>
                    <div class="mb-2 row align-center">
                        <label class="required col-3">주문번호</label>
                        <div class="col-8">
                            <input type="text" name="payment_no" value="" id="payment_no" class="form-control form-control-sm" />
                        </div>
                    </div>
                    <div class="mb-2 row align-center">
                        <label class="required col-3">주문자 명</label>
                        <div class="col-8">
                            <input type="text" name="buyer_name" value="{{ Auth::user()->name }}" class="form-control form-control-sm" />
                        </div>
                    </div>
                    <div class="mb-2 row align-center">
                        <label class="required col-3">주문자 연락처</label>
                        <div class="col-8">
                            <input type="number" name="country_id" value="{{ Auth::user()->country_id ?? 30 }}" class="form-control form-control-sm" />
                            <input type="number" name="phone_code" value="{{ Auth::user()->phone_code }}" class="form-control form-control-sm" />
                            <input type="tel" name="phone" value="01053902160" class="form-control form-control-sm" />
                        </div>
                    </div>
                    <div class="mb-2 row align-center">
                        <label class="required col-3">
                            배송지 정보<br>
                            <button type="button" class="btn btn-primary btn-sm" onclick="getKakaoPostCode()">우편번호 검색</button>
                        </label>
                        <div class="col-8">
                            <input type="text" name="zip_code" readonly placeholder="우편번호" id="zip_code" value="06035" class="form-control form-control-sm">

                            <input type="text" name="address1" readonly placeholder="기본주소" id="address" value="서울 강남구 가로수길 5" class="form-control form-control-sm">
                            <input type="text" name="address2" placeholder="상세주소" id="address_detail" value="어딘가"  class="form-control form-control-sm">
                        </div>
                    </div>
                    <div class="mb-2 row align-center">
                        <label class="required col-3">배송메세지</label>
                        <div class="col-8">
                            <input type="text" name="message" value="" class="form-control form-control-sm" />
                        </div>
                    </div>
                </div>

                <div class="input-wrap col-6">
                    <div class="mb-2 row align-center">
                        <label class="required col-3">상품번호</label>
                        <div class="col-8">
                            <input type="text" name="product_id" value="{{ $product->id }}" class="form-control form-control-sm" />
                        </div>
                    </div>
                    <div class="mb-2 row align-center">
                        <label class="required col-3">상품옵션번호</label>
                        <div class="col-8">
                            <input type="text" name="product_option_id" value="{{ $productOption->id }}" class="form-control form-control-sm" />
                        </div>
                    </div>
                    <div class="mb-2 row align-center">
                        <label class="required col-3">상품명</label>
                        <div class="col-8">
                            <input type="text" name="product_name" value="테스트상품" class="form-control form-control-sm" />
                        </div>
                    </div>
                    <div class="mb-2 row align-center">
                        <label class="required col-3">상품가격</label>
                        <div class="col-8">
                            <input type="number" name="price" value="100" class="form-control form-control-sm" />
                        </div>
                    </div>

                    <input type="text" name="service" value="ielts" class="form-control form-control-sm" />
                    <input type="text" name="device_type" id="device_type" value="" class="form-control form-control-sm" />
                    <input type="text" name="method" id="method" value="" class="form-control form-control-sm" />
                    <input type="text" name="type" id="type" value="" class="form-control form-control-sm" />
                </div>
            </div>



        <div class="btn-wrap mt-3">
            <button type="button" onclick="onReady()" class="btn btn-primary">네이버페이 결제하기</button>
            <button type="button" onclick="onSubmitCheckout('CARD')" class="btn btn-success">신용카드 결제하기</button>
            <button type="button" onclick="onSubmitCheckout('TRANSFER')" class="btn btn-warning">실시간 계좌이체</button>
        </div>

    </div>
</form>
@endsection

@section('ielts-script')
    {!! resource('js/kakaoPost.js') !!}
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
    <script src="https://cdn.iamport.kr/v1/iamport.js"></script>
    <script src="https://nsp.pay.naver.com/sdk/js/naverpay.min.js"></script>

    <script>


        function getKakaoPostCode() {
            execKakaoPostcode()
        }

        function onReady() {
            alert("개발중입니다.")
        }



        function onSubmitCheckout(method) {

            $("#device_type").val(isMobile() ? "MOB" : "PC");
            $("#type").val(method == "NAVER" ? "NAVER" : "INICIS");
            $("#method").val(method == "NAVER" ? "" : method);

            $.ajax({
                url: "{{ route('checkPayment') }}",
                data: $('#checkout_form').serialize(),
                method: "POST",
                dataType: "JSON",
                success: function(result) {

                    IMP.init(result.user_code);
                    IMP.request_pay(result.iamport, function(response) {

                        $.ajax({
                            url: "{{ route('api.payment.complete') }}",
                            data: {
                                "merchant_uid" : response.merchant_uid,
                                "imp_uid" : response.imp_uid,
                            },
                            method: "POST",
                            dataType: "JSON",
                            success: function(result) {
                                if (response.status) {
                                    location.href = "{{ route('payment.complete') }}"
                                } else {
                                    swalAlert("error", response.error_msg);
                                }

                            }, error: function() {

                            }
                        })
                    });

                }, error: function(error) {

                }
            })
        }
    </script>

@endsection