twotalesanimation
432 lines
17 KiB
PHP
432 lines
17 KiB
PHP
@extends('layouts.app')
|
|
|
|
@section('title', 'Order #' . $customOrder->order_number . ' - Custom Order Details')
|
|
|
|
@section('styles')
|
|
<style>
|
|
/* Page-specific typography overrides */
|
|
h1 {
|
|
font-family: 'Abril Fatface', cursive;
|
|
font-size: 2.5rem;
|
|
color: var(--text-primary);
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
h2 {
|
|
font-family: 'Abril Fatface', cursive;
|
|
font-size: 1.6rem;
|
|
color: var(--text-primary);
|
|
margin-bottom: var(--spacing-md);
|
|
}
|
|
|
|
h3 {
|
|
font-family: var(--font-sans);
|
|
font-size: 1.1rem;
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.page-intro {
|
|
margin-bottom: var(--spacing-lg);
|
|
}
|
|
|
|
.page-intro p {
|
|
color: var(--text-secondary);
|
|
font-size: 1rem;
|
|
}
|
|
|
|
/* Timeline-specific styles */
|
|
.card {
|
|
padding: var(--spacing-lg);
|
|
margin-bottom: var(--spacing-lg);
|
|
}
|
|
|
|
.card:hover {
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.timeline-container {
|
|
background: white;
|
|
padding: var(--spacing-lg);
|
|
border-radius: 20px;
|
|
margin-bottom: var(--spacing-lg);
|
|
transition: var(--transition);
|
|
}
|
|
|
|
.timeline-container:hover {
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.timeline-title {
|
|
font-family: var(--font-serif);
|
|
font-size: 1.3rem;
|
|
color: var(--text-primary);
|
|
margin-bottom: var(--spacing-lg);
|
|
text-align: center;
|
|
}
|
|
|
|
.timeline {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0;
|
|
position: relative;
|
|
overflow-x: auto;
|
|
padding: var(--spacing-md) 0;
|
|
}
|
|
|
|
.timeline::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 0;
|
|
right: 0;
|
|
height: 2px;
|
|
background-color: var(--border-color);
|
|
z-index: 1;
|
|
transform: translateY(-50%);
|
|
}
|
|
|
|
.timeline-item {
|
|
flex: 1;
|
|
min-width: 140px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
position: relative;
|
|
z-index: 2;
|
|
}
|
|
|
|
.timeline-circle {
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 50%;
|
|
background-color: white;
|
|
border: 3px solid var(--border-color);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: all 0.3s ease;
|
|
font-weight: 900;
|
|
font-size: 1.2rem;
|
|
color: var(--text-primary);
|
|
flex-shrink: 0;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
margin: 0;
|
|
}
|
|
|
|
.timeline-item.completed .timeline-circle {
|
|
background-color: var(--accent-pink);
|
|
border-color: var(--accent-pink);
|
|
color: white;
|
|
}
|
|
|
|
.timeline-item.active .timeline-circle {
|
|
background-color: var(--accent-light);
|
|
border-color: var(--accent-dark);
|
|
box-shadow: 0 0 0 4px var(--accent-light);
|
|
}
|
|
|
|
.timeline-label {
|
|
text-align: center;
|
|
font-size: 0.85rem;
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
line-height: 1.3;
|
|
max-width: 120px;
|
|
margin-top: 60px;
|
|
}
|
|
|
|
.timeline-item.completed .timeline-label {
|
|
color: var(--accent-pink);
|
|
}
|
|
|
|
.timeline-item.active .timeline-label {
|
|
color: var(--accent-dark);
|
|
font-weight: 700;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.content-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 1.8rem;
|
|
}
|
|
|
|
.image-gallery {
|
|
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
|
|
}
|
|
}
|
|
</style>
|
|
@endsection
|
|
|
|
@section('content')
|
|
<div class="container">
|
|
<div class="page-intro">
|
|
<h1>Custom Order Details</h1>
|
|
<p>Order #{{ $customOrder->order_number }}</p>
|
|
</div>
|
|
|
|
@if (session('success'))
|
|
<div class="alert alert-success">
|
|
{{ session('success') }}
|
|
</div>
|
|
@endif
|
|
|
|
@if (session('info'))
|
|
<div class="alert alert-info">
|
|
{{ session('info') }}
|
|
</div>
|
|
@endif
|
|
|
|
<!-- Timeline -->
|
|
<div class="timeline-container">
|
|
<h2 class="timeline-title">Order Progress</h2>
|
|
<div class="timeline">
|
|
@php
|
|
$timelineSteps = [
|
|
['status' => 'submitted', 'label' => 'Order\nSubmitted', 'completed' => $customOrder->status !== null],
|
|
['status' => 'deposit_paid', 'label' => 'Deposit\nPaid', 'completed' => $customOrder->deposit_status === 'paid'],
|
|
['status' => 'proof_sent', 'label' => 'Proofs\nSent', 'completed' => $customOrder->proofs()->exists()],
|
|
['status' => 'proof_approved', 'label' => 'Proofs\nApproved', 'completed' => $customOrder->proofs()->where('status', 'approved')->exists()],
|
|
['status' => 'processing', 'label' => 'Processing', 'completed' => $customOrder->status === 'processing'],
|
|
['status' => 'shipped', 'label' => 'Order\nShipped', 'completed' => $customOrder->status === 'completed'],
|
|
];
|
|
|
|
// Determine current step
|
|
$currentStep = 0;
|
|
if ($customOrder->status === 'completed') $currentStep = 5;
|
|
elseif ($customOrder->status === 'processing') $currentStep = 4;
|
|
elseif ($customOrder->proofs()->where('status', 'approved')->exists()) $currentStep = 3;
|
|
elseif ($customOrder->proofs()->exists()) $currentStep = 2;
|
|
elseif ($customOrder->deposit_status === 'paid') $currentStep = 1;
|
|
@endphp
|
|
|
|
@foreach ($timelineSteps as $index => $step)
|
|
<div class="timeline-item @if ($index < $currentStep) completed @elseif ($index === $currentStep) active @endif">
|
|
<div class="timeline-circle">
|
|
@if ($index < $currentStep)
|
|
✓
|
|
@else
|
|
{{ $index + 1 }}
|
|
@endif
|
|
</div>
|
|
<div class="timeline-label">{{ $step['label'] }}</div>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
<div class="content-grid">
|
|
<!-- Main Content -->
|
|
<div>
|
|
<!-- Order Status -->
|
|
<div class="card">
|
|
<h2>Order Status</h2>
|
|
<div class="card-section">
|
|
<span class="status-badge {{ $customOrder->status }}">
|
|
{{ str_replace('_', ' ', ucfirst($customOrder->status)) }}
|
|
</span>
|
|
<p style="margin-top: var(--spacing-sm); color: var(--text-secondary); font-size: 0.9rem;">
|
|
Submitted on {{ $customOrder->created_at->format('d M Y \a\t H:i') }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Design Requirements -->
|
|
<div class="card">
|
|
<h2>Design Requirements</h2>
|
|
|
|
<div class="card-section">
|
|
<h3>Order Type</h3>
|
|
<p style="color: var(--text-secondary); text-transform: capitalize;">{{ $customOrder->type }}</p>
|
|
</div>
|
|
|
|
<div class="card-section">
|
|
<h3>Dimensions</h3>
|
|
@if ($customOrder->specifications)
|
|
<dl style="color: var(--text-secondary);">
|
|
@if ($customOrder->specifications->length)
|
|
<div class="spec-group">
|
|
<dt>Length:</dt>
|
|
<dd>{{ $customOrder->specifications->length }}m</dd>
|
|
</div>
|
|
@endif
|
|
@if ($customOrder->specifications->width)
|
|
<div class="spec-group">
|
|
<dt>Width:</dt>
|
|
<dd>{{ $customOrder->specifications->width }}m</dd>
|
|
</div>
|
|
@endif
|
|
@if ($customOrder->specifications->height)
|
|
<div class="spec-group">
|
|
<dt>Height:</dt>
|
|
<dd>{{ $customOrder->specifications->height }}m</dd>
|
|
</div>
|
|
@endif
|
|
<div class="spec-group">
|
|
<dt>Quantity:</dt>
|
|
<dd>{{ $customOrder->specifications->quantity }}</dd>
|
|
</div>
|
|
</dl>
|
|
@endif
|
|
</div>
|
|
|
|
<div class="card-section">
|
|
<h3>Print Material</h3>
|
|
@if ($customOrder->specifications->printStock)
|
|
<p style="color: var(--text-secondary);">{{ $customOrder->specifications->printStock->name }}</p>
|
|
@endif
|
|
</div>
|
|
|
|
<div class="card-section">
|
|
<h3>Design Brief</h3>
|
|
<p style="color: var(--text-secondary);">{{ $customOrder->customer_brief }}</p>
|
|
</div>
|
|
|
|
@if ($customOrder->specifications->special_instructions)
|
|
<div class="card-section">
|
|
<h3>Special Instructions</h3>
|
|
<p style="color: var(--text-secondary);">{{ $customOrder->specifications->special_instructions }}</p>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
|
|
<!-- Reference Images -->
|
|
@if ($customOrder->files->count() > 0)
|
|
<div class="card">
|
|
<h2>Reference Images</h2>
|
|
<div class="image-gallery">
|
|
@foreach ($customOrder->files as $file)
|
|
<a href="{{ Storage::url($file->file_path) }}" target="_blank" title="{{ $file->original_filename }}">
|
|
<img src="{{ Storage::url($file->file_path) }}" alt="{{ $file->original_filename }}">
|
|
</a>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
@endif
|
|
|
|
<!-- Design Proofs -->
|
|
@if ($customOrder->proofs->count() > 0)
|
|
<div class="card">
|
|
<h2>Design Proofs</h2>
|
|
@foreach ($customOrder->proofs as $proof)
|
|
<div class="proof-item {{ $proof->status === 'approved' ? 'approved' : '' }}">
|
|
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--spacing-sm);">
|
|
<h3>Proof {{ $loop->iteration }}</h3>
|
|
<span class="status-badge {{ $proof->status }}">
|
|
{{ ucfirst($proof->status) }}
|
|
</span>
|
|
</div>
|
|
@if ($proof->file_path)
|
|
<a href="{{ Storage::url($proof->file_path) }}" target="_blank" style="color: var(--accent-dark); text-decoration: underline; font-size: 0.9rem;">
|
|
View Proof File
|
|
</a>
|
|
@endif
|
|
@if ($proof->feedback)
|
|
<div style="margin-top: var(--spacing-sm); padding: var(--spacing-sm); background: white; border-radius: 4px; border-left: 3px solid var(--accent-dark);">
|
|
<strong style="color: var(--text-primary); font-size: 0.9rem;">Feedback:</strong>
|
|
<p style="color: var(--text-secondary); font-size: 0.85rem; margin: var(--spacing-xs) 0 0 0;">{{ $proof->feedback }}</p>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
@endif
|
|
</div>
|
|
|
|
<!-- Sidebar -->
|
|
<div>
|
|
<!-- Cost & Payment Summary -->
|
|
<div class="card">
|
|
<h2>Order Summary</h2>
|
|
|
|
<!-- Cost Summary -->
|
|
<div class="payment-section">
|
|
<div class="payment-row">
|
|
<span>Design Fee:</span>
|
|
<span>R{{ number_format($customOrder->design_fee, 2) }}</span>
|
|
</div>
|
|
@if ($customOrder->material_cost > 0)
|
|
<div class="payment-row">
|
|
<span>Material Cost:</span>
|
|
<span>R{{ number_format($customOrder->material_cost, 2) }}</span>
|
|
</div>
|
|
@endif
|
|
<div class="payment-row total">
|
|
<span>Total:</span>
|
|
<span>R{{ number_format($customOrder->total_cost, 2) }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Payment Status -->
|
|
<h3 style="margin-top: var(--spacing-lg); margin-bottom: var(--spacing-md);">Payment Status</h3>
|
|
|
|
<div style="padding: var(--spacing-sm); background-color: var(--accent-light); border-radius: 20px; margin-bottom: var(--spacing-md);">
|
|
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--spacing-xs);">
|
|
<strong>Deposit (20%)</strong>
|
|
<span class="status-badge {{ $customOrder->deposit_status }}">{{ ucfirst($customOrder->deposit_status) }}</span>
|
|
</div>
|
|
<p style="color: var(--text-secondary); margin: 0; font-size: 0.9rem;">R{{ number_format($customOrder->deposit_amount, 2) }}</p>
|
|
</div>
|
|
|
|
<div style="padding: var(--spacing-sm); background-color: var(--accent-light); border-radius: 20px; margin-bottom: var(--spacing-lg);">
|
|
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--spacing-xs);">
|
|
<strong>Balance (80%)</strong>
|
|
<span class="status-badge {{ $customOrder->balance_status }}">{{ ucfirst($customOrder->balance_status) }}</span>
|
|
</div>
|
|
<p style="color: var(--text-secondary); margin: 0; font-size: 0.9rem;">R{{ number_format($customOrder->balance_amount, 2) }}</p>
|
|
</div>
|
|
|
|
<!-- Payment Buttons -->
|
|
@if ($customOrder->deposit_status !== 'paid')
|
|
<form method="POST" action="{{ route('yoco-custom-deposit') }}">
|
|
@csrf
|
|
<input type="hidden" name="custom_order_id" value="{{ $customOrder->id }}">
|
|
<button type="submit" class="btn">Pay Deposit (R{{ number_format($customOrder->deposit_amount, 2) }})</button>
|
|
</form>
|
|
@elseif ($customOrder->deposit_status === 'paid' && $customOrder->proofs->where('status', 'approved')->count() > 0 && $customOrder->balance_status !== 'paid')
|
|
<button class="btn" onclick="alert('Balance payment coming soon')">Pay Balance (R{{ number_format($customOrder->balance_amount, 2) }})</button>
|
|
@endif
|
|
</div>
|
|
|
|
<!-- Terms -->
|
|
<div class="terms-box">
|
|
<h3 style="color: var(--text-primary); margin-top: 0;">Payment Terms</h3>
|
|
<ul>
|
|
<li>The 20% deposit is non-refundable</li>
|
|
<li>Balance of 80% must be paid before printing begins</li>
|
|
@if ($customOrder->library_discount_applied)
|
|
<li>Design may be added to our library</li>
|
|
@else
|
|
<li>Bespoke, exclusive design</li>
|
|
@endif
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const paymentForm = document.querySelector('form[action*="payment"]');
|
|
if (paymentForm) {
|
|
console.log('Payment form found:', paymentForm);
|
|
console.log('Form action:', paymentForm.action);
|
|
|
|
paymentForm.addEventListener('submit', function(e) {
|
|
console.log('Payment form submitted!');
|
|
console.log('Form data:', new FormData(this));
|
|
});
|
|
} else {
|
|
console.log('Payment form NOT found');
|
|
console.log('All forms on page:', document.querySelectorAll('form'));
|
|
}
|
|
});
|
|
</script>
|
|
@endsection
|