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

<style>
    .form-check-input[type="checkbox"] {
        width: 22px !important;
        height: 22px !important;
        cursor: pointer !important;
        border: 2px solid #dee2e6 !important;
        border-radius: 4px !important;
        appearance: none !important;
        -webkit-appearance: none !important;
        -moz-appearance: none !important;
        background-color: white !important;
        background-image: none !important;
        transition: all 0.2s ease !important;
        position: relative !important;
    }
    
    .form-check-input[type="checkbox"]:checked {
        background-color: #28a745 !important;
        border-color: #28a745;
    }
    
    .form-check-input[type="checkbox"]:checked::after {
        content: '✓';
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        color: white !important;
        font-size: 16px !important;
        font-weight: bold !important;
        line-height: 1 !important;
        display: block !important;
    }
    
    .form-check-input[type="checkbox"]:hover {
        border-color: #28a745;
        box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25) !important;
    }
</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-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" id="ImageUrl" 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>
                <div class="mb-2" id="currentImagePreview" style="@(string.IsNullOrEmpty(Model.ImageUrl) ? "display: none;" : "")">
                    <img src="@(Model.ImageUrl ?? "")" alt="Current image" style="max-width: 300px; max-height: 200px; border: 1px solid #ddd; border-radius: 4px !important;" id="sectionImagePreview" />
                    <p class="text-muted small mt-1">Current image</p>
                </div>
                <input type="hidden" id="SelectedImageUrl" name="SelectedImageUrl" value="" />
                <button type="button" class="btn btn-primary" onclick="openImagePicker(handleSectionImageSelection, 'single')">
                    <i class="bi bi-images"></i> Select/Upload Image
                </button>
                <small class="text-muted d-block mt-1">Select from library or upload new image</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>
    // Handle Section Image Selection
    function handleSectionImageSelection(selectedUrls) {
        if (!selectedUrls || selectedUrls.length === 0) {
            alert('No images selected. Please try again.');
            return;
        }
        
        try {
            const imageUrl = selectedUrls[0];
            const selectedInput = document.getElementById('SelectedImageUrl');
            const previewImg = document.getElementById('sectionImagePreview');
            const previewDiv = document.getElementById('currentImagePreview');
            
            if (!selectedInput || !previewImg || !previewDiv) {
                console.error('Required DOM elements not found');
                return;
            }
            
            selectedInput.value = imageUrl;
            previewImg.src = imageUrl;
            previewDiv.style.display = 'block';
        } catch (error) {
            console.error('Error in handleSectionImageSelection:', error);
            alert('Error setting image: ' + error.message);
        }
    }

    // Ensure checkbox value is properly set before form submission
    document.addEventListener('DOMContentLoaded', function() {
        const form = document.querySelector('form');
        const isActiveCheckbox = document.getElementById('IsActive');
        
        if (form && isActiveCheckbox) {
            form.addEventListener('submit', function(e) {
                // Set the hidden input value based on checkbox state
                if (isActiveCheckbox.checked) {
                    isActiveCheckbox.value = 'true';
                } else {
                    // Add a hidden input to ensure false is submitted
                    const hiddenFalse = document.createElement('input');
                    hiddenFalse.type = 'hidden';
                    hiddenFalse.name = 'IsActive';
                    hiddenFalse.value = 'false';
                    form.appendChild(hiddenFalse);
                }
            });
        }
    });

    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) {
                // Sync CKEditor content to textarea before submit
                const contentTextarea = document.querySelector('#Content');
                if (contentTextarea && contentEditor) {
                    contentTextarea.value = contentEditor.getData();
                    console.log('Form submitted with content:', contentTextarea.value.substring(0, 100));
                }
            });
        })
        .catch(error => {
            console.error('CKEditor initialization error:', error);
        });
</script>
}