<!doctype html>
<html lang="ko"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorate="~{layout/default}">
<head>
    <title>광고 및 제휴문의</title>
<body class="page-inquiry" >

<div id="wrapper" layout:fragment="content">

    <!-- ======================== HEADER -->
    <header id="hd" class="sub"></header>

    <!-- ======================== CONTAINER -->
    <div id="container">
        <div id="container_wrapper">
            <!-- ========= SUB CONTENT [s] ========= -->
         
            <div class="sub_content sec-recreuit">
                <div class="sub-section2">
                    <div class="sub-inner">
                        <div data-aos="fade-up">
							<h2 class="sub-h2 text-center">
								온라인 광고와 마케팅에 관한 문의 또는 제휴를 기다리고 있습니다.
							</h2>
                        </div>

                        <div class="inquiry-wrap">

                            <!-- 좌측 타이틀 -->
                            <aside class="inquiry-aside" aria-label="폼 안내">
                                <h2 class="inquiry-aside__title" data-aos="fade-up">
                                    광고 및 제휴문의
                                </h2>
                            </aside>

                            <!-- 우측 폼 -->
                            <div class="inquiry-form" role="main" data-aos="fade-up">
                                <form id="inquiryForm" th:action="@{/bbs/partnership}" method="post" novalidate>

                                    <!-- Row 1: 성명 + 이메일 -->
                                    <div class="form-row">
                                        <div class="form-group">
                                            <label class="form-label" for="inp_name">
                                                성명
                                                <span class="required" aria-hidden="true">*</span>
                                            </label>
                                            <input
                                                type="text"
                                                id="inp_name"
                                                name="name"
                                                class="form-input"
                                                placeholder="성함을 입력해주세요."
                                                autocomplete="name"
                                                required
                                            >
                                            <span class="form-error-msg" role="alert" id="err_name">성명을 입력해주세요.</span>
                                        </div>
                                        <div class="form-group">
                                            <label class="form-label" for="inp_email">
                                                이메일
                                                <span class="required" aria-hidden="true">*</span>
                                            </label>
                                            <input
                                                type="email"
                                                id="inp_email"
                                                name="email"
                                                class="form-input"
                                                placeholder="이메일을 입력해주세요."
                                                autocomplete="email"
                                                required
                                            >
                                            <span class="form-error-msg" role="alert" id="err_email">올바른 이메일을 입력해주세요.</span>
                                        </div>
                                    </div>

                                    <!-- Row 2: 연락처 + 지원분야 -->
                                    <div class="form-row">
                                        <div class="form-group">
                                            <label class="form-label" for="inp_tel">
                                                연락처
                                                <span class="required" aria-hidden="true">*</span>
                                            </label>
                                            <input
                                                type="tel"
                                                id="inp_tel"
                                                name="tel"
                                                class="form-input"
                                                placeholder="연락처를 입력해주세요."
                                                autocomplete="tel"
                                                required
                                            >
                                            <span class="form-error-msg" role="alert" id="err_tel">연락처를 입력해주세요.</span>
                                        </div>
                                        <div class="form-group">
                                            <label class="form-label" for="inp_dept">
                                                지원분야
                                                <span class="required" aria-hidden="true">*</span>
                                            </label>
                                            <div class="form-select-wrap">
                                                <select
                                                    id="inp_dept"
                                                    name="dept"
                                                    class="form-select"
                                                    required
                                                >
                                                     <option value="" disabled selected>선택</option>
													<option value="ad">광고문의</option>
													<option value="web">홈페이지 제작문의</option>
													<option value="dev">개발문의</option>
													<option value="partnership">광고제휴</option>
													<option value="marketing">마케팅제안</option>
                                                </select>
                                                <span class="select-ico material-symbols-outlined" aria-hidden="true">expand_more</span>
                                            </div>
                                            <span class="form-error-msg" role="alert" id="err_dept">지원분야를 선택해주세요.</span>
                                        </div>
                                    </div>

                                    <!-- Row 3: 제목 -->
                                    <div class="form-row form-row--full">
                                        <div class="form-group">
                                            <label class="form-label" for="inp_title">
                                                제목
                                                <span class="required" aria-hidden="true">*</span>
                                            </label>
                                            <input
                                                type="text"
                                                id="inp_title"
                                                name="title"
                                                class="form-input"
                                                placeholder="제목을 입력해주세요."
                                                required
                                            >
                                            <span class="form-error-msg" role="alert" id="err_title">제목을 입력해주세요.</span>
                                        </div>
                                    </div>

                                    <!-- Row 4: 내용 -->
                                    <div class="form-row form-row--full">
                                        <div class="form-group">
                                            <label class="form-label" for="inp_content">
                                                내용
                                                <span class="required" aria-hidden="true">*</span>
                                            </label>
                                            <textarea
                                                id="inp_content"
                                                name="content"
                                                class="form-textarea"
                                                placeholder="문의내용을 입력해주세요."
                                                required
                                            ></textarea>
                                            <span class="form-error-msg" role="alert" id="err_content">내용을 입력해주세요.</span>
                                        </div>
                                    </div>

                                    <!-- 개인정보 수집 및 이용 안내 -->
                                    <div class="privacy-section">
                                        <h3 class="privacy-section__title">개인정보 수집 및 이용 안내</h3>
                                        <div class="privacy-box" tabindex="0" aria-label="개인정보 수집 및 이용 안내 내용">
                                            <p>(주)오라인포는 아래의 목적으로 개인정보를 수집 및 이용하며, 방문자의 개인정보를 안전하게 취급하는데 최선을 다합니다.</p>
                                            <p>
                                                <strong>1. 수집목적</strong>
                                                – 원활한 서비스를 위한 이용자 식별<br>
                                                – 문의사항(광고제휴, 채용문의)의 처리 및 결과 통보
                                            </p>
                                            <p>
                                                <strong>2. 수집항목</strong>
                                                – 필수항목 : 성명, 이메일, 연락처, 지원분야, 제목, 문의내용<br>
                                                – 선택항목 : 첨부파일
                                            </p>
                                            <p>
                                                <strong>3. 보유 및 이용기간</strong>
                                                – 수집된 개인정보는 수집 및 이용 목적이 달성된 후 지체없이 파기합니다.<br>
                                                – 단, 관련 법령에 의거하여 일정 기간 보존이 필요한 경우 해당 기간 동안 보관합니다.
                                            </p>
                                            <p>귀하는 개인정보 수집·이용에 대한 동의를 거부할 권리가 있으며, 동의 거부 시 채용문의 및 입사지원 서비스 이용이 제한됩니다.</p>
                                        </div>

                                        <!-- 동의 체크박스 -->
                                        <label class="form-agree" id="agreeLabel">
                                            <span class="form-agree__cb">
                                                <input
                                                    type="checkbox"
                                                    id="inp_agree"
                                                    name="agree"
                                                    required
                                                    aria-required="true"
                                                    aria-describedby="err_agree"
                                                >
                                                <span class="cb-custom" aria-hidden="true"></span>
                                            </span>
                                            <span class="form-agree__label">
                                                개인정보 수집·이용에 대해 동의합니다.
                                                <span class="required" aria-hidden="true">*</span>
                                            </span>
                                        </label>
                                        <span class="form-error-msg" role="alert" id="err_agree">개인정보 수집·이용에 동의해주세요.</span>
                                    </div>

                                    <!-- 접수하기 버튼 -->
                                    <div class="form-submit-wrap">
                                        <button type="submit" class="form-submit-btn" aria-label="문의 접수하기">
                                            광고 및 제휴 문의하기
                                            <span class="btn-arrow material-symbols-outlined" aria-hidden="true">arrow_forward</span>
                                        </button>
                                    </div>

                                </form>
                            </div>
                            <!-- // 우측 폼 -->

                        </div>
                        <!-- // 채용문의 & 입사지원 폼 -->
                       
                    </div>
                </div>
				<!-- ========= SUB CONTENT [e] ========= -->
			</div>
		</div>
	</div>
</div>

<th:block layout:fragment="scripts">
<script>
/* ========================== 제휴문의 폼 */
$(document).ready(function () {

    const $form = $('#inquiryForm');

    /* ---- 유효성 검사 규칙 ---- */
    const validators = {
        name:    { el: '#inp_name',    err: '#err_name',    check: function (v) { return v.trim().length > 0; } },
        email:   { el: '#inp_email',   err: '#err_email',   check: function (v) { return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v.trim()); } },
        tel:     { el: '#inp_tel',     err: '#err_tel',     check: function (v) { return /^[0-9\-+\s]{7,20}$/.test(v.trim()); } },
        dept:    { el: '#inp_dept',    err: '#err_dept',    check: function (v) { return v !== '' && v !== null; } },
        title:   { el: '#inp_title',   err: '#err_title',   check: function (v) { return v.trim().length > 0; } },
        content: { el: '#inp_content', err: '#err_content', check: function (v) { return v.trim().length > 0; } },
        agree:   { el: '#inp_agree',   err: '#err_agree',   check: function () { return $('#inp_agree').is(':checked'); } }
    };

    /* ---- 단일 필드 유효성 표시 ---- */
    function validateField(key) {
        const rule = validators[key];
        const $el  = $(rule.el);
        const $err = $(rule.err);
        const val  = key === 'agree' ? '' : $el.val();
        const ok   = rule.check(val);
        $el.toggleClass('is-error', !ok);
        $err.toggleClass('is-show', !ok);
        return ok;
    }

    /* ---- 실시간 검사 ---- */
    $.each(validators, function (key, rule) {
        const $el = $(rule.el);
        const evt = (key === 'dept' || key === 'agree') ? 'change' : 'input';
        $el.on(evt, function () { validateField(key); });
    });

    /* ---- 연락처: 숫자·하이픈·공백·+만 입력 허용 ---- */
    $('#inp_tel').on('input', function () {
        this.value = this.value.replace(/[^0-9\-+\s]/g, '');
    });

    /* ---- 폼 제출 ---- */
    $form.on('submit', function (e) {
        e.preventDefault();

        let allOk = true;
        $.each(validators, function (key) {
            if (!validateField(key)) allOk = false;
        });

        if (!allOk) {
            const $firstErr = $form.find('.is-error').first();
            if ($firstErr.length) {
                $firstErr[0].focus();
                $('html, body').animate({ scrollTop: $firstErr.offset().top - 120 }, 300);
            }
            return;
        }

        /* 유효성 통과 시 AJAX 제출 */
        const $btn = $form.find('[type="submit"]');
        $btn.prop('disabled', true);

        $.ajax({
            url: $form.attr('action'),
            method: 'POST',
            data: $form.serialize(),
            success: function (res) {
                if (res.success) {
                    showInquiryModal();
                } else {
                    alert(res.message || '처리 중 오류가 발생했습니다. 다시 시도해주세요.');
                }
            },
            error: function () {
                alert('처리 중 오류가 발생했습니다. 다시 시도해주세요.');
            },
            complete: function () {
                $btn.prop('disabled', false);
            }
        });
    });

    /* ---- 완료 모달 ---- */
    function showInquiryModal() {
        if ($('#inquiryModal').length === 0) {
            $('body').append(`
                <div id="inquiryModal" role="dialog" aria-modal="true" aria-labelledby="modalTitle" style="display:none;">
                    <div class="inquiry-modal__backdrop"></div>
                    <div class="inquiry-modal__box">
                        <span class="inquiry-modal__icon material-symbols-outlined">check_circle</span>
                        <h3 class="inquiry-modal__title" id="modalTitle">문의가 접수되었습니다</h3>
                        <p class="inquiry-modal__desc">빠른 시일 내에 담당자가<br>연락드리겠습니다.</p>
                        <button type="button" class="inquiry-modal__close" id="inquiryModalClose">확인</button>
                    </div>
                </div>
            `);
            $(document).on('click', '#inquiryModalClose, .inquiry-modal__backdrop', function () {
                closeInquiryModal();
            });
            $(document).on('keydown', function (e) {
                if (e.key === 'Escape' && $('#inquiryModal').is(':visible')) closeInquiryModal();
            });
        }
        $('#inquiryModal').css('display', 'flex').hide().fadeIn(200);
        $('#inquiryModalClose').focus();
        $('body').css('overflow', 'hidden');
    }

    function closeInquiryModal() {
        $('#inquiryModal').fadeOut(200);
        $('body').css('overflow', '');
        $form[0].reset();
        $form.find('.is-error').removeClass('is-error');
        $form.find('.form-error-msg.is-show').removeClass('is-show');
    }

});
</script>	
</th:block>