twotalesanimation
759 lines
32 KiB
PHP
759 lines
32 KiB
PHP
|
||
|
||
<?php $__env->startSection('title', $product->name . ' - Premium Custom Designs'); ?>
|
||
|
||
<?php $__env->startSection('styles'); ?>
|
||
<style>
|
||
.breadcrumb {
|
||
margin-bottom: 2rem;
|
||
font-size: 0.9rem;
|
||
}
|
||
|
||
.breadcrumb a {
|
||
color: var(--accent-primary);
|
||
text-decoration: none;
|
||
margin: 0 0.5rem;
|
||
}
|
||
|
||
.product-section {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 3rem;
|
||
margin-bottom: 4rem;
|
||
}
|
||
|
||
.product-image {
|
||
width: 100%;
|
||
height: 500px;
|
||
object-fit: cover;
|
||
border-radius: 8px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.lightbox {
|
||
display: none;
|
||
position: fixed;
|
||
z-index: 1000;
|
||
left: 0;
|
||
top: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background-color: rgba(0, 0, 0, 0.9);
|
||
}
|
||
|
||
.lightbox.active {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.lightbox-content {
|
||
position: relative;
|
||
max-width: 90%;
|
||
max-height: 90vh;
|
||
}
|
||
|
||
.lightbox-image {
|
||
width: 100%;
|
||
height: auto;
|
||
max-height: 85vh;
|
||
object-fit: contain;
|
||
}
|
||
|
||
.lightbox-close {
|
||
position: absolute;
|
||
top: 20px;
|
||
right: 35px;
|
||
color: white;
|
||
font-size: 40px;
|
||
font-weight: bold;
|
||
cursor: pointer;
|
||
transition: color 0.2s;
|
||
}
|
||
|
||
.lightbox-close:hover {
|
||
color: var(--accent-primary);
|
||
}
|
||
|
||
.lightbox-nav {
|
||
position: absolute;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
color: white;
|
||
font-size: 36px;
|
||
cursor: pointer;
|
||
user-select: none;
|
||
padding: 10px 15px;
|
||
transition: color 0.2s;
|
||
background-color: rgba(0, 0, 0, 0.5);
|
||
border-radius: 4px;
|
||
}
|
||
|
||
.lightbox-nav:hover {
|
||
color: var(--accent-primary);
|
||
background-color: rgba(0, 0, 0, 0.8);
|
||
}
|
||
|
||
.lightbox-prev {
|
||
left: 20px;
|
||
}
|
||
|
||
.lightbox-next {
|
||
right: 20px;
|
||
}
|
||
|
||
.lightbox-counter {
|
||
position: absolute;
|
||
bottom: 20px;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
color: white;
|
||
font-size: 14px;
|
||
background-color: rgba(0, 0, 0, 0.5);
|
||
padding: 8px 12px;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
.product-info h1 {
|
||
font-family: 'Abril Fatface', cursive;
|
||
font-size: 2.5rem;
|
||
color: var(--primary-color);
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.category-tag {
|
||
display: inline-block;
|
||
background-color: var(--accent-pink);
|
||
color: white;
|
||
padding: 0.4rem 1rem;
|
||
border-radius: 20px;
|
||
font-size: 0.85rem;
|
||
font-weight: 900;
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.price {
|
||
font-size: 2rem;
|
||
color: var(--primary-color);
|
||
font-weight: 600;
|
||
margin: 1rem 0;
|
||
}
|
||
|
||
.stock-status {
|
||
font-size: 0.9rem;
|
||
margin-bottom: 1.5rem;
|
||
}
|
||
|
||
.stock-status.in-stock {
|
||
color: var(--primary-color);
|
||
}
|
||
|
||
.stock-status.low-stock {
|
||
color: var(--accent-primary);
|
||
}
|
||
|
||
.stock-status.out-of-stock {
|
||
color: var(--accent-primary);
|
||
}
|
||
|
||
.description {
|
||
color: #666;
|
||
line-height: 1.8;
|
||
margin-bottom: 2rem;
|
||
font-size: 1.05rem;
|
||
}
|
||
|
||
.quantity-selector {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 1rem;
|
||
margin-bottom: 2rem;
|
||
}
|
||
|
||
.quantity-selector label {
|
||
font-weight: 600;
|
||
}
|
||
|
||
.quantity-selector input {
|
||
width: 80px;
|
||
padding: 0.5rem;
|
||
border: 1px solid #ddd;
|
||
border-radius: 4px;
|
||
font-size: 1rem;
|
||
}
|
||
|
||
.btn-group {
|
||
display: flex;
|
||
gap: 1rem;
|
||
}
|
||
|
||
.related-products {
|
||
margin-top: 4rem;
|
||
padding-top: 3rem;
|
||
border-top: 1px solid #ddd;
|
||
}
|
||
|
||
.related-products h2 {
|
||
font-family: 'Abril Fatface', cursive;
|
||
font-size: 2rem;
|
||
color: var(--primary-color);
|
||
margin-bottom: 2rem;
|
||
}
|
||
|
||
.alert {
|
||
padding: 1rem;
|
||
border-radius: 4px;
|
||
margin-bottom: 2rem;
|
||
}
|
||
|
||
.alert-success {
|
||
background-color: #d4e8d4;
|
||
color: var(--primary-color);
|
||
border: 1px solid #a8d4a8;
|
||
}
|
||
|
||
.calculator-modal {
|
||
display: none;
|
||
position: fixed;
|
||
z-index: 2000;
|
||
left: 0;
|
||
top: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background-color: rgba(0, 0, 0, 0.6);
|
||
}
|
||
|
||
.calculator-modal.active {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.calculator-content {
|
||
background: white;
|
||
padding: 2rem;
|
||
border-radius: 12px;
|
||
max-width: 500px;
|
||
width: 90%;
|
||
position: relative;
|
||
}
|
||
|
||
.calculator-close {
|
||
position: absolute;
|
||
top: 15px;
|
||
right: 20px;
|
||
font-size: 28px;
|
||
font-weight: bold;
|
||
color: #666;
|
||
cursor: pointer;
|
||
transition: color 0.2s;
|
||
}
|
||
|
||
.calculator-close:hover {
|
||
color: var(--accent-primary);
|
||
}
|
||
|
||
.wall-schematic {
|
||
background: var(--section-light-bg);
|
||
padding: 2rem;
|
||
border-radius: 8px;
|
||
margin: 1.5rem 0;
|
||
text-align: center;
|
||
}
|
||
|
||
.wall-diagram {
|
||
width: 100%;
|
||
max-width: 300px;
|
||
height: 150px;
|
||
border: 3px solid var(--primary-color);
|
||
position: relative;
|
||
margin: 1rem auto;
|
||
background: white;
|
||
}
|
||
|
||
.wall-label {
|
||
position: absolute;
|
||
font-size: 0.8rem;
|
||
font-weight: 600;
|
||
color: var(--primary-color);
|
||
}
|
||
|
||
.wall-label.width {
|
||
bottom: -25px;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
}
|
||
|
||
.wall-label.height {
|
||
right: -60px;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
}
|
||
|
||
.calc-input-group {
|
||
margin-bottom: 1.5rem;
|
||
}
|
||
|
||
.calc-input-group label {
|
||
display: block;
|
||
font-weight: 600;
|
||
margin-bottom: 0.5rem;
|
||
color: var(--primary-color);
|
||
}
|
||
|
||
.calc-input-group input {
|
||
width: 100%;
|
||
padding: 0.75rem;
|
||
border: 2px solid #ddd;
|
||
border-radius: 6px;
|
||
font-size: 1rem;
|
||
}
|
||
|
||
.calc-result {
|
||
background: var(--accent-light);
|
||
padding: 1.5rem;
|
||
border-radius: 8px;
|
||
margin-top: 1.5rem;
|
||
text-align: center;
|
||
}
|
||
|
||
.calc-result h3 {
|
||
margin: 0 0 0.5rem 0;
|
||
color: white;
|
||
font-size: 1.2rem;
|
||
}
|
||
|
||
.calc-result .result-value {
|
||
font-size: 2.5rem;
|
||
font-weight: bold;
|
||
color: white;
|
||
font-family: 'Abril Fatface', cursive;
|
||
}
|
||
|
||
.calc-result small {
|
||
display: block;
|
||
margin-top: 0.5rem;
|
||
color: rgba(255, 255, 255, 0.9);
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.product-section {
|
||
grid-template-columns: 1fr;
|
||
gap: 2rem;
|
||
}
|
||
|
||
.product-image {
|
||
height: 300px;
|
||
}
|
||
|
||
.product-info h1 {
|
||
font-size: 1.8rem;
|
||
}
|
||
|
||
.calculator-content {
|
||
padding: 1.5rem;
|
||
}
|
||
}
|
||
</style>
|
||
<?php $__env->stopSection(); ?>
|
||
|
||
<?php $__env->startSection('content'); ?>
|
||
<main class="container" style="padding-top: 20px;">
|
||
<!-- Breadcrumb -->
|
||
<!-- <div class="breadcrumb">
|
||
<a href="<?php echo e(route('home')); ?>">Home</a> /
|
||
<a href="<?php echo e(route('wallpapers')); ?>">Products</a> /
|
||
<span><?php echo e($product->name); ?></span>
|
||
</div> -->
|
||
|
||
<?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if(session('success')): ?>
|
||
<div class="alert alert-success">
|
||
<?php echo e(session('success')); ?>
|
||
|
||
</div>
|
||
<?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
|
||
|
||
<!-- Product Section -->
|
||
<section class="product-section">
|
||
<div>
|
||
<?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if($product->images->count() > 0): ?>
|
||
<img id="mainImage" src="<?php echo e(asset('storage/' . $product->images->first()->image_path)); ?>" alt="<?php echo e($product->name); ?>" class="product-image">
|
||
|
||
<?php if($product->images->count() > 1): ?>
|
||
<div style="display: flex; gap: 0.5rem; margin-top: 1rem; overflow-x: auto;">
|
||
<?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php $__currentLoopData = $product->images; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $image): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
|
||
<img
|
||
src="<?php echo e(asset('storage/' . $image->image_path)); ?>"
|
||
alt="<?php echo e($product->name); ?>"
|
||
class="product-thumbnail"
|
||
onclick="document.getElementById('mainImage').src = '<?php echo e(asset('storage/' . $image->image_path)); ?>'"
|
||
style="width: 80px; height: 80px; object-fit: cover; border-radius: 4px; cursor: pointer; border: 2px solid transparent; transition: border-color 0.2s; flex-shrink: 0;"
|
||
onmouseover="this.style.borderColor = 'var(--accent-primary)'"
|
||
onmouseout="this.style.borderColor = 'transparent'"
|
||
>
|
||
<?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
|
||
</div>
|
||
<?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
|
||
<?php else: ?>
|
||
<img id="mainImage" src="<?php echo e($product->image); ?>" alt="<?php echo e($product->name); ?>" class="product-image">
|
||
<?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
|
||
</div>
|
||
|
||
<div class="product-info">
|
||
<h1><?php echo e($product->name); ?></h1>
|
||
<span class="category-tag"><?php echo e($product->category->name); ?></span>
|
||
<!-- <div class="stock-status <?php if($product->stock > 10): ?> in-stock <?php elseif($product->stock > 0): ?> low-stock <?php else: ?> out-of-stock <?php endif; ?>">
|
||
<?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if($product->stock > 0): ?>
|
||
<strong><?php echo e($product->stock); ?> in stock</strong>
|
||
<?php else: ?>
|
||
<strong>Out of stock</strong>
|
||
<?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
|
||
</div> -->
|
||
|
||
<p class="description"><?php echo e($product->description); ?></p>
|
||
|
||
<?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if($product->type === 'wallpaper'): ?>
|
||
<div style="background: var(--section-light-bg); padding: 1rem; border-radius: 4px; margin-bottom: 1.5rem; font-size: 0.9rem;">
|
||
<p><strong>Wallpaper Info:</strong> Sold per meter (10m rolls). Pattern is 1m wide x 2.7m high. For a wall height of 2.7m, you need 3m of wallpaper.</p>
|
||
</div>
|
||
<?php elseif($product->type === 'mural'): ?>
|
||
<div style="background: var(--section-light-bg); padding: 1rem; border-radius: 4px; margin-bottom: 1.5rem; font-size: 0.9rem;">
|
||
<p><strong>Mural Info:</strong> Sold per m² (square meter). Single image, non-repeating pattern. Perfect for accent walls.</p>
|
||
</div>
|
||
<?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
|
||
|
||
<?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if($product->stock > 0): ?>
|
||
<form action="<?php echo e(route('cart-add', $product)); ?>" method="POST">
|
||
<?php echo csrf_field(); ?>
|
||
|
||
<!-- Print Stock Selection -->
|
||
<div class="quantity-selector" style="flex-direction: column; align-items: flex-start; gap: 0.5rem; margin-bottom: 2rem;">
|
||
<label for="print_stock_id" style="font-weight: 600;">Select Print Stock:</label>
|
||
<select id="print_stock_id" name="print_stock_id" required style=" font-family: var(--font-sans); width: 100%; padding: 0.75rem; border: 1px solid #ddd; border-radius: 4px; font-size: 1rem;">
|
||
<?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php $__currentLoopData = $product->printStocks; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $stock): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
|
||
<option value="<?php echo e($stock->id); ?>"
|
||
data-cost="<?php echo e($product->type === 'wallpaper' ? $stock->cost_per_meter : $stock->cost_per_m2); ?>"
|
||
data-width="<?php echo e($stock->width ?? 1); ?>">
|
||
<?php echo e($stock->name); ?> (<?php echo e($stock->width ?? 1); ?>m wide) - R<?php echo e($product->type === 'wallpaper' ? number_format($stock->cost_per_meter, 2) : number_format($stock->cost_per_m2, 2)); ?>/<?php echo e($product->type === 'wallpaper' ? 'm' : 'm²'); ?>
|
||
|
||
</option>
|
||
<?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
|
||
</select>
|
||
<small style="color: #666;">Base cost per <?php echo e($product->type === 'wallpaper' ? 'meter' : 'm²'); ?> of print stock</small>
|
||
</div>
|
||
|
||
<?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if($product->type === 'wallpaper'): ?>
|
||
<!-- Calculator Button -->
|
||
<div style="margin-bottom: 1.5rem;">
|
||
<button type="button" class="btn btn--secondary" onclick="openCalculator()" style="width: 100%;">
|
||
📐 Calculate Required Length
|
||
</button>
|
||
</div>
|
||
|
||
<div class="quantity-selector" style="flex-direction: column; align-items: flex-start; gap: 0.5rem;">
|
||
<label for="length">Length Required (meters):</label>
|
||
<input type="number" id="length" name="length" min="1" step="0.5" value="3" required style="font-family: var(--font-sans); width: 150px;">
|
||
<small style="color: #666;">Recommended: Add 0.5m for pattern matching and trimming</small>
|
||
</div>
|
||
<?php elseif($product->type === 'mural'): ?>
|
||
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 2rem;">
|
||
<div>
|
||
<label for="width" style="display: block; font-weight: 600; margin-bottom: 0.5rem;">Width (meters):</label>
|
||
<input type="number" id="width" name="width" min="0.5" step="0.1" value="2" required style="font-family: var(--font-sans); width: 100%; padding: 0.5rem; border: 1px solid #ddd; border-radius: 4px;">
|
||
</div>
|
||
<div>
|
||
<label for="height" style="display: block; font-weight: 600; margin-bottom: 0.5rem;">Height (meters):</label>
|
||
<input type="number" id="height" name="height" min="0.5" step="0.1" value="2.7" required style="font-family: var(--font-sans); width: 100%; padding: 0.5rem; border: 1px solid #ddd; border-radius: 4px;">
|
||
</div>
|
||
</div>
|
||
<?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
|
||
|
||
<!-- Total Price Display -->
|
||
<div style="background: var(--accent-light); padding: 1.5rem; border-radius: 20px; margin-bottom: 2rem;">
|
||
<p style="margin: 0 0 0.5rem 0; color: black;">Estimated Total:</p>
|
||
<div style="font-family: Abril fatface;font-size: 3rem; font-weight: 400; color: white;">R<span id="totalPrice"><?php echo e(number_format($product->price, 2)); ?></span></div>
|
||
<small style="color: #fff; display: block; margin-top: 0.5rem;" id="priceBreakdown"></small>
|
||
</div>
|
||
|
||
<div class="btn-group" style="gap: 1rem;">
|
||
<button type="submit" class="btn" style="flex: 1;">Add to Cart</button>
|
||
<a href="<?php echo e(route('cart')); ?>" class="btn btn--secondary" style="flex: 1; text-align: center;">View Cart</a>
|
||
</div>
|
||
<div class="btn-group " style="margin-top: 1rem; gap: 1rem;">
|
||
<button type="button" class="btn btn--secondary" style="flex: 1;" onclick="orderSample()">Order Sample</button>
|
||
</div>
|
||
</form>
|
||
|
||
<!-- Sample Order Form (Hidden) -->
|
||
<form id="sampleForm" action="<?php echo e(route('order-sample', $product)); ?>" method="POST" style="display: none;">
|
||
<?php echo csrf_field(); ?>
|
||
<input type="hidden" name="print_stock_id" id="sampleStockId">
|
||
</form>
|
||
|
||
<script>
|
||
function orderSample() {
|
||
const stockSelect = document.getElementById('print_stock_id');
|
||
if (!stockSelect.value) {
|
||
alert('Please select a stock option before ordering a sample.');
|
||
stockSelect.focus();
|
||
return;
|
||
}
|
||
document.getElementById('sampleStockId').value = stockSelect.value;
|
||
document.getElementById('sampleForm').submit();
|
||
}
|
||
</script>
|
||
|
||
<script>
|
||
const productType = 'wallpaper' === 'wallpaper' ? 'wallpaper' : 'mural';
|
||
const basePrice = <?php echo e($product->price); ?>;
|
||
const isWallpaper = <?php echo e($product->type === 'wallpaper' ? 'true' : 'false'); ?>;
|
||
|
||
function updatePrice() {
|
||
const stockSelect = document.getElementById('print_stock_id');
|
||
const selectedOption = stockSelect.options[stockSelect.selectedIndex];
|
||
const stockCost = parseFloat(selectedOption.dataset.cost) || 0;
|
||
|
||
let totalCost = stockCost;
|
||
let breakdown = '';
|
||
|
||
if (isWallpaper) {
|
||
const length = parseFloat(document.getElementById('length').value) || 0;
|
||
totalCost = stockCost * length;
|
||
breakdown = `Stock: R${stockCost.toFixed(2)}/m × ${length}m`;
|
||
} else {
|
||
const width = parseFloat(document.getElementById('width').value) || 0;
|
||
const height = parseFloat(document.getElementById('height').value) || 0;
|
||
const m2 = width * height;
|
||
totalCost = stockCost * m2;
|
||
breakdown = `Stock: R${stockCost.toFixed(2)}/m² × ${m2.toFixed(2)}m²`;
|
||
}
|
||
|
||
document.getElementById('totalPrice').textContent = totalCost.toFixed(2);
|
||
document.getElementById('priceBreakdown').textContent = breakdown;
|
||
}
|
||
|
||
document.getElementById('print_stock_id').addEventListener('change', updatePrice);
|
||
if (isWallpaper) {
|
||
document.getElementById('length').addEventListener('input', updatePrice);
|
||
} else {
|
||
document.getElementById('width').addEventListener('input', updatePrice);
|
||
document.getElementById('height').addEventListener('input', updatePrice);
|
||
}
|
||
|
||
updatePrice();
|
||
</script>
|
||
<?php else: ?>
|
||
<button class="btn" disabled style="background-color: #ccc; cursor: not-allowed;">Out of Stock</button>
|
||
<?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Calculator Modal -->
|
||
<div id="calculatorModal" class="calculator-modal">
|
||
<div class="calculator-content">
|
||
<span class="calculator-close" onclick="closeCalculator()">×</span>
|
||
<h2 style="color: var(--primary-color); margin-bottom: 1rem; font-family: 'Abril Fatface', cursive;">Wallpaper Calculator</h2>
|
||
|
||
<div class="wall-schematic">
|
||
<p style="margin-bottom: 1rem; font-size: 0.9rem; color: #666;">Enter your wall dimensions:</p>
|
||
<div class="wall-diagram">
|
||
<span class="wall-label width">Width</span>
|
||
<span class="wall-label height">Height</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="calc-input-group">
|
||
<label for="calc-wall-width">Wall Width (meters):</label>
|
||
<input style="font-family: var(--font-sans);" type="number" id="calc-wall-width" min="0.1" step="0.1" value="4" oninput="calculateWallpaper()">
|
||
</div>
|
||
|
||
<div class="calc-input-group">
|
||
<label for="calc-wall-height">Wall Height (meters):</label>
|
||
<input style="font-family: var(--font-sans);" type="number" id="calc-wall-height" min="0.1" step="0.1" value="2.7" oninput="calculateWallpaper()">
|
||
</div>
|
||
|
||
<div class="calc-input-group">
|
||
<label for="calc-wallpaper-width">Wallpaper Width (meters):</label>
|
||
<div style="padding: 0.75rem; background: var(--section-light-bg); border-radius: 6px; font-size: 1rem; font-weight: 600; color: var(--primary-color);">
|
||
<span id="calc-wallpaper-width">1</span>m
|
||
</div>
|
||
<small style="color: #666; display: block; margin-top: 0.25rem;">Width from selected print stock</small>
|
||
</div>
|
||
|
||
<div class="calc-result" id="calcResult" style="display: none;">
|
||
<h3>Required Length:</h3>
|
||
<div class="result-value"><span id="calcResultValue">0</span>m</div>
|
||
<small id="calcBreakdown"></small>
|
||
</div>
|
||
|
||
<button class="btn" onclick="useCalculatedLength()" style="width: 100%; margin-top: 1rem;">
|
||
Use This Length
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Lightbox Modal -->
|
||
<div id="lightbox" class="lightbox">
|
||
<div class="lightbox-content">
|
||
<span class="lightbox-close" onclick="closeLightbox()">×</span>
|
||
<span class="lightbox-nav lightbox-prev" onclick="prevImage()">‹</span>
|
||
<img id="lightboxImage" class="lightbox-image" style="border-radius: 20px;" src="" alt="">
|
||
<span class="lightbox-nav lightbox-next" onclick="nextImage()">›</span>
|
||
<div class="lightbox-counter">
|
||
<span id="imageCounter">1</span> / <span id="totalImages">1</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
let currentImageIndex = 0;
|
||
let allImages = [];
|
||
|
||
function initLightboxImages() {
|
||
<?php if($product->images->count() > 0): ?>
|
||
allImages = [
|
||
<?php $__currentLoopData = $product->images; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $image): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
|
||
'<?php echo e(asset('storage/' . $image->image_path)); ?>',
|
||
<?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
|
||
];
|
||
<?php else: ?>
|
||
allImages = ['<?php echo e($product->image); ?>'];
|
||
<?php endif; ?>
|
||
|
||
document.getElementById('totalImages').textContent = allImages.length;
|
||
}
|
||
|
||
function openLightbox(imageSrc) {
|
||
currentImageIndex = allImages.indexOf(imageSrc);
|
||
if (currentImageIndex === -1) {
|
||
currentImageIndex = 0;
|
||
}
|
||
updateLightboxImage();
|
||
document.getElementById('lightbox').classList.add('active');
|
||
document.body.style.overflow = 'hidden';
|
||
}
|
||
|
||
function closeLightbox() {
|
||
document.getElementById('lightbox').classList.remove('active');
|
||
document.body.style.overflow = 'auto';
|
||
}
|
||
|
||
function nextImage() {
|
||
currentImageIndex = (currentImageIndex + 1) % allImages.length;
|
||
updateLightboxImage();
|
||
}
|
||
|
||
function prevImage() {
|
||
currentImageIndex = (currentImageIndex - 1 + allImages.length) % allImages.length;
|
||
updateLightboxImage();
|
||
}
|
||
|
||
function updateLightboxImage() {
|
||
document.getElementById('lightboxImage').src = allImages[currentImageIndex];
|
||
document.getElementById('imageCounter').textContent = currentImageIndex + 1;
|
||
}
|
||
|
||
// Close lightbox when clicking outside the image
|
||
document.getElementById('lightbox').addEventListener('click', function(event) {
|
||
if (event.target === this) {
|
||
closeLightbox();
|
||
}
|
||
});
|
||
|
||
// Close lightbox with Escape key
|
||
document.addEventListener('keydown', function(event) {
|
||
if (event.key === 'Escape') {
|
||
closeLightbox();
|
||
}
|
||
// Navigate with arrow keys
|
||
if (document.getElementById('lightbox').classList.contains('active')) {
|
||
if (event.key === 'ArrowRight') {
|
||
nextImage();
|
||
}
|
||
if (event.key === 'ArrowLeft') {
|
||
prevImage();
|
||
}
|
||
}
|
||
});
|
||
|
||
// Add click handler to main image
|
||
document.getElementById('mainImage').addEventListener('click', function() {
|
||
openLightbox(this.src);
|
||
});
|
||
|
||
// Initialize lightbox images on page load
|
||
initLightboxImages();
|
||
|
||
// Calculator functions
|
||
function openCalculator() {
|
||
// Update calculator width from selected print stock
|
||
const stockSelect = document.getElementById('print_stock_id');
|
||
const selectedOption = stockSelect.options[stockSelect.selectedIndex];
|
||
const stockWidth = parseFloat(selectedOption.dataset.width) || 1;
|
||
document.getElementById('calc-wallpaper-width').textContent = stockWidth;
|
||
|
||
document.getElementById('calculatorModal').classList.add('active');
|
||
document.body.style.overflow = 'hidden';
|
||
calculateWallpaper();
|
||
}
|
||
|
||
function closeCalculator() {
|
||
document.getElementById('calculatorModal').classList.remove('active');
|
||
document.body.style.overflow = 'auto';
|
||
}
|
||
|
||
function calculateWallpaper() {
|
||
const wallWidth = parseFloat(document.getElementById('calc-wall-width').value) || 0;
|
||
const wallHeight = parseFloat(document.getElementById('calc-wall-height').value) || 0;
|
||
const wallpaperWidth = parseFloat(document.getElementById('calc-wallpaper-width').textContent) || 1;
|
||
|
||
if (wallWidth > 0 && wallHeight > 0 && wallpaperWidth > 0) {
|
||
// Calculate number of strips needed
|
||
const stripsNeeded = Math.ceil(wallWidth / wallpaperWidth);
|
||
|
||
// Calculate total length needed (strips × wall height)
|
||
const totalLength = stripsNeeded * wallHeight;
|
||
|
||
// Add 10% for pattern matching and waste
|
||
const withWaste = totalLength * 1.1;
|
||
const finalLength = Math.ceil(withWaste * 2) / 2; // Round up to nearest 0.5m
|
||
|
||
// Display results
|
||
document.getElementById('calcResultValue').textContent = finalLength.toFixed(1);
|
||
document.getElementById('calcBreakdown').innerHTML =
|
||
`${stripsNeeded} strips × ${wallHeight}m height = ${totalLength.toFixed(1)}m<br>` +
|
||
`+ 10% waste allowance = ${finalLength.toFixed(1)}m total`;
|
||
document.getElementById('calcResult').style.display = 'block';
|
||
}
|
||
}
|
||
|
||
function useCalculatedLength() {
|
||
const calculatedLength = parseFloat(document.getElementById('calcResultValue').textContent);
|
||
document.getElementById('length').value = calculatedLength;
|
||
closeCalculator();
|
||
updatePrice();
|
||
}
|
||
|
||
// Close calculator when clicking outside
|
||
document.getElementById('calculatorModal').addEventListener('click', function(event) {
|
||
if (event.target === this) {
|
||
closeCalculator();
|
||
}
|
||
});
|
||
</script>
|
||
|
||
<!-- Related Products -->
|
||
<?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if($product->category->products->count() > 1): ?>
|
||
<section class="related-products" style="margin-bottom: 20px;">
|
||
<h2>More from <?php echo e($product->category->name); ?></h2>
|
||
<div class="grid grid--3">
|
||
<?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php $__currentLoopData = $product->category->products->where('id', '!=', $product->id)->take(3); $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $relatedProduct): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
|
||
<?php echo $__env->make('components.product-card', ['product' => $relatedProduct], array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?>
|
||
<?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
|
||
</div>
|
||
</section>
|
||
<?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
|
||
</main>
|
||
<?php $__env->stopSection(); ?>
|
||
|
||
<?php echo $__env->make('layouts.app', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH /var/www/additional_design/resources/views/product-detail.blade.php ENDPATH**/ ?>
|