<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>シフト提出</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="styles.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/js-yaml/4.1.0/js-yaml.min.js"></script>
</head>
<body>
  <!-- ローディング画面 -->
  <div id="loading">
    <div id="loading-text">WELCOME TO EASY SHIFT</div>
    <div class="spinner"></div>
  </div>

  <!-- ステップバー -->
  <div class="step-bar-container">
    <div class="step-bar">
      <div class="step-circle active">1<span class="step-label">ユーザー情報</span></div>
      <div class="step-line active"></div>
      <div class="step-circle active">2<span class="step-label">シフト選択</span></div>
      <div class="step-line active"></div>
      <div class="step-circle active">3<span class="step-label">シフト確認</span></div>
      <div class="step-line"></div>
      <div class="step-circle">4<span class="step-label">提出完了</span></div>
    </div>
  </div>

  <div id="userInfo" style="display: none;"></div>

  <h2 id="calendarMonth" style="display: none;"></h2>
  <div class="content-container">
    <div id="calendar"></div>
    <div id="shiftList">
      <h3>選択されたシフト</h3>
      <ul id="shiftDetails"></ul>
      <button onclick="goToConfirmation()">次へ</button>
    </div>
  </div>

  <!-- シフト確認ページ（大胆なデザインに変更） -->
  <div id="confirmationPage" style="display: none;">
    <h2 class="confirm-title">【シフト提出内容の確認】</h2>
    <div class="confirm-card">
      <h3>ユーザー情報</h3>
      <ul class="confirmation-list">
        <li><span class="confirmation-label">メールアドレス：</span><span class="confirmation-value" id="confirmationEmail"></span></li>
        <li><span class="confirmation-label">従業員番号：</span><span class="confirmation-value" id="confirmationEmployeeID"></span></li>
        <li><span class="confirmation-label">名前：</span><span class="confirmation-value" id="confirmationName"></span></li>
        <li><span class="confirmation-label">提出月：</span><span class="confirmation-value" id="confirmationMonth"></span></li>
        <li><span class="confirmation-label">提出期間：</span><span class="confirmation-value" id="confirmationHalf"></span></li>
      </ul>
    </div>
    <div class="confirm-card">
      <h3>選択されたシフト</h3>
      <ul class="confirmation-list" id="confirmationShiftDetails">
        <!-- シフト情報はここに表示 -->
      </ul>
    </div>
<!-- 送信用フォーム（Google Form 送信先は従来通り、target 属性を追加） -->
<form id="shiftSubmitForm"
  action="https://docs.google.com/forms/u/0/d/e/1FAIpQLSfRr8j0oa5zoFwsQvGFGy0gWof0DUySk_4lQBdiarKfNO-v2Q/formResponse"
  method="post" accept-charset="UTF-8" target="hidden_iframe">
  <!-- hidden 入力項目 -->
  <input type="hidden" name="pageHistory" value="0,1">
  <input type="hidden" name="emailAddress" id="formEmail">
  <input type="hidden" name="entry.544985329" id="formEmployeeID">
  <input type="hidden" name="entry.915781798" id="formName">
  <input type="hidden" name="entry.1382545709" id="formMonth">
  <input type="hidden" name="entry.427078622" id="formHalf">

  <!-- シフト入力用 hidden フォーム（動的生成） -->
  <div id="shiftFormInputs"></div>

  <div class="confirm-card">
    <label for="comment" class="confirmation-form-label">ワースケ担当者へのコメント（自由記入欄）：</label>
    <textarea id="comment" name="entry.55711502" rows="3" class="confirmation-textarea"></textarea>
  </div>
  <div class="confirm-card">
    <label for="希望労働時間" class="confirmation-form-label">半月の希望労働時間：</label>
    <input type="text" id="希望労働時間" name="entry.327593651" class="confirmation-input">
  </div>
  <div class="confirmation-buttons">
    <button type="submit" class="submit-btn">シフトを提出する</button>
    <button type="button" class="back-btn" onclick="goBackToCalendar()">戻る</button>
  </div>
</form>

<!-- 画面には表示されない hidden iframe を追加 -->
<iframe name="hidden_iframe" id="hidden_iframe" style="display:none;"></iframe>
    </form>
  </div>

  <!-- ユーザー情報入力モーダル -->
  <div id="userModal" class="modal">
    <div class="modal-content">
      <h2>ユーザー情報を入力してください</h2>
      <label for="email">メールアドレス：</label>
      <input type="email" id="email" required autocomplete="email">
      <div id="emailError" class="error"></div>
      <label for="employeeID">従業員番号：</label>
      <input type="text" id="employeeID" required autocomplete="on">
      <div id="employeeIDError" class="error"></div>
      <label for="name">名前：</label>
      <input type="text" id="name" required autocomplete="name">
      <div id="nameError" class="error"></div>
      <label for="month">提出月：</label>
      <select id="month" required>
        <option value="1月">1月</option>
        <option value="2月">2月</option>
        <option value="3月">3月</option>
        <option value="4月">4月</option>
        <option value="5月">5月</option>
        <option value="6月">6月</option>
        <option value="7月">7月</option>
        <option value="8月">8月</option>
        <option value="9月">9月</option>
        <option value="10月">10月</option>
        <option value="11月">11月</option>
        <option value="12月">12月</option>
      </select>
      <!-- 半月選択は自動（下記スクリプトで自動設定） -->
      <div class="radio-group">
        <label>
          <input type="radio" name="half" value="前半（1日～15日）を提出する">
          <span>前半</span>
        </label>
        <label>
          <input type="radio" name="half" value="後半（16日～31日）を提出する">
          <span>後半</span>
        </label>
      </div>
      <button onclick="submitUserInfo()">送信</button>
    </div>
  </div>

  <!-- シフト追加モーダル -->
  <div id="shiftModal" class="modal">
    <div class="modal-content">
      <h2>シフト時間を選んでください</h2>
      <div id="predefined-times">
        <button type="button" class="time-button" data-in="06:00" data-up="09:00">
          <img src="morning_icon.png" alt="朝"> 6-9時
        </button>
        <button type="button" class="time-button" data-in="17:00" data-up="23:00">
          <img src="night_icon.png" alt="夜"> 17-23時
        </button>
        <button type="button" class="time-button" data-in="18:00" data-up="23:00">
          <img src="night_icon.png" alt="夜"> 18-23時
        </button>
      </div>
      <div id="shiftTimeInputs">
        <!-- シフト時間選択用入力（動的生成） -->
      </div>
      <div style="text-align: center; margin-top: 20px;">
        <button onclick="addShift()">シフト追加</button>
        <button onclick="closeShiftModal()">キャンセル</button>
      </div>
    </div>
  </div>

  <script src="script.js"></script>
  <footer>
    <div class="footer-container">
      <div class="footer-logo">
        <img src="logo.png" alt="Easy Shift Logo">
      </div>
      <div class="footer-info">
        <p class="copyright">© 2025 Designed by Rei Ito.</p>
        <p class="icons-credit">Icons by <a href="https://icons8.com/" target="_blank" rel="noopener">Icons8</a></p>
      </div>
    </div>
  </footer>
</body>
</html>
