<!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">
                                    채용문의 &amp; 입사지원
                                </h2>
                                <p class="inquiry-aside__desc" data-aos="fade-up">
                                    접수된 문서나 정보는<br>
                                    문의 및 지원절차 완료 후<br>
                                    파기하며 반환하지 않습니다.
                                </p>
                            </aside>

                            <!-- 우측 폼 -->
                            <div class="inquiry-form" role="main" data-aos="fade-up">
                                <form id="inquiryForm" th:action="@{/careers/recruitment}" 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="solution">솔루션 사업부</option>
                                                    <option value="dev">개발 운영팀</option>
                                                    <option value="pg">PG 사업부</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_file">파일첨부</label>
                                            <div class="form-file-wrap" id="fileWrap">
                                                <span class="file-ico material-symbols-outlined" aria-hidden="true">cloud_upload</span>
                                                <span class="form-file-name" id="fileName">파일을 선택해주세요. (이력서, 포트폴리오 등) 10MB 이하</span>
                                                <button type="button" class="form-file-btn" id="fileSelectBtn" aria-controls="inp_file">파일 선택</button>
                                                <input
                                                    type="file"
                                                    id="inp_file"
                                                    name="file"
                                                    class="form-file-input"
                                                    accept=".pdf,.doc,.docx,.hwp,.hwpx,.xls,.xlsx,.ppt,.pptx,.txt,.zip"
                                                    aria-label="파일 첨부"
                                                >
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Row 4: 제목 -->
                                    <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 5: 내용 -->
                                    <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>	
                
			</div>
      
            
            <!-- ========= SUB CONTENT [e] ========= -->
		</div>
	</div>
</div>

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

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

    /* ---- 파일 선택 이름 표시 ---- */
    const fileInput  = document.getElementById('inp_file');
    const fileName   = document.getElementById('fileName');
    const fileSelBtn = document.getElementById('fileSelectBtn');

    const ALLOWED_EXT = ['pdf', 'doc', 'docx', 'hwp', 'hwpx', 'xls', 'xlsx', 'ppt', 'pptx', 'txt', 'zip'];

    function getFileExt(name) {
        return name.split('.').pop().toLowerCase();
    }

    if (fileInput && fileName) {
        fileInput.addEventListener('change', function () {
            if (this.files && this.files.length > 0) {
                const file = this.files[0];
                const ext  = getFileExt(file.name);
                if (!ALLOWED_EXT.includes(ext)) {
                    alert('허용된 파일 형식이 아닙니다.\n(PDF, Word, 한글, Excel, PPT, 텍스트 파일만 가능합니다)');
                    this.value = '';
                    fileName.textContent = '파일을 선택해주세요. (이력서, 포트폴리오 등)';
                    fileName.classList.remove('has-file');
                    return;
                }
                fileName.textContent = file.name;
                fileName.classList.add('has-file');
            } else {
                fileName.textContent = '파일을 선택해주세요. (이력서, 포트폴리오 등)';
                fileName.classList.remove('has-file');
            }
        });
    }
    if (fileSelBtn) {
        fileSelBtn.addEventListener('click', function (e) {
            e.stopPropagation();
            fileInput.click();
        });
    }

    /* ---- 유효성 검사 규칙 ---- */
    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 제출 (파일 포함 → FormData) */
        const $btn = $form.find('[type="submit"]');

        // 클라이언트 파일 용량 검증
        if (fileInput && fileInput.files && fileInput.files.length > 0) {
            if (fileInput.files[0].size > 10 * 1024 * 1024) {
                alert('파일 용량은 10MB 이하만 가능합니다.');
                return;
            }
        }

        $btn.prop('disabled', true);

        const formData = new FormData($form[0]);

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

    /* ---- 완료 모달 ---- */
    function showCareersModal() {
        if ($('#careersModal').length === 0) {
            $('body').append(`
                <div id="careersModal" 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>
                        <button type="button" class="inquiry-modal__close" id="careersModalClose">확인</button>
                    </div>
                </div>
            `);
            $(document).on('click', '#careersModalClose, .inquiry-modal__backdrop', function () {
                closeCareersModal();
            });
            $(document).on('keydown', function (e) {
                if (e.key === 'Escape' && $('#careersModal').is(':visible')) closeCareersModal();
            });
        }
        $('#careersModal').css('display', 'flex').hide().fadeIn(200);
        $('#careersModalClose').focus();
        $('body').css('overflow', 'hidden');
    }

    function closeCareersModal() {
        $('#careersModal').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');
        if (fileName) {
            fileName.textContent = '파일을 선택해주세요. (이력서, 포트폴리오 등)';
            fileName.classList.remove('has-file');
        }
    }

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