survey/edit.html

<!DOCTYPE html>
<html lang="th">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>แก้ไขแบบสอบถาม - TPU Survey</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+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">
    <style>
        * { box-sizing: border-box; }
        body { 
            background-color: #f8fafc; 
            font-family: 'Noto Sans Thai', sans-serif; 
            margin: 0;
            padding: 0;
            overflow-x: hidden;
        }
        .editor-header {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            min-height: 64px;
            background: rgba(255, 255, 255, 0.98);
            backdrop-filter: blur(12px);
            border-bottom: 3px solid #fbbf24;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 8px 20px;
            z-index: 1000;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
            gap: 12px;
        }
        .editor-title {
            font-size: 1.1rem;
            font-weight: 800;
            color: #1e3a8a;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 450px;
        }
        .editor-container {
            max-width: 1000px;
            width: 100%;
            margin: 0 auto;
            padding: 84px 16px 120px;
        }
        .editor-actions {
            display: flex;
            align-items: center;
            gap: 8px;
            flex-shrink: 0;
        }
        .sticky-bottom-bar {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background: rgba(255, 255, 255, 0.98);
            backdrop-filter: blur(12px);
            border-top: 1px solid #e2e8f0;
            padding: 12px 20px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            z-index: 999;
            box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);
            gap: 12px;
        }
        .dirty-badge {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-size: 0.8rem;
            color: #d97706;
            font-weight: 600;
        }
        @media (max-width: 768px) {
            .editor-header {
                padding: 8px 12px;
            }
            .editor-title {
                max-width: 160px;
                font-size: 0.95rem;
            }
            .editor-container {
                padding: 76px 10px 140px;
            }
            .editor-actions .btn-preview-text {
                display: none;
            }
            .sticky-bottom-bar {
                flex-direction: column;
                gap: 8px;
                padding: 10px 14px;
            }
            .sticky-bottom-bar .bottom-actions {
                width: 100%;
                display: flex;
                gap: 8px;
            }
            .sticky-bottom-bar .bottom-actions button {
                flex: 1;
            }
        }
    </style>
</head>
<body>
    <!-- Top Header -->
    <header class="editor-header">
        <div class="flex items-center gap-3 overflow-hidden">
            <button class="btn btn-ghost btn-sm text-slate-600 hover:text-slate-900" onclick="closeEditor()" title="ปิดหน้าแก้ไข">
                <i class="fas fa-times"></i> <span class="hidden sm:inline">ปิด</span>
            </button>
            <div class="editor-title" id="surveyTitleDisplay">กำลังโหลด...</div>
        </div>
        <div class="editor-actions">
            <button class="btn btn-ghost btn-sm text-blue-600 hover:bg-blue-50 font-bold border border-blue-200" onclick="previewSurvey()">
                👁️ <span class="btn-preview-text">พรีวิว</span>
            </button>
            <button id="saveSurveyBtnTop" class="btn btn-primary btn-sm font-bold shadow-md bg-blue-600 hover:bg-blue-700 text-white" onclick="saveSurvey()">
                💾 บันทึกการแก้ไข
            </button>
        </div>
    </header>

    <!-- Main Content -->
    <main class="editor-container">
        <div id="editorContent">
            <div class="loading" style="padding: 100px 0; text-align:center;">
                <div class="spinner"></div>
                <p class="text-slate-500 mt-4 font-bold">กำลังโหลดข้อมูลแบบสอบถาม...</p>
            </div>
        </div>
        
        <div class="text-center mt-32 mb-40">
            <button class="btn btn-secondary font-bold px-6 py-3 shadow-sm hover:shadow" onclick="addSection()">
                ➕ เพิ่มส่วนแบบสอบถามใหม่
            </button>
        </div>
    </main>

    <!-- Sticky Bottom Bar -->
    <div class="sticky-bottom-bar">
        <div class="flex items-center gap-4">
            <span id="saveStatusIndicator" class="dirty-badge" style="display:none;">
                <span class="w-2.5 h-2.5 rounded-full bg-amber-500 animate-pulse"></span>
                มีการแก้ไขที่ยังไม่ได้บันทึก (กด Ctrl+S เพื่อบันทึก)
            </span>
        </div>
        <div class="bottom-actions flex items-center gap-3">
            <button class="btn btn-secondary font-bold text-sm px-4 py-2" onclick="previewSurvey()">
                👁️ พรีวิวแบบสอบถาม
            </button>
            <button id="saveSurveyBtnBottom" class="btn btn-primary font-bold text-sm px-6 py-2.5 shadow-lg bg-blue-600 hover:bg-blue-700 text-white" onclick="saveSurvey()">
                💾 บันทึกการเปลี่ยนแปลง
            </button>
        </div>
    </div>

    <script src="js/app.js?v=9"></script>
    <script src="js/editor.js?v=9"></script>
</body>
</html>