<?= $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/services') ?>" 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/service_save') ?>" method="post" enctype="multipart/form-data">
                <div style="display: grid; grid-template-columns: 2fr 1fr; gap: 20px; margin-bottom: 20px;">
                    <div>
                        <label style="display: block; margin-bottom: 8px; color: var(--text-muted);">Service 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;" placeholder="e.g. Structural Engineering" required>
                    </div>
                    <div>
                        <label style="display: block; margin-bottom: 8px; color: var(--text-muted);">Service 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>

                <div style="margin-bottom: 20px;">
                    <label style="display: block; margin-bottom: 8px; color: var(--text-muted);">Short Description</label>
                    <textarea name="description" rows="3" style="width: 100%; padding: 12px; background: rgba(0,0,0,0.3); border: 1px solid var(--glass-border); border-radius: 5px; color: #fff;" placeholder="Brief summary for cards" required></textarea>
                </div>

                <div style="margin-bottom: 30px;">
                    <label style="display: block; margin-bottom: 8px; color: var(--text-muted);">Long Description (Detailed View)</label>
                    <textarea name="long_description" rows="8" style="width: 100%; padding: 12px; background: rgba(0,0,0,0.3); border: 1px solid var(--glass-border); border-radius: 5px; color: #fff;" placeholder="Comprehensive service details" required></textarea>
                </div>

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

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