@extends('admin.app')


@section('content')
    <!-- ════════ MAIN ════════ -->
    <div class="main" id="main">

        <!-- Topbar -->
        <div class="topbar">
            <div class="topbar-left">
                <button class="hamburger" onclick="toggleSidebar()"><i class="bi bi-list"></i></button>
                <div>
                    <div class="page-title" id="pageTitle">Dashboard</div>
                    <div class="breadcrumb-row"><span>KFA News</span><i class="bi bi-chevron-right"
                            style="font-size:10px"></i><span id="pageBreads">Overview</span></div>
                </div>
            </div>
            <div class="topbar-right">
                <div class="tb-btn tb-notif"><i class="bi bi-bell"></i></div>
                <div class="tb-btn"><i class="bi bi-search"></i></div>
                <div class="tb-btn"><i class="bi bi-moon"></i></div>
                <img src="https://ui-avatars.com/api/?name=Dorn+Soknira&background=e94560&color=fff&size=80"
                    class="tb-avatar" alt>
            </div>
        </div>

        <div class="content">

            <!-- ══ DASHBOARD ══ -->
            <div class="page-section active" id="page-dashboard">
                <div class="welcome-strip">
                    <div class="welcome-text">
                        <div class="greet">Good morning 👋</div>
                        <div class="name">Welcome back, Dorn Soknira</div>
                        <div class="sub">Here's what's happening with KFA News today</div>
                    </div>
                    <div class="welcome-actions">
                        <button class="btn-ghost"><i class="bi bi-eye"></i> View Site</button>
                        <button class="btn-accent" onclick="openModal('postModal')"><i class="bi bi-plus-lg"></i> New
                            Post</button>
                    </div>
                </div>
                <div class="stats-grid">
                    <div class="stat-card">
                        <div class="stat-icon si-red"><i class="bi bi-newspaper"></i></div>
                        <div>
                            <div class="stat-value">248</div>
                            <div class="stat-label">Total Posts</div>
                            <div class="stat-change change-up"><i class="bi bi-arrow-up-right"></i> +12 this week</div>
                        </div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-icon si-amber"><i class="bi bi-eye"></i></div>
                        <div>
                            <div class="stat-value">84.2K</div>
                            <div class="stat-label">Monthly Views</div>
                            <div class="stat-change change-up"><i class="bi bi-arrow-up-right"></i> +8.3%</div>
                        </div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-icon si-blue"><i class="bi bi-people"></i></div>
                        <div>
                            <div class="stat-value">1,428</div>
                            <div class="stat-label">Registered Users</div>
                            <div class="stat-change change-up"><i class="bi bi-arrow-up-right"></i> +34 new</div>
                        </div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-icon si-green"><i class="bi bi-chat-dots"></i></div>
                        <div>
                            <div class="stat-value">3,621</div>
                            <div class="stat-label">Comments</div>
                            <div class="stat-change change-down"><i class="bi bi-arrow-down-right"></i> -2.1%</div>
                        </div>
                    </div>
                </div>
                <div class="dash-grid">
                    <div>
                        <div class="card-box" style="margin-bottom:20px">
                            <div class="card-header">
                                <div class="card-title"><i class="bi bi-bar-chart-line"></i> Site Traffic</div>
                                <div class="tab-pills">
                                    <button class="tab-pill active" onclick="updateChart('7d',this)">7D</button>
                                    <button class="tab-pill" onclick="updateChart('30d',this)">30D</button>
                                    <button class="tab-pill" onclick="updateChart('90d',this)">90D</button>
                                </div>
                            </div>
                            <div class="card-body">
                                <div class="chart-wrap"><canvas id="trafficChart"></canvas></div>
                            </div>
                        </div>
                        <div class="card-box">
                            <div class="card-header">
                                <div class="card-title"><i class="bi bi-list-ul"></i> Recent Posts</div>
                                <button class="btn-accent" style="padding:6px 14px;font-size:12px"
                                    onclick="openModal('postModal')"><i class="bi bi-plus"></i> New Post</button>
                            </div>
                            <div style="overflow-x:auto">
                                <table class="posts-table">
                                    <thead>
                                        <tr>
                                            <th>Post</th>
                                            <th>Category</th>
                                            <th>Status</th>
                                            <th>Views</th>
                                            <th>Date</th>
                                            <th>Actions</th>
                                        </tr>
                                    </thead>
                                    <tbody id="dashPostsBody">
                                        <tr>
                                            <td>
                                                <div style="display:flex;align-items:center;gap:10px">
                                                    <div
                                                        style="width:44px;height:34px;border-radius:7px;background:linear-gradient(135deg,#e94560,#ff6b6b);flex-shrink:0">
                                                    </div>
                                                    <div class="post-title-cell">
                                                        <div class="post-title-text">Cambodia Economy Grows 7.2% in Q1</div>
                                                        <div class="post-cat">Business</div>
                                                    </div>
                                                </div>
                                            </td>
                                            <td><span class="badge-status bs-pub">Business</span></td>
                                            <td><span class="badge-status bs-pub">Published</span></td>
                                            <td>4,821</td>
                                            <td style="color:var(--muted);font-size:12px">May 6</td>
                                            <td>
                                                <div style="display:flex;gap:5px"><button class="tbl-action"
                                                        onclick="openEditPost()"><i
                                                            class="bi bi-pencil"></i></button><button
                                                        class="tbl-action del"
                                                        onclick="openConfirm('Delete this post?',()=>toast('Post deleted','success'))"><i
                                                            class="bi bi-trash"></i></button></div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <div style="display:flex;align-items:center;gap:10px">
                                                    <div
                                                        style="width:44px;height:34px;border-radius:7px;background:linear-gradient(135deg,#1a73e8,#4fc3f7);flex-shrink:0">
                                                    </div>
                                                    <div class="post-title-cell">
                                                        <div class="post-title-text">Tech Summit 2026 Highlights</div>
                                                        <div class="post-cat">Technology</div>
                                                    </div>
                                                </div>
                                            </td>
                                            <td><span class="badge-status bs-video">Technology</span></td>
                                            <td><span class="badge-status bs-video">Video</span></td>
                                            <td>2,340</td>
                                            <td style="color:var(--muted);font-size:12px">May 5</td>
                                            <td>
                                                <div style="display:flex;gap:5px"><button class="tbl-action"
                                                        onclick="openEditPost()"><i
                                                            class="bi bi-pencil"></i></button><button
                                                        class="tbl-action del"
                                                        onclick="openConfirm('Delete this post?',()=>toast('Post deleted','success'))"><i
                                                            class="bi bi-trash"></i></button></div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <div style="display:flex;align-items:center;gap:10px">
                                                    <div
                                                        style="width:44px;height:34px;border-radius:7px;background:linear-gradient(135deg,#1ea75f,#a8e063);flex-shrink:0">
                                                    </div>
                                                    <div class="post-title-cell">
                                                        <div class="post-title-text">Health Ministry Launches New Program
                                                        </div>
                                                        <div class="post-cat">Health</div>
                                                    </div>
                                                </div>
                                            </td>
                                            <td><span class="badge-status bs-pub">Health</span></td>
                                            <td><span class="badge-status bs-pub">Published</span></td>
                                            <td>1,892</td>
                                            <td style="color:var(--muted);font-size:12px">May 5</td>
                                            <td>
                                                <div style="display:flex;gap:5px"><button class="tbl-action"
                                                        onclick="openEditPost()"><i
                                                            class="bi bi-pencil"></i></button><button
                                                        class="tbl-action del"
                                                        onclick="openConfirm('Delete this post?',()=>toast('Post deleted','success'))"><i
                                                            class="bi bi-trash"></i></button></div>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                    <div style="display:flex;flex-direction:column;gap:20px">
                        <div class="card-box">
                            <div class="card-header">
                                <div class="card-title"><i class="bi bi-lightning"></i> Quick Actions</div>
                            </div>
                            <div class="card-body">
                                <div class="quick-grid">
                                    <a class="qa-btn" onclick="openModal('postModal')"><i class="bi bi-plus-square"
                                            style="color:var(--accent)"></i><span>New Post</span></a>
                                    <a class="qa-btn" onclick="openModal('postModal')"><i class="bi bi-camera-video"
                                            style="color:var(--blue)"></i><span>New Video</span></a>
                                    <a class="qa-btn" onclick="openModal('userModal')"><i class="bi bi-person-plus"
                                            style="color:var(--green)"></i><span>Add User</span></a>
                                    <a class="qa-btn" onclick="openModal('categoryModal')"><i class="bi bi-tag"
                                            style="color:var(--accent2)"></i><span>New Category</span></a>
                                    <a class="qa-btn"
                                        onclick="showPage('messages',document.querySelector('[onclick=\'showPage(\\\"messages\\\",this)\']'))"><i
                                            class="bi bi-envelope-open"
                                            style="color:var(--accent)"></i><span>Messages</span></a>
                                    <a class="qa-btn" onclick="showPage('settings',null)"><i class="bi bi-gear"
                                            style="color:var(--muted)"></i><span>Settings</span></a>
                                </div>
                            </div>
                        </div>
                        <div class="card-box">
                            <div class="card-header">
                                <div class="card-title"><i class="bi bi-pie-chart"></i> Content Mix</div>
                            </div>
                            <div class="card-body">
                                <div class="donut-wrap"><canvas id="donutChart"
                                        style="max-width:160px;max-height:160px"></canvas>
                                    <div class="donut-center">
                                        <div class="dv">248</div>
                                        <div class="dl">Total</div>
                                    </div>
                                </div>
                                <div class="legend-list">
                                    <div class="legend-item">
                                        <div class="legend-dot" style="background:#e94560"></div><span
                                            class="legend-name">Articles</span><span class="legend-val">186 (75%)</span>
                                    </div>
                                    <div class="legend-item">
                                        <div class="legend-dot" style="background:#1a73e8"></div><span
                                            class="legend-name">Videos</span><span class="legend-val">44 (18%)</span>
                                    </div>
                                    <div class="legend-item">
                                        <div class="legend-dot" style="background:#f5a623"></div><span
                                            class="legend-name">Drafts</span><span class="legend-val">18 (7%)</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="card-box">
                            <div class="card-header">
                                <div class="card-title"><i class="bi bi-globe"></i> Traffic Sources</div>
                            </div>
                            <div class="card-body" style="padding-top:8px">
                                <div class="traffic-item">
                                    <div class="traffic-icon" style="background:rgba(24,119,242,.1)"><i
                                            class="bi bi-facebook" style="color:#1877f2"></i></div>
                                    <div style="flex:1;min-width:0">
                                        <div class="traffic-label">Facebook</div>
                                        <div class="traffic-sub">Social media</div>
                                    </div>
                                    <div style="width:80px">
                                        <div class="traffic-bar-wrap">
                                            <div class="traffic-bar" style="width:68%;background:#1877f2"></div>
                                        </div>
                                    </div>
                                    <div class="traffic-pct" style="color:#1877f2">68%</div>
                                </div>
                                <div class="traffic-item">
                                    <div class="traffic-icon" style="background:rgba(26,115,232,.1)"><i
                                            class="bi bi-google" style="color:#1a73e8"></i></div>
                                    <div style="flex:1;min-width:0">
                                        <div class="traffic-label">Google</div>
                                        <div class="traffic-sub">Organic search</div>
                                    </div>
                                    <div style="width:80px">
                                        <div class="traffic-bar-wrap">
                                            <div class="traffic-bar" style="width:48%;background:#1a73e8"></div>
                                        </div>
                                    </div>
                                    <div class="traffic-pct" style="color:#1a73e8">48%</div>
                                </div>
                                <div class="traffic-item">
                                    <div class="traffic-icon" style="background:rgba(0,136,204,.1)"><i
                                            class="bi bi-telegram" style="color:#0088cc"></i></div>
                                    <div style="flex:1;min-width:0">
                                        <div class="traffic-label">Telegram</div>
                                        <div class="traffic-sub">Channel shares</div>
                                    </div>
                                    <div style="width:80px">
                                        <div class="traffic-bar-wrap">
                                            <div class="traffic-bar" style="width:31%;background:#0088cc"></div>
                                        </div>
                                    </div>
                                    <div class="traffic-pct" style="color:#0088cc">31%</div>
                                </div>
                            </div>
                        </div>
                        <div class="card-box">
                            <div class="card-header">
                                <div class="card-title"><i class="bi bi-clock-history"></i> Activity</div><span
                                    style="font-size:12px;color:var(--muted)">Today</span>
                            </div>
                            <div class="card-body" style="padding-top:8px">
                                <div class="activity-feed">
                                    <div class="af-item">
                                        <div class="af-dot af-pub"><i class="bi bi-send-check"></i></div>
                                        <div>
                                            <div class="af-text">Published <strong>"Cambodia Economy"</strong></div>
                                            <div class="af-time"><i class="bi bi-clock" style="font-size:10px"></i> 2
                                                hours ago</div>
                                        </div>
                                    </div>
                                    <div class="af-item">
                                        <div class="af-dot af-com"><i class="bi bi-chat-check"></i></div>
                                        <div>
                                            <div class="af-text">Approved <strong>12 comments</strong></div>
                                            <div class="af-time"><i class="bi bi-clock" style="font-size:10px"></i> 4
                                                hours ago</div>
                                        </div>
                                    </div>
                                    <div class="af-item">
                                        <div class="af-dot af-user"><i class="bi bi-person-plus"></i></div>
                                        <div>
                                            <div class="af-text">New user <strong>Chan Sreyleak</strong> registered</div>
                                            <div class="af-time"><i class="bi bi-clock" style="font-size:10px"></i> 6
                                                hours ago</div>
                                        </div>
                                    </div>
                                    <div class="af-item">
                                        <div class="af-dot af-edit"><i class="bi bi-pencil"></i></div>
                                        <div>
                                            <div class="af-text">Edited <strong>"Tech Summit 2026"</strong></div>
                                            <div class="af-time"><i class="bi bi-clock" style="font-size:10px"></i>
                                                Yesterday</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- ══ POSTS ══ -->
            <!--<div class="page-section" id="page-posts">-->
            <!--    <div class="crud-toolbar">-->
            <!--        <div style="display:flex;gap:10px;flex-wrap:wrap">-->
            <!--            <div class="search-wrap"><i class="bi bi-search"></i><input class="search-input"-->
            <!--                    placeholder="Search posts..." oninput="filterTable('postsTable',this.value)"></div>-->
            <!--            <select class="filter-select">-->
            <!--                <option value="">All Status</option>-->
            <!--                <option>Published</option>-->
            <!--                <option>Draft</option>-->
            <!--                <option>Archived</option>-->
            <!--            </select>-->
            <!--            <select class="filter-select">-->
            <!--                <option value="">All Types</option>-->
            <!--                <option>Article</option>-->
            <!--                <option>Video</option>-->
            <!--            </select>-->
            <!--        </div>-->
            <!--        <button class="btn-accent" onclick="openModal('postModal',true)"><i class="bi bi-plus-lg"></i> New-->
            <!--            Post</button>-->
            <!--    </div>-->
            <!--    <div class="card-box">-->
            <!--        <div style="overflow-x:auto">-->
            <!--            <table class="posts-table" id="postsTable">-->
            <!--                <thead>-->
            <!--                    <tr>-->
            <!--                        <th>Post</th>-->
            <!--                        <th>Type</th>-->
            <!--                        <th>Category</th>-->
            <!--                        <th>Status</th>-->
            <!--                        <th>Views</th>-->
            <!--                        <th>Date</th>-->
            <!--                        <th>Actions</th>-->
            <!--                    </tr>-->
            <!--                </thead>-->
            <!--                <tbody>-->
            <!--                    <tr>-->
            <!--                        <td>-->
            <!--                            <div style="display:flex;align-items:center;gap:10px">-->
            <!--                                <div-->
            <!--                                    style="width:48px;height:36px;border-radius:7px;background:linear-gradient(135deg,#e94560,#ff6b6b);flex-shrink:0">-->
            <!--                                </div>-->
            <!--                                <div>-->
            <!--                                    <div class="post-title-text" style="max-width:220px">Cambodia Economy-->
            <!--                                        Grows 7.2% in Q1</div>-->
            <!--                                    <div class="post-cat">May 6, 2026 · By Admin</div>-->
            <!--                                </div>-->
            <!--                            </div>-->
            <!--                        </td>-->
            <!--                        <td><span class="badge-status bs-pub">Article</span></td>-->
            <!--                        <td>Business</td>-->
            <!--                        <td><span class="badge-status bs-pub"><span-->
            <!--                                    class="status-dot dot-green"></span>Published</span></td>-->
            <!--                        <td>4,821</td>-->
            <!--                        <td style="color:var(--muted);font-size:12px">May 6</td>-->
            <!--                        <td>-->
            <!--                            <div style="display:flex;gap:5px"><button class="tbl-action"-->
            <!--                                    onclick="openEditPost()" title="Edit"><i-->
            <!--                                        class="bi bi-pencil"></i></button><button class="tbl-action"-->
            <!--                                    onclick="openViewPost()" title="View"><i-->
            <!--                                        class="bi bi-eye"></i></button><button class="tbl-action del"-->
            <!--                                    onclick="openConfirm('Delete this post? This cannot be undone.',()=>toast('Post deleted','success'))"-->
            <!--                                    title="Delete"><i class="bi bi-trash"></i></button></div>-->
            <!--                        </td>-->
            <!--                    </tr>-->
            <!--                    <tr>-->
            <!--                        <td>-->
            <!--                            <div style="display:flex;align-items:center;gap:10px">-->
            <!--                                <div-->
            <!--                                    style="width:48px;height:36px;border-radius:7px;background:linear-gradient(135deg,#1a73e8,#4fc3f7);flex-shrink:0">-->
            <!--                                </div>-->
            <!--                                <div>-->
            <!--                                    <div class="post-title-text" style="max-width:220px">Tech Summit 2026-->
            <!--                                        Highlights & Recap</div>-->
            <!--                                    <div class="post-cat">May 5, 2026 · By Dara</div>-->
            <!--                                </div>-->
            <!--                            </div>-->
            <!--                        </td>-->
            <!--                        <td><span class="badge-status bs-video">Video</span></td>-->
            <!--                        <td>Technology</td>-->
            <!--                        <td><span class="badge-status bs-pub"><span-->
            <!--                                    class="status-dot dot-green"></span>Published</span></td>-->
            <!--                        <td>2,340</td>-->
            <!--                        <td style="color:var(--muted);font-size:12px">May 5</td>-->
            <!--                        <td>-->
            <!--                            <div style="display:flex;gap:5px"><button class="tbl-action"-->
            <!--                                    onclick="openEditPost()"><i class="bi bi-pencil"></i></button><button-->
            <!--                                    class="tbl-action" onclick="openViewPost()"><i-->
            <!--                                        class="bi bi-eye"></i></button><button class="tbl-action del"-->
            <!--                                    onclick="openConfirm('Delete this post?',()=>toast('Post deleted','success'))"><i-->
            <!--                                        class="bi bi-trash"></i></button></div>-->
            <!--                        </td>-->
            <!--                    </tr>-->
            <!--                    <tr>-->
            <!--                        <td>-->
            <!--                            <div style="display:flex;align-items:center;gap:10px">-->
            <!--                                <div-->
            <!--                                    style="width:48px;height:36px;border-radius:7px;background:linear-gradient(135deg,#f5a623,#ffd700);flex-shrink:0">-->
            <!--                                </div>-->
            <!--                                <div>-->
            <!--                                    <div class="post-title-text" style="max-width:220px">National Football-->
            <!--                                        Team Qualifies for AFF</div>-->
            <!--                                    <div class="post-cat">May 4, 2026 · By Sreyna</div>-->
            <!--                                </div>-->
            <!--                            </div>-->
            <!--                        </td>-->
            <!--                        <td><span class="badge-status bs-pub">Article</span></td>-->
            <!--                        <td>Sports</td>-->
            <!--                        <td><span class="badge-status bs-draft"><span-->
            <!--                                    class="status-dot dot-amber"></span>Draft</span></td>-->
            <!--                        <td>—</td>-->
            <!--                        <td style="color:var(--muted);font-size:12px">May 4</td>-->
            <!--                        <td>-->
            <!--                            <div style="display:flex;gap:5px"><button class="tbl-action"-->
            <!--                                    onclick="openEditPost()"><i class="bi bi-pencil"></i></button><button-->
            <!--                                    class="tbl-action" onclick="openViewPost()"><i-->
            <!--                                        class="bi bi-eye"></i></button><button class="tbl-action del"-->
            <!--                                    onclick="openConfirm('Delete this post?',()=>toast('Post deleted','success'))"><i-->
            <!--                                        class="bi bi-trash"></i></button></div>-->
            <!--                        </td>-->
            <!--                    </tr>-->
            <!--                    <tr>-->
            <!--                        <td>-->
            <!--                            <div style="display:flex;align-items:center;gap:10px">-->
            <!--                                <div-->
            <!--                                    style="width:48px;height:36px;border-radius:7px;background:linear-gradient(135deg,#1ea75f,#a8e063);flex-shrink:0">-->
            <!--                                </div>-->
            <!--                                <div>-->
            <!--                                    <div class="post-title-text" style="max-width:220px">Health Ministry-->
            <!--                                        Launches New Program</div>-->
            <!--                                    <div class="post-cat">May 3, 2026 · By Admin</div>-->
            <!--                                </div>-->
            <!--                            </div>-->
            <!--                        </td>-->
            <!--                        <td><span class="badge-status bs-pub">Article</span></td>-->
            <!--                        <td>Health</td>-->
            <!--                        <td><span class="badge-status bs-pub"><span-->
            <!--                                    class="status-dot dot-green"></span>Published</span></td>-->
            <!--                        <td>1,892</td>-->
            <!--                        <td style="color:var(--muted);font-size:12px">May 3</td>-->
            <!--                        <td>-->
            <!--                            <div style="display:flex;gap:5px"><button class="tbl-action"-->
            <!--                                    onclick="openEditPost()"><i class="bi bi-pencil"></i></button><button-->
            <!--                                    class="tbl-action" onclick="openViewPost()"><i-->
            <!--                                        class="bi bi-eye"></i></button><button class="tbl-action del"-->
            <!--                                    onclick="openConfirm('Delete this post?',()=>toast('Post deleted','success'))"><i-->
            <!--                                        class="bi bi-trash"></i></button></div>-->
            <!--                        </td>-->
            <!--                    </tr>-->
            <!--                    <tr>-->
            <!--                        <td>-->
            <!--                            <div style="display:flex;align-items:center;gap:10px">-->
            <!--                                <div-->
            <!--                                    style="width:48px;height:36px;border-radius:7px;background:linear-gradient(135deg,#9c27b0,#e040fb);flex-shrink:0">-->
            <!--                                </div>-->
            <!--                                <div>-->
            <!--                                    <div class="post-title-text" style="max-width:220px">Education Reform: New-->
            <!--                                        Curriculum 2026</div>-->
            <!--                                    <div class="post-cat">May 2, 2026 · By Admin</div>-->
            <!--                                </div>-->
            <!--                            </div>-->
            <!--                        </td>-->
            <!--                        <td><span class="badge-status bs-pub">Article</span></td>-->
            <!--                        <td>Education</td>-->
            <!--                        <td><span class="badge-status bs-arch"><span-->
            <!--                                    class="status-dot dot-red"></span>Archived</span></td>-->
            <!--                        <td>968</td>-->
            <!--                        <td style="color:var(--muted);font-size:12px">May 2</td>-->
            <!--                        <td>-->
            <!--                            <div style="display:flex;gap:5px"><button class="tbl-action"-->
            <!--                                    onclick="openEditPost()"><i class="bi bi-pencil"></i></button><button-->
            <!--                                    class="tbl-action" onclick="openViewPost()"><i-->
            <!--                                        class="bi bi-eye"></i></button><button class="tbl-action del"-->
            <!--                                    onclick="openConfirm('Delete this post?',()=>toast('Post deleted','success'))"><i-->
            <!--                                        class="bi bi-trash"></i></button></div>-->
            <!--                        </td>-->
            <!--                    </tr>-->
            <!--                </tbody>-->
            <!--            </table>-->
            <!--        </div>-->
            <!--        <div class="pagination-wrap">-->
            <!--            <div class="pag-info">Showing 1–5 of 248 posts</div>-->
            <!--            <div class="pag-btns">-->
            <!--                <div class="pag-btn"><i class="bi bi-chevron-left"></i></div>-->
            <!--                <div class="pag-btn active">1</div>-->
            <!--                <div class="pag-btn">2</div>-->
            <!--                <div class="pag-btn">3</div>-->
            <!--                <div class="pag-btn">...</div>-->
            <!--                <div class="pag-btn">50</div>-->
            <!--                <div class="pag-btn"><i class="bi bi-chevron-right"></i></div>-->
            <!--            </div>-->
            <!--        </div>-->
            <!--    </div>-->
            <!--</div>-->
            <div class="page-section" id="page-posts">

                {{-- Flash messages --}}
                @if (session('success'))
                    <div
                        style="background:#ecfdf5;border:1px solid #6ee7b7;color:#065f46;padding:12px 16px;border-radius:6px;margin-bottom:16px;display:flex;align-items:center;gap:8px;font-size:13px">
                        <i class="bi bi-check-circle-fill"></i> {{ session('success') }}
                    </div>
                @endif
                @if ($errors->any())
                    <div
                        style="background:#fef2f2;border:1px solid #fca5a5;color:#991b1b;padding:12px 16px;border-radius:6px;margin-bottom:16px;display:flex;align-items:center;gap:8px;font-size:13px">
                        <i class="bi bi-exclamation-circle-fill"></i> {{ $errors->first() }}
                    </div>
                @endif

                {{-- Toolbar --}}
                <div class="crud-toolbar">
                    <form method="GET" action="{{ route('admin.posts.index') }}" id="filterForm"
                        style="display:flex;gap:10px;flex-wrap:wrap;flex:1">
                        <div class="search-wrap">
                            <i class="bi bi-search"></i>
                            <input class="search-input" name="search" placeholder="Search posts..."
                                value="{{ request('search') }}"
                                oninput="clearTimeout(window._st);window._st=setTimeout(()=>document.getElementById('filterForm').submit(),500)">
                        </div>
                        <select class="filter-select" name="status"
                            onchange="document.getElementById('filterForm').submit()">
                            <option value="">All Status</option>
                            <option value="published" {{ request('status') === 'published' ? 'selected' : '' }}>Published
                            </option>
                            <option value="draft" {{ request('status') === 'draft' ? 'selected' : '' }}>Draft</option>
                            <option value="archived" {{ request('status') === 'archived' ? 'selected' : '' }}>Archived
                            </option>
                        </select>
                        <select class="filter-select" name="type"
                            onchange="document.getElementById('filterForm').submit()">
                            <option value="">All Types</option>
                            <option value="article" {{ request('type') === 'article' ? 'selected' : '' }}>Article</option>
                            <option value="video" {{ request('type') === 'video' ? 'selected' : '' }}>Video</option>
                        </select>
                    </form>
                    <button class="btn-accent" onclick="openPostModal()">
                        <i class="bi bi-plus-lg"></i> New Post
                    </button>
                </div>

                {{-- Table --}}
                <div class="card-box">
                    <div style="overflow-x:auto">
                        <table class="posts-table" id="postsTable">
                            <thead>
                                <tr>
                                    <th>Post</th>
                                    <th>Type</th>
                                    <th>Category</th>
                                    <th>Status</th>
                                    <th>Views</th>
                                    <th>Date</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($posts as $post)
                                    @php
                                        $status = $post['status'] ?? 'draft';
                                        $type = $post['type'] ?? 'article';
                                        $title = $post['title_en'] ?? ($post['title'] ?? '—');
                                        $cover = $post['cover_image'] ?? null;
                                        $cat = $post['category']['name'] ?? ($post['category_name'] ?? '—');
                                        $views = $post['views_count'] ?? ($post['views'] ?? '—');
                                        $date = isset($post['created_at'])
                                            ? \Carbon\Carbon::parse($post['created_at'])->format('M d')
                                            : '—';
                                        $author = $post['author']['name'] ?? ($post['user']['name'] ?? 'Admin');

                                        $statusBadge = match ($status) {
                                            'published' => 'bs-pub',
                                            'draft' => 'bs-draft',
                                            'archived' => 'bs-arch',
                                            default => 'bs-draft',
                                        };
                                        $dotColor = match ($status) {
                                            'published' => 'dot-green',
                                            'draft' => 'dot-amber',
                                            'archived' => 'dot-red',
                                            default => 'dot-amber',
                                        };
                                    @endphp
                                    <tr>
                                        <td>
                                            <div style="display:flex;align-items:center;gap:10px">
                                                <div
                                                    style="width:48px;height:36px;border-radius:7px;overflow:hidden;flex-shrink:0;background:#e2e8f0;display:flex;align-items:center;justify-content:center">
                                                    @if ($cover)
                                                        <img src="{{ $cover }}"
                                                            style="width:100%;height:100%;object-fit:cover" alt=""
                                                            onerror="this.parentElement.innerHTML='📰'">
                                                    @else
                                                        <span style="font-size:18px">📰</span>
                                                    @endif
                                                </div>
                                                <div>
                                                    <div class="post-title-text"
                                                        style="max-width:220px;font-size:13px;font-weight:600;color:var(--text)">
                                                        {{ \Str::limit($title, 55) }}
                                                    </div>
                                                    <div class="post-cat" style="font-size:11px;color:var(--muted)">
                                                        {{ $date }} · By {{ $author }}
                                                    </div>
                                                </div>
                                            </div>
                                        </td>
                                        <td>
                                            <span class="badge-status {{ $type === 'video' ? 'bs-video' : 'bs-pub' }}">
                                                {{ ucfirst($type) }}
                                            </span>
                                        </td>
                                        <td style="font-size:13px;color:var(--text2)">{{ $cat }}</td>
                                        <td>
                                            <span class="badge-status {{ $statusBadge }}">
                                                <span class="status-dot {{ $dotColor }}"></span>
                                                {{ ucfirst($status) }}
                                            </span>
                                        </td>
                                        <td style="font-size:13px">
                                            {{ is_numeric($views) ? number_format($views) : $views }}
                                        </td>
                                        <td style="color:var(--muted);font-size:12px">{{ $date }}</td>
                                        <td>
                                            <div style="display:flex;gap:5px">
                                                {{-- Edit --}}
                                                <button class="tbl-action"
                                                    onclick="openEditPost({{ json_encode($post) }})" title="Edit">
                                                    <i class="bi bi-pencil"></i>
                                                </button>
                                                {{-- View --}}
                                                <a href="/news/{{ $post['slug'] ?? '' }}" target="_blank"
                                                    class="tbl-action" title="View">
                                                    <i class="bi bi-eye"></i>
                                                </a>
                                                {{-- Delete --}}
                                                <button class="tbl-action del"
                                                    onclick="confirmDelete({{ $post['id'] }})" title="Delete">
                                                    <i class="bi bi-trash"></i>
                                                </button>
                                            </div>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="7" style="text-align:center;padding:40px;color:var(--muted)">
                                            <i class="bi bi-file-earmark-x"
                                                style="font-size:32px;display:block;margin-bottom:8px;opacity:.3"></i>
                                            No posts found
                                        </td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>

                    {{-- Pagination --}}
                    <div class="pagination-wrap">
                        <div class="pag-info">
                            Showing {{ count($posts) }} of {{ $meta['total'] ?? count($posts) }} posts
                        </div>
                        @if (($meta['last_page'] ?? 1) > 1)
                            <div class="pag-btns">
                                @if (($meta['current_page'] ?? 1) > 1)
                                    <a href="{{ route('admin.posts.index', array_merge(request()->query(), ['page' => $meta['current_page'] - 1])) }}"
                                        class="pag-btn"><i class="bi bi-chevron-left"></i></a>
                                @endif

                                @for ($i = 1; $i <= ($meta['last_page'] ?? 1); $i++)
                                    <a href="{{ route('admin.posts.index', array_merge(request()->query(), ['page' => $i])) }}"
                                        class="pag-btn {{ $i == ($meta['current_page'] ?? 1) ? 'active' : '' }}">
                                        {{ $i }}
                                    </a>
                                @endfor

                                @if (($meta['current_page'] ?? 1) < ($meta['last_page'] ?? 1))
                                    <a href="{{ route('admin.posts.index', array_merge(request()->query(), ['page' => $meta['current_page'] + 1])) }}"
                                        class="pag-btn"><i class="bi bi-chevron-right"></i></a>
                                @endif
                            </div>
                        @endif
                    </div>
                </div>
            </div>

            <!-- ══ CATEGORIES ══ -->
            <div class="page-section" id="page-categories">
                <div class="crud-toolbar">
                    <div class="search-wrap"><i class="bi bi-search"></i><input class="search-input"
                            placeholder="Search categories..." oninput="filterTable('catsTable',this.value)"></div>
                    <button class="btn-accent" onclick="openModal('categoryModal',true)"><i class="bi bi-plus-lg"></i>
                        New Category</button>
                </div>
                <div class="card-box">
                    <div style="overflow-x:auto">
                        <table class="posts-table" id="catsTable">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>Cover</th>
                                    <th>Name (EN)</th>
                                    <th>Name (KH)</th>
                                    <th>Name (ZH)</th>
                                    <th>Slug</th>
                                    <th>Sort</th>
                                    <th>Status</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>1</td>
                                    <td>
                                        <div
                                            style="width:44px;height:32px;border-radius:6px;background:linear-gradient(135deg,#1a73e8,#4fc3f7)">
                                        </div>
                                    </td>
                                    <td><strong>Technology</strong></td>
                                    <td>បច្ចេកវិទ្យា</td>
                                    <td>技术</td>
                                    <td style="color:var(--muted);font-family:monospace;font-size:12px">technology</td>
                                    <td>1</td>
                                    <td><span class="badge-status bs-pub">Active</span></td>
                                    <td>
                                        <div style="display:flex;gap:5px"><button class="tbl-action"
                                                onclick="openModal('categoryModal')"><i
                                                    class="bi bi-pencil"></i></button><button class="tbl-action del"
                                                onclick="openConfirm('Delete this category? All posts will also be deleted.',()=>toast('Category deleted','success'))"><i
                                                    class="bi bi-trash"></i></button></div>
                                    </td>
                                </tr>
                                <tr>
                                    <td>2</td>
                                    <td>
                                        <div
                                            style="width:44px;height:32px;border-radius:6px;background:linear-gradient(135deg,#e94560,#ff6b6b)">
                                        </div>
                                    </td>
                                    <td><strong>Business</strong></td>
                                    <td>អាជីវកម្ម</td>
                                    <td>商业</td>
                                    <td style="color:var(--muted);font-family:monospace;font-size:12px">business</td>
                                    <td>2</td>
                                    <td><span class="badge-status bs-pub">Active</span></td>
                                    <td>
                                        <div style="display:flex;gap:5px"><button class="tbl-action"
                                                onclick="openModal('categoryModal')"><i
                                                    class="bi bi-pencil"></i></button><button class="tbl-action del"
                                                onclick="openConfirm('Delete this category?',()=>toast('Category deleted','success'))"><i
                                                    class="bi bi-trash"></i></button></div>
                                    </td>
                                </tr>
                                <tr>
                                    <td>3</td>
                                    <td>
                                        <div
                                            style="width:44px;height:32px;border-radius:6px;background:linear-gradient(135deg,#1ea75f,#a8e063)">
                                        </div>
                                    </td>
                                    <td><strong>Health</strong></td>
                                    <td>សុខភាព</td>
                                    <td>健康</td>
                                    <td style="color:var(--muted);font-family:monospace;font-size:12px">health</td>
                                    <td>3</td>
                                    <td><span class="badge-status bs-pub">Active</span></td>
                                    <td>
                                        <div style="display:flex;gap:5px"><button class="tbl-action"
                                                onclick="openModal('categoryModal')"><i
                                                    class="bi bi-pencil"></i></button><button class="tbl-action del"
                                                onclick="openConfirm('Delete this category?',()=>toast('Category deleted','success'))"><i
                                                    class="bi bi-trash"></i></button></div>
                                    </td>
                                </tr>
                                <tr>
                                    <td>4</td>
                                    <td>
                                        <div
                                            style="width:44px;height:32px;border-radius:6px;background:linear-gradient(135deg,#f5a623,#ffd700)">
                                        </div>
                                    </td>
                                    <td><strong>Sports</strong></td>
                                    <td>កីឡា</td>
                                    <td>体育</td>
                                    <td style="color:var(--muted);font-family:monospace;font-size:12px">sports</td>
                                    <td>4</td>
                                    <td><span class="badge-status bs-draft">Inactive</span></td>
                                    <td>
                                        <div style="display:flex;gap:5px"><button class="tbl-action"
                                                onclick="openModal('categoryModal')"><i
                                                    class="bi bi-pencil"></i></button><button class="tbl-action del"
                                                onclick="openConfirm('Delete this category?',()=>toast('Category deleted','success'))"><i
                                                    class="bi bi-trash"></i></button></div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <!-- ══ TAGS ══ -->
            <div class="page-section" id="page-tags">
                <div class="crud-toolbar">
                    <div class="search-wrap"><i class="bi bi-search"></i><input class="search-input"
                            placeholder="Search tags..."></div>
                    <button class="btn-accent" onclick="openModal('tagModal',true)"><i class="bi bi-plus-lg"></i> New
                        Tag</button>
                </div>
                <div class="card-box">
                    <div style="overflow-x:auto">
                        <table class="posts-table" id="tagsTable">
                            <thead>
                                <tr>
                                    <th>Name (EN)</th>
                                    <th>Name (KH)</th>
                                    <th>Slug</th>
                                    <th>Posts</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td><strong>Cambodia</strong></td>
                                    <td>កម្ពុជា</td>
                                    <td style="color:var(--muted);font-family:monospace;font-size:12px">cambodia</td>
                                    <td><span class="badge-status bs-pub">42</span></td>
                                    <td>
                                        <div style="display:flex;gap:5px"><button class="tbl-action"
                                                onclick="openModal('tagModal')"><i
                                                    class="bi bi-pencil"></i></button><button class="tbl-action del"
                                                onclick="openConfirm('Delete this tag?',()=>toast('Tag deleted','success'))"><i
                                                    class="bi bi-trash"></i></button></div>
                                    </td>
                                </tr>
                                <tr>
                                    <td><strong>Economy</strong></td>
                                    <td>សេដ្ឋកិច្ច</td>
                                    <td style="color:var(--muted);font-family:monospace;font-size:12px">economy</td>
                                    <td><span class="badge-status bs-pub">38</span></td>
                                    <td>
                                        <div style="display:flex;gap:5px"><button class="tbl-action"
                                                onclick="openModal('tagModal')"><i
                                                    class="bi bi-pencil"></i></button><button class="tbl-action del"
                                                onclick="openConfirm('Delete this tag?',()=>toast('Tag deleted','success'))"><i
                                                    class="bi bi-trash"></i></button></div>
                                    </td>
                                </tr>
                                <tr>
                                    <td><strong>Education</strong></td>
                                    <td>ការអប់រំ</td>
                                    <td style="color:var(--muted);font-family:monospace;font-size:12px">education</td>
                                    <td><span class="badge-status bs-pub">29</span></td>
                                    <td>
                                        <div style="display:flex;gap:5px"><button class="tbl-action"
                                                onclick="openModal('tagModal')"><i
                                                    class="bi bi-pencil"></i></button><button class="tbl-action del"
                                                onclick="openConfirm('Delete this tag?',()=>toast('Tag deleted','success'))"><i
                                                    class="bi bi-trash"></i></button></div>
                                    </td>
                                </tr>
                                <tr>
                                    <td><strong>Health</strong></td>
                                    <td>សុខភាព</td>
                                    <td style="color:var(--muted);font-family:monospace;font-size:12px">health</td>
                                    <td><span class="badge-status bs-video">24</span></td>
                                    <td>
                                        <div style="display:flex;gap:5px"><button class="tbl-action"
                                                onclick="openModal('tagModal')"><i
                                                    class="bi bi-pencil"></i></button><button class="tbl-action del"
                                                onclick="openConfirm('Delete this tag?',()=>toast('Tag deleted','success'))"><i
                                                    class="bi bi-trash"></i></button></div>
                                    </td>
                                </tr>
                                <tr>
                                    <td><strong>Startup</strong></td>
                                    <td>ស្ទាត​អាប</td>
                                    <td style="color:var(--muted);font-family:monospace;font-size:12px">startup</td>
                                    <td><span class="badge-status bs-arch">18</span></td>
                                    <td>
                                        <div style="display:flex;gap:5px"><button class="tbl-action"
                                                onclick="openModal('tagModal')"><i
                                                    class="bi bi-pencil"></i></button><button class="tbl-action del"
                                                onclick="openConfirm('Delete this tag?',()=>toast('Tag deleted','success'))"><i
                                                    class="bi bi-trash"></i></button></div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <!-- ══ COMMENTS ══ -->
            <div class="page-section" id="page-comments">
                <div class="crud-toolbar">
                    <div style="display:flex;gap:10px;flex-wrap:wrap">
                        <div class="search-wrap"><i class="bi bi-search"></i><input class="search-input"
                                placeholder="Search comments..."></div>
                        <select class="filter-select">
                            <option>All Status</option>
                            <option>Pending</option>
                            <option>Approved</option>
                        </select>
                    </div>
                    <span style="font-size:13px;color:var(--muted)"><span
                            style="background:var(--accent);color:#fff;font-size:11px;padding:3px 10px;border-radius:20px;font-weight:500">12
                            pending</span></span>
                </div>
                <div class="card-box">
                    <div style="overflow-x:auto">
                        <table class="posts-table">
                            <thead>
                                <tr>
                                    <th>Author</th>
                                    <th>Comment</th>
                                    <th>Post</th>
                                    <th>Status</th>
                                    <th>Date</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>
                                        <div style="font-weight:500">Sok Vanna</div>
                                        <div style="font-size:11px;color:var(--muted)">sok@email.com</div>
                                    </td>
                                    <td style="max-width:220px;font-size:13px;color:#555">Great article! Very informative
                                        and well-written...</td>
                                    <td style="font-size:12px;color:var(--muted)">Cambodia Economy</td>
                                    <td><span class="badge-status bs-draft"><span
                                                class="status-dot dot-amber"></span>Pending</span></td>
                                    <td style="font-size:12px;color:var(--muted)">May 6</td>
                                    <td>
                                        <div style="display:flex;gap:5px"><button class="tbl-action approve"
                                                onclick="toast('Comment approved','success')" title="Approve"><i
                                                    class="bi bi-check-lg"></i></button><button class="tbl-action"
                                                onclick="openViewComment()" title="View"><i
                                                    class="bi bi-eye"></i></button><button class="tbl-action del"
                                                onclick="openConfirm('Delete this comment?',()=>toast('Comment deleted','success'))"><i
                                                    class="bi bi-trash"></i></button></div>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <div style="font-weight:500">Chan Dara</div>
                                        <div style="font-size:11px;color:var(--muted)">dara@email.com</div>
                                    </td>
                                    <td style="max-width:220px;font-size:13px;color:#555">This is exactly what I needed.
                                        Thank you!</td>
                                    <td style="font-size:12px;color:var(--muted)">Tech Summit 2026</td>
                                    <td><span class="badge-status bs-pub"><span
                                                class="status-dot dot-green"></span>Approved</span></td>
                                    <td style="font-size:12px;color:var(--muted)">May 5</td>
                                    <td>
                                        <div style="display:flex;gap:5px"><button class="tbl-action"
                                                onclick="openViewComment()" title="View"><i
                                                    class="bi bi-eye"></i></button><button class="tbl-action del"
                                                onclick="openConfirm('Delete this comment?',()=>toast('Comment deleted','success'))"><i
                                                    class="bi bi-trash"></i></button></div>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <div style="font-weight:500">Meas Bunna</div>
                                        <div style="font-size:11px;color:var(--muted)">bunna@email.com</div>
                                    </td>
                                    <td style="max-width:220px;font-size:13px;color:#555">I disagree with some points here
                                        but overall good...</td>
                                    <td style="font-size:12px;color:var(--muted)">Health Program</td>
                                    <td><span class="badge-status bs-draft"><span
                                                class="status-dot dot-amber"></span>Pending</span></td>
                                    <td style="font-size:12px;color:var(--muted)">May 5</td>
                                    <td>
                                        <div style="display:flex;gap:5px"><button class="tbl-action approve"
                                                onclick="toast('Comment approved','success')"><i
                                                    class="bi bi-check-lg"></i></button><button class="tbl-action"
                                                onclick="openViewComment()"><i class="bi bi-eye"></i></button><button
                                                class="tbl-action del"
                                                onclick="openConfirm('Delete this comment?',()=>toast('Comment deleted','success'))"><i
                                                    class="bi bi-trash"></i></button></div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <!-- ══ USERS ══ -->
            <div class="page-section" id="page-users">
                <div class="crud-toolbar">
                    <div style="display:flex;gap:10px;flex-wrap:wrap">
                        <div class="search-wrap"><i class="bi bi-search"></i><input class="search-input"
                                placeholder="Search users..." oninput="filterTable('usersTable',this.value)"></div>
                        <select class="filter-select">
                            <option>All Roles</option>
                            <option>Admin</option>
                            <option>Editor</option>
                            <option>Author</option>
                        </select>
                    </div>
                    <button class="btn-accent" onclick="openModal('userModal',true)"><i class="bi bi-plus-lg"></i> Add
                        User</button>
                </div>
                <div class="card-box">
                    <div style="overflow-x:auto">
                        <table class="posts-table" id="usersTable">
                            <thead>
                                <tr>
                                    <th>User</th>
                                    <th>Role</th>
                                    <th>Status</th>
                                    <th>Posts</th>
                                    <th>Joined</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>
                                        <div style="display:flex;align-items:center;gap:10px"><img
                                                src="https://ui-avatars.com/api/?name=Dorn+Soknira&background=e94560&color=fff&size=40"
                                                style="width:34px;height:34px;border-radius:50%">
                                            <div>
                                                <div style="font-weight:500;font-size:13px">Dorn Soknira</div>
                                                <div style="font-size:11px;color:var(--muted)">dorn@kfa.com.kh</div>
                                            </div>
                                        </div>
                                    </td>
                                    <td><span class="badge-status"
                                            style="background:rgba(233,69,96,.1);color:var(--accent)">Admin</span></td>
                                    <td><span class="badge-status bs-pub">Active</span></td>
                                    <td>48</td>
                                    <td style="font-size:12px;color:var(--muted)">Apr 2026</td>
                                    <td>
                                        <div style="display:flex;gap:5px"><button class="tbl-action"
                                                onclick="openModal('userModal')"><i
                                                    class="bi bi-pencil"></i></button><button class="tbl-action"
                                                onclick="openViewUser()"><i class="bi bi-eye"></i></button><button
                                                class="tbl-action del"
                                                onclick="openConfirm('Delete this user account?',()=>toast('User deleted','success'))"><i
                                                    class="bi bi-trash"></i></button></div>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <div style="display:flex;align-items:center;gap:10px"><img
                                                src="https://ui-avatars.com/api/?name=Chan+Sreyleak&background=1a73e8&color=fff&size=40"
                                                style="width:34px;height:34px;border-radius:50%">
                                            <div>
                                                <div style="font-weight:500;font-size:13px">Chan Sreyleak</div>
                                                <div style="font-size:11px;color:var(--muted)">sreyleak@kfa.com.kh</div>
                                            </div>
                                        </div>
                                    </td>
                                    <td><span class="badge-status bs-video">Editor</span></td>
                                    <td><span class="badge-status bs-pub">Active</span></td>
                                    <td>32</td>
                                    <td style="font-size:12px;color:var(--muted)">May 2026</td>
                                    <td>
                                        <div style="display:flex;gap:5px"><button class="tbl-action"
                                                onclick="openModal('userModal')"><i
                                                    class="bi bi-pencil"></i></button><button class="tbl-action"
                                                onclick="openViewUser()"><i class="bi bi-eye"></i></button><button
                                                class="tbl-action del"
                                                onclick="openConfirm('Delete this user?',()=>toast('User deleted','success'))"><i
                                                    class="bi bi-trash"></i></button></div>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <div style="display:flex;align-items:center;gap:10px"><img
                                                src="https://ui-avatars.com/api/?name=Meas+Sreyna&background=1ea75f&color=fff&size=40"
                                                style="width:34px;height:34px;border-radius:50%">
                                            <div>
                                                <div style="font-weight:500;font-size:13px">Meas Sreyna</div>
                                                <div style="font-size:11px;color:var(--muted)">sreyna@kfa.com.kh</div>
                                            </div>
                                        </div>
                                    </td>
                                    <td><span class="badge-status bs-pub">Author</span></td>
                                    <td><span class="badge-status bs-pub">Active</span></td>
                                    <td>18</td>
                                    <td style="font-size:12px;color:var(--muted)">Apr 2026</td>
                                    <td>
                                        <div style="display:flex;gap:5px"><button class="tbl-action"
                                                onclick="openModal('userModal')"><i
                                                    class="bi bi-pencil"></i></button><button class="tbl-action"
                                                onclick="openViewUser()"><i class="bi bi-eye"></i></button><button
                                                class="tbl-action del"
                                                onclick="openConfirm('Delete this user?',()=>toast('User deleted','success'))"><i
                                                    class="bi bi-trash"></i></button></div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <!-- ══ CAREERS ══ -->
            <div class="page-section" id="page-careers">
                <div class="crud-toolbar">
                    <div class="search-wrap"><i class="bi bi-search"></i><input class="search-input"
                            placeholder="Search jobs..."></div>
                    <button class="btn-accent" onclick="openModal('careerModal',true)"><i class="bi bi-plus-lg"></i> Post
                        Job</button>
                </div>
                <div class="card-box">
                    <div style="overflow-x:auto">
                        <table class="posts-table">
                            <thead>
                                <tr>
                                    <th>Position</th>
                                    <th>Type</th>
                                    <th>Location</th>
                                    <th>Deadline</th>
                                    <th>Applications</th>
                                    <th>Status</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>
                                        <div style="font-weight:500">Senior Reporter</div>
                                        <div style="font-size:11px;color:var(--muted)">Journalism / Media</div>
                                    </td>
                                    <td>Full-time</td>
                                    <td>Phnom Penh</td>
                                    <td style="font-size:12px;color:var(--muted)">Jun 30, 2026</td>
                                    <td><span class="badge-status bs-pub">8 applied</span></td>
                                    <td><span class="badge-status bs-pub">Active</span></td>
                                    <td>
                                        <div style="display:flex;gap:5px"><button class="tbl-action"
                                                onclick="openModal('careerModal')"><i
                                                    class="bi bi-pencil"></i></button><button class="tbl-action"
                                                onclick="openViewCareer()"><i class="bi bi-eye"></i></button><button
                                                class="tbl-action del"
                                                onclick="openConfirm('Delete this job posting?',()=>toast('Job deleted','success'))"><i
                                                    class="bi bi-trash"></i></button></div>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <div style="font-weight:500">Video Editor</div>
                                        <div style="font-size:11px;color:var(--muted)">Media Production</div>
                                    </td>
                                    <td>Full-time</td>
                                    <td>Phnom Penh</td>
                                    <td style="font-size:12px;color:var(--muted)">Jul 15, 2026</td>
                                    <td><span class="badge-status bs-draft">3 applied</span></td>
                                    <td><span class="badge-status bs-pub">Active</span></td>
                                    <td>
                                        <div style="display:flex;gap:5px"><button class="tbl-action"
                                                onclick="openModal('careerModal')"><i
                                                    class="bi bi-pencil"></i></button><button class="tbl-action"
                                                onclick="openViewCareer()"><i class="bi bi-eye"></i></button><button
                                                class="tbl-action del"
                                                onclick="openConfirm('Delete this job?',()=>toast('Job deleted','success'))"><i
                                                    class="bi bi-trash"></i></button></div>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <div style="font-weight:500">Web Developer</div>
                                        <div style="font-size:11px;color:var(--muted)">Technology</div>
                                    </td>
                                    <td>Part-time</td>
                                    <td>Remote</td>
                                    <td style="font-size:12px;color:var(--muted)">Aug 1, 2026</td>
                                    <td><span class="badge-status bs-arch">1 applied</span></td>
                                    <td><span class="badge-status bs-draft">Paused</span></td>
                                    <td>
                                        <div style="display:flex;gap:5px"><button class="tbl-action"
                                                onclick="openModal('careerModal')"><i
                                                    class="bi bi-pencil"></i></button><button class="tbl-action"
                                                onclick="openViewCareer()"><i class="bi bi-eye"></i></button><button
                                                class="tbl-action del"
                                                onclick="openConfirm('Delete this job?',()=>toast('Job deleted','success'))"><i
                                                    class="bi bi-trash"></i></button></div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <!-- ══ MESSAGES ══ -->
            <div class="page-section" id="page-messages">
                <div class="crud-toolbar">
                    <div style="display:flex;gap:10px;flex-wrap:wrap">
                        <div class="search-wrap"><i class="bi bi-search"></i><input class="search-input"
                                placeholder="Search messages..."></div>
                        <select class="filter-select">
                            <option>All</option>
                            <option>Unread</option>
                            <option>Read</option>
                        </select>
                    </div>
                    <span class="badge-status"
                        style="background:var(--accent);color:#fff;font-size:12px;padding:6px 14px">7 unread</span>
                </div>
                <div class="card-box">
                    <div style="overflow-x:auto">
                        <table class="posts-table">
                            <thead>
                                <tr>
                                    <th>From</th>
                                    <th>Subject</th>
                                    <th>Message</th>
                                    <th>Status</th>
                                    <th>Date</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr style="font-weight:500">
                                    <td>
                                        <div>Sok Bunna</div>
                                        <div style="font-size:11px;color:var(--muted);font-weight:400">bunna@email.com
                                        </div>
                                    </td>
                                    <td>Advertising Inquiry</td>
                                    <td style="max-width:200px;font-size:13px;font-weight:400">I would like to know about
                                        advertising rates...</td>
                                    <td><span class="badge-status bs-draft"><span
                                                class="status-dot dot-amber"></span>Unread</span></td>
                                    <td style="font-size:12px;color:var(--muted)">May 7</td>
                                    <td>
                                        <div style="display:flex;gap:5px"><button class="tbl-action"
                                                onclick="openViewMessage()"><i class="bi bi-eye"></i></button><button
                                                class="tbl-action del"
                                                onclick="openConfirm('Delete this message?',()=>toast('Message deleted','success'))"><i
                                                    class="bi bi-trash"></i></button></div>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <div>Mey Sophea</div>
                                        <div style="font-size:11px;color:var(--muted)">sophea@email.com</div>
                                    </td>
                                    <td>Partnership Request</td>
                                    <td style="max-width:200px;font-size:13px">We're interested in a content partnership...
                                    </td>
                                    <td><span class="badge-status bs-pub"><span
                                                class="status-dot dot-green"></span>Read</span></td>
                                    <td style="font-size:12px;color:var(--muted)">May 6</td>
                                    <td>
                                        <div style="display:flex;gap:5px"><button class="tbl-action"
                                                onclick="openViewMessage()"><i class="bi bi-eye"></i></button><button
                                                class="tbl-action del"
                                                onclick="openConfirm('Delete this message?',()=>toast('Message deleted','success'))"><i
                                                    class="bi bi-trash"></i></button></div>
                                    </td>
                                </tr>
                                <tr style="font-weight:500">
                                    <td>
                                        <div>Pich Dara</div>
                                        <div style="font-size:11px;color:var(--muted);font-weight:400">pich@email.com</div>
                                    </td>
                                    <td>Press Credentials</td>
                                    <td style="max-width:200px;font-size:13px;font-weight:400">Requesting press credentials
                                        for the upcoming summit...</td>
                                    <td><span class="badge-status bs-draft"><span
                                                class="status-dot dot-amber"></span>Unread</span></td>
                                    <td style="font-size:12px;color:var(--muted)">May 5</td>
                                    <td>
                                        <div style="display:flex;gap:5px"><button class="tbl-action"
                                                onclick="openViewMessage()"><i class="bi bi-eye"></i></button><button
                                                class="tbl-action del"
                                                onclick="openConfirm('Delete this message?',()=>toast('Message deleted','success'))"><i
                                                    class="bi bi-trash"></i></button></div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <!-- ══ ABOUT ══ -->
            <div class="page-section" id="page-about">
                <!-- Main Info -->
                <div class="about-section">
                    <div class="about-section-hd">
                        <div class="about-section-title"><i class="bi bi-building"></i> Company Information</div>
                        <button class="btn-accent" style="padding:8px 16px;font-size:12px"
                            onclick="openModal('aboutMainModal')"><i class="bi bi-pencil"></i> Edit</button>
                    </div>
                    <div class="card-body">
                        <div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px">
                            <div>
                                <div style="font-size:11px;color:var(--muted);margin-bottom:4px">Company Name</div>
                                <div style="font-weight:500">KFA News</div>
                            </div>
                            <div>
                                <div style="font-size:11px;color:var(--muted);margin-bottom:4px">Email</div>
                                <div style="font-weight:500">info@kfa.com.kh</div>
                            </div>
                            <div>
                                <div style="font-size:11px;color:var(--muted);margin-bottom:4px">Phone</div>
                                <div style="font-weight:500">+855 23 000 000</div>
                            </div>
                            <div style="grid-column:span 3">
                                <div style="font-size:11px;color:var(--muted);margin-bottom:4px">Description (EN)</div>
                                <div style="font-size:13px;color:var(--muted)">KFA News is a leading digital news platform
                                    delivering accurate and timely news in Khmer, English and Chinese.</div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Stats -->
                <div class="about-section">
                    <div class="about-section-hd">
                        <div class="about-section-title"><i class="bi bi-bar-chart"></i> Stats / Experience Numbers</div>
                        <button class="btn-accent" style="padding:8px 16px;font-size:12px"
                            onclick="openModal('aboutStatModal',true)"><i class="bi bi-plus"></i> Add Stat</button>
                    </div>
                    <div class="about-grid">
                        <div class="about-item-card" onclick="openModal('aboutStatModal')">
                            <div class="about-item-icon">📅</div>
                            <div class="about-item-title">5+ Years Experience</div>
                            <div class="about-item-sub">ឆ្នាំបទពិសោធ · 年经验</div>
                        </div>
                        <div class="about-item-card" onclick="openModal('aboutStatModal')">
                            <div class="about-item-icon">👥</div>
                            <div class="about-item-title">500K Monthly Readers</div>
                            <div class="about-item-sub">អ្នកអានប្រចាំខែ · 月读者</div>
                        </div>
                        <div class="about-item-card" onclick="openModal('aboutStatModal')">
                            <div class="about-item-icon">✍️</div>
                            <div class="about-item-title">50+ Journalists</div>
                            <div class="about-item-sub">អ្នកយកព័ត៌មាន · 记者</div>
                        </div>
                        <div class="about-item-card" onclick="openModal('aboutStatModal')">
                            <div class="about-item-icon">📰</div>
                            <div class="about-item-title">10K+ Articles</div>
                            <div class="about-item-sub">ប្រកាសទាំងអស់ · 文章</div>
                        </div>
                        <div class="about-item-card" onclick="openModal('aboutStatModal')">
                            <div class="about-item-icon">🌐</div>
                            <div class="about-item-title">3 Languages</div>
                            <div class="about-item-sub">ភាសា · 语言</div>
                        </div>
                        <div class="about-item-card"
                            style="border:2px dashed var(--border);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:8px;cursor:pointer"
                            onclick="openModal('aboutStatModal',true)"><i class="bi bi-plus-lg"
                                style="font-size:20px;color:var(--muted)"></i>
                            <div style="font-size:12px;color:var(--muted)">Add Stat</div>
                        </div>
                    </div>
                </div>

                <!-- Timeline -->
                <div class="about-section">
                    <div class="about-section-hd">
                        <div class="about-section-title"><i class="bi bi-clock-history"></i> Timeline / History</div>
                        <button class="btn-accent" style="padding:8px 16px;font-size:12px"
                            onclick="openModal('aboutTimelineModal',true)"><i class="bi bi-plus"></i> Add</button>
                    </div>
                    <div class="card-body">
                        <table class="posts-table">
                            <thead>
                                <tr>
                                    <th>Year</th>
                                    <th>Title (EN)</th>
                                    <th>Title (KH)</th>
                                    <th>Icon</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td><strong>2020</strong></td>
                                    <td>Founded KFA News</td>
                                    <td>បង្កើត KFA News</td>
                                    <td><i class="bi bi-flag-fill" style="color:#0d6efd"></i></td>
                                    <td>
                                        <div style="display:flex;gap:5px"><button class="tbl-action"
                                                onclick="openModal('aboutTimelineModal')"><i
                                                    class="bi bi-pencil"></i></button><button class="tbl-action del"
                                                onclick="openConfirm('Delete this timeline entry?',()=>toast('Deleted','success'))"><i
                                                    class="bi bi-trash"></i></button></div>
                                    </td>
                                </tr>
                                <tr>
                                    <td><strong>2021</strong></td>
                                    <td>Reached 100K Readers</td>
                                    <td>ទទួលបានអ្នកអាន ១០០,០០០</td>
                                    <td><i class="bi bi-people-fill" style="color:#10b981"></i></td>
                                    <td>
                                        <div style="display:flex;gap:5px"><button class="tbl-action"
                                                onclick="openModal('aboutTimelineModal')"><i
                                                    class="bi bi-pencil"></i></button><button class="tbl-action del"
                                                onclick="openConfirm('Delete?',()=>toast('Deleted','success'))"><i
                                                    class="bi bi-trash"></i></button></div>
                                    </td>
                                </tr>
                                <tr>
                                    <td><strong>2023</strong></td>
                                    <td>Added AI & Chinese</td>
                                    <td>បន្ថែម AI និងភាសាចិន</td>
                                    <td><i class="bi bi-cpu-fill" style="color:#8b5cf6"></i></td>
                                    <td>
                                        <div style="display:flex;gap:5px"><button class="tbl-action"
                                                onclick="openModal('aboutTimelineModal')"><i
                                                    class="bi bi-pencil"></i></button><button class="tbl-action del"
                                                onclick="openConfirm('Delete?',()=>toast('Deleted','success'))"><i
                                                    class="bi bi-trash"></i></button></div>
                                    </td>
                                </tr>
                                <tr>
                                    <td><strong>2026</strong></td>
                                    <td>Launched API Platform</td>
                                    <td>បើកដំណើរការ API</td>
                                    <td><i class="bi bi-lightning-fill" style="color:#f59e0b"></i></td>
                                    <td>
                                        <div style="display:flex;gap:5px"><button class="tbl-action"
                                                onclick="openModal('aboutTimelineModal')"><i
                                                    class="bi bi-pencil"></i></button><button class="tbl-action del"
                                                onclick="openConfirm('Delete?',()=>toast('Deleted','success'))"><i
                                                    class="bi bi-trash"></i></button></div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>

                <!-- Values / Principles -->
                <div class="about-section">
                    <div class="about-section-hd">
                        <div class="about-section-title"><i class="bi bi-stars"></i> Values &amp; Principles</div>
                        <button class="btn-accent" style="padding:8px 16px;font-size:12px"
                            onclick="openModal('aboutValueModal',true)"><i class="bi bi-plus"></i> Add</button>
                    </div>
                    <div class="about-grid">
                        <div class="about-item-card" onclick="openModal('aboutValueModal')">
                            <div class="about-item-icon"><i class="bi bi-shield-check-fill"
                                    style="color:#0d6efd;font-size:22px"></i></div>
                            <div class="about-item-title">Integrity</div>
                            <div class="about-item-sub">ភាពស្មោះត្រង់ · 诚信</div>
                        </div>
                        <div class="about-item-card" onclick="openModal('aboutValueModal')">
                            <div class="about-item-icon"><i class="bi bi-lightning-charge-fill"
                                    style="color:#ef4444;font-size:22px"></i></div>
                            <div class="about-item-title">Speed</div>
                            <div class="about-item-sub">ភាពឆាប់រហ័ស · 快速</div>
                        </div>
                        <div class="about-item-card" onclick="openModal('aboutValueModal')">
                            <div class="about-item-icon"><i class="bi bi-award-fill"
                                    style="color:#10b981;font-size:22px"></i></div>
                            <div class="about-item-title">Independence</div>
                            <div class="about-item-sub">ឯករាជ្យភាព · 独立</div>
                        </div>
                        <div class="about-item-card" onclick="openModal('aboutValueModal')">
                            <div class="about-item-icon"><i class="bi bi-globe-americas"
                                    style="color:#8b5cf6;font-size:22px"></i></div>
                            <div class="about-item-title">Diversity</div>
                            <div class="about-item-sub">ភាពចម្រុះ · 多样性</div>
                        </div>
                        <div class="about-item-card" onclick="openModal('aboutValueModal')">
                            <div class="about-item-icon"><i class="bi bi-gem"
                                    style="color:#f59e0b;font-size:22px"></i>
                            </div>
                            <div class="about-item-title">Quality</div>
                            <div class="about-item-sub">គុណភាព · 质量</div>
                        </div>
                        <div class="about-item-card"
                            style="border:2px dashed var(--border);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:8px;cursor:pointer"
                            onclick="openModal('aboutValueModal',true)"><i class="bi bi-plus-lg"
                                style="font-size:20px;color:var(--muted)"></i>
                            <div style="font-size:12px;color:var(--muted)">Add Value</div>
                        </div>
                    </div>
                </div>

                <!-- Team -->
                <div class="about-section">
                    <div class="about-section-hd">
                        <div class="about-section-title"><i class="bi bi-people-fill"></i> Team Members</div>
                        <button class="btn-accent" style="padding:8px 16px;font-size:12px"
                            onclick="openModal('teamModal',true)"><i class="bi bi-plus"></i> Add Member</button>
                    </div>
                    <div class="card-body">
                        <div style="display:grid;grid-template-columns:1fr 1fr;gap:10px">
                            <div class="team-card-admin" onclick="openModal('teamModal')">
                                <div class="team-avatar-sm">ស</div>
                                <div style="flex:1">
                                    <div style="font-weight:600;font-size:13px">សុខ វណ្ណៈ</div>
                                    <div style="font-size:11px;color:var(--muted)">Chief Editor</div>
                                </div>
                                <div style="display:flex;gap:4px"><button class="tbl-action"
                                        style="font-size:12px;padding:3px 7px"
                                        onclick="event.stopPropagation();openModal('teamModal')"><i
                                            class="bi bi-pencil"></i></button><button class="tbl-action del"
                                        style="font-size:12px;padding:3px 7px"
                                        onclick="event.stopPropagation();openConfirm('Remove this team member?',()=>toast('Member removed','success'))"><i
                                            class="bi bi-trash"></i></button></div>
                            </div>
                            <div class="team-card-admin" onclick="openModal('teamModal')">
                                <div class="team-avatar-sm" style="background:#7c3aed">ច</div>
                                <div style="flex:1">
                                    <div style="font-weight:600;font-size:13px">ចាន់ ដារ៉ា</div>
                                    <div style="font-size:11px;color:var(--muted)">Tech Editor</div>
                                </div>
                                <div style="display:flex;gap:4px"><button class="tbl-action"
                                        style="font-size:12px;padding:3px 7px"
                                        onclick="event.stopPropagation();openModal('teamModal')"><i
                                            class="bi bi-pencil"></i></button><button class="tbl-action del"
                                        style="font-size:12px;padding:3px 7px"
                                        onclick="event.stopPropagation();openConfirm('Remove?',()=>toast('Member removed','success'))"><i
                                            class="bi bi-trash"></i></button></div>
                            </div>
                            <div class="team-card-admin" onclick="openModal('teamModal')">
                                <div class="team-avatar-sm" style="background:#065f46">ម</div>
                                <div style="flex:1">
                                    <div style="font-weight:600;font-size:13px">មាស ស្រីណា</div>
                                    <div style="font-size:11px;color:var(--muted)">Sports Reporter</div>
                                </div>
                                <div style="display:flex;gap:4px"><button class="tbl-action"
                                        style="font-size:12px;padding:3px 7px"
                                        onclick="event.stopPropagation();openModal('teamModal')"><i
                                            class="bi bi-pencil"></i></button><button class="tbl-action del"
                                        style="font-size:12px;padding:3px 7px"
                                        onclick="event.stopPropagation();openConfirm('Remove?',()=>toast('Member removed','success'))"><i
                                            class="bi bi-trash"></i></button></div>
                            </div>
                            <div class="team-card-admin" onclick="openModal('teamModal')">
                                <div class="team-avatar-sm" style="background:#92400e">រ</div>
                                <div style="flex:1">
                                    <div style="font-weight:600;font-size:13px">រស្មី ចន្ទ</div>
                                    <div style="font-size:11px;color:var(--muted)">Entertainment</div>
                                </div>
                                <div style="display:flex;gap:4px"><button class="tbl-action"
                                        style="font-size:12px;padding:3px 7px"
                                        onclick="event.stopPropagation();openModal('teamModal')"><i
                                            class="bi bi-pencil"></i></button><button class="tbl-action del"
                                        style="font-size:12px;padding:3px 7px"
                                        onclick="event.stopPropagation();openConfirm('Remove?',()=>toast('Member removed','success'))"><i
                                            class="bi bi-trash"></i></button></div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Awards -->
                <div class="about-section">
                    <div class="about-section-hd">
                        <div class="about-section-title"><i class="bi bi-trophy-fill"></i> Awards &amp; Recognition
                        </div>
                        <button class="btn-accent" style="padding:8px 16px;font-size:12px"
                            onclick="openModal('awardModal',true)"><i class="bi bi-plus"></i> Add Award</button>
                    </div>
                    <div class="card-body">
                        <table class="posts-table">
                            <thead>
                                <tr>
                                    <th>Icon</th>
                                    <th>Title</th>
                                    <th>Organization</th>
                                    <th>Year</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td style="font-size:20px">🏆</td>
                                    <td><strong>Best Digital News</strong>
                                        <div style="font-size:11px;color:var(--muted)">ព័ត៌មានឌីជីថលល្អបំផុត · 最佳数字新闻
                                        </div>
                                    </td>
                                    <td>Cambodia Media Awards</td>
                                    <td>2023</td>
                                    <td>
                                        <div style="display:flex;gap:5px"><button class="tbl-action"
                                                onclick="openModal('awardModal')"><i
                                                    class="bi bi-pencil"></i></button><button class="tbl-action del"
                                                onclick="openConfirm('Delete this award?',()=>toast('Award deleted','success'))"><i
                                                    class="bi bi-trash"></i></button></div>
                                    </td>
                                </tr>
                                <tr>
                                    <td style="font-size:20px">🥇</td>
                                    <td><strong>Fast Growing Media</strong>
                                        <div style="font-size:11px;color:var(--muted)">ប្រព័ន្ធផ្សព្វផ្សាយ · 快速增长媒体</div>
                                    </td>
                                    <td>ASEAN Digital Awards</td>
                                    <td>2022</td>
                                    <td>
                                        <div style="display:flex;gap:5px"><button class="tbl-action"
                                                onclick="openModal('awardModal')"><i
                                                    class="bi bi-pencil"></i></button><button class="tbl-action del"
                                                onclick="openConfirm('Delete?',()=>toast('Award deleted','success'))"><i
                                                    class="bi bi-trash"></i></button></div>
                                    </td>
                                </tr>
                                <tr>
                                    <td style="font-size:20px">⭐</td>
                                    <td><strong>Best Khmer App</strong>
                                        <div style="font-size:11px;color:var(--muted)">កម្មវិធី App ខ្មែរ · 最佳应用</div>
                                    </td>
                                    <td>Google Play Choice</td>
                                    <td>2023</td>
                                    <td>
                                        <div style="display:flex;gap:5px"><button class="tbl-action"
                                                onclick="openModal('awardModal')"><i
                                                    class="bi bi-pencil"></i></button><button class="tbl-action del"
                                                onclick="openConfirm('Delete?',()=>toast('Award deleted','success'))"><i
                                                    class="bi bi-trash"></i></button></div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <!-- ══ CONTACT ══ -->
            <div class="page-section" id="page-contact">
                <div class="card-box">
                    <div class="card-header">
                        <div class="card-title"><i class="bi bi-telephone"></i> Contact Information</div><button
                            class="btn-accent" style="padding:8px 16px;font-size:12px"
                            onclick="toast('Contact info saved','success')"><i class="bi bi-save"></i> Save</button>
                    </div>
                    <div class="card-body">
                        <div style="display:grid;grid-template-columns:1fr 1fr;gap:16px">
                            <div class="fm-group"><label class="fm-label">Office Name (EN)</label><input
                                    type="text" class="fm-input" value="KFA Head Office"></div>
                            <div class="fm-group"><label class="fm-label">Office Name (KH)</label><input
                                    type="text" class="fm-input" value="ការិយាល័យ KFA"></div>
                            <div class="fm-group"><label class="fm-label">Email</label><input type="email"
                                    class="fm-input" value="info@kfa.com.kh"></div>
                            <div class="fm-group"><label class="fm-label">Hotline</label><input type="text"
                                    class="fm-input" value="+855 23 000 000"></div>
                            <div class="fm-group"><label class="fm-label">Latitude</label><input type="text"
                                    class="fm-input" value="11.5449"></div>
                            <div class="fm-group"><label class="fm-label">Longitude</label><input type="text"
                                    class="fm-input" value="104.9220"></div>
                            <div class="fm-group" style="grid-column:span 2"><label class="fm-label">Address
                                    (EN)</label><input type="text" class="fm-input"
                                    value="#36A, St.04 Borey Peng Hourt, Phnom Penh"></div>
                            <div class="fm-group" style="grid-column:span 2"><label class="fm-label">Address
                                    (KH)</label><input type="text" class="fm-input"
                                    value="អគារ #36A ផ្លូវទី 04 បុរីប៉េង ហួត ភ្នំពេញ"></div>
                        </div>
                    </div>
                </div>
                <div style="margin-top:20px" class="card-box">
                    <div class="card-header">
                        <div class="card-title"><i class="bi bi-envelope"></i> Contact Messages <span
                                style="background:var(--accent);color:#fff;font-size:11px;padding:2px 8px;border-radius:10px;margin-left:6px">7
                                unread</span></div>
                    </div>
                    <div style="overflow-x:auto">
                        <table class="posts-table">
                            <thead>
                                <tr>
                                    <th>From</th>
                                    <th>Subject</th>
                                    <th>Status</th>
                                    <th>Date</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr style="font-weight:500">
                                    <td>
                                        <div>Sok Bunna</div>
                                        <div style="font-size:11px;color:var(--muted);font-weight:400">bunna@email.com
                                        </div>
                                    </td>
                                    <td>Advertising Inquiry</td>
                                    <td><span class="badge-status bs-draft">Unread</span></td>
                                    <td style="font-size:12px;color:var(--muted)">May 7</td>
                                    <td>
                                        <div style="display:flex;gap:5px"><button class="tbl-action"
                                                onclick="openViewMessage()"><i class="bi bi-eye"></i></button><button
                                                class="tbl-action del"
                                                onclick="openConfirm('Delete?',()=>toast('Deleted','success'))"><i
                                                    class="bi bi-trash"></i></button></div>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <div>Mey Sophea</div>
                                        <div style="font-size:11px;color:var(--muted)">sophea@email.com</div>
                                    </td>
                                    <td>Partnership Request</td>
                                    <td><span class="badge-status bs-pub">Read</span></td>
                                    <td style="font-size:12px;color:var(--muted)">May 6</td>
                                    <td>
                                        <div style="display:flex;gap:5px"><button class="tbl-action"
                                                onclick="openViewMessage()"><i class="bi bi-eye"></i></button><button
                                                class="tbl-action del"
                                                onclick="openConfirm('Delete?',()=>toast('Deleted','success'))"><i
                                                    class="bi bi-trash"></i></button></div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <!-- ══ PRIVACY ══ -->
            <div class="page-section" id="page-privacy">
                <div class="card-box">
                    <div class="card-header">
                        <div class="card-title"><i class="bi bi-shield-check"></i> Privacy Policy</div><button
                            class="btn-accent" style="padding:8px 16px;font-size:12px"
                            onclick="toast('Privacy policy saved','success')"><i class="bi bi-save"></i> Save</button>
                    </div>
                    <div class="card-body">
                        <div class="lang-tabs" style="margin-bottom:16px">
                            <button class="lang-tab active" onclick="switchLangTab(this,'privEn')">🇺🇸 English</button>
                            <button class="lang-tab" onclick="switchLangTab(this,'privKh')">🇰🇭 Khmer</button>
                            <button class="lang-tab" onclick="switchLangTab(this,'privZh')">🇨🇳 Chinese</button>
                        </div>
                        <div id="privEn" class="lang-panel active">
                            <div class="fm-group"><label class="fm-label">Title (EN)</label><input type="text"
                                    class="fm-input" value="Privacy Policy"></div>
                            <div class="fm-group"><label class="fm-label">Content (EN)</label>
                                <textarea class="fm-input" rows="10">This Privacy Policy describes how KFA News collects, uses, and shares information about you when you use our services...</textarea>
                            </div>
                        </div>
                        <div id="privKh" class="lang-panel">
                            <div class="fm-group"><label class="fm-label">Title (KH)</label><input type="text"
                                    class="fm-input" value="គោលការណ៍ភាពឯកជន"></div>
                            <div class="fm-group"><label class="fm-label">Content (KH)</label>
                                <textarea class="fm-input" rows="10">គោលការណ៍ភាពឯកជននេះ ពិពណ៌នាអំពីរបៀបដែល KFA News ប្រមូល...</textarea>
                            </div>
                        </div>
                        <div id="privZh" class="lang-panel">
                            <div class="fm-group"><label class="fm-label">Title (ZH)</label><input type="text"
                                    class="fm-input" value="隐私政策"></div>
                            <div class="fm-group"><label class="fm-label">Content (ZH)</label>
                                <textarea class="fm-input" rows="10">本隐私政策描述了KFA新闻如何收集、使用和共享您的信息...</textarea>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- ══ PROFILE ══ -->
            <div class="page-section" id="page-profile">
                <div class="card-box" style="margin-bottom:20px">
                    <div class="cover-banner"></div>
                    <div class="profile-hd">
                        <img src="https://ui-avatars.com/api/?name=Dorn+Soknira&background=e94560&color=fff&size=200"
                            class="profile-av" alt>
                        <div style="flex:1;padding-top:12px">
                            <div style="font-family:'Playfair Display',serif;font-size:22px;font-weight:600">Dorn Soknira
                            </div>
                            <div
                                style="display:inline-flex;align-items:center;gap:5px;background:rgba(233,69,96,.1);color:var(--accent);font-size:12px;padding:3px 10px;border-radius:20px;margin:6px 0">
                                <i class="bi bi-shield-fill-check" style="font-size:11px"></i> Administrator
                            </div>
                            <div class="profile-meta-row"><span><i class="bi bi-geo-alt"></i> Phnom Penh</span><span><i
                                        class="bi bi-calendar3"></i> Apr 2026</span><span><i class="bi bi-envelope"></i>
                                    dorn@kfa.com.kh</span></div>
                        </div>
                        <div style="display:flex;gap:10px;padding-top:16px">
                            <button class="btn-accent" onclick="openModal('profileEditModal')"><i
                                    class="bi bi-pencil"></i> Edit Profile</button>
                            <button
                                style="background:var(--surface);border:1px solid var(--border);padding:9px 16px;border-radius:10px;font-size:13px;cursor:pointer"
                                onclick="openModal('passwordModal')"><i class="bi bi-shield-lock"></i> Password</button>
                        </div>
                    </div>
                </div>
                <div style="display:grid;grid-template-columns:1fr 340px;gap:20px">
                    <div class="card-box">
                        <div class="card-header">
                            <div class="card-title"><i class="bi bi-person-lines-fill"></i> Profile Info</div>
                        </div>
                        <div class="card-body" style="padding-top:8px">
                            <div class="detail-row">
                                <div class="detail-icon"><i class="bi bi-person"></i></div>
                                <div>
                                    <div class="detail-label">Full Name</div>
                                    <div class="detail-value">Dorn Soknira</div>
                                </div>
                            </div>
                            <div class="detail-row">
                                <div class="detail-icon"><i class="bi bi-envelope"></i></div>
                                <div>
                                    <div class="detail-label">Email</div>
                                    <div class="detail-value">dorn@kfa.com.kh</div>
                                </div>
                            </div>
                            <div class="detail-row">
                                <div class="detail-icon"><i class="bi bi-phone"></i></div>
                                <div>
                                    <div class="detail-label">Phone</div>
                                    <div class="detail-value">+855 99 283 388</div>
                                </div>
                            </div>
                            <div class="detail-row">
                                <div class="detail-icon"><i class="bi bi-calendar3"></i></div>
                                <div>
                                    <div class="detail-label">Date of Birth</div>
                                    <div class="detail-value">January 15, 1995</div>
                                </div>
                            </div>
                            <div class="detail-row">
                                <div class="detail-icon"><i class="bi bi-geo-alt"></i></div>
                                <div>
                                    <div class="detail-label">Location</div>
                                    <div class="detail-value">Phnom Penh, Cambodia</div>
                                </div>
                            </div>
                            <div class="detail-row">
                                <div class="detail-icon"><i class="bi bi-chat-quote"></i></div>
                                <div>
                                    <div class="detail-label">Bio</div>
                                    <div class="detail-value" style="color:var(--muted)">Passionate journalist with 5+
                                        years in digital media.</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div>
                        <div class="card-box" style="margin-bottom:16px">
                            <div class="card-header">
                                <div class="card-title"><i class="bi bi-bar-chart"></i> My Stats</div>
                            </div>
                            <div class="card-body">
                                <div style="display:grid;grid-template-columns:1fr 1fr;gap:12px">
                                    <div
                                        style="text-align:center;padding:14px;background:var(--surface);border-radius:10px">
                                        <div style="font-family:'Playfair Display',serif;font-size:22px;font-weight:600">
                                            48</div>
                                        <div style="font-size:11px;color:var(--muted)">Posts</div>
                                    </div>
                                    <div
                                        style="text-align:center;padding:14px;background:var(--surface);border-radius:10px">
                                        <div style="font-family:'Playfair Display',serif;font-size:22px;font-weight:600">
                                            12.4K</div>
                                        <div style="font-size:11px;color:var(--muted)">Views</div>
                                    </div>
                                    <div
                                        style="text-align:center;padding:14px;background:var(--surface);border-radius:10px">
                                        <div style="font-family:'Playfair Display',serif;font-size:22px;font-weight:600">
                                            284</div>
                                        <div style="font-size:11px;color:var(--muted)">Comments</div>
                                    </div>
                                    <div
                                        style="text-align:center;padding:14px;background:var(--surface);border-radius:10px">
                                        <div style="font-family:'Playfair Display',serif;font-size:22px;font-weight:600">
                                            96%</div>
                                        <div style="font-size:11px;color:var(--muted)">Approval</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="card-box">
                            <div class="card-header">
                                <div class="card-title"><i class="bi bi-share"></i> Social Links</div>
                            </div>
                            <div class="card-body" style="display:flex;flex-direction:column;gap:10px;padding-top:8px">
                                <a href="#"
                                    style="display:flex;align-items:center;gap:10px;padding:10px;border:1px solid var(--border);border-radius:10px;text-decoration:none;color:var(--primary)">
                                    <div
                                        style="width:32px;height:32px;border-radius:8px;background:rgba(24,119,242,.1);display:flex;align-items:center;justify-content:center">
                                        <i class="bi bi-facebook" style="color:#1877f2"></i>
                                    </div><span style="font-size:13px">facebook.com/dornsoknira</span><i
                                        class="bi bi-arrow-up-right" style="margin-left:auto;color:var(--muted)"></i>
                                </a>
                                <a href="#"
                                    style="display:flex;align-items:center;gap:10px;padding:10px;border:1px solid var(--border);border-radius:10px;text-decoration:none;color:var(--primary)">
                                    <div
                                        style="width:32px;height:32px;border-radius:8px;background:rgba(0,136,204,.1);display:flex;align-items:center;justify-content:center">
                                        <i class="bi bi-telegram" style="color:#0088cc"></i>
                                    </div><span style="font-size:13px">t.me/dornsoknira</span><i
                                        class="bi bi-arrow-up-right" style="margin-left:auto;color:var(--muted)"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- ══ SETTINGS ══ -->
            <div class="page-section" id="page-settings">
                <div class="card-box">
                    <div class="card-header">
                        <div class="card-title"><i class="bi bi-gear"></i> System Settings</div><button
                            class="btn-accent" style="padding:8px 16px;font-size:12px"
                            onclick="toast('Settings saved','success')"><i class="bi bi-save"></i> Save</button>
                    </div>
                    <div class="card-body" style="display:flex;flex-direction:column;gap:0">
                        <div
                            style="display:flex;align-items:center;justify-content:space-between;padding:16px 0;border-bottom:1px solid var(--border)">
                            <div>
                                <div style="font-size:14px;font-weight:500">Site Maintenance Mode</div>
                                <div style="font-size:12px;color:var(--muted)">Temporarily disable the public site</div>
                            </div>
                            <div class="form-check form-switch mb-0"><input class="form-check-input" type="checkbox"
                                    style="cursor:pointer"></div>
                        </div>
                        <div
                            style="display:flex;align-items:center;justify-content:space-between;padding:16px 0;border-bottom:1px solid var(--border)">
                            <div>
                                <div style="font-size:14px;font-weight:500">Comment Auto-Approval</div>
                                <div style="font-size:12px;color:var(--muted)">Skip moderation for verified users</div>
                            </div>
                            <div class="form-check form-switch mb-0"><input class="form-check-input" type="checkbox"
                                    checked style="cursor:pointer"></div>
                        </div>
                        <div
                            style="display:flex;align-items:center;justify-content:space-between;padding:16px 0;border-bottom:1px solid var(--border)">
                            <div>
                                <div style="font-size:14px;font-weight:500">Email Notifications</div>
                                <div style="font-size:12px;color:var(--muted)">Receive alerts for new messages</div>
                            </div>
                            <div class="form-check form-switch mb-0"><input class="form-check-input" type="checkbox"
                                    checked style="cursor:pointer"></div>
                        </div>
                        <div style="display:flex;align-items:center;justify-content:space-between;padding:16px 0">
                            <div>
                                <div style="font-size:14px;font-weight:500">Allow User Registration</div>
                                <div style="font-size:12px;color:var(--muted)">Let new users sign up publicly</div>
                            </div>
                            <div class="form-check form-switch mb-0"><input class="form-check-input" type="checkbox"
                                    checked style="cursor:pointer"></div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- ══ ANALYTICS ══ -->
            <div class="page-section" id="page-analytics">
                <div class="card-box" style="padding:60px;text-align:center"><i class="bi bi-bar-chart-line"
                        style="font-size:48px;color:var(--accent)"></i>
                    <h3 style="font-family:'Playfair Display',serif;margin:16px 0 8px">Analytics</h3>
                    <p style="color:var(--muted)">Detailed analytics coming soon.</p>
                </div>
            </div>

        </div>
    </div>

    <!-- ════════ MODALS ════════ -->

    <!-- POST MODAL -->
    <!--<div class="modal-backdrop-custom" id="postModal">-->
    <!--    <div class="modal-box modal-lg">-->
    <!--        <div class="modal-header">-->
    <!--            <div class="modal-title"><i class="bi bi-newspaper"></i> <span id="postModalTitle">New Post</span>-->
    <!--            </div>-->
    <!--            <div class="modal-close" onclick="closeModal('postModal')"><i class="bi bi-x-lg"></i></div>-->
    <!--        </div>-->
    <!--        <div class="modal-body">-->
    <!--            <div class="lang-tabs">-->
    <!--                <button class="lang-tab active" onclick="switchLangTab(this,'postEn')">🇺🇸 English</button>-->
    <!--                <button class="lang-tab" onclick="switchLangTab(this,'postKh')">🇰🇭 Khmer</button>-->
    <!--                <button class="lang-tab" onclick="switchLangTab(this,'postZh')">🇨🇳 Chinese</button>-->
    <!--            </div>-->
    <!--            <div id="postEn" class="lang-panel active">-->
    <!--                <div class="fm-group"><label class="fm-label">Title (EN) *</label><input type="text"-->
    <!--                        class="fm-input" placeholder="Post title in English"></div>-->
    <!--                <div class="fm-group"><label class="fm-label">Excerpt (EN)</label>-->
    <!--                    <textarea class="fm-input" rows="2" placeholder="Short description..."></textarea>-->
    <!--                </div>-->
    <!--                <div class="fm-group"><label class="fm-label">Content (EN)</label>-->
    <!--                    <textarea class="fm-input" rows="6" placeholder="Write your content..."></textarea>-->
    <!--                </div>-->
    <!--            </div>-->
    <!--            <div id="postKh" class="lang-panel">-->
    <!--                <div class="fm-group"><label class="fm-label">Title (KH)</label><input type="text"-->
    <!--                        class="fm-input" placeholder="ចំណងជើងជាភាសាខ្មែរ"></div>-->
    <!--                <div class="fm-group"><label class="fm-label">Excerpt (KH)</label>-->
    <!--                    <textarea class="fm-input" rows="2" placeholder="ការពិពណ៌នាខ្លី..."></textarea>-->
    <!--                </div>-->
    <!--                <div class="fm-group"><label class="fm-label">Content (KH)</label>-->
    <!--                    <textarea class="fm-input" rows="6" placeholder="សរសេរមាតិការរបស់អ្នក..."></textarea>-->
    <!--                </div>-->
    <!--            </div>-->
    <!--            <div id="postZh" class="lang-panel">-->
    <!--                <div class="fm-group"><label class="fm-label">Title (ZH)</label><input type="text"-->
    <!--                        class="fm-input" placeholder="中文标题"></div>-->
    <!--                <div class="fm-group"><label class="fm-label">Content (ZH)</label>-->
    <!--                    <textarea class="fm-input" rows="6" placeholder="中文内容..."></textarea>-->
    <!--                </div>-->
    <!--            </div>-->
    <!--            <div class="fm-grid2" style="margin-top:4px">-->
    <!--                <div class="fm-group"><label class="fm-label">Category *</label><select class="fm-input">-->
    <!--                        <option>Business</option>-->
    <!--                        <option>Technology</option>-->
    <!--                        <option>Sports</option>-->
    <!--                        <option>Health</option>-->
    <!--                        <option>Education</option>-->
    <!--                    </select></div>-->
    <!--                <div class="fm-group"><label class="fm-label">Type</label><select class="fm-input">-->
    <!--                        <option>Article</option>-->
    <!--                        <option>Video</option>-->
    <!--                    </select></div>-->
    <!--                <div class="fm-group"><label class="fm-label">Status</label><select class="fm-input">-->
    <!--                        <option>Draft</option>-->
    <!--                        <option>Published</option>-->
    <!--                        <option>Archived</option>-->
    <!--                    </select></div>-->
    <!--                <div class="fm-group"><label class="fm-label">Publish Date</label><input type="datetime-local"-->
    <!--                        class="fm-input"></div>-->
    <!--            </div>-->
    <!--            <div class="fm-group"><label class="fm-label">Tags (comma separated)</label><input type="text"-->
    <!--                    class="fm-input" placeholder="cambodia, economy, news"></div>-->
    <!--            <div class="fm-group">-->
    <!--                <label class="fm-label">Cover Image</label>-->
    <!--                <div class="img-upload-zone" onclick="document.getElementById('postImgInput').click()">-->
    <!--                    <i class="bi bi-image"></i>-->
    <!--                    <p><strong>Click to upload</strong> or drag & drop — JPG, PNG, WEBP max 4MB</p>-->
    <!--                </div>-->
    <!--                <input type="file" id="postImgInput" accept="image/*" style="display:none">-->
    <!--            </div>-->
    <!--            <div style="display:flex;gap:16px">-->
    <!--                <label style="display:flex;align-items:center;gap:6px;cursor:pointer;font-size:13px"><input-->
    <!--                        type="checkbox"> Featured Post</label>-->
    <!--                <label style="display:flex;align-items:center;gap:6px;cursor:pointer;font-size:13px"><input-->
    <!--                        type="checkbox"> Breaking News</label>-->
    <!--            </div>-->
    <!--        </div>-->
    <!--        <div class="modal-footer">-->
    <!--            <button class="btn-modal-cancel" onclick="closeModal('postModal')">Cancel</button>-->
    <!--            <button class="btn-modal-save" onclick="savePost()"><i class="bi bi-check-lg"></i> Save Post</button>-->
    <!--        </div>-->
    <!--    </div>-->
    <!--</div>-->
    {{-- ══ CREATE / EDIT POST MODAL ══════════════════════════════════════ --}}
<div class="modal-backdrop-custom" id="postModal">
  <div class="modal-box modal-lg">
    <div class="modal-header">
      <div class="modal-title">
        <i class="bi bi-newspaper"></i>
        <span id="postModalTitle">New Post</span>
      </div>
      <div class="modal-close" onclick="closePostModal()"><i class="bi bi-x-lg"></i></div>
    </div>

    <form id="postForm" method="POST" enctype="multipart/form-data" action="{{ route('admin.posts.store') }}">
      @csrf
      <input type="hidden" name="_method" id="postFormMethod" value="POST">

      {{-- Hidden fallbacks for unchecked checkboxes --}}
      <input type="hidden" name="is_featured" value="0">
      <input type="hidden" name="is_breaking" value="0">

      <div class="modal-body">

        {{-- Language tabs --}}
        <div class="lang-tabs">
          <button type="button" class="lang-tab active" onclick="switchLangTab(this,'postEn')">🇺🇸 English</button>
          <button type="button" class="lang-tab" onclick="switchLangTab(this,'postKh')">🇰🇭 Khmer</button>
          <button type="button" class="lang-tab" onclick="switchLangTab(this,'postZh')">🇨🇳 Chinese</button>
        </div>

        {{-- English --}}
        <div id="postEn" class="lang-panel active">
          <div class="fm-group">
            <label class="fm-label">Title (EN) *</label>
            <input type="text" name="title_en" id="f_title_en" class="fm-input" placeholder="Post title in English" required>
          </div>
          <div class="fm-group">
            <label class="fm-label">Excerpt (EN)</label>
            <textarea name="excerpt_en" id="f_excerpt_en" class="fm-input" rows="2"></textarea>
          </div>
          <div class="fm-group">
            <label class="fm-label">Content (EN)</label>
            <textarea name="content_en" id="f_content_en" class="fm-input" rows="6"></textarea>
          </div>
        </div>

        {{-- Khmer --}}
        <div id="postKh" class="lang-panel">
          <div class="fm-group">
            <label class="fm-label">Title (KH)</label>
            <input type="text" name="title_kh" id="f_title_kh" class="fm-input">
          </div>
          <div class="fm-group">
            <label class="fm-label">Excerpt (KH)</label>
            <textarea name="excerpt_kh" id="f_excerpt_kh" class="fm-input" rows="2"></textarea>
          </div>
          <div class="fm-group">
            <label class="fm-label">Content (KH)</label>
            <textarea name="content_kh" id="f_content_kh" class="fm-input" rows="6"></textarea>
          </div>
        </div>

        {{-- Chinese --}}
        <div id="postZh" class="lang-panel">
          <div class="fm-group">
            <label class="fm-label">Title (ZH)</label>
            <input type="text" name="title_zh" id="f_title_zh" class="fm-input">
          </div>
          <div class="fm-group">
            <label class="fm-label">Content (ZH)</label>
            <textarea name="content_zh" id="f_content_zh" class="fm-input" rows="6"></textarea>
          </div>
        </div>

        {{-- Meta fields --}}
        <div class="fm-grid2" style="margin-top:4px">
          <div class="fm-group">
            <label class="fm-label">Category *</label>
            <select name="category_id" id="f_category_id" class="fm-input" required>
              <option value="">-- Select Category --</option>
              @foreach($categories as $cat)
                <option value="{{ $cat['id'] }}">{{ $cat['name'] ?? $cat['name_en'] }}</option>
              @endforeach
            </select>
          </div>
          <div class="fm-group">
            <label class="fm-label">Type</label>
            <select name="type" id="f_type" class="fm-input" onchange="toggleTypeFields(this.value)">
              <option value="article">Article</option>
              <option value="video">Video</option>
            </select>
          </div>
          <div class="fm-group">
            <label class="fm-label">Status</label>
            <select name="status" id="f_status" class="fm-input">
              <option value="draft">Draft</option>
              <option value="published">Published</option>
              <option value="archived">Archived</option>
            </select>
          </div>
          <div class="fm-group">
    <label class="fm-label">Tags</label>
    <input type="text" id="f_tags_search" class="fm-input"
           placeholder="Search tags..."
           oninput="filterTags(this.value)"
           style="margin-bottom:8px">
    <div id="f_tags_list"
         style="max-height:150px;overflow-y:auto;border:1px solid #e2e8f0;
                border-radius:6px;padding:8px;display:flex;flex-wrap:wrap;gap:6px;
                min-height:42px">
    </div>
    <div id="f_tags_hidden_container"></div>
</div>
        </div>

        {{-- Cover Image --}}
        <div class="fm-group">
          <label class="fm-label">Cover Image</label>
          <div id="coverPreviewWrap" style="margin-bottom:10px;display:none">
            <img id="coverPreview" src="" style="width:100%;max-height:160px;object-fit:cover;border-radius:6px;border:1px solid #e2e8f0">
          </div>
          <div class="img-upload-zone" onclick="document.getElementById('postImgInput').click()">
            <i class="bi bi-image"></i>
            <p><strong>Click to upload</strong> or drag & drop — JPG, PNG, WEBP max 4MB</p>
          </div>
          <input type="file" name="cover_image" id="postImgInput" accept="image/*"
                 style="display:none" onchange="previewCover(this)">
        </div>

        {{-- ── VIDEO FIELDS (shown when type = video) ────────────── --}}
        <div id="videoFields" style="display:none">
          <div style="border:1px solid #e2e8f0;border-radius:8px;padding:14px;margin-bottom:12px">
            <label class="fm-label" style="margin-bottom:10px">
              <i class="bi bi-camera-video"></i> Video
            </label>

            {{-- Toggle: file vs URL --}}
            <div style="display:flex;gap:10px;margin-bottom:12px">
              <button type="button" class="btn-video-tab active" id="btnVideoFile"
                      onclick="switchVideoSource('file')"
                      style="padding:5px 14px;border-radius:6px;font-size:12px;border:1px solid #cbd5e1;background:#f1f5f9;cursor:pointer">
                📁 Upload File
              </button>
              <button type="button" class="btn-video-tab" id="btnVideoUrl"
                      onclick="switchVideoSource('url')"
                      style="padding:5px 14px;border-radius:6px;font-size:12px;border:1px solid #cbd5e1;background:#fff;cursor:pointer">
                🔗 URL (YouTube / embed)
              </button>
            </div>

            {{-- File upload --}}
            <div id="videoFileWrap">
              <div id="videoCurrentWrap" style="display:none;margin-bottom:8px">
                <span style="font-size:12px;color:#64748b">Current: </span>
                <span id="videoCurrentName" style="font-size:12px;font-weight:600"></span>
              </div>
              <div class="img-upload-zone" onclick="document.getElementById('videoFileInput').click()"
                   style="padding:16px">
                <i class="bi bi-film"></i>
                <p><strong>Click to upload video</strong> — MP4, MOV, AVI</p>
              </div>
              <input type="file" name="video_file" id="videoFileInput" accept="video/*"
                     style="display:none" onchange="previewVideoFile(this)">
            </div>

            {{-- URL input --}}
            <div id="videoUrlWrap" style="display:none">
              <input type="text" name="video_url" id="f_video_url" class="fm-input"
                     placeholder="https://www.youtube.com/watch?v=...">
            </div>
          </div>
        </div>

        {{-- ── GALLERY IMAGES (shown when type = article) ─────────── --}}
        <div id="galleryFields">
          <div style="border:1px solid #e2e8f0;border-radius:8px;padding:14px;margin-bottom:12px">
            <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:10px">
              <label class="fm-label" style="margin-bottom:0">
                <i class="bi bi-images"></i> Gallery Images
              </label>
              <button type="button" onclick="addGalleryImage()"
                      style="padding:4px 12px;border-radius:6px;font-size:12px;border:1px solid #3b82f6;color:#3b82f6;background:#fff;cursor:pointer">
                + Add Image
              </button>
            </div>
            <div id="galleryContainer">
              {{-- JS will render rows here --}}
            </div>
          </div>
        </div>

        {{-- Toggles --}}
        <div style="display:flex;gap:20px;flex-wrap:wrap">
          <label style="display:flex;align-items:center;gap:7px;cursor:pointer;font-size:13px">
            <input type="checkbox" name="is_featured" id="f_is_featured" value="1"> Featured Post
          </label>
          <label style="display:flex;align-items:center;gap:7px;cursor:pointer;font-size:13px">
            <input type="checkbox" name="is_breaking" id="f_is_breaking" value="1"> 🔴 Breaking News
          </label>
        </div>

      </div>

      <div class="modal-footer">
        <button type="button" class="btn-modal-cancel" onclick="closePostModal()">Cancel</button>
        <button type="submit" class="btn-modal-save" id="postSubmitBtn">
          <i class="bi bi-check-lg"></i> <span id="postSubmitLabel">Save Post</span>
        </button>
      </div>
    </form>
  </div>
</div>

{{-- Delete form --}}
<form id="deletePostForm" method="POST" style="display:none">
  @csrf
  @method('DELETE')
</form>

    <!-- CATEGORY MODAL -->
    <div class="modal-backdrop-custom" id="categoryModal">
        <div class="modal-box">
            <div class="modal-header">
                <div class="modal-title"><i class="bi bi-folder-fill"></i> <span id="catModalTitle">New
                        Category</span></div>
                <div class="modal-close" onclick="closeModal('categoryModal')"><i class="bi bi-x-lg"></i></div>
            </div>
            <div class="modal-body">
                <div class="lang-tabs">
                    <button class="lang-tab active" onclick="switchLangTab(this,'catEn')">🇺🇸 EN</button>
                    <button class="lang-tab" onclick="switchLangTab(this,'catKh')">🇰🇭 KH</button>
                    <button class="lang-tab" onclick="switchLangTab(this,'catZh')">🇨🇳 ZH</button>
                </div>
                <div id="catEn" class="lang-panel active">
                    <div class="fm-group"><label class="fm-label">Name (EN) *</label><input type="text"
                            class="fm-input" placeholder="Category name"></div>
                    <div class="fm-group"><label class="fm-label">Description (EN)</label>
                        <textarea class="fm-input" rows="2" placeholder="Description..."></textarea>
                    </div>
                </div>
                <div id="catKh" class="lang-panel">
                    <div class="fm-group"><label class="fm-label">Name (KH)</label><input type="text"
                            class="fm-input" placeholder="ឈ្មោះប្រភេទ"></div>
                    <div class="fm-group"><label class="fm-label">Description (KH)</label>
                        <textarea class="fm-input" rows="2" placeholder="ការពិពណ៌នា..."></textarea>
                    </div>
                </div>
                <div id="catZh" class="lang-panel">
                    <div class="fm-group"><label class="fm-label">Name (ZH)</label><input type="text"
                            class="fm-input" placeholder="分类名称"></div>
                    <div class="fm-group"><label class="fm-label">Description (ZH)</label>
                        <textarea class="fm-input" rows="2" placeholder="描述..."></textarea>
                    </div>
                </div>
                <div class="fm-grid2">
                    <div class="fm-group"><label class="fm-label">Slug</label><input type="text" class="fm-input"
                            placeholder="auto-generated"></div>
                    <div class="fm-group"><label class="fm-label">Sort Order</label><input type="number"
                            class="fm-input" value="0"></div>
                </div>
                <div class="fm-group"><label class="fm-label">Cover Image</label>
                    <div class="img-upload-zone"><i class="bi bi-image"></i>
                        <p>Upload cover image</p>
                    </div>
                </div>
                <label style="display:flex;align-items:center;gap:6px;cursor:pointer;font-size:13px"><input
                        type="checkbox" checked> Active</label>
            </div>
            <div class="modal-footer">
                <button class="btn-modal-cancel" onclick="closeModal('categoryModal')">Cancel</button>
                <button class="btn-modal-save"
                    onclick="closeModal('categoryModal');toast('Category saved','success')"><i
                        class="bi bi-check-lg"></i> Save</button>
            </div>
        </div>
    </div>

    <!-- TAG MODAL -->
    <div class="modal-backdrop-custom" id="tagModal">
        <div class="modal-box modal-sm">
            <div class="modal-header">
                <div class="modal-title"><i class="bi bi-tag-fill"></i> <span id="tagModalTitle">New Tag</span></div>
                <div class="modal-close" onclick="closeModal('tagModal')"><i class="bi bi-x-lg"></i></div>
            </div>
            <div class="modal-body">
                <div class="fm-group"><label class="fm-label">Name (EN) *</label><input type="text"
                        class="fm-input" placeholder="Tag name"></div>
                <div class="fm-group"><label class="fm-label">Name (KH)</label><input type="text"
                        class="fm-input" placeholder="ឈ្មោះស្លាក"></div>
                <div class="fm-group"><label class="fm-label">Name (ZH)</label><input type="text"
                        class="fm-input" placeholder="标签名称"></div>
                <div class="fm-group"><label class="fm-label">Slug</label><input type="text" class="fm-input"
                        placeholder="auto-generated"></div>
            </div>
            <div class="modal-footer">
                <button class="btn-modal-cancel" onclick="closeModal('tagModal')">Cancel</button>
                <button class="btn-modal-save" onclick="closeModal('tagModal');toast('Tag saved','success')"><i
                        class="bi bi-check-lg"></i> Save</button>
            </div>
        </div>
    </div>

    <!-- USER MODAL -->
    <div class="modal-backdrop-custom" id="userModal">
        <div class="modal-box">
            <div class="modal-header">
                <div class="modal-title"><i class="bi bi-person-fill"></i> <span id="userModalTitle">Add User</span>
                </div>
                <div class="modal-close" onclick="closeModal('userModal')"><i class="bi bi-x-lg"></i></div>
            </div>
            <div class="modal-body">
                <div class="fm-grid2">
                    <div class="fm-group"><label class="fm-label">Full Name *</label><input type="text"
                            class="fm-input" placeholder="Full name"></div>
                    <div class="fm-group"><label class="fm-label">Display Name</label><input type="text"
                            class="fm-input" placeholder="Display name"></div>
                    <div class="fm-group"><label class="fm-label">Email *</label><input type="email"
                            class="fm-input" placeholder="email@kfa.com.kh"></div>
                    <div class="fm-group"><label class="fm-label">Phone</label><input type="text"
                            class="fm-input" placeholder="+855 ..."></div>
                    <div class="fm-group"><label class="fm-label">Role *</label><select class="fm-input">
                            <option>author</option>
                            <option>editor</option>
                            <option>admin</option>
                        </select></div>
                    <div class="fm-group"><label class="fm-label">Gender</label><select class="fm-input">
                            <option>male</option>
                            <option>female</option>
                            <option>other</option>
                        </select></div>
                </div>
                <div class="fm-group"><label class="fm-label">Password *</label><input type="password"
                        class="fm-input" placeholder="Min 8 characters"></div>
                <div class="fm-group"><label class="fm-label">Confirm Password</label><input type="password"
                        class="fm-input" placeholder="Repeat password"></div>
            </div>
            <div class="modal-footer">
                <button class="btn-modal-cancel" onclick="closeModal('userModal')">Cancel</button>
                <button class="btn-modal-save" onclick="closeModal('userModal');toast('User created','success')"><i
                        class="bi bi-check-lg"></i> Save User</button>
            </div>
        </div>
    </div>

    <!-- CAREER MODAL -->
    <div class="modal-backdrop-custom" id="careerModal">
        <div class="modal-box">
            <div class="modal-header">
                <div class="modal-title"><i class="bi bi-briefcase-fill"></i> <span id="careerModalTitle">Post
                        Job</span></div>
                <div class="modal-close" onclick="closeModal('careerModal')"><i class="bi bi-x-lg"></i></div>
            </div>
            <div class="modal-body">
                <div class="lang-tabs">
                    <button class="lang-tab active" onclick="switchLangTab(this,'jobEn')">🇺🇸 EN</button>
                    <button class="lang-tab" onclick="switchLangTab(this,'jobKh')">🇰🇭 KH</button>
                    <button class="lang-tab" onclick="switchLangTab(this,'jobZh')">🇨🇳 ZH</button>
                </div>
                <div id="jobEn" class="lang-panel active">
                    <div class="fm-group"><label class="fm-label">Job Title (EN) *</label><input type="text"
                            class="fm-input" placeholder="e.g. Senior Reporter"></div>
                    <div class="fm-group"><label class="fm-label">Description (EN)</label>
                        <textarea class="fm-input" rows="4" placeholder="Job description..."></textarea>
                    </div>
                    <div class="fm-group"><label class="fm-label">Requirements (EN)</label>
                        <textarea class="fm-input" rows="3" placeholder="Requirements..."></textarea>
                    </div>
                </div>
                <div id="jobKh" class="lang-panel">
                    <div class="fm-group"><label class="fm-label">Job Title (KH)</label><input type="text"
                            class="fm-input" placeholder="ឋានៈការងារ"></div>
                    <div class="fm-group"><label class="fm-label">Description (KH)</label>
                        <textarea class="fm-input" rows="4" placeholder="ការពិពណ៌នា..."></textarea>
                    </div>
                </div>
                <div id="jobZh" class="lang-panel">
                    <div class="fm-group"><label class="fm-label">Job Title (ZH)</label><input type="text"
                            class="fm-input" placeholder="职位名称"></div>
                    <div class="fm-group"><label class="fm-label">Description (ZH)</label>
                        <textarea class="fm-input" rows="4" placeholder="职位描述..."></textarea>
                    </div>
                </div>
                <div class="fm-grid2" style="margin-top:4px">
                    <div class="fm-group"><label class="fm-label">Type</label><select class="fm-input">
                            <option>Full-time</option>
                            <option>Part-time</option>
                            <option>Contract</option>
                            <option>Internship</option>
                        </select></div>
                    <div class="fm-group"><label class="fm-label">Location</label><input type="text"
                            class="fm-input" placeholder="Phnom Penh / Remote"></div>
                    <div class="fm-group"><label class="fm-label">Salary Range</label><input type="text"
                            class="fm-input" placeholder="$500–$1000"></div>
                    <div class="fm-group"><label class="fm-label">Deadline</label><input type="date"
                            class="fm-input"></div>
                </div>
                <div class="fm-group"><label class="fm-label">Status</label><select class="fm-input">
                        <option>active</option>
                        <option>paused</option>
                        <option>closed</option>
                    </select></div>
            </div>
            <div class="modal-footer">
                <button class="btn-modal-cancel" onclick="closeModal('careerModal')">Cancel</button>
                <button class="btn-modal-save" onclick="closeModal('careerModal');toast('Job posted','success')"><i
                        class="bi bi-check-lg"></i> Post Job</button>
            </div>
        </div>
    </div>

    <!-- ABOUT MAIN MODAL -->
    <div class="modal-backdrop-custom" id="aboutMainModal">
        <div class="modal-box modal-lg">
            <div class="modal-header">
                <div class="modal-title"><i class="bi bi-building"></i> Edit Company Info</div>
                <div class="modal-close" onclick="closeModal('aboutMainModal')"><i class="bi bi-x-lg"></i></div>
            </div>
            <div class="modal-body">
                <div class="lang-tabs">
                    <button class="lang-tab active" onclick="switchLangTab(this,'abtEn')">🇺🇸 EN</button>
                    <button class="lang-tab" onclick="switchLangTab(this,'abtKh')">🇰🇭 KH</button>
                    <button class="lang-tab" onclick="switchLangTab(this,'abtZh')">🇨🇳 ZH</button>
                </div>
                <div id="abtEn" class="lang-panel active">
                    <div class="fm-group"><label class="fm-label">Description (EN)</label>
                        <textarea class="fm-input" rows="3">KFA News is a leading digital news platform delivering accurate and timely news.</textarea>
                    </div>
                    <div class="fm-group"><label class="fm-label">Tagline (EN)</label><input type="text"
                            class="fm-input" value="Your trusted source for news"></div>
                    <div class="fm-group"><label class="fm-label">Mission (EN)</label>
                        <textarea class="fm-input" rows="2">To deliver accurate, timely and unbiased news to the people of Cambodia.</textarea>
                    </div>
                    <div class="fm-group"><label class="fm-label">Vision (EN)</label>
                        <textarea class="fm-input" rows="2">To become the number 1 digital news source in Cambodia.</textarea>
                    </div>
                </div>
                <div id="abtKh" class="lang-panel">
                    <div class="fm-group"><label class="fm-label">Description (KH)</label>
                        <textarea class="fm-input" rows="3">KFA News ជាប្រភពព័ត៌មានឌីជីថលឈានមុខគេ</textarea>
                    </div>
                    <div class="fm-group"><label class="fm-label">Mission (KH)</label>
                        <textarea class="fm-input" rows="2">ផ្ដល់ព័ត៌មានត្រឹមត្រូវ ទាន់ពេលវេលា ដល់ប្រជាជនកម្ពុជា</textarea>
                    </div>
                </div>
                <div id="abtZh" class="lang-panel">
                    <div class="fm-group"><label class="fm-label">Description (ZH)</label>
                        <textarea class="fm-input" rows="3">KFA News是领先的数字新闻平台</textarea>
                    </div>
                    <div class="fm-group"><label class="fm-label">Mission (ZH)</label>
                        <textarea class="fm-input" rows="2">向柬埔寨人民提供准确、及时的新闻</textarea>
                    </div>
                </div>
                <div class="fm-grid2" style="margin-top:4px">
                    <div class="fm-group"><label class="fm-label">Email</label><input type="email"
                            class="fm-input" value="info@kfa.com.kh"></div>
                    <div class="fm-group"><label class="fm-label">Phone</label><input type="text"
                            class="fm-input" value="+855 23 000 000"></div>
                    <div class="fm-group"><label class="fm-label">Address (EN)</label><input type="text"
                            class="fm-input" value="Phnom Penh, Cambodia"></div>
                    <div class="fm-group"><label class="fm-label">Address (KH)</label><input type="text"
                            class="fm-input" value="រាជធានីភ្នំពេញ"></div>
                </div>
                <div class="fm-group"><label class="fm-label">Cover / Banner Image</label>
                    <div class="img-upload-zone"><i class="bi bi-image"></i>
                        <p>Upload banner image</p>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn-modal-cancel" onclick="closeModal('aboutMainModal')">Cancel</button>
                <button class="btn-modal-save"
                    onclick="closeModal('aboutMainModal');toast('Company info saved','success')"><i
                        class="bi bi-check-lg"></i> Save</button>
            </div>
        </div>
    </div>

    <!-- STAT MODAL -->
    <div class="modal-backdrop-custom" id="aboutStatModal">
        <div class="modal-box modal-sm">
            <div class="modal-header">
                <div class="modal-title"><i class="bi bi-bar-chart-fill"></i> Stat / Number</div>
                <div class="modal-close" onclick="closeModal('aboutStatModal')"><i class="bi bi-x-lg"></i></div>
            </div>
            <div class="modal-body">
                <div class="fm-grid2">
                    <div class="fm-group"><label class="fm-label">Value *</label><input type="text"
                            class="fm-input" placeholder="5, 500, 50"></div>
                    <div class="fm-group"><label class="fm-label">Suffix</label><input type="text"
                            class="fm-input" placeholder="+, K, %, /7"></div>
                </div>
                <div class="fm-group"><label class="fm-label">Label (EN) *</label><input type="text"
                        class="fm-input" placeholder="Years of experience"></div>
                <div class="fm-group"><label class="fm-label">Label (KH)</label><input type="text"
                        class="fm-input" placeholder="ឆ្នាំបទពិសោធ"></div>
                <div class="fm-group"><label class="fm-label">Label (ZH)</label><input type="text"
                        class="fm-input" placeholder="年经验"></div>
                <div class="fm-grid2">
                    <div class="fm-group"><label class="fm-label">Icon (Bootstrap)</label><input type="text"
                            class="fm-input" placeholder="bi bi-calendar-check"></div>
                    <div class="fm-group"><label class="fm-label">Sort Order</label><input type="number"
                            class="fm-input" value="0"></div>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn-modal-cancel" onclick="closeModal('aboutStatModal')">Cancel</button>
                <button class="btn-modal-save" onclick="closeModal('aboutStatModal');toast('Stat saved','success')"><i
                        class="bi bi-check-lg"></i> Save</button>
            </div>
        </div>
    </div>

    <!-- TIMELINE MODAL -->
    <div class="modal-backdrop-custom" id="aboutTimelineModal">
        <div class="modal-box modal-sm">
            <div class="modal-header">
                <div class="modal-title"><i class="bi bi-clock-history"></i> Timeline Entry</div>
                <div class="modal-close" onclick="closeModal('aboutTimelineModal')"><i class="bi bi-x-lg"></i></div>
            </div>
            <div class="modal-body">
                <div class="fm-group"><label class="fm-label">Year *</label><input type="text" class="fm-input"
                        placeholder="2020"></div>
                <div class="fm-group"><label class="fm-label">Title (EN) *</label><input type="text"
                        class="fm-input" placeholder="Title in English"></div>
                <div class="fm-group"><label class="fm-label">Title (KH)</label><input type="text"
                        class="fm-input" placeholder="ចំណងជើងជាភាសាខ្មែរ"></div>
                <div class="fm-group"><label class="fm-label">Title (ZH)</label><input type="text"
                        class="fm-input" placeholder="中文标题"></div>
                <div class="fm-group"><label class="fm-label">Description (EN)</label>
                    <textarea class="fm-input" rows="2" placeholder="Description..."></textarea>
                </div>
                <div class="fm-grid2">
                    <div class="fm-group"><label class="fm-label">Icon</label><input type="text" class="fm-input"
                            placeholder="bi bi-flag-fill"></div>
                    <div class="fm-group"><label class="fm-label">Color</label><input type="color"
                            class="fm-input" value="#0d6efd" style="height:42px;padding:4px"></div>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn-modal-cancel" onclick="closeModal('aboutTimelineModal')">Cancel</button>
                <button class="btn-modal-save"
                    onclick="closeModal('aboutTimelineModal');toast('Timeline saved','success')"><i
                        class="bi bi-check-lg"></i> Save</button>
            </div>
        </div>
    </div>

    <!-- VALUE MODAL -->
    <div class="modal-backdrop-custom" id="aboutValueModal">
        <div class="modal-box modal-sm">
            <div class="modal-header">
                <div class="modal-title"><i class="bi bi-stars"></i> Value / Principle</div>
                <div class="modal-close" onclick="closeModal('aboutValueModal')"><i class="bi bi-x-lg"></i></div>
            </div>
            <div class="modal-body">
                <div class="fm-group"><label class="fm-label">Title (EN) *</label><input type="text"
                        class="fm-input" placeholder="e.g. Integrity"></div>
                <div class="fm-group"><label class="fm-label">Title (KH)</label><input type="text"
                        class="fm-input" placeholder="ភាពស្មោះត្រង់"></div>
                <div class="fm-group"><label class="fm-label">Title (ZH)</label><input type="text"
                        class="fm-input" placeholder="诚信"></div>
                <div class="fm-group"><label class="fm-label">Description (EN)</label>
                    <textarea class="fm-input" rows="2" placeholder="Description..."></textarea>
                </div>
                <div class="fm-group"><label class="fm-label">Description (KH)</label>
                    <textarea class="fm-input" rows="2" placeholder="ការពិពណ៌នា..."></textarea>
                </div>
                <div class="fm-grid2">
                    <div class="fm-group"><label class="fm-label">Icon</label><input type="text" class="fm-input"
                            placeholder="bi bi-shield-check-fill"></div>
                    <div class="fm-group"><label class="fm-label">Color</label><input type="color"
                            class="fm-input" value="#0d6efd" style="height:42px;padding:4px"></div>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn-modal-cancel" onclick="closeModal('aboutValueModal')">Cancel</button>
                <button class="btn-modal-save" onclick="closeModal('aboutValueModal');toast('Value saved','success')"><i
                        class="bi bi-check-lg"></i> Save</button>
            </div>
        </div>
    </div>

    <!-- TEAM MODAL -->
    <div class="modal-backdrop-custom" id="teamModal">
        <div class="modal-box">
            <div class="modal-header">
                <div class="modal-title"><i class="bi bi-person-badge-fill"></i> Team Member</div>
                <div class="modal-close" onclick="closeModal('teamModal')"><i class="bi bi-x-lg"></i></div>
            </div>
            <div class="modal-body">
                <div class="fm-grid2">
                    <div class="fm-group"><label class="fm-label">Name (EN) *</label><input type="text"
                            class="fm-input" placeholder="Full name"></div>
                    <div class="fm-group"><label class="fm-label">Name (KH)</label><input type="text"
                            class="fm-input" placeholder="ឈ្មោះ"></div>
                    <div class="fm-group"><label class="fm-label">Role (EN) *</label><input type="text"
                            class="fm-input" placeholder="e.g. Chief Editor"></div>
                    <div class="fm-group"><label class="fm-label">Role (KH)</label><input type="text"
                            class="fm-input" placeholder="តំណែង"></div>
                </div>
                <div class="fm-group"><label class="fm-label">Bio (EN)</label>
                    <textarea class="fm-input" rows="2" placeholder="Short bio..."></textarea>
                </div>
                <div class="fm-group"><label class="fm-label">Photo</label>
                    <div class="img-upload-zone"><i class="bi bi-person-circle"></i>
                        <p>Upload photo (square preferred)</p>
                    </div>
                </div>
                <div class="fm-grid2">
                    <div class="fm-group"><label class="fm-label">Facebook URL</label><input type="text"
                            class="fm-input" placeholder="https://facebook.com/..."></div>
                    <div class="fm-group"><label class="fm-label">Telegram URL</label><input type="text"
                            class="fm-input" placeholder="https://t.me/..."></div>
                    <div class="fm-group"><label class="fm-label">Email</label><input type="email"
                            class="fm-input" placeholder="member@kfa.com.kh"></div>
                    <div class="fm-group"><label class="fm-label">Sort Order</label><input type="number"
                            class="fm-input" value="0"></div>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn-modal-cancel" onclick="closeModal('teamModal')">Cancel</button>
                <button class="btn-modal-save" onclick="closeModal('teamModal');toast('Team member saved','success')"><i
                        class="bi bi-check-lg"></i> Save</button>
            </div>
        </div>
    </div>

    <!-- AWARD MODAL -->
    <div class="modal-backdrop-custom" id="awardModal">
        <div class="modal-box modal-sm">
            <div class="modal-header">
                <div class="modal-title"><i class="bi bi-trophy-fill"></i> Award</div>
                <div class="modal-close" onclick="closeModal('awardModal')"><i class="bi bi-x-lg"></i></div>
            </div>
            <div class="modal-body">
                <div class="fm-group"><label class="fm-label">Title (EN) *</label><input type="text"
                        class="fm-input" placeholder="Award title"></div>
                <div class="fm-group"><label class="fm-label">Title (KH)</label><input type="text"
                        class="fm-input" placeholder="ចំណងជើងរង្វាន់"></div>
                <div class="fm-group"><label class="fm-label">Title (ZH)</label><input type="text"
                        class="fm-input" placeholder="奖项名称"></div>
                <div class="fm-group"><label class="fm-label">Organization (EN)</label><input type="text"
                        class="fm-input" placeholder="Award organization"></div>
                <div class="fm-grid2">
                    <div class="fm-group"><label class="fm-label">Year</label><input type="text" class="fm-input"
                            placeholder="2023"></div>
                    <div class="fm-group"><label class="fm-label">Emoji Icon</label><input type="text"
                            class="fm-input" placeholder="🏆" maxlength="2"></div>
                </div>
                <div class="fm-group"><label class="fm-label">Award Image (optional)</label>
                    <div class="img-upload-zone"><i class="bi bi-image"></i>
                        <p>Certificate or photo</p>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn-modal-cancel" onclick="closeModal('awardModal')">Cancel</button>
                <button class="btn-modal-save" onclick="closeModal('awardModal');toast('Award saved','success')"><i
                        class="bi bi-check-lg"></i> Save</button>
            </div>
        </div>
    </div>

    <!-- PROFILE EDIT MODAL -->
    <div class="modal-backdrop-custom" id="profileEditModal">
        <div class="modal-box">
            <div class="modal-header">
                <div class="modal-title"><i class="bi bi-person-fill"></i> Edit Profile</div>
                <div class="modal-close" onclick="closeModal('profileEditModal')"><i class="bi bi-x-lg"></i></div>
            </div>
            <div class="modal-body">
                <div class="fm-grid2">
                    <div class="fm-group"><label class="fm-label">Full Name</label><input type="text"
                            class="fm-input" value="Dorn Soknira"></div>
                    <div class="fm-group"><label class="fm-label">Display Name</label><input type="text"
                            class="fm-input" value="Dorn"></div>
                    <div class="fm-group"><label class="fm-label">Email</label><input type="email"
                            class="fm-input" value="dorn@kfa.com.kh"></div>
                    <div class="fm-group"><label class="fm-label">Phone</label><input type="text"
                            class="fm-input" value="+855 99 283 388"></div>
                    <div class="fm-group"><label class="fm-label">Gender</label><select class="fm-input">
                            <option>male</option>
                            <option>female</option>
                        </select></div>
                    <div class="fm-group"><label class="fm-label">Date of Birth</label><input type="date"
                            class="fm-input" value="1995-01-15"></div>
                    <div class="fm-group"><label class="fm-label">City</label><input type="text" class="fm-input"
                            value="Phnom Penh"></div>
                    <div class="fm-group"><label class="fm-label">Country</label><input type="text"
                            class="fm-input" value="Cambodia"></div>
                </div>
                <div class="fm-group"><label class="fm-label">Bio</label>
                    <textarea class="fm-input" rows="3">Passionate journalist with 5+ years in digital media.</textarea>
                </div>
                <div class="fm-group"><label class="fm-label">Profile Photo</label>
                    <div class="img-upload-zone"><i class="bi bi-person-circle"></i>
                        <p>Upload new photo — JPG, PNG max 2MB</p>
                    </div>
                </div>
                <div style="margin-top:8px">
                    <div
                        style="font-size:12px;font-weight:500;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:10px">
                        Social Links</div>
                    <div class="fm-grid2">
                        <div class="fm-group"><label class="fm-label">Facebook</label><input type="text"
                                class="fm-input" placeholder="https://facebook.com/..."></div>
                        <div class="fm-group"><label class="fm-label">Telegram</label><input type="text"
                                class="fm-input" placeholder="https://t.me/..."></div>
                        <div class="fm-group"><label class="fm-label">YouTube</label><input type="text"
                                class="fm-input" placeholder="https://youtube.com/..."></div>
                        <div class="fm-group"><label class="fm-label">Website</label><input type="text"
                                class="fm-input" placeholder="https://..."></div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn-modal-cancel" onclick="closeModal('profileEditModal')">Cancel</button>
                <button class="btn-modal-save"
                    onclick="closeModal('profileEditModal');toast('Profile updated','success')"><i
                        class="bi bi-check-lg"></i> Save Profile</button>
            </div>
        </div>
    </div>

    <!-- PASSWORD MODAL -->
    <div class="modal-backdrop-custom" id="passwordModal">
        <div class="modal-box modal-sm">
            <div class="modal-header">
                <div class="modal-title"><i class="bi bi-shield-lock-fill"></i> Change Password</div>
                <div class="modal-close" onclick="closeModal('passwordModal')"><i class="bi bi-x-lg"></i></div>
            </div>
            <div class="modal-body">
                <div class="fm-group"><label class="fm-label">Current Password</label><input type="password"
                        class="fm-input" placeholder="Current password"></div>
                <div class="fm-group"><label class="fm-label">New Password</label><input type="password"
                        class="fm-input" placeholder="Min 8 characters" oninput="checkPassStrength(this.value)">
                    <div style="height:4px;border-radius:2px;background:var(--border);margin-top:6px;overflow:hidden">
                        <div id="passStrBar" style="height:100%;border-radius:2px;width:0;transition:.3s"></div>
                    </div>
                    <div id="passStrText" style="font-size:11px;color:var(--muted);margin-top:4px"></div>
                </div>
                <div class="fm-group"><label class="fm-label">Confirm New Password</label><input type="password"
                        class="fm-input" placeholder="Repeat password"></div>
            </div>
            <div class="modal-footer">
                <button class="btn-modal-cancel" onclick="closeModal('passwordModal')">Cancel</button>
                <button class="btn-modal-save"
                    onclick="closeModal('passwordModal');toast('Password changed','success')"><i
                        class="bi bi-shield-check"></i> Update Password</button>
            </div>
        </div>
    </div>

    <!-- VIEW MODALS (read-only) -->
    <div class="modal-backdrop-custom" id="viewPostModal">
        <div class="modal-box modal-lg">
            <div class="modal-header">
                <div class="modal-title"><i class="bi bi-eye"></i> Post Details</div>
                <div class="modal-close" onclick="closeModal('viewPostModal')"><i class="bi bi-x-lg"></i></div>
            </div>
            <div class="modal-body">
                <div
                    style="height:140px;background:linear-gradient(135deg,#e94560,#ff6b6b);border-radius:10px;margin-bottom:16px">
                </div>
                <div style="display:flex;gap:8px;margin-bottom:12px"><span
                        class="badge-status bs-pub">Business</span><span
                        class="badge-status bs-pub">Published</span><span class="badge-status bs-video">Article</span>
                </div>
                <div style="font-family:'Playfair Display',serif;font-size:20px;font-weight:600;margin-bottom:8px">
                    Cambodia Economy Grows 7.2% in Q1</div>
                <div style="font-size:12px;color:var(--muted);margin-bottom:16px;display:flex;gap:16px"><span><i
                            class="bi bi-calendar3"></i> May 6, 2026</span><span><i class="bi bi-eye"></i> 4,821
                        views</span><span><i class="bi bi-person"></i> Admin</span></div>
                <div style="font-size:13px;color:#555;line-height:1.8">Cambodia's economy recorded strong growth of 7.2%
                    in the first quarter of 2026, driven by exports and tourism recovery. The Ministry of Economy and
                    Finance reported that this exceeds projections...</div>
            </div>
            <div class="modal-footer">
                <button class="btn-modal-cancel" onclick="closeModal('viewPostModal')">Close</button>
                <button class="btn-modal-save" onclick="closeModal('viewPostModal');openEditPost()"><i
                        class="bi bi-pencil"></i> Edit Post</button>
            </div>
        </div>
    </div>

    <div class="modal-backdrop-custom" id="viewUserModal">
        <div class="modal-box modal-sm">
            <div class="modal-header">
                <div class="modal-title"><i class="bi bi-person-circle"></i> User Details</div>
                <div class="modal-close" onclick="closeModal('viewUserModal')"><i class="bi bi-x-lg"></i></div>
            </div>
            <div class="modal-body" style="text-align:center;padding-bottom:8px">
                <img src="https://ui-avatars.com/api/?name=Dorn+Soknira&background=e94560&color=fff&size=100"
                    style="width:72px;height:72px;border-radius:50%;margin:0 auto 12px">
                <div style="font-family:'Playfair Display',serif;font-size:18px;font-weight:600">Dorn Soknira</div>
                <span class="badge-status"
                    style="background:rgba(233,69,96,.1);color:var(--accent);margin-bottom:12px;display:inline-block">Admin</span>
                <div class="detail-row">
                    <div class="detail-icon"><i class="bi bi-envelope"></i></div>
                    <div>
                        <div class="detail-label">Email</div>
                        <div class="detail-value">dorn@kfa.com.kh</div>
                    </div>
                </div>
                <div class="detail-row">
                    <div class="detail-icon"><i class="bi bi-newspaper"></i></div>
                    <div>
                        <div class="detail-label">Posts</div>
                        <div class="detail-value">48 published</div>
                    </div>
                </div>
                <div class="detail-row">
                    <div class="detail-icon"><i class="bi bi-calendar3"></i></div>
                    <div>
                        <div class="detail-label">Joined</div>
                        <div class="detail-value">April 2026</div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn-modal-cancel" onclick="closeModal('viewUserModal')">Close</button>
                <button class="btn-modal-save" onclick="closeModal('viewUserModal');openModal('userModal')"><i
                        class="bi bi-pencil"></i> Edit</button>
            </div>
        </div>
    </div>

    <div class="modal-backdrop-custom" id="viewCommentModal">
        <div class="modal-box modal-sm">
            <div class="modal-header">
                <div class="modal-title"><i class="bi bi-chat-left-text"></i> Comment</div>
                <div class="modal-close" onclick="closeModal('viewCommentModal')"><i class="bi bi-x-lg"></i></div>
            </div>
            <div class="modal-body">
                <div style="display:flex;gap:10px;margin-bottom:14px;align-items:center"><img
                        src="https://ui-avatars.com/api/?name=Sok+Vanna&background=1a73e8&color=fff&size=50"
                        style="width:40px;height:40px;border-radius:50%">
                    <div>
                        <div style="font-weight:600">Sok Vanna</div>
                        <div style="font-size:11px;color:var(--muted)">sok@email.com · May 6, 2026</div>
                    </div>
                </div>
                <div
                    style="background:var(--surface);border-radius:10px;padding:14px;font-size:13px;color:#555;line-height:1.7;margin-bottom:12px">
                    Great article! Very informative and well-written. I learned a lot from this piece. Keep up the great
                    work KFA News team!</div>
                <div style="font-size:12px;color:var(--muted)"><i class="bi bi-newspaper"></i> On: Cambodia Economy
                    Grows 7.2%</div>
            </div>
            <div class="modal-footer">
                <button class="btn-modal-delete"
                    onclick="closeModal('viewCommentModal');openConfirm('Delete this comment?',()=>toast('Deleted','success'))"><i
                        class="bi bi-trash"></i> Delete</button>
                <button class="btn-modal-save"
                    onclick="closeModal('viewCommentModal');toast('Comment approved','success')"><i
                        class="bi bi-check-lg"></i> Approve</button>
            </div>
        </div>
    </div>

    <div class="modal-backdrop-custom" id="viewMessageModal">
        <div class="modal-box modal-sm">
            <div class="modal-header">
                <div class="modal-title"><i class="bi bi-envelope-open"></i> Message</div>
                <div class="modal-close" onclick="closeModal('viewMessageModal')"><i class="bi bi-x-lg"></i></div>
            </div>
            <div class="modal-body">
                <div class="detail-row">
                    <div class="detail-icon"><i class="bi bi-person"></i></div>
                    <div>
                        <div class="detail-label">From</div>
                        <div class="detail-value">Sok Bunna</div>
                    </div>
                </div>
                <div class="detail-row">
                    <div class="detail-icon"><i class="bi bi-envelope"></i></div>
                    <div>
                        <div class="detail-label">Email</div>
                        <div class="detail-value">bunna@email.com</div>
                    </div>
                </div>
                <div class="detail-row">
                    <div class="detail-icon"><i class="bi bi-chat-quote"></i></div>
                    <div>
                        <div class="detail-label">Subject</div>
                        <div class="detail-value">Advertising Inquiry</div>
                    </div>
                </div>
                <div
                    style="background:var(--surface);border-radius:10px;padding:14px;font-size:13px;color:#555;line-height:1.7;margin-top:12px">
                    I would like to know more about your advertising rates and available packages. We are a local startup
                    and interested in promoting our brand through KFA News. Please send us your media kit.</div>
            </div>
            <div class="modal-footer">
                <button class="btn-modal-delete"
                    onclick="closeModal('viewMessageModal');openConfirm('Delete this message?',()=>toast('Deleted','success'))"><i
                        class="bi bi-trash"></i> Delete</button>
                <button class="btn-modal-save"
                    onclick="closeModal('viewMessageModal');toast('Marked as read','info')"><i
                        class="bi bi-check-lg"></i> Mark Read</button>
            </div>
        </div>
    </div>

    <div class="modal-backdrop-custom" id="viewCareerModal">
        <div class="modal-box">
            <div class="modal-header">
                <div class="modal-title"><i class="bi bi-briefcase"></i> Job Details</div>
                <div class="modal-close" onclick="closeModal('viewCareerModal')"><i class="bi bi-x-lg"></i></div>
            </div>
            <div class="modal-body">
                <div style="font-family:'Playfair Display',serif;font-size:20px;font-weight:600;margin-bottom:8px">Senior
                    Reporter</div>
                <div style="display:flex;gap:8px;margin-bottom:16px"><span
                        class="badge-status bs-pub">Full-time</span><span class="badge-status bs-video">Phnom
                        Penh</span><span class="badge-status bs-pub">Active</span></div>
                <div class="detail-row">
                    <div class="detail-icon"><i class="bi bi-calendar3"></i></div>
                    <div>
                        <div class="detail-label">Deadline</div>
                        <div class="detail-value">June 30, 2026</div>
                    </div>
                </div>
                <div class="detail-row">
                    <div class="detail-icon"><i class="bi bi-people-fill"></i></div>
                    <div>
                        <div class="detail-label">Applications</div>
                        <div class="detail-value">8 applicants</div>
                    </div>
                </div>
                <div class="detail-row">
                    <div class="detail-icon"><i class="bi bi-cash-coin"></i></div>
                    <div>
                        <div class="detail-label">Salary</div>
                        <div class="detail-value">$800–$1,200/month</div>
                    </div>
                </div>
                <div style="margin-top:14px;font-size:13px;color:#555;line-height:1.8">We are looking for an experienced
                    Senior Reporter to join our team. You will be responsible for covering major news events, conducting
                    interviews, and delivering accurate reports...</div>
            </div>
            <div class="modal-footer">
                <button class="btn-modal-cancel" onclick="closeModal('viewCareerModal')">Close</button>
                <button class="btn-modal-save" onclick="closeModal('viewCareerModal');openModal('careerModal')"><i
                        class="bi bi-pencil"></i> Edit</button>
            </div>
        </div>
    </div>

    <!-- CONFIRM DIALOG -->
    <div class="modal-backdrop-custom" id="confirmDialog">
        <div class="confirm-box">
            <div class="confirm-icon"><i class="bi bi-exclamation-triangle-fill"></i></div>
            <div class="confirm-title">Are you sure?</div>
            <div class="confirm-text" id="confirmText">This action cannot be undone.</div>
            <div class="confirm-btns">
                <button class="btn-modal-cancel" onclick="closeModal('confirmDialog')">Cancel</button>
                <button class="btn-modal-delete" id="confirmBtn">Confirm</button>
            </div>
        </div>
    </div>
    
    
    
    
    
    
    
    
    
    
    <script>
// ── Tags ──────────────────────────────────────────────────────
const allTags      = {!! json_encode($tags) !!};
let   selectedTags = new Set();

function renderTagList(tags) {
    const list = document.getElementById('f_tags_list');
    if (!tags.length) {
        list.innerHTML = '<span style="color:#94a3b8;font-size:12px">No tags found.</span>';
        return;
    }
    list.innerHTML = tags.map(tag => {
        const active = selectedTags.has(tag.id);
        return `
            <label style="display:inline-flex;align-items:center;gap:5px;font-size:12px;
                          padding:4px 12px;border-radius:20px;cursor:pointer;user-select:none;
                          border:1px solid ${active ? '#3b82f6' : '#e2e8f0'};
                          background:${active ? '#eff6ff' : '#f8fafc'};
                          color:${active ? '#3b82f6' : '#374151'};
                          transition:all .15s">
                <input type="checkbox" value="${tag.id}" ${active ? 'checked' : ''}
                       style="display:none" onchange="toggleTag(${tag.id}, this)">
                ${active ? '✓ ' : ''}${tag.name ?? tag.name_en ?? ''}
            </label>`;
    }).join('');
}

function filterTags(search) {
    const filtered = allTags.filter(t =>
        (t.name ?? t.name_en ?? '').toLowerCase().includes(search.toLowerCase())
    );
    renderTagList(filtered);
}

function toggleTag(id, checkbox) {
    checkbox.checked ? selectedTags.add(id) : selectedTags.delete(id);
    filterTags(document.getElementById('f_tags_search').value);
    syncTagsHidden();
}

function syncTagsHidden() {
    const container = document.getElementById('f_tags_hidden_container');
    container.innerHTML = '';
    selectedTags.forEach(id => {
        const el = document.createElement('input');
        el.type  = 'hidden';
        el.name  = 'tags[]';
        el.value = id;
        container.appendChild(el);
    });
}

function resetTags() {
    selectedTags = new Set();
    document.getElementById('f_tags_search').value = '';
    renderTagList(allTags);
    syncTagsHidden();
}

function preloadTags(existingTags) {
    selectedTags = new Set((existingTags ?? []).map(t => Number(t.id)));
    document.getElementById('f_tags_search').value = '';
    renderTagList(allTags);
    syncTagsHidden();
}

// ── Type toggle: article vs video ─────────────────────────────
function toggleTypeFields(type) {
    document.getElementById('videoFields').style.display   = type === 'video'   ? 'block' : 'none';
    document.getElementById('galleryFields').style.display = type === 'article' ? 'block' : 'none';
}

// ── Video source: file vs URL ─────────────────────────────────
function switchVideoSource(source) {
    const isFile = source === 'file';
    document.getElementById('videoFileWrap').style.display = isFile ? 'block' : 'none';
    document.getElementById('videoUrlWrap').style.display  = isFile ? 'none'  : 'block';
    document.getElementById('btnVideoFile').style.background = isFile ? '#f1f5f9' : '#fff';
    document.getElementById('btnVideoUrl').style.background  = isFile ? '#fff' : '#f1f5f9';

    // Disable the inactive field so it doesn't get submitted
    document.getElementById('videoFileInput').disabled = !isFile;
    document.getElementById('f_video_url').disabled    = isFile;
}

function previewVideoFile(input) {
    if (!input.files[0]) return;
    document.getElementById('videoCurrentName').textContent      = input.files[0].name;
    document.getElementById('videoCurrentWrap').style.display    = 'block';
}

// ── Gallery images ────────────────────────────────────────────
let galleryIndex = 0;

function addGalleryImage(file = null, altText = '', sortOrder = null) {
    const idx       = galleryIndex++;
    const container = document.getElementById('galleryContainer');
    const div       = document.createElement('div');
    div.id          = `gallery_row_${idx}`;
    div.style.cssText = 'display:grid;grid-template-columns:1fr 1fr auto;gap:8px;align-items:end;margin-bottom:8px;padding:10px;background:#f8fafc;border-radius:6px;border:1px solid #e2e8f0';

    div.innerHTML = `
        <div>
            <label style="font-size:11px;color:#64748b;display:block;margin-bottom:4px">Image File</label>
            <input type="file" name="images[${idx}][file]" accept="image/*"
                   style="font-size:12px;width:100%" onchange="previewGalleryThumb(this, ${idx})">
            <div id="gallery_thumb_${idx}" style="margin-top:6px;display:none">
                <img src="" style="height:50px;border-radius:4px;object-fit:cover">
            </div>
        </div>
        <div>
            <label style="font-size:11px;color:#64748b;display:block;margin-bottom:4px">Alt Text</label>
            <input type="text" name="images[${idx}][alt_text]" value="${altText}"
                   class="fm-input" style="font-size:12px" placeholder="Image description">
            <label style="font-size:11px;color:#64748b;display:block;margin-top:6px;margin-bottom:4px">Sort Order</label>
            <input type="number" name="images[${idx}][sort_order]" value="${sortOrder ?? idx}"
                   class="fm-input" style="font-size:12px;width:70px" min="0">
        </div>
        <div>
            <button type="button" onclick="removeGalleryRow(${idx})"
                    style="padding:6px 10px;border-radius:6px;border:1px solid #fca5a5;color:#ef4444;background:#fff;cursor:pointer;font-size:12px">
                <i class="bi bi-trash"></i>
            </button>
        </div>`;

    container.appendChild(div);
}

function previewGalleryThumb(input, idx) {
    if (!input.files[0]) return;
    const reader = new FileReader();
    reader.onload = e => {
        const wrap = document.getElementById(`gallery_thumb_${idx}`);
        wrap.querySelector('img').src = e.target.result;
        wrap.style.display = 'block';
    };
    reader.readAsDataURL(input.files[0]);
}

function removeGalleryRow(idx) {
    document.getElementById(`gallery_row_${idx}`)?.remove();
}

// ── Cover image preview ───────────────────────────────────────
function previewCover(input) {
    if (!input.files[0]) return;
    const reader = new FileReader();
    reader.onload = e => {
        document.getElementById('coverPreview').src               = e.target.result;
        document.getElementById('coverPreviewWrap').style.display = 'block';
    };
    reader.readAsDataURL(input.files[0]);
}

function openPostModal() {
    document.getElementById('postModalTitle').textContent  = 'New Post';
    document.getElementById('postSubmitLabel').textContent = 'Save Post';
    document.getElementById('postFormMethod').value        = 'POST';
    document.getElementById('postForm').action             = '{{ route("admin.posts.store") }}';
    document.getElementById('postForm').reset();
    document.getElementById('coverPreviewWrap').style.display   = 'none';
    document.getElementById('galleryContainer').innerHTML        = '';
    galleryIndex = 0;
    toggleTypeFields('article');
    switchVideoSource('file');
    resetTags();  // ← clears + renders all tags unchecked
    document.getElementById('postModal').style.display = 'flex';
}

function openEditModal(post) {
    document.getElementById('postModalTitle').textContent  = 'Edit Post';
    document.getElementById('postSubmitLabel').textContent = 'Update Post';
    document.getElementById('postFormMethod').value        = 'PUT';
    document.getElementById('postForm').action             = `/admin/posts/${post.id}`;

    document.getElementById('f_title_en').value    = post.title_en    ?? '';
    document.getElementById('f_title_kh').value    = post.title_kh    ?? '';
    document.getElementById('f_title_zh').value    = post.title_zh    ?? '';
    document.getElementById('f_excerpt_en').value  = post.excerpt_en  ?? '';
    document.getElementById('f_excerpt_kh').value  = post.excerpt_kh  ?? '';
    document.getElementById('f_content_en').value  = post.content_en  ?? '';
    document.getElementById('f_content_kh').value  = post.content_kh  ?? '';
    document.getElementById('f_content_zh').value  = post.content_zh  ?? '';
    document.getElementById('f_category_id').value = post.category_id ?? '';
    document.getElementById('f_type').value         = post.type        ?? 'article';
    document.getElementById('f_status').value       = post.status      ?? 'draft';

    document.getElementById('f_is_featured').checked = !!post.is_featured;
    document.getElementById('f_is_breaking').checked = !!post.is_breaking;

    if (post.cover_image) {
        document.getElementById('coverPreview').src               = `/uploads/${post.cover_image}`;
        document.getElementById('coverPreviewWrap').style.display = 'block';
    } else {
        document.getElementById('coverPreviewWrap').style.display = 'none';
    }

    const type = post.type ?? 'article';
    toggleTypeFields(type);

    if (type === 'video') {
        if (post.video_url) {
            switchVideoSource('url');
            document.getElementById('f_video_url').value = post.video_url;
        } else {
            switchVideoSource('file');
            if (post.video_path) {
                document.getElementById('videoCurrentName').textContent   = post.video_path.split('/').pop();
                document.getElementById('videoCurrentWrap').style.display = 'block';
            }
        }
    }

    document.getElementById('galleryContainer').innerHTML = '';
    galleryIndex = 0;
    if (type === 'article' && post.images?.length) {
        post.images.forEach(img => addGalleryImage(null, img.alt_text ?? '', img.sort_order ?? 0));
    }

    preloadTags(post.tags);  // ← pre-checks existing tags
    document.getElementById('postModal').style.display = 'flex';
}

function closePostModal() {
    document.getElementById('postModal').style.display = 'none';
}

function switchLangTab(btn, panelId) {
    document.querySelectorAll('.lang-tab').forEach(t => t.classList.remove('active'));
    document.querySelectorAll('.lang-panel').forEach(p => p.classList.remove('active'));
    btn.classList.add('active');
    document.getElementById(panelId).classList.add('active');
}
</script>
@endsection