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

<?= $this->section('styles') ?>
<!-- Include Summernote CSS for rich text editor -->
<link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-lite.min.css" rel="stylesheet">
<?= $this->endSection() ?>

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

<div class="d-flex justify-content-between align-items-center mb-4">
    <h2 class="h3 text-gray-800 mb-0">Edit Page: <?= esc($page['title']) ?></h2>
    <a href="<?= base_url('admin/pages') ?>" class="btn btn-secondary btn-sm"><i class="bi bi-arrow-left"></i> Back</a>
</div>

<div class="card shadow mb-4">
    <div class="card-body">
        <form action="<?= base_url('admin/pages/edit/' . $page['id']) ?>" method="post">
            <?= csrf_field() ?>
            
            <div class="row">
                <div class="col-md-6 mb-3">
                    <label class="form-label">Page Title</label>
                    <input type="text" class="form-control" name="title" value="<?= esc($page['title']) ?>" required>
                </div>
                <div class="col-md-6 mb-3">
                    <label class="form-label">Main Heading (H1)</label>
                    <input type="text" class="form-control" name="heading" value="<?= esc($page['heading']) ?>">
                </div>
            </div>

            <div class="mb-3">
                <label>Content</label>
                <textarea name="content" class="form-control summernote" rows="10"><?= esc($page['content']) ?></textarea>
            </div>

            <h5 class="mb-3 border-bottom pb-2">SEO Settings</h5>
            <div class="row mb-3">
                <div class="col-md-12 mb-3">
                    <label class="form-label">Meta Title</label>
                    <input type="text" class="form-control" name="meta_title" value="<?= esc($page['meta_title']) ?>">
                </div>
                <div class="col-md-12 mb-3">
                    <label class="form-label">Meta Description</label>
                    <textarea class="form-control" name="meta_description" rows="2"><?= esc($page['meta_description']) ?></textarea>
                </div>
            </div>

            <button type="submit" class="btn btn-primary" style="background-color: var(--primary-green); border-color: var(--primary-green);">Update Page</button>
        </form>
    </div>
</div>

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

<?= $this->section('scripts') ?>
<!-- Include Summernote JS -->
<script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-lite.min.js"></script>
<script>
    $(document).ready(function() {
        $('#summernote').summernote({
            placeholder: 'Enter page content here...',
            tabsize: 2,
            height: 300,
            toolbar: [
                ['style', ['style']],
                ['font', ['bold', 'underline', 'clear']],
                ['color', ['color']],
                ['para', ['ul', 'ol', 'paragraph']],
                ['table', ['table']],
                ['insert', ['link', 'picture', 'video']],
                ['view', ['fullscreen', 'codeview', 'help']]
            ]
        });
    });
</script>
<?= $this->endSection() ?>
