whoami7 - Manager
:
/
home
/
n170823s
/
.trash
/
storage
/
framework
/
views
/
Upload File:
files >> /home/n170823s/.trash/storage/framework/views/670cf1a73be41a769e3cbcfc9d892cfe.php
<?php $pName = old('name', $product->name ?? ''); $hasVariants = (int) old('has_variants', $product->has_variants ?? 0); $variantType = old('variant_type', $product->variant_type ?? ''); $existingVariants = isset($product) && $product?->relationLoaded('variants') ? $product->variants : (isset($product) ? $product->variants ?? collect() : collect()); $defaultIndex = 0; if ($existingVariants && $existingVariants->count()) { foreach ($existingVariants as $i => $v) { if ($v->is_default) { $defaultIndex = $i; break; } } } ?> <?php $isEdit = ($mode ?? 'create') === 'edit' && isset($product); $isSimple = (int) $hasVariants === 0; $baseVariant = $existingVariants->first(); ?> <div class="card"> <div class="card-header"> <h4 class="card-title"><?php echo e(isset($product) ? 'Update Product' : 'Create Product'); ?></h4> </div> <div class="card-body"> <div class="row g-3"> <div class="row"> <div class="col-md-6"> <div class="mb-3"> <label for="category_id" class="form-label"> Select Category <span class="text-danger">*</span> </label> <select class="form-control" name="category_id" id="category_id" required> <option value="">-- Select Category --</option> <?php $__currentLoopData = $category; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $cat): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?> <option value="<?php echo e($cat->id); ?>" <?php if(isset($product) && $product->category_id == $cat->id): ?> selected <?php endif; ?>> <?php echo e($cat->name); ?> </option> <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?> </select> </div> </div> <div class="col-md-6"> <div class="mb-3"> <label class="form-label"> Product Name <span class="text-danger">*</span> </label> <input type="text" name="name" id="product_name" class="form-control" value="<?php echo e($pName); ?>" required> </div> <div class="mb-3"> <label for="image" class="form-label"> Product Image <span class="text-danger">*</span> </label> <input type="file" name="images[]" id="image" class="form-control" accept="image/*" multiple> <div id="previewContainer" class="mt-2 d-flex flex-wrap gap-2"> <?php if(isset($product) && $product->images): ?> <?php $__currentLoopData = json_decode($product->images); $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $img): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?> <div class="position-relative preview-image" data-existing="<?php echo e($img); ?>"> <img src="<?php echo e(asset($img)); ?>" alt="Product Image" width="100" class="img-thumbnail"> <button type="button" class="btn btn-danger btn-sm position-absolute top-0 end-0 remove-image">×</button> </div> <input type="hidden" name="existing_images[]" value="<?php echo e($img); ?>"> <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?> <?php endif; ?> </div> </div> </div> </div> <div class="col-md-12"> <label for="about_item" class="form-label">About Item</label> <textarea class="form-control bg-light-subtle" name="about_item" id="about_item" rows="6" placeholder="Type About Item"><?php echo e(old('about_item', $product->about_item ?? '')); ?></textarea> </div> <div class="col-md-3"> <label class="form-label">Has Variants? <span class="text-danger">*</span></label> <select name="has_variants" id="has_variants" class="form-select" required> <option value="0" <?php echo e($hasVariants === 0 ? 'selected' : ''); ?>>No</option> <option value="1" <?php echo e($hasVariants === 1 ? 'selected' : ''); ?>>Yes</option> </select> </div> <div class="col-md-3" id="variant_type_wrap" style="display:none;"> <label class="form-label">Variant Type</label> <select name="variant_type" id="variant_type" class="form-select"> <option value="">-- Select --</option> <option value="size" <?php echo e($variantType === 'size' ? 'selected' : ''); ?>>Size</option> <option value="color" <?php echo e($variantType === 'color' ? 'selected' : ''); ?>>Color</option> </select> </div> </div> <div id="simple_pricing" class="mt-3" style="<?php echo e($isSimple ? '' : 'display:none;'); ?>"> <div class="alert alert-info py-2"> This product will have a single (no variants). </div> <div class="row g-3"> <div class="col-md-2"> <label class="form-label">Price</label> <input type="text" step="0.01" name="price" class="form-control" value="<?php echo e(old('price', $isEdit ? $baseVariant->price ?? '' : '')); ?>"> </div> <div class="col-md-2"> <label class="form-label">Quantity</label> <input type="text" step="0.01" name="quantity" class="form-control" value="<?php echo e(old('quantity', $isEdit ? $baseVariant->quantity ?? '' : '')); ?>"> </div> <div class="col-md-8"> <label class="form-label">Description</label> <textarea name="description" id="description" class="form-control" rows="3"><?php echo e(old('description', $isEdit ? $baseVariant->description ?? '' : '')); ?></textarea> </div> </div> </div> <div id="variants_block" class="mt-3" style="display:none;"> <div class="d-flex align-items-end gap-2 mb-2"> <div class="flex-grow-1"> <label class="form-label" id="variant_value_label">Value</label> <input type="text" id="variant_value_input" class="form-control" placeholder="e.g., 100MM or 1L."> </div> <button type="button" id="add_variant_btn" class="btn btn-primary">Add</button> </div> <input type="hidden" name="default_variant_index" id="default_variant_index" value="<?php echo e(old('default_variant_index', $defaultIndex)); ?>"> <div class="table-responsive"> <table class="table table-bordered align-middle" id="variants_table"> <thead class="table-light"> <tr> <th>Default</th> <th id="col_header_value">Size/Color</th> <th style="width: 110px;">Price</th> <th style="width: 110px;">Quantity</th> <th>Description</th> <th>Images</th> <th>Remove</th> </tr> </thead> <tbody> <?php if(($mode ?? 'create') === 'edit' && $existingVariants && $existingVariants->count()): ?> <?php $__currentLoopData = $existingVariants; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $i => $v): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?> <tr> <td class="text-center"> <input type="radio" name="is_default_radio" <?php echo e($v->is_default ? 'checked' : ''); ?> onclick="document.getElementById('default_variant_index').value=<?php echo e($i); ?>"> </td> <td> <strong><?php echo e($v->value); ?></strong> <input type="hidden" name="variants[<?php echo e($i); ?>][value]" value="<?php echo e($v->value); ?>"> </td> <td> <input type="text" name="variants[<?php echo e($i); ?>][price]" class="form-control" value="<?php echo e(old("variants.$i.price", $v->price)); ?>" required> </td> <td> <input type="number" name="variants[<?php echo e($i); ?>][quantity]" min="0" class="form-control" value="<?php echo e(old("variants.$i.quantity", $v->quantity ?? 0)); ?>"> </td> <td> <textarea name="variants[<?php echo e($i); ?>][description]" class="form-control ckeditor-variant" id="variant_description_<?php echo e($i); ?>" rows="2"><?php echo e(old("variants.$i.description", $v->description)); ?></textarea> </td> <td> <input type="file" name="variants[<?php echo e($i); ?>][images][]" multiple class="form-control form-control-sm"> <div class="variant-images-preview mt-1 d-flex gap-2 flex-wrap"> <?php if(!empty($v->images)): ?> <?php $__currentLoopData = json_decode($v->images, true); $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $img): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?> <div class="position-relative" style="width: 80px;"> <img src="<?php echo e(asset($img)); ?>" class="img-thumbnail" style="width:80px; height:80px; object-fit:cover;"> <button type="button" class="btn btn-sm btn-danger position-absolute top-0 end-0 remove-variant-image" style="transform: translate(30%, -30%);">×</button> <input type="hidden" name="variants[<?php echo e($i); ?>][existing_images][]" value="<?php echo e($img); ?>"> </div> <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?> <?php endif; ?> </div> </td> <td class="text-center"> <button type="button" class="btn btn-sm btn-danger remove-row">×</button> </td> </tr> <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?> <?php endif; ?> </tbody> </table> </div> </div> </div> </div> <?php $__env->startSection('scripts'); ?> <?php echo \Illuminate\View\Factory::parentPlaceholder('scripts'); ?> <script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.15.0/Sortable.min.js"></script> <script src="https://cdn.ckeditor.com/ckeditor5/39.0.1/classic/ckeditor.js"></script> <script> document.addEventListener('DOMContentLoaded', function() { // Initialize CKEditor for main description fields function initCKEditor(selector, config = {}) { const elements = document.querySelectorAll(selector); elements.forEach(element => { if (!element.classList.contains('ck-editor-initialized')) { ClassicEditor.create(element, { toolbar: { items: [ 'heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', '|', 'blockQuote', 'insertTable', '|', 'undo', 'redo' ], shouldNotGroupWhenFull: true }, ...config }) .then(editor => { element.classList.add('ck-editor-initialized'); console.log('CKEditor initialized for:', selector); }) .catch(error => { console.error('CKEditor initialization error:', error); }); } }); } // Initialize CKEditor for main fields initCKEditor('#about_item'); initCKEditor('#description'); // Initialize CKEditor for existing variant descriptions initCKEditor('.ckeditor-variant'); // Main variant toggle functionality const hasVariantsEl = document.getElementById('has_variants'); const variantTypeWrap = document.getElementById('variant_type_wrap'); const variantTypeEl = document.getElementById('variant_type'); const variantsBlock = document.getElementById('variants_block'); const simplePricing = document.getElementById('simple_pricing'); const addBtn = document.getElementById('add_variant_btn'); const valueInput = document.getElementById('variant_value_input'); const tableBody = document.querySelector('#variants_table tbody'); const defaultIndexEl = document.getElementById('default_variant_index'); function refreshMode() { if (parseInt(hasVariantsEl.value) === 1) { variantTypeWrap.style.display = 'block'; variantsBlock.style.display = 'block'; simplePricing.style.display = 'none'; } else { variantTypeWrap.style.display = 'none'; variantsBlock.style.display = 'none'; simplePricing.style.display = 'block'; } } function reindexRows() { Array.from(tableBody.querySelectorAll('tr')).forEach((row, i) => { const radio = row.querySelector('input[type=radio]'); if (radio) { radio.setAttribute('onclick', `document.getElementById('default_variant_index').value=${i}`); } // Reindex all inputs row.querySelectorAll('input, select, textarea').forEach(inp => { if (inp.name && inp.name.startsWith('variants[')) { inp.name = inp.name.replace(/variants\[\d+\]/, `variants[${i}]`); } }); }); } function initVariantImageHandlers(row, idx) { const fileInput = row.querySelector('input[type="file"]'); const previewContainer = row.querySelector('.variant-images-preview'); // Remove existing image functionality previewContainer.addEventListener('click', function(e) { if (e.target.classList.contains('remove-variant-image')) { e.preventDefault(); const imageDiv = e.target.closest('.position-relative'); if (imageDiv) { // Remove the hidden input for this image if it exists const hiddenInput = imageDiv.querySelector('input[type="hidden"]'); if (hiddenInput) hiddenInput.remove(); imageDiv.remove(); } } }); // Preview new images functionality if (fileInput) { fileInput.addEventListener('change', function(e) { Array.from(e.target.files).forEach(file => { const div = document.createElement('div'); div.className = 'position-relative'; div.style.width = '80px'; const img = document.createElement('img'); img.src = URL.createObjectURL(file); img.className = 'img-thumbnail'; img.style.width = '80px'; img.style.height = '80px'; img.style.objectFit = 'cover'; const btn = document.createElement('button'); btn.type = 'button'; btn.textContent = '×'; btn.className = 'btn btn-sm btn-danger position-absolute top-0 end-0 remove-variant-image'; btn.style.transform = 'translate(30%, -30%)'; div.appendChild(img); div.appendChild(btn); previewContainer.appendChild(div); }); }); } } function addRow(val) { const idx = tableBody.querySelectorAll('tr').length; const tr = document.createElement('tr'); tr.innerHTML = ` <td class="text-center"> <input type="radio" name="is_default_radio" ${idx === 0 ? 'checked' : ''} onclick="document.getElementById('default_variant_index').value=${idx}"> </td> <td> <input type="hidden" name="variants[${idx}][value]" value="${val}"> <strong>${val}</strong> </td> <td> <input type="text" name="variants[${idx}][price]" class="form-control" required> </td> <td> <input type="number" name="variants[${idx}][quantity]" min="0" class="form-control" value="0"> </td> <td> <textarea name="variants[${idx}][description]" class="form-control ckeditor-variant" id="variant_description_new_${idx}" rows="2"></textarea> </td> <td> <input type="file" name="variants[${idx}][images][]" multiple class="form-control form-control-sm"> <div class="variant-images-preview mt-1 d-flex gap-2 flex-wrap"></div> </td> <td class="text-center"> <button type="button" class="btn btn-sm btn-danger remove-row">×</button> </td> `; tableBody.appendChild(tr); // Initialize CKEditor for the new variant description setTimeout(() => { initCKEditor(`#variant_description_new_${idx}`); }, 100); // Initialize image handlers for the new row initVariantImageHandlers(tr, idx); // Add remove row functionality tr.querySelector('.remove-row').addEventListener('click', function() { const rowIndex = Array.from(tableBody.children).indexOf(tr); tr.remove(); if (parseInt(defaultIndexEl.value) === rowIndex) { defaultIndexEl.value = 0; const firstRadio = tableBody.querySelector('input[type=radio]'); if (firstRadio) firstRadio.checked = true; } reindexRows(); }); } // Event listeners if (hasVariantsEl) { hasVariantsEl.addEventListener('change', refreshMode); } if (addBtn) { addBtn.addEventListener('click', function() { const val = (valueInput.value || '').trim(); if (!val) return; addRow(val); valueInput.value = ''; }); } // Initialize existing remove buttons for variant rows document.addEventListener('click', function(e) { if (e.target.classList.contains('remove-row')) { const tr = e.target.closest('tr'); const rowIndex = Array.from(tableBody.children).indexOf(tr); tr.remove(); if (parseInt(defaultIndexEl.value) === rowIndex) { defaultIndexEl.value = 0; const firstRadio = tableBody.querySelector('input[type=radio]'); if (firstRadio) firstRadio.checked = true; } reindexRows(); } }); // Initialize image handlers for existing rows tableBody.querySelectorAll('tr').forEach((row, idx) => { initVariantImageHandlers(row, idx); }); // Initialize on page load refreshMode(); }); // Main product images functionality document.addEventListener('DOMContentLoaded', function() { const imageInput = document.getElementById('image'); const previewContainer = document.getElementById('previewContainer'); function syncInputs() { // Remove old hidden inputs document.querySelectorAll("input[name='existing_images[]']").forEach(el => el.remove()); // Add hidden inputs for remaining images document.querySelectorAll(".preview-image").forEach(div => { if (div.dataset.existing) { const hidden = document.createElement("input"); hidden.type = "hidden"; hidden.name = "existing_images[]"; hidden.value = div.dataset.existing; div.parentNode.appendChild(hidden); } }); } // Remove image functionality if (previewContainer) { previewContainer.addEventListener('click', function(e) { if (e.target.classList.contains('remove-image')) { e.target.closest('.preview-image').remove(); syncInputs(); } }); } // Preview new selected images if (imageInput) { imageInput.addEventListener('change', function(e) { Array.from(e.target.files).forEach(file => { const div = document.createElement('div'); div.className = 'position-relative preview-image'; div.style.width = '120px'; const img = document.createElement('img'); img.src = URL.createObjectURL(file); img.className = 'img-thumbnail'; img.style.width = '100%'; img.style.height = '100px'; img.style.objectFit = 'cover'; const btn = document.createElement('button'); btn.type = 'button'; btn.textContent = '×'; btn.className = 'btn btn-danger btn-sm position-absolute top-0 end-0 remove-image'; div.appendChild(img); div.appendChild(btn); previewContainer.appendChild(div); }); syncInputs(); }); } // Initial sync for server images syncInputs(); }); </script> <?php $__env->stopSection(); ?> <?php /**PATH C:\amor\resources\views/admin/product/form.blade.php ENDPATH**/ ?>
Copyright ©2021 || Defacer Indonesia