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

<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">Name</label>
                <input class="form-control" name="Name" value="@Model.Name" />
            </div>
            <div class="mb-3">
                <label class="form-label">Description</label>
                <textarea class="form-control" id="categoryDescription" name="Description">@Model.Description</textarea>
            </div>
            <div class="mb-3">
                <label class="form-label">Display Order</label>
                <input type="number" class="form-control" name="DisplayOrder" value="@Model.DisplayOrder" />
            </div>
            <div class="form-check mb-3">
                <input class="form-check-input" type="checkbox" name="IsActive" @(Model.IsActive ? "checked" : "") />
                <label class="form-check-label">Active</label>
            </div>
            <button class="btn btn-primary" type="submit">Save</button>
            <a class="btn btn-secondary" href="/admin/portfolio/categories">Cancel</a>
        </form>
    </div>
</div>

@section Scripts {
<script src="https://cdn.ckeditor.com/ckeditor5/40.1.0/classic/ckeditor.js"></script>
<script>
let categoryEditor;
ClassicEditor
    .create(document.querySelector('#categoryDescription'), {
        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 }]
        }
    })
    .then(editor => {
        categoryEditor = editor;
        document.querySelector('form').addEventListener('submit', function(e) {
            document.querySelector('#categoryDescription').value = categoryEditor.getData();
        });
    })
    .catch(error => { console.error(error); });
</script>
}