Invoice system working
This commit is contained in:
twotalesanimation
@@ -0,0 +1,260 @@
|
||||
<?php $__env->startSection('title', 'Order Confirmed'); ?>
|
||||
|
||||
<?php $__env->startSection('styles'); ?>
|
||||
<style>
|
||||
.success-container {
|
||||
text-align: center;
|
||||
margin: 3rem 0;
|
||||
}
|
||||
|
||||
.success-icon {
|
||||
font-size: 4rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-family: 'Abril Fatface', cursive;
|
||||
font-size: 2.5rem;
|
||||
color: var(--primary-color);
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
color: #666;
|
||||
font-size: 1.1rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.order-details {
|
||||
margin: 2rem 0;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.order-details-inner {
|
||||
padding: 2rem;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.detail-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 1rem 0;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
.detail-row:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.detail-label {
|
||||
font-weight: 600;
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.detail-value {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
margin: 2rem 0;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.order-items-inner {
|
||||
padding: 2rem;
|
||||
border-radius: 20pxpx;
|
||||
margin: 2rem 0;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.order-items h2 {
|
||||
font-family: 'Abril Fatface', cursive;
|
||||
font-size: 1.3rem;
|
||||
color: var(--primary-color);
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.item-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 1rem 0;
|
||||
border-bottom: 1px solid #e0e0e0;
|
||||
}
|
||||
|
||||
.item-row:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.item-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.item-name {
|
||||
font-weight: 600;
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.item-qty {
|
||||
font-size: 0.9rem;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.item-price {
|
||||
font-weight: 600;
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.total-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding-top: 1.5rem;
|
||||
margin-top: 1rem;
|
||||
border-top: 2px solid var(--primary-color);
|
||||
font-weight: 600;
|
||||
font-size: 1.2rem;
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.actions {
|
||||
margin-top: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.note {
|
||||
background: #d4e8d4;
|
||||
color: var(--primary-color);
|
||||
padding: 1rem;
|
||||
border-radius: 4px;
|
||||
margin: 2rem 0;
|
||||
border-left: 4px solid var(--primary-color);
|
||||
}
|
||||
.next-steps-title {
|
||||
font-family: 'Abril Fatface', cursive;
|
||||
font-size: 1.3rem;
|
||||
color: var(--primary-color);
|
||||
margin-bottom: 1.5rem;
|
||||
text-align: left;
|
||||
}
|
||||
</style>
|
||||
<?php $__env->stopSection(); ?>
|
||||
|
||||
<?php $__env->startSection('content'); ?>
|
||||
<main class="container">
|
||||
<div class="success-container">
|
||||
<div class="success-icon">✓</div>
|
||||
<h1>Order Confirmed!</h1>
|
||||
<p class="subtitle">Thank you for your purchase. Your order has been successfully received.</p>
|
||||
|
||||
<!-- Order Details -->
|
||||
<div class="order-details card">
|
||||
<div class="order-details-inner">
|
||||
<span class="detail-label">Order Number:</span>
|
||||
<span class="detail-value"><strong><?php echo e($order->order_number); ?></strong></span>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<span class="detail-label">Customer Name:</span>
|
||||
<span class="detail-value"><?php echo e($order->customer_name); ?></span>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<span class="detail-label">Email:</span>
|
||||
<span class="detail-value"><?php echo e($order->customer_email); ?></span>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<span class="detail-label">Shipping Address:</span>
|
||||
<span class="detail-value"><?php echo e($order->shipping_address); ?></span>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<span class="detail-label">Order Status:</span>
|
||||
<span class="detail-value">
|
||||
<strong style="color: var(--accent-primary); text-transform: capitalize;"><?php echo e($order->status); ?></strong>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Order Items -->
|
||||
<div class="order-items card">
|
||||
<div class="order-items-inner">
|
||||
<h2>Order Items</h2>
|
||||
<?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php $__currentLoopData = $order->items; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $item): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
|
||||
<div class="item-row">
|
||||
<div class="item-info">
|
||||
<div class="item-name"><?php echo e($item->product->name); ?><?php echo e($item->is_sample ? ' - Sample' : ''); ?></div>
|
||||
<div class="item-qty">
|
||||
<?php
|
||||
$stock = $item->printStock;
|
||||
$stockText = $stock ? "{$stock->name}" : "Standard";
|
||||
$stockCost = 0;
|
||||
|
||||
if (!$item->is_sample && $stock) {
|
||||
$stockCost = $item->type === 'wallpaper' ? $stock->cost_per_meter : $stock->cost_per_m2;
|
||||
}
|
||||
?>
|
||||
|
||||
<?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if($item->is_sample): ?>
|
||||
Sample - Fixed Price: R<?php echo e(number_format(\App\Services\ShippingService::getSampleCost(), 2)); ?>
|
||||
|
||||
<?php elseif($item->type === 'wallpaper'): ?>
|
||||
Length: <?php echo e($item->length); ?>m | Finish: <?php echo e($stockText); ?><br>
|
||||
<small>Stock Cost: R<?php echo e(number_format($stockCost, 2)); ?>/m</small>
|
||||
<?php elseif($item->type === 'mural'): ?>
|
||||
Dimensions: <?php echo e($item->width); ?>m × <?php echo e($item->height); ?>m (<?php echo e(number_format($item->width * $item->height, 2)); ?>m²) | Finish: <?php echo e($stockText); ?><br>
|
||||
<small>Stock Cost: R<?php echo e(number_format($stockCost, 2)); ?>/m²</small>
|
||||
<?php else: ?>
|
||||
<small>Price: R<?php echo e(number_format($stockCost, 2)); ?> per unit</small>
|
||||
<?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-price">
|
||||
R<?php echo e(number_format(
|
||||
$item->is_sample
|
||||
? \App\Services\ShippingService::getSampleCost() * $item->quantity
|
||||
: $item->quantity * (
|
||||
$item->type === 'wallpaper'
|
||||
? $stockCost * $item->length
|
||||
: ($item->type === 'mural'
|
||||
? $stockCost * $item->width * $item->height
|
||||
: $stockCost
|
||||
)
|
||||
),
|
||||
2
|
||||
)); ?>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
|
||||
</div>
|
||||
<div class="total-row" style="justify-content: space-between; border-top: 1px solid #eee; padding-top: 1rem; margin-top: 1rem; font-size: 0.95rem; color: #666;">
|
||||
<span>Subtotal:</span>
|
||||
<span>R<?php echo e(number_format($order->total, 2)); ?></span>
|
||||
</div>
|
||||
<?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if($order->shipping_fee): ?>
|
||||
<div class="total-row" style="justify-content: space-between; border-top: none; padding-top: 0.5rem; margin-top: 0; font-size: 0.95rem; color: #666;">
|
||||
<span>Shipping:</span>
|
||||
<span>R<?php echo e(number_format($order->shipping_fee, 2)); ?></span>
|
||||
</div>
|
||||
<?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
|
||||
<div class="total-row">
|
||||
<span>Order Total:</span>
|
||||
<span>R<?php echo e(number_format($order->total + ($order->shipping_fee ?? 0), 2)); ?></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card--pink">
|
||||
<h2 class="next-steps-title" style="text-align: center;">What Happens Next?</h2>
|
||||
<p>A confirmation email has been sent to <strong><?php echo e($order->customer_email); ?></strong>. You'll receive updates about your order status and shipping information shortly.</p>
|
||||
<p style="margin-bottom: 0; text-align: center; margin-top: 1rem; font-size: 0.9rem;">
|
||||
💡 You can also <a href="<?php echo e(route('track-order-form')); ?>" style="color: inherit; font-weight: 600; text-decoration: underline;">track your order anytime</a> using your order number and email address.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- Actions -->
|
||||
<div class="actions">
|
||||
<a href="<?php echo e(route('wallpapers')); ?>" class="btn">Continue Shopping</a>
|
||||
<a href="<?php echo e(route('home')); ?>" class="btn btn--secondary">Back to Home</a>
|
||||
</div>
|
||||
</div>
|
||||
</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/order-success.blade.php ENDPATH**/ ?>
|
||||
@@ -0,0 +1,176 @@
|
||||
<?php $__env->startSection('title', 'Track Your Order'); ?>
|
||||
|
||||
<?php $__env->startSection('styles'); ?>
|
||||
<style>
|
||||
.track-order-container {
|
||||
max-width: 500px;
|
||||
margin: 4rem auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: var(--accent-dark);
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
color: #666;
|
||||
font-size: 1rem;
|
||||
margin-bottom: 2rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.track-form {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 1.5rem;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
display: block;
|
||||
font-weight: 600;
|
||||
margin-bottom: 0.5rem;
|
||||
color: var(--primary-color);
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.form-group input {
|
||||
width: 100%;
|
||||
padding: 0.75rem;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
font-size: 1rem;
|
||||
font-family: inherit;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.form-group input:focus {
|
||||
outline: none;
|
||||
border-color: var(--primary-color);
|
||||
box-shadow: 0 0 0 3px rgba(45, 80, 71, 0.1);
|
||||
}
|
||||
|
||||
.form-group input::placeholder {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.error-message {
|
||||
color: #d32f2f;
|
||||
font-size: 0.9rem;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.info-box {
|
||||
font-size: 0.9rem;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.back-link {
|
||||
display: block;
|
||||
text-align: center;
|
||||
margin-top: 1.5rem;
|
||||
color: var(--primary-color);
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.back-link:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.alert {
|
||||
padding: 1rem;
|
||||
border-radius: 20px;
|
||||
margin-bottom: 1.5rem;
|
||||
border: 1px solid;
|
||||
}
|
||||
|
||||
.alert-error {
|
||||
background-color: #ffebee;
|
||||
border-color: #f8d7da;
|
||||
color: #c62828;
|
||||
}
|
||||
</style>
|
||||
<?php $__env->stopSection(); ?>
|
||||
|
||||
<?php $__env->startSection('content'); ?>
|
||||
<main class="container">
|
||||
<div class="track-order-container">
|
||||
<h1>Track Your Order</h1>
|
||||
<p class="subtitle">
|
||||
Enter your order number and email address to view the status and details of your order.
|
||||
</p>
|
||||
|
||||
<?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if($errors->any()): ?>
|
||||
<div class="alert alert-error">
|
||||
<?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php $__currentLoopData = $errors->all(); $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $error): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
|
||||
<div><?php echo e($error); ?></div>
|
||||
<?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; ?>
|
||||
|
||||
<form action="<?php echo e(route('track-order-search')); ?>" method="POST">
|
||||
<?php echo csrf_field(); ?>
|
||||
<div class="card">
|
||||
<div class="form-group">
|
||||
<label for="order_number">Order Number</label>
|
||||
<input
|
||||
type="text"
|
||||
id="order_number"
|
||||
name="order_number"
|
||||
placeholder="e.g., ORD-20251230-5F3A2C1B"
|
||||
value="<?php echo e(old('order_number')); ?>"
|
||||
required
|
||||
>
|
||||
<?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php $__errorArgs = ['order_number'];
|
||||
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
|
||||
if ($__bag->has($__errorArgs[0])) :
|
||||
if (isset($message)) { $__messageOriginal = $message; }
|
||||
$message = $__bag->first($__errorArgs[0]); ?>
|
||||
<div class="error-message"><?php echo e($message); ?></div>
|
||||
<?php unset($message);
|
||||
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
|
||||
endif;
|
||||
unset($__errorArgs, $__bag); ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="email">Email Address</label>
|
||||
<input
|
||||
type="email"
|
||||
id="email"
|
||||
name="email"
|
||||
placeholder="your@email.com"
|
||||
value="<?php echo e(old('email')); ?>"
|
||||
required
|
||||
>
|
||||
<?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php $__errorArgs = ['email'];
|
||||
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
|
||||
if ($__bag->has($__errorArgs[0])) :
|
||||
if (isset($message)) { $__messageOriginal = $message; }
|
||||
$message = $__bag->first($__errorArgs[0]); ?>
|
||||
<div class="error-message"><?php echo e($message); ?></div>
|
||||
<?php unset($message);
|
||||
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
|
||||
endif;
|
||||
unset($__errorArgs, $__bag); ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
|
||||
</div>
|
||||
|
||||
<input type="submit" class="btn" value="Find Your Order" style="width: 100%; cursor: pointer;">
|
||||
|
||||
<div class="info-box card--pink" style="margin-top: 1.5rem; margin-bottom: 0;">
|
||||
💡 Your order number can be found in the confirmation email sent to you after purchase. The email address must match the one used when placing the order.
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<a href="<?php echo e(route('home')); ?>" class="back-link">← Back to Home</a>
|
||||
</div>
|
||||
</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/track-order.blade.php ENDPATH**/ ?>
|
||||
@@ -0,0 +1,255 @@
|
||||
<?php $__env->startSection('title', 'Wallpapers - Premium Custom Designs'); ?>
|
||||
|
||||
<?php $__env->startSection('styles'); ?>
|
||||
<style>
|
||||
.hero-slider {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-radius: 20px;
|
||||
margin: 20px;
|
||||
height: 600px;
|
||||
}
|
||||
|
||||
.hero-slide {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0;
|
||||
transition: opacity 0.8s ease-in-out;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.hero-slide.active {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.hero-slide-content {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 3rem;
|
||||
align-items: center;
|
||||
padding: 6rem 5rem;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.hero-dots {
|
||||
position: absolute;
|
||||
bottom: 30px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.hero-dot {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.hero-dot.active {
|
||||
background: white;
|
||||
width: 32px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.hero-cta {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.hero-slider:hover .hero-dot {
|
||||
background: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
.hero-slider:hover .hero-dot.active {
|
||||
background: white;
|
||||
}
|
||||
</style>
|
||||
<?php $__env->stopSection(); ?>
|
||||
|
||||
<?php $__env->startSection('content'); ?>
|
||||
<!-- HERO SECTION -->
|
||||
<section class="section" id="hero">
|
||||
<div class="hero-slider">
|
||||
<?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php $__empty_1 = true; $__currentLoopData = $heroImages; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $index => $image): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
|
||||
<div class="hero-slide <?php if($index === 0): ?> active <?php endif; ?>" style="background-image: url('<?php echo e(asset('storage/' . $image->image_path)); ?>');">
|
||||
<div class="hero-slide-content">
|
||||
<div>
|
||||
<div class="hero-content">
|
||||
<h1 style="color: white; font-size: 3rem;"><?php echo e($image->title); ?></h1>
|
||||
<?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if($image->description): ?>
|
||||
<p style="color: rgba(255, 255, 255, 0.9); font-size: 1.1rem; max-width: 95%;"><?php echo e($image->description); ?></p>
|
||||
<?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
|
||||
<div class="hero-cta">
|
||||
<?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if($image->button_text && $image->button_link): ?>
|
||||
<?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if(str_starts_with($image->button_link, '#')): ?>
|
||||
<button class="btn" onclick="document.getElementById('<?php echo e(substr($image->button_link, 1)); ?>').scrollIntoView({behavior: 'smooth'})"><?php echo e($image->button_text); ?></button>
|
||||
<?php else: ?>
|
||||
<a href="<?php echo e($image->button_link); ?>" class="btn"><?php echo e($image->button_text); ?></a>
|
||||
<?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
|
||||
<?php else: ?>
|
||||
<button class="btn" onclick="document.getElementById('wallpaper-grid').scrollIntoView({behavior: 'smooth'})">Browse Wallpapers</button>
|
||||
<?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div></div>
|
||||
</div>
|
||||
</div>
|
||||
<?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
|
||||
<!-- Fallback hero image if none are configured in admin -->
|
||||
<div class="hero-slide active" style="background: linear-gradient(to right, rgba(45, 80, 71, 0.7), rgba(45, 80, 71, 0.5)), url('https://images.unsplash.com/photo-1552321554-5fefe8c9ef14?w=1200&q=80') center/cover no-repeat;">
|
||||
<div class="hero-slide-content">
|
||||
<div>
|
||||
<div class="hero-content">
|
||||
<h1 style="color: white; font-size: 3rem;">Premium Custom Wallpapers</h1>
|
||||
<p style="color: rgba(255, 255, 255, 0.95); font-size: 1.1rem;">Transform your spaces with our carefully curated collection of high-quality wallpapers. From botanical motifs to contemporary geometric patterns, each design is crafted with precision and printed to perfection.</p>
|
||||
<div class="hero-cta">
|
||||
<button class="btn" onclick="document.getElementById('wallpaper-grid').scrollIntoView({behavior: 'smooth'})">Browse Wallpapers</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div></div>
|
||||
</div>
|
||||
</div>
|
||||
<?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
|
||||
|
||||
<div class="hero-dots">
|
||||
<?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php $__empty_1 = true; $__currentLoopData = $heroImages; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $index => $image): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
|
||||
<div class="hero-dot <?php if($index === 0): ?> active <?php endif; ?>" data-slide="<?php echo e($index); ?>"></div>
|
||||
<?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
|
||||
<div class="hero-dot active" data-slide="0"></div>
|
||||
<?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const slides = document.querySelectorAll('.hero-slide');
|
||||
const dots = document.querySelectorAll('.hero-dot');
|
||||
const slider = document.querySelector('.hero-slider');
|
||||
let currentSlide = 0;
|
||||
let autoAdvanceInterval;
|
||||
|
||||
function showSlide(n) {
|
||||
if (slides.length === 0) return;
|
||||
slides.forEach(s => s.classList.remove('active'));
|
||||
dots.forEach(d => d.classList.remove('active'));
|
||||
currentSlide = (n + slides.length) % slides.length;
|
||||
slides[currentSlide].classList.add('active');
|
||||
dots[currentSlide].classList.add('active');
|
||||
}
|
||||
|
||||
function startAutoAdvance() {
|
||||
autoAdvanceInterval = setInterval(() => {
|
||||
showSlide(currentSlide + 1);
|
||||
}, 5000);
|
||||
}
|
||||
|
||||
function resetAutoAdvance() {
|
||||
clearInterval(autoAdvanceInterval);
|
||||
startAutoAdvance();
|
||||
}
|
||||
|
||||
dots.forEach(dot => {
|
||||
dot.addEventListener('click', () => {
|
||||
showSlide(parseInt(dot.getAttribute('data-slide')));
|
||||
resetAutoAdvance();
|
||||
});
|
||||
});
|
||||
|
||||
slider.addEventListener('mouseenter', () => clearInterval(autoAdvanceInterval));
|
||||
slider.addEventListener('mouseleave', startAutoAdvance);
|
||||
|
||||
startAutoAdvance();
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
<!-- WALLPAPER GRID -->
|
||||
<section class="section" id="wallpaper-grid" style="padding: 2rem 0;">
|
||||
<div class="container">
|
||||
<div style="display: flex; gap: 2rem; justify-content: space-between; align-items: center; flex-wrap: wrap; margin-bottom: 2rem;">
|
||||
<div>
|
||||
<h3>All Wallpapers</h3>
|
||||
<p style="color: var(--text-secondary);">Showing all designs</p>
|
||||
</div>
|
||||
<div style="display: flex; gap: 1rem;">
|
||||
<select style="padding: 8px 12px; border: 1px solid var(--border-color); border-radius: 4px; font-size: 0.9rem;">
|
||||
<option>Sort by: Featured</option>
|
||||
<option>Newest</option>
|
||||
<option>Price: Low to High</option>
|
||||
<option>Price: High to Low</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 2rem;">
|
||||
<button class="filter-btn active" data-filter="all">All</button>
|
||||
<button class="filter-btn" data-filter="botanical">Botanical</button>
|
||||
<button class="filter-btn" data-filter="vintage">Vintage</button>
|
||||
<button class="filter-btn" data-filter="modern">Modern</button>
|
||||
<button class="filter-btn" data-filter="geometric">Geometric</button>
|
||||
<button class="filter-btn" data-filter="texture">Texture</button>
|
||||
<button class="filter-btn" data-filter="floral">Floral</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="grid grid--3">
|
||||
<?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php $__empty_1 = true; $__currentLoopData = $products; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $product): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
|
||||
<?php echo $__env->make('components.product-card', ['product' => $product], array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?>
|
||||
<?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
|
||||
<p>No products available</p>
|
||||
<?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CTA SECTION -->
|
||||
<section class="section section--highlight">
|
||||
<div class="container" style="text-align: center;">
|
||||
<h2>Need Help Choosing?</h2>
|
||||
<p style="max-width: 600px; margin: 0 auto var(--spacing-lg); color: var(--text-primary);">
|
||||
Schedule a free consultation with our design experts. We'll help you find the perfect wallpaper for your space.
|
||||
</p>
|
||||
<button class="btn btn--secondary">Book a Free Consultation</button>
|
||||
</div>
|
||||
</section>
|
||||
<?php $__env->stopSection(); ?>
|
||||
|
||||
<?php $__env->startSection('scripts'); ?>
|
||||
<script>
|
||||
document.querySelectorAll('.filter-btn').forEach(btn => {
|
||||
btn.addEventListener('click', function() {
|
||||
const filter = this.dataset.filter;
|
||||
document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active'));
|
||||
this.classList.add('active');
|
||||
|
||||
document.querySelectorAll('[data-category]').forEach(card => {
|
||||
if (filter === 'all' || card.dataset.category === filter) {
|
||||
card.style.display = '';
|
||||
} else {
|
||||
card.style.display = 'none';
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<?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/wallpapers.blade.php ENDPATH**/ ?>
|
||||
@@ -0,0 +1,366 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Invoice #<?php echo e($order->order_number); ?></title>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
body {
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
color: #333;
|
||||
line-height: 1.6;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.invoice-container {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
padding: 40px;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.invoice-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 20px;
|
||||
border-bottom: 1px solid #1a1a1a;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
.company-info h1 {
|
||||
font-family: Abril Fatface;
|
||||
font-size: 36px;
|
||||
color: #1a1a1a;
|
||||
margin-bottom: 10px;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.company-details {
|
||||
font-size: 10px;
|
||||
color: #666;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.invoice-details {
|
||||
text-align: right;
|
||||
/* line-height: 1.5; */
|
||||
}
|
||||
|
||||
.invoice-details h2 {
|
||||
font-size: 28px;
|
||||
color: #1a1a1a;
|
||||
font-weight: normal;
|
||||
/* margin-bottom: 20px; */
|
||||
font-family: 'AbrilFatface', Georgia, serif;
|
||||
}
|
||||
|
||||
.detail-row {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
/* margin-bottom: 8px; */
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.detail-row strong {
|
||||
margin-right: 20px;
|
||||
color: #666;
|
||||
width: 120px;
|
||||
}
|
||||
|
||||
.detail-row span {
|
||||
color: #1a1a1a;
|
||||
width: 150px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
color: #666;
|
||||
margin-top: 20px;
|
||||
/* margin-bottom: 20px; */
|
||||
/* border-bottom: 1px solid #e0e0e0; */
|
||||
padding-bottom: 12px;
|
||||
}
|
||||
|
||||
.customer-info {
|
||||
display: flex;
|
||||
/* gap: 80px; */
|
||||
/* margin-bottom: 40px; */
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.customer-info div {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.customer-info h3 {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
color: #666;
|
||||
/* margin-bottom: 8px; */
|
||||
}
|
||||
|
||||
.customer-info p {
|
||||
color: #1a1a1a;
|
||||
/* margin-bottom: 4px; */
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
thead {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
th {
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
color: #666;
|
||||
padding: 12px 16px;
|
||||
text-align: left;
|
||||
/* border: 1px solid #e0e0e0; */
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 10px 10px;
|
||||
/* border: 1px solid #e0e0e0; */
|
||||
font-size: 13px;
|
||||
color: #1a1a1a;
|
||||
}
|
||||
|
||||
tr:nth-child(even) {
|
||||
background-color: #fafafa;
|
||||
}
|
||||
|
||||
.item-name {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.item-label {
|
||||
font-size: 11px;
|
||||
color: #999;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
/* margin-top: 2px; */
|
||||
}
|
||||
|
||||
.qty {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.price {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.totals-section {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.totals-box {
|
||||
margin-left: auto;
|
||||
width: 350px;
|
||||
}
|
||||
|
||||
.total-row {
|
||||
display: flex;
|
||||
padding: 12px 16px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.total-row strong {
|
||||
color: #1a1a1a;
|
||||
}
|
||||
|
||||
.total-row span {
|
||||
color: #666;
|
||||
text-align: right;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.total-row.subtotal strong {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.total-row.shipping strong {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.total-row.grand-total {
|
||||
/* background-color: #f5f5f5; */
|
||||
/* border: 1px solid #e0e0e0; */
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
padding: 12px 16px;
|
||||
|
||||
}
|
||||
|
||||
.total-row.grand-total strong {
|
||||
color: #1a1a1a;
|
||||
font-family: 'AbrilFatface', Georgia, serif;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.total-row.grand-total span {
|
||||
color: #1a1a1a;
|
||||
font-size: 16px;
|
||||
|
||||
}
|
||||
|
||||
.footer-section {
|
||||
margin-top: 60px;
|
||||
padding-top: 30px;
|
||||
border-top: 1px solid #e0e0e0;
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.thank-you {
|
||||
color: #666;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.page-break {
|
||||
page-break-after: always;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="invoice-container">
|
||||
<!-- Header -->
|
||||
<div class="invoice-header">
|
||||
<div class="company-info">
|
||||
|
||||
<h1>INVOICE</h1>
|
||||
<div class="company-details">
|
||||
<h2>ADDITIONAL DESIGN</h2>
|
||||
<p>registered trading name of</p>
|
||||
<p>TWO TALES & CO. (PTY) LTD</p>
|
||||
<p>REG: 2014/260746/07</p>
|
||||
<p>VAT: NA</p>
|
||||
<p>info@additional.co.za</p>
|
||||
<p>additional.co.za</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="invoice-details">
|
||||
<h3>#<?php echo e($order->order_number); ?></h3>
|
||||
<div class="detail-row">
|
||||
<strong>Date:</strong>
|
||||
<span><?php echo e($order->created_at->format('d M Y')); ?></span>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<strong>Invoice Date:</strong>
|
||||
<span><?php echo e(now()->format('d M Y')); ?></span>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<strong>Order Status:</strong>
|
||||
<span style="text-transform: capitalize;"><?php echo e($order->status); ?></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Customer Info -->
|
||||
<div class="customer-info">
|
||||
<div>
|
||||
<h3>Bill To</h3>
|
||||
<p><?php echo e($order->customer_name); ?></p>
|
||||
<p><?php echo e($order->customer_email); ?></p>
|
||||
<p><?php echo e($order->customer_phone); ?></p>
|
||||
</div>
|
||||
<div>
|
||||
<h3>Ship To</h3>
|
||||
<p><?php echo e($order->shipping_address); ?></p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Items Table -->
|
||||
<div class="section-title">Order Items</div>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Description</th>
|
||||
<th class="qty">Quantity</th>
|
||||
<th class="price">Unit Price</th>
|
||||
<th class="price">Total</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php $__currentLoopData = $order->items; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $item): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="item-name"><?php echo e($item->product->name); ?></div>
|
||||
<?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if($item->type === 'wallpaper' && $item->length): ?>
|
||||
<div class="item-label"><?php echo e($item->length); ?>m length</div>
|
||||
<?php elseif($item->type === 'mural' && $item->width && $item->height): ?>
|
||||
<div class="item-label"><?php echo e($item->width); ?>m × <?php echo e($item->height); ?>m (<?php echo e($item->width * $item->height); ?>m²)</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($item->is_sample): ?>
|
||||
<div class="item-label">Sample</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($item->specification): ?>
|
||||
<div class="item-label">Specification: <?php echo e($item->specification); ?></div>
|
||||
<?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
|
||||
</td>
|
||||
<td class="qty"><?php echo e($item->quantity); ?></td>
|
||||
<td class="price">R <?php echo e(number_format($item->price, 2)); ?></td>
|
||||
<td class="price">R <?php echo e(number_format($item->quantity * $item->price, 2)); ?></td>
|
||||
</tr>
|
||||
<?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<!-- Totals -->
|
||||
<div class="totals-section" style="text-align: right;">
|
||||
<div class="totals-box">
|
||||
<div class="total-row subtotal">
|
||||
<strong>Subtotal</strong>
|
||||
<span>R <?php echo e(number_format($order->items->sum(fn($item) => $item->quantity * $item->price), 2)); ?></span>
|
||||
</div>
|
||||
<?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if($order->shipping_fee): ?>
|
||||
<div class="total-row shipping">
|
||||
<strong>Shipping</strong>
|
||||
<span>R <?php echo e(number_format($order->shipping_fee, 2)); ?></span>
|
||||
</div>
|
||||
<?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
|
||||
<div class="total-row grand-total">
|
||||
<strong>Total</strong>
|
||||
<span>R <?php echo e(number_format($order->total, 2)); ?></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div style="text-align: center;">
|
||||
<strong>PAID VIA YOCO</strong>
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<div class="footer-section">
|
||||
<div class="thank-you">
|
||||
<p>ADDITIONAL DESIGN is a registered trading name of TWO TALES & CO. (PTY) LTD</p>
|
||||
</div>
|
||||
<!-- <p>This is an automatically generated invoice. No signature is required.</p> -->
|
||||
<!-- <p style="margin-top: 10px; color: #ccc;">Generated on <?php echo e(now()->format('d M Y H:i')); ?></p> -->
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html><?php /**PATH /var/www/additional_design/resources/views/invoices/order-invoice.blade.php ENDPATH**/ ?>
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,463 @@
|
||||
<?php $__env->startSection('styles'); ?>
|
||||
<style>
|
||||
.hero-slider {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-radius: 20px;
|
||||
margin: 20px;
|
||||
height: 600px;
|
||||
}
|
||||
|
||||
.hero-slide {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0;
|
||||
transition: opacity 0.8s ease-in-out;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.hero-slide.active {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.hero-slide-content {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 3rem;
|
||||
align-items: center;
|
||||
padding: 6rem 5rem;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.hero-dots {
|
||||
position: absolute;
|
||||
bottom: 30px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.hero-dot {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
border: 2px solid white;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.hero-dot.active {
|
||||
background: white;
|
||||
transform: scale(1.2);
|
||||
}
|
||||
</style>
|
||||
<?php $__env->stopSection(); ?>
|
||||
|
||||
<?php $__env->startSection('content'); ?>
|
||||
|
||||
<!-- ===== 3. HERO SECTION ===== -->
|
||||
<section class="section" id="hero">
|
||||
<div class="hero-slider">
|
||||
<?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php $__empty_1 = true; $__currentLoopData = $heroImages; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $index => $image): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
|
||||
<div class="hero-slide <?php if($index === 0): ?> active <?php endif; ?>" style="background-image: url('<?php echo e(asset('storage/' . $image->image_path)); ?>');">
|
||||
<div class="hero-slide-content">
|
||||
<div>
|
||||
<div class="hero-content">
|
||||
<h1 style="color: white; font-size: 3rem;"><?php echo e($image->title); ?></h1>
|
||||
<?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if($image->description): ?>
|
||||
<p style="color: rgba(255, 255, 255, 0.9); font-size: 1.1rem; max-width: 95%;"><?php echo e($image->description); ?></p>
|
||||
<?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
|
||||
<div class="hero-cta">
|
||||
<?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if($image->button_text && $image->button_link): ?>
|
||||
<?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if(str_starts_with($image->button_link, '#')): ?>
|
||||
<button class="btn" onclick="document.getElementById('<?php echo e(substr($image->button_link, 1)); ?>').scrollIntoView({behavior: 'smooth'})"><?php echo e($image->button_text); ?></button>
|
||||
<?php else: ?>
|
||||
<a href="<?php echo e($image->button_link); ?>" class="btn"><?php echo e($image->button_text); ?></a>
|
||||
<?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
|
||||
<?php else: ?>
|
||||
<button class="btn" onclick="document.getElementById('wallpaper').scrollIntoView({behavior: 'smooth'})">Browse Wallpaper Ranges</button>
|
||||
<button class="btn btn--secondary" onclick="document.getElementById('consultation').scrollIntoView({behavior: 'smooth'})">Book a Free Consultation</button>
|
||||
<?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div></div>
|
||||
</div>
|
||||
</div>
|
||||
<?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
|
||||
<!-- Fallback hero images if none are configured in admin -->
|
||||
<div class="hero-slide active" style="background-image: url('https://images.unsplash.com/photo-1552321554-5fefe8c9ef14?w=1200&q=80');">
|
||||
<div class="hero-slide-content">
|
||||
<div>
|
||||
<div class="hero-content">
|
||||
<h1 style="color: white; font-size: 3rem;">Transform Your Spaces with Custom Wallpaper</h1>
|
||||
<p style="color: rgba(255, 255, 255, 0.9); font-size: 1.1rem; max-width: 95%;">Discover our curated collections of premium wallpapers and custom-printed fabrics, designed to elevate your interior aesthetic.</p>
|
||||
<div class="hero-cta">
|
||||
<button class="btn" onclick="document.getElementById('wallpaper').scrollIntoView({behavior: 'smooth'})">Browse Wallpaper Ranges</button>
|
||||
<button class="btn btn--secondary" onclick="document.getElementById('consultation').scrollIntoView({behavior: 'smooth'})">Book a Free Consultation</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hero-slide" style="background-image: url('https://images.unsplash.com/photo-1631049307264-da0ec9d70304?w=1200&q=80');">
|
||||
<div class="hero-slide-content">
|
||||
<div>
|
||||
<div class="hero-content">
|
||||
<h1 style="color: white; font-size: 3rem;">Luxury Designs for Every Room</h1>
|
||||
<p style="color: rgba(255, 255, 255, 0.9); font-size: 1.1rem; max-width: 95%;">From botanical motifs to contemporary patterns, find the perfect wallpaper to match your style.</p>
|
||||
<div class="hero-cta">
|
||||
<button class="btn" onclick="document.getElementById('wallpaper').scrollIntoView({behavior: 'smooth'})">Explore Collections</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hero-slide" style="background-image: url('https://images.unsplash.com/photo-1568605114967-8130f3a36994?w=1200&q=80');">
|
||||
<div class="hero-slide-content">
|
||||
<div>
|
||||
<div class="hero-content">
|
||||
<h1 style="color: white; font-size: 3rem;">Custom Printed to Perfection</h1>
|
||||
<p style="color: rgba(255, 255, 255, 0.9); font-size: 1.1rem; max-width: 95%;">Every design is crafted with precision and printed to your exact specifications using eco-friendly materials.</p>
|
||||
<div class="hero-cta">
|
||||
<button class="btn" onclick="document.getElementById('sustainability').scrollIntoView({behavior: 'smooth'})">Learn About Our Process</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div></div>
|
||||
</div>
|
||||
</div>
|
||||
<?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
|
||||
|
||||
<div class="hero-dots">
|
||||
<?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php $__empty_1 = true; $__currentLoopData = $heroImages; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $index => $image): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
|
||||
<div class="hero-dot <?php if($index === 0): ?> active <?php endif; ?>" data-slide="<?php echo e($index); ?>"></div>
|
||||
<?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
|
||||
<div class="hero-dot active" data-slide="0"></div>
|
||||
<div class="hero-dot" data-slide="1"></div>
|
||||
<div class="hero-dot" data-slide="2"></div>
|
||||
<?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ===== 4. WALLPAPER RANGES ===== -->
|
||||
<section class="section section--light" id="wallpaper">
|
||||
<div class="container">
|
||||
<h2>Wallpaper Ranges</h2>
|
||||
<p>Explore our carefully curated collections, from botanical motifs to contemporary geometric patterns. Each range is designed to inspire and transform your interior spaces.</p>
|
||||
|
||||
<div class="grid grid--3">
|
||||
<?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php $__empty_1 = true; $__currentLoopData = $categories; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $category): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
|
||||
<div class="product-card">
|
||||
<div class="card-image" style="background-image: url('<?php echo e($category->image); ?>'); background-size: cover; background-position: center;"></div>
|
||||
<div class="card-content">
|
||||
<div class="card-title"><?php echo e($category->name); ?></div>
|
||||
<p class="card-description"><?php echo e($category->description); ?></p>
|
||||
</div>
|
||||
</div>
|
||||
<?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
|
||||
<p>No categories available</p>
|
||||
<?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ===== 5. LATEST WALLPAPERS ===== -->
|
||||
<section class="section" id="featured">
|
||||
<div class="container">
|
||||
<h2>Our Latest Wallpapers</h2>
|
||||
<p>Discover our newest arrivals, hand-selected for their design excellence and quality.</p>
|
||||
|
||||
<div class="grid grid--3">
|
||||
<?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php $__empty_1 = true; $__currentLoopData = $featuredWallpapers; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $product): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
|
||||
<?php echo $__env->make('components.product-card', ['product' => $product], array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?>
|
||||
<?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
|
||||
<p>No featured wallpapers available</p>
|
||||
<?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
|
||||
</div>
|
||||
|
||||
<div style="text-align: center; margin-top: var(--spacing-lg);">
|
||||
<a href="<?php echo e(route('wallpapers')); ?>" class="btn">View All Wallpapers</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ===== 5.5 FEATURED MURALS ===== -->
|
||||
<section class="section section--light" id="featured-murals">
|
||||
<div class="container">
|
||||
<h2>Featured Murals</h2>
|
||||
<p>Stunning accent wall murals to transform any room. Single image, non-repeating designs perfect for making a statement.</p>
|
||||
|
||||
<div class="grid grid--3">
|
||||
<?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php $__empty_1 = true; $__currentLoopData = $featuredMurals; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $product): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
|
||||
<?php echo $__env->make('components.product-card', ['product' => $product], array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?>
|
||||
<?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
|
||||
<p>No featured murals available</p>
|
||||
<?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
|
||||
</div>
|
||||
|
||||
<div style="text-align: center; margin-top: var(--spacing-lg);">
|
||||
<a href="<?php echo e(route('murals')); ?>" class="btn">View All Murals</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ===== 6. FREE CONSULTATION CTA ===== -->
|
||||
<section class="section section--highlight" id="consultation">
|
||||
<div class="container" style="text-align: center;">
|
||||
<h2>Free Online Wallpaper Consultation</h2>
|
||||
<p style="max-width: 600px; margin: 0 auto var(--spacing-lg);">
|
||||
Unsure which design to choose? Our design experts offer complimentary 15-minute virtual consultations to help you select the perfect wallpaper and discuss customization options for your unique space.
|
||||
</p>
|
||||
<button class="btn btn--secondary">Schedule a Consultation</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ===== 7. RECENT PROJECTS ===== -->
|
||||
<section class="section section--light" id="projects">
|
||||
<div class="container">
|
||||
<h2>Recent Projects</h2>
|
||||
<p>Our work spans luxury hotels, high-end residences, and commercial spaces. See how we transform environments with our custom wallpaper and fabric solutions.</p>
|
||||
|
||||
<div class="grid grid--3">
|
||||
<div class="product-card">
|
||||
<div class="card-image" style="background-image: url('https://images.unsplash.com/photo-1631049307264-da0ec9d70304?w=500&q=80'); background-size: cover; background-position: center;"></div>
|
||||
<div class="card-content">
|
||||
<div class="card-title">Luxury Resort Redesign</div>
|
||||
<p class="card-description">Custom botanical wallpapers throughout the main lobby and guest suites.</p>
|
||||
<a href="#" class="btn btn--text">View Project</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="product-card">
|
||||
<div class="card-image" style="background-image: url('https://images.unsplash.com/photo-1631049307264-da0ec9d70304?w=500&q=80'); background-size: cover; background-position: center;"></div>
|
||||
<div class="card-content">
|
||||
<div class="card-title">Modern Executive Office</div>
|
||||
<p class="card-description">Bespoke geometric wallpaper for corporate interiors with sustainable materials.</p>
|
||||
<a href="#" class="btn btn--text">View Project</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="product-card">
|
||||
<div class="card-image" style="background-image: url('https://images.unsplash.com/photo-1568605114967-8130f3a36994?w=500&q=80'); background-size: cover; background-position: center;"></div>
|
||||
<div class="card-content">
|
||||
<div class="card-title">Residential Penthouse</div>
|
||||
<p class="card-description">Custom-printed fabrics and vintage-inspired wallpapers for a luxury residence.</p>
|
||||
<a href="#" class="btn btn--text">View Project</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ===== 8. CERTIFIED GREEN / SUSTAINABILITY ===== -->
|
||||
<section class="section" id="sustainability">
|
||||
<div class="container">
|
||||
<div class="badge" style="border-radius: 20px;">
|
||||
<div class="badge-icon">♻️</div>
|
||||
<div class="badge-text">
|
||||
<h4>Certified Eco-Conscious</h4>
|
||||
<p>Our wallpapers and fabrics are printed using low-VOC inks and sustainable materials sourced responsibly.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card--pink">
|
||||
<h3 style="color: var(--accent-dark); margin-bottom: var(--spacing-md);">Sustainability Commitment</h3>
|
||||
<ul style="list-style: none; color: var(--text-secondary);">
|
||||
<li style="margin-bottom: 12px;"><strong>Low-VOC Inks:</strong> Non-toxic printing processes safe for your home and the environment.</li>
|
||||
<li style="margin-bottom: 12px;"><strong>Local Production:</strong> Manufactured locally to reduce carbon footprint and ensure quality.</li>
|
||||
<li style="margin-bottom: 12px;"><strong>Sustainable Materials:</strong> Sourced from certified sustainable suppliers with ethical practices.</li>
|
||||
<li style="margin-bottom: 12px;"><strong>Recyclable Packaging:</strong> All packaging materials are fully recyclable or compostable.</li>
|
||||
</ul>
|
||||
<a href="#" class="btn btn--text" style="margin-top: var(--spacing-md);">Learn More About Our Practices</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ===== 9. CUSTOM FABRICS ===== -->
|
||||
<section class="section section--light" id="fabrics">
|
||||
<div class="container">
|
||||
<h2>Custom Printed Fabrics</h2>
|
||||
<div class="two-col">
|
||||
<div class="two-col-text">
|
||||
<h3>Extend Your Design to Soft Furnishings</h3>
|
||||
<p>Love a wallpaper design? We can print it onto premium fabrics for upholstery, curtains, cushions, and more. Create a cohesive interior where your wallpaper designs flow seamlessly across all textiles.</p>
|
||||
<ul style="list-style: none; color: var(--text-secondary);">
|
||||
<li style="margin-bottom: 8px;">✓ Custom upholstery and furniture fabric</li>
|
||||
<li style="margin-bottom: 8px;">✓ Bespoke curtain and drape materials</li>
|
||||
<li style="margin-bottom: 8px;">✓ Decorative cushion and throw pillow fabric</li>
|
||||
<li style="margin-bottom: 8px;">✓ Bedding and linens custom printing</li>
|
||||
</ul>
|
||||
<button class="btn" style="margin-top: var(--spacing-lg);">Browse Fabrics</button>
|
||||
</div>
|
||||
<div class="two-col-image">
|
||||
<img src="https://images.unsplash.com/photo-1578500494198-246f612d03b3?w=500&q=80" alt="Fabric Sample" style="width: 100%; height: auto; border-radius: 8px; object-fit: cover;">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ===== 10. DECOR SHOP TEASER =====
|
||||
<section class="section" id="shop">
|
||||
<div class="container">
|
||||
<h2>Decor Shop</h2>
|
||||
<p>Discover curated home décor pieces that complement our wallpaper and fabric collections. From wall hangings to tableware.</p>
|
||||
|
||||
<div class="grid grid--3">
|
||||
<div class="card">
|
||||
<div class="card-image" style="background-image: url('https://images.unsplash.com/photo-1578926314433-8e18d4f89b16?w=400&q=80'); background-size: cover; background-position: center;"></div>
|
||||
<div class="card-content">
|
||||
<div class="card-title">Artisan Wall Hangings</div>
|
||||
<p class="card-description">Hand-crafted textile wall art pieces.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-image" style="background-image: url('https://images.unsplash.com/photo-1578500494198-246f612d03b3?w=400&q=80'); background-size: cover; background-position: center;"></div>
|
||||
<div class="card-content">
|
||||
<div class="card-title">Designer Tableware</div>
|
||||
<p class="card-description">Coordinated dinnerware sets with exclusive designs.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-image" style="background-image: url('https://images.unsplash.com/photo-1606389506042-4bc31f98b485?w=400&q=80'); background-size: cover; background-position: center;"></div>
|
||||
<div class="card-content">
|
||||
<div class="card-title">Decorative Accents</div>
|
||||
<p class="card-description">Curated home accessories to complete your space.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="text-align: center; margin-top: var(--spacing-lg);">
|
||||
<button class="btn btn--secondary">Visit Decor Shop</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ===== 11. PORTFOLIO GALLERY ===== -->
|
||||
<!-- <section class="section section--light" id="portfolio">
|
||||
<div class="container">
|
||||
<h2>View Our Portfolio</h2>
|
||||
<p>Explore our diverse portfolio showcasing wallpaper and fabric applications across different room types and design styles.</p>
|
||||
|
||||
<div class="portfolio-grid">
|
||||
<div class="portfolio-item" style="background-image: url('https://images.unsplash.com/photo-1540932239986-310128078e37?w=600&q=80'); background-size: cover; background-position: center;">
|
||||
<div class="portfolio-item-caption">Master Bedroom</div>
|
||||
</div>
|
||||
<div class="portfolio-item" style="background-image: url('https://images.unsplash.com/photo-1522708323590-d24dbb6b0267?w=600&q=80'); background-size: cover; background-position: center;">
|
||||
<div class="portfolio-item-caption">Living Room</div>
|
||||
</div>
|
||||
<div class="portfolio-item" style="background-image: url('https://images.unsplash.com/photo-1556909114-f6e7ad7d3136?w=600&q=80'); background-size: cover; background-position: center;">
|
||||
<div class="portfolio-item-caption">Kitchen Nook</div>
|
||||
</div>
|
||||
<div class="portfolio-item" style="background-image: url('https://images.unsplash.com/photo-1593642632823-8f785ba67e45?w=600&q=80'); background-size: cover; background-position: center;">
|
||||
<div class="portfolio-item-caption">Home Office</div>
|
||||
</div>
|
||||
<div class="portfolio-item" style="background-image: url('https://images.unsplash.com/photo-1552321554-5fefe8c9ef14?w=600&q=80'); background-size: cover; background-position: center;">
|
||||
<div class="portfolio-item-caption">Bathroom Spa</div>
|
||||
</div>
|
||||
<div class="portfolio-item" style="background-image: url('https://images.unsplash.com/photo-1566073771259-6a8506099945?w=600&q=80'); background-size: cover; background-position: center;">
|
||||
<div class="portfolio-item-caption">Dining Space</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="text-align: center; margin-top: var(--spacing-lg);">
|
||||
<button class="btn">View Full Portfolio</button>
|
||||
</div>
|
||||
</div>
|
||||
</section> -->
|
||||
|
||||
<!-- ===== 12. OUR CLIENTS ===== -->
|
||||
<!-- <section class="section" id="clients">
|
||||
<div class="container">
|
||||
<h2>Brands We've Worked With</h2>
|
||||
|
||||
<div class="logo-strip">
|
||||
<div class="logo-item">Luxury Hotels Co.</div>
|
||||
<div class="logo-item">Interior Design Studio</div>
|
||||
<div class="logo-item">Modern Architects Ltd.</div>
|
||||
<div class="logo-item">Home & Living Mag</div>
|
||||
<div class="logo-item">Premium Resorts Group</div>
|
||||
<div class="logo-item">Urban Development</div>
|
||||
</div>
|
||||
</div>
|
||||
</section> -->
|
||||
|
||||
<!-- ===== 13. CONTACT CTA ===== -->
|
||||
<section class="section section--highlight" id="contact">
|
||||
<div class="container" style="text-align: center;">
|
||||
<h2>Ready to Start Your Project?</h2>
|
||||
<p style="max-width: 600px; margin: 0 auto var(--spacing-lg); color: var(--text-primary);">
|
||||
We'd love to hear about your vision. Send us your room measurements, mood boards, and any design inspirations, and our team will provide a personalized quote and design recommendations.
|
||||
</p>
|
||||
<button class="btn">Contact Us</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<?php $__env->stopSection(); ?>
|
||||
|
||||
<?php $__env->startSection('scripts'); ?>
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const slides = document.querySelectorAll('.hero-slide');
|
||||
const dots = document.querySelectorAll('.hero-dot');
|
||||
let currentSlide = 0;
|
||||
let slideInterval;
|
||||
|
||||
function showSlide(index) {
|
||||
slides.forEach(slide => slide.classList.remove('active'));
|
||||
dots.forEach(dot => dot.classList.remove('active'));
|
||||
|
||||
slides[index].classList.add('active');
|
||||
dots[index].classList.add('active');
|
||||
currentSlide = index;
|
||||
}
|
||||
|
||||
function nextSlide() {
|
||||
let next = (currentSlide + 1) % slides.length;
|
||||
showSlide(next);
|
||||
}
|
||||
|
||||
function startAutoSlide() {
|
||||
slideInterval = setInterval(nextSlide, 10000);
|
||||
}
|
||||
|
||||
function stopAutoSlide() {
|
||||
clearInterval(slideInterval);
|
||||
}
|
||||
|
||||
// Dot click handlers
|
||||
dots.forEach(dot => {
|
||||
dot.addEventListener('click', function() {
|
||||
stopAutoSlide();
|
||||
showSlide(parseInt(this.dataset.slide));
|
||||
startAutoSlide();
|
||||
});
|
||||
});
|
||||
|
||||
// Start automatic sliding
|
||||
startAutoSlide();
|
||||
|
||||
// Pause on hover
|
||||
const slider = document.querySelector('.hero-slider');
|
||||
slider.addEventListener('mouseenter', stopAutoSlide);
|
||||
slider.addEventListener('mouseleave', startAutoSlide);
|
||||
});
|
||||
</script>
|
||||
<?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/home.blade.php ENDPATH**/ ?>
|
||||
@@ -0,0 +1,278 @@
|
||||
<?php $__env->startSection('title', 'Murals - Premium Custom Designs'); ?>
|
||||
|
||||
<?php $__env->startSection('styles'); ?>
|
||||
<style>
|
||||
.hero-slider {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-radius: 20px;
|
||||
margin: 20px;
|
||||
height: 600px;
|
||||
}
|
||||
|
||||
.hero-slide {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0;
|
||||
transition: opacity 0.8s ease-in-out;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.hero-slide.active {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.hero-slide-content {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 3rem;
|
||||
align-items: center;
|
||||
padding: 6rem 5rem;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.hero-dots {
|
||||
position: absolute;
|
||||
bottom: 30px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.hero-dot {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.hero-dot.active {
|
||||
background: white;
|
||||
width: 32px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.hero-cta {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.hero-slider:hover .hero-dot {
|
||||
background: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
.hero-slider:hover .hero-dot.active {
|
||||
background: white;
|
||||
}
|
||||
</style>
|
||||
<?php $__env->stopSection(); ?>
|
||||
|
||||
<?php $__env->startSection('content'); ?>
|
||||
<!-- HERO SECTION -->
|
||||
<section class="section" id="hero">
|
||||
<div class="hero-slider">
|
||||
<?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php $__empty_1 = true; $__currentLoopData = $heroImages; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $index => $image): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
|
||||
<div class="hero-slide <?php if($index === 0): ?> active <?php endif; ?>" style="background-image: url('<?php echo e(asset('storage/' . $image->image_path)); ?>');">
|
||||
<div class="hero-slide-content">
|
||||
<div>
|
||||
<div class="hero-content">
|
||||
<h1 style="color: white; font-size: 3rem;"><?php echo e($image->title); ?></h1>
|
||||
<?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if($image->description): ?>
|
||||
<p style="color: rgba(255, 255, 255, 0.9); font-size: 1.1rem; max-width: 95%;"><?php echo e($image->description); ?></p>
|
||||
<?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
|
||||
<div class="hero-cta">
|
||||
<?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if($image->button_text && $image->button_link): ?>
|
||||
<?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if(str_starts_with($image->button_link, '#')): ?>
|
||||
<button class="btn" onclick="document.getElementById('<?php echo e(substr($image->button_link, 1)); ?>').scrollIntoView({behavior: 'smooth'})"><?php echo e($image->button_text); ?></button>
|
||||
<?php else: ?>
|
||||
<a href="<?php echo e($image->button_link); ?>" class="btn"><?php echo e($image->button_text); ?></a>
|
||||
<?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
|
||||
<?php else: ?>
|
||||
<button class="btn" onclick="document.getElementById('mural-filters').scrollIntoView({behavior: 'smooth'})">Browse Murals</button>
|
||||
<?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div></div>
|
||||
</div>
|
||||
</div>
|
||||
<?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
|
||||
<!-- Fallback hero image if none are configured in admin -->
|
||||
<div class="hero-slide active" style="background: linear-gradient(to right, rgba(45, 80, 71, 0.7), rgba(45, 80, 71, 0.5)), url('https://images.unsplash.com/photo-1568605114967-8130f3a36994?w=1200&q=80') center/cover no-repeat;">
|
||||
<div class="hero-slide-content">
|
||||
<div>
|
||||
<div class="hero-content">
|
||||
<h1 style="color: white; font-size: 3rem;">Stunning Custom Murals</h1>
|
||||
<p style="color: rgba(255, 255, 255, 0.95); font-size: 1.1rem;">Make a statement with our collection of bold, eye-catching murals. Single-image designs perfect for accent walls in any room. Each mural is custom-printed to your exact dimensions.</p>
|
||||
<div class="hero-cta">
|
||||
<button class="btn" onclick="document.getElementById('mural-filters').scrollIntoView({behavior: 'smooth'})">Browse Murals</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div></div>
|
||||
</div>
|
||||
</div>
|
||||
<?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
|
||||
|
||||
<div class="hero-dots">
|
||||
<?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php $__empty_1 = true; $__currentLoopData = $heroImages; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $index => $image): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
|
||||
<div class="hero-dot <?php if($index === 0): ?> active <?php endif; ?>" data-slide="<?php echo e($index); ?>"></div>
|
||||
<?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
|
||||
<div class="hero-dot active" data-slide="0"></div>
|
||||
<?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const slides = document.querySelectorAll('.hero-slide');
|
||||
const dots = document.querySelectorAll('.hero-dot');
|
||||
const slider = document.querySelector('.hero-slider');
|
||||
let currentSlide = 0;
|
||||
let autoAdvanceInterval;
|
||||
|
||||
function showSlide(n) {
|
||||
if (slides.length === 0) return;
|
||||
slides.forEach(s => s.classList.remove('active'));
|
||||
dots.forEach(d => d.classList.remove('active'));
|
||||
currentSlide = (n + slides.length) % slides.length;
|
||||
slides[currentSlide].classList.add('active');
|
||||
dots[currentSlide].classList.add('active');
|
||||
}
|
||||
|
||||
function startAutoAdvance() {
|
||||
autoAdvanceInterval = setInterval(() => {
|
||||
showSlide(currentSlide + 1);
|
||||
}, 5000);
|
||||
}
|
||||
|
||||
function resetAutoAdvance() {
|
||||
clearInterval(autoAdvanceInterval);
|
||||
startAutoAdvance();
|
||||
}
|
||||
|
||||
dots.forEach(dot => {
|
||||
dot.addEventListener('click', () => {
|
||||
showSlide(parseInt(dot.getAttribute('data-slide')));
|
||||
resetAutoAdvance();
|
||||
});
|
||||
});
|
||||
|
||||
slider.addEventListener('mouseenter', () => clearInterval(autoAdvanceInterval));
|
||||
slider.addEventListener('mouseleave', startAutoAdvance);
|
||||
|
||||
startAutoAdvance();
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- FILTERS & SORTING -->
|
||||
<section class="section" id="mural-filters" style="padding: 2rem 0;">
|
||||
<div class="container">
|
||||
<div style="display: flex; gap: 2rem; justify-content: space-between; align-items: center; flex-wrap: wrap; margin-bottom: 2rem;">
|
||||
<div>
|
||||
<h3>All Murals</h3>
|
||||
<p style="color: var(--text-secondary);">Showing all designs</p>
|
||||
</div>
|
||||
<div style="display: flex; gap: 1rem;">
|
||||
<select style="padding: 8px 12px; border: 1px solid var(--border-color); border-radius: 4px; font-size: 0.9rem;">
|
||||
<option>Sort by: Featured</option>
|
||||
<option>Newest</option>
|
||||
<option>Price: Low to High</option>
|
||||
<option>Price: High to Low</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 2rem;">
|
||||
<button class="filter-btn active" data-filter="all">All</button>
|
||||
<button class="filter-btn" data-filter="landscape">Landscape</button>
|
||||
<button class="filter-btn" data-filter="abstract">Abstract</button>
|
||||
<button class="filter-btn" data-filter="urban">Urban</button>
|
||||
<button class="filter-btn" data-filter="nature">Nature</button>
|
||||
<button class="filter-btn" data-filter="artistic">Artistic</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- MURAL GRID -->
|
||||
<section class="section" id="mural-grid" style="padding: 2rem 0;">
|
||||
<div class="container">
|
||||
<div class="grid grid--3">
|
||||
<?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php $__empty_1 = true; $__currentLoopData = $products; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $product): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
|
||||
<?php echo $__env->make('components.product-card', ['product' => $product], array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?>
|
||||
<?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
|
||||
<p>No murals available yet</p>
|
||||
<?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- MURAL INFO SECTION -->
|
||||
<section class="section section--light">
|
||||
<div class="container">
|
||||
<h2>About Our Murals</h2>
|
||||
<div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; margin-top: 2rem;">
|
||||
<div class="card">
|
||||
<h4 style="color: var(--primary-color); margin-bottom: 1rem;">Custom Dimensions</h4>
|
||||
<p>Order murals in any size. Simply provide your width and height measurements, and we'll print to exact specifications.</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h4 style="color: var(--primary-color); margin-bottom: 1rem;">Non-Repeating Design</h4>
|
||||
<p>Unlike wallpapers, murals are single cohesive images perfect for accent walls. One stunning focal point for your space.</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h4 style="color: var(--primary-color); margin-bottom: 1rem;">Premium Quality</h4>
|
||||
<p>High-resolution printing with vibrant colors and excellent durability. Professional installation guides included.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CTA SECTION -->
|
||||
<section class="section section--highlight">
|
||||
<div class="container" style="text-align: center;">
|
||||
<h2>Transform Your Space</h2>
|
||||
<p style="max-width: 600px; margin: 0 auto var(--spacing-lg); color: var(--text-primary);">
|
||||
Can't find the perfect mural? Our design experts can help you create a custom mural from your own image or concept.
|
||||
</p>
|
||||
<button class="btn btn--secondary">Request a Custom Mural</button>
|
||||
</div>
|
||||
</section>
|
||||
<?php $__env->stopSection(); ?>
|
||||
|
||||
<?php $__env->startSection('scripts'); ?>
|
||||
<script>
|
||||
document.querySelectorAll('.filter-btn').forEach(btn => {
|
||||
btn.addEventListener('click', function() {
|
||||
const filter = this.dataset.filter;
|
||||
document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active'));
|
||||
this.classList.add('active');
|
||||
|
||||
document.querySelectorAll('[data-category]').forEach(card => {
|
||||
if (filter === 'all' || card.dataset.category === filter) {
|
||||
card.style.display = '';
|
||||
} else {
|
||||
card.style.display = 'none';
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<?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/murals.blade.php ENDPATH**/ ?>
|
||||
@@ -0,0 +1,19 @@
|
||||
<a href="<?php echo e(route('product-detail', $product)); ?>" style="text-decoration: none; color: inherit;">
|
||||
<div class="product-card" data-category="<?php echo e($product->category->slug); ?>">
|
||||
<?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if($product->images->count() > 0): ?>
|
||||
<img src="<?php echo e(asset('storage/' . $product->images->first()->image_path)); ?>" alt="<?php echo e($product->name); ?>" class="card-image" style="background-size: cover; background-position: center;">
|
||||
<?php else: ?>
|
||||
<img src="<?php echo e($product->image); ?>" alt="<?php echo e($product->name); ?>" class="card-image" style="background-size: cover; background-position: center;">
|
||||
<?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
|
||||
<div class="card-content">
|
||||
<div class="card-title"><?php echo e($product->name); ?></div>
|
||||
<span class="card-tag"><?php echo e($product->category->name); ?></span>
|
||||
<p class="card-description"><?php echo e(substr($product->description, 0, 80)); ?>...</p>
|
||||
<div style="display: flex; justify-content: space-between; align-items: center; margin-top: 1rem;">
|
||||
<!-- <span style="font-family: var(--font-serif); font-weight: 600; font-size: 1.2rem;">R<?php echo e(number_format($product->price, 2)); ?></span> -->
|
||||
<button class="btn btn--sm" style="pointer-events: none;">View Details</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<?php /**PATH /var/www/additional_design/resources/views/components/product-card.blade.php ENDPATH**/ ?>
|
||||
@@ -0,0 +1,757 @@
|
||||
<?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**/ ?>
|
||||
@@ -0,0 +1,5 @@
|
||||
<?php $__env->startSection('title', __('Forbidden')); ?>
|
||||
<?php $__env->startSection('code', '403'); ?>
|
||||
<?php $__env->startSection('message', __($exception->getMessage() ?: 'Forbidden')); ?>
|
||||
|
||||
<?php echo $__env->make('errors::minimal', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH /var/www/additional_design/vendor/laravel/framework/src/Illuminate/Foundation/Exceptions/views/403.blade.php ENDPATH**/ ?>
|
||||
@@ -0,0 +1,45 @@
|
||||
<footer>
|
||||
<div class="container">
|
||||
<div class="footer-content">
|
||||
<div class="footer-column">
|
||||
<h4>Contact</h4>
|
||||
<p>Email: info@additional.co.za</p>
|
||||
<p>Phone: +27 081 702 7873</p>
|
||||
<p>Address: 360 Furrow Rd, Pretoria, South Africa</p>
|
||||
</div>
|
||||
|
||||
<div class="footer-column">
|
||||
<h4>Quick Links</h4>
|
||||
<a href="/">Home</a>
|
||||
<a href="/wallpapers">Wallpapers</a>
|
||||
<a href="/fabrics">Fabrics</a>
|
||||
<a href="/#portfolio">Portfolio</a>
|
||||
<a href="<?php echo e(route('track-order-form')); ?>">Track Order</a>
|
||||
<a href="#">About Us</a>
|
||||
<a href="#">Terms & Conditions</a>
|
||||
<a href="#">Privacy Policy</a>
|
||||
</div>
|
||||
|
||||
<div class="footer-column">
|
||||
<h4>Follow Us</h4>
|
||||
<a href="#" target="_blank">Facebook</a>
|
||||
<a href="#" target="_blank">Instagram</a>
|
||||
<a href="#" target="_blank">Pinterest</a>
|
||||
</div>
|
||||
|
||||
<div class="footer-column">
|
||||
<h4>Newsletter</h4>
|
||||
<p>Subscribe to stay updated on new collections and exclusive offers.</p>
|
||||
<form style="display: flex; gap: 8px; margin-top: var(--spacing-sm);">
|
||||
<input type="email" placeholder="Your email" style="border-radius: 20px; padding: 8px 12px; border: 1px solid rgba(255,255,255,0.2); background-color: rgba(255,255,255,0.1); color: white; font-size: 0.9rem;">
|
||||
<button type="submit" class="btn btn--secondary" style="padding: 8px 16px;">Subscribe</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer-bottom">
|
||||
<p>© <?= date('Y'); ?> Additional Design is a registered trading name of TWO TALES & CO. (PTY) LTD. All rights reserved. Site design and development by TTDEV.</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
<?php /**PATH /var/www/additional_design/resources/views/components/footer.blade.php ENDPATH**/ ?>
|
||||
@@ -0,0 +1,297 @@
|
||||
<?php $__env->startSection('title', 'Order Details - ' . $order->order_number); ?>
|
||||
|
||||
<?php $__env->startSection('styles'); ?>
|
||||
<style>
|
||||
.success-container {
|
||||
text-align: center;
|
||||
margin: 3rem 0;
|
||||
}
|
||||
|
||||
.success-icon {
|
||||
font-size: 4rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-family: 'Abril Fatface', cursive;
|
||||
font-size: 2.5rem;
|
||||
color: var(--primary-color);
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
color: #666;
|
||||
font-size: 1.1rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.order-details {
|
||||
margin: 2rem 0;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.detail-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 1rem 0;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
.detail-row:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.detail-label {
|
||||
font-weight: 600;
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.detail-value {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.order-items {
|
||||
margin: 2rem 0;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.order-items-inner {
|
||||
padding: 2rem;
|
||||
border-radius: 20px;
|
||||
margin: 2rem 0;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.order-items h2 {
|
||||
font-family: 'Abril Fatface', cursive;
|
||||
font-size: 1.3rem;
|
||||
color: var(--primary-color);
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.item-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 1rem 0;
|
||||
border-bottom: 1px solid #e0e0e0;
|
||||
}
|
||||
|
||||
.item-row:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.item-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.item-name {
|
||||
font-weight: 600;
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.item-qty {
|
||||
font-size: 0.9rem;
|
||||
color: #666;
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
.item-price {
|
||||
font-weight: 600;
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.total-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding-top: 1.5rem;
|
||||
margin-top: 1rem;
|
||||
border-top: 2px solid var(--primary-color);
|
||||
font-weight: 600;
|
||||
font-size: 1.2rem;
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.summary-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 1rem 0;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
.summary-row.total {
|
||||
border-bottom: none;
|
||||
font-weight: 600;
|
||||
font-size: 1.1rem;
|
||||
padding-top: 1.5rem;
|
||||
margin-top: 1rem;
|
||||
border-top: 2px solid var(--primary-color);
|
||||
}
|
||||
|
||||
.actions {
|
||||
margin-top: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.next-steps-title {
|
||||
font-family: 'Abril Fatface', cursive;
|
||||
font-size: 1.3rem;
|
||||
color: var(--primary-color);
|
||||
margin-bottom: 1.5rem;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.back-link {
|
||||
display: block;
|
||||
text-align: center;
|
||||
margin-top: 1.5rem;
|
||||
color: var(--primary-color);
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.back-link:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
</style>
|
||||
<?php $__env->stopSection(); ?>
|
||||
|
||||
<?php $__env->startSection('content'); ?>
|
||||
<main class="container">
|
||||
<div class="success-container">
|
||||
<div class="success-icon">📦</div>
|
||||
<h1>Order Details</h1>
|
||||
<p class="subtitle">Order #<?php echo e($order->order_number); ?></p>
|
||||
|
||||
<!-- Order Details -->
|
||||
<div class="order-details card">
|
||||
<div>
|
||||
<div class="detail-row">
|
||||
<span class="detail-label">Order Date:</span>
|
||||
<span class="detail-value"><?php echo e($order->created_at->format('M d, Y')); ?></span>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<span class="detail-label">Status:</span>
|
||||
<span class="detail-value" style="text-transform: capitalize;"><?php echo e($order->status); ?></span>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<span class="detail-label">Customer Name:</span>
|
||||
<span class="detail-value"><?php echo e($order->customer_name); ?></span>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<span class="detail-label">Email:</span>
|
||||
<span class="detail-value"><?php echo e($order->customer_email); ?></span>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<span class="detail-label">Phone:</span>
|
||||
<span class="detail-value"><?php echo e($order->customer_phone); ?></span>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<span class="detail-label">Shipping Address:</span>
|
||||
<span class="detail-value"><?php echo e($order->shipping_address); ?></span>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<span class="detail-label">Payment Status:</span>
|
||||
<span class="detail-value" style="text-transform: capitalize;"><?php echo e($order->payment_status); ?></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Order Items -->
|
||||
<div class="order-items card">
|
||||
<div >
|
||||
<h2>Order Items</h2>
|
||||
<?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php $__currentLoopData = $order->items; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $item): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
|
||||
<div class="item-row">
|
||||
<div class="item-info">
|
||||
<div class="item-name"><?php echo e($item->product->name); ?><?php echo e($item->is_sample ? ' - Sample' : ''); ?></div>
|
||||
<div class="item-qty">
|
||||
<?php
|
||||
$stock = $item->printStock;
|
||||
$stockText = $stock ? "{$stock->name}" : "Standard";
|
||||
$stockCost = 0;
|
||||
|
||||
if (!$item->is_sample && $stock) {
|
||||
$stockCost = $item->type === 'wallpaper' ? $stock->cost_per_meter : $stock->cost_per_m2;
|
||||
}
|
||||
?>
|
||||
|
||||
<?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if($item->is_sample): ?>
|
||||
Sample - Fixed Price: R<?php echo e(number_format(\App\Services\ShippingService::getSampleCost(), 2)); ?>
|
||||
|
||||
<?php elseif($item->type === 'wallpaper'): ?>
|
||||
Length: <?php echo e($item->length); ?>m | Finish: <?php echo e($stockText); ?><br>
|
||||
<small>Stock Cost: R<?php echo e(number_format($stockCost, 2)); ?>/m</small>
|
||||
<?php elseif($item->type === 'mural'): ?>
|
||||
Dimensions: <?php echo e($item->width); ?>m × <?php echo e($item->height); ?>m (<?php echo e(number_format($item->width * $item->height, 2)); ?>m²) | Finish: <?php echo e($stockText); ?><br>
|
||||
<small>Stock Cost: R<?php echo e(number_format($stockCost, 2)); ?>/m²</small>
|
||||
<?php else: ?>
|
||||
<small>Price: R<?php echo e(number_format($stockCost, 2)); ?> per unit</small>
|
||||
<?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-price">
|
||||
R<?php echo e(number_format(
|
||||
$item->is_sample
|
||||
? \App\Services\ShippingService::getSampleCost() * $item->quantity
|
||||
: $item->quantity * (
|
||||
$item->type === 'wallpaper'
|
||||
? $stockCost * $item->length
|
||||
: ($item->type === 'mural'
|
||||
? $stockCost * $item->width * $item->height
|
||||
: $stockCost
|
||||
)
|
||||
),
|
||||
2
|
||||
)); ?>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
|
||||
</div>
|
||||
<div class="summary-row">
|
||||
<span>Subtotal:</span>
|
||||
<span>R<?php echo e(number_format($order->total, 2)); ?></span>
|
||||
</div>
|
||||
<?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if($order->shipping_fee): ?>
|
||||
<div class="summary-row">
|
||||
<span>Shipping:</span>
|
||||
<span>R<?php echo e(number_format($order->shipping_fee, 2)); ?></span>
|
||||
</div>
|
||||
<?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
|
||||
<div class="summary-row total">
|
||||
<span>Order Total:</span>
|
||||
<span>R<?php echo e(number_format($order->total + ($order->shipping_fee ?? 0), 2)); ?></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Additional Info -->
|
||||
<?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if($order->notes): ?>
|
||||
<div class="card">
|
||||
<h3 style="color: var(--primary-color); margin-bottom: 1rem;">Order Notes</h3>
|
||||
<p><?php echo e($order->notes); ?></p>
|
||||
</div>
|
||||
<?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
|
||||
|
||||
<div class="card card--pink">
|
||||
<h2 class="next-steps-title" style="text-align: center;">Order Status</h2>
|
||||
<p style="margin: 0; text-align: center;">
|
||||
<?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if($order->payment_status === 'pending'): ?>
|
||||
Your payment is pending. Please complete the payment to process your order.
|
||||
<?php elseif($order->status === 'pending'): ?>
|
||||
Your order has been received and is being prepared. You'll receive an email update shortly with shipping information.
|
||||
<?php else: ?>
|
||||
Your order is <?php echo e(strtolower($order->status)); ?>. Thank you for your purchase!
|
||||
<?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Actions -->
|
||||
<div class="actions">
|
||||
<a href="<?php echo e(route('track-order-form')); ?>" class="btn btn--secondary">Track Another Order</a>
|
||||
<a href="<?php echo e(route('home')); ?>" class="btn">Back to Home</a>
|
||||
</div>
|
||||
</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/track-order-result.blade.php ENDPATH**/ ?>
|
||||
@@ -0,0 +1,291 @@
|
||||
<?php $__env->startSection('title', 'Checkout - Additional Design'); ?>
|
||||
|
||||
<?php $__env->startSection('styles'); ?>
|
||||
<style>
|
||||
h1 {
|
||||
font-family: 'Abril Fatface', cursive;
|
||||
font-size: 2.5rem;
|
||||
color: var(--primary-color);
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.checkout-container {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 3rem;
|
||||
margin: 2rem 0 3rem 0;
|
||||
}
|
||||
|
||||
.checkout-form,
|
||||
.order-summary {
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.checkout-form h2,
|
||||
.order-summary h2 {
|
||||
font-family: 'Abril Fatface', cursive;
|
||||
font-size: 1.5rem;
|
||||
color: var(--primary-color);
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
display: block;
|
||||
font-weight: 600;
|
||||
margin-bottom: 0.5rem;
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.form-group input,
|
||||
.form-group textarea {
|
||||
width: 100%;
|
||||
padding: 0.75rem;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
font-size: 1rem;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.form-group textarea {
|
||||
resize: vertical;
|
||||
min-height: 100px;
|
||||
}
|
||||
|
||||
.form-group input:focus,
|
||||
.form-group textarea:focus {
|
||||
outline: none;
|
||||
border-color: var(--primary-color);
|
||||
box-shadow: 0 0 0 3px rgba(45, 80, 71, 0.1);
|
||||
}
|
||||
|
||||
.order-summary {
|
||||
height: fit-content;
|
||||
}
|
||||
|
||||
.order-item {
|
||||
padding: 1rem 0;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
.order-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.order-item-name {
|
||||
font-weight: 600;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.order-item-details {
|
||||
font-size: 0.85rem;
|
||||
color: #666;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.order-item-price {
|
||||
text-align: right;
|
||||
font-weight: 600;
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.summary-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 1rem 0;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
.summary-row.total {
|
||||
font-weight: 600;
|
||||
font-size: 1.2rem;
|
||||
color: var(--primary-color);
|
||||
border-top: 2px solid var(--primary-color);
|
||||
border-bottom: none;
|
||||
padding-top: 1.5rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.btn-submit {
|
||||
width: 100%;
|
||||
margin-top: 2rem;
|
||||
padding: 1rem;
|
||||
background-color: var(--primary-color);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
.btn-submit:hover {
|
||||
background-color: #1f3633;
|
||||
}
|
||||
|
||||
.alert {
|
||||
padding: 1rem;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.alert-error {
|
||||
background-color: #f8d7da;
|
||||
color: #721c24;
|
||||
border: 1px solid #f5c6cb;
|
||||
}
|
||||
|
||||
.info-box {
|
||||
background: var(--section-light-bg);
|
||||
padding: 1rem;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 1.5rem;
|
||||
font-size: 0.9rem;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.back-link {
|
||||
display: block;
|
||||
text-align: center;
|
||||
margin-top: 1.5rem;
|
||||
color: var(--primary-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.back-link:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.checkout-container {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<?php $__env->stopSection(); ?>
|
||||
|
||||
<?php $__env->startSection('content'); ?>
|
||||
<div class="container">
|
||||
<h1>Checkout</h1>
|
||||
|
||||
<?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if($errors->any()): ?>
|
||||
<div class="alert alert-error">
|
||||
<ul style="margin: 0; padding-left: 1.5rem;">
|
||||
<?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php $__currentLoopData = $errors->all(); $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $error): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
|
||||
<li><?php echo e($error); ?></li>
|
||||
<?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
|
||||
</ul>
|
||||
</div>
|
||||
<?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
|
||||
|
||||
<div class="checkout-container">
|
||||
<!-- Checkout Form -->
|
||||
<form action="<?php echo e(route('order-process')); ?>" method="POST" class="checkout-form card">
|
||||
<?php echo csrf_field(); ?>
|
||||
|
||||
<h2>Delivery Information</h2>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="customer_name">Full Name</label>
|
||||
<input type="text" id="customer_name" name="customer_name" value="<?php echo e(old('customer_name')); ?>" required>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="customer_email">Email Address</label>
|
||||
<input type="email" id="customer_email" name="customer_email" value="<?php echo e(old('customer_email')); ?>" required>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="customer_phone">Phone Number</label>
|
||||
<input type="tel" id="customer_phone" name="customer_phone" value="<?php echo e(old('customer_phone')); ?>" required>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="shipping_address">Delivery Address</label>
|
||||
<textarea id="shipping_address" name="shipping_address" required><?php echo e(old('shipping_address')); ?></textarea>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="notes">Order Notes (Optional)</label>
|
||||
<textarea id="notes" name="notes" placeholder="Any special instructions or notes for your order..."><?php echo e(old('notes')); ?></textarea>
|
||||
</div>
|
||||
|
||||
<div class="info-box">
|
||||
<strong>Note:</strong> Payment will be processed securely through Yoco. You'll be redirected to complete your card payment after confirming this order.
|
||||
</div>
|
||||
|
||||
<button type="submit" class="btn">Complete Order & Proceed to Payment</button>
|
||||
</form>
|
||||
|
||||
<!-- Order Summary -->
|
||||
<div class="order-summary card">
|
||||
<h2>Order Summary</h2>
|
||||
|
||||
<?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php $__currentLoopData = $items; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $item): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
|
||||
<div class="order-item">
|
||||
<div class="order-item-name"><?php echo e($item['product']->name); ?><?php echo e($item['is_sample'] ? ' - Sample' : ''); ?></div>
|
||||
|
||||
<?php
|
||||
$stockCost = 0;
|
||||
$stockUnit = $item['type'] === 'wallpaper' ? '/m' : '/m²';
|
||||
|
||||
if (!$item['is_sample'] && $item['stock']) {
|
||||
$stockCost = $item['type'] === 'wallpaper' ? $item['stock']->cost_per_meter : $item['stock']->cost_per_m2;
|
||||
}
|
||||
?>
|
||||
|
||||
<div class="order-item-details">
|
||||
<?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if($item['is_sample']): ?>
|
||||
<strong>Sample - Fixed Price:</strong> R<?php echo e(number_format(\App\Services\ShippingService::getSampleCost(), 2)); ?><br>
|
||||
<?php elseif($item['stock']): ?>
|
||||
<strong><?php echo e($item['stock']->name); ?>:</strong> R<?php echo e(number_format($stockCost, 2)); ?><?php echo e($stockUnit); ?><br>
|
||||
<?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(!$item['is_sample']): ?>
|
||||
<?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if($item['type'] === 'wallpaper'): ?>
|
||||
<strong>Length:</strong> <?php echo e($item['length']); ?>m
|
||||
<?php elseif($item['type'] === 'mural'): ?>
|
||||
<strong>Dimensions:</strong> <?php echo e($item['width']); ?>m × <?php echo e($item['height']); ?>m (<?php echo e(number_format($item['width'] * $item['height'], 2)); ?>m²)
|
||||
<?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($item['quantity'] > 1): ?>
|
||||
<br><strong>Quantity:</strong> <?php echo e($item['quantity']); ?>
|
||||
|
||||
<?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
|
||||
<?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
|
||||
</div>
|
||||
<div class="order-item-price">R<?php echo e(number_format($item['subtotal'], 2)); ?></div>
|
||||
</div>
|
||||
<?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
|
||||
|
||||
<div class="summary-row">
|
||||
<span>Subtotal:</span>
|
||||
<span>R<?php echo e(number_format($total, 2)); ?></span>
|
||||
</div>
|
||||
|
||||
<div class="summary-row">
|
||||
<span><?php echo e($shippingLabel); ?>:</span>
|
||||
<span>R<?php echo e(number_format($shippingFee, 2)); ?></span>
|
||||
</div>
|
||||
|
||||
<div class="summary-row total">
|
||||
<span>Total:</span>
|
||||
<span>R<?php echo e(number_format($grandTotal, 2)); ?></span>
|
||||
</div>
|
||||
|
||||
<a href="<?php echo e(route('cart')); ?>" class="back-link">← Back to Cart</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<?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/checkout.blade.php ENDPATH**/ ?>
|
||||
@@ -0,0 +1,4 @@
|
||||
<div class="announcement-bar">
|
||||
<p>Free shipping on orders over R2000 | Holiday orders must be placed by Dec 15th | Happy Christmas</p>
|
||||
</div>
|
||||
<?php /**PATH /var/www/additional_design/resources/views/components/announcement-bar.blade.php ENDPATH**/ ?>
|
||||
@@ -0,0 +1,27 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title><?php echo $__env->yieldContent('title', 'Additional Design'); ?></title>
|
||||
<!-- Google Fonts -->
|
||||
<link href="https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Noto+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
|
||||
|
||||
|
||||
<link rel="stylesheet" href="<?php echo e(asset('css/styles.css')); ?>">
|
||||
<?php echo $__env->yieldContent('styles'); ?>
|
||||
</head>
|
||||
<body>
|
||||
<?php echo $__env->make('components.announcement-bar', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?>
|
||||
<?php echo $__env->make('components.header', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?>
|
||||
|
||||
<?php echo $__env->yieldContent('content'); ?>
|
||||
|
||||
<?php echo $__env->make('components.footer', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?>
|
||||
|
||||
<script src="<?php echo e(asset('js/script.js')); ?>"></script>
|
||||
<?php echo $__env->yieldContent('scripts'); ?>
|
||||
</body>
|
||||
</html>
|
||||
<?php /**PATH /var/www/additional_design/resources/views/layouts/app.blade.php ENDPATH**/ ?>
|
||||
@@ -0,0 +1,316 @@
|
||||
<?php $__env->startSection('title', 'Shopping Cart'); ?>
|
||||
|
||||
<?php $__env->startSection('styles'); ?>
|
||||
<style>
|
||||
h1 {
|
||||
font-family: 'Abril Fatface', cursive;
|
||||
font-size: 2.5rem;
|
||||
color: var(--primary-color);
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.cart-container {
|
||||
display: grid;
|
||||
grid-template-columns: 2fr 1fr;
|
||||
gap: 2rem;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.empty-cart {
|
||||
text-align: center;
|
||||
padding: 3rem 2rem;
|
||||
}
|
||||
|
||||
.empty-cart p {
|
||||
color: #666;
|
||||
margin-bottom: 2rem;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.cart-item {
|
||||
display: grid;
|
||||
grid-template-columns: 120px 1fr auto;
|
||||
gap: 2rem;
|
||||
padding: 1.5rem 0;
|
||||
border-bottom: 1px solid #eee;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.cart-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.item-image {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
object-fit: cover;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.item-details h3 {
|
||||
color: var(--primary-color);
|
||||
margin-bottom: 0.5rem;
|
||||
font-family: 'Abril Fatface', cursive;
|
||||
}
|
||||
|
||||
.item-details p {
|
||||
color: #666;
|
||||
font-size: 0.9rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.item-price {
|
||||
font-weight: 600;
|
||||
color: var(--primary-color);
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.item-actions {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.quantity-form {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.quantity-form input {
|
||||
width: 60px;
|
||||
padding: 0.4rem;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.quantity-form button {
|
||||
background-color: black;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 0.4rem 0.8rem;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.quantity-form button:hover {
|
||||
background-color: #1f3633;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.summary {
|
||||
height: fit-content;
|
||||
}
|
||||
|
||||
.summary h2 {
|
||||
font-family: 'Abril Fatface', cursive;
|
||||
font-size: 1.5rem;
|
||||
color: var(--primary-color);
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.summary-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 1rem 0;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
.summary-row.total {
|
||||
font-family: Abril Fatface;
|
||||
font-weight: 400;
|
||||
font-size: 2rem;
|
||||
color: var(--primary-color);
|
||||
border-top: 2px solid var(--primary-color);
|
||||
border-bottom: none;
|
||||
padding-top: 1.5rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.summary-actions {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
background-color: white;
|
||||
color: black;
|
||||
font-size: 0.9rem;
|
||||
padding: 0.5rem 1rem;
|
||||
}
|
||||
|
||||
.btn-danger:hover {
|
||||
background-color: #c09191;
|
||||
}
|
||||
|
||||
.alert {
|
||||
padding: 1rem;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.alert-success {
|
||||
background-color: #d4e8d4;
|
||||
color: var(--primary-color);
|
||||
border: 1px solid #a8d4a8;
|
||||
}
|
||||
|
||||
.alert-info {
|
||||
background-color: #d1ecf1;
|
||||
color: #0c5460;
|
||||
border: 1px solid #bee5eb;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.cart-container {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.cart-item {
|
||||
grid-template-columns: 80px 1fr;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.item-image {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
.item-actions {
|
||||
grid-column: 1 / -1;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<?php $__env->stopSection(); ?>
|
||||
|
||||
<?php $__env->startSection('content'); ?>
|
||||
<main class="container">
|
||||
<h1>Shopping Cart</h1>
|
||||
|
||||
<?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; ?>
|
||||
|
||||
<?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if(session('error')): ?>
|
||||
<div class="alert alert-info">
|
||||
<?php echo e(session('error')); ?>
|
||||
|
||||
</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(count($items) > 0): ?>
|
||||
<div class="cart-container">
|
||||
<!-- Cart Items -->
|
||||
<div class="cart-items card">
|
||||
<?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php $__currentLoopData = $items; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $item): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
|
||||
<div class="cart-item">
|
||||
<?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if($item['product']->images->count() > 0): ?>
|
||||
<img src="<?php echo e(asset('storage/' . $item['product']->images->first()->image_path)); ?>" alt="<?php echo e($item['product']->name); ?>" class="item-image">
|
||||
<?php else: ?>
|
||||
<img src="<?php echo e($item['product']->image); ?>" alt="<?php echo e($item['product']->name); ?>" class="item-image">
|
||||
<?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
|
||||
|
||||
<div class="item-details">
|
||||
<h3><?php echo e($item['product']->name); ?><?php echo e($item['is_sample'] ? ' - Sample' : ''); ?></h3>
|
||||
<p><?php echo e($item['product']->category->name); ?></p>
|
||||
|
||||
<?php
|
||||
$stockCost = 0;
|
||||
$stockUnit = $item['type'] === 'wallpaper' ? '/m' : '/m²';
|
||||
|
||||
if (!$item['is_sample'] && $item['stock']) {
|
||||
$stockCost = $item['type'] === 'wallpaper' ? $item['stock']->cost_per_meter : $item['stock']->cost_per_m2;
|
||||
}
|
||||
?>
|
||||
|
||||
<?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if($item['is_sample']): ?>
|
||||
<p style="font-size: 0.9rem; color: #666;">
|
||||
Sample - Fixed Price: <span class="item-price">R<?php echo e(number_format(\App\Services\ShippingService::getSampleCost(), 2)); ?></span>
|
||||
</p>
|
||||
<?php elseif($item['stock']): ?>
|
||||
<p style="font-size: 0.9rem; color: #666;">
|
||||
<?php echo e($item['stock']->name); ?>: <span class="item-price">R<?php echo e(number_format($stockCost, 2)); ?><?php echo e($stockUnit); ?></span>
|
||||
</p>
|
||||
<?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(!$item['is_sample']): ?>
|
||||
<?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if($item['type'] === 'wallpaper'): ?>
|
||||
<p style="color: #666; font-size: 0.9rem;">Length: <?php echo e($item['length']); ?>m</p>
|
||||
<?php elseif($item['type'] === 'mural'): ?>
|
||||
<p style="color: #666; font-size: 0.9rem;">Dimensions: <?php echo e($item['width']); ?>m × <?php echo e($item['height']); ?>m (<?php echo e(number_format($item['width'] * $item['height'], 2)); ?>m²)</p>
|
||||
<?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
|
||||
<?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
|
||||
|
||||
<p style="color: var(--primary-color); font-weight: 600;">Subtotal: R<?php echo e(number_format($item['subtotal'], 2)); ?></p>
|
||||
</div>
|
||||
|
||||
<div class="item-actions">
|
||||
<!-- <form action="<?php echo e(route('cart-update')); ?>" method="POST" class="quantity-form">
|
||||
<?php echo csrf_field(); ?>
|
||||
<input type="hidden" name="item_key" value="<?php echo e($item['key']); ?>">
|
||||
<input type="number" name="quantity" min="1" value="<?php echo e($item['quantity']); ?>">
|
||||
<button type="submit">Update</button>
|
||||
</form> -->
|
||||
|
||||
<form action="<?php echo e(route('cart-remove')); ?>" method="POST" style="margin-top: 0.5rem;">
|
||||
<?php echo csrf_field(); ?>
|
||||
<input type="hidden" name="item_key" value="<?php echo e($item['key']); ?>">
|
||||
<button type="submit" class="btn btn-danger">Remove</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
|
||||
</div>
|
||||
|
||||
<!-- Summary -->
|
||||
<div class="summary card">
|
||||
<h2>Order Summary</h2>
|
||||
|
||||
<div class="summary-row">
|
||||
<span>Subtotal:</span>
|
||||
<span>R<?php echo e(number_format($total, 2)); ?></span>
|
||||
</div>
|
||||
<div class="summary-row">
|
||||
<span><?php echo e($shippingLabel); ?>:</span>
|
||||
<span>R <?php echo e(number_format($shippingFee, 2)); ?></span>
|
||||
</div>
|
||||
|
||||
<div class="summary-row total">
|
||||
<span>Total:</span>
|
||||
<span>R <?php echo e(number_format($total + $shippingFee, 2)); ?></span>
|
||||
</div>
|
||||
|
||||
<div class="summary-actions">
|
||||
<a href="<?php echo e(route('checkout')); ?>" class="btn" style="text-decoration: none;">Proceed to Checkout</a>
|
||||
<a href="<?php echo e(route('wallpapers')); ?>" class="btn btn--secondary">Continue Shopping</a>
|
||||
</div>
|
||||
|
||||
<form action="<?php echo e(route('cart-clear')); ?>" method="POST" style="margin-top: 1rem;">
|
||||
<?php echo csrf_field(); ?>
|
||||
<button type="submit" class="btn btn-danger" style="width: 100%;">Clear Cart</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<?php else: ?>
|
||||
<div class="empty-cart">
|
||||
<p>Your cart is empty</p>
|
||||
<a href="<?php echo e(route('wallpapers')); ?>" class="btn">Start Shopping</a>
|
||||
</div>
|
||||
<?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/cart.blade.php ENDPATH**/ ?>
|
||||
@@ -0,0 +1,90 @@
|
||||
<header>
|
||||
<div class="container">
|
||||
<div class="header-content">
|
||||
<div class="logo"><a href="/" style="text-decoration: none; color: inherit;">Additional Design</a></div>
|
||||
<nav>
|
||||
<!-- <a href="/">Home</a> -->
|
||||
<a href="/wallpapers">Wallpaper</a>
|
||||
<a href="/murals">Murals</a>
|
||||
<!-- <a href="/fabrics">Fabrics</a> -->
|
||||
<!-- <a href="/#portfolio">Portfolio</a> -->
|
||||
<a href="/#projects">Projects</a>
|
||||
<!-- <a href="/#shop">Decor Shop</a> -->
|
||||
<a href="/#contact">Contact</a>
|
||||
<a href="<?php echo e(route('track-order-form')); ?>">Track Order</a>
|
||||
</nav>
|
||||
<div style="display: flex; align-items: center; gap: 1.5rem;">
|
||||
<!-- Authentication Links -->
|
||||
<?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if(auth()->guard()->check()): ?>
|
||||
<a href="<?php echo e(route('custom-orders.create')); ?>" style="text-decoration: none; color: inherit; font-weight: 500; font-size: 0.9rem;">Custom Order</a>
|
||||
<div style="position: relative; display: inline-block;">
|
||||
<button onclick="toggleUserMenu()" style="background: none; border: none; cursor: pointer; padding: 0; font-weight: 500; display: flex; align-items: center; gap: 0.5rem; color: inherit; font-size: 0.9rem; font-family: Montserrat, sans-serif;">
|
||||
<?php echo e(auth()->user()->name); ?>
|
||||
|
||||
<svg style="width: 16px; height: 16px;" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</button>
|
||||
<div id="user-menu" style="display: none; position: absolute; right: 0; top: 100%; margin-top: 0.5rem; background: white; border-radius: 0.5rem; box-shadow: 0 10px 25px rgba(0,0,0,0.1); min-width: 200px; z-index: 1000;">
|
||||
<a href="<?php echo e(route('my-account')); ?>" style="display: block; padding: 0.75rem 1rem; text-decoration: none; color: inherit; border-bottom: 1px solid #e5e7eb;">My Account</a>
|
||||
<a href="<?php echo e(route('my-orders')); ?>" style="display: block; padding: 0.75rem 1rem; text-decoration: none; color: inherit; border-bottom: 1px solid #e5e7eb;">My Orders</a>
|
||||
<?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if(auth()->user()->is_admin): ?>
|
||||
<a href="/admin" style="display: block; padding: 0.75rem 1rem; text-decoration: none; color: inherit; border-bottom: 1px solid #e5e7eb;">Admin Panel</a>
|
||||
<?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
|
||||
<form action="<?php echo e(route('logout')); ?>" method="POST" style="margin: 0;" id="logout-form">
|
||||
<?php echo csrf_field(); ?>
|
||||
<button type="submit" style="font-family: Montserrat, sans-serif; width: 100%; text-align: left; padding: 0.75rem 1rem; background: none; border: none; cursor: pointer; color: inherit; font-weight: 500; font-size: 0.9rem;">Sign Out</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<?php else: ?>
|
||||
<a href="<?php echo e(route('auth.login')); ?>" style="text-decoration: none; color: inherit; font-weight: 500; font-size: 0.9rem;">Sign In</a>
|
||||
<?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
|
||||
|
||||
<!-- Cart -->
|
||||
<a href="<?php echo e(route('cart')); ?>" style="display: flex; align-items: center; gap: 0.5rem; text-decoration: none; color: inherit; font-weight: 500; position: relative;">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<circle cx="9" cy="21" r="1"></circle>
|
||||
<circle cx="20" cy="21" r="1"></circle>
|
||||
<path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path>
|
||||
</svg>
|
||||
<span>Cart</span>
|
||||
<?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if($cartCount > 0): ?>
|
||||
<span style="background: var(--accent-dark); color: white; border-radius: 50%; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: bold; position: absolute; top: -8px; right: -8px;"><?php echo e($cartCount); ?></span>
|
||||
<?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<script>
|
||||
function toggleUserMenu() {
|
||||
const menu = document.getElementById('user-menu');
|
||||
if (menu) {
|
||||
menu.style.display = menu.style.display === 'none' ? 'block' : 'none';
|
||||
}
|
||||
}
|
||||
|
||||
// Close menu when clicking outside
|
||||
document.addEventListener('click', function(event) {
|
||||
const userMenu = document.getElementById('user-menu');
|
||||
const toggleButton = event.target.closest('button[onclick="toggleUserMenu()"]');
|
||||
const logoutForm = document.getElementById('logout-form');
|
||||
|
||||
// Don't close if clicking logout form or the toggle button
|
||||
if (userMenu && !event.target.closest('#user-menu') && !toggleButton && !logoutForm?.contains(event.target)) {
|
||||
userMenu.style.display = 'none';
|
||||
}
|
||||
});
|
||||
|
||||
// Allow logout form to submit by not preventing default
|
||||
document.addEventListener('submit', function(event) {
|
||||
if (event.target.id === 'logout-form') {
|
||||
// Allow normal form submission
|
||||
return true;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
<?php /**PATH /var/www/additional_design/resources/views/components/header.blade.php ENDPATH**/ ?>
|
||||
@@ -0,0 +1,74 @@
|
||||
<?php if (isset($component)) { $__componentOriginalaa758e6a82983efcbf593f765e026bd9 = $component; } ?>
|
||||
<?php if (isset($attributes)) { $__attributesOriginalaa758e6a82983efcbf593f765e026bd9 = $attributes; } ?>
|
||||
<?php $component = Illuminate\View\AnonymousComponent::resolve(['view' => $__env->getContainer()->make(Illuminate\View\Factory::class)->make('mail::message'),'data' => []] + (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag ? $attributes->all() : [])); ?>
|
||||
<?php $component->withName('mail::message'); ?>
|
||||
<?php if ($component->shouldRender()): ?>
|
||||
<?php $__env->startComponent($component->resolveView(), $component->data()); ?>
|
||||
<?php if (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag): ?>
|
||||
<?php $attributes = $attributes->except(\Illuminate\View\AnonymousComponent::ignoredParameterNames()); ?>
|
||||
<?php endif; ?>
|
||||
<?php $component->withAttributes([]); ?>
|
||||
# Invoice #<?php echo e($invoiceNumber); ?>
|
||||
|
||||
|
||||
Dear <?php echo e($order->customer_first_name); ?> <?php echo e($order->customer_last_name); ?>,
|
||||
|
||||
Thank you for your order! Your invoice is attached to this email.
|
||||
|
||||
**Order Summary:**
|
||||
- Order Number: <?php echo e($order->order_number); ?>
|
||||
|
||||
- Order Date: <?php echo e($order->created_at->format('d M Y')); ?>
|
||||
|
||||
- Total Amount: R <?php echo e(number_format($order->total, 2)); ?>
|
||||
|
||||
- Status: <?php echo e(ucfirst($order->status)); ?>
|
||||
|
||||
|
||||
**Delivery Address:**
|
||||
<?php echo e($order->delivery_address_line1); ?>
|
||||
|
||||
<?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if($order->delivery_address_line2): ?>
|
||||
<?php echo e($order->delivery_address_line2); ?>
|
||||
|
||||
<?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
|
||||
<?php echo e($order->delivery_city); ?>, <?php echo e($order->delivery_province); ?> <?php echo e($order->delivery_postal_code); ?>
|
||||
|
||||
|
||||
If you have any questions about your order, please don't hesitate to contact us.
|
||||
|
||||
<?php if (isset($component)) { $__componentOriginal15a5e11357468b3880ae1300c3be6c4f = $component; } ?>
|
||||
<?php if (isset($attributes)) { $__attributesOriginal15a5e11357468b3880ae1300c3be6c4f = $attributes; } ?>
|
||||
<?php $component = Illuminate\View\AnonymousComponent::resolve(['view' => $__env->getContainer()->make(Illuminate\View\Factory::class)->make('mail::button'),'data' => ['url' => config('app.url')]] + (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag ? $attributes->all() : [])); ?>
|
||||
<?php $component->withName('mail::button'); ?>
|
||||
<?php if ($component->shouldRender()): ?>
|
||||
<?php $__env->startComponent($component->resolveView(), $component->data()); ?>
|
||||
<?php if (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag): ?>
|
||||
<?php $attributes = $attributes->except(\Illuminate\View\AnonymousComponent::ignoredParameterNames()); ?>
|
||||
<?php endif; ?>
|
||||
<?php $component->withAttributes(['url' => \Illuminate\View\Compilers\BladeCompiler::sanitizeComponentAttribute(config('app.url'))]); ?>
|
||||
Visit Our Website
|
||||
<?php echo $__env->renderComponent(); ?>
|
||||
<?php endif; ?>
|
||||
<?php if (isset($__attributesOriginal15a5e11357468b3880ae1300c3be6c4f)): ?>
|
||||
<?php $attributes = $__attributesOriginal15a5e11357468b3880ae1300c3be6c4f; ?>
|
||||
<?php unset($__attributesOriginal15a5e11357468b3880ae1300c3be6c4f); ?>
|
||||
<?php endif; ?>
|
||||
<?php if (isset($__componentOriginal15a5e11357468b3880ae1300c3be6c4f)): ?>
|
||||
<?php $component = $__componentOriginal15a5e11357468b3880ae1300c3be6c4f; ?>
|
||||
<?php unset($__componentOriginal15a5e11357468b3880ae1300c3be6c4f); ?>
|
||||
<?php endif; ?>
|
||||
|
||||
Thanks,<br>
|
||||
<?php echo e(config('app.name')); ?> Team
|
||||
<?php echo $__env->renderComponent(); ?>
|
||||
<?php endif; ?>
|
||||
<?php if (isset($__attributesOriginalaa758e6a82983efcbf593f765e026bd9)): ?>
|
||||
<?php $attributes = $__attributesOriginalaa758e6a82983efcbf593f765e026bd9; ?>
|
||||
<?php unset($__attributesOriginalaa758e6a82983efcbf593f765e026bd9); ?>
|
||||
<?php endif; ?>
|
||||
<?php if (isset($__componentOriginalaa758e6a82983efcbf593f765e026bd9)): ?>
|
||||
<?php $component = $__componentOriginalaa758e6a82983efcbf593f765e026bd9; ?>
|
||||
<?php unset($__componentOriginalaa758e6a82983efcbf593f765e026bd9); ?>
|
||||
<?php endif; ?>
|
||||
<?php /**PATH A:\additional_design\resources\views/emails/invoice.blade.php ENDPATH**/ ?>
|
||||
Reference in New Issue
Block a user