survey/teacher.html

<!DOCTYPE html>
<html lang="th">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TPU Survey - อาจารย์/เจ้าของโครงการ</title>
    <meta name="description"
        content="หน้าจัดการแบบสอบถามสำหรับอาจารย์และเจ้าของโครงการ คณะนวัตกรรมดิจิทัลเทคโนโลยี มหาวิทยาลัยตาปี">
    <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+Thai:wght@300;400;500;600;700;800;900&display=swap"
        rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    fontFamily: {
                        'thai': ['"Noto Sans Thai"', 'sans-serif']
                    },
                    colors: {
                        'primary': { 50: '#eff6ff', 100: '#dbeafe', 200: '#bfdbfe', 300: '#93c5fd', 400: '#60a5fa', 500: '#3b82f6', 600: '#2563eb', 700: '#1d4ed8', 800: '#1e40af', 900: '#1e3a8a' },
                        'accent': { 50: '#fffbeb', 100: '#fef3c7', 200: '#fde68a', 300: '#fcd34d', 400: '#fbbf24', 500: '#f59e0b', 600: '#d97706', 700: '#b45309', 800: '#92400e', 900: '#78350f' }
                    }
                }
            }
        }
    </script>
    <link rel="stylesheet" href="css/style.css?v=9">
</head>

<body class="font-thai">
    <div class="dashboard">
        <div class="sidebar-overlay" onclick="toggleSidebar()"></div>

        <aside class="sidebar">
            <div class="sidebar-header">
                <img src="pic/logo.png" alt="TPU Logo" class="sidebar-logo-img">
                <div>

                    <span class="text-white font-bold text-sm leading-tight">มหาวิทยาลัยตาปี</span>
                </div>
            </div>

            <nav class="sidebar-nav">
                <div class="nav-section-label">เมนูหลัก</div>
                <div class="nav-item active" data-view="mySurveys" onclick="showTeacherView('mySurveys')">
                    <span class="nav-icon">📝</span>
                    <span>แบบสอบถามของฉัน</span>
                </div>
                <div class="nav-item" data-view="profile" onclick="showTeacherView('profile')">
                    <span class="nav-icon">👤</span>
                    <span>ข้อมูลส่วนตัว</span>
                </div>

            </nav>

            <div class="sidebar-footer">
                <div class="user-info">
                    <div class="user-avatar" id="userAvatar">T</div>
                    <div class="user-detail">
                        <h4 id="userName">อาจารย์</h4>
                        <span id="userRole">เจ้าของโครงการ</span>
                    </div>
                </div>
                <button class="btn btn-ghost btn-sm btn-block mt-8" onclick="Auth.logout()">🚪 ออกจากระบบ</button>
            </div>
        </aside>

        <main class="main-content">
            <header class="main-header">
                <div class="d-flex items-center gap-16">
                    <button class="menu-toggle" onclick="toggleSidebar()">☰</button>
                    <h1 id="pageTitle">แบบสอบถามของฉัน</h1>
                </div>
                <div class="header-actions">
                </div>
            </header>

            <div class="main-body">

                <!-- My Surveys -->
                <div id="view-mySurveys" class="view-section space-y-4">
                    <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-4">
                        <div>
                            <h2 class="text-xl font-bold text-blue-900"><i
                                    class="fas fa-tasks mr-2 text-yellow-500"></i>แบบสอบถามของฉัน</h2>
                            <p class="text-xs text-gray-500 font-medium">จัดการและตรวจสอบแบบสอบถามประเมินผลโครงการในระบบ
                            </p>
                        </div>
                        <div class="flex flex-wrap gap-2">
                            <button
                                class="btn-yellow px-4 py-2 rounded text-xs font-bold shadow-sm flex items-center gap-1.5 transition-all"
                                onclick="showTeacherCreateModal()">
                                <i class="fas fa-plus"></i> สร้างแบบสอบถาม
                            </button>
                            <button
                                class="bg-green-600 hover:bg-green-700 text-white border border-black px-4 py-2 rounded text-xs font-bold shadow-sm flex items-center gap-1.5 transition-all"
                                onclick="showImportGoogleFormModal()">
                                <i class="fas fa-file-import"></i> นำเข้าจาก Google Forms
                            </button>
                            <button
                                class="bg-red-600 hover:bg-red-700 text-white border border-black px-4 py-2 rounded text-xs font-bold shadow-sm flex items-center gap-1.5 transition-all"
                                onclick="showImportPdfModal()">
                                <i class="fas fa-file-pdf"></i> นำเข้าจาก PDF
                            </button>
                        </div>
                    </div>

                    <!-- Survey List Container (activity.tapee.ac.th style) -->
                    <div id="teacherSurveysList" class="space-y-3">
                        <div class="card-tapi p-8 text-center bg-white text-gray-500 font-bold">
                            <i class="fas fa-spinner fa-spin mr-2 text-blue-600"></i> กำลังโหลดข้อมูล...
                        </div>
                    </div>
                </div>

                <!-- Profile View -->
                <div id="view-profile" class="view-section hidden">
                    <div class="section-header-bar" style="margin-bottom:24px;">
                        <div class="section-header-left">
                            <h2>👤 ข้อมูลส่วนตัว</h2>
                        </div>
                    </div>

                    <div class="profile-layout-grid" style="align-items:start;">
                        <!-- Profile Card -->
                        <div class="card" style="text-align:center;">
                            <div class="card-body" style="padding:32px 24px;">
                                <div id="profileAvatar"
                                    style="width:80px;height:80px;border-radius:50%;background:linear-gradient(135deg,#e8a838,#f0c040);color:#fff;font-size:36px;font-weight:700;display:flex;align-items:center;justify-content:center;margin:0 auto 16px;">
                                    T</div>
                                <h3 id="profileDisplayName" style="margin-bottom:4px;">—</h3>
                                <span class="text-muted text-sm" id="profileDisplayRole">อาจารย์</span>
                                <div style="margin-top:12px;">
                                    <span class="user-card-badge teacher" id="profileBadge">🎓 อาจารย์</span>
                                </div>
                                <hr style="border-color:var(--border-color);margin:20px 0;">
                                <div class="text-sm text-muted">🆔 รหัสบุคลากร</div>
                                <div style="font-size:18px;font-weight:600;margin-top:4px;" id="profilePersonnelCode">—
                                </div>
                            </div>
                        </div>

                        <!-- Edit Form -->
                        <div class="card">
                            <div class="card-header">
                                <h3>✏️ แก้ไขข้อมูลส่วนตัว</h3>
                            </div>
                            <div class="card-body">
                                <form id="profileForm">
                                    <div class="form-group">
                                        <label class="form-label">รหัสบุคลากร</label>
                                        <input type="text" class="form-input" id="profileCode" disabled
                                            style="background:var(--bg-secondary);cursor:not-allowed;opacity:0.7;">
                                        <small class="text-muted" style="display:block;margin-top:4px;">🔒
                                            ไม่สามารถแก้ไขได้ — ติดต่อผู้ดูแลระบบ</small>
                                    </div>
                                    <div class="form-group">
                                        <label class="form-label">ชื่อ-นามสกุล *</label>
                                        <input type="text" class="form-input" id="profileName" required
                                            placeholder="ชื่อ-นามสกุล">
                                    </div>
                                    <div class="form-group">
                                        <label class="form-label">อีเมล</label>
                                        <input type="email" class="form-input" id="profileEmail"
                                            placeholder="เช่น somchai@example.com">
                                    </div>
                                    <div class="form-group">
                                        <label class="form-label">สังกัด / สาขาวิชา</label>
                                        <input type="text" class="form-input" id="profileSubject"
                                            placeholder="เช่น สาขาวิทยาการคอมพิวเตอร์">
                                    </div>
                                    <div class="form-group">
                                        <label class="form-label">รหัสสาขา</label>
                                        <input type="text" class="form-input" id="profileBranch"
                                            placeholder="เช่น CS01">
                                    </div>
                                    <hr style="border-color:var(--border-color);margin:24px 0;">
                                    <h4 style="margin-bottom:16px;">🔑 เปลี่ยนรหัสผ่าน</h4>
                                    <div class="form-group">
                                        <label class="form-label">รหัสผ่านใหม่ (เว้นว่างถ้าไม่เปลี่ยน)</label>
                                        <input type="password" class="form-input" id="profilePassword"
                                            placeholder="รหัสผ่านใหม่ (อย่างน้อย 4 ตัวอักษร)">
                                    </div>
                                    <div class="form-group">
                                        <label class="form-label">ยืนยันรหัสผ่านใหม่</label>
                                        <input type="password" class="form-input" id="profilePasswordConfirm"
                                            placeholder="พิมพ์รหัสผ่านใหม่อีกครั้ง">
                                    </div>
                                    <div style="display:flex;gap:12px;justify-content:flex-end;margin-top:24px;">
                                        <button type="button" class="btn btn-secondary" onclick="loadProfile()">🔄
                                            รีเซ็ต</button>
                                        <button type="button" class="btn btn-primary" onclick="saveProfile()">💾
                                            บันทึกข้อมูล</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>



            </div>
        </main>
    </div>

    <script src="js/qrcode.min.js"></script>
    <script src="js/app.js?v=9"></script>
    <script src="js/pdf_importer.js?v=1"></script>
    <script src="js/teacher.js?v=9"></script>
</body>

</html>