<%@ page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8" language="java" %>
<%
    String ctx = request.getContextPath();
%>
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <jsp:include page="/WEB-INF/views/theme-init.jsp"/>
    <title>팀원 모집글 작성 | bibimbap</title>
    <style>
      html {
        color-scheme: light;
        --surface: #faf8f5;
        --card-bg: #fff;
        --text: #1a1a1a;
        --text-muted: #5c5c5c;
        --accent: #e8a54b;
        --accent-soft: rgba(232, 165, 75, 0.16);
        --border: rgba(0, 0, 0, 0.08);
        --shadow: rgba(0, 0, 0, 0.06);
        --field-bg: #fff;
      }
      html[data-theme="dark"] {
        color-scheme: dark;
        --surface: #121212;
        --card-bg: #1e1e1e;
        --text: #ece8e1;
        --text-muted: #a39e96;
        --border: rgba(255, 255, 255, 0.1);
        --shadow: rgba(0, 0, 0, 0.35);
        --field-bg: #181818;
      }
      body {
        margin: 0;
        min-height: 100vh;
        font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans KR", sans-serif;
        background: var(--surface);
        color: var(--text);
      }
      .form-page {
        max-width: 72rem;
        margin: 0 auto;
        padding: 1.5rem max(1rem, env(safe-area-inset-left)) 3rem max(1rem, env(safe-area-inset-right));
      }
      .form-heading {
        margin-bottom: 1rem;
      }
      .form-heading__eyebrow {
        margin: 0 0 0.35rem;
        color: var(--accent);
        font-size: 0.75rem;
        font-weight: 900;
      }
      .form-heading h1 {
        margin: 0;
        font-size: 1.85rem;
        line-height: 1.2;
        letter-spacing: 0;
      }
      .form-layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 20rem;
        gap: 1rem;
        align-items: start;
      }
      .recruit-form,
      .preview-card {
        border: 1px solid var(--border);
        border-radius: 12px;
        background: var(--card-bg);
        box-shadow: 0 2px 8px var(--shadow);
      }
      .recruit-form {
        padding: 1.35rem;
      }
      .form-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.9rem;
      }
      .field {
        display: grid;
        gap: 0.4rem;
      }
      .field--full {
        grid-column: 1 / -1;
      }
      .field label {
        color: var(--text);
        font-size: 0.8125rem;
        font-weight: 900;
      }
      .field input,
      .field select,
      .field textarea {
        width: 100%;
        box-sizing: border-box;
        border: 1px solid var(--border);
        border-radius: 10px;
        background: var(--field-bg);
        color: var(--text);
        font: inherit;
        font-size: 0.9375rem;
      }
      .field select {
        appearance: none;
        cursor: pointer;
        padding-right: 3rem;
        background-image:
          linear-gradient(90deg, transparent 0, transparent calc(100% - 2.75rem), rgba(232, 165, 75, 0.12) calc(100% - 2.75rem), rgba(232, 165, 75, 0.12) 100%),
          url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23e8a54b' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
        background-repeat: no-repeat, no-repeat;
        background-position: 0 0, right 0.82rem center;
        background-size: 100% 100%, 1.05rem 1.05rem;
      }
      .field select::-ms-expand {
        display: none;
      }
      .field select:hover {
        border-color: rgba(232, 165, 75, 0.45);
      }
      .field select option {
        background: var(--field-bg);
        color: var(--text);
      }
      .field input,
      .field select {
        height: 2.85rem;
        padding: 0 0.8rem;
      }
      .field select {
        padding-right: 3rem;
      }
      .field textarea {
        min-height: 8rem;
        padding: 0.8rem;
        line-height: 1.6;
        resize: vertical;
      }
      .field input:focus,
      .field select:focus,
      .field textarea:focus {
        outline: none;
        border-color: var(--accent);
        box-shadow: 0 0 0 3px rgba(232, 165, 75, 0.22);
      }
      .form-actions {
        margin-top: 1rem;
        display: flex;
        justify-content: flex-end;
        gap: 0.6rem;
      }
      .form-button {
        min-height: 2.75rem;
        padding: 0 1rem;
        border: 1px solid var(--border);
        border-radius: 10px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: var(--card-bg);
        color: var(--text);
        font-size: 0.9375rem;
        font-weight: 900;
        text-decoration: none;
        cursor: pointer;
      }
      .form-button--primary {
        border-color: transparent;
        background: var(--accent);
        color: #1a1a1a;
      }
      .preview-card {
        position: sticky;
        top: 5rem;
        padding: 1.1rem;
      }
      .preview-card__label {
        margin: 0 0 0.65rem;
        color: var(--text-muted);
        font-size: 0.75rem;
        font-weight: 900;
      }
      .preview-card__role {
        display: inline-flex;
        align-items: center;
        min-height: 1.85rem;
        margin-bottom: 0.7rem;
        padding: 0 0.65rem;
        border-radius: 999px;
        background: var(--accent-soft);
        color: var(--accent);
        font-size: 0.75rem;
        font-weight: 900;
      }
      .preview-card h2 {
        margin: 0;
        font-size: 1.2rem;
        line-height: 1.35;
        letter-spacing: 0;
        word-break: break-word;
      }
      .preview-card__line {
        margin: 0.55rem 0 0;
        color: var(--text-muted);
        font-size: 0.875rem;
        line-height: 1.6;
        word-break: break-word;
      }
      .preview-card__meta {
        margin: 1rem 0 0;
        padding: 0;
        list-style: none;
        display: grid;
        gap: 0.35rem;
        color: var(--text-muted);
        font-size: 0.8125rem;
      }
      .preview-card__meta strong {
        color: var(--text);
      }
      @media (max-width: 860px) {
        .form-layout {
          grid-template-columns: 1fr;
        }
        .preview-card {
          position: static;
        }
      }
      @media (max-width: 560px) {
        .form-grid {
          grid-template-columns: 1fr;
        }
        .form-actions {
          flex-direction: column-reverse;
        }
        .form-button {
          width: 100%;
          box-sizing: border-box;
        }
      }
    </style>
</head>
<body>
    <jsp:include page="/WEB-INF/views/header.jsp"/>
    <main class="form-page">
        <section class="form-heading" aria-labelledby="form-title">
            <p class="form-heading__eyebrow">RECRUIT POST</p>
            <h1 id="form-title">팀원 모집글 작성</h1>
        </section>

        <div class="form-layout">
            <section class="recruit-form" aria-label="팀원 모집글 입력">
                <form id="recruit-form" action="<%= ctx %>/recruit/new" method="post" novalidate>
                    <div class="form-grid">
                        <div class="field">
                            <label for="project-name">프로젝트명</label>
                            <input id="project-name" name="projectName" type="text" maxlength="80" placeholder="예: 달빛 정거장" required>
                        </div>
                        <div class="field">
                            <label for="genre">게임 장르</label>
                            <input id="genre" name="genre" type="text" maxlength="60" placeholder="예: 2D 어드벤처">
                        </div>
                        <div class="field field--full">
                            <label for="summary">한 줄 소개</label>
                            <input id="summary" name="summary" type="text" maxlength="120" placeholder="프로젝트를 한 문장으로 소개해 주세요." required>
                        </div>
                        <div class="field">
                            <label for="role">모집 역할</label>
                            <select id="role" name="role">
                                <option selected>기획</option>
                                <option>아트</option>
                                <option>프로그래머</option>
                            </select>
                        </div>
                        <div class="field">
                            <label for="status">진행 상태</label>
                            <select id="status" name="status">
                                <option selected>아이디어 단계</option>
                                <option>프로토타입 개발 중</option>
                                <option>데모 있음</option>
                                <option>출시 준비 중</option>
                            </select>
                        </div>
                        <div class="field">
                            <label for="type">참여 방식</label>
                            <select id="type" name="type">
                                <option selected>취미</option>
                                <option>수익쉐어</option>
                                <option>유급</option>
                                <option>게임잼</option>
                            </select>
                        </div>
                        <div class="field">
                            <label for="period">예상 기간</label>
                            <input id="period" name="period" type="text" maxlength="40" placeholder="예: 약 3개월">
                        </div>
                        <div class="field">
                            <label for="team">현재 팀 구성</label>
                            <input id="team" name="team" type="text" maxlength="80" placeholder="예: 기획 1명, 프로그래머 1명">
                        </div>
                        <div class="field">
                            <label for="contact">연락 방법</label>
                            <input id="contact" name="contact" type="text" maxlength="100" placeholder="이메일, 디스코드, 오픈채팅 등" required>
                        </div>
                        <div class="field field--full">
                            <label for="description">상세 설명</label>
                            <textarea id="description" name="description" maxlength="1200" placeholder="프로젝트 소개, 원하는 역할, 작업 방식 등을 적어 주세요."></textarea>
                        </div>
                    </div>
                    <div class="form-actions">
                        <a class="form-button" href="<%= ctx %>/recruit">취소</a>
                        <button class="form-button form-button--primary" type="submit">미리보기 완료</button>
                    </div>
                </form>
            </section>

            <aside class="preview-card" aria-label="모집글 미리보기">
                <p class="preview-card__label">미리보기</p>
                <span class="preview-card__role" id="preview-role">기획 모집</span>
                <h2 id="preview-name">프로젝트 이름</h2>
                <p class="preview-card__line" id="preview-summary">한 줄 소개가 여기에 표시됩니다.</p>
                <ul class="preview-card__meta">
                    <li><strong>장르</strong> <span id="preview-genre">장르 미정</span></li>
                    <li><strong>상태</strong> <span id="preview-status">아이디어 단계</span></li>
                    <li><strong>참여</strong> <span id="preview-type">취미</span></li>
                    <li><strong>기간</strong> <span id="preview-period">기간 미정</span></li>
                    <li><strong>팀</strong> <span id="preview-team">팀 구성 미정</span></li>
                    <li><strong>연락</strong> <span id="preview-contact">연락 방법 미정</span></li>
                </ul>
                <p class="preview-card__line" id="preview-description">상세 설명이 여기에 표시됩니다.</p>
            </aside>
        </div>
    </main>
    <jsp:include page="/WEB-INF/views/footer.jsp"/>
    <script>
(function () {
  var pairs = [
    ['project-name', 'preview-name', '프로젝트 이름'],
    ['summary', 'preview-summary', '한 줄 소개가 여기에 표시됩니다.'],
    ['genre', 'preview-genre', '장르 미정'],
    ['status', 'preview-status', '진행 상태 미정'],
    ['type', 'preview-type', '참여 방식 미정'],
    ['period', 'preview-period', '기간 미정'],
    ['team', 'preview-team', '팀 구성 미정'],
    ['contact', 'preview-contact', '연락 방법 미정'],
    ['description', 'preview-description', '상세 설명이 여기에 표시됩니다.']
  ];
  var role = document.getElementById('role');
  var previewRole = document.getElementById('preview-role');
  var form = document.getElementById('recruit-form');

  function valueOf(id) {
    var el = document.getElementById(id);
    return el ? el.value.trim() : '';
  }

  function render() {
    pairs.forEach(function (pair) {
      var target = document.getElementById(pair[1]);
      if (target) target.textContent = valueOf(pair[0]) || pair[2];
    });
    if (previewRole) {
      previewRole.textContent = (valueOf('role') || '역할') + ' 모집';
    }
  }

  document.querySelectorAll('#recruit-form input, #recruit-form select, #recruit-form textarea').forEach(function (el) {
    el.addEventListener('input', render);
    el.addEventListener('change', render);
  });

  if (form) {
    form.addEventListener('submit', function (ev) {
      ev.preventDefault();
      if (!form.checkValidity()) {
        form.reportValidity();
        return;
      }

      var body = new URLSearchParams(new FormData(form));
      fetch(form.action, {
        method: 'POST',
        headers: window.BibimbapCsrf ? window.BibimbapCsrf.headers({
          'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
          'Accept': 'application/json',
          'X-Requested-With': 'XMLHttpRequest'
        }) : {
          'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
          'Accept': 'application/json',
          'X-Requested-With': 'XMLHttpRequest'
        },
        body: body
      }).then(function (res) {
        return res.json().catch(function () {
          return { message: '모집글을 저장하지 못했습니다.' };
        }).then(function (data) {
          if (!res.ok) {
            var error = new Error(data && data.message ? data.message : '모집글을 저장하지 못했습니다.');
            error.status = res.status;
            throw error;
          }
          return data;
        });
      }).then(function (data) {
        var go = function () {
          window.location.href = '<%= ctx %>' + (data.location || '/recruit');
        };
        if (window.BibimbapModal && typeof window.BibimbapModal.alert === 'function') {
          window.BibimbapModal.alert({
            title: '모집글 등록 완료',
            message: '팀원 모집글이 등록되었습니다.',
            confirmText: '확인',
            onConfirm: go
          });
        } else {
          alert('팀원 모집글이 등록되었습니다.');
          go();
        }
      }).catch(function (err) {
        var message = err.message || '모집글을 저장하지 못했습니다.';
        if (window.BibimbapModal && typeof window.BibimbapModal.alert === 'function') {
          window.BibimbapModal.alert({
            title: '등록 실패',
            message: message,
            confirmText: '확인',
            onConfirm: function () {
              if (err.status === 401) {
                window.location.href = '<%= ctx %>/login';
              }
            }
          });
        } else {
          alert(message);
          if (err.status === 401) {
            window.location.href = '<%= ctx %>/login';
          }
        }
      });
    });
  }

  if (role) render();
})();
    </script>
</body>
</html>
