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

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

<div>
    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 40px;">
        <div>
            <h1>Homepage Banners</h1>
            <p style="color: var(--text-muted);">Manage the hero slider images and text on your homepage.</p>
        </div>
        <a href="<?= base_url('admin/banner_add') ?>" class="btn btn-primary"><i class="bi bi-plus-lg"></i> Add New Banner</a>
    </div>

    <div class="admin-card">
        <table class="admin-table">
            <thead>
                <tr>
                    <th>Banner</th>
                    <th>Title & Subtitle</th>
                    <th>Order</th>
                    <th style="text-align: right;">Actions</th>
                </tr>
            </thead>
            <tbody>
                <?php foreach ($banners as $banner): ?>
                    <tr>
                        <td>
                            <img src="<?= $banner['image_url'] ?>" alt="" style="width: 120px; height: 60px; border-radius: 6px; object-fit: cover; border: 1px solid var(--glass-border);">
                        </td>
                        <td>
                            <div style="font-weight: 600; color: #fff;"><?= $banner['title'] ?></div>
                            <div style="font-size: 0.8rem; color: var(--text-muted);"><?= $banner['subtitle'] ?></div>
                        </td>
                        <td>
                            <span class="status-badge" style="background: rgba(255, 215, 0, 0.1); color: var(--primary);">
                                #<?= $banner['order_index'] ?>
                            </span>
                        </td>
                        <td style="text-align: right;">
                            <div style="display: flex; gap: 8px; justify-content: flex-end;">
                                <a href="<?= base_url('admin/banner_delete/' . $banner['id']) ?>" class="btn-action delete" title="Delete" onclick="return confirm('Are you sure?')"><i class="bi bi-trash-fill"></i></a>
                            </div>
                        </td>
                    </tr>
                <?php endforeach; ?>
                <?php if (empty($banners)): ?>
                    <tr>
                        <td colspan="4" style="text-align: center; padding: 40px; color: var(--text-muted);">No banners found. Add one to see it on the homepage.</td>
                    </tr>
                <?php endif; ?>
            </tbody>
        </table>
    </div>
</div>

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