106 lines
5.3 KiB
PHP
106 lines
5.3 KiB
PHP
@extends('layouts.app')
|
|
|
|
@section('title', 'Bestelling Ontvangen! | Jouwdriedee.nl')
|
|
|
|
@section('content')
|
|
<div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 py-16 text-center space-y-8">
|
|
|
|
<!-- Success Badge -->
|
|
<div class="space-y-4">
|
|
<div class="w-20 h-20 rounded-3xl bg-emerald-100 text-emerald-600 flex items-center justify-center mx-auto shadow-lg shadow-emerald-500/20">
|
|
<i data-lucide="check" class="w-10 h-10 stroke-[2.5]"></i>
|
|
</div>
|
|
<h1 class="text-3xl sm:text-4xl font-black text-slate-900 tracking-tight">Bedankt voor je bestelling!</h1>
|
|
<p class="text-xs sm:text-sm text-slate-500 max-w-md mx-auto">
|
|
We hebben jouw bestelling ontvangen. De printbestanden worden klaargezet voor de 3D-printers.
|
|
</p>
|
|
<div class="inline-block px-4 py-2 rounded-xl bg-slate-100 border border-slate-200 text-xs font-mono font-bold text-slate-800">
|
|
Bestelnummer: <span class="text-indigo-600">{{ $order->order_number }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Live 3D Print Status Tracker -->
|
|
<div class="p-6 rounded-3xl bg-white border border-slate-200 shadow-sm text-left space-y-6">
|
|
<h3 class="text-xs font-bold text-slate-900 uppercase tracking-wider flex items-center space-x-2">
|
|
<i data-lucide="printer" class="w-4 h-4 text-indigo-600"></i>
|
|
<span>Live Print & Productie Status</span>
|
|
</h3>
|
|
|
|
<div class="relative pl-6 space-y-6 border-l-2 border-slate-200">
|
|
|
|
<!-- Stap 1: Ontvangen -->
|
|
<div class="relative">
|
|
<span class="absolute -left-[31px] top-0.5 w-4 h-4 rounded-full bg-emerald-500 ring-4 ring-emerald-100"></span>
|
|
<h4 class="text-xs font-bold text-slate-900">1. Bestelling ontvangen & geverifieerd</h4>
|
|
<p class="text-[11px] text-slate-500 mt-0.5">Jouw configuratie en materiaalkeuzes zijn opgeslagen.</p>
|
|
</div>
|
|
|
|
<!-- Stap 2: Slicing & Printbed -->
|
|
<div class="relative">
|
|
<span class="absolute -left-[31px] top-0.5 w-4 h-4 rounded-full bg-indigo-600 ring-4 ring-indigo-100 animate-pulse"></span>
|
|
<h4 class="text-xs font-bold text-indigo-600">2. Slicing & printwachtrij (Huidige fase)</h4>
|
|
<p class="text-[11px] text-slate-500 mt-0.5">Het 3D-model wordt geoptimaliseerd en klaargezet voor de printer.</p>
|
|
</div>
|
|
|
|
<!-- Stap 3: 3D Printen -->
|
|
<div class="relative opacity-60">
|
|
<span class="absolute -left-[31px] top-0.5 w-4 h-4 rounded-full bg-slate-300"></span>
|
|
<h4 class="text-xs font-bold text-slate-700">3. 3D Printen in de studio</h4>
|
|
<p class="text-[11px] text-slate-500 mt-0.5">Laag voor laag geprint op hoge resolutie.</p>
|
|
</div>
|
|
|
|
<!-- Stap 4: Kwaliteitscontrole & Verzenden -->
|
|
<div class="relative opacity-60">
|
|
<span class="absolute -left-[31px] top-0.5 w-4 h-4 rounded-full bg-slate-300"></span>
|
|
<h4 class="text-xs font-bold text-slate-700">4. Kwaliteitscontrole, inpakken & PostNL verzending</h4>
|
|
<p class="text-[11px] text-slate-500 mt-0.5">Je ontvangt per e-mail direct een Track & Trace code.</p>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Besteloverzicht Card -->
|
|
<div class="p-6 rounded-3xl bg-white border border-slate-200 shadow-sm text-left space-y-4">
|
|
<h3 class="text-xs font-bold text-slate-900 uppercase tracking-wider pb-3 border-b border-slate-100">
|
|
Overzicht van jouw bestelling
|
|
</h3>
|
|
|
|
<div class="space-y-3">
|
|
@foreach($order->items as $item)
|
|
<div class="flex items-center justify-between text-xs py-1">
|
|
<div>
|
|
<span class="font-bold text-slate-900">{{ $item->product_name }}</span>
|
|
<span class="text-slate-400">× {{ $item->quantity }}</span>
|
|
<div class="text-[11px] text-slate-500">{{ $item->material }} • {{ $item->color }} ({{ $item->scale }})</div>
|
|
</div>
|
|
<span class="font-mono font-bold text-slate-900">
|
|
€ {{ number_format($item->total_price, 2, ',', '.') }}
|
|
</span>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
|
|
<div class="pt-3 border-t border-slate-100 flex justify-between items-baseline text-xs">
|
|
<span class="font-bold text-slate-700">Totaal betaald</span>
|
|
<span class="text-lg font-black text-indigo-600 font-mono">{{ $order->formatted_total }}</span>
|
|
</div>
|
|
|
|
<div class="pt-3 border-t border-slate-100 text-xs text-slate-500">
|
|
<span class="font-bold text-slate-700 block mb-1">Bezorgadres:</span>
|
|
{{ $order->customer_name }}<br>
|
|
{{ $order->shipping_street }} {{ $order->shipping_number }}<br>
|
|
{{ $order->shipping_postal_code }} {{ $order->shipping_city }}
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<a href="{{ route('home') }}" class="px-6 py-3.5 rounded-2xl bg-indigo-600 hover:bg-indigo-500 text-white font-bold text-xs transition inline-flex items-center space-x-2 shadow-md">
|
|
<span>Terug Naar De Homepagina</span>
|
|
<i data-lucide="arrow-right" class="w-4 h-4"></i>
|
|
</a>
|
|
</div>
|
|
|
|
</div>
|
|
@endsection
|
|
|