SkyArtShop/Views/AdminBlog/Create.cshtml

@model SkyArtShop.Models.BlogPost
@{
    Layout = "~/Views/Shared/_AdminLayout.cshtml";
    ViewData["Title"] = "Create Blog Post";
}

<style>
    .form-check-input[type="checkbox"] {
        width: 22px;
        height: 22px;
        cursor: pointer;
        border: 2px solid #dee2e6;
        border-radius: 4px;
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        background-color: white;
        transition: all 0.2s ease;
        position: relative;
    }
    
    .form-check-input[type="checkbox"]:checked {
        background-color: #28a745;
        border-color: #28a745;
    }
    
    .form-check-input[type="checkbox"]:checked::after {
        content: '✓';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: white;
        font-size: 16px;
        font-weight: bold;
        line-height: 1;
    }
    
    .form-check-input[type="checkbox"]:hover {
        border-color: #28a745;
        box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
    }
</style>

<div class="card">
    <div class="card-body">
        <form method="post">
            <div asp-validation-summary="All" class="text-danger mb-3"></div>
            <div class="mb-3">
                <label class="form-label">Title</label>
                <input class="form-control" name="Title" value="@Model.Title" required />
            </div>
            <div class="mb-3">
                <label class="form-label">Content</label>
                <textarea class="form-control" name="Content" id="blogContent" rows="15">@Model.Content</textarea>
            </div>
            <div class="mb-3">
                <label class="form-label">Excerpt</label>
                <textarea class="form-control" name="Excerpt" rows="3">@Model.Excerpt</textarea>
            </div>
            <div class="mb-3">
                <label class="form-label">Featured Image URL</label>
                <div class="input-group">
                    <input class="form-control" name="FeaturedImage" id="featuredImageUrl" value="@Model.FeaturedImage" />
                    <button type="button" class="btn btn-secondary" onclick="uploadFeaturedImage()">Upload</button>
                </div>
                <div id="imagePreview" class="mt-2" style="@(string.IsNullOrEmpty(Model.FeaturedImage) ? "display:none;" : "")">
                    <img src="@Model.FeaturedImage" style="max-width: 200px; max-height: 200px;" />
                </div>
            </div>
            <div class="mb-3">
                <label class="form-label">Tags (comma separated)</label>
                <input class="form-control" name="Tags" value="@(Model.Tags != null ? string.Join(", ", Model.Tags) : "")" />
            </div>
            <div class="form-check mb-3">
                <input class="form-check-input" type="checkbox" name="IsPublished" @(Model.IsPublished ? "checked" : "") />
                <label class="form-check-label">Published</label>
            </div>
            <button class="btn btn-primary" type="submit">Save Post</button>
            <a class="btn btn-secondary" href="/admin/blog">Cancel</a>
        </form>
    </div>
</div>

@section Scripts {
<script src="https://cdn.ckeditor.com/ckeditor5/40.1.0/classic/ckeditor.js"></script>
<script>
ClassicEditor
    .create(document.querySelector('#blogContent'), {
        toolbar: {
            items: [
                'heading', '|',
                'bold', 'italic', 'underline', 'strikethrough', '|',
                'link', 'blockQuote', '|',
                'bulletedList', 'numberedList', '|',
                'outdent', 'indent', '|',
                'alignment', '|',
                'insertTable', '|',
                'fontSize', 'fontColor', 'fontBackgroundColor', '|',
                'removeFormat', '|',
                'undo', 'redo', '|',
                'sourceEditing'
            ],
            shouldNotGroupWhenFull: true
        },
        heading: {
            options: [
                { model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' },
                { model: 'heading1', view: 'h1', title: 'Heading 1', class: 'ck-heading_heading1' },
                { model: 'heading2', view: 'h2', title: 'Heading 2', class: 'ck-heading_heading2' },
                { model: 'heading3', view: 'h3', title: 'Heading 3', class: 'ck-heading_heading3' },
                { model: 'heading4', view: 'h4', title: 'Heading 4', class: 'ck-heading_heading4' }
            ]
        },
        fontSize: {
            options: ['small', 'default', 'big']
        },
        table: {
            contentToolbar: ['tableColumn', 'tableRow', 'mergeTableCells']
        },
        htmlSupport: {
            allow: [{ name: /.*/, attributes: true, classes: true, styles: true }]
        }
    })
    .catch(error => { console.error(error); });

function uploadFeaturedImage() {
    const input = document.createElement('input');
    input.type = 'file';
    input.accept = 'image/*';
    input.onchange = function(e) {
        const file = e.target.files[0];
        const formData = new FormData();
        formData.append('file', file);
        fetch('/admin/upload/image', {
            method: 'POST',
            body: formData
        })
        .then(response => response.json())
        .then(result => {
            if (result.success) {
                document.getElementById('featuredImageUrl').value = result.url;
                document.getElementById('imagePreview').style.display = 'block';
                document.getElementById('imagePreview').innerHTML = '<img src="' + result.url + '" style="max-width: 200px; max-height: 200px;" />';
            } else {
                alert('Upload failed: ' + result.message);
            }
        });
    };
    input.click();
}
</script>
}