234 lines
10 KiB
Plaintext
234 lines
10 KiB
Plaintext
|
@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>
|
||
|
|
}
|