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

<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-primary text-white">
        <h4 class="mb-0">Edit Section: @Model.Title</h4>
    </div>
    <div class="card-body">
        <form method="post" action="/admin/homepage/section/update" enctype="multipart/form-data">
            @Html.AntiForgeryToken()
            <input type="hidden" name="Id" value="@Model.Id" />
            <input type="hidden" name="DisplayOrder" value="@Model.DisplayOrder" />
            <input type="hidden" name="CreatedAt" value="@Model.CreatedAt" />
            <input type="hidden" name="ImageUrl" value="@Model.ImageUrl" />

            <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="hero" selected="@(Model.SectionType == "hero")">Hero Section</option>
                            <option value="inspiration" selected="@(Model.SectionType == "inspiration")">Inspiration Section</option>
                            <option value="collection" selected="@(Model.SectionType == "collection")">Collection Section</option>
                            <option value="promotion" selected="@(Model.SectionType == "promotion")">Promotion Section</option>
                            <option value="custom" selected="@(Model.SectionType == "custom")">Custom Section</option>
                        </select>
                    </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="@Model.IsActive">
                            <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" value="@Model.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" value="@Model.Subtitle" />
            </div>

            <div class="mb-3">
                <label for="Content" class="form-label">Content</label>
                <textarea id="Content" name="Content" class="form-control" rows="6">@Model.Content</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" value="@Model.ButtonText" 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" value="@Model.ButtonUrl" placeholder="e.g., /Shop, /Contact" />
                    </div>
                </div>
            </div>

            <div class="mb-3">
                <label for="imageFile" class="form-label">Section Image</label>
                @if (!string.IsNullOrEmpty(Model.ImageUrl))
                {
                    <div class="mb-2">
                        <img src="@Model.ImageUrl" alt="Current image" style="max-width: 300px; max-height: 200px; border: 1px solid #ddd; border-radius: 4px;" />
                        <p class="text-muted small mt-1">Current image (upload a new one to replace)</p>
                    </div>
                }
                <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="d-flex justify-content-between">
                <a href="/admin/homepage" class="btn btn-secondary">Cancel</a>
                <button type="submit" class="btn btn-primary btn-lg">
                    <i class="bi bi-check-circle"></i> Save Changes
                </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>
}