@extends('layouts.app')

@section('title', '주문/결제 - GLOBEAU')

@section('content')
<main class="py-5 bg-light">
    <div class="container">

        <!-- 페이지 타이틀 -->
        <div class="mb-4">
            <h2 class="fw-bold brand-font text-dark"><i class="fas fa-credit-card me-2 text-brand"></i>주문 / 결제</h2>
            <p class="text-muted small">선택하신 프리미엄 뷰티 프로그램을 확인하고 결제를 진행해 주세요.</p>
        </div>

        <!-- 에러 메시지 출력 -->
        @if($errors->any())
        <div class="alert alert-danger alert-dismissible fade show mb-4" role="alert">
            <i class="fas fa-exclamation-circle me-1"></i> {{ $errors->first() }}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
        @endif

        <form action="{{ route('orders.checkout.process') }}" method="POST" id="checkoutForm">
            @csrf

            @php
            $selectedPayment = old('payment_method', 'card');
            @endphp
            <!-- 백엔드로 전달할 결제수단 hidden -->
            <input type="hidden" name="payment_method" id="formPaymentMethod" value="{{ $selectedPayment }}">

            <!-- 약관 열람 상태 유지용 hidden 입력 -->
            <input type="hidden" name="terms_read" id="termsReadField" value="{{ old('terms_read', 'false') }}">
            <input type="hidden" name="refund_read" id="refundReadField" value="{{ old('refund_read', 'false') }}">

            <div class="row g-4">
                <!-- 좌측: 주문 상품 정보 및 결제 수단 -->
                <div class="col-lg-8">

                    <!-- 1. 주문 상품 정보 (다건 아이템 순회 지원) -->
                    <div class="card border-0 shadow-sm rounded-3 mb-4">
                        <div class="card-header bg-white py-3 fw-bold border-bottom">
                            <i class="fas fa-box-open text-brand me-1"></i> 주문 상품 정보 (<span id="itemCount">0</span>건)
                        </div>
                        <div class="card-body">
                            @php
                            $checkoutItems = isset($items) ? $items : [
                            [
                            'type' => 'program',
                            'model' => $program,
                            'quantity' => $quantity ?? 1,
                            'unit_price' => $program->sale_price,
                            'reward_points' => $program->reward_points ?? 0,
                            ]
                            ];
                            @endphp

                            @foreach($checkoutItems as $index => $item)
                            @php
                            $target = $item['model'];
                            $qty = $item['quantity'];
                            $price = $item['unit_price'];
                            $subtotal = $price * $qty;
                            @endphp

                            <input type="hidden" name="items[{{ $index }}][item_type]" value="{{ $item['type'] }}">
                            <input type="hidden" name="items[{{ $index }}][item_id]" value="{{ $target->id }}">
                            <input type="hidden" name="items[{{ $index }}][quantity]" value="{{ $qty }}">
                            <input type="hidden" name="items[{{ $index }}][unit_price]" value="{{ $price }}">

                            <div class="order-item-row @if(!$loop->first) mt-4 pt-4 border-top @endif" data-price="{{ $price }}" data-qty="{{ $qty }}">
                                <div class="d-flex align-items-center gap-3">
                                    <div style="width: 80px; height: 80px; position: relative;" class="rounded overflow-hidden border flex-shrink-0">
                                        <img src="{{ $target->logo_path ? asset('storage/' . $target->logo_path) : 'https://placehold.co/100x100?text=Globeau' }}"
                                            class="position-absolute top-0 start-0 w-100 h-100 object-fit-cover" alt="{{ $target->name }}">
                                    </div>
                                    <div class="flex-grow-1">
                                        <span class="badge bg-secondary-subtle text-secondary-emphasis border px-2 py-0.5 mb-1" style="font-size: 0.7rem;">
                                            {{ $target->code ?? 'ITEM' }}
                                        </span>
                                        <h5 class="fw-bold text-dark mb-1">{{ $target->name }}</h5>
                                        <p class="text-muted small mb-0">{{ $target->introduction ?? '프리미엄 뷰티 테라피 체험권' }}</p>
                                    </div>
                                </div>

                                <div class="mt-3 bg-light p-3 rounded-2 small">
                                    <div class="d-flex justify-content-between text-muted mb-1">
                                        <span>구매 회차 / 유효기간</span>
                                        <span class="fw-semibold text-dark">{{ $target->session_count ?? 1 }}회권 / 결제 후 {{ $target->validity_days ?? 30 }}일</span>
                                    </div>
                                    <div class="d-flex justify-content-between text-muted mb-1">
                                        <span>구매 수량</span>
                                        <span class="fw-semibold text-dark">{{ $qty }}개</span>
                                    </div>
                                    <div class="d-flex justify-content-between text-muted">
                                        <span>상품 단가 / 소계</span>
                                        <span class="fw-semibold text-dark">{{ number_format($price) }}원 × {{ $qty }} = <strong class="text-brand">{{ number_format($subtotal) }}원</strong></span>
                                    </div>
                                </div>
                            </div>
                            @endforeach
                        </div>
                    </div>

                    <!-- 2. 결제 수단 선택 -->
                    <div class="card border-0 shadow-sm rounded-3 mb-4">
                        <div class="card-header bg-white py-3 fw-bold border-bottom">
                            <i class="fas fa-wallet text-brand me-1"></i> 결제 수단 선택
                        </div>
                        <div class="card-body p-4">
                            <div class="row g-3">
                                <div class="col-4">
                                    <input type="radio" class="btn-check" name="payment_method_radio" id="payCard" value="card" autocomplete="off" {{ $selectedPayment === 'card' ? 'checked' : '' }}>
                                    <label class="payment-method-card btn p-3 w-100 text-center rounded-3 border position-relative d-flex flex-column align-items-center justify-content-center" for="payCard">
                                        <div class="icon-box mb-2">
                                            <i class="fas fa-credit-card fs-3 text-muted"></i>
                                        </div>
                                        <span class="fw-bold text-dark small">신용/체크카드</span>
                                        <span class="position-absolute top-0 end-0 p-2 text-brand selected-check d-none"><i class="fas fa-check-circle"></i></span>
                                    </label>
                                </div>

                                <div class="col-4">
                                    <input type="radio" class="btn-check" name="payment_method_radio" id="payTransfer" value="transfer" autocomplete="off" {{ $selectedPayment === 'transfer' ? 'checked' : '' }}>
                                    <label class="payment-method-card btn p-3 w-100 text-center rounded-3 border position-relative d-flex flex-column align-items-center justify-content-center" for="payTransfer">
                                        <div class="icon-box mb-2">
                                            <i class="fas fa-university fs-3 text-muted"></i>
                                        </div>
                                        <span class="fw-bold text-dark small">계좌이체</span>
                                        <span class="position-absolute top-0 end-0 p-2 text-brand selected-check d-none"><i class="fas fa-check-circle"></i></span>
                                    </label>
                                </div>

                                <div class="col-4">
                                    <input type="radio" class="btn-check" name="payment_method_radio" id="payMobile" value="mobile" autocomplete="off" {{ $selectedPayment === 'mobile' ? 'checked' : '' }}>
                                    <label class="payment-method-card btn p-3 w-100 text-center rounded-3 border position-relative d-flex flex-column align-items-center justify-content-center" for="payMobile">
                                        <div class="icon-box mb-2">
                                            <i class="fas fa-mobile-alt fs-3 text-muted"></i>
                                        </div>
                                        <span class="fw-bold text-dark small">휴대폰결제</span>
                                        <span class="position-absolute top-0 end-0 p-2 text-brand selected-check d-none"><i class="fas fa-check-circle"></i></span>
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 계좌이체 선택 시 토글되는 무통장 입금 정보 및 입력 폼 박스 -->
                    <div class="collapse mb-4 {{ $selectedPayment === 'transfer' ? 'show' : '' }}" id="bankTransferBox">
                        <div class="card border border-brand-subtle shadow-sm rounded-3 bg-white">
                            <div class="card-header bg-light py-3 fw-bold border-bottom text-dark">
                                <i class="fas fa-university text-brand me-1"></i> 무통장 입금 계좌 안내
                            </div>
                            <div class="card-body p-4">
                                <div class="bg-light p-3 rounded-3 mb-3 border">
                                    <div class="d-flex justify-content-between align-items-center mb-2">
                                        <span class="text-muted small">입금 계좌</span>
                                        <span class="fw-bold text-dark">우리은행 1005-123-456789</span>
                                    </div>
                                    <div class="d-flex justify-content-between align-items-center mb-2">
                                        <span class="text-muted small">예 금 주</span>
                                        <span class="fw-bold text-dark">(주)글로보우 (GLOBEAU)</span>
                                    </div>
                                    <div class="d-flex justify-content-between align-items-center">
                                        <span class="text-muted small">입금 총액</span>
                                        <span class="fw-bold text-brand fs-5" id="transferAmountText">0원</span>
                                    </div>
                                </div>

                                <div class="alert alert-warning py-2 px-3 small mb-3 border-0 text-secondary" style="background-color: #fff8f0; color: #8a6d3b !important;">
                                    <ul class="mb-0 ps-3">
                                        <li><strong>입금 기한:</strong> 주문 완료 후 <span class="text-danger fw-bold">7일 이내</span>에 입금되지 않은 주문은 자동 취소됩니다.</li>
                                        <li><strong>입금자명 주의:</strong> 주문자 성함과 실제 입금자 성명이 <span class="text-danger fw-bold">반드시 일치</span>해야 자동 확인됩니다.</li>
                                    </ul>
                                </div>

                                <div class="mb-0">
                                    <label for="depositorName" class="form-label small fw-semibold text-dark">
                                        실제 입금자 성명 <span class="text-danger">*</span>
                                    </label>
                                    <input type="text" class="form-control form-control-sm" id="depositorName" name="depositor_name" placeholder="입금하시는 분 성함을 정확히 입력해주세요" value="{{ old('depositor_name', auth()->user()->name ?? '') }}">
                                    <div class="form-text text-muted" style="font-size: 0.75rem;">주문자 성함과 다를 경우 입금 확인이 지연될 수 있습니다.</div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 3. 주문자 / 연락처 정보 입력 (휴대폰 인증 공용 모듈 연동) -->
                    <div class="card border-0 shadow-sm rounded-3 mb-4">
                        <div class="card-header bg-white py-3 fw-bold border-bottom">
                            <i class="fas fa-user-check text-brand me-1"></i> 주문자 정보 (모바일 티켓 수신용)
                        </div>
                        <div class="card-body">
                            <div class="row g-3">
                                <div class="col-md-6">
                                    <label for="ordererName" class="form-label small text-muted">주문자 성함</label>
                                    <input type="text" class="form-control" id="ordererName" name="orderer_name" value="{{ old('orderer_name', auth()->user()->name ?? '') }}">
                                </div>
                                <div class="col-md-6">
                                    <label for="ordererPhone" class="form-label small text-muted d-flex justify-content-between align-items-center">
                                        <span>휴대폰 번호 (- 없이 입력)</span>
                                        <span id="phoneStatusBadge">
                                            @php
                                            $isVerified = old('is_phone_verified', (auth()->user()->is_phone_verified && auth()->user()->phone ? 'true' : 'false')) === 'true';
                                            @endphp
                                            @if($isVerified)
                                            <span class="badge bg-success-subtle text-success border">인증완료</span>
                                            @else
                                            <span class="badge bg-warning-subtle text-warning-emphasis border">인증필요</span>
                                            @endif
                                        </span>
                                    </label>

                                    <!-- 공용 data-sms-role="send-area" 내부의 input-group -->
                                    <div id="sms-send-section" data-sms-role="send-area" class="input-group">
                                        <input type="text" class="form-control @if($isVerified) bg-light @endif"
                                            id="ordererPhone" name="orderer_phone" data-sms-role="phone"
                                            placeholder="01012345678" maxlength="13"
                                            value="{{ old('orderer_phone', auth()->user()->phone ?? '') }}"
                                            @if($isVerified) readonly @endif>

                                        <!-- 1. 미인증 상태일 때 보이는 '인증번호 전송' 버튼 -->
                                        <button type="button" class="btn btn-premium px-4 @if($isVerified) d-none @endif" id="btn-send-sms" data-sms-role="send-btn">
                                            <span class="btn-text">인증번호 전송</span>
                                            <span class="spinner-border spinner-border-sm d-none ms-1" role="status" aria-hidden="true"></span>
                                        </button>

                                        <!-- 2. 인증완료 상태일 때 우측에 딱 달라붙어 노출되는 '번호 수정' 버튼 -->
                                        <button type="button" class="btn btn-outline-secondary px-3 @if(!$isVerified) d-none @endif" data-sms-role="edit-btn">
                                            번호 수정
                                        </button>
                                    </div>

                                    <div id="sms-message" class="form-text mt-2 d-none fw-medium small" data-sms-role="message-box"></div>

                                    <!-- 인증번호 입력 영역 (초기 숨김) -->
                                    <div class="mb-3 d-none p-3 bg-light rounded-3 border border-brand mt-2" id="sms-verify-area" data-sms-role="verify-area">
                                        <div class="d-flex justify-content-between align-items-center mb-2">
                                            <label for="sms_code" class="form-label fw-semibold text-secondary small mb-0">인증번호 6자리 입력 <span class="text-danger">*</span></label>
                                            <span id="auth-timer" class="text-danger small fw-bold">3:00</span>
                                        </div>
                                        <div class="input-group">
                                            <span class="input-group-text"><i class="fas fa-key"></i></span>
                                            <input type="text" class="form-control fs-5 fw-bold text-center" id="sms_code" name="sms_code" data-sms-role="code-input" placeholder="000000" maxlength="6">
                                            <button type="button" class="btn btn-premium px-4" id="btn-verify-sms" data-sms-role="verify-btn">
                                                <span class="btn-text">인증 확인</span>
                                                <span class="spinner-border spinner-border-sm d-none ms-1" role="status" aria-hidden="true"></span>
                                            </button>
                                        </div>
                                        <div id="sms-verify-message" class="form-text mt-2 d-none fw-medium small"></div>

                                        <div class="d-flex justify-content-between align-items-center mt-2">
                                            <div class="form-text text-muted small mb-0">문자가 발송되었습니다. 3분 이내에 입력해주세요.</div>
                                            <button type="button" id="btn-resend" data-sms-role="resend-btn" class="btn btn-link btn-sm text-decoration-none text-secondary p-0 small">번호 재입력</button>
                                        </div>
                                    </div>

                                    <!-- 인증 완료 플래그 -->
                                    <input type="hidden" id="is_phone_verified" name="is_phone_verified" data-sms-role="verified-flag" value="{{ $isVerified ? 'true' : 'false' }}">
                                </div>
                                <div class="col-12">
                                    <label for="ordererEmail" class="form-label small text-muted">이메일 (결제 내역 및 바코드 발송용)</label>
                                    <input type="email" class="form-control" id="ordererEmail" name="orderer_email" value="{{ old('orderer_email', auth()->user()->email ?? '') }}">
                                </div>
                            </div>
                        </div>
                    </div>

                </div>

                <!-- 우측: 최종 결제 금액 및 결제 버튼 (Sticky) -->
                <div class="col-lg-4">
                    <div class="card border-0 shadow-sm rounded-3 sticky-top" style="top: 20px;">
                        <div class="card-header bg-white py-3 fw-bold border-bottom">
                            최종 결제 금액
                        </div>
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-center mb-2 text-muted small">
                                <span>상품 합계 금액</span>
                                <span id="itemTotalPrice">0원</span>
                            </div>
                            <div class="d-flex justify-content-between align-items-center mb-3 text-muted small">
                                <span>할인 금액</span>
                                <span class="text-danger">0원</span>
                            </div>
                            <hr class="opacity-25">
                            <div class="d-flex justify-content-between align-items-center mb-4">
                                <span class="fw-bold text-dark">총 결제금액</span>
                                <h3 class="fw-bold text-brand m-0" id="finalTotalPrice">0원</h3>
                            </div>

                            <div class="bg-light p-2.5 rounded text-center small text-muted mb-4">
                                결제 완료 시 <strong class="text-brand" id="finalPointText">0 P</strong> 적립 예정
                            </div>

                            <!-- 약관 동의 체크 및 상세 보기 -->
                            <div class="mb-4">
                                <div class="form-check mb-2">
                                    <input class="form-check-input" type="checkbox" value="" id="agreeCheck" disabled>
                                    <label class="form-check-label small text-dark fw-semibold" for="agreeCheck">
                                        (필수) 주문 내용을 확인하였으며, 서비스 이용 약관 및 환불 규정에 동의합니다.
                                    </label>
                                </div>

                                <div class="d-flex gap-3 ps-4" style="font-size: 0.75rem;">
                                    <a href="javascript:void(0);" id="linkTerms" class="fw-bold text-brand text-decoration-underline" data-bs-toggle="modal" data-bs-target="#termsModal">
                                        <i class="fas fa-exclamation-circle me-1"></i> 서비스 이용약관 보기 (미열람)
                                    </a>
                                    <a href="javascript:void(0);" id="linkRefund" class="fw-bold text-brand text-decoration-underline" data-bs-toggle="modal" data-bs-target="#refundModal">
                                        <i class="fas fa-exclamation-circle me-1"></i> 취소 및 환불 규정 보기 (미열람)
                                    </a>
                                </div>
                            </div>

                            <!-- 결제하기 버튼 -->
                            <button type="submit" class="btn btn-premium w-100 py-3 fw-bold fs-5 shadow-sm" id="paySubmitBtn">
                                0원 결제하기
                            </button>
                        </div>
                    </div>
                </div>

            </div>
        </form>

    </div>
</main>

<!-- 모달 영역 (이용약관 및 환불규정) -->
<div class="modal fade" id="termsModal" tabindex="-1" aria-labelledby="termsModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-scrollable">
        <div class="modal-content border-0 shadow">
            <div class="modal-header border-bottom">
                <h5 class="modal-title fw-bold fs-6" id="termsModalLabel"><i class="fas fa-file-contract text-brand me-2"></i>서비스 이용약관</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body text-muted small lh-lg">
                <p class="fw-bold text-dark mb-1">제 1 조 (목적)</p>
                <p class="mb-3">본 약관은 GLOBEAU(이하 "회사")가 제공하는 서비스 이용 조건 및 절차에 관한 사항을 규정합니다.</p>
            </div>
            <div class="modal-footer border-top bg-light">
                <button type="button" class="btn btn-sm btn-secondary px-4" data-bs-dismiss="modal">확인</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="refundModal" tabindex="-1" aria-labelledby="refundModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-scrollable">
        <div class="modal-content border-0 shadow">
            <div class="modal-header border-bottom">
                <h5 class="modal-title fw-bold fs-6" id="refundModalLabel"><i class="fas fa-undo-alt text-brand me-2"></i>취소 및 환불 규정</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body text-muted small lh-lg">
                <p class="fw-bold text-dark mb-1">1. 취소 및 환불 규정</p>
                <p class="mb-3">- 결제일로부터 7일 이내 미사용 티켓에 한하여 환불이 가능합니다.</p>
            </div>
            <div class="modal-footer border-top bg-light">
                <button type="button" class="btn btn-sm btn-secondary px-4" data-bs-dismiss="modal">확인</button>
            </div>
        </div>
    </div>
</div>
@endsection

@push('styles')
<style>
    .payment-method-card {
        background-color: #fff;
        border-color: #e9ecef !important;
        transition: all 0.2s ease-in-out;
    }

    .payment-method-card:hover {
        border-color: var(--brand-color, #d63384) !important;
        background-color: #fafbfc;
    }

    .btn-check:checked+.payment-method-card {
        border-color: var(--brand-color, #d63384) !important;
        background-color: #fff5f8;
        box-shadow: 0 0 0 1px var(--brand-color, #d63384);
    }

    .btn-check:checked+.payment-method-card .selected-check {
        display: block !important;
        color: var(--brand-color, #d63384) !important;
    }

    .btn-check:checked+.payment-method-card .icon-box i {
        color: var(--brand-color, #d63384) !important;
    }
</style>
@endpush

@push('scripts')
<!-- 공용 인증 및 커스텀 스크립트 -->
<script src="{{ asset('js/sms_auth.js') }}"></script>

<script>
    // 히든 인풋의 old 값을 읽어와서 초기 상태 설정
    const readStatus = {
        terms: document.getElementById('termsReadField').value === 'true',
        refund: document.getElementById('refundReadField').value === 'true'
    };

    document.addEventListener("DOMContentLoaded", function() {
        // 1. 페이지 로드 시 다건 상품 합계 총액 계산 실행
        calculateTotalCheckoutAmount();

        // 페이지 로드 시 기존 열람 상태 반영
        updateAgreementState();

        // 2. 약관 모달 열람 감지
        const termsModal = document.getElementById('termsModal');
        if (termsModal) {
            termsModal.addEventListener('shown.bs.modal', function() {
                readStatus.terms = true;
                document.getElementById('termsReadField').value = 'true';
                updateAgreementState();
            });
        }

        const refundModal = document.getElementById('refundModal');
        if (refundModal) {
            refundModal.addEventListener('shown.bs.modal', function() {
                readStatus.refund = true;
                document.getElementById('refundReadField').value = 'true';
                updateAgreementState();
            });
        }

        // 3. 결제 수단 라디오 및 무통장 입금 토글 제어
        const payCard = document.getElementById('payCard');
        const payTransfer = document.getElementById('payTransfer');
        const payMobile = document.getElementById('payMobile');
        const bankTransferBox = document.getElementById('bankTransferBox');
        const formPaymentMethod = document.getElementById('formPaymentMethod');

        const bsCollapse = new bootstrap.Collapse(bankTransferBox, {
            toggle: false
        });

        function handlePaymentMethodChange() {
            if (payTransfer && payTransfer.checked) {
                bsCollapse.show();
                if (formPaymentMethod) formPaymentMethod.value = 'transfer';
            } else {
                bsCollapse.hide();
                if (payCard && payCard.checked && formPaymentMethod) formPaymentMethod.value = 'card';
                if (payMobile && payMobile.checked && formPaymentMethod) formPaymentMethod.value = 'mobile';
            }
        }

        if (payCard && payTransfer && payMobile) {
            payCard.addEventListener('change', handlePaymentMethodChange);
            payTransfer.addEventListener('change', handlePaymentMethodChange);
            payMobile.addEventListener('change', handlePaymentMethodChange);
        }

        // 4. 폼 제출 유효성 검사
        const checkoutForm = document.getElementById('checkoutForm');
        if (checkoutForm) {
            checkoutForm.addEventListener('submit', function(e) {
                const alertTitle = "필수 입력 확인";
                const alertIcon = "warning";

                // 결제방식이 무통장입금일때 실제 입금자명 등록여부 확인
                if (payTransfer && payTransfer.checked) {
                    const depositorName = document.getElementById('depositorName');
                    if (depositorName && !depositorName.value.trim()) {
                        e.preventDefault();
                        showSwalAlert('무통장 입금에 사용할 입금자 성명을 입력해 주세요.', depositorName, null, alertIcon, alertTitle);
                        return false;
                    }
                }

                // 휴대폰 번호 입력 여부 확인
                const ordererPhone = document.querySelector('input[name="orderer_phone"]');
                if (ordererPhone && !ordererPhone.value.trim()) {
                    e.preventDefault();
                    showSwalAlert('휴대폰 번호는 필수 입력 항목입니다.', ordererPhone, null, alertIcon, alertTitle);
                    return false;
                }

                // 휴대폰 본인인증 완료 여부 확인
                const isPhoneVerified = document.getElementById('is_phone_verified');
                if (isPhoneVerified && isPhoneVerified.value !== 'true') {
                    e.preventDefault();
                    showSwalAlert('휴대폰 본인인증을 완료해 주세요.', null, null, alertIcon, '인증확인');
                    return false;
                }

                // 주문자명 등록여부 확인
                const ordererName = document.querySelector('input[name="orderer_name"]');
                if (ordererName && !ordererName.value.trim()) {
                    e.preventDefault();
                    showSwalAlert('주문자 성함은 필수 입력 항목입니다.', ordererName, null, alertIcon, alertTitle);
                    return false;
                }

                // 서비스 이용ㅇ약과과 취소 환불 규정을 확인 했는지 체크    
                const agreeCheck = document.getElementById('agreeCheck');
                if (agreeCheck.disabled || !agreeCheck.checked) {
                    e.preventDefault();
                    showSwalAlert('서비스 이용약관과 취소 및 환불 규정을 모두 열람하신 후 동의해 주세요.', null, null, alertIcon, '필수 동의 확인');
                    return false;

                }

            });
        }

        // 5. 결제 수단 아이콘 테마 컬러 동기화
        const radios = document.querySelectorAll('input[name="payment_method_radio"]');

        function updatePaymentStyles() {
            radios.forEach(radio => {
                const icon = radio.nextElementSibling.querySelector('.icon-box i');
                if (radio.checked) {
                    icon.classList.replace('text-muted', 'text-brand');
                } else {
                    icon.classList.replace('text-brand', 'text-muted');
                }
            });
        }

        radios.forEach(radio => {
            radio.addEventListener('change', updatePaymentStyles);
        });
        updatePaymentStyles();
    });

    // 다건 상품들의 총 금액을 순회하며 합산하는 함수
    function calculateTotalCheckoutAmount() {
        const itemRows = document.querySelectorAll('.order-item-row');
        let grandTotal = 0;
        let totalCount = 0;

        itemRows.forEach(row => {
            const price = parseFloat(row.getAttribute('data-price')) || 0;
            const qty = parseInt(row.getAttribute('data-qty')) || 1;
            grandTotal += (price * qty);
            totalCount += qty;
        });

        // 화면 갱신
        const itemCountEl = document.getElementById('itemCount');
        if (itemCountEl) itemCountEl.innerText = itemRows.length;

        const formattedTotal = grandTotal.toLocaleString('ko-KR') + "원";

        document.getElementById('itemTotalPrice').innerText = formattedTotal;
        document.getElementById('finalTotalPrice').innerText = formattedTotal;
        document.getElementById('paySubmitBtn').innerText = formattedTotal + " 결제하기";

        const transferAmountText = document.getElementById('transferAmountText');
        if (transferAmountText) transferAmountText.innerText = formattedTotal;

        const finalPointText = document.getElementById('finalPointText');
        if (finalPointText) {
            let estimatedPoints = Math.floor(grandTotal * 0.01);
            finalPointText.innerText = estimatedPoints.toLocaleString('ko-KR') + " P";
        }
    }

    function updateAgreementState() {
        const linkTerms = document.getElementById('linkTerms');
        const linkRefund = document.getElementById('linkRefund');
        const agreeCheck = document.getElementById('agreeCheck');

        if (readStatus.terms && linkTerms) {
            linkTerms.className = "text-muted text-decoration-none";
            linkTerms.innerHTML = '<i class="fas fa-check text-success me-1"></i> 서비스 이용약관 (열람 완료)';
        }

        if (readStatus.refund && linkRefund) {
            linkRefund.className = "text-muted text-decoration-none";
            linkRefund.innerHTML = '<i class="fas fa-check text-success me-1"></i> 취소 및 환불 규정 (열람 완료)';
        }

        if (readStatus.terms && readStatus.refund && agreeCheck) {
            agreeCheck.disabled = false;
            agreeCheck.checked = true;
        }
    }
</script>
@endpush