<div class="card border-0 shadow-sm p-4 p-md-5 rounded-4 bg-light">
    <form id="inquiryForm">
        <div class="row g-3">
            <div class="col-md-6">
                <label class="form-label small fw-bold">성함 / 업체명</label>
                <input type="text" id="title" name="title" class="form-control" placeholder="성함을 입력하세요">
                <div class="error" data-error-for="title"></div>
            </div>
            <div class="col-md-6">
                <label class="form-label small fw-bold">이메일</label>
                <input type="email" id="email" name="email" class="form-control" placeholder="예) contact@domain.com">
                <div class="error" data-error-for="email"></div>
            </div>
            <div class="col-12">
                <label class="form-label small fw-bold">문의 내용</label>
                <textarea id="content" name="content" class="form-control" rows="5"
                    placeholder="문의하실 내용을 상세히 적어주세요."></textarea>
                <div class="error" data-error-for="content"></div>
            </div>
            <div class="col-12 mt-4">
                <button type="submit" id="submit" class="btn btn-dark w-100 py-3 fw-bold">문의 접수하기</button>
            </div>
        </div>
    </form>
    <div class="error text-danger mb-2" data-error-for="_global"></div>
</div>
<script type="text/javascript">
    document.addEventListener('DOMContentLoaded', () => {
        const form = document.getElementById('inquiryForm');
        if (!form) return;

        form.addEventListener('submit', async (e) => {
            e.preventDefault();

            // 에러 초기화
            document.querySelectorAll('.error').forEach(el => el.textContent = '');

            const formData = new FormData(form);

            const res = await fetch('/ajax/inquiry/create', {
                method: 'POST',
                body: formData,
                headers: { 'X-Requested-With': 'XMLHttpRequest' }
            });

            // 응답이 JSON이 아닐 수도 있으니 안전하게
            let data = {};
            try { data = await res.json(); } catch (e) { }

            // ✅ 422: 필드별 에러
            if (res.status === 422 && data.errors) {
                Object.entries(data.errors).forEach(([field, msg]) => {
                    const box = document.querySelector(`[data-error-for="${field}"]`);
                    if (box) box.textContent = msg;
                });
                return;
            }

            // ✅ 그 외 에러: message를 전역 에러로 표시
            if (!res.ok || data.ok === false) {
                const globalBox = document.querySelector(`[data-error-for="_global"]`);
                if (globalBox) globalBox.textContent = data.message || '처리 중 오류가 발생했습니다.';
                else alert(data.message || '처리 중 오류가 발생했습니다.');
                return;
            }

            // ✅ 성공
            alert('문의가 접수되었습니다.');
            form.reset();
        });
    });
</script>