<%- include('partials/layout_start', { activePage: 'socials', pageTitle: 'Manage Social Links' }) %>

<div class="admin-section">
    <form action="/admin/social/add" method="POST" id="socialForm" style="margin-bottom: 30px; background: #1e293b; padding: 20px; border-radius: 8px; border: 1px solid #334155; max-width: 800px;">
        <input type="hidden" name="id" id="formId" value="">
        <h4 id="formTitle" style="margin-top: 0; margin-bottom: 15px;">Add New Social Link</h4>
        <div class="form-group" style="margin-bottom: 15px;">
            <label style="display: block; margin-bottom: 5px; font-weight: bold;">Platform Name</label>
            <input type="text" name="platform_name" id="platformName" placeholder="e.g. TikTok" required style="width: 100%; padding: 10px; border: 1px solid #475569; background: #0f172a; color: #f1f5f9; border-radius: 4px;">
        </div>
        <div class="form-group" style="margin-bottom: 15px;">
            <label style="display: block; margin-bottom: 5px; font-weight: bold;">Icon Class (FontAwesome)</label>
            <input type="text" name="icon_class" id="iconClass" placeholder="e.g. fab fa-tiktok" required style="width: 100%; padding: 10px; border: 1px solid #475569; background: #0f172a; color: #f1f5f9; border-radius: 4px;">
        </div>
        <div class="form-group" style="margin-bottom: 15px;">
            <label style="display: block; margin-bottom: 5px; font-weight: bold;">URL</label>
            <input type="url" name="url" id="urlInput" placeholder="https://..." required style="width: 100%; padding: 10px; border: 1px solid #475569; background: #0f172a; color: #f1f5f9; border-radius: 4px;">
        </div>
        <div style="display: flex; gap: 10px;">
            <button type="submit" id="submitBtn" class="btn-primary" style="padding: 10px 20px; background-color: #f59e0b; color: #1e293b; border: none; font-weight: bold; cursor: pointer; border-radius: 4px;">Add Link</button>
            <button type="button" id="cancelBtn" class="btn-primary" style="display: none; padding: 10px 20px; background-color: #64748b; color: #fff; border: none; font-weight: bold; cursor: pointer; border-radius: 4px;" onclick="cancelEdit()">Cancel</button>
        </div>
    </form>
    
    <div class="grid-2">
        <% links.forEach(link => { %>
            <div style="background: #1e293b; border: 1px solid #334155; border-radius: 8px; overflow: hidden; display: flex; flex-direction: column;">
                <div style="padding: 20px; display: flex; align-items: center; gap: 15px;">
                    <i class="<%= link.icon_class %>" style="font-size: 2rem; color: #f59e0b;"></i>
                    <div style="flex-grow: 1;">
                        <div style="font-weight: bold; font-size: 1.1rem;"><%= link.platform_name %></div>
                        <div style="color: #94a3b8; font-size: 0.9rem; word-break: break-all;"><%= link.url %></div>
                    </div>
                </div>
                <div style="padding: 10px 15px; background: #0f172a; border-top: 1px solid #334155; text-align: right; display: flex; justify-content: flex-end; gap: 10px;">
                    <button type="button" style="color:white; background: #3b82f6; border:none; padding: 6px 12px; border-radius: 4px; cursor:pointer;" onclick="editLink('<%= link.id %>', '<%= link.platform_name.replace(/'/g, "\\'") %>', '<%= link.icon_class.replace(/'/g, "\\'") %>', '<%= link.url.replace(/'/g, "\\'") %>')"><i class="fas fa-edit"></i> Edit</button>
                    <form action="/admin/social/delete/<%= link.id %>" method="POST" style="margin: 0;">
                        <button type="submit" style="color:white; background: #ef4444; border:none; padding: 6px 12px; border-radius: 4px; cursor:pointer;"><i class="fas fa-trash-alt"></i> Delete</button>
                    </form>
                </div>
            </div>
        <% }) %>
    </div>
</div>

<script>
function editLink(id, platform, icon, url) {
    document.getElementById('socialForm').action = '/admin/social/edit';
    document.getElementById('formId').value = id;
    document.getElementById('platformName').value = platform;
    document.getElementById('iconClass').value = icon;
    document.getElementById('urlInput').value = url;
    document.getElementById('formTitle').innerText = 'Edit Social Link';
    document.getElementById('submitBtn').innerText = 'Save Changes';
    document.getElementById('cancelBtn').style.display = 'inline-block';
    window.scrollTo({ top: 0, behavior: 'smooth' });
}

function cancelEdit() {
    document.getElementById('socialForm').reset();
    document.getElementById('socialForm').action = '/admin/social/add';
    document.getElementById('formId').value = '';
    document.getElementById('formTitle').innerText = 'Add New Social Link';
    document.getElementById('submitBtn').innerText = 'Add Link';
    document.getElementById('cancelBtn').style.display = 'none';
}
</script>

<%- include('partials/layout_end') %>
