<!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://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
  <style>
    #borrowCode { text-transform: uppercase; }
    .swal2-popup { font-size: 1.6rem !important; }
  </style>
  <script>
    const firebaseConfig = {
      apiKey: "AIzaSyCgs6j97oCJerFvnZ1penbVIMhxzSMIEao",
      authDomain: "ntubpeo.firebaseapp.com",
      databaseURL: "https://ntubpeo-default-rtdb.firebaseio.com",
      projectId: "ntubpeo",
      storageBucket: "ntubpeo.firebasestorage.app",
      messagingSenderId: "106907057442",
      appId: "1:106907057442:web:35e0193bdc2a3747faf97b",
      measurementId: "G-CKE0E1XM9L"
    };
    firebase.initializeApp(firebaseConfig);
  </script>
</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</p>
    <p>週二至週五8:00-21:50</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="請輸入姓名">
        <label for="studentId">學號</label>
        <input type="text" id="studentId" name="studentId" placeholder="請輸入學號">
        <label for="phone">電話</label>
        <input type="tel" id="phone" name="phone" placeholder="請輸入電話" pattern="\d{10}" maxlength="10" title="請輸入10位數字">
        <label>器材</label>
        <select id="equipment" name="equipment">
          <option value="">請選擇器材</option>
          <option value="6號籃球-1">6號籃球-1 (一籃16顆)</option>
          <option value="6號籃球-2">6號籃球-2 (一籃16顆)</option>
          <option value="7號籃球-1">7號籃球-1 (一籃16顆)</option>
          <option value="7號籃球-2">7號籃球-2 (一籃16顆)</option>
          <option value="排球-1">排球-1 (一籃27顆)</option>
          <option value="排球-2">排球-2 (一籃27顆)</option>
          <option value="羽球拍">羽球拍 (一籃60支)</option>
          <option value="興趣選項羽球拍">興趣選項羽球拍 (一籃52支)</option>
          <option value="桌球">桌球 (一籃60把)</option>
          <option value="網球">網球 (一籃60支)</option>
          <option value="匹克球">匹克球 (一籃60支)</option>
          <option value="其他">其他</option>
        </select>
        <label>確認器材數量是否正確？</label>
        <div class="radio-group">
          <label><input type="radio" name="equipmentConfirm" value="正確"> 正確</label>
          <label><input type="radio" name="equipmentConfirm" value="器材有少請立即告知老師"> 器材有少請立即告知老師</label>
        </div>
        <label for="otherEquipment">其他器材</label>
        <input type="text" id="otherEquipment" name="otherEquipment" placeholder="EX: 籃球編號: 117、112 務必填寫!!">
      </div>
      <div id="returnFields" style="display: none;">
        <label for="borrowCode">請輸入借閱代碼</label>
        <input type="text" id="borrowCode" name="borrowCode" maxlength="4" pattern="^[A-HJ-Z]\d{3}$" placeholder="請輸入4位借閱代碼 (英文字母開頭，後三位數字)" oninput="this.value = this.value.toUpperCase()" required>
      </div>
      <div id="uploadSection" style="display: none;">
        <label for="equipmentPhoto">上傳器材放好的照片 (必填)</label>
        <input type="file" id="equipmentPhoto" name="equipmentPhoto" accept="image/*" required>
        <p>請明確拍到器材數量</p>
      </div>
      <button type="submit">登記</button>
    </form>
  </div>
  <footer>
    國立臺北商業大學 Copyright 2024 納啟科技
  </footer>
  <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
  <script src="java/gro.js"></script>
</body>
</html>
