File Manager

✏️ Edit File: /home/u625410797/domains/thaiyouth.org/public_html/js/app_v2.js

const API_BASE = window.location.origin + '/api';
const API_AUTH = `${API_BASE}/auth.php`;
const API_DATA = `${API_BASE}/data.php`;

console.log('🚀 Thai Youth System Initialized');
console.log('📡 API Base:', API_BASE);

// ==========================================
// STATE MANAGEMENT
// ==========================================
let state = {
    user: null,
    token: localStorage.getItem('token') || null,
    currentRoute: window.location.pathname,
    menus: [],
    settings: {},
    lang: localStorage.getItem('lang') || 'th',
    translations: {
        th: {
            home: 'หน้าแรก', about: 'เกี่ยวกับเรา', programs: 'โครงการ', news: 'ข่าวสาร', gallery: 'แกลเลอรี', volunteer: 'อาสาสมัคร', contact: 'ติดต่อเรา', donate: 'ร่วมบริจาค', login: 'เข้าสู่ระบบ',
            hero_title: 'สร้างอนาคตที่ยั่งยืน ผ่านพลังของเยาวชนไทย', hero_sub: 'ร่วมกันสนับสนุนและพัฒนาศักยภาพเยาวชนไทย เพื่อสังคมที่น่าอยู่และยั่งยืนสำหรับทุกคน',
            featured_progs: 'โครงการเด่น', view_all: 'ดูทั้งหมด', funding_gap: 'ช่องว่างแห่งความหวัง', donate_now: 'บริจาคเดี๋ยวนี้',
            read_more: 'อ่านเพิ่มเติม', contact_us: 'ติดต่อเรา', foot_about: 'เราเชื่อว่าเยาวชนคือพลังสำคัญที่จะเปลี่ยนแปลงสังคมให้ดีขึ้น',
            raised: 'ระดมทุนได้แล้ว', goal: 'เป้าหมาย'
        },
        en: {
            home: 'Home', about: 'About', programs: 'Programs', news: 'News', gallery: 'Gallery', volunteer: 'Volunteer', contact: 'Contact', donate: 'Donate', login: 'Login',
            hero_title: 'Connecting Hearts, Building Futures', hero_sub: 'Empowering Thai youth to lead and innovate for a better tomorrow.',
            featured_progs: 'Featured Programs', view_all: 'View All', funding_gap: 'Funding Gap', donate_now: 'Donate Now',
            read_more: 'Read More', contact_us: 'Contact Us', foot_about: 'We believe youth are the key power to change society for the better.',
            raised: 'Raised', goal: 'Goal'
        }
    }
};

// ==========================================
// INITIALIZATION
// ==========================================
document.addEventListener('DOMContentLoaded', async () => {
    initUI();
    
    // Core Initial Data
    await Promise.all([
        fetchSettings(),
        fetchMenus(),
        state.token ? fetchUser() : Promise.resolve()
    ]);

handleRoute();
    window.addEventListener('popstate', handleRoute);
    
    // Initialize Lang UI
    updateLangUI();
    updateStaticLabels();
    
    // Global Event Delegation for Links
    document.body.addEventListener('click', e => {
        const link = e.target.closest('a');
        if (link && link.href.startsWith(window.location.origin) && !link.hasAttribute('target') && !link.classList.contains('no-route')) {
            e.preventDefault();
            navigateTo(new URL(link.href).pathname);
        }
    });
});

// ==========================================
// ROUTER (Improved for Dynamic Slugs)
// ==========================================
const routes = {
    '/': renderHome,
    '/about': renderAbout,
    '/programs': renderPrograms,
    '/news': renderNews,
    '/gallery': renderGallery,
    '/volunteer': renderVolunteer,
    '/contact': renderContact,
    '/donate': renderDonate,
    '/login': () => { openModal('login'); navigateTo('/'); }
};

function navigateTo(path) {
    if (state.currentRoute === path) return;
    window.history.pushState({}, '', path);
    state.currentRoute = path;
    handleRoute();
}

async function handleRoute() {
    const app = document.getElementById('app');
    const path = state.currentRoute;
    
    // 1. Update Active Navigation
    document.querySelectorAll('#nav-list a').forEach(a => {
        const href = a.getAttribute('href');
        if (href === path || (path.startsWith(href) && href !== '/')) a.classList.add('active');
        else a.classList.remove('active');
    });

// 2. Loading State with Animation
    app.innerHTML = `
        <div class="loading-screen" style="animation: fadeIn 0.3s ease-out">
            <div class="spinner"></div>
        </div>
    `;
    
    try {
        // 3. Dynamic Route Matching
        let renderFunc = routes[path];
        
        // Handle Program Details /programs/:slug
        if (!renderFunc && path.startsWith('/programs/')) {
            const slug = path.split('/')[2];
            renderFunc = (app) => renderProgramDetail(app, slug);
        }

// Handle News Details /news/:slug
        if (!renderFunc && path.startsWith('/news/')) {
            const slug = path.split('/')[2];
            renderFunc = (app) => renderNewsDetail(app, slug);
        }
        
        // Handle CMS Pages (Custom Slugs)
        if (!renderFunc) {
            const cmsPage = await fetchCMSPage(path.substring(1));
            if (cmsPage) {
                renderFunc = (app) => renderCMSPage(app, cmsPage);
            }
        }

if (renderFunc) {
            window.scrollTo({ top: 0, behavior: 'smooth' });
            await renderFunc(app);
            initAnimations(); // Apply entrance animations
        } else {
            renderNotFound(app);
        }
    } catch (err) {
        console.error('Route error:', err);
        app.innerHTML = `
            <div class="container section text-center">
                <div class="card card-body" style="border-top: 4px solid var(--red);">
                    <h2 class="text-primary">เกิดข้อผิดพลาด</h2>
                    <p>${err.message}</p>
                    <button class="btn btn-primary mt-3" onclick="location.reload()">โหลดใหม่</button>
                </div>
            </div>`;
    }
}

// ==========================================
// DATA FETCHERS
// ==========================================
async function fetchSettings() {
    try {
        const url = `${API_DATA}?endpoint=settings`;
        console.log('📡 Fetching Settings:', url);
        const res = await fetch(url);
        if (!res.ok) throw new Error(`HTTP ${res.status} at ${url}`);
        const data = await res.json();
        if (data.success) {
            Object.entries(data.data).forEach(([key, value]) => state.settings[key] = value);
            updateGlobalUI();
        } else {
            console.warn('Settings success=false:', data.message);
        }
    } catch (err) { 
        console.error('Settings fetch failed:', err); 
        // Fallback to default name if settings fail
        document.title = 'Thai Youth Foundation';
    }
}

async function fetchMenus() {
    try {
        const url = `${API_DATA}?endpoint=menus`;
        console.log('📡 Fetching Menus:', url);
        const res = await fetch(url);
        if (!res.ok) throw new Error(`HTTP ${res.status} at ${url}`);
        const data = await res.json();
        if (data.success) {
            state.menus = data.data;
            renderNav();
            updateStaticLabels(); 
        }
    } catch (err) { 
        console.error('Menus fetch failed:', err); 
    }
}

function toggleLang(l) {
    state.lang = l;
    localStorage.setItem('lang', l);
    updateLangUI();
    renderNav();
    updateStaticLabels();
    handleRoute(); // Re-render current page
}

function updateLangUI() {
    document.querySelectorAll('.lang-switch button').forEach(btn => btn.classList.remove('active'));
    const activeBtn = document.getElementById(`lang-${state.lang}`);
    if(activeBtn) activeBtn.classList.add('active');
}

function t(key) {
    return state.translations[state.lang][key] || key;
}

function updateStaticLabels() {
    // Footer & Common Labels
    document.querySelectorAll('[data-t]').forEach(el => {
        const key = el.dataset.t;
        el.textContent = t(key);
    });
    
    const donateBtn = document.getElementById('donate-btn');
    if(donateBtn) donateBtn.textContent = (state.lang === 'th' ? '❤️ บริจาค' : '❤️ Donate');
}

async function fetchCMSPage(slug) {
    if (!slug) return null;
    try {
        const res = await fetch(`${API_DATA}?endpoint=pages&slug=${slug}`);
        const data = await res.json();
        return data.success ? data.data : null;
    } catch { return null; }
}

// ==========================================
// PAGE RENDERERS
// ==========================================

async function renderHome(app) {
    app.innerHTML = `
        <section class="hero reveal">
            <div class="container">
                <div class="hero-content">
                    <div class="hero-badge animate-float">✨ ${state.settings.site_name || 'Thai Youth Foundation'}</div>
                    <h1 class="animate-up">${state.lang === 'th' ? (state.settings.hero_title || t('hero_title')) : (state.settings.hero_title_en || t('hero_title'))}</h1>
                    <p class="animate-up" style="animation-delay:0.1s">${state.lang === 'th' ? (state.settings.hero_subtitle || t('hero_sub')) : (state.settings.hero_subtitle_en || t('hero_sub'))}</p>
                    <div class="hero-actions animate-up" style="animation-delay:0.2s">
                        <a href="/donate" class="btn btn-accent" style="padding: 14px 32px; font-size: 1.1rem;">❤️ ${t('donate')}</a>
                        <a href="/about" class="btn btn-outline" style="color:#fff; border-color:rgba(255,255,255,0.6); padding: 14px 32px; font-size: 1.1rem; background: rgba(255,255,255,0.05);">${t('read_more')}</a>
                    </div>
                </div>
            </div>
        </section>

<section class="section">
            <div class="container">
                <div class="news-portal-grid">
                    <div class="news-main">
                        <h3 class="sidebar-title">🌟 โครงการเด่น (Featured Projects)</h3>
                        <div id="featured-programs" class="grid-2">
                            ${Array(2).fill('<div class="skeleton" style="height:350px"></div>').join('')}
                        </div>
                        
                        <h3 class="sidebar-title mt-5">📰 ข่าวสารล่าสุด (Latest Updates)</h3>
                        <div id="home-latest-news" class="grid-2">
                            ${Array(4).fill('<div class="skeleton" style="height:150px"></div>').join('')}
                        </div>
                    </div>
                    
                    <aside class="news-sidebar">
                        <h3 class="sidebar-title">🔥 ยอดนิยม (Most Read)</h3>
                        <div id="home-trending-news"></div>
                        
                        <div class="card mt-4 funding-card">
                            <h4>${t('funding_gap')}</h4>
                            <div id="home-funding-gap"></div>
                            <a href="/donate" class="btn btn-donate btn-full mt-3">${t('donate_now')}</a>
                        </div>

<div class="card mt-4" style="background:var(--primary); color:#fff; padding:24px; border-radius:var(--radius-lg);">
                            <h4>ร่วมเป็นอาสาสมัคร</h4>
                            <p style="font-size:0.85rem; opacity:0.8; margin:10px 0 20px;">ใช้ทักษะของคุณเพื่อเปลี่ยนแปลงชีวิตเยาวชนไทย</p>
                            <a href="/volunteer" class="btn btn-accent btn-full">สมัครเลย</a>
                        </div>
                    </aside>
                </div>
            </div>
        </section>
    `;

fetchHomeData();
}

async function fetchHomeData() {
    try {
        const uProg = `${API_DATA}?endpoint=programs&limit=2`;
        const uNews = `${API_DATA}?endpoint=news&limit=6`;
        const uFund = `${API_DATA}?endpoint=funding`;
        console.log('📡 Fetching Home Data:', { uProg, uNews, uFund });

const [progRes, newsRes, fundRes] = await Promise.all([
            fetch(uProg),
            fetch(uNews),
            fetch(uFund)
        ]);
        
        if (!progRes.ok || !newsRes.ok || !fundRes.ok) throw new Error('API request failed');

const progs = await progRes.json();
        const news = await newsRes.json();
        const funds = await fundRes.json();

if (progs.success) {
            document.getElementById('featured-programs').innerHTML = progs.data.map(p => `
                <div class="card reveal">
                    <div style="position:relative">
                        <img src="${p.featured_image || 'https://placehold.co/600x400'}" class="card-img" style="height:240px;">
                        <div class="card-tag" style="position:absolute; top:15px; right:15px;">${p.category || 'Project'}</div>
                    </div>
                    <div class="card-body">
                        <h3 class="card-title">${state.lang === 'th' ? p.title : (p.title_en || p.title)}</h3>
                        <p class="card-desc">${state.lang === 'th' ? (p.short_desc || '') : (p.short_desc_en || p.short_desc || '')}</p>
                        <a href="/programs/${p.slug}" class="btn btn-outline btn-sm">${t('read_more')}</a>
                    </div>
                </div>
            `).join('');
        }

if (news.success) {
            const latest = news.data.slice(0, 4);
            const trending = [...news.data].sort((a,b) => (b.views || 0) - (a.views || 0)).slice(0, 5);
            
            document.getElementById('home-latest-news').innerHTML = latest.map(n => `
                <div class="card reveal" style="display:flex; gap:15px; padding:12px;">
                    <img src="${n.featured_image}" style="width:100px; height:100px; object-fit:cover; border-radius:8px; flex-shrink:0;">
                    <div>
                        <small class="text-muted">${new Date(n.created_at).toLocaleDateString('th-TH')}</small>
                        <h4 style="font-size:0.95rem; margin-top:4px;">${state.lang === 'th' ? n.title : (n.title_en || n.title)}</h4>
                        <a href="/news/${n.slug}" class="text-primary" style="font-size:0.8rem; font-weight:600;">อ่านต่อ ></a>
                    </div>
                </div>
            `).join('');

document.getElementById('home-trending-news').innerHTML = trending.map(n => `
                <a href="/news/${n.slug}" class="trending-item reveal">
                    <img src="${n.featured_image}" class="trending-img">
                    <div class="trending-info">
                        <h4>${state.lang === 'th' ? n.title : (n.title_en || n.title)}</h4>
                        <div class="meta">👁️ ${n.views || 0} views</div>
                    </div>
                </a>
            `).join('');
        }

if (funds.success) {
            const goal = funds.data[0];
            if (goal) {
                const percent = Math.min(100, Math.round((goal.current_amount / goal.target_amount) * 100));
                document.getElementById('home-funding-gap').innerHTML = `
                    <div class="mt-2">
                        <h5 style="color:#fff; font-size:0.9rem;">${state.lang === 'th' ? goal.title : (goal.title_en || goal.title)}</h5>
                        <div class="progress-bar mt-2">
                            <div class="progress-fill" style="width: ${percent}%"></div>
                        </div>
                        <div class="flex-between mt-1" style="font-size:0.75rem; opacity:0.8; color:#fff;">
                            <span>${percent}%</span>
                            <span>฿${Number(goal.current_amount).toLocaleString()} / ฿${Number(goal.target_amount).toLocaleString()}</span>
                        </div>
                    </div>
                `;
            }
        }
        initAnimations();
    } catch (err) { console.error('Home data error:', err); }
}

async function fetchFeaturedPrograms() {
    const container = document.getElementById('featured-programs');
    if (!container) return;
    try {
        const res = await fetch(`${API_DATA}?endpoint=programs&limit=3`);
        if (!res.ok) throw new Error(`HTTP ${res.status}`);
        const data = await res.json();
        if (data.success) {
        container.innerHTML = data.data.map((p, i) => `
            <div class="card reveal" style="animation-delay:${i * 0.1}s">
                <div style="position:relative">
                    <img src="${p.featured_image || 'https://placehold.co/400x300?text=No+Image'}" class="card-img" alt="${p.title}">
                    <div class="card-tag" style="position:absolute; top:10px; right:10px;">${state.lang === 'th' ? (p.category || 'โครงการ') : (p.category_en || p.category || 'Project')}</div>
                </div>
                <div class="card-body">
                    <h3 class="card-title">${state.lang === 'th' ? p.title : (p.title_en || p.title)}</h3>
                    <p class="card-desc">${state.lang === 'th' ? (p.short_desc || '') : (p.short_desc_en || p.short_desc || '')}</p>
                    <a href="/programs/${p.slug}" class="btn btn-outline btn-sm">${t('read_more')}</a>
                </div>
            </div>
        `).join('');
        }
    } catch (err) {
        console.error('Featured Programs fetch failed:', err);
    }
}

async function fetchFundingData() {
    const container = document.getElementById('home-funding-gap');
    if (!container) return;
    try {
        const res = await fetch(`${API_DATA}?endpoint=funding`);
        if (!res.ok) throw new Error(`HTTP ${res.status}`);
        const data = await res.json();
        if (data.success && data.data.length > 0) {
            container.innerHTML = data.data.slice(0, 2).map(goal => {
                const percent = Math.min(100, Math.round((goal.current_amount / goal.target_amount) * 100));
                return `
                    <div class="funding-card mt-3 reveal">
                        <h4>${state.lang === 'th' ? escapeHtml(goal.title) : escapeHtml(goal.title_en || goal.title)}</h4>
                        <p>${state.lang === 'th' ? escapeHtml(goal.description) : escapeHtml(goal.description_en || goal.description)}</p>
                        <div class="progress-bar">
                            <div class="progress-fill" style="width: 0%" data-width="${percent}%"></div>
                        </div>
                        <div class="funding-amounts">
                            <span>${t('raised')}: <strong>฿${Number(goal.current_amount).toLocaleString()}</strong></span>
                            <span>${t('goal')}: <strong>฿${Number(goal.target_amount).toLocaleString()}</strong></span>
                        </div>
                    </div>
                `;
            }).join('');
            
            setTimeout(() => {
                container.querySelectorAll('.progress-fill').forEach(fill => {
                    fill.style.width = fill.dataset.width;
                });
            }, 500);
        }
    } catch(err) { console.error('Funding fetch error:', err); }
}

async function renderAbout(app) {
    app.innerHTML = `
        <div class="page-hero">
            <div class="container text-center">
                <h1 class="animate-up">${t('about')}</h1>
                <p class="animate-up" style="animation-delay:0.1s">${state.lang === 'th' ? 'มารู้จักกับมูลนิธิส่งเสริมเยาวชนไทย' : 'Get to know Thai Youth Foundation'}</p>
            </div>
        </div>
        <div class="container section">
            <div class="card card-body reveal">
                <h2 class="text-primary mb-4">${state.lang === 'th' ? 'ประวัติความเป็นมา' : 'Our History'}</h2>
                <p>${state.lang === 'th' ? 'มูลนิธิส่งเสริมเยาวชนไทยก่อตั้งขึ้นเมื่อปี พ.ศ. 2550...' : 'Thai Youth Foundation was founded in 2007...'}</p>
                <p class="mt-3">${state.lang === 'th' ? 'วิสัยทัศน์ของเราคือ "เยาวชนทุกคนต้องได้รับโอกาสที่เท่าเทียมในการพัฒนาตนเอง"' : 'Our vision is "Every youth must receive equal opportunity for self-development"'}</p>
            </div>
        </div>
    `;
}

async function renderPrograms(app) {
    app.innerHTML = `
        <div class="page-hero editorial-hero">
            <div class="container text-center">
                <div class="ticker-label mx-auto mb-3" style="display:inline-block">Impact</div>
                <h1 class="animate-up serif" style="font-size:3rem;">โครงการพัฒนาศักยภาพเยาวชน</h1>
                <p class="animate-up" style="animation-delay:0.1s; max-width:600px; margin:0 auto;">ร่วมสร้างโอกาสที่ยั่งยืนผ่านโครงการที่ครอบคลุมทุกด้านของความต้องการพื้นฐานและการศึกษา</p>
            </div>
        </div>
        <div class="container section">
            <div class="flex-between mb-4">
                <div class="category-tabs">
                    <button class="cat-tab active" onclick="filterPrograms('all')">ทั้งหมด</button>
                    <button class="cat-tab" onclick="filterPrograms('education')">การศึกษา</button>
                    <button class="cat-tab" onclick="filterPrograms('community')">ชุมชน</button>
                    <button class="cat-tab" onclick="filterPrograms('leadership')">ความเป็นผู้นำ</button>
                    <button class="cat-tab" onclick="filterPrograms('creative')">งานสร้างสรรค์</button>
                </div>

</div>
            <div id="programs-grid" class="grid-3">
                ${Array(6).fill('<div class="skeleton" style="height:350px"></div>').join('')}
            </div>
        </div>
    `;
    
    fetchProgramsData();
}

async function fetchProgramsData(category = 'all') {
    const grid = document.getElementById('programs-grid');
    if (!grid) return;

console.log(`[Fetch] Loading programs for category: ${category}...`);

try {
        // Add cache busting to ensure we get fresh data
        const t = new Date().getTime();
        const res = await fetch(`${API_DATA}?endpoint=programs&category=${category}&_t=${t}`, {
            cache: 'no-cache'
        });
        
        if (!res.ok) throw new Error(`Server returned ${res.status} ${res.statusText}`);
        
        const text = await res.text();
        let data;
        try {
            data = JSON.parse(text);
        } catch (e) {
            console.error('Invalid JSON response:', text);
            throw new Error('Server returned invalid data format');
        }
        
        if (data.success) {
            let items = data.data || [];
            if (items.length === 0) {
                grid.innerHTML = `
                    <div class="col-span-full text-center py-5">
                        <p class="text-muted">${state.lang === 'th' ? 'ไม่พบข้อมูลโครงการในหมวดหมู่นี้' : 'No programs found in this category'}</p>
                    </div>`;
                return;
            }
            grid.innerHTML = items.map(p => `
                <div class="card reveal editorial-card">
                    <div class="card-img-wrapper">
                        <img src="${p.featured_image || 'https://placehold.co/400x300?text=No+Image'}" class="card-img" alt="${p.title}" onerror="this.src='https://placehold.co/400x300?text=Image+Error'">
                        <div class="news-tag">${state.lang === 'th' ? (p.category || 'โครงการ') : (p.category_en || p.category || 'Project')}</div>
                    </div>
                    <div class="card-body">
                        <h3 class="card-title serif">${state.lang === 'th' ? p.title : (p.title_en || p.title)}</h3>
                        <p class="card-desc">${state.lang === 'th' ? (p.short_desc || '') : (p.short_desc_en || p.short_desc || '')}</p>
                        <div class="card-footer mt-auto">
                            <a href="/programs/${p.slug}" class="text-primary font-bold">${state.lang === 'th' ? 'อ่านรายละเอียด →' : 'View Details →'}</a>
                        </div>
                    </div>
                </div>
            `).join('');
            initAnimations();
        } else {
            throw new Error(data.message || data.debug || 'Data loading failed');
        }
    } catch (err) {
        console.error('Programs data error:', err);
        // Added alert to help user see error on live site
        if (!window.location.origin.includes('localhost')) {
            alert('Data Load Error: ' + err.message + '\nPlease check ' + API_BASE + '/debug_db.php');
        }
        grid.innerHTML = `
            <div class="col-span-full text-center py-5">
                <div class="card card-body" style="border-top:3px solid var(--red); max-width:500px; margin:0 auto;">
                    <h3 class="text-primary mb-3">⚠️ ขออภัย</h3>
                    <p class="text-muted">เกิดข้อผิดพลาดในการโหลดข้อมูลโครงการ</p>
                    <div class="p-2 mt-3 mb-3 bg-light rounded text-xs font-mono" style="font-size:0.8rem; background:rgba(0,0,0,0.05);">${err.message}</div>
                    <button class="btn btn-primary btn-sm mx-auto" onclick="fetchProgramsData('${category}')">ลองใหม่อีกครั้ง</button>
                </div>
            </div>`;
    }
}

window.filterPrograms = (cat) => {
    document.querySelectorAll('.cat-tab').forEach(t => t.classList.remove('active'));
    event.target.classList.add('active');
    fetchProgramsData(cat);
};

async function renderProgramDetail(app, slug) {
    const res = await fetch(`${API_DATA}?endpoint=programs&slug=${slug}`);
    const data = await res.json();
    if (!data.success) return renderNotFound(app);
    
    const p = data.data;
    app.innerHTML = `
        <div class="page-hero">
            <div class="container">
                <div class="breadcrumb">
                    <a href="/">${t('home')}</a> <span class="breadcrumb-sep">></span> 
                    <a href="/programs">${t('programs')}</a> <span class="breadcrumb-sep">></span> 
                    <span>${state.lang === 'th' ? p.title : (p.title_en || p.title)}</span>
                </div>
                <h1 class="animate-up">${state.lang === 'th' ? p.title : (p.title_en || p.title)}</h1>
            </div>
        </div>
        <div class="container section">
            <div class="grid-2">
                <div class="reveal">
                    <img src="${p.featured_image || 'https://placehold.co/800x600?text=No+Image'}" style="border-radius:16px; box-shadow:var(--shadow-lg);">
                </div>
                <div class="reveal" style="animation-delay:0.2s">
                    <div class="cms-content">
                        ${state.lang === 'th' ? (p.content || p.short_desc) : (p.content_en || p.short_desc_en || p.short_desc)}
                    </div>
                    <div class="mt-4 p-4" style="background:#EFF4FF; border-radius:12px;">
                        <h3 class="text-primary mb-2">${state.lang === 'th' ? 'สนใจร่วมสนับสนุน?' : 'Interested in Supporting?'}</h3>
                        <p class="mb-3">${state.lang === 'th' ? 'คุณสามารถร่วมเป็นส่วนหนึ่งของโครงการนี้ผ่านการบริจาคหรือสมัครเป็นอาสาสมัคร' : 'You can be part of this project through donation or volunteering.'}</p>
                        <div class="flex gap-2">
                            <a href="/donate" class="btn btn-donate">${t('donate')}</a>
                            <a href="/volunteer" class="btn btn-outline">${t('volunteer')}</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    `;
}

async function renderNews(app) {
    const title = state.settings.news_page_title || 'ข่าวสารและกิจกรรม';
    const sub = state.settings.news_page_subtitle || 'เกาะติดสถานการณ์และข่าวสารสำคัญเพื่อเยาวชนไทย';
    app.innerHTML = `
        <div class="page-hero">
            <div class="container">
                <h1 class="animate-up">${title}</h1>
                <p class="animate-up" style="animation-delay:0.1s">${sub}</p>
            </div>
        </div>
        <div class="container section">
            <div id="news-portal-loader" class="text-center">
                <div class="spinner" style="margin: 0 auto;"></div>
                <p class="mt-3">กำลังรวบรวมข่าวสาร...</p>
            </div>
            <div id="news-portal-content" class="news-portal-grid" style="display:none;">
                <div class="news-main">
                    <div id="news-hero-section"></div>
                    <h3 class="sidebar-title">📰 ข่าวล่าสุด (Latest News)</h3>
                    <div id="news-latest-grid" class="grid-2"></div>
                </div>
                <aside class="news-sidebar">
                    <h3 class="sidebar-title">🔥 ข่าวยอดนิยม (Most Read)</h3>
                    <div id="news-trending-list"></div>
                    
                    <div class="card mt-4" style="background:var(--primary); color:#fff; padding:24px; border:none;">
                        <h4>สมัครรับข่าวสาร</h4>
                        <p style="font-size:0.85rem; opacity:0.8; margin:10px 0 20px;">ไม่พลาดทุกกิจกรรมและโครงการใหม่ๆ จากทางมูลนิธิฯ</p>
                        <div class="flex gap-2">
                            <input type="email" placeholder="อีเมลของคุณ" style="padding:10px; border-radius:6px; border:none; flex:1;">
                            <button class="btn btn-accent btn-sm" style="background:var(--accent); color:var(--text);">ตกลง</button>
                        </div>
                    </div>
                </aside>
            </div>
        </div>
    `;

try {
        const res = await fetch(`${API_DATA}?endpoint=news`);
        const data = await res.json();
        
        if (data.success && data.data.length > 0) {
            const news = data.data;
            const heroNews = news[0];
            const latestNews = news.slice(1, 7); // Next 6 news
            const trendingNews = [...news].sort((a, b) => (b.views || 0) - (a.views || 0)).slice(0, 5); // Sort by views

// 1. Render Hero Slider (Featured)
            const heroContainer = document.getElementById('news-hero-section');
            heroContainer.innerHTML = `
                <a href="/news/${heroNews.slug}" class="news-hero-slider reveal">
                    <img src="${heroNews.featured_image || 'https://placehold.co/1200x600?text=News'}" class="news-hero-img">
                    <div class="news-hero-content">
                        <span class="news-tag">Breaking News</span>
                        <h2>${state.lang === 'th' ? heroNews.title : (heroNews.title_en || heroNews.title)}</h2>
                        <div class="meta">
                            <span>📅 ${new Date(heroNews.created_at).toLocaleDateString('th-TH')}</span>
                            <span>👁️ ${heroNews.views || 0} views</span>
                        </div>
                    </div>
                </a>
            `;

// 2. Render Latest Grid
            const latestGrid = document.getElementById('news-latest-grid');
            latestGrid.innerHTML = latestNews.map(n => `
                <div class="card reveal">
                    <img src="${n.featured_image}" class="card-img" style="height:180px;">
                    <div class="card-body">
                        <small class="text-muted">${new Date(n.created_at).toLocaleDateString('th-TH')}</small>
                        <h3 class="card-title mt-2" style="font-size:1rem;">${state.lang === 'th' ? n.title : (n.title_en || n.title)}</h3>
                        <p class="card-desc" style="font-size:0.85rem;">${state.lang === 'th' ? (n.excerpt || '') : (n.excerpt_en || n.excerpt || '')}</p>
                        <a href="/news/${n.slug}" class="btn btn-outline btn-sm">${t('read_more')}</a>
                    </div>
                </div>
            `).join('');

// 3. Render Trending Sidebar
            const trendingList = document.getElementById('news-trending-list');
            trendingList.innerHTML = trendingNews.map(n => `
                <a href="/news/${n.slug}" class="trending-item reveal">
                    <img src="${n.featured_image}" class="trending-img">
                    <div class="trending-info">
                        <h4>${state.lang === 'th' ? n.title : (n.title_en || n.title)}</h4>
                        <div class="meta">👁️ ${n.views || 0} views</div>
                    </div>
                </a>
            `).join('');

// Show content
            document.getElementById('news-portal-loader').style.display = 'none';
            document.getElementById('news-portal-content').style.display = 'grid';
            initAnimations();
        } else {
            document.getElementById('news-portal-loader').innerHTML = '<p>ไม่พบข้อมูลข่าวสารในขณะนี้</p>';
        }
    } catch (err) {
        console.error('News Portal Error:', err);
        document.getElementById('news-portal-loader').innerHTML = '<p class="text-danger">เกิดข้อผิดพลาดในการโหลดข้อมูล</p>';
    }
}

async function renderNewsDetail(app, slug) {
    if (!slug) return renderNotFound(app);
    const res = await fetch(`${API_DATA}?endpoint=news&slug=${slug}`);
    const data = await res.json();
    
    // Safety check: Ensure data is an object, not an array or null
    if (!data.success || Array.isArray(data.data) || !data.data) return renderNotFound(app);
    
    const n = data.data;
    const title = state.lang === 'th' ? (n.title || '') : (n.title_en || n.title || '');
    const content = state.lang === 'th' ? (n.content || n.excerpt || '') : (n.content_en || n.excerpt_en || n.content || n.excerpt || '');

app.innerHTML = `
        <div class="page-hero">
            <div class="container">
                <div class="breadcrumb">
                    <a href="/">${t('home')}</a> <span class="breadcrumb-sep">></span> 
                    <a href="/news">${t('news')}</a> <span class="breadcrumb-sep">></span> 
                    <span>${escapeHtml(title)}</span>
                </div>
                <h1 class="animate-up">${escapeHtml(title)}</h1>
                <p class="mt-2 text-muted animate-up" style="animation-delay:0.1s">
                    📅 ${new Date(n.created_at).toLocaleDateString(state.lang === 'th' ? 'th-TH' : 'en-US')} | 👁️ ${n.views || 0} views
                </p>
            </div>
        </div>
        <div class="container section">
            <div class="reveal">
                <img src="${n.featured_image || 'https://placehold.co/1200x600?text=News'}" style="width:100%; max-height:500px; object-fit:cover; border-radius:16px; box-shadow:var(--shadow-lg); margin-bottom:40px;">
                <div class="cms-content card card-body">
                    ${content}
                </div>
            </div>
        </div>
    `;
}

async function renderGallery(app) {
    // 1. Initial UI Structure
    app.innerHTML = `
        <div class="page-hero" style="background: linear-gradient(135deg, var(--primary), var(--primary-dark)); padding: 80px 0;">
            <div class="container text-center">
                <span class="ticker-label mx-auto mb-3" style="background:rgba(255,255,255,0.2); color:#fff; border:1px solid rgba(255,255,255,0.3);">OUR MEMORIES</span>
                <h1 class="animate-up serif" style="font-size:3.5rem; color:#fff;">คลังภาพกิจกรรม</h1>
                <p class="animate-up" style="opacity:0.8; color:#fff; max-width:600px; margin:0 auto;">บันทึกความประทับใจและการเปลี่ยนแปลงที่เราสร้างร่วมกันผ่านเลนส์</p>
            </div>
        </div>

<div id="gallery-timeline-content" class="timeline-wrapper">
                <div class="text-center py-5">
                    <div class="spinner mx-auto"></div>
                    <p class="mt-3">กำลังจัดระเบียบความทรงจำ...</p>
                </div>
            </div>
        </div>
    `;

try {
        const res = await fetch(`${API_DATA}?endpoint=gallery`);
        const data = await res.json();
        
        if (data.success && data.data.length > 0) {
            const galleryData = data.data;

// Extract Unique Albums
            const albums = ['all', ...new Set(galleryData.map(img => img.album || 'ทั่วไป'))];
            const albumContainer = document.getElementById('gallery-albums');
            albumContainer.innerHTML = albums.map(alb => `
                <button class="cat-tab ${alb === 'all' ? 'active' : ''}" data-album="${alb}">${alb === 'all' ? 'ทั้งหมด' : alb}</button>
            `).join('');

const renderTimeline = (filterAlbum = 'all') => {
                const filtered = filterAlbum === 'all' 
                    ? galleryData 
                    : galleryData.filter(img => (img.album || 'ทั่วไป') === filterAlbum);

const timelineContent = document.getElementById('gallery-timeline-content');
                if (filtered.length === 0) {
                    timelineContent.innerHTML = `<div class="text-center py-5"><p>ไม่พบรูปภาพในหมวดหมู่นี้</p></div>`;
                    return;
                }

timelineContent.innerHTML = Object.keys(groups).map(month => `
                    <div class="timeline-section mb-5 reveal">
                        <div class="timeline-header mb-4" style="display:flex; align-items:center; gap:20px;">
                            <h2 class="serif" style="color:var(--primary); font-size:1.8rem; white-space:nowrap;">${month}</h2>
                            <div style="height:2px; background:linear-gradient(to right, var(--border), transparent); width:100%;"></div>
                        </div>
                        <div class="gallery-grid">
                            ${groups[month].map(img => `
                                <div class="gallery-item reveal" onclick="openGalleryLightbox('${img.file_path}', '${escapeHtml(img.title)}')">
                                    <img src="${img.file_path}" alt="${img.title}" loading="lazy" style="width:100%; height:100%; object-fit:cover;">
                                    <div class="gallery-item-overlay">
                                        <span class="gallery-tag">${img.album || 'ทั่วไป'}</span>
                                        <h4>${escapeHtml(img.title)}</h4>
                                        <small>📅 ${new Date(img.created_at).toLocaleDateString('th-TH')}</small>
                                    </div>
                                </div>
                            `).join('')}
                        </div>
                    </div>
                `).join('');
                
                if (typeof initAnimations === 'function') initAnimations();
            };

renderTimeline();

albumContainer.addEventListener('click', (e) => {
                if (e.target.classList.contains('cat-tab')) {
                    document.querySelectorAll('.cat-tab').forEach(t => t.classList.remove('active'));
                    e.target.classList.add('active');
                    renderTimeline(e.target.dataset.album);
                }
            });

} else {
            document.getElementById('gallery-timeline-content').innerHTML = `<div class="text-center py-5"><h3 class="text-muted">ยังไม่มีรูปภาพในแกลเลอรี</h3></div>`;
        }
    } catch (err) {
        console.error('Gallery Render Error:', err);
        document.getElementById('gallery-timeline-content').innerHTML = `<p class="text-center text-danger">เกิดข้อผิดพลาดในการโหลดข้อมูล</p>`;
    }
}

function escapeHtml(unsafe) {
    if(!unsafe) return '';
    return String(unsafe).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;");
}

async function renderCMSPage(app, page) {
    app.innerHTML = `
        <div class="page-hero">
            <div class="container text-center">
                <h1 class="animate-up">${state.lang === 'th' ? page.title : (page.title_en || page.title)}</h1>
            </div>
        </div>
        <div class="container section">
            <div class="card card-body reveal cms-content">
                ${state.lang === 'th' ? page.content : (page.content_en || page.content)}
            </div>
        </div>
    `;
}

async function renderVolunteer(app) {
    app.innerHTML = `
        <div class="page-hero">
            <div class="container text-center">
                <span class="ticker-label mx-auto mb-3">Join Us</span>
                <h1 class="animate-up serif" style="font-size:3rem;">สมัครอาสาสมัคร</h1>
                <p class="animate-up" style="opacity:0.8; max-width:600px; margin:0 auto;">ใช้ความสามารถและเวลาของคุณเพื่อสร้างความเปลี่ยนแปลงที่ยิ่งใหญ่ให้กับเยาวชนไทย</p>
            </div>
        </div>
        
        <div class="container section">
            <div class="card form-card reveal" style="max-width:800px; margin:0 auto; padding:40px; border-radius:24px; box-shadow:var(--shadow-lg);">
                <form id="volunteer-form" enctype="multipart/form-data">
                    <div class="grid-2">
                        <div class="form-group">
                            <label>ชื่อ-นามสกุล <span class="required">*</span></label>
                            <input type="text" name="name" id="vol-name" placeholder="ระบุชื่อจริง-นามสกุล" required>
                        </div>
                        <div class="form-group">
                            <label>เบอร์โทรศัพท์ <span class="required">*</span></label>
                            <input type="tel" name="phone" id="vol-phone" placeholder="08x-xxx-xxxx" required>
                        </div>
                    </div>

<div class="form-group">
                        <label>อีเมล (ถ้ามี)</label>
                        <input type="email" name="email" id="vol-email" placeholder="example@email.com">
                    </div>

<div class="form-group">
                        <label>ที่อยู่ปัจจุบัน (ไม่บังคับ)</label>
                        <textarea name="address" id="vol-address" style="height:80px;" placeholder="ระบุที่อยู่ที่สะดวกสำหรับการติดต่อหรือจัดส่งเอกสาร"></textarea>
                    </div>

<div class="form-group">
                        <label style="display:block; margin-bottom:15px; font-weight:700; color:var(--primary);">ทักษะและความถนัดของคุณ (ระบุได้มากกว่า 1)</label>
                        <div class="grid-3" style="gap:10px;">
                            <label class="checkbox-item"><input type="checkbox" name="skill_tags[]" value="driving"> ขับรถเป็น / มีใบขับขี่</label>
                            <label class="checkbox-item"><input type="checkbox" name="skill_tags[]" value="tech"> ช่างเทคนิค / ไอที</label>
                            <label class="checkbox-item"><input type="checkbox" name="skill_tags[]" value="management"> การบริหาร / จัดการ</label>
                            <label class="checkbox-item"><input type="checkbox" name="skill_tags[]" value="teaching"> งานสอน / ติวเตอร์</label>
                            <label class="checkbox-item"><input type="checkbox" name="skill_tags[]" value="creative"> งานสร้างสรรค์ / กราฟิก</label>
                            <label class="checkbox-item"><input type="checkbox" name="skill_tags[]" value="medical"> ปฐมพยาบาล / สาธารณสุข</label>
                        </div>
                        <textarea name="other_skills" id="vol-skills" class="mt-3" style="height:100px;" placeholder="ระบุทักษะอื่นๆ เพิ่มเติม หรือรายละเอียดของทักษะด้านบน (เช่น ขับรถกระบะได้, ซ่อมคอมพิวเตอร์ได้)"></textarea>
                    </div>

<div class="form-group">
                        <label>รูปถ่ายหน้าตรง หรือรูปถ่ายตอนทำกิจกรรม (ไม่บังคับ)</label>
                        <div class="photo-upload-wrapper mt-2">
                            <input type="file" name="photo" id="vol-photo" accept="image/*" style="display:none;">
                            <div class="photo-preview" onclick="document.getElementById('vol-photo').click()">
                                <div id="preview-placeholder">
                                    <span style="font-size:2rem;">📷</span><br>
                                    <small>คลิกเพื่ออัปโหลดรูปภาพ</small>
                                </div>
                                <img id="preview-img" style="display:none; width:100%; height:100%; object-fit:cover;">
                            </div>
                        </div>
                    </div>

<div class="mt-5">
                        <button type="submit" class="btn btn-primary btn-full" style="padding:18px; font-size:1.1rem; border-radius:12px;">ส่งใบสมัครเป็นอาสาสมัคร</button>
                    </div>
                </form>
            </div>
        </div>
    `;

// Photo Preview Logic
    const photoInput = document.getElementById('vol-photo');
    const previewImg = document.getElementById('preview-img');
    const placeholder = document.getElementById('preview-placeholder');

photoInput.onchange = () => {
        const file = photoInput.files[0];
        if (file) {
            const reader = new FileReader();
            reader.onload = (e) => {
                previewImg.src = e.target.result;
                previewImg.style.display = 'block';
                placeholder.style.display = 'none';
            };
            reader.readAsDataURL(file);
        }
    };

document.getElementById('volunteer-form').onsubmit = async (e) => {
        e.preventDefault();
        const form = e.target;
        const submitBtn = form.querySelector('button[type="submit"]');
        
        // Collect checked skills
        const checkedSkills = Array.from(form.querySelectorAll('input[name="skill_tags[]"]:checked')).map(cb => cb.value);
        const otherSkills = document.getElementById('vol-skills').value;
        const allSkills = [...checkedSkills, otherSkills].filter(s => s).join(' | ');

const formData = new FormData(form);
        formData.set('skills', allSkills); // Combine skills into one field for DB
        
        submitBtn.disabled = true;
        submitBtn.textContent = 'กำลังส่งข้อมูล...';

try {
            const res = await fetch(`${API_DATA}?endpoint=volunteers`, { 
                method: 'POST', 
                body: formData 
            });
            const data = await res.json();
            if(data.success) { 
                showToast(data.message, 'success'); 
                form.reset();
                previewImg.style.display = 'none';
                placeholder.style.display = 'block';
            } else {
                showToast(data.message || 'เกิดข้อผิดพลาด', 'error');
            }
        } catch (err) {
            showToast('การเชื่อมต่อล้มเหลว กรุณาลองใหม่อีกครั้ง', 'error');
        } finally {
            submitBtn.disabled = false;
            submitBtn.textContent = 'ส่งใบสมัครเป็นอาสาสมัคร';
        }
    };
}

async function renderContact(app) {
    app.innerHTML = `
        <div class="page-hero"><div class="container text-center"><h1>ติดต่อเรา</h1></div></div>
        <div class="container section">
            <div class="contact-grid">
                <div class="reveal">
                    <h2>มูลนิธิส่งเสริมเยาวชนไทย</h2>
                    <div class="contact-item mt-4">📍 123 ถนนพระราม 4 กรุงเทพฯ 10330</div>
                    <div class="contact-item">📞 +66 2 123 4567</div>
                    <div class="contact-item">📧 info@thaiyouthfoundation.org</div>
                </div>
                <div class="card form-card reveal">
                    <form id="contact-form">
                        <div class="form-group"><label>ชื่อ</label><input type="text" id="c-name" required></div>
                        <div class="form-group"><label>อีเมล</label><input type="email" id="c-email" required></div>
                        <div class="form-group"><label>ข้อความ</label><textarea id="c-msg" required></textarea></div>
                        <button type="submit" class="btn btn-primary btn-full">ส่งข้อความ</button>
                    </form>
                </div>
            </div>
        </div>
    `;
    document.getElementById('contact-form').onsubmit = async (e) => {
        e.preventDefault();
        const payload = { name: document.getElementById('c-name').value, email: document.getElementById('c-email').value, subject: 'Contact from Web', message: document.getElementById('c-msg').value };
        const res = await fetch(`${API_DATA}?endpoint=contacts`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(payload) });
        const data = await res.json();
        if(data.success) { showToast('ส่งข้อความแล้ว ทีมงานจะรีบติดต่อกลับครับ', 'success'); e.target.reset(); }
    };
}

async function renderDonate(app) {
    const programsRes = await fetch(`${API_DATA}?endpoint=programs&limit=10`);
    const programsData = await programsRes.json();
    const programs = programsData.data || [];

app.innerHTML = `
        <div class="page-hero">
            <div class="container text-center">
                <span class="ticker-label mx-auto mb-3">Make a Difference</span>
                <h1 class="animate-up serif" style="font-size:3rem;">ร่วมบริจาคสนับสนุนมูลนิธิ</h1>
                <p class="animate-up" style="opacity:0.8; max-width:600px; margin:0 auto;">ทุกยอดบริจาคของคุณคือพลังสำคัญในการขับเคลื่อนอนาคตของเยาวชนไทย</p>
            </div>
        </div>
        
        <div class="container section">
            <div class="grid-2" style="gap:40px; align-items:start;">
                
                <div class="reveal">
                    <div class="card" style="padding:30px; background:var(--primary); color:#fff; border-radius:24px;">
                        <h3 style="color:#fff; margin-bottom:20px;">บัญชีสำหรับการโอนเงิน</h3>
                        <div class="bank-item mb-4" style="background:rgba(255,255,255,0.1); padding:20px; border-radius:16px;">
                            <div style="display:flex; justify-content:space-between; margin-bottom:10px;">
                                <span style="opacity:0.8;">ธนาคารกสิกรไทย</span>
                                <strong>K-BANK</strong>
                            </div>
                            <div style="font-size:1.5rem; font-weight:700; letter-spacing:1px; margin-bottom:5px;">012-3-45678-9</div>
                            <div style="font-size:0.9rem; opacity:0.9;">ชื่อบัญชี: มูลนิธิส่งเสริมเยาวชนไทย</div>
                        </div>
                        <div class="bank-item" style="background:rgba(255,255,255,0.1); padding:20px; border-radius:16px;">
                            <div style="display:flex; justify-content:space-between; margin-bottom:10px;">
                                <span style="opacity:0.8;">ธนาคารไทยพาณิชย์</span>
                                <strong>SCB</strong>
                            </div>
                            <div style="font-size:1.5rem; font-weight:700; letter-spacing:1px; margin-bottom:5px;">987-6-54321-0</div>
                            <div style="font-size:0.9rem; opacity:0.9;">ชื่อบัญชี: มูลนิธิส่งเสริมเยาวชนไทย</div>
                        </div>
                        <p class="mt-4" style="font-size:0.85rem; opacity:0.7; line-height:1.6;">
                            * หลังจากโอนเงินเรียบร้อยแล้ว กรุณาแจ้งโอนผ่านแบบฟอร์มเพื่อออกใบอนุโมทนาบัตรและตรวจสอบยอดเงิน
                        </p>
                    </div>
                </div>

<div class="card form-card reveal" style="padding:40px; border-radius:24px;">
                    <form id="donate-form" enctype="multipart/form-data">
                        <h4 class="mb-4" style="color:var(--primary); border-left:4px solid var(--accent); padding-left:15px;">แจ้งยืนยันการโอนเงิน</h4>
                        
                        <div class="form-group">
                            <label>จำนวนเงินที่โอน (บาท) <span class="required">*</span></label>
                            <input type="number" name="amount" id="d-amount" style="font-size:1.8rem; font-weight:700; color:var(--primary);" placeholder="0.00" required>
                        </div>

<div class="form-group">
                            <label>บริจาคให้กับโครงการ</label>
                            <select name="program_id" id="d-program">
                                <option value="">บริจาคทั่วไป (เข้ากองทุนกลาง)</option>
                                ${programs.map(p => `<option value="${p.id}">${escapeHtml(p.title)}</option>`).join('')}
                            </select>
                        </div>

<div class="grid-2">
                            <div class="form-group">
                                <label>โอนเข้าธนาคาร <span class="required">*</span></label>
                                <select name="transfer_bank" id="d-bank" required>
                                    <option value="">-- เลือกธนาคาร --</option>
                                    <option value="kbank">ธนาคารกสิกรไทย (012-3-45678-9)</option>
                                    <option value="scb">ธนาคารไทยพาณิชย์ (987-6-54321-0)</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label>วันที่และเวลาที่โอน <span class="required">*</span></label>
                                <input type="datetime-local" name="transfer_date" id="d-date" required>
                            </div>
                        </div>

<div class="form-group">
                            <label>หลักฐานการโอนเงิน (Slip) <span class="required">*</span></label>
                            <div class="slip-upload-box mt-2">
                                <input type="file" name="slip" id="d-slip" accept="image/*" style="display:none;" required>
                                <div id="slip-preview-container" class="photo-preview" style="height:200px; border-style:dashed;" onclick="document.getElementById('d-slip').click()">
                                    <div id="slip-placeholder">
                                        <span style="font-size:2rem;">📄</span><br>
                                        <small>คลิกเพื่อแนบสลิปการโอนเงิน</small>
                                    </div>
                                    <img id="slip-img" style="display:none; width:100%; height:100%; object-fit:contain;">
                                </div>
                            </div>
                        </div>

<div class="form-group">
                            <label>ชื่อ-นามสกุล ผู้บริจาค <span class="required">*</span></label>
                            <input type="text" name="name" id="d-name" required value="${state.user ? escapeHtml(state.user.name) : ''}">
                        </div>

<div class="grid-2">
                            <div class="form-group">
                                <label>เบอร์โทรศัพท์</label>
                                <input type="tel" name="phone" id="d-phone" placeholder="08x-xxx-xxxx">
                            </div>
                            <div class="form-group">
                                <label>อีเมล</label>
                                <input type="email" name="email" id="d-email" value="${state.user ? escapeHtml(state.user.email) : ''}">
                            </div>
                        </div>

<div class="form-group mt-3">
                            <label class="checkbox-item">
                                <input type="checkbox" name="is_tax_deductible" id="d-is-tax" value="1"> 
                                ต้องการใบอนุโมทนาบัตรเพื่อลดหย่อนภาษี
                            </label>
                        </div>

<div id="tax-info-section" style="display:none;" class="animate-up">
                            <div class="form-group">
                                <label>เลขประจำตัวผู้เสียภาษี / เลขบัตรประชาชน</label>
                                <input type="text" name="tax_id" id="d-tax-id" placeholder="เลข 13 หลัก">
                            </div>
                            <div class="form-group">
                                <label>ที่อยู่สำหรับจัดส่งเอกสาร</label>
                                <textarea name="address" id="d-address" style="height:80px;"></textarea>
                            </div>
                        </div>

<div class="mt-4">
                            <button type="submit" class="btn btn-primary btn-full" style="padding:18px; font-size:1.1rem; border-radius:12px;">ส่งข้อมูลแจ้งโอนเงิน</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    `;

// Slip Preview
    const slipInput = document.getElementById('d-slip');
    const slipImg = document.getElementById('slip-img');
    const slipPlaceholder = document.getElementById('slip-placeholder');
    slipInput.onchange = () => {
        const file = slipInput.files[0];
        if (file) {
            const reader = new FileReader();
            reader.onload = (e) => {
                slipImg.src = e.target.result;
                slipImg.style.display = 'block';
                slipPlaceholder.style.display = 'none';
            };
            reader.readAsDataURL(file);
        }
    };

// Tax Toggle
    document.getElementById('d-is-tax').onchange = (e) => {
        document.getElementById('tax-info-section').style.display = e.target.checked ? 'block' : 'none';
    };

document.getElementById('donate-form').onsubmit = async (e) => {
        e.preventDefault();
        const form = e.target;
        const submitBtn = form.querySelector('button[type="submit"]');
        const formData = new FormData(form);
        
        submitBtn.disabled = true;
        submitBtn.textContent = 'กำลังส่งข้อมูล...';

try {
            const res = await fetch(`${API_DATA}?endpoint=donations`, { 
                method: 'POST', 
                body: formData 
            });
            const data = await res.json();
            if(data.success) { 
                showToast(data.message, 'success'); 
                form.reset();
                slipImg.style.display = 'none';
                slipPlaceholder.style.display = 'block';
                document.getElementById('tax-info-section').style.display = 'none';
                setTimeout(() => navigateTo('/'), 3000);
            } else {
                showToast(data.message || 'เกิดข้อผิดพลาด', 'error');
            }
        } catch (err) {
            showToast('การเชื่อมต่อล้มเหลว กรุณาลองใหม่อีกครั้ง', 'error');
        } finally {
            submitBtn.disabled = false;
            submitBtn.textContent = 'ส่งข้อมูลแจ้งโอนเงิน';
        }
    };
}

function renderNotFound(app) {
    app.innerHTML = `<div class="container section text-center"><h1>404</h1><p>ไม่พบหน้าที่ต้องการ</p><a href="/" class="btn btn-primary mt-3">กลับหน้าแรก</a></div>`;
}

// ==========================================
// AUTH & UI
// ==========================================
function initUI() {
    const hamburger = document.getElementById('hamburger');
    const nav = document.getElementById('main-nav');
    if (hamburger) hamburger.onclick = () => nav.classList.toggle('open');

const logoutBtn = document.getElementById('logout-btn');
    if(logoutBtn) logoutBtn.onclick = (e) => { e.preventDefault(); logout(); };

// Handle Search Interaction (Thairath Style)
    const searchTrigger = document.querySelector('.search-trigger');
    if (searchTrigger) {
        searchTrigger.onclick = () => {
            const query = prompt(state.lang === 'th' ? 'ค้นหาเรื่องที่คุณสนใจ...' : 'Search for what you are interested in...');
            if (query && query.trim()) {
                window.location.href = `/search?q=${encodeURIComponent(query.trim())}`;
            }
        };
    }
}

async function fetchUser() {
    try {
        const res = await fetch(`${API_AUTH}?action=me`, { headers: { 'Authorization': `Bearer ${state.token}` } });
        const data = await res.json();
        if (data.success) { state.user = data.user; updateAuthUI(); }
        else logout();
    } catch { logout(); }
}

function logout() { state.user = null; state.token = null; localStorage.removeItem('token'); updateAuthUI(); showToast('ออกจากระบบแล้ว'); navigateTo('/'); }

// MODAL
window.openModal = (type) => { document.getElementById('auth-modal').style.display = 'flex'; switchTab(type || 'login'); };
window.closeModal = () => { document.getElementById('auth-modal').style.display = 'none'; };
window.switchTab = (tab) => {
    const isLogin = tab === 'login';
    document.getElementById('login-form-container').style.display = isLogin ? 'block' : 'none';
    document.getElementById('register-form-container').style.display = isLogin ? 'none' : 'block';
    
    // Update active tab styling
    document.querySelectorAll('.auth-tab').forEach(btn => {
        const isMatch = (isLogin && btn.textContent.includes('เข้าสู่ระบบ')) || (!isLogin && btn.textContent.includes('ลงทะเบียน'));
        btn.classList.toggle('active', isMatch);
    });
};

// UTILS & ANIMATIONS
function initAnimations() {
    const obs = new IntersectionObserver((es) => es.forEach(e => { if(e.isIntersecting) e.target.classList.add('active'); }), { threshold: 0.1 });
    document.querySelectorAll('.reveal').forEach(el => obs.observe(el));
}
function initCounterAnimations() {
    document.querySelectorAll('.number').forEach(c => {
        const t = +c.dataset.target;
        const u = () => { const n = +c.innerText.replace(/[^0-9]/g, ''); const i = Math.ceil(t/100); if(n<t) { c.innerText = (n+i).toLocaleString()+'+'; setTimeout(u, 20); } else c.innerText = t.toLocaleString()+'+'; }; u();
    });
}
function updateGlobalUI() { 
    if(state.settings.site_name) { 
        document.title = state.settings.site_name; 
        document.querySelectorAll('.site-name').forEach(e => e.textContent = state.settings.site_name); 
    } 
    if(state.settings.breaking_news) {
        const ticker = document.getElementById('breaking-ticker');
        if(ticker) {
            ticker.textContent = state.settings.breaking_news;
            initTickerControl(ticker);
        }
    }
}

async function fetchCMSPage(slug) {
    try {
        const t = new Date().getTime();
        const res = await fetch(`${API_DATA}?endpoint=pages&slug=${encodeURIComponent(slug)}&_t=${t}`, {
            cache: 'no-cache'
        });
        const data = await res.json();
        return data.success ? data.data : null;
    } catch (err) {
        console.error('CMS Fetch Error:', err);
        return null;
    }
}

Batal

⬅ Naik ke public_html 2 item

Nama	Tipe	Ukuran	Diubah	Aksi
📜app.js	js	56.4 KB	2026-05-06 10:30	✏️ Edit 👁️ View
📜app_v2.js	js	73.4 KB	2026-05-08 04:46	✏️ Edit 👁️ View