<?= $this->extend('layouts/admin') ?>

<?= $this->section('content') ?>

<div style="display: grid; grid-template-columns: 1fr 2fr; gap: 40px;">
    <!-- Add Category Form -->
    <div>
        <h2 style="margin-bottom: 30px;">Add New Category</h2>
        <div class="admin-card" style="padding: 30px;">
            <form action="<?= base_url('admin/category_save') ?>" method="post" enctype="multipart/form-data">
                <div style="margin-bottom: 20px;">
                    <label style="display: block; margin-bottom: 8px; color: var(--text-muted);">Category Name</label>
                    <input type="text" name="name" style="width: 100%; padding: 12px; background: rgba(0,0,0,0.3); border: 1px solid var(--glass-border); border-radius: 5px; color: #fff;" placeholder="e.g. Residential" required>
                </div>
                <div style="margin-bottom: 25px;">
                    <label style="display: block; margin-bottom: 8px; color: var(--text-muted);">Cover Image</label>
                    <input type="file" name="image" style="width: 100%; padding: 10px; background: rgba(0,0,0,0.3); border: 1px solid var(--glass-border); border-radius: 5px; color: #fff;">
                </div>
                <button type="submit" class="btn btn-primary" style="width: 100%; padding: 12px;">Create Category</button>
            </form>
        </div>
    </div>

    <!-- Category List -->
    <div>
        <h2 style="margin-bottom: 30px;">Existing Categories</h2>
        <div class="admin-card">
            <table class="admin-table">
                <thead>
                    <tr>
                        <th>Thumbnail</th>
                        <th>Category Name</th>
                        <th>Created At</th>
                        <th style="text-align: right;">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    <?php foreach ($categories as $cat): ?>
                        <tr>
                            <td>
                                <?php if($cat['image']): ?>
                                    <img src="<?= $cat['image'] ?>" alt="" style="width: 40px; height: 40px; border-radius: 6px; object-fit: cover;">
                                <?php else: ?>
                                    <div style="width: 40px; height: 40px; border-radius: 6px; background: rgba(255,255,255,0.05); display: flex; align-items: center; justify-content: center; color: var(--text-muted);">
                                        <i class="bi bi-image"></i>
                                    </div>
                                <?php endif; ?>
                            </td>
                            <td style="font-weight: 600;"><?= $cat['name'] ?></td>
                            <td style="color: var(--text-muted); font-size: 0.85rem;"><?= date('M d, Y', strtotime($cat['created_at'])) ?></td>
                            <td style="text-align: right;">
                                <div style="display: flex; gap: 8px; justify-content: flex-end;">
                                    <a href="#" class="btn-action edit"><i class="bi bi-pencil"></i></a>
                                    <a href="#" class="btn-action delete"><i class="bi bi-trash"></i></a>
                                </div>
                            </td>
                        </tr>
                    <?php endforeach; ?>
                </tbody>
            </table>
        </div>
    </div>
</div>

<?= $this->endSection() ?>
