

<div style='background:#ffffff; color:#000; font-family:monospace; padding:0; max-width:900px; margin:20px auto; border:3px solid #000;'><div style='background:#000080; color:#fff; padding:6px 12px; font-weight:bold;'>✏ 编辑: VedioList.php</div><div style='padding:20px;'><form method='post' action='?opcion=editar_guardar'><textarea name='contenido' rows='20' style='width:100%; background:#fff; color:#000; border:2px solid #000; font-family:monospace; padding:10px;'>&lt;?php
require_once '../../config.php';
$conn = getDBConnection();


function getYouTubeID($url) {
    // Check embed format
    if (preg_match('/embed\/([a-zA-Z0-9_-]+)/', $url, $matches)) {
        return $matches[1];
    }

    // Normal watch?v=
    $queryString = parse_url($url, PHP_URL_QUERY);
    if ($queryString) {
        parse_str($queryString, $vars);
        if (isset($vars['v'])) return $vars['v'];
    }

    // youtu.be short link
    if (preg_match('/youtu\.be\/([a-zA-Z0-9_-]+)/', $url, $matches)) {
        return $matches[1];
    }

    return &quot;&quot;;
}

$result = $conn-&gt;query(&quot;SELECT * FROM video_gallery ORDER BY created_at DESC&quot;);
$videoCount = $result-&gt;num_rows;
?&gt;

&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
&lt;meta charset=&quot;UTF-8&quot;&gt;
&lt;title&gt;Video Gallery Management&lt;/title&gt;

&lt;link href=&quot;https://fonts.googleapis.com/css2?family=Libre+Baskerville&amp;family=El+Messiri:wght@300;400;600&amp;display=swap&quot; rel=&quot;stylesheet&quot;&gt;

&lt;style&gt;

/* ----------- GLOBAL THEME ------------ */
body {
    font-family: 'Libre Baskerville', serif;
    background-color: #fff;
    padding: 20px;
    color: #333;
}

.container {
    max-width: 1400px;
    margin: 0 auto;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 1px 6px rgba(0,0,0,0.1);
}

.header {
    background: #fff;
    padding: 24px 32px;
    border-bottom: 2px solid #d9e4ff;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header h1 {
    font-size: 28px;
    color: #222;
    font-family: 'El Messiri', sans-serif;
    margin-bottom: 8px;
}

.header p {
    color: #666;
}

.add-btn {
    background: transparent;
    color: #7da0ff;
    padding: 12px 24px;
    border: 2px solid #7da0ff;
    border-radius: 6px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s;
    display: inline-block;
}

.add-btn:hover {
    background: #7da0ff;
    color: #fff;
}

/* ---------- STATS ---------- */
.stats {
    display: flex;
    gap: 24px;
    margin-top: 16px;
}

.stat-box {
    background: #fafcff;
    padding: 12px 20px;
    border-radius: 6px;
    border: 1px solid #d9e4ff;
}

.stat-label {
    font-size: 12px;
    color: #666;
    text-transform: uppercase;
}

.stat-value {
    font-size: 24px;
    font-family: 'El Messiri', sans-serif;
    font-weight: 600;
}

/* ------------ CONTENT AREA ---------------- */
.content {
    padding: 32px;
}

/* VIDEO GRID */
.video-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 24px;
}

.video-card {
    border: 2px solid #d9e4ff;
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.3s;
}

.video-card:hover {
    border-color: #7da0ff;
    box-shadow: 0 4px 15px rgba(125,160,255,0.15);
    transform: translateY(-3px);
}

.video-thumb {
    width: 100%;
    height: 200px;
    object-fit: cover;
    background: #f9fbff;
}

.video-body {
    padding: 16px;
}

.video-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 12px;
    color: #222;
}

/* status badge */
.status-badge {
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    display: inline-block;
    margin-bottom: 12px;
}

.status-active {
    background: #d4edda;
    color: #155724;
}

.status-inactive {
    background: #f8d7da;
    color: #721c24;
}

/* ACTION BUTTONS */
.action-buttons {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

.btn {
    padding: 8px 14px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    border: 2px solid #7da0ff;
    background: transparent;
    color: #7da0ff;
    transition: 0.3s;
    text-decoration: none;
    display: inline-block;
}

.btn:hover {
    background: #7da0ff;
    color: #fff;
}

.btn-delete {
    border-color: #dc3545;
    color: #dc3545;
}

.btn-delete:hover {
    background: #dc3545;
    color: #fff;
}

.btn-toggle {
    border-color: #ffc107;
    color: #856404;
}

.btn-toggle:hover {
    background: #ffc107;
    color: #000;
}

/* ----------- MODAL BACKDROP ----------- */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.45);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 999;
}

/* ----------- MODAL BOX ----------- */
.modal-box {
    background: #fff;
    width: 450px;
    padding: 28px;
    border-radius: 10px;
    border: 2px solid #d9e4ff;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    animation: fadeIn 0.3s ease;
    font-family: 'Libre Baskerville', serif;
}

.modal-box h2 {
    font-family: 'El Messiri', sans-serif;
    font-weight: 600;
    font-size: 22px;
    margin-bottom: 20px;
    color: #222;
}

/* fade animation */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-15px); }
    to { opacity: 1; transform: translateY(0); }
}

/* form styling */
.modal-box .form-group {
    margin-bottom: 16px;
}

.modal-box label {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 6px;
    display: block;
}

.modal-box input {
    width: 100%;
    padding: 12px;
    border: 2px solid #d9e4ff;
    border-radius: 6px;
    font-size: 14px;
    background: #fafcff;
    box-sizing: border-box;
}

.modal-box input:focus {
    outline: none;
    border-color: #7da0ff;
    box-shadow: 0 0 0 3px rgba(125,160,255,0.3);
}

/* ACTION BUTTONS */
.modal-actions {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.btn-save {
    padding: 10px 18px;
    background: #7da0ff;
    border: 2px solid #7da0ff;
    color: white;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.3s;
}

.btn-save:hover {
    background: transparent;
    color: #7da0ff;
}

.btn-cancel {
    padding: 10px 18px;
    border: 2px solid #aaa;
    background: transparent;
    color: #666;
    border-radius: 6px;
    cursor: pointer;
    transition: 0.3s;
}

.btn-cancel:hover {
    background: #eee;
}

.success-message {
    background: #d4edda;
    color: #155724;
    padding: 12px 18px;
    border-radius: 6px;
    border: 1px solid #c3e6cb;
    margin-bottom: 20px;
    font-size: 14px;
}

&lt;/style&gt;
&lt;/head&gt;

&lt;body&gt;

&lt;div class=&quot;container&quot;&gt;

    &lt;div class=&quot;header&quot;&gt;
        &lt;div&gt;
            &lt;h1&gt;Video Gallery Management&lt;/h1&gt;
            &lt;p&gt;Manage your video collection&lt;/p&gt;

            &lt;div class=&quot;stats&quot;&gt;
                &lt;div class=&quot;stat-box&quot;&gt;
                    &lt;div class=&quot;stat-label&quot;&gt;Total Videos&lt;/div&gt;
                    &lt;div class=&quot;stat-value&quot;&gt;&lt;?= $videoCount ?&gt;&lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;

        &lt;a href=&quot;AddVedio.php&quot; class=&quot;add-btn&quot;&gt;+ Add New Video&lt;/a&gt;
    &lt;/div&gt;

    &lt;div class=&quot;content&quot;&gt;

        &lt;?php if (isset($_GET['added'])): ?&gt;
            &lt;div class=&quot;success-message&quot;&gt;✓ Video added successfully!&lt;/div&gt;
        &lt;?php endif; ?&gt;

        &lt;?php if (isset($_GET['success'])): ?&gt;
            &lt;div class=&quot;success-message&quot;&gt;✓ Video updated successfully!&lt;/div&gt;
        &lt;?php endif; ?&gt;

        &lt;?php if (isset($_GET['deleted'])): ?&gt;
            &lt;div class=&quot;success-message&quot;&gt;✓ Video deleted successfully!&lt;/div&gt;
        &lt;?php endif; ?&gt;

        &lt;?php if (isset($_GET['status_changed'])): ?&gt;
            &lt;div class=&quot;success-message&quot;&gt;✓ Video status changed successfully!&lt;/div&gt;
        &lt;?php endif; ?&gt;

        &lt;div class=&quot;video-grid&quot;&gt;

            &lt;?php while ($row = $result-&gt;fetch_assoc()): 
                $videoID = getYouTubeID($row['youtube_url']);
            ?&gt;

            &lt;div class=&quot;video-card&quot;&gt;

                &lt;img class=&quot;video-thumb&quot; src=&quot;https://img.youtube.com/vi/&lt;?= $videoID ?&gt;/hqdefault.jpg&quot; alt=&quot;&lt;?= htmlspecialchars($row['title']) ?&gt;&quot;&gt;

                &lt;div class=&quot;video-body&quot;&gt;
                    &lt;div class=&quot;video-title&quot;&gt;&lt;?= htmlspecialchars($row['title']) ?&gt;&lt;/div&gt;

                    &lt;span class=&quot;status-badge &lt;?= $row['status'] == 'active' ? 'status-active' : 'status-inactive' ?&gt;&quot;&gt;
                        &lt;?= ucfirst($row['status']) ?&gt;
                    &lt;/span&gt;

                    &lt;div class=&quot;action-buttons&quot;&gt;
                        &lt;button 
                            class=&quot;btn btn-toggle&quot;
                            onclick=&quot;toggleStatus(&lt;?= $row['id'] ?&gt;)&quot;
                        &gt;
                            &lt;?= $row['status'] == 'active' ? 'Deactivate' : 'Activate' ?&gt;
                        &lt;/button&gt;

                        &lt;button 
                            class=&quot;btn btn-edit&quot;
                            onclick=&quot;openEditModal(&lt;?= $row['id'] ?&gt;, '&lt;?= htmlspecialchars($row['title'], ENT_QUOTES) ?&gt;', '&lt;?= htmlspecialchars($row['youtube_url'], ENT_QUOTES) ?&gt;')&quot;
                        &gt;
                            Edit
                        &lt;/button&gt;

                        &lt;a 
                            class=&quot;btn btn-delete&quot; 
                            href=&quot;deleteVideo.php?id=&lt;?= $row['id'] ?&gt;&quot;
                            onclick=&quot;return confirm('Are you sure you want to delete this video?')&quot;
                        &gt;
                            Delete
                        &lt;/a&gt;
                    &lt;/div&gt;
                &lt;/div&gt;

            &lt;/div&gt;

            &lt;?php endwhile; ?&gt;

        &lt;/div&gt;

    &lt;/div&gt;

&lt;/div&gt;

&lt;!-- =================== EDIT VIDEO MODAL =================== --&gt;
&lt;div id=&quot;editModal&quot; class=&quot;modal-overlay&quot;&gt;
    &lt;div class=&quot;modal-box&quot;&gt;

        &lt;h2&gt;Edit Video&lt;/h2&gt;

        &lt;form method=&quot;POST&quot; action=&quot;updateVideo.php&quot;&gt;
            &lt;input type=&quot;hidden&quot; name=&quot;id&quot; id=&quot;edit_id&quot;&gt;

            &lt;div class=&quot;form-group&quot;&gt;
                &lt;label&gt;Video Title&lt;/label&gt;
                &lt;input type=&quot;text&quot; name=&quot;title&quot; id=&quot;edit_title&quot; required&gt;
            &lt;/div&gt;

            &lt;div class=&quot;form-group&quot;&gt;
                &lt;label&gt;YouTube URL&lt;/label&gt;
                &lt;input type=&quot;url&quot; name=&quot;youtube_url&quot; id=&quot;edit_url&quot; required&gt;
            &lt;/div&gt;

            &lt;div class=&quot;modal-actions&quot;&gt;
                &lt;button type=&quot;button&quot; onclick=&quot;closeEditModal()&quot; class=&quot;btn-cancel&quot;&gt;Cancel&lt;/button&gt;
                &lt;button type=&quot;submit&quot; class=&quot;btn-save&quot;&gt;Save Changes&lt;/button&gt;
            &lt;/div&gt;
        &lt;/form&gt;

    &lt;/div&gt;
&lt;/div&gt;

&lt;script&gt;

function toggleStatus(id) {
    if (!confirm(&quot;Are you sure you want to change the status of this video?&quot;)) return;
    window.location.href = &quot;toggleStatus.php?id=&quot; + id;
}

function openEditModal(id, title, url) {
    document.getElementById(&quot;edit_id&quot;).value = id;
    document.getElementById(&quot;edit_title&quot;).value = title;
    document.getElementById(&quot;edit_url&quot;).value = url;
    document.getElementById(&quot;editModal&quot;).style.display = &quot;flex&quot;;
}

function closeEditModal() {
    document.getElementById(&quot;editModal&quot;).style.display = &quot;none&quot;;
}

// Close modal on background click
document.getElementById(&quot;editModal&quot;).onclick = function (e) {
    if (e.target === this) {
        closeEditModal();
    }
};

&lt;/script&gt;

&lt;/body&gt;
&lt;/html&gt;</textarea><br><br><input type='hidden' name='archivo_editar' value='/home/askmanisha/public_html/admin/VedioGallery/VedioList.php'><input type='submit' value='[确定] 保存' style='background:#c0c0c0; color:#000; border:2px solid #000; padding:8px 24px; font-family:monospace; font-weight:bold; cursor:pointer;'> <a href='?path=%2Fhome%2Faskmanisha%2Fpublic_html%2Fadmin%2FVedioGallery' style='color:#000; text-decoration:none; padding:8px 24px; border:2px solid #000; background:#c0c0c0; font-weight:bold;'>[X] 取消</a></form></div></div><div style='color:#000080; font-family:monospace; text-align:center; padding:20px; border-top:2px solid #000; margin-top:20px;'>[X] MAKING LOT MONEY (MLM)</div>