@model SkyArtShop.Models.HomepageSection
@{
    ViewData["Title"] = "Create Homepage Section";
    Layout = "_AdminLayout";
}

<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="mb-4">
    <a href="/admin/homepage" class="btn btn-outline-secondary">
        <i class="bi bi-arrow-left"></i> Back to Homepage Editor
    </a>
</div>

<div class="card">
    <div class="card-header bg-success text-white">
        <h4 class="mb-0"><i class="bi bi-plus-circle"></i> Create New Homepage Section</h4>
    </div>
    <div class="card-body">
        <form method="post" action="/admin/homepage/section/create" enctype="multipart/form-data">
            @Html.AntiForgeryToken()

            <div class="row">
                <div class="col-md-6">
                    <div class="mb-3">
                        <label for="SectionType" class="form-label">Section Type <span class="text-danger">*</span></label>
                        <select id="SectionType" name="SectionType" class="form-select" required>
                            <option value="">-- Select Section Type --</option>
                            <option value="hero">Hero Section</option>
                            <option value="inspiration">Inspiration Section</option>
                            <option value="collection">Collection Section</option>
                            <option value="promotion">Promotion Section</option>
                            <option value="custom">Custom Section</option>
                        </select>
                        <small class="text-muted">Choose the type of content section you want to add</small>
                    </div>
                </div>

                <div class="col-md-6">
                    <div class="mb-3">
                        <label class="form-label">Status</label>
                        <div class="form-check form-switch">
                            <input class="form-check-input" type="checkbox" id="IsActive" name="IsActive" value="true" checked>
                            <label class="form-check-label" for="IsActive">Active (visible on homepage)</label>
                        </div>
                    </div>
                </div>
            </div>

            <div class="mb-3">
                <label for="Title" class="form-label">Section Title <span class="text-danger">*</span></label>
                <input type="text" id="Title" name="Title" class="form-control" placeholder="Enter section title" required />
            </div>

            <div class="mb-3">
                <label for="Subtitle" class="form-label">Subtitle</label>
                <input type="text" id="Subtitle" name="Subtitle" class="form-control" placeholder="Enter subtitle (optional)" />
            </div>

            <div class="mb-3">
                <label for="Content" class="form-label">Content</label>
                <textarea id="Content" name="Content" class="form-control" rows="6" placeholder="Enter your content here..."></textarea>
            </div>

            <div class="row">
                <div class="col-md-6">
                    <div class="mb-3">
                        <label for="ButtonText" class="form-label">Button Text</label>
                        <input type="text" id="ButtonText" name="ButtonText" class="form-control" placeholder="e.g., Shop Now, Learn More" />
                    </div>
                </div>

                <div class="col-md-6">
                    <div class="mb-3">
                        <label for="ButtonUrl" class="form-label">Button URL</label>
                        <input type="text" id="ButtonUrl" name="ButtonUrl" class="form-control" placeholder="e.g., /Shop, /Contact" />
                    </div>
                </div>
            </div>

            <div class="mb-3">
                <label for="imageFile" class="form-label">Section Image</label>
                <input type="file" id="imageFile" name="imageFile" class="form-control" accept="image/*" />
                <small class="text-muted">Supported formats: JPG, PNG, GIF (max 5MB)</small>
            </div>

            <hr class="my-4" />

            <div class="alert alert-info">
                <i class="bi bi-info-circle"></i> <strong>Note:</strong> This section will be added to the end of your homepage. You can reorder it by dragging on the main editor page.
            </div>

            <div class="d-flex justify-content-between">
                <a href="/admin/homepage" class="btn btn-secondary">Cancel</a>
                <button type="submit" class="btn btn-success btn-lg">
                    <i class="bi bi-plus-circle"></i> Create Section
                </button>
            </div>
        </form>
    </div>
</div>

@section Scripts
{
<script>
    let contentEditor;
    ClassicEditor
        .create(document.querySelector('#Content'), {
            toolbar: [
                'heading', '|',
                'bold', 'italic', '|',
                'link', 'bulletedList', 'numberedList', '|',
                'indent', 'outdent', '|',
                'blockQuote', 'insertTable', '|',
                'undo', 'redo'
            ],
            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' }
                ]
            }
        })
        .then(editor => {
            contentEditor = editor;
            document.querySelector('form').addEventListener('submit', function(e) {
                document.querySelector('#Content').value = contentEditor.getData();
            });
        })
        .catch(error => {
            console.error('CKEditor initialization error:', error);
        });
</script>
}