@extends('layouts.layout-mypage')

@section("class", "payment")
@section('mypage-content')
    <div class="input-wrap">
        <div class="inputArea">
            <strong>쿠폰등록</strong>

            <div class="input message">
                <div class="messageBox">
                    <ul class="dotList">
                        <li>
                            <p>쿠폰은 1개씩 만 등록 가능 합니다.</p>
                        </li>
                        <li>
                            <p>유효기간이 지난 쿠폰은 등록이 불가합니다.</p>
                        </li>
                    </ul>

                    <div class="couponBox flex">
                        <label><input type="text" name="coupon_code" id="coupon_code" placeholder="‘-’는 제외하고 입력해 주세요." autocomplete="off"></label>
                        <input type="button" value="쿠폰등록" class="btn-signup" disabled onclick="onSubmitCoupon()" id="btnCoupon" />
                    </div>
                    <div class="message" id="couponValidationMsg"></div>
                </div>
            </div>

            @if ($coupons->isEmpty() )
                <!-- 글이 없을 경우 -->
                <div id="noData">
                    <div class="flex"><p>사용 가능한 쿠폰내역이 없습니다.</p></div>
                </div>
            @else
                <div class="input">
                    @foreach ($coupons as $coupon)
                        <ul class="user-paymentList">
                            <li class="code">
                                <p class="title">쿠폰코드</p>
                                <div class="textWrap">
                                    <p>{{ $coupon->code }}</p>
                                </div>
                            </li>
                            <li class="service">
                                <p class="title">사용가능 서비스</p>
                                <div class="textWrap">
                                    <p><x-service-name service="{{ $coupon->coupon->service }}" /></p>
                                </div>
                            </li>
                            <li class="name">
                                <p class="title">쿠폰명</p>
                                <div class="textWrap">
                                    <p>{{ $coupon->coupon->name }}</p>

                                    @if ($coupon->used_at)
                                        사용함 ({{ $coupon->used_at }})
                                    @else
                                        <button type="button" class="detail popupOn" onclick="onPopupApplyProduct({{ $coupon->coupon_id }})">가능상품보기</button>
                                    @endif
                                </div>
                            </li>
                            <li class="discount">
                                <p class="title">할인율(액)</p>
                                <div class="textWrap">
                                    <p>{{ number_format($coupon->coupon->discount_value) }} {{ $coupon->coupon->discount_type == "정액" ? "원" : "%" }}</p>
                                </div>
                            </li>
                            <li class="date">
                                <p class="title">유효기간</p>
                                <div class="textWrap">
                                    @if ($coupon->coupon->is_unlimited)
                                        <p>무제한</p>
                                    @else
                                        <p>&nbsp; {{ $coupon->coupon->use_start_date }}</p>
                                        ~<span>{{ $coupon->coupon->use_end_date }}</span>
                                    @endif
                                </div>
                            </li>
                            <li class="use">
                                <p class="title">사용조건</p>
                                <div class="textWrap">
                                    @if ($coupon->coupon->is_combinable == 0)
                                        <p class="dotTxt">중복사용불가</p>
                                    @endif

                                    @if ($coupon->coupon->discount_max > 0)
                                    <p class="dotTxt">최대할인금액 {{ number_format($coupon->coupon->discount_max) }}원</p>
                                    @endif
                                </div>
                            </li>
                        </ul>
                    @endforeach
                </div>

            @endif

        </div>
    </div>

    <!-- popup wrap -->

@endsection
@section("mypage-script")
<script>
    function onPopupApplyProduct(couponId) {
        $.ajax({
            url: "{{ route('coupon.apply') }}?couponId=" + couponId,
            method: "GET",
            dataType: "JSON",
            success: function(result) {
                $('#membership .myPage').append(result.html);
                $('body,html').css({'overflow':'hidden'});
            }
        })
    }

    function onSubmitCoupon() {
        $.ajax({
            url: "{{ route('coupon.issued') }}",
            data: { "code" : $('#coupon_code').val()} ,
            method: "POST",
            dataType: "JSON",
            success: function(result) {
                if (result.status) {
                    alertPopup("발행이 완료되었습니다.", {
                        confirmText: '확인',
                        onConfirm : function() {
                            location.reload();
                        }
                    });
                }
            }, error: function(result) {
                $("#couponValidationMsg").addClass("error");
                $("#couponValidationMsg").text(result.responseJSON.message);
                inputValid($("#coupon_code"), false);
            }
        })
    }

    // 디버깅용
    // function onSubmitCoupon() {
    //     // AJAX 대신 폼을 동적으로 생성하여 POST 요청
    //     const form = document.createElement('form');
    //     form.method = 'POST';
    //     form.action = "{{ route('coupon.issued') }}";

    //     // CSRF 토큰 추가
    //     const csrfToken = document.createElement('input');
    //     csrfToken.type = 'hidden';
    //     csrfToken.name = '_token';
    //     csrfToken.value = "{{ csrf_token() }}";
    //     form.appendChild(csrfToken);

    //     // 쿠폰 코드 입력 필드 추가
    //     const couponCodeInput = document.createElement('input');
    //     couponCodeInput.type = 'hidden';
    //     couponCodeInput.name = 'code';
    //     couponCodeInput.value = document.getElementById('coupon_code').value;
    //     form.appendChild(couponCodeInput);

    //     // 폼을 body에 추가하고 제출
    //     document.body.appendChild(form);
    //     form.submit();
    // }


    $(function() {
        $('#coupon_code').on("keyup", function() {
            $(this).val($(this).val().replaceAll("-", ""));

            const isEmpty = $.isEmptyObject($(this).val()) ;

            $("#btnCoupon").attr("disabled", isEmpty);

            if (isEmpty) {
                $("#couponValidationMsg").addClass("error");
                $("#couponValidationMsg").text("쿠폰 번호를 입력하세요")
                inputValid($(this), ! isEmpty);
            } else {
                inputValid($(this), "");
                $("#couponValidationMsg").text("")
            }
        })
    })
</script>
@endsection