taxbaik/src/TaxBaik.Web/Pages/Contact.cshtml

@page
@model TaxBaik.Web.Pages.ContactModel
@{
    ViewData["Title"] = "상담 신청 | 백원숙 세무회계";
}

<div class="container py-5" style="max-width: 600px;">
    <div class="d-flex align-items-center justify-content-between gap-3 mb-4">
        <h1 class="fw-bold mb-0">상담 신청</h1>
        <a href="/taxbaik" class="btn btn-outline-secondary btn-sm"
           onclick="if (history.length > 1) { history.back(); return false; }">
            뒤로가기
        </a>
    </div>

    @if (TempData["Success"] != null)
    {
        <div id="contact-success" class="alert alert-success alert-dismissible fade show" role="alert" role="status" style="font-size: 1.05rem;">
            <strong>✅ 성공!</strong> @TempData["Success"]
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
        <script>
            // 성공 메시지를 3초 후 자동 숨김 (사용자 클릭 가능)
            setTimeout(() => {
                const alert = document.getElementById('contact-success');
                if (alert) {
                    const bsAlert = new bootstrap.Alert(alert);
                    bsAlert.close();
                }
            }, 5000);
            // 폼 자동 초기화
            setTimeout(() => {
                document.querySelector('form').reset();
                document.getElementById('agree').checked = false;
            }, 1000);
        </script>
    }

    <form method="post" id="contactForm">
        @Html.AntiForgeryToken()
        <div asp-validation-summary="All" class="text-danger mb-3"></div>

        <div class="mb-3">
            <label for="name" class="form-label">이름 <span class="text-danger">*</span></label>
            <input type="text" class="form-control" id="name" name="Name" required />
        </div>

        <div class="mb-3">
            <label for="phone" class="form-label">전화번호 <span class="text-danger">*</span></label>
            <input type="tel" class="form-control" id="phone" name="Phone" placeholder="010-1234-5678" required maxlength="13" />
            <small class="form-text text-muted">숫자만 입력하면 자동 포맷팅됩니다 (예: 01012345678 또는 010-1234-5678)</small>
            <div id="phoneError" class="text-danger mt-2" style="display: none;">
                10~11자리 숫자를 입력해주세요.
            </div>
        </div>

        <div class="mb-3">
            <label for="email" class="form-label">이메일</label>
            <input type="email" class="form-control" id="email" name="Email" />
        </div>

        <div class="mb-3">
            <label for="service" class="form-label">상담분야</label>
            <select class="form-select" id="service" name="ServiceType">
                <option value="기장">사업자 기장</option>
                <option value="양도세">부동산 양도세</option>
                <option value="종소세">종합소득세</option>
                <option value="증여상속">증여상속세</option>
                <option value="기타">기타</option>
            </select>
        </div>

        <div class="mb-3">
            <label for="message" class="form-label">문의내용 <span class="text-danger">*</span></label>
            <textarea class="form-control" id="message" name="Message" rows="5" required></textarea>
        </div>

        <div class="mb-3 form-check">
            <input type="checkbox" class="form-check-input" id="agree" name="Agree" value="true" required />
            <label class="form-check-label" for="agree">
                개인정보 수집·이용에 동의합니다
            </label>
        </div>

        <button type="submit" class="btn btn-primary btn-lg w-100">상담신청</button>
    </form>

    <script>
        const phoneInput = document.getElementById('phone');
        const phoneError = document.getElementById('phoneError');
        const contactForm = document.getElementById('contactForm');

        // 실시간 전화번호 마스킹
        phoneInput.addEventListener('input', (e) => {
            let value = e.target.value.replace(/\D/g, ''); // 숫자만 추출

            if (value.length > 11) {
                value = value.substring(0, 11); // 최대 11자리
            }

            // 포맷팅
            if (value.length >= 10) {
                if (value.length === 10) {
                    // 10자리: XXXX-XXX-XXXX
                    value = `${value.substring(0, 4)}-${value.substring(4, 7)}-${value.substring(7)}`;
                } else if (value.length === 11) {
                    // 11자리: XXX-XXXX-XXXX
                    value = `${value.substring(0, 3)}-${value.substring(3, 7)}-${value.substring(7)}`;
                }
            } else if (value.length > 3) {
                value = `${value.substring(0, 3)}-${value.substring(3)}`;
            }

            e.target.value = value;
            validatePhone();
        });

        // 전화번호 검증
        function validatePhone() {
            const value = phoneInput.value.replace(/\D/g, '');
            const isValid = value.length >= 10 && value.length <= 11;

            if (!isValid && phoneInput.value.length > 0) {
                phoneError.style.display = 'block';
                phoneInput.classList.add('is-invalid');
            } else {
                phoneError.style.display = 'none';
                phoneInput.classList.remove('is-invalid');
            }

            return isValid;
        }

        // 폼 제출 전 검증
        contactForm.addEventListener('submit', (e) => {
            if (!validatePhone()) {
                e.preventDefault();
                phoneInput.focus();
            }
        });

        // 포커스 아웃 시 최종 검증
        phoneInput.addEventListener('blur', validatePhone);
    </script>

    <hr class="my-5" />

    <h5 class="fw-bold mb-3">빠른 상담을 원하시나요?</h5>
    <p>카카오톡 채널을 통해 더 빠르게 상담받을 수 있습니다.</p>
    <div class="gap-2 d-flex flex-wrap">
        <a href="http://pf.kakao.com/_xoxchTX" target="_blank" class="btn btn-warning">카카오톡 채널 문의</a>
        <a href="tel:010-4122-8268" class="btn btn-outline-primary">전화 상담</a>
    </div>
</div>