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

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

<div>
    <div style="max-width: 800px; margin: 0 auto;">
        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 40px;">
            <h1><?= $title ?></h1>
            <a href="<?= base_url('admin/banners') ?>" class="btn" style="border: 1px solid var(--text-muted); color: var(--text-muted);">Cancel</a>
        </div>

        <div class="service-card" style="padding: 40px; background: var(--bg-card);">
            <form action="<?= base_url('admin/banner_save') ?>" method="post" enctype="multipart/form-data">
                <div style="margin-bottom: 20px;">
                    <label style="display: block; margin-bottom: 8px; color: var(--text-muted);">Main Title</label>
                    <input type="text" name="title" style="width: 100%; padding: 12px; background: rgba(0,0,0,0.3); border: 1px solid var(--glass-border); border-radius: 5px; color: #fff;" required placeholder="e.g. Building The Future">
                </div>

                <div style="margin-bottom: 20px;">
                    <label style="display: block; margin-bottom: 8px; color: var(--text-muted);">Subtitle / Description</label>
                    <input type="text" name="subtitle" 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. Excellence in every brick laid.">
                </div>

                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px;">
                    <div>
                        <label style="display: block; margin-bottom: 8px; color: var(--text-muted);">Banner 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;" required>
                    </div>
                    <div>
                        <label style="display: block; margin-bottom: 8px; color: var(--text-muted);">Order Index</label>
                        <input type="number" name="order_index" value="0" style="width: 100%; padding: 12px; background: rgba(0,0,0,0.3); border: 1px solid var(--glass-border); border-radius: 5px; color: #fff;">
                    </div>
                </div>

                <div style="margin-bottom: 30px;">
                    <label style="display: block; margin-bottom: 8px; color: var(--text-muted);">Button Link (Optional)</label>
                    <input type="text" name="link_url" 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. /projects or https://...">
                </div>

                <button type="submit" class="btn btn-primary" style="width: 100%; padding: 15px;">Save Banner</button>
            </form>
        </div>
    </div>
</div>

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