Complete redesign: modern, fresh, subtle Scandinavian tech studio look & feel for webshop and admin
This commit is contained in:
@@ -3,14 +3,14 @@
|
||||
@section('title', 'Afrekenen | Jouwdriedee.nl')
|
||||
|
||||
@section('content')
|
||||
<div class="bg-white border-b border-slate-200 py-6">
|
||||
<div class="border-b border-slate-200/80 py-6 sm:py-8 bg-slate-50/50">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<h1 class="text-2xl sm:text-3xl font-black text-slate-900 tracking-tight">Afrekenen & Gegevens</h1>
|
||||
<p class="text-xs text-slate-500 mt-0.5">Vul je bezorgadres in om jouw 3D-prints in de printwachtrij te plaatsen.</p>
|
||||
<h1 class="text-2xl sm:text-3xl font-bold tracking-tight text-slate-900">Afrekenen & Gegevens</h1>
|
||||
<p class="text-xs text-slate-500 mt-1">Vul je bezorgadres in om jouw 3D prints in de productiewachtrij te plaatsen.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 sm:py-12">
|
||||
<form action="{{ route('checkout.store') }}" method="POST">
|
||||
@csrf
|
||||
<div class="grid grid-cols-1 lg:grid-cols-12 gap-8">
|
||||
@@ -19,96 +19,96 @@
|
||||
<div class="lg:col-span-7 space-y-6">
|
||||
|
||||
<!-- 1. Contactgegevens -->
|
||||
<div class="p-6 rounded-3xl bg-white border border-slate-200 shadow-2xs space-y-4">
|
||||
<div class="p-6 rounded-2xl bg-white border border-slate-200/80 shadow-xs space-y-4">
|
||||
<h2 class="text-xs font-bold text-slate-900 uppercase tracking-wider flex items-center space-x-2">
|
||||
<i data-lucide="user" class="w-4 h-4 text-indigo-600"></i>
|
||||
<i data-lucide="user" class="w-3.5 h-3.5 text-slate-500"></i>
|
||||
<span>1. Contactgegevens</span>
|
||||
</h2>
|
||||
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<div class="sm:col-span-2">
|
||||
<label class="block text-xs font-semibold text-slate-700 mb-1">Volledige Naam *</label>
|
||||
<input type="text" name="customer_name" required value="{{ old('customer_name') }}" placeholder="Jan de Vries" class="w-full bg-slate-50 border border-slate-200 rounded-xl px-3.5 py-2.5 text-xs text-slate-900 focus:bg-white focus:outline-none focus:ring-1 focus:ring-indigo-500">
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-3.5">
|
||||
<div class="sm:col-span-2 space-y-1">
|
||||
<label class="block text-xs font-medium text-slate-700">Volledige Naam *</label>
|
||||
<input type="text" name="customer_name" required value="{{ old('customer_name') }}" placeholder="Jan Jansen" class="w-full bg-slate-50 border border-slate-200 rounded-xl px-3.5 py-2 text-xs text-slate-900 focus:bg-white focus:outline-none focus:ring-2 focus:ring-slate-900/10 focus:border-slate-900">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-xs font-semibold text-slate-700 mb-1">E-mailadres *</label>
|
||||
<input type="email" name="customer_email" required value="{{ old('customer_email') }}" placeholder="jan@voorbeeld.nl" class="w-full bg-slate-50 border border-slate-200 rounded-xl px-3.5 py-2.5 text-xs text-slate-900 focus:bg-white focus:outline-none focus:ring-1 focus:ring-indigo-500">
|
||||
<div class="space-y-1">
|
||||
<label class="block text-xs font-medium text-slate-700">E-mailadres *</label>
|
||||
<input type="email" name="customer_email" required value="{{ old('customer_email') }}" placeholder="jan@voorbeeld.nl" class="w-full bg-slate-50 border border-slate-200 rounded-xl px-3.5 py-2 text-xs text-slate-900 focus:bg-white focus:outline-none focus:ring-2 focus:ring-slate-900/10 focus:border-slate-900">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-xs font-semibold text-slate-700 mb-1">Telefoonnummer (voor bezorgupdates)</label>
|
||||
<input type="text" name="customer_phone" value="{{ old('customer_phone') }}" placeholder="06-12345678" class="w-full bg-slate-50 border border-slate-200 rounded-xl px-3.5 py-2.5 text-xs text-slate-900 focus:bg-white focus:outline-none focus:ring-1 focus:ring-indigo-500">
|
||||
<div class="space-y-1">
|
||||
<label class="block text-xs font-medium text-slate-700">Telefoonnummer</label>
|
||||
<input type="text" name="customer_phone" value="{{ old('customer_phone') }}" placeholder="06-12345678" class="w-full bg-slate-50 border border-slate-200 rounded-xl px-3.5 py-2 text-xs text-slate-900 focus:bg-white focus:outline-none focus:ring-2 focus:ring-slate-900/10 focus:border-slate-900">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 2. Verzendadres -->
|
||||
<div class="p-6 rounded-3xl bg-white border border-slate-200 shadow-2xs space-y-4">
|
||||
<div class="p-6 rounded-2xl bg-white border border-slate-200/80 shadow-xs space-y-4">
|
||||
<h2 class="text-xs font-bold text-slate-900 uppercase tracking-wider flex items-center space-x-2">
|
||||
<i data-lucide="map-pin" class="w-4 h-4 text-indigo-600"></i>
|
||||
<i data-lucide="map-pin" class="w-3.5 h-3.5 text-slate-500"></i>
|
||||
<span>2. Verzendadres (Nederland)</span>
|
||||
</h2>
|
||||
|
||||
<div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
|
||||
<div class="sm:col-span-2">
|
||||
<label class="block text-xs font-semibold text-slate-700 mb-1">Straatnaam *</label>
|
||||
<input type="text" name="shipping_street" required value="{{ old('shipping_street') }}" placeholder="Hoofdstraat" class="w-full bg-slate-50 border border-slate-200 rounded-xl px-3.5 py-2.5 text-xs text-slate-900 focus:bg-white focus:outline-none focus:ring-1 focus:ring-indigo-500">
|
||||
<div class="grid grid-cols-1 sm:grid-cols-3 gap-3.5">
|
||||
<div class="sm:col-span-2 space-y-1">
|
||||
<label class="block text-xs font-medium text-slate-700">Straatnaam *</label>
|
||||
<input type="text" name="shipping_street" required value="{{ old('shipping_street') }}" placeholder="Kalverstraat" class="w-full bg-slate-50 border border-slate-200 rounded-xl px-3.5 py-2 text-xs text-slate-900 focus:bg-white focus:outline-none focus:ring-2 focus:ring-slate-900/10 focus:border-slate-900">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-xs font-semibold text-slate-700 mb-1">Huisnummer *</label>
|
||||
<input type="text" name="shipping_number" required value="{{ old('shipping_number') }}" placeholder="12A" class="w-full bg-slate-50 border border-slate-200 rounded-xl px-3.5 py-2.5 text-xs text-slate-900 focus:bg-white focus:outline-none focus:ring-1 focus:ring-indigo-500">
|
||||
<div class="space-y-1">
|
||||
<label class="block text-xs font-medium text-slate-700">Huisnummer *</label>
|
||||
<input type="text" name="shipping_number" required value="{{ old('shipping_number') }}" placeholder="12A" class="w-full bg-slate-50 border border-slate-200 rounded-xl px-3.5 py-2 text-xs text-slate-900 focus:bg-white focus:outline-none focus:ring-2 focus:ring-slate-900/10 focus:border-slate-900">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-xs font-semibold text-slate-700 mb-1">Postcode *</label>
|
||||
<input type="text" name="shipping_postal_code" required value="{{ old('shipping_postal_code') }}" placeholder="1234 AB" class="w-full bg-slate-50 border border-slate-200 rounded-xl px-3.5 py-2.5 text-xs text-slate-900 focus:bg-white focus:outline-none focus:ring-1 focus:ring-indigo-500">
|
||||
<div class="space-y-1">
|
||||
<label class="block text-xs font-medium text-slate-700">Postcode *</label>
|
||||
<input type="text" name="shipping_postal_code" required value="{{ old('shipping_postal_code') }}" placeholder="1012 AB" class="w-full bg-slate-50 border border-slate-200 rounded-xl px-3.5 py-2 text-xs text-slate-900 focus:bg-white focus:outline-none focus:ring-2 focus:ring-slate-900/10 focus:border-slate-900">
|
||||
</div>
|
||||
|
||||
<div class="sm:col-span-2">
|
||||
<label class="block text-xs font-semibold text-slate-700 mb-1">Woonplaats *</label>
|
||||
<input type="text" name="shipping_city" required value="{{ old('shipping_city') }}" placeholder="Amsterdam" class="w-full bg-slate-50 border border-slate-200 rounded-xl px-3.5 py-2.5 text-xs text-slate-900 focus:bg-white focus:outline-none focus:ring-1 focus:ring-indigo-500">
|
||||
<div class="sm:col-span-2 space-y-1">
|
||||
<label class="block text-xs font-medium text-slate-700">Woonplaats *</label>
|
||||
<input type="text" name="shipping_city" required value="{{ old('shipping_city') }}" placeholder="Amsterdam" class="w-full bg-slate-50 border border-slate-200 rounded-xl px-3.5 py-2 text-xs text-slate-900 focus:bg-white focus:outline-none focus:ring-2 focus:ring-slate-900/10 focus:border-slate-900">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 3. Betaalmethode -->
|
||||
<div class="p-6 rounded-3xl bg-white border border-slate-200 shadow-2xs space-y-4">
|
||||
<div class="p-6 rounded-2xl bg-white border border-slate-200/80 shadow-xs space-y-4">
|
||||
<h2 class="text-xs font-bold text-slate-900 uppercase tracking-wider flex items-center space-x-2">
|
||||
<i data-lucide="credit-card" class="w-4 h-4 text-indigo-600"></i>
|
||||
<i data-lucide="credit-card" class="w-3.5 h-3.5 text-slate-500"></i>
|
||||
<span>3. Betaalmethode</span>
|
||||
</h2>
|
||||
|
||||
<div class="space-y-2.5">
|
||||
<label class="flex items-center justify-between p-3.5 rounded-2xl border border-indigo-200 bg-indigo-50/40 cursor-pointer">
|
||||
<div class="flex items-center space-x-3">
|
||||
<input type="radio" name="payment_method" value="ideal" checked class="text-indigo-600 focus:ring-indigo-500">
|
||||
<span class="text-xs font-bold text-slate-900">iDEAL</span>
|
||||
<div class="space-y-2">
|
||||
<label class="flex items-center justify-between p-3.5 rounded-xl border border-slate-900/10 bg-slate-50 cursor-pointer">
|
||||
<div class="flex items-center space-x-2.5">
|
||||
<input type="radio" name="payment_method" value="ideal" checked class="text-slate-900 focus:ring-slate-900">
|
||||
<span class="text-xs font-semibold text-slate-900">iDEAL</span>
|
||||
</div>
|
||||
<span class="text-[10px] font-mono px-2 py-0.5 rounded bg-white text-indigo-700 font-bold border border-indigo-200">Aanbevolen</span>
|
||||
<span class="text-[10px] font-medium px-2 py-0.5 rounded bg-white text-slate-700 border border-slate-200">Aanbevolen</span>
|
||||
</label>
|
||||
|
||||
<label class="flex items-center justify-between p-3.5 rounded-2xl border border-slate-200 hover:bg-slate-50 cursor-pointer">
|
||||
<div class="flex items-center space-x-3">
|
||||
<input type="radio" name="payment_method" value="bancontact" class="text-indigo-600 focus:ring-indigo-500">
|
||||
<span class="text-xs font-bold text-slate-900">Bancontact</span>
|
||||
<label class="flex items-center justify-between p-3.5 rounded-xl border border-slate-200 hover:bg-slate-50 cursor-pointer transition">
|
||||
<div class="flex items-center space-x-2.5">
|
||||
<input type="radio" name="payment_method" value="bancontact" class="text-slate-900 focus:ring-slate-900">
|
||||
<span class="text-xs font-semibold text-slate-900">Bancontact</span>
|
||||
</div>
|
||||
<span class="text-[11px] text-slate-400">België</span>
|
||||
</label>
|
||||
|
||||
<label class="flex items-center justify-between p-3.5 rounded-2xl border border-slate-200 hover:bg-slate-50 cursor-pointer">
|
||||
<div class="flex items-center space-x-3">
|
||||
<input type="radio" name="payment_method" value="overboeking" class="text-indigo-600 focus:ring-indigo-500">
|
||||
<span class="text-xs font-bold text-slate-900">Handmatige Bankoverschrijving</span>
|
||||
<label class="flex items-center justify-between p-3.5 rounded-xl border border-slate-200 hover:bg-slate-50 cursor-pointer transition">
|
||||
<div class="flex items-center space-x-2.5">
|
||||
<input type="radio" name="payment_method" value="overboeking" class="text-slate-900 focus:ring-slate-900">
|
||||
<span class="text-xs font-semibold text-slate-900">Handmatige Bankoverschrijving</span>
|
||||
</div>
|
||||
<span class="text-[11px] text-slate-400">Achteraf / Factuur</span>
|
||||
<span class="text-[11px] text-slate-400">Achteraf</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-xs font-semibold text-slate-700 mb-1">Opmerkingen voor de printer (optioneel)</label>
|
||||
<textarea name="notes" rows="2" placeholder="Bijv. neerzetten bij de achterdeur of speciale printinstructie..." class="w-full bg-slate-50 border border-slate-200 rounded-xl p-3 text-xs text-slate-900 focus:bg-white focus:outline-none focus:ring-1 focus:ring-indigo-500"></textarea>
|
||||
<div class="space-y-1 pt-1">
|
||||
<label class="block text-xs font-medium text-slate-700">Opmerkingen voor de printer (optioneel)</label>
|
||||
<textarea name="notes" rows="2" placeholder="Bijv. gewenste printoriëntatie of bezorginstructie..." class="w-full bg-slate-50 border border-slate-200 rounded-xl p-2.5 text-xs text-slate-900 focus:bg-white focus:outline-none focus:ring-2 focus:ring-slate-900/10 focus:border-slate-900"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -116,49 +116,49 @@
|
||||
|
||||
<!-- Rechterkant: Besteloverzicht Card -->
|
||||
<div class="lg:col-span-5">
|
||||
<div class="p-6 rounded-3xl bg-white border border-slate-200 shadow-md space-y-5 sticky top-24">
|
||||
<h3 class="text-sm font-bold text-slate-900 uppercase tracking-wider pb-3 border-b border-slate-100">Jouw Bestelling</h3>
|
||||
<div class="p-6 rounded-2xl bg-white border border-slate-200/80 shadow-xs space-y-4 sticky top-24">
|
||||
<h3 class="text-xs font-bold text-slate-900 uppercase tracking-wider pb-2 border-b border-slate-100">Jouw Bestelling</h3>
|
||||
|
||||
<div class="space-y-3 max-h-72 overflow-y-auto pr-1">
|
||||
<div class="space-y-2.5 max-h-72 overflow-y-auto pr-1">
|
||||
@foreach($cart as $item)
|
||||
<div class="flex items-center justify-between text-xs py-2 border-b border-slate-100">
|
||||
<div class="flex items-center justify-between text-xs py-1.5 border-b border-slate-100">
|
||||
<div class="space-y-0.5">
|
||||
<div class="font-bold text-slate-900">{{ $item['name'] }} <span class="text-slate-400 font-normal">× {{ $item['quantity'] }}</span></div>
|
||||
<div class="text-[11px] text-slate-500">{{ $item['material'] }} • {{ $item['color'] }} ({{ $item['scale'] }})</div>
|
||||
<div class="font-medium text-slate-900">{{ $item['name'] }} <span class="text-slate-400">× {{ $item['quantity'] }}</span></div>
|
||||
<div class="text-[11px] text-slate-500">{{ strtoupper($item['material']) }} • {{ $item['color'] }} ({{ $item['scale'] }})</div>
|
||||
</div>
|
||||
<span class="font-mono font-bold text-slate-900">
|
||||
<span class="font-semibold text-slate-900">
|
||||
€ {{ number_format($item['price'] * $item['quantity'], 2, ',', '.') }}
|
||||
</span>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
|
||||
<div class="space-y-2 text-xs pt-2">
|
||||
<div class="space-y-1.5 text-xs pt-1">
|
||||
<div class="flex justify-between text-slate-600">
|
||||
<span>Subtotaal</span>
|
||||
<span class="font-mono font-bold text-slate-900">€ {{ number_format($subtotal, 2, ',', '.') }}</span>
|
||||
<span class="font-semibold text-slate-900">€ {{ number_format($subtotal, 2, ',', '.') }}</span>
|
||||
</div>
|
||||
<div class="flex justify-between text-slate-600">
|
||||
<span>Verzendkosten</span>
|
||||
@if($shipping == 0)
|
||||
<span class="text-emerald-600 font-bold">GRATIS</span>
|
||||
<span class="text-emerald-700 font-semibold bg-emerald-50 px-2 py-0.5 rounded-md">Gratis</span>
|
||||
@else
|
||||
<span class="font-mono font-bold text-slate-900">€ {{ number_format($shipping, 2, ',', '.') }}</span>
|
||||
<span class="font-semibold text-slate-900">€ {{ number_format($shipping, 2, ',', '.') }}</span>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pt-4 border-t border-slate-100 flex justify-between items-baseline">
|
||||
<span class="text-sm font-bold text-slate-900">Totaalbedrag</span>
|
||||
<span class="text-2xl font-black text-indigo-600 font-mono">€ {{ number_format($total, 2, ',', '.') }}</span>
|
||||
<div class="pt-3 border-t border-slate-100 flex justify-between items-baseline">
|
||||
<span class="text-xs font-medium text-slate-600">Totaalbedrag</span>
|
||||
<span class="text-xl font-bold text-slate-900">€ {{ number_format($total, 2, ',', '.') }}</span>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="w-full py-4 rounded-2xl bg-indigo-600 hover:bg-indigo-500 text-white font-bold text-xs uppercase tracking-wider transition shadow-lg shadow-indigo-600/25 flex items-center justify-center space-x-2 cursor-pointer">
|
||||
<i data-lucide="check-circle-2" class="w-4 h-4"></i>
|
||||
<span>Bestelling Definitief Plaatsen</span>
|
||||
<button type="submit" class="w-full py-3 rounded-xl bg-slate-900 hover:bg-slate-800 text-white font-medium text-xs transition shadow-xs flex items-center justify-center space-x-2 cursor-pointer">
|
||||
<i data-lucide="check" class="w-4 h-4"></i>
|
||||
<span>Bestelling Plaatsen</span>
|
||||
</button>
|
||||
|
||||
<p class="text-center text-[10px] text-slate-400">
|
||||
<p class="text-center text-[11px] text-slate-400">
|
||||
Door te bestellen ga je akkoord met de algemene voorwaarden van Jouwdriedee.nl.
|
||||
</p>
|
||||
</div>
|
||||
@@ -168,4 +168,3 @@
|
||||
</form>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
|
||||
@@ -1,105 +1,98 @@
|
||||
@extends('layouts.app')
|
||||
|
||||
@section('title', 'Bestelling Ontvangen! | Jouwdriedee.nl')
|
||||
@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">
|
||||
<div class="max-w-2xl 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 class="space-y-3">
|
||||
<div class="w-14 h-14 rounded-2xl bg-emerald-50 text-emerald-600 border border-emerald-200/60 flex items-center justify-center mx-auto">
|
||||
<i data-lucide="check" class="w-7 h-7 stroke-[2]"></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.
|
||||
<h1 class="text-2xl sm:text-3xl font-bold tracking-tight text-slate-900">Bedankt voor je bestelling!</h1>
|
||||
<p class="text-xs text-slate-500 max-w-sm mx-auto">
|
||||
We hebben jouw bestelling ontvangen. De printbestanden worden klaargezet voor productie.
|
||||
</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 class="inline-block px-3 py-1.5 rounded-xl bg-slate-100 border border-slate-200 text-xs font-mono font-medium text-slate-700">
|
||||
Bestelnummer: <span class="font-bold text-slate-900">{{ $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">
|
||||
<div class="p-6 rounded-2xl bg-white border border-slate-200/80 shadow-xs text-left space-y-5">
|
||||
<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>
|
||||
<i data-lucide="printer" class="w-3.5 h-3.5 text-slate-500"></i>
|
||||
<span>Productiestatus</span>
|
||||
</h3>
|
||||
|
||||
<div class="relative pl-6 space-y-6 border-l-2 border-slate-200">
|
||||
<div class="relative pl-6 space-y-5 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>
|
||||
<span class="absolute -left-[31px] top-0.5 w-3.5 h-3.5 rounded-full bg-emerald-500 ring-4 ring-emerald-50"></span>
|
||||
<h4 class="text-xs font-semibold text-slate-900">1. Bestelling ontvangen & gecontroleerd</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>
|
||||
<span class="absolute -left-[31px] top-0.5 w-3.5 h-3.5 rounded-full bg-slate-900 ring-4 ring-slate-100 animate-pulse"></span>
|
||||
<h4 class="text-xs font-semibold text-slate-900">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>
|
||||
<div class="relative opacity-50">
|
||||
<span class="absolute -left-[31px] top-0.5 w-3.5 h-3.5 rounded-full bg-slate-300"></span>
|
||||
<h4 class="text-xs font-medium 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 class="relative opacity-50">
|
||||
<span class="absolute -left-[31px] top-0.5 w-3.5 h-3.5 rounded-full bg-slate-300"></span>
|
||||
<h4 class="text-xs font-medium text-slate-700">4. Kwaliteitscontrole & PostNL verzending</h4>
|
||||
<p class="text-[11px] text-slate-500 mt-0.5">Je ontvangt per e-mail 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">
|
||||
<div class="p-6 rounded-2xl bg-white border border-slate-200/80 shadow-xs text-left space-y-4">
|
||||
<h3 class="text-xs font-bold text-slate-900 uppercase tracking-wider pb-2 border-b border-slate-100">
|
||||
Overzicht van jouw bestelling
|
||||
</h3>
|
||||
|
||||
<div class="space-y-3">
|
||||
<div class="space-y-2">
|
||||
@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 class="font-medium text-slate-900">{{ $item->product_name }} <span class="text-slate-400">× {{ $item->quantity }}</span></div>
|
||||
<div class="text-[11px] text-slate-500">{{ strtoupper($item->material) }} • {{ $item->color }} ({{ $item->scale }})</div>
|
||||
</div>
|
||||
<span class="font-mono font-bold text-slate-900">
|
||||
€ {{ number_format($item->total_price, 2, ',', '.') }}
|
||||
<span class="font-semibold 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 }}
|
||||
<span class="font-medium text-slate-500">Totaal betaald</span>
|
||||
<span class="text-base font-bold text-slate-900">{{ $order->formatted_total }}</span>
|
||||
</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>
|
||||
<div class="flex flex-col sm:flex-row items-center justify-center gap-3">
|
||||
<a href="{{ route('home') }}" class="px-5 py-2.5 rounded-xl bg-slate-900 hover:bg-slate-800 text-white font-medium text-xs transition shadow-xs">
|
||||
Terug naar de homepagina
|
||||
</a>
|
||||
<a href="{{ route('account.index') }}" class="px-5 py-2.5 rounded-xl bg-white hover:bg-slate-50 border border-slate-200 text-slate-700 font-medium text-xs transition">
|
||||
Bestelling bekijken in account
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
|
||||
Reference in New Issue
Block a user