{% extends "admin/layout.twig" %}

{% block content %}
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px;">
    <div>
        <h2 style="font-size: 1.5rem; color: #0f172a; margin-bottom: 8px;">Blog Management</h2>
        <p style="color: #64748b;">Manage and organize your blog posts</p>
    </div>
    <a href="{{ base_url }}/admin/blog/create" class="btn btn-primary">
        <i class="fas fa-plus"></i>
        Create New Blog
    </a>
</div>

<!-- Filters -->
<div style="background: white; padding: 20px; border-radius: 16px; margin-bottom: 24px; display: flex; gap: 16px; align-items: center; border: 1px solid #edf2f7;">
    <div style="display: flex; gap: 12px; flex: 1;">
        <div style="position: relative; flex: 1; max-width: 300px;">
            <i class="fas fa-search" style="position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: #94a3b8; font-size: 14px;"></i>
            <input type="text" placeholder="Search blogs..." id="searchInput" 
                   style="width: 100%; padding: 12px 16px 12px 42px; border: 1.5px solid #edf2f7; border-radius: 12px; font-size: 14px; background: #fafbfc; transition: all 0.2s;"
                   onfocus="this.style.borderColor='#393186'; this.style.background='white';"
                   onblur="this.style.borderColor='#edf2f7'; this.style.background='#fafbfc';">
        </div>
        <select id="statusFilter" 
                style="padding: 12px 16px; border: 1.5px solid #edf2f7; border-radius: 12px; font-size: 14px; color: #1e293b; background: #fafbfc; cursor: pointer; outline: none; transition: all 0.2s;"
                onfocus="this.style.borderColor='#393186'; this.style.background='white';"
                onblur="this.style.borderColor='#edf2f7'; this.style.background='#fafbfc';">
            <option value="all">All Status</option>
            <option value="published">Published</option>
            <option value="draft">Draft</option>
        </select>
    </div>
    <div style="padding: 8px 16px; background: #f0eff7; border-radius: 30px;">
        <span style="color: #393186; font-weight: 600; font-size: 14px;">Total: {{ blogs|length }} blogs</span>
    </div>
</div>

<div class="table-container">
    <table>
        <thead>
            <tr>
                <th style="width: 80px;">Image</th>
                <th>Title</th>
                <th style="width: 120px;">Status</th>
                <th style="width: 140px;">Created</th>
                <th style="width: 140px;">Updated</th>
                <th style="width: 220px;">Actions</th>
            </tr>
        </thead>
        <tbody>
            {% for blog in blogs %}
            <tr>
                <td>
                    {% if blog.featured_image %}
                        <img src="{{ base_url }}/uploads/{{ blog.featured_image }}" class="blog-image">
                    {% else %}
                        <div style="width:48px; height:48px; background:#f0eff7; border-radius:12px; display:flex; align-items:center; justify-content:center;">
                            <i class="fas fa-image" style="color:#393186; opacity:0.5;"></i>
                        </div>
                    {% endif %}
                </td>
                <td>
                    <div style="font-weight: 600; margin-bottom: 4px; color: #0f172a;">{{ blog.title }}</div>
                    <div style="font-size: 0.75rem; color: #64748b; display: flex; align-items: center; gap: 4px;">
                        <i class="fas fa-link" style="color: #393186; opacity: 0.7;"></i> 
                        /blog/{{ blog.slug }}
                    </div>
                </td>
                <td>
                    {% if blog.status == 'published' %}
                        <span class="status-badge status-published" style="background: #f0eff7; color: #393186;">
                            <i class="fas fa-check-circle" style="color: #393186;"></i>
                            Published
                        </span>
                    {% else %}
                        <span class="status-badge status-draft" style="background: #fff3e0; color: #b45b0b;">
                            <i class="fas fa-pen"></i>
                            Draft
                        </span>
                    {% endif %}
                </td>
                <td style="color: #475569;">
                    <i class="far fa-calendar-alt" style="margin-right: 8px; color: #393186; opacity: 0.7;"></i>
                    {{ blog.created_at|date("d M, Y") }}
                </td>
                <td style="color: #475569;">
                    <i class="far fa-clock" style="margin-right: 8px; color: #393186; opacity: 0.7;"></i>
                    {{ blog.updated_at|date("d M, Y") }}
                </td>
                <td>
                    <div class="actions">
                        <a href="{{ base_url }}/blog/{{ blog.slug }}" target="_blank" class="action-btn">
                            <i class="fas fa-eye"></i>
                            View
                        </a>
                        <a href="{{ base_url }}/admin/blog/edit/{{ blog.id }}" class="action-btn">
                            <i class="fas fa-edit"></i>
                            Edit
                        </a>
                        
                        <!-- FIXED: Changed from <a> to POST form -->
                        <form method="POST" action="{{ base_url }}/admin/blog/delete/{{ blog.id }}" 
                            style="display: inline; margin: 0; padding: 0;"
                            onsubmit="return confirm('Are you sure you want to delete this blog post? This action cannot be undone.')">
                            <button type="submit" class="action-btn action-delete" 
                                    style="background: white; border: 1.5px solid #fee2e2; color: #ef4444; padding: 8px 14px; border-radius: 10px; font-size: 0.8rem; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; transition: all 0.2s; border: none;"
                                    onmouseover="this.style.background='#fee2e2'; this.style.color='#dc2626';"
                                    onmouseout="this.style.background='white'; this.style.color='#ef4444';">
                                <i class="fas fa-trash"></i>
                                Delete
                            </button>
                        </form>
                    </div>
                </td>
            </tr>
            {% else %}
            <tr>
                <td colspan="6">
                    <div class="empty-state">
                        <i class="fas fa-newspaper" style="color: #393186; opacity: 0.3; font-size: 3.5rem; margin-bottom: 16px;"></i>
                        <h3 style="color: #1e293b; font-size: 1.2rem; margin-bottom: 8px;">No blogs found</h3>
                        <p style="color: #64748b; margin-bottom: 20px;">Get started by creating your first blog post</p>
                        <a href="{{ base_url }}/admin/blog/create" class="btn btn-primary">
                            <i class="fas fa-plus"></i>
                            Create New Blog
                        </a>
                    </div>
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>

<!-- Pagination -->
{% if total_pages > 1 %}
<div style="display: flex; justify-content: center; margin-top: 32px;">
    <div style="display: flex; gap: 8px;">
        {% for i in 1..total_pages %}
            <a href="{{ base_url }}/admin/blog?page={{ i }}" 
               style="padding: 10px 16px; border-radius: 10px; background: {{ current_page == i ? '#393186' : 'white' }}; color: {{ current_page == i ? 'white' : '#475569' }}; text-decoration: none; border: 1.5px solid {{ current_page == i ? '#393186' : '#edf2f7' }}; font-weight: 600; transition: all 0.2s;"
               onmouseover="this.style.borderColor='#393186'; {% if current_page != i %}this.style.background='#f0eff7';{% endif %}"
               onmouseout="this.style.borderColor='{{ current_page == i ? '#393186' : '#edf2f7' }}'; {% if current_page != i %}this.style.background='white';{% endif %}">
                {{ i }}
            </a>
        {% endfor %}
    </div>
</div>
{% endif %}

<script>
document.addEventListener('DOMContentLoaded', function() {
    const searchInput = document.getElementById('searchInput');
    const statusFilter = document.getElementById('statusFilter');
    
    if (searchInput) {
        searchInput.addEventListener('keyup', filterTable);
    }
    
    if (statusFilter) {
        statusFilter.addEventListener('change', filterTable);
    }
    
    function filterTable() {
        const searchText = searchInput?.value.toLowerCase() || '';
        const statusValue = statusFilter?.value || 'all';
        const rows = document.querySelectorAll('tbody tr');
        
        rows.forEach(row => {
            if (row.querySelector('.empty-state')) return;
            
            const title = row.cells[1]?.querySelector('div:first-child')?.textContent.toLowerCase() || '';
            const statusElem = row.cells[2]?.querySelector('.status-badge');
            const status = statusElem?.textContent.trim().toLowerCase() || '';
            
            const matchesSearch = title.includes(searchText);
            const matchesStatus = statusValue === 'all' || status.includes(statusValue);
            
            row.style.display = matchesSearch && matchesStatus ? '' : 'none';
        });
    }
});
</script>

<style>
/* Additional inline styles to ensure #393186 theme */
.status-published {
    background: #f0eff7 !important;
    color: #393186 !important;
}

.status-published i {
    color: #393186 !important;
}

.btn-primary {
    background: #393186 !important;
}

.btn-primary:hover {
    background: #2e2770 !important;
}

.table-container table thead th {
    color: #393186 !important;
}

.pagination-active {
    background: #393186 !important;
    border-color: #393186 !important;
}

input:focus, select:focus {
    border-color: #393186 !important;
}
</style>
{% endblock %}