<!DOCTYPE html>
<html lang="zh-TW">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>國立臺北商業大學 體育器材借還系統</title>
  <link rel="stylesheet" href="css/content.css">
  <link rel="icon" type="image/gif" href="https://i.imgur.com/gTvafyQ.gif">
  <link href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css" rel="stylesheet">
  <script src="https://www.gstatic.com/firebasejs/9.22.2/firebase-app-compat.js"></script>
  <script src="https://www.gstatic.com/firebasejs/9.22.2/firebase-database-compat.js"></script>
  <script src="https://www.gstatic.com/firebasejs/9.22.2/firebase-auth-compat.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
  <style>
    #loanCode {
      text-transform: uppercase;
    }
    .swal2-popup {
      font-size: 1.6rem !important;
    }
    .quantity-select {
      display: none;
      margin-left: 20px;
    }
  </style>
</head>
<body>
  <header>
    <img src="https://i.imgur.com/gTvafyQ.gif" alt="NTUB Logo">
    <h1>個人器材借用登記</h1>
  </header>
  
  <div class="description">
    <p><strong>體育室個人器材借用時間</strong></p>
    <p>週一8:00-18:00<br>
      (個人借用器材登記到17:15止並於17:40前歸還)</p>
    <p>週二至週五8:00-21:50<br>
      (個人借用器材登記到21:15止並於21:40前歸還)</p>
    <p>12:00-13:30 及18:00-21:50 請直接至體育室後門器材室登記借用<br>
      其餘時間請至前門辦公室找行政老師登記借用</p>
  </div>

  <div class="container">
    <form id="equipmentForm">
      <label>借閱狀態</label>
      <div class="radio-group">
        <label><input type="radio" name="status" value="借" required> 借</label>
        <label><input type="radio" name="status" value="還"> 還</label>
      </div>
      <div id="borrowFields" style="display: none;">
        <label for="education">學制</label>
        <select id="education" name="education">
          <option value="">請選擇</option>
          <option value="研究所">研究所</option>
          <option value="日間五專">日間五專</option>
          <option value="四間四技">日間四技</option>
          <option value="日間二技">日間二技</option>
          <option value="進修四技">進修四技</option>
          <option value="進修二技">進修二技</option>
          <option value="空院">空院</option>
        </select>

        <label for="department">科系</label>
        <select id="department" name="department">
          <option value="">請選擇</option>
          <option value="會計資訊">會計資訊</option>
          <option value="財務金融">財務金融</option>
          <option value="財政稅務">財政稅務</option>
          <option value="國際貿易/商務">國際貿易/商務</option>
          <option value="企業管理">企業管理</option>
          <option value="資訊管理">資訊管理</option>
          <option value="應用外語">應用外語</option>
          <option value="創新設計與經營管理">創新設計與經營管理</option>
          <option value="商業設計管理">商業設計管理</option>
          <option value="數位多媒體設計">數位多媒體設計</option>
          <option value="貿易實務法律暨談判碩士">貿易實務法律暨談判碩士</option>
          <option value="資研所">資研所</option>
          <option value="應用商學">應用商學</option>
        </select>

        <label for="name">姓名</label>
        <input type="text" id="name" name="name" placeholder="請輸入姓名" required>

        <label for="studentId">學號</label>
        <input type="text" id="studentId" name="studentId" placeholder="請輸入學號" required>

        <label for="phone">電話</label>
        <input type="tel" id="phone" name="phone" placeholder="請輸入電話" required>

        <label>選擇借閱的器材</label>
        <div class="checkbox-group" id="equipmentGroup">
          <div class="equipment-item">
            <label><input type="checkbox" name="equipment" value="籃球"> 籃球</label>
            <select name="basketballQty" class="quantity-select">
              <option value="">請選擇數量</option>
              <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>
            </select>
          </div>
          <div class="equipment-item">
            <label><input type="checkbox" name="equipment" value="排球"> 排球</label>
            <select name="volleyballQty" class="quantity-select">
              <option value="">請選擇數量</option>
              <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>
            </select>
          </div>
          <div class="equipment-item">
            <label><input type="checkbox" name="equipment" value="羽球拍"> 羽球拍</label>
            <select name="badmintonRacketQty" class="quantity-select">
              <option value="">請選擇數量</option>
              <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>
            </select>
          </div>
          <div class="equipment-item">
            <label><input type="checkbox" name="equipment" value="桌球拍"> 桌球拍</label>
            <select name="tableTennisRacketQty" class="quantity-select">
              <option value="">請選擇數量</option>
              <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>
            </select>
          </div>
          <div class="equipment-item">
            <label><input type="checkbox" name="equipment" value="網球拍"> 網球拍</label>
            <select name="tennisRacketQty" class="quantity-select">
              <option value="">請選擇數量</option>
              <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>
            </select>
          </div>
          <div class="equipment-item">
            <label><input type="checkbox" name="equipment" value="羽球（顆）"> 羽球（顆）</label>
            <select name="badmintonQty" class="quantity-select">
              <option value="">請選擇數量</option>
              <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>
            </select>
          </div>
          <div class="equipment-item">
            <label><input type="checkbox" name="equipment" value="桌球（顆）"> 桌球（顆）</label>
            <select name="tableTennisQty" class="quantity-select">
              <option value="">請選擇數量</option>
              <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>
            </select>
          </div>
          <div class="equipment-item">
            <label><input type="checkbox" name="equipment" value="網球（顆）"> 網球（顆）</label>
            <select name="tennisQty" class="quantity-select">
              <option value="">請選擇數量</option>
              <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>
            </select>
          </div>
        </div>

        <label for="otherEquipment">其他器材</label>
        <input type="text" id="otherEquipment" name="otherEquipment" placeholder="EX: 籃球編號: 117、112 務必填寫!!" required>

        <label for="remarks">備註</label>
        <input type="text" id="remarks" name="remarks" placeholder="借的拍子及球超過5以上請填寫正確數量 EX:羽球拍8支/羽球5顆">
      </div>
      <div id="returnFields" style="display: none;">
        <label for="loanCode">借閱代碼</label>
        <input type="text" id="loanCode" name="loanCode" maxlength="4" pattern="^[A-HJ-Z]\d{3}$" placeholder="請輸入4位借閱代碼 (英文字母開頭，後三位數字)" oninput="this.value = this.value.toUpperCase()" required>
      </div>

      <button type="submit">登記</button>
    </form>
  </div>

  <footer>
    國立臺北商業大學 Copyright 2024 納啟科技
  </footer>
  <script src="java/perso.js"></script>
</body>
</html>
