@model List<SkyArtShop.Models.HomepageSection>
@{
    ViewData["Title"] = "Homepage Editor";
    Layout = "_AdminLayout";
}

<div class="d-flex justify-content-between align-items-center mb-4">
    <h2>Homepage Editor</h2>
    <a href="/admin/homepage/section/create" class="btn btn-primary">
        <i class="bi bi-plus-circle"></i> Add New Section
    </a>
</div>

@if (TempData["SuccessMessage"] != null)
{
    <div class="alert alert-success alert-dismissible fade show" role="alert">
        @TempData["SuccessMessage"]
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
}

<!-- Footer Editor -->
<div class="card mb-4">
    <div class="card-header bg-primary text-white">
        <h5 class="mb-0"><i class="bi bi-footer"></i> Footer Text</h5>
    </div>
    <div class="card-body">
        <form method="post" action="/admin/homepage/footer/update">
            @Html.AntiForgeryToken()
            <div class="mb-3">
                <textarea id="footerText" name="footerText" class="form-control" rows="3">@ViewBag.Settings.FooterText</textarea>
            </div>
            <button type="submit" class="btn btn-success">
                <i class="bi bi-check-circle"></i> Save Footer
            </button>
        </form>
    </div>
</div>

<!-- Homepage Sections -->
<div class="card">
    <div class="card-header bg-info text-white">
        <h5 class="mb-0"><i class="bi bi-layout-text-window-reverse"></i> Homepage Sections</h5>
        <small>Drag and drop to reorder sections</small>
    </div>
    <div class="card-body">
        @if (Model != null && Model.Any())
        {
            <div id="sortable-sections" class="list-group">
                @foreach (var sect in Model)
                {
                    <div class="list-group-item section-item" data-id="@sect.Id">
                        <div class="row align-items-center">
                            <div class="col-md-1 text-center drag-handle" style="cursor: grab;">
                                <i class="bi bi-grip-vertical" style="font-size: 1.5rem; color: #6c757d;"></i>
                            </div>
                            <div class="col-md-2">
                                <span class="badge bg-secondary">@sect.SectionType</span>
                                @if (!sect.IsActive)
                                {
                                    <span class="badge bg-warning ms-1">Inactive</span>
                                }
                            </div>
                            <div class="col-md-4">
                                <strong>@sect.Title</strong>
                                @if (!string.IsNullOrEmpty(sect.Subtitle))
                                {
                                    <br /><small class="text-muted">@sect.Subtitle</small>
                                }
                            </div>
                            <div class="col-md-2 text-center">
                                <small class="text-muted">Order: @sect.DisplayOrder</small>
                            </div>
                            <div class="col-md-3 text-end">
                                <div class="d-flex gap-2 justify-content-end">
                                    <a href="/admin/homepage/section/@sect.Id" class="btn btn-sm btn-outline-primary" title="Edit Section">
                                        <i class="bi bi-pencil"></i> Edit
                                    </a>
                                    <form method="post" action="/admin/homepage/section/toggle/@sect.Id" class="d-inline">
                                        @Html.AntiForgeryToken()
                                        <button type="submit" class="btn btn-sm btn-outline-@(sect.IsActive ? "warning" : "success")" title="@(sect.IsActive ? "Deactivate" : "Activate")">
                                            <i class="bi bi-@(sect.IsActive ? "eye-slash" : "eye")"></i>
                                        </button>
                                    </form>
                                    <button type="button" class="btn btn-sm btn-outline-danger" onclick="deleteSection('@sect.Id')" title="Delete Section">
                                        <i class="bi bi-trash"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                }
            </div>
        }
        else
        {
            <div class="alert alert-info">
                <i class="bi bi-info-circle"></i> No sections found. Click "Add New Section" to create your first homepage section.
            </div>
        }
    </div>
</div>

<!-- Preview Button -->
<div class="mt-4">
    <a href="/" target="_blank" class="btn btn-secondary btn-lg">
        <i class="bi bi-eye"></i> Preview Homepage
    </a>
</div>

@section Scripts
{
<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Initialize CKEditor for Footer (if it exists)
    const footerTextarea = document.querySelector('#footerText');
    if (footerTextarea && typeof ClassicEditor !== 'undefined') {
        let footerEditor;
        ClassicEditor
            .create(footerTextarea, {
                toolbar: ['bold', 'italic', 'link']
            })
            .then(editor => {
                footerEditor = editor;
                const footerForm = footerTextarea.closest('form');
                if (footerForm) {
                    footerForm.addEventListener('submit', function(e) {
                        footerTextarea.value = footerEditor.getData();
                    });
                }
            })
            .catch(error => {
                console.error('CKEditor initialization error:', error);
            });
    }

    // Initialize Sortable for drag & drop
    const sortableList = document.getElementById('sortable-sections');
    if (sortableList) {
        const sortable = Sortable.create(sortableList, {
            animation: 200,
            ghostClass: 'sortable-ghost',
            dragClass: 'sortable-drag',
            handle: '.drag-handle',
            draggable: '.section-item',
            onStart: function(evt) {
                evt.item.style.cursor = 'grabbing';
            },
            onEnd: function (evt) {
                evt.item.style.cursor = '';
                const sectionIds = Array.from(sortableList.children).map(item => item.getAttribute('data-id'));
                
                fetch('/admin/homepage/section/reorder', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'RequestVerificationToken': document.querySelector('input[name="__RequestVerificationToken"]').value
                    },
                    body: JSON.stringify(sectionIds)
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        // Update display order numbers
                        sortableList.querySelectorAll('.section-item').forEach((item, index) => {
                            item.querySelector('.col-md-2.text-center small').textContent = 'Order: ' + index;
                        });
                    }
                })
                .catch(error => {
                    console.error('Error updating section order:', error);
                });
            }
        });
    } else {
        console.log('sortable-sections element not found');
    }
});

function deleteSection(id) {
    if (confirm('Are you sure you want to delete this section?')) {
        const form = document.createElement('form');
        form.method = 'POST';
        form.action = '/admin/homepage/section/delete/' + id;
        
        const token = document.querySelector('input[name="__RequestVerificationToken"]').cloneNode();
        form.appendChild(token);
        
        document.body.appendChild(form);
        form.submit();
    }
}
</script>
<style>
    .section-item {
        transition: all 0.3s ease;
        margin-bottom: 12px;
        border-left: 4px solid #6c757d;
        background: white;
        padding: 15px;
        border-radius: 6px;
    }
    .section-item:hover {
        background-color: #f8f9fa;
        border-left-color: #0d6efd;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }
    .drag-handle {
        transition: all 0.2s ease;
        cursor: grab;
        user-select: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
    }
    .drag-handle:hover {
        transform: scale(1.1);
        color: #0d6efd !important;
        cursor: grab;
    }
    .drag-handle:active {
        cursor: grabbing !important;
    }
    #sortable-sections {
        list-style: none;
        padding: 0;
    }
    .sortable-ghost {
        opacity: 0.5;
        background: #e3f2fd !important;
        border: 2px dashed #0d6efd !important;
    }
    .sortable-drag {
        opacity: 0.8;
        cursor: grabbing !important;
        transform: rotate(2deg);
        box-shadow: 0 5px 15px rgba(0,0,0,0.3) !important;
    }
    .sortable-fallback {
        opacity: 0.8;
        background: white !important;
        box-shadow: 0 5px 20px rgba(0,0,0,0.3) !important;
    }
    .btn-group .btn, .d-flex .btn {
        min-width: 75px;
    }
    .list-group-item {
        border: 1px solid #dee2e6;
    }
</style>
}