<?= $this->extend('App\Modules\Admin\Views\_admin_layout') ?>

<?= $this->section('content') ?>
<div class="container mx-auto px-4 py-8 max-w-7xl">
    
    <div class="flex flex-col md:flex-row md:items-center justify-between gap-6 mb-10">
        <div>
            <h1 class="text-3xl font-black text-navy mb-1 uppercase tracking-tight">Expedition Stories</h1>
            <p class="text-muted font-medium flex items-center gap-2">
                <span class="w-2 h-2 bg-secondary rounded-full"></span>
                Manage your Mount Kenya trekking insights and news.
            </p>
        </div>
        <a href="<?= url_to('admin.blog.create') ?>" 
           class="inline-flex items-center gap-2 px-6 py-3 bg-secondary text-primary-dark font-black text-xs uppercase tracking-[0.15em] rounded-xl hover:bg-accent hover:text-white transition-all shadow-lg shadow-secondary/20">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="3"><path d="M12 4v16m8-8H4"/></svg>
            Write New Story
        </a>
    </div>

    <div class="bg-surface rounded-[2rem] border border-border shadow-sm overflow-hidden">
        
        <div class="p-6 border-b border-border bg-light/30 flex flex-wrap items-center justify-between gap-4">
            <div class="flex gap-2">
                <a href="<?= url_to('admin.blog.index') ?>" 
                   class="px-4 py-2 text-[10px] font-black uppercase tracking-widest rounded-lg transition-all border-2 <?= ($statusFilter === 'all' || !$statusFilter) ? 'bg-primary border-primary text-white shadow-md' : 'bg-white border-border text-muted hover:border-secondary' ?>">
                    All Posts
                </a>
                <a href="<?= url_to('admin.blog.index') ?>?status=published" 
                   class="px-4 py-2 text-[10px] font-black uppercase tracking-widest rounded-lg transition-all border-2 <?= $statusFilter === 'published' ? 'bg-success border-success text-white shadow-md' : 'bg-white border-border text-muted hover:text-success hover:border-success' ?>">
                    Published
                </a>
                <a href="<?= url_to('admin.blog.index') ?>?status=draft" 
                   class="px-4 py-2 text-[10px] font-black uppercase tracking-widest rounded-lg transition-all border-2 <?= $statusFilter === 'draft' ? 'bg-warning border-warning text-white shadow-md' : 'bg-white border-border text-muted hover:text-warning hover:border-warning' ?>">
                    Drafts
                </a>
            </div>
            
            <div class="relative min-w-[280px]">
                <input type="text" id="blogSearch" placeholder="Search stories..." class="w-full pl-10 pr-4 py-2 bg-white border-2 border-border rounded-xl text-sm focus:border-secondary transition-all outline-none">
                <svg class="w-4 h-4 absolute left-3 top-2.5 text-muted" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" stroke-width="2"/></svg>
            </div>
        </div>

        <div class="overflow-x-auto">
            <table class="w-full text-left" id="storiesTable">
                <thead>
                    <tr class="bg-light/50">
                        <th class="p-5 text-[10px] font-black uppercase tracking-widest text-muted/80">Story Detail</th>
                        <th class="p-5 text-[10px] font-black uppercase tracking-widest text-muted/80 text-center">Status</th>
                        <th class="p-5 text-[10px] font-black uppercase tracking-widest text-muted/80">Category</th>
                        <th class="p-5 text-right text-[10px] font-black uppercase tracking-widest text-muted/80">Actions</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-border/60">
                    <?php if (empty($posts)): ?>
                        <tr>
                            <td colspan="4" class="p-20 text-center">
                                <div class="flex flex-col items-center justify-center space-y-3">
                                    <div class="w-16 h-16 bg-light rounded-full flex items-center justify-center text-muted/30">
                                        <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" stroke-width="2"/></svg>
                                    </div>
                                    <p class="text-muted font-bold italic">The trail is empty. No blog posts found.</p>
                                </div>
                            </td>
                        </tr>
                    <?php else: ?>
                        <?php foreach ($posts as $post): ?>
                            <tr class="hover:bg-light/20 transition-all group">
                                <td class="p-5">
                                    <div class="font-black text-primary text-lg group-hover:text-accent transition-colors"><?= esc($post['title']) ?></div>
                                    <div class="text-[11px] text-muted flex items-center gap-1 mt-1 font-bold uppercase tracking-tighter">
                                        Added <?= date('M d, Y', strtotime($post['created_at'])) ?>
                                    </div>
                                </td>
                                <td class="p-5 text-center">
                                    <?php if ($post['status'] === 'published'): ?>
                                        <span class="inline-flex items-center px-3 py-1 bg-success/10 text-success text-[10px] font-black uppercase rounded-lg border border-success/20">Live</span>
                                    <?php else: ?>
                                        <span class="inline-flex items-center px-3 py-1 bg-warning/10 text-warning text-[10px] font-black uppercase rounded-lg border border-warning/20">Draft</span>
                                    <?php endif; ?>
                                </td>
                                <td class="p-5">
                                    <span class="text-[10px] font-black text-muted/70 bg-light px-2 py-1 rounded-md border border-border"><?= esc($post['category'] ?? 'General') ?></span>
                                </td>
                                <td class="p-5">
                                    <div class="flex justify-end gap-2">
                                        <a href="<?= url_to('admin.blog.edit', $post['id']) ?>" 
                                           class="w-10 h-10 flex items-center justify-center bg-white border border-border text-primary hover:bg-primary hover:text-white rounded-xl transition-all shadow-sm">
                                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" stroke-width="2"/></svg>
                                        </a>
                                        <button data-url="<?= url_to('admin.blog.delete', $post['id']) ?>" 
                                                class="delete-trigger w-10 h-10 flex items-center justify-center bg-white border border-border text-muted hover:bg-warning hover:text-white rounded-xl transition-all shadow-sm">
                                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" stroke-width="2"/></svg>
                                        </button>
                                    </div>
                                </td>
                            </tr>
                        <?php endforeach; ?>
                    <?php endif; ?>
                </tbody>
            </table>
        </div>
    </div>
    
    <div class="mt-8 flex justify-center">
        <?= $pager->links() ?>
    </div>
</div>

<div id="deleteModal" 
     style="display: none;" 
     class="fixed inset-0 z-50 flex items-center justify-center bg-primary/40 backdrop-blur-sm p-4">
    <div class="bg-surface rounded-[2rem] max-w-sm w-full p-8 shadow-2xl border border-border">
        <h3 class="text-xl font-black text-navy text-center mb-2 uppercase tracking-tight">Confirm Removal</h3>
        <p class="text-muted text-center text-sm mb-8 font-medium">Removing this story will take it off the mountain trail permanently. Continue?</p>
        <div class="flex gap-3">
            <button id="closeModal" class="flex-1 py-3 bg-light text-muted font-bold rounded-xl hover:bg-border transition-colors">Cancel</button>
            <a id="confirmDelete" href="#" class="flex-1 py-3 bg-warning text-white font-bold rounded-xl hover:bg-red-700 text-center transition-colors shadow-lg">Delete</a>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', () => {
    // Search function
    const search = document.getElementById('blogSearch');
    search?.addEventListener('input', (e) => {
        const val = e.target.value.toLowerCase();
        document.querySelectorAll('#storiesTable tbody tr').forEach(row => {
            const text = row.innerText.toLowerCase();
            row.style.display = text.includes(val) ? '' : 'none';
        });
    });

    // Delete Modal Controls
    const modal = document.getElementById('deleteModal');
    
    document.querySelectorAll('.delete-trigger').forEach(btn => {
        btn.onclick = (e) => {
            e.preventDefault();
            document.getElementById('confirmDelete').href = btn.dataset.url;
            modal.style.display = 'flex'; // Use style.display instead of toggle classes
        };
    });

    document.getElementById('closeModal').onclick = () => {
        modal.style.display = 'none';
    };

    // Close on background click
    modal.onclick = (e) => {
        if (e.target === modal) modal.style.display = 'none';
    };
});
</script>
<?= $this->endSection() ?>