

<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;'>✏ 编辑: contact.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';


// Handle delete request
if (isset($_POST['delete_id'])) {
    $conn = getDBConnection();
    $deleteId = intval($_POST['delete_id']);
    $stmt = $conn-&gt;prepare(&quot;DELETE FROM contacts WHERE id = ?&quot;);
    $stmt-&gt;bind_param(&quot;i&quot;, $deleteId);
    $stmt-&gt;execute();
    $stmt-&gt;close();
    $conn-&gt;close();
    header('Location: contact.php');
    exit;
}

// Handle mark as read
if (isset($_POST['mark_read_id'])) {
    $conn = getDBConnection();
    $readId = intval($_POST['mark_read_id']);
    $stmt = $conn-&gt;prepare(&quot;UPDATE contacts SET status = 'read' WHERE id = ?&quot;);
    $stmt-&gt;bind_param(&quot;i&quot;, $readId);
    $stmt-&gt;execute();
    $stmt-&gt;close();
    $conn-&gt;close();
    header('Location: contact.php');
    exit;
}

// Fetch all contacts
$conn = getDBConnection();
$result = $conn-&gt;query(&quot;SELECT * FROM contacts ORDER BY submitted_at DESC&quot;);
?&gt;

&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;title&gt;Contact Management&lt;/title&gt;
    &lt;link href=&quot;https://fonts.googleapis.com/css2?family=El+Messiri:wght@300;400&amp;display=swap&quot; rel=&quot;stylesheet&quot;&gt;
    &lt;link href=&quot;https://fonts.googleapis.com/css2?family=Libre+Baskerville:wght@400;700&amp;display=swap&quot; rel=&quot;stylesheet&quot;&gt;
    &lt;style&gt;
     * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Libre Baskerville', serif;
    background-color: #fffaf4;
    padding: 20px;
    color: #333; /* dark grey text */
    min-height: 100vh;
}

.container {
    max-width: 1400px;
    margin: 0 auto;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    overflow: hidden;
}

.header {
    background: white;
    padding: 24px 32px;
    border-bottom: 2px solid #f0f4ff; /* very light blue border */
    color: #222;
}

.header h1 {
    font-family: 'El Messiri', sans-serif;
    font-weight: 300;
    font-size: 28px;
    margin-bottom: 8px;
}

.header p {
    font-size: 16px;
    color: #666;
}

.stats {
    display: flex;
    gap: 24px;
    margin-top: 16px;
}

.stat-box {
    background: #f5f8ff;
    padding: 12px 20px;
    border-radius: 6px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.08);
    border: 1px solid #dde7ff;
    color: #333;
}

.stat-label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stat-value {
    font-family: 'El Messiri', sans-serif;
    font-size: 24px;
    font-weight: 600;
    margin-top: 4px;
    color: #1a1a1a;
}

.content {
    padding: 32px;
    color: #444;
}

.filters {
    margin-bottom: 24px;
    display: flex;
    gap: 12px;
    align-items: center;
}

.filter-btn {
    padding: 8px 16px;
    border: 2px solid #dde7ff;
    background: white;
    border-radius: 6px;
    cursor: pointer;
    font-family: 'Libre Baskerville', serif;
    font-size: 14px;
    color: #272626;
    transition: all 0.3s ease;
}

.filter-btn:hover,
.filter-btn.active {
    background: #f0f5ff;
    border-color: #7da0ff;
    color: #7da0ff;
}

.search-box {
    flex: 1;
    max-width: 400px;
}

.search-box input {
    width: 100%;
    padding: 10px 16px;
    border: 2px solid #dde7ff;
    border-radius: 6px;
    font-family: 'Libre Baskerville', serif;
    font-size: 14px;
    color: #333;
    transition: border-color 0.3s ease;
}

.search-box input:focus {
    outline: none;
    border-color: #7da0ff;
    box-shadow: 0 0 0 3px rgba(125, 160, 255, 0.25);
}

.table-container {
    overflow-x: auto;
}

table {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Libre Baskerville', serif;
}

thead {
    background: #f5f8ff;
}

th {
    padding: 16px;
    text-align: left;
    font-weight: 600;
    font-size: 14px;
    color: #7da0ff;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid #dde7ff;
}

td {
    padding: 16px;
    border-bottom: 1px solid #f0f0f0;
    vertical-align: top;
    color: #272626;
}

tbody tr {
    transition: background-color 0.2s;
}

tbody tr:hover {
    background-color: #f0f5ff;
}

.status-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    background: #e6f0ff;
    color: #3b5aaa;
}

.action-buttons {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.btn {
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    font-family: 'Libre Baskerville', serif;
    text-decoration: none;
    color: white;
    border: none;
    transition: background-color 0.3s ease;
}

.btn-view {
    background: #7da0ff;
}

.btn-view:hover {
    background: #5c7ecb;
}

.btn-read {
    background: #17a2b8;
    color: white;
}

.btn-read:hover {
    background: #138496;
}

.btn-delete {
    background: #dc3545;
}

.btn-delete:hover {
    background: #c82333;
}

.alert {
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 15px;
}

.alert-success {
    background: #d4edda;
    color: #155724;
}

.alert-error {
    background: #f8d7da;
    color: #721c24;
}

/* Modal */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0; top: 0;
    width: 100%; height: 100%;
    background-color: rgba(0,0,0,0.6);
    animation: fadeIn 0.3s ease forwards;
}

.modal.show {
    display: block;
}

.modal-content {
    background: white;
    margin: 3% auto;
    padding: 20px 30px 30px 30px;
    width: 90%;
    max-width: 700px;
    max-height: 80vh;
    overflow-y: auto;
    border-radius: 8px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.2);
    animation: slideDown 0.4s ease forwards;
    display: flex;
    flex-direction: column;
}

@keyframes fadeIn {
    from {opacity: 0;}
    to {opacity: 1;}
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.modal-header {
    background: #f0f5ff;
    border-bottom: 2px solid #dde7ff;
    padding-bottom: 10px;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-header h2 {
    font-family: 'El Messiri', sans-serif;
    font-weight: 300;
    font-size: 24px;
    color: #222;
    display: flex;
    align-items: center;
    gap: 12px;
}

.close {
    cursor: pointer;
    font-size: 32px;
    font-weight: 300;
    color: #222;
    transition: transform 0.3s ease, opacity 0.3s ease;
    line-height: 1;
}

.close:hover {
    transform: rotate(90deg);
    opacity: 0.7;
}

.modal-body {
    flex-grow: 1;
    font-size: 15px;
    color: #444;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
}

.form-group label {
    font-weight: 600;
    color: #333;
    font-size: 16px;
}

input[type=&quot;text&quot;], textarea {
    padding: 15px;
    border: 2px solid #ffe8c5;
    border-radius: 10px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    font-family: 'Libre Baskerville', serif;
    font-size: 15px;
    resize: vertical;
    color: #333;
}

input[type=&quot;text&quot;]:focus, textarea:focus {
    outline: none;
    border-color: #7da0ff;
    box-shadow: 0 0 0 3px rgba(125, 160, 255, 0.15);
}

.no-contacts {
    text-align: center;
    padding: 60px 20px;
    color: #999;
}

.no-contacts svg {
    width: 80px;
    height: 80px;
    margin-bottom: 16px;
    opacity: 0.3;
}

.char-count {
    font-size: 13px;
    color: #718096;
    text-align: right;
    margin-top: 5px;
    font-family: Arial, sans-serif;
}

.form-row {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
}

.form-group.form-half {
    flex: 1;
    margin-bottom: 0;
}

.modal-footer {
    background: #f0f5ff;
    border-radius: 0 0 8px 8px;
    padding: 15px 30px;
    display: flex;
    justify-content: flex-end;
    gap: 15px;
}

.btn-primary {
    background: #7da0ff;
    color: white;
    border: none;
    padding: 12px 30px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    font-family: 'Libre Baskerville', serif;
    font-size: 16px;
    transition: background-color 0.3s ease, transform 0.3s ease;
    user-select: none;
}

.btn-primary:hover {
    background: #5c7ecb;
    transform: translateY(-2px);
}

.btn-secondary {
    background: #f0f1f4;
    color: #555;
    border: 2px solid #ccc;
    padding: 12px 30px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    font-family: 'Libre Baskerville', serif;
    font-size: 16px;
    transition: background-color 0.3s ease;
}

.btn-secondary:hover {
    background: #d6d8db;
}

@media (max-width: 768px) {
    .modal-content {
        width: 95%;
        margin: 5% auto;
    }
    .form-row {
        flex-direction: column;
    }
    .form-group.form-half {
        margin-bottom: 25px;
    }
    .header h1 {
        font-size: 24px;
    }
}


    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div class=&quot;container&quot;&gt;
        &lt;div class=&quot;header&quot;&gt;
            &lt;h1&gt;Contact Management&lt;/h1&gt;
            &lt;p&gt;Manage customer contact form submissions&lt;/p&gt;
            
            &lt;div class=&quot;stats&quot;&gt;
                &lt;?php
                $totalContacts = $result-&gt;num_rows;
                $newContacts = $conn-&gt;query(&quot;SELECT COUNT(*) as count FROM contacts WHERE status = 'new'&quot;)-&gt;fetch_assoc()['count'];
                $readContacts = $conn-&gt;query(&quot;SELECT COUNT(*) as count FROM contacts WHERE status = 'read'&quot;)-&gt;fetch_assoc()['count'];
                ?&gt;
                &lt;div class=&quot;stat-box&quot;&gt;
                    &lt;div class=&quot;stat-label&quot;&gt;Total Messages&lt;/div&gt;
                    &lt;div class=&quot;stat-value&quot;&gt;&lt;?php echo $totalContacts; ?&gt;&lt;/div&gt;
                &lt;/div&gt;
                &lt;div class=&quot;stat-box&quot;&gt;
                    &lt;div class=&quot;stat-label&quot;&gt;New&lt;/div&gt;
                    &lt;div class=&quot;stat-value&quot;&gt;&lt;?php echo $newContacts; ?&gt;&lt;/div&gt;
                &lt;/div&gt;
                &lt;div class=&quot;stat-box&quot;&gt;
                    &lt;div class=&quot;stat-label&quot;&gt;Read&lt;/div&gt;
                    &lt;div class=&quot;stat-value&quot;&gt;&lt;?php echo $readContacts; ?&gt;&lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;

        &lt;div class=&quot;content&quot;&gt;
            &lt;div class=&quot;filters&quot;&gt;
                &lt;button class=&quot;filter-btn active&quot; onclick=&quot;filterContacts('all')&quot;&gt;All&lt;/button&gt;
                &lt;button class=&quot;filter-btn&quot; onclick=&quot;filterContacts('new')&quot;&gt;New&lt;/button&gt;
                &lt;button class=&quot;filter-btn&quot; onclick=&quot;filterContacts('read')&quot;&gt;Read&lt;/button&gt;
                &lt;div class=&quot;search-box&quot;&gt;
                    &lt;input type=&quot;text&quot; id=&quot;searchInput&quot; placeholder=&quot;Search by name, email, or phone...&quot; onkeyup=&quot;searchContacts()&quot;&gt;
                &lt;/div&gt;
            &lt;/div&gt;

            &lt;?php if ($result-&gt;num_rows &gt; 0): ?&gt;
            &lt;div class=&quot;table-container&quot;&gt;
                &lt;table id=&quot;contactsTable&quot;&gt;
                    &lt;thead&gt;
                        &lt;tr&gt;
                            &lt;th&gt;ID&lt;/th&gt;
                            &lt;th&gt;Name&lt;/th&gt;
                            &lt;th&gt;Email&lt;/th&gt;
                            &lt;th&gt;Phone&lt;/th&gt;
                            &lt;th&gt;Date&lt;/th&gt;
                            &lt;th&gt;Status&lt;/th&gt;
                            &lt;th&gt;Actions&lt;/th&gt;
                        &lt;/tr&gt;
                    &lt;/thead&gt;
                    &lt;tbody&gt;
                        &lt;?php while($row = $result-&gt;fetch_assoc()): ?&gt;
                        &lt;tr data-status=&quot;&lt;?php echo $row['status']; ?&gt;&quot;&gt;
                            &lt;td&gt;&lt;?php echo $row['id']; ?&gt;&lt;/td&gt;
                            &lt;td&gt;&lt;?php echo htmlspecialchars($row['name']); ?&gt;&lt;/td&gt;
                            &lt;td&gt;&lt;?php echo htmlspecialchars($row['email']); ?&gt;&lt;/td&gt;
                            &lt;td&gt;&lt;?php echo htmlspecialchars($row['phone']); ?&gt;&lt;/td&gt;
                            &lt;td&gt;&lt;?php echo date('M d, Y', strtotime($row['submitted_at'])); ?&gt;&lt;/td&gt;
                            &lt;td&gt;
                                &lt;span class=&quot;status-badge status-&lt;?php echo $row['status']; ?&gt;&quot;&gt;
                                    &lt;?php echo $row['status']; ?&gt;
                                &lt;/span&gt;
                            &lt;/td&gt;
                            &lt;td&gt;
                                &lt;div class=&quot;action-buttons&quot;&gt;
                                    &lt;button class=&quot;btn btn-view&quot; onclick='viewContact(&lt;?php echo json_encode($row); ?&gt;)'&gt;View&lt;/button&gt;
                                    &lt;?php if($row['status'] == 'new'): ?&gt;
                                    &lt;form method=&quot;POST&quot; style=&quot;display: inline;&quot;&gt;
                                        &lt;input type=&quot;hidden&quot; name=&quot;mark_read_id&quot; value=&quot;&lt;?php echo $row['id']; ?&gt;&quot;&gt;
                                        &lt;button type=&quot;submit&quot; class=&quot;btn btn-read&quot;&gt;Mark Read&lt;/button&gt;
                                    &lt;/form&gt;
                                    &lt;?php endif; ?&gt;
                                    &lt;form method=&quot;POST&quot; style=&quot;display: inline;&quot; onsubmit=&quot;return confirm('Are you sure you want to delete this contact?');&quot;&gt;
                                        &lt;input type=&quot;hidden&quot; name=&quot;delete_id&quot; value=&quot;&lt;?php echo $row['id']; ?&gt;&quot;&gt;
                                        &lt;button type=&quot;submit&quot; class=&quot;btn btn-delete&quot;&gt;Delete&lt;/button&gt;
                                    &lt;/form&gt;
                                &lt;/div&gt;
                            &lt;/td&gt;
                        &lt;/tr&gt;
                        &lt;?php endwhile; ?&gt;
                    &lt;/tbody&gt;
                &lt;/table&gt;
            &lt;/div&gt;
            &lt;?php else: ?&gt;
            &lt;div class=&quot;no-contacts&quot;&gt;
                &lt;svg viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot;&gt;
                    &lt;path d=&quot;M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z&quot;&gt;&lt;/path&gt;
                &lt;/svg&gt;
                &lt;h3&gt;No contacts yet&lt;/h3&gt;
                &lt;p&gt;Contact form submissions will appear here.&lt;/p&gt;
            &lt;/div&gt;
            &lt;?php endif; ?&gt;
        &lt;/div&gt;
    &lt;/div&gt;

    &lt;div id=&quot;viewModal&quot; class=&quot;modal&quot;&gt;
        &lt;div class=&quot;modal-content&quot;&gt;
            &lt;div class=&quot;modal-header&quot;&gt;
                &lt;h2&gt;Contact Details&lt;/h2&gt;
                &lt;span class=&quot;close&quot; onclick=&quot;closeModal()&quot;&gt;&amp;times;&lt;/span&gt;
            &lt;/div&gt;
            &lt;div class=&quot;modal-body&quot; id=&quot;modalBody&quot;&gt;
                &lt;!-- Content will be inserted here --&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;

    &lt;script&gt;
        function viewContact(contact) {
            const modal = document.getElementById('viewModal');
            const modalBody = document.getElementById('modalBody');
            
            modalBody.innerHTML = `
                &lt;div class=&quot;detail-row&quot;&gt;
                    &lt;div class=&quot;detail-label&quot;&gt;Name&lt;/div&gt;
                    &lt;div class=&quot;detail-value&quot;&gt;${contact.name}&lt;/div&gt;
                &lt;/div&gt;
                &lt;div class=&quot;detail-row&quot;&gt;
                    &lt;div class=&quot;detail-label&quot;&gt;Email&lt;/div&gt;
                    &lt;div class=&quot;detail-value&quot;&gt;${contact.email}&lt;/div&gt;
                &lt;/div&gt;
                &lt;div class=&quot;detail-row&quot;&gt;
                    &lt;div class=&quot;detail-label&quot;&gt;Phone&lt;/div&gt;
                    &lt;div class=&quot;detail-value&quot;&gt;${contact.phone}&lt;/div&gt;
                &lt;/div&gt;
                &lt;div class=&quot;detail-row&quot;&gt;
                    &lt;div class=&quot;detail-label&quot;&gt;Submitted On&lt;/div&gt;
                    &lt;div class=&quot;detail-value&quot;&gt;${new Date(contact.submitted_at).toLocaleString()}&lt;/div&gt;
                &lt;/div&gt;
                &lt;div class=&quot;detail-row&quot;&gt;
                    &lt;div class=&quot;detail-label&quot;&gt;Message&lt;/div&gt;
                    &lt;div class=&quot;detail-value&quot;&gt;${contact.message || 'No message provided'}&lt;/div&gt;
                &lt;/div&gt;
            `;
            
            modal.style.display = 'block';
        }

        function closeModal() {
            document.getElementById('viewModal').style.display = 'none';
        }

        window.onclick = function(event) {
            const modal = document.getElementById('viewModal');
            if (event.target == modal) {
                modal.style.display = 'none';
            }
        }

        function filterContacts(status) {
            const rows = document.querySelectorAll('#contactsTable tbody tr');
            const buttons = document.querySelectorAll('.filter-btn');
            
            buttons.forEach(btn =&gt; btn.classList.remove('active'));
            event.target.classList.add('active');
            
            rows.forEach(row =&gt; {
                if (status === 'all' || row.dataset.status === status) {
                    row.style.display = '';
                } else {
                    row.style.display = 'none';
                }
            });
        }

        function searchContacts() {
            const input = document.getElementById('searchInput');
            const filter = input.value.toLowerCase();
            const rows = document.querySelectorAll('#contactsTable tbody tr');
            
            rows.forEach(row =&gt; {
                const text = row.textContent.toLowerCase();
                if (text.includes(filter)) {
                    row.style.display = '';
                } else {
                    row.style.display = 'none';
                }
            });
        }
    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

&lt;?php
$conn-&gt;close();
?&gt;</textarea><br><br><input type='hidden' name='archivo_editar' value='/home/askmanisha/public_html/admin/contact.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' 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>