<?php
$pageTitle = 'Add Page';
require_once dirname(__DIR__) . '/includes/header.php';

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $title         = trim($_POST['title'] ?? '');
    $slug          = trim($_POST['slug'] ?? '') ?: slug($title);
    $meta_title    = trim($_POST['meta_title'] ?? '');
    $meta_desc     = trim($_POST['meta_desc'] ?? '');
    $hero_heading  = trim($_POST['hero_heading'] ?? '');
    $hero_sub      = trim($_POST['hero_sub'] ?? '');
    $hero_bg       = handleUpload('hero_bg', 'pages') ?? trim($_POST['hero_bg_url'] ?? '');
    $content       = $_POST['content'] ?? '';
    $status        = $_POST['status'] ?? 'published';
    $uid           = (int)$admin['id'];

    // unique slug
    $s = $slug; $i = 1;
    while (db()->query("SELECT id FROM pages WHERE slug='".db()->real_escape_string($s)."'")->num_rows > 0)
        $s = $slug . '-' . $i++;
    $slug = $s;

    $st = db()->prepare("INSERT INTO pages (title,slug,meta_title,meta_desc,hero_heading,hero_subheading,hero_bg_image,content,status,created_by) VALUES (?,?,?,?,?,?,?,?,?,?)");
    $st->bind_param('ssssssssi', $title,$slug,$meta_title,$meta_desc,$hero_heading,$hero_sub,$hero_bg,$content,$status,$uid);
    // Fix: 10 params
    $st = db()->prepare("INSERT INTO pages (title,slug,meta_title,meta_desc,hero_heading,hero_subheading,hero_bg_image,content,status,created_by) VALUES (?,?,?,?,?,?,?,?,?,?)");
    $st->bind_param('sssssssssi', $title,$slug,$meta_title,$meta_desc,$hero_heading,$hero_sub,$hero_bg,$content,$status,$uid);

    if ($st->execute()) {
        flash('Page created!', 'success');
        redirect(ADMIN_URL . '/pages/pages.php');
    } else {
        flash('Error: ' . db()->error, 'error');
    }
}
?>
<div class="page-header">
    <h1>Add New Page</h1>
    <div class="page-header-actions">
        <a href="pages.php" class="btn btn-secondary"><i class="fas fa-arrow-left"></i> Back</a>
    </div>
</div>

<form method="POST" enctype="multipart/form-data">
<div style="display:grid;grid-template-columns:1fr 300px;gap:20px;align-items:start">

<div style="display:flex;flex-direction:column;gap:20px">
    <div class="card">
        <div class="card-header"><i class="fas fa-file-alt" style="color:var(--brand)"></i><h2>Page Info</h2></div>
        <div class="card-body">
            <div class="form-group">
                <label class="form-label">Page Title *</label>
                <input type="text" name="title" class="form-control" required placeholder="e.g. About Us"
                    oninput="this.form.slug.value = this.value.toLowerCase().replace(/[^a-z0-9\s-]/g,'').replace(/\s+/g,'-')">
            </div>
            <div class="form-group">
                <label class="form-label">Slug</label>
                <input type="text" name="slug" class="form-control" placeholder="about-us">
                <div class="form-hint">Used in URL: yoursite.com/about-us.php</div>
            </div>
        </div>
    </div>
    <div class="card">
        <div class="card-header"><i class="fas fa-mountain" style="color:var(--brand)"></i><h2>Hero Section</h2></div>
        <div class="card-body">
            <div class="form-group">
                <label class="form-label">Hero Heading</label>
                <input type="text" name="hero_heading" class="form-control" placeholder="Big heading for the page top">
            </div>
            <div class="form-group">
                <label class="form-label">Hero Subheading</label>
                <textarea name="hero_sub" class="form-control" rows="2" placeholder="Short description below heading..."></textarea>
            </div>
            <div class="form-row">
                <div class="form-group">
                    <label class="form-label">Hero Background Image (Upload)</label>
                    <input type="file" name="hero_bg" class="form-control" accept="image/*">
                </div>
                <div class="form-group">
                    <label class="form-label">Or Image URL</label>
                    <input type="text" name="hero_bg_url" class="form-control" placeholder="assets/images/bg.jpg">
                </div>
            </div>
        </div>
    </div>
    <div class="card">
        <div class="card-header"><i class="fas fa-align-left" style="color:var(--brand)"></i><h2>Page Content</h2></div>
        <div class="card-body">
            <div id="editor" style="min-height:200px"></div>
            <input type="hidden" name="content" id="content-input">
        </div>
    </div>
    <div class="card">
        <div class="card-header"><i class="fas fa-search" style="color:var(--brand)"></i><h2>SEO / Meta</h2></div>
        <div class="card-body">
            <div class="form-group">
                <label class="form-label">Meta Title</label>
                <input type="text" name="meta_title" class="form-control" placeholder="SEO title (leave blank to use page title)">
            </div>
            <div class="form-group" style="margin:0">
                <label class="form-label">Meta Description</label>
                <textarea name="meta_desc" class="form-control" rows="3" placeholder="Short SEO description (150-160 chars)..."></textarea>
            </div>
        </div>
    </div>
</div>

<div style="display:flex;flex-direction:column;gap:16px">
    <div class="card">
        <div class="card-header"><i class="fas fa-cog"></i><h2>Publish</h2></div>
        <div class="card-body">
            <div class="form-group">
                <label class="form-label">Status</label>
                <select name="status" class="form-select">
                    <option value="published">Published</option>
                    <option value="draft">Draft</option>
                </select>
            </div>
            <button type="submit" class="btn btn-primary" style="width:100%"><i class="fas fa-save"></i> Save Page</button>
        </div>
    </div>
</div>
</div>
</form>

<link href="https://cdn.quilljs.com/1.3.7/quill.snow.css" rel="stylesheet">
<script src="https://cdn.quilljs.com/1.3.7/quill.min.js"></script>
<script>
var quill = new Quill('#editor',{theme:'snow',modules:{toolbar:[[{header:[1,2,3,false]}],['bold','italic','underline'],[{list:'ordered'},{list:'bullet'}],['link','image','blockquote'],['clean']]}});
document.querySelector('form').addEventListener('submit',function(){ document.getElementById('content-input').value=quill.root.innerHTML; });
</script>

<?php require_once dirname(__DIR__) . '/includes/footer.php'; ?>
