384 lines
18 KiB
PHP
384 lines
18 KiB
PHP
<section class="card">
|
|
<h1><?= $e($t('products.edit.title', ['id' => (string) ($productId ?? 0)])) ?></h1>
|
|
<p class="muted"><?= $e($t('products.edit.description')) ?></p>
|
|
</section>
|
|
|
|
<section class="card mt-16">
|
|
<?php if (!empty($errors)): ?>
|
|
<div class="alert alert--danger" role="alert">
|
|
<?php foreach ((array) $errors as $error): ?>
|
|
<div><?= $e((string) $error) ?></div>
|
|
<?php endforeach; ?>
|
|
</div>
|
|
<?php endif; ?>
|
|
|
|
<?php $images = is_array($productImages ?? null) ? $productImages : []; ?>
|
|
<form class="product-form mt-16" method="post" action="/products/update" enctype="multipart/form-data">
|
|
<input type="hidden" name="_token" value="<?= $e($csrfToken ?? '') ?>">
|
|
<input type="hidden" name="id" value="<?= $e((string) ($productId ?? 0)) ?>">
|
|
|
|
<div class="form-grid">
|
|
<label class="form-field">
|
|
<span class="field-label"><?= $e($t('products.fields.name')) ?></span>
|
|
<input class="form-control" type="text" name="name" required value="<?= $e((string) ($form['name'] ?? '')) ?>">
|
|
</label>
|
|
|
|
<label class="form-field">
|
|
<span class="field-label">SKU</span>
|
|
<input class="form-control" type="text" name="sku" value="<?= $e((string) ($form['sku'] ?? '')) ?>">
|
|
</label>
|
|
|
|
<label class="form-field">
|
|
<span class="field-label">EAN</span>
|
|
<input class="form-control" type="text" name="ean" value="<?= $e((string) ($form['ean'] ?? '')) ?>">
|
|
</label>
|
|
|
|
<label class="form-field">
|
|
<span class="field-label"><?= $e($t('products.fields.type')) ?></span>
|
|
<select class="form-control" name="type">
|
|
<option value="simple"<?= (string) ($form['type'] ?? '') === 'simple' ? ' selected' : '' ?>><?= $e($t('products.type.simple')) ?></option>
|
|
<option value="variant_parent"<?= (string) ($form['type'] ?? '') === 'variant_parent' ? ' selected' : '' ?>><?= $e($t('products.type.variant_parent')) ?></option>
|
|
</select>
|
|
</label>
|
|
|
|
<label class="form-field">
|
|
<span class="field-label"><?= $e($t('products.fields.status')) ?></span>
|
|
<select class="form-control" name="status">
|
|
<option value="1"<?= (string) ($form['status'] ?? '1') === '1' ? ' selected' : '' ?>><?= $e($t('products.status.active')) ?></option>
|
|
<option value="0"<?= (string) ($form['status'] ?? '1') === '0' ? ' selected' : '' ?>><?= $e($t('products.status.inactive')) ?></option>
|
|
</select>
|
|
</label>
|
|
|
|
<label class="form-field">
|
|
<span class="field-label"><?= $e($t('products.fields.promoted')) ?></span>
|
|
<select class="form-control" name="promoted">
|
|
<option value="0"<?= (string) ($form['promoted'] ?? '0') === '0' ? ' selected' : '' ?>><?= $e($t('products.promoted.no')) ?></option>
|
|
<option value="1"<?= (string) ($form['promoted'] ?? '0') === '1' ? ' selected' : '' ?>><?= $e($t('products.promoted.yes')) ?></option>
|
|
</select>
|
|
</label>
|
|
|
|
<label class="form-field">
|
|
<span class="field-label"><?= $e($t('products.fields.vat')) ?></span>
|
|
<input class="form-control" type="number" step="0.01" min="0" max="100" name="vat" value="<?= $e((string) ($form['vat'] ?? '')) ?>">
|
|
</label>
|
|
|
|
<label class="form-field">
|
|
<span class="field-label"><?= $e($t('products.fields.quantity')) ?></span>
|
|
<input class="form-control" type="number" step="0.001" min="0" name="quantity" value="<?= $e((string) ($form['quantity'] ?? '0')) ?>">
|
|
</label>
|
|
|
|
<label class="form-field">
|
|
<span class="field-label"><?= $e($t('products.fields.weight')) ?></span>
|
|
<input class="form-control" type="number" step="0.001" min="0" name="weight" value="<?= $e((string) ($form['weight'] ?? '')) ?>">
|
|
</label>
|
|
|
|
<label class="form-field">
|
|
<span class="field-label"><?= $e($t('products.fields.price_input_mode')) ?></span>
|
|
<select class="form-control" name="price_input_mode">
|
|
<option value="brutto"<?= (string) ($form['price_input_mode'] ?? 'brutto') === 'brutto' ? ' selected' : '' ?>><?= $e($t('products.price_mode.brutto')) ?></option>
|
|
<option value="netto"<?= (string) ($form['price_input_mode'] ?? 'brutto') === 'netto' ? ' selected' : '' ?>><?= $e($t('products.price_mode.netto')) ?></option>
|
|
</select>
|
|
</label>
|
|
|
|
<label class="form-field">
|
|
<span class="field-label"><?= $e($t('products.fields.price_brutto')) ?></span>
|
|
<input class="form-control" type="number" step="0.01" min="0" name="price_brutto" value="<?= $e((string) ($form['price_brutto'] ?? '')) ?>">
|
|
</label>
|
|
|
|
<label class="form-field">
|
|
<span class="field-label"><?= $e($t('products.fields.price_netto')) ?></span>
|
|
<input class="form-control" type="number" step="0.01" min="0" name="price_netto" value="<?= $e((string) ($form['price_netto'] ?? '')) ?>">
|
|
</label>
|
|
|
|
<label class="form-field">
|
|
<span class="field-label"><?= $e($t('products.fields.price_brutto_promo')) ?></span>
|
|
<input class="form-control" type="number" step="0.01" min="0" name="price_brutto_promo" value="<?= $e((string) ($form['price_brutto_promo'] ?? '')) ?>">
|
|
</label>
|
|
|
|
<label class="form-field">
|
|
<span class="field-label"><?= $e($t('products.fields.price_netto_promo')) ?></span>
|
|
<input class="form-control" type="number" step="0.01" min="0" name="price_netto_promo" value="<?= $e((string) ($form['price_netto_promo'] ?? '')) ?>">
|
|
</label>
|
|
</div>
|
|
|
|
<label class="form-field mt-16">
|
|
<span class="field-label"><?= $e($t('products.fields.short_description')) ?></span>
|
|
<textarea class="form-control" name="short_description" rows="3"><?= $e((string) ($form['short_description'] ?? '')) ?></textarea>
|
|
</label>
|
|
|
|
<label class="form-field mt-12">
|
|
<span class="field-label"><?= $e($t('products.fields.description')) ?></span>
|
|
<textarea class="form-control" name="description" rows="6"><?= $e((string) ($form['description'] ?? '')) ?></textarea>
|
|
</label>
|
|
|
|
<div class="form-grid mt-16">
|
|
<label class="form-field">
|
|
<span class="field-label"><?= $e($t('products.fields.meta_title')) ?></span>
|
|
<input class="form-control" type="text" name="meta_title" value="<?= $e((string) ($form['meta_title'] ?? '')) ?>">
|
|
</label>
|
|
|
|
<label class="form-field">
|
|
<span class="field-label"><?= $e($t('products.fields.meta_description')) ?></span>
|
|
<input class="form-control" type="text" name="meta_description" value="<?= $e((string) ($form['meta_description'] ?? '')) ?>">
|
|
</label>
|
|
|
|
<label class="form-field">
|
|
<span class="field-label"><?= $e($t('products.fields.meta_keywords')) ?></span>
|
|
<input class="form-control" type="text" name="meta_keywords" value="<?= $e((string) ($form['meta_keywords'] ?? '')) ?>">
|
|
</label>
|
|
|
|
<label class="form-field">
|
|
<span class="field-label"><?= $e($t('products.fields.seo_link')) ?></span>
|
|
<input class="form-control" type="text" name="seo_link" value="<?= $e((string) ($form['seo_link'] ?? '')) ?>">
|
|
</label>
|
|
</div>
|
|
|
|
<section class="card mt-16">
|
|
<h3><?= $e($t('products.images.title')) ?></h3>
|
|
<p class="muted"><?= $e($t('products.images.description')) ?></p>
|
|
<input type="hidden" id="product-image-csrf" value="<?= $e($csrfToken ?? '') ?>">
|
|
|
|
<div class="product-images-grid mt-12" id="product-images-grid" data-product-id="<?= $e((string) ($productId ?? 0)) ?>">
|
|
<?php foreach ($images as $image): ?>
|
|
<?php
|
|
$imageId = (int) ($image['id'] ?? 0);
|
|
$isMain = (int) ($image['is_main'] ?? 0) === 1;
|
|
$publicUrl = (string) ($image['public_url'] ?? '');
|
|
?>
|
|
<article
|
|
class="product-image-card<?= $isMain ? ' is-main' : '' ?>"
|
|
data-image-id="<?= $e((string) $imageId) ?>"
|
|
data-storage-path="<?= $e((string) ($image['storage_path'] ?? '')) ?>"
|
|
>
|
|
<div class="product-image-card__thumb-wrap">
|
|
<?php if ($publicUrl !== ''): ?>
|
|
<img class="product-image-card__thumb" src="<?= $e($publicUrl) ?>" alt="<?= $e((string) ($image['alt'] ?? '')) ?>">
|
|
<?php else: ?>
|
|
<div class="product-image-card__thumb is-empty">NO IMAGE</div>
|
|
<?php endif; ?>
|
|
<span class="product-image-card__badge"><?= $e($t('products.images.main')) ?></span>
|
|
</div>
|
|
<div class="product-image-card__meta"><?= $e((string) ($image['storage_path'] ?? '')) ?></div>
|
|
<div class="product-image-card__actions">
|
|
<button type="button" class="btn btn--secondary btn-set-main"<?= $isMain ? ' disabled' : '' ?>>
|
|
<?= $e($t('products.images.set_main')) ?>
|
|
</button>
|
|
<button type="button" class="btn btn--danger btn-delete-image">
|
|
<?= $e($t('products.images.remove')) ?>
|
|
</button>
|
|
</div>
|
|
</article>
|
|
<?php endforeach; ?>
|
|
</div>
|
|
<p class="muted mt-12" id="product-images-empty"<?= $images === [] ? '' : ' style="display:none;"' ?>>
|
|
<?= $e($t('products.images.empty')) ?>
|
|
</p>
|
|
|
|
<label class="form-field mt-16">
|
|
<span class="field-label"><?= $e($t('products.images.add_new')) ?></span>
|
|
<input class="form-control" type="file" id="product-image-upload" name="new_images[]" accept=".jpg,.jpeg,.png,.webp,.gif,image/*" multiple>
|
|
</label>
|
|
<p class="muted" id="product-image-upload-status"></p>
|
|
<p class="muted"><?= $e($t('products.images.main_hint')) ?></p>
|
|
</section>
|
|
|
|
<div class="form-actions mt-16">
|
|
<button class="btn btn--primary" type="submit"><?= $e($t('products.actions.save')) ?></button>
|
|
<a class="btn btn--secondary" href="/products"><?= $e($t('products.actions.back')) ?></a>
|
|
</div>
|
|
</form>
|
|
</section>
|
|
|
|
<script>
|
|
(function() {
|
|
var grid = document.getElementById('product-images-grid');
|
|
var emptyState = document.getElementById('product-images-empty');
|
|
var uploadInput = document.getElementById('product-image-upload');
|
|
var uploadStatus = document.getElementById('product-image-upload-status');
|
|
var tokenInput = document.getElementById('product-image-csrf');
|
|
if (!grid || !uploadInput || !tokenInput) return;
|
|
|
|
var productId = grid.getAttribute('data-product-id');
|
|
var csrfToken = tokenInput.value || '';
|
|
var txtSetMain = <?= json_encode((string) $t('products.images.set_main'), JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES) ?>;
|
|
var txtRemove = <?= json_encode((string) $t('products.images.remove'), JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES) ?>;
|
|
var txtMain = <?= json_encode((string) $t('products.images.main'), JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES) ?>;
|
|
var txtUploadPending = <?= json_encode((string) $t('products.images.uploading'), JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES) ?>;
|
|
var txtUploadOk = <?= json_encode((string) $t('products.images.uploaded_ok'), JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES) ?>;
|
|
var txtDeleteConfirm = <?= json_encode((string) $t('products.images.confirm_delete'), JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES) ?>;
|
|
var txtConfirmTitle = <?= json_encode((string) $t('products.images.confirm_title'), JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES) ?>;
|
|
var txtConfirmYes = <?= json_encode((string) $t('products.images.confirm_yes'), JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES) ?>;
|
|
var txtConfirmNo = <?= json_encode((string) $t('products.images.confirm_no'), JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES) ?>;
|
|
|
|
function refreshMainState(mainId) {
|
|
var cards = grid.querySelectorAll('.product-image-card');
|
|
cards.forEach(function(card) {
|
|
var cardId = Number(card.getAttribute('data-image-id') || 0);
|
|
var isMain = cardId === mainId;
|
|
card.classList.toggle('is-main', isMain);
|
|
var setMainBtn = card.querySelector('.btn-set-main');
|
|
if (setMainBtn) setMainBtn.disabled = isMain;
|
|
});
|
|
}
|
|
|
|
function updateEmptyState() {
|
|
if (!emptyState) return;
|
|
emptyState.style.display = grid.querySelector('.product-image-card') ? 'none' : '';
|
|
}
|
|
|
|
function buildCard(image) {
|
|
var article = document.createElement('article');
|
|
article.className = 'product-image-card' + (Number(image.is_main) === 1 ? ' is-main' : '');
|
|
article.setAttribute('data-image-id', String(image.id));
|
|
article.setAttribute('data-storage-path', String(image.storage_path || ''));
|
|
|
|
var thumbWrap = document.createElement('div');
|
|
thumbWrap.className = 'product-image-card__thumb-wrap';
|
|
|
|
if (image.public_url) {
|
|
var img = document.createElement('img');
|
|
img.className = 'product-image-card__thumb';
|
|
img.src = image.public_url;
|
|
img.alt = image.alt || '';
|
|
thumbWrap.appendChild(img);
|
|
} else {
|
|
var noimg = document.createElement('div');
|
|
noimg.className = 'product-image-card__thumb is-empty';
|
|
noimg.textContent = 'NO IMAGE';
|
|
thumbWrap.appendChild(noimg);
|
|
}
|
|
|
|
var badge = document.createElement('span');
|
|
badge.className = 'product-image-card__badge';
|
|
badge.textContent = txtMain;
|
|
thumbWrap.appendChild(badge);
|
|
|
|
var meta = document.createElement('div');
|
|
meta.className = 'product-image-card__meta';
|
|
meta.textContent = image.storage_path || '';
|
|
|
|
var actions = document.createElement('div');
|
|
actions.className = 'product-image-card__actions';
|
|
|
|
var setMainBtn = document.createElement('button');
|
|
setMainBtn.type = 'button';
|
|
setMainBtn.className = 'btn btn--secondary btn-set-main';
|
|
setMainBtn.textContent = txtSetMain;
|
|
if (Number(image.is_main) === 1) setMainBtn.disabled = true;
|
|
|
|
var removeBtn = document.createElement('button');
|
|
removeBtn.type = 'button';
|
|
removeBtn.className = 'btn btn--danger btn-delete-image';
|
|
removeBtn.textContent = txtRemove;
|
|
|
|
actions.appendChild(setMainBtn);
|
|
actions.appendChild(removeBtn);
|
|
article.appendChild(thumbWrap);
|
|
article.appendChild(meta);
|
|
article.appendChild(actions);
|
|
|
|
return article;
|
|
}
|
|
|
|
async function postForm(url, data) {
|
|
var response = await fetch(url, { method: 'POST', body: data, credentials: 'same-origin' });
|
|
var payload = await response.json();
|
|
if (!response.ok || payload.ok !== true) {
|
|
throw new Error(payload.message || 'Blad operacji.');
|
|
}
|
|
return payload;
|
|
}
|
|
|
|
uploadInput.addEventListener('change', async function() {
|
|
if (!uploadInput.files || uploadInput.files.length === 0) return;
|
|
var formData = new FormData();
|
|
formData.append('_token', csrfToken);
|
|
formData.append('id', String(productId));
|
|
Array.prototype.forEach.call(uploadInput.files, function(file) {
|
|
formData.append('new_images[]', file);
|
|
});
|
|
|
|
uploadStatus.textContent = txtUploadPending;
|
|
uploadInput.disabled = true;
|
|
try {
|
|
var result = await postForm('/products/images/upload', formData);
|
|
(result.images || []).forEach(function(image) {
|
|
grid.appendChild(buildCard(image));
|
|
if (Number(image.is_main) === 1) refreshMainState(Number(image.id));
|
|
});
|
|
uploadStatus.textContent = txtUploadOk;
|
|
if (result.message) uploadStatus.textContent += ' ' + result.message;
|
|
updateEmptyState();
|
|
} catch (error) {
|
|
uploadStatus.textContent = error.message || 'Blad uploadu.';
|
|
} finally {
|
|
uploadInput.value = '';
|
|
uploadInput.disabled = false;
|
|
}
|
|
});
|
|
|
|
grid.addEventListener('click', async function(event) {
|
|
var target = event.target;
|
|
if (!target || !(target instanceof HTMLElement)) return;
|
|
var card = target.closest('.product-image-card');
|
|
if (!card) return;
|
|
var imageId = Number(card.getAttribute('data-image-id') || 0);
|
|
if (imageId <= 0) return;
|
|
|
|
if (target.classList.contains('btn-set-main')) {
|
|
if (target.disabled) return;
|
|
var dataMain = new FormData();
|
|
dataMain.append('_token', csrfToken);
|
|
dataMain.append('id', String(productId));
|
|
dataMain.append('image_id', String(imageId));
|
|
|
|
target.disabled = true;
|
|
try {
|
|
await postForm('/products/images/set-main', dataMain);
|
|
refreshMainState(imageId);
|
|
} catch (error) {
|
|
target.disabled = false;
|
|
if (window.OrderProAlerts && typeof window.OrderProAlerts.alert === 'function') {
|
|
window.OrderProAlerts.alert({ title: 'Blad', message: error.message || 'Blad operacji.', danger: true });
|
|
} else if (uploadStatus) {
|
|
uploadStatus.textContent = error.message || 'Blad operacji.';
|
|
}
|
|
}
|
|
}
|
|
|
|
if (target.classList.contains('btn-delete-image')) {
|
|
var confirmDelete = async function() {
|
|
var dataDelete = new FormData();
|
|
dataDelete.append('_token', csrfToken);
|
|
dataDelete.append('id', String(productId));
|
|
dataDelete.append('image_id', String(imageId));
|
|
var result = await postForm('/products/images/delete', dataDelete);
|
|
card.remove();
|
|
if (Number(result.main_image_id || 0) > 0) {
|
|
refreshMainState(Number(result.main_image_id));
|
|
}
|
|
updateEmptyState();
|
|
};
|
|
|
|
if (window.OrderProAlerts && typeof window.OrderProAlerts.confirm === 'function') {
|
|
var accepted = await window.OrderProAlerts.confirm({
|
|
title: txtConfirmTitle,
|
|
message: txtDeleteConfirm,
|
|
confirmLabel: txtConfirmYes,
|
|
cancelLabel: txtConfirmNo,
|
|
danger: true
|
|
});
|
|
if (!accepted) return;
|
|
try { await confirmDelete(); } catch (error) {
|
|
window.OrderProAlerts.alert({ title: 'Blad', message: error.message || 'Blad operacji.', danger: true });
|
|
}
|
|
} else {
|
|
try { await confirmDelete(); } catch (error) {
|
|
if (uploadStatus) uploadStatus.textContent = error.message || 'Blad operacji.';
|
|
}
|
|
}
|
|
}
|
|
});
|
|
})();
|
|
</script>
|