NiekRabelink/jouwdriedee
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Complete redesign: modern, fresh, subtle Scandinavian tech studio look & feel for webshop and admin

Browse Source
This commit is contained in:
Niek Rabelink
2026-11-02 08:17:25 +01:00
parent 9deef06169
commit c222434f3c
29 changed files with 2380 additions and 2801 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/images/logo-icon.svg
+22 -32
View File
@@ -1,41 +1,31 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" fill="none"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" fill="none">
<defs> <defs>
<!-- Soft Warm Coral Gradient --> <linearGradient id="icoTop" x1="0%" y1="0%" x2="100%" y2="100%">
<linearGradient id="iconCoral" x1="0%" y1="0%" x2="100%" y2="100%"> <stop offset="0%" stop-color="#38bdf8" />
<stop offset="0%" stop-color="#FB7185" /> <stop offset="100%" stop-color="#0284c7" />
<stop offset="100%" stop-color="#F43F5E" />
</linearGradient> </linearGradient>
<linearGradient id="icoLeft" x1="0%" y1="0%" x2="100%" y2="100%">
<!-- Warm Amber Gradient --> <stop offset="0%" stop-color="#6366f1" />
<linearGradient id="iconAmber" x1="0%" y1="0%" x2="100%" y2="100%"> <stop offset="100%" stop-color="#4338ca" />
<stop offset="0%" stop-color="#FBBF24" />
<stop offset="100%" stop-color="#F59E0B" />
</linearGradient> </linearGradient>
<linearGradient id="icoRight" x1="0%" y1="0%" x2="100%" y2="100%">
<!-- Gentle Sky Gradient --> <stop offset="0%" stop-color="#0ea5e9" />
<linearGradient id="iconSky" x1="0%" y1="0%" x2="100%" y2="100%"> <stop offset="100%" stop-color="#0369a1" />
<stop offset="0%" stop-color="#38BDF8" />
<stop offset="100%" stop-color="#0284C7" />
</linearGradient> </linearGradient>
</defs> </defs>
<!-- Friendly Rounded Layered 3D Emblem --> <!-- Background rounded squircle with subtle border -->
<g transform="translate(4, 4)"> <rect x="2" y="2" width="44" height="44" rx="12" fill="#0f172a" />
<!-- Base Layer (Amber) -->
<rect x="2" y="26" width="36" height="12" rx="6" fill="url(#iconAmber)" /> <!-- Modern Geometric 3D Prism Mark -->
<g transform="translate(6, 6)">
<!-- Middle Layer (Coral) --> <!-- Top Face -->
<rect x="2" y="14" width="36" height="12" rx="6" fill="url(#iconCoral)" /> <path d="M18 6 L31 13.5 L18 21 L5 13.5 Z" fill="url(#icoTop)" />
<!-- Left Face -->
<!-- Top Layer (Sky) --> <path d="M5 15.5 L17 22.5 L17 34 L5 27 Z" fill="url(#icoLeft)" />
<rect x="2" y="2" width="36" height="12" rx="6" fill="url(#iconSky)" /> <!-- Right Face -->
<path d="M19 22.5 L31 15.5 L31 27 L19 34 Z" fill="url(#icoRight)" />
<!-- Cute extrusion highlights --> <!-- Precision Core Light Accent -->
<circle cx="10" cy="8" r="2.5" fill="#FFFFFF" opacity="0.85" /> <circle cx="18" cy="21" r="2" fill="#ffffff" opacity="0.95" />
<circle cx="10" cy="20" r="2.5" fill="#FFFFFF" opacity="0.85" />
<circle cx="10" cy="32" r="2.5" fill="#FFFFFF" opacity="0.85" />
<!-- Cute Sparkle -->
<path d="M33 4L34 7L37 8L34 9L33 12L32 9L29 8L32 7Z" fill="#FFFFFF" opacity="0.95" />
</g> </g>
</svg> </svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.5 KiB

After

Width:  |  Height:  |  Size: 1.2 KiB

public/images/logo.svg
+35 -57
View File
@@ -1,68 +1,46 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 52" fill="none"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 48" fill="none" class="w-auto h-full">
<defs> <defs>
<!-- Soft Warm Coral Gradient --> <!-- Modern high-end gradients -->
<linearGradient id="softCoral" x1="0%" y1="0%" x2="100%" y2="100%"> <linearGradient id="facetTop" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#FB7185" /> <stop offset="0%" stop-color="#38bdf8" />
<stop offset="100%" stop-color="#F43F5E" /> <stop offset="100%" stop-color="#0284c7" />
</linearGradient> </linearGradient>
<linearGradient id="facetLeft" x1="0%" y1="0%" x2="100%" y2="100%">
<!-- Warm Amber / Mango Gradient --> <stop offset="0%" stop-color="#6366f1" />
<linearGradient id="softAmber" x1="0%" y1="0%" x2="100%" y2="100%"> <stop offset="100%" stop-color="#4338ca" />
<stop offset="0%" stop-color="#FBBF24" />
<stop offset="100%" stop-color="#F59E0B" />
</linearGradient> </linearGradient>
<linearGradient id="facetRight" x1="0%" y1="0%" x2="100%" y2="100%">
<!-- Gentle Sky / Mint Gradient --> <stop offset="0%" stop-color="#0ea5e9" />
<linearGradient id="softSky" x1="0%" y1="0%" x2="100%" y2="100%"> <stop offset="100%" stop-color="#0369a1" />
<stop offset="0%" stop-color="#38BDF8" />
<stop offset="100%" stop-color="#0284C7" />
</linearGradient> </linearGradient>
<linearGradient id="accentDot" x1="0%" y1="0%" x2="100%" y2="100%">
<!-- Playful Text Gradient --> <stop offset="0%" stop-color="#38bdf8" />
<linearGradient id="textGradient" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="100%" stop-color="#6366f1" />
<stop offset="0%" stop-color="#F43F5E" />
<stop offset="60%" stop-color="#EA580C" />
<stop offset="100%" stop-color="#F59E0B" />
</linearGradient> </linearGradient>
<!-- Soft Glow Filter -->
<filter id="softGlow" x="-20%" y="-20%" width="140%" height="140%">
<feDropShadow dx="0" dy="2" stdDeviation="3" flood-color="#F43F5E" flood-opacity="0.18" />
</filter>
</defs> </defs>
<!-- Friendly Rounded 3D Printing Emblem (Cubic Spool / Layered Soft Prism) --> <!-- Modern Geometric 3D Prism Mark -->
<g transform="translate(6, 6)" filter="url(#softGlow)"> <g transform="translate(6, 6)">
<!-- Base Layer (Soft Amber Pill) --> <!-- Top Face (Soft Isometric Diamond) -->
<rect x="2" y="24" width="36" height="12" rx="6" fill="url(#softAmber)" /> <path d="M18 4 L30 11 L18 18 L6 11 Z" fill="url(#facetTop)" />
<!-- Left Face (Dimension with 3D print layer notch) -->
<!-- Middle Layer (Soft Coral Pill) --> <path d="M6 13 L17 19.5 L17 31 L6 24.5 Z" fill="url(#facetLeft)" />
<rect x="2" y="13" width="36" height="12" rx="6" fill="url(#softCoral)" /> <!-- Right Face -->
<path d="M19 19.5 L30 13 L30 24.5 L19 31 Z" fill="url(#facetRight)" />
<!-- Top Layer (Soft Sky Pill) --> <!-- Precision Core Light Accent -->
<rect x="2" y="2" width="36" height="12" rx="6" fill="url(#softSky)" /> <circle cx="18" cy="18" r="1.75" fill="#ffffff" opacity="0.95" />
<!-- Cute 3D Extrusion Dot / Sparkle Highlight -->
<circle cx="10" cy="8" r="2.5" fill="#FFFFFF" opacity="0.85" />
<circle cx="10" cy="19" r="2.5" fill="#FFFFFF" opacity="0.85" />
<circle cx="10" cy="30" r="2.5" fill="#FFFFFF" opacity="0.85" />
<!-- Delicate cute star / nozzle sparkle -->
<path d="M33 4L34 7L37 8L34 9L33 12L32 9L29 8L32 7Z" fill="#FFFFFF" opacity="0.9" />
</g> </g>
<!-- Wordmark Text --> <!-- Modern Clean Typography -->
<g transform="translate(56, 36)"> <g transform="translate(50, 31)">
<!-- "jouw" in Friendly Rounded Slate --> <!-- 'jouw' in clean, light-medium neutral font -->
<text x="0" y="0" font-family="'Fredoka', 'Nunito', system-ui, sans-serif" font-weight="600" font-size="27" fill="#1E293B" letter-spacing="-0.3">jouw</text> <text font-family="'Plus Jakarta Sans', system-ui, -apple-system, sans-serif" font-size="22" font-weight="500" fill="#0f172a" letter-spacing="-0.5">jouw</text>
<!-- 'driedee' in confident bold -->
<!-- "3D" / "driedee" in Vibrant Soft Gradient --> <text x="56" font-family="'Plus Jakarta Sans', system-ui, -apple-system, sans-serif" font-size="22" font-weight="700" fill="#0f172a" letter-spacing="-0.5">driedee</text>
<text x="64" y="0" font-family="'Fredoka', 'Nunito', system-ui, sans-serif" font-weight="700" font-size="27" fill="url(#textGradient)" letter-spacing="-0.3">driedee</text> <!-- Vibrant Modern Dot -->
<circle cx="137.5" cy="-5.5" r="3" fill="url(#accentDot)" />
<!-- Subtle Friendly ".nl" Badge --> <!-- '.nl' micro pill badge -->
<g transform="translate(148, -20)"> <rect x="145" y="-17" width="24" height="15" rx="4" fill="#f1f5f9" />
<rect x="0" y="0" width="26" height="17" rx="8.5" fill="#F1F5F9" /> <text x="149" y="-6" font-family="'Plus Jakarta Sans', system-ui, -apple-system, sans-serif" font-size="10" font-weight="700" fill="#475569" letter-spacing="0.2">nl</text>
<text x="13" y="12" font-family="'Fredoka', 'Nunito', system-ui, sans-serif" font-weight="700" font-size="10.5" fill="#64748B" text-anchor="middle">.nl</text>
</g>
</g> </g>
</svg> </svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.0 KiB

After

Width:  |  Height:  |  Size: 2.3 KiB

resources/css/app.css
+21 -16
View File
@@ -4,8 +4,8 @@
@source '../../storage/framework/views/*.php'; @source '../../storage/framework/views/*.php';
@theme { @theme {
--font-heading: 'Fredoka', ui-rounded, 'Nunito', system-ui, sans-serif; --font-heading: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--font-sans: 'Nunito', system-ui, sans-serif; --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
} }
@layer utilities { @layer utilities {
@@ -13,22 +13,27 @@
font-family: var(--font-heading); font-family: var(--font-heading);
} }
/* Refined, smooth playful button */ /* Modern subtle glass effect */
.playful-btn { .glass-header {
transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1); background-color: rgba(255, 255, 255, 0.85);
} backdrop-filter: blur(12px);
.playful-btn:hover { -webkit-backdrop-filter: blur(12px);
transform: translateY(-2px);
}
.playful-btn:active {
transform: translateY(1px);
} }
/* Modern playful card */ /* Clean modern micro-elevation */
.playful-card { .card-hover {
transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s ease;
} }
.playful-card:hover { .card-hover:hover {
transform: translateY(-3px); transform: translateY(-2px);
box-shadow: 0 12px 24px -10px rgba(15, 23, 42, 0.08);
}
/* Refined button transition */
.btn-press {
transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1);
}
.btn-press:active {
transform: scale(0.98);
} }
} }
resources/views/account/index.blade.php
+81 -79
View File
@@ -3,22 +3,22 @@
@section('title', 'Mijn Account | Jouwdriedee.nl') @section('title', 'Mijn Account | Jouwdriedee.nl')
@section('content') @section('content')
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 sm:py-12 space-y-8" x-data="{ tab: 'orders' }"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 sm:py-12 space-y-6" x-data="{ tab: 'orders' }">
<!-- Account Welcome Banner --> <!-- Account Welcome Banner -->
<div class="p-6 sm:p-8 rounded-3xl bg-gradient-to-r from-amber-500/10 via-rose-500/10 to-indigo-500/10 border border-slate-200/80 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4"> <div class="p-6 sm:p-7 rounded-2xl bg-white border border-slate-200/80 shadow-xs flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
<div class="flex items-center space-x-4"> <div class="flex items-center space-x-3.5">
<div class="w-14 h-14 rounded-2xl bg-gradient-to-tr from-amber-400 to-rose-400 flex items-center justify-center text-white font-heading font-black text-2xl shadow-xs"> <div class="w-12 h-12 rounded-xl bg-slate-900 text-white flex items-center justify-center font-bold text-base shadow-xs">
{{ strtoupper(substr($user->name, 0, 1)) }} {{ strtoupper(substr($user->name, 0, 1)) }}
</div> </div>
<div> <div>
<div class="flex items-center space-x-2"> <div class="flex items-center space-x-2">
<h1 class="font-heading text-xl sm:text-2xl font-black text-slate-900"> <h1 class="text-xl font-bold text-slate-900">
Hallo, {{ $user->name }}! {{ $user->name }}
</h1> </h1>
@if($user->isAdmin()) @if($user->isAdmin())
<span class="px-2.5 py-0.5 rounded-full bg-slate-900 text-amber-400 text-[10px] font-black uppercase tracking-wider"> <span class="px-2 py-0.5 rounded-full bg-slate-100 text-slate-700 text-[10px] font-semibold border border-slate-200">
Admin Beheerder Beheerder
</span> </span>
@endif @endif
</div> </div>
@@ -28,17 +28,17 @@
</div> </div>
</div> </div>
<div class="flex items-center space-x-2.5 self-stretch sm:self-auto justify-end"> <div class="flex items-center space-x-2 self-stretch sm:self-auto justify-end">
@if($user->isAdmin()) @if($user->isAdmin())
<a href="{{ route('admin.content.index') }}" class="px-4 py-2 rounded-xl bg-slate-900 hover:bg-slate-800 text-amber-300 font-black text-xs transition flex items-center space-x-1.5 shadow-xs"> <a href="{{ route('admin.content.index') }}" class="px-3.5 py-2 rounded-xl bg-slate-900 hover:bg-slate-800 text-white font-medium text-xs transition flex items-center space-x-1.5 shadow-xs">
<i data-lucide="shield" class="w-4 h-4"></i> <i data-lucide="shield" class="w-3.5 h-3.5"></i>
<span>Admin Dashboard</span> <span>Admin Dashboard</span>
</a> </a>
@endif @endif
<form action="{{ route('logout') }}" method="POST"> <form action="{{ route('logout') }}" method="POST">
@csrf @csrf
<button type="submit" class="px-4 py-2 rounded-xl bg-white hover:bg-rose-50 text-rose-600 border border-slate-200 text-xs font-bold transition flex items-center space-x-1.5 cursor-pointer shadow-2xs"> <button type="submit" class="px-3.5 py-2 rounded-xl bg-white hover:bg-slate-50 text-slate-600 hover:text-slate-900 border border-slate-200 text-xs font-medium transition flex items-center space-x-1.5 cursor-pointer">
<i data-lucide="log-out" class="w-3.5 h-3.5"></i> <i data-lucide="log-out" class="w-3.5 h-3.5"></i>
<span>Uitloggen</span> <span>Uitloggen</span>
</button> </button>
@@ -47,69 +47,72 @@
</div> </div>
<!-- Navigation Tabs --> <!-- Navigation Tabs -->
<div class="flex items-center space-x-2 border-b border-slate-200 text-xs font-bold pb-2"> <div class="flex items-center space-x-1.5 p-1 bg-slate-100/80 rounded-xl max-w-max text-xs font-medium">
<button <button
type="button" type="button"
@click="tab = 'orders'" @click="tab = 'orders'"
:class="tab === 'orders' ? 'bg-amber-400 text-slate-950 font-black' : 'bg-white text-slate-600 hover:bg-slate-100'" :class="tab === 'orders' ? 'bg-white text-slate-900 font-semibold shadow-2xs' : 'text-slate-600 hover:text-slate-900'"
class="px-4 py-2 rounded-xl transition flex items-center space-x-1.5 cursor-pointer" class="px-3 py-1.5 rounded-lg transition flex items-center space-x-1.5 cursor-pointer"
> >
<i data-lucide="package" class="w-4 h-4"></i> <i data-lucide="package" class="w-3.5 h-3.5"></i>
<span>Mijn Bestellingen ({{ $orders->count() }})</span> <span>Mijn Bestellingen</span>
<span class="px-1.5 py-0.2 rounded-md text-[10px] {{ $tab === 'orders' ? 'bg-slate-100 text-slate-700' : 'bg-slate-200/60 text-slate-600' }}">
{{ $orders->count() }}
</span>
</button> </button>
<button <button
type="button" type="button"
@click="tab = 'profile'" @click="tab = 'profile'"
:class="tab === 'profile' ? 'bg-amber-400 text-slate-950 font-black' : 'bg-white text-slate-600 hover:bg-slate-100'" :class="tab === 'profile' ? 'bg-white text-slate-900 font-semibold shadow-2xs' : 'text-slate-600 hover:text-slate-900'"
class="px-4 py-2 rounded-xl transition flex items-center space-x-1.5 cursor-pointer" class="px-3 py-1.5 rounded-lg transition flex items-center space-x-1.5 cursor-pointer"
> >
<i data-lucide="user-cog" class="w-4 h-4"></i> <i data-lucide="user-cog" class="w-3.5 h-3.5"></i>
<span>Profiel & Beveiliging</span> <span>Profiel & Beveiliging</span>
</button> </button>
</div> </div>
<!-- TAB 1: BESTELLINGEN --> <!-- TAB 1: BESTELLINGEN -->
<div x-show="tab === 'orders'" class="space-y-4"> <div x-show="tab === 'orders'" class="space-y-3">
@if($orders->isEmpty()) @if($orders->isEmpty())
<div class="p-12 text-center rounded-3xl bg-white border border-slate-200/80 shadow-xs space-y-3"> <div class="p-10 text-center rounded-2xl bg-white border border-slate-200/80 shadow-xs space-y-2.5">
<div class="w-14 h-14 rounded-2xl bg-amber-50 text-amber-600 flex items-center justify-center mx-auto text-2xl"> <div class="w-10 h-10 rounded-xl bg-slate-100 text-slate-400 flex items-center justify-center mx-auto">
🛍️ <i data-lucide="shopping-bag" class="w-5 h-5"></i>
</div> </div>
<h3 class="font-heading text-lg font-black text-slate-900">Nog geen bestellingen geplaatst</h3> <h3 class="text-sm font-semibold text-slate-900">Nog geen bestellingen</h3>
<p class="text-xs text-slate-500 max-w-sm mx-auto"> <p class="text-xs text-slate-500 max-w-xs mx-auto">
Je hebt nog geen 3D prints besteld. Ontdek onze fidget toys, Pokémon figuren en popculture modellen! Je hebt nog geen 3D prints besteld. Bekijk onze studio collectie!
</p> </p>
<div class="pt-2"> <div class="pt-2">
<a href="{{ route('catalog') }}" class="inline-flex items-center space-x-2 px-5 py-2.5 rounded-xl bg-amber-400 hover:bg-amber-300 text-slate-950 text-xs font-black transition"> <a href="{{ route('catalog') }}" class="inline-flex items-center space-x-1.5 px-4 py-2 rounded-xl bg-slate-900 hover:bg-slate-800 text-white text-xs font-medium transition shadow-xs">
<span>Winkelassortiment bekijken</span> <span>Collectie bekijken</span>
<i data-lucide="arrow-right" class="w-3.5 h-3.5"></i> <i data-lucide="arrow-right" class="w-3 h-3"></i>
</a> </a>
</div> </div>
</div> </div>
@else @else
<div class="space-y-4"> <div class="space-y-3">
@foreach($orders as $order) @foreach($orders as $order)
<div class="p-5 sm:p-6 rounded-3xl bg-white border border-slate-200/80 shadow-xs space-y-4"> <div class="p-5 rounded-2xl bg-white border border-slate-200/80 shadow-2xs space-y-3">
<!-- Header regel --> <!-- Header regel -->
<div class="flex flex-col sm:flex-row sm:items-center justify-between pb-3 border-b border-slate-100 gap-2"> <div class="flex flex-col sm:flex-row sm:items-center justify-between pb-3 border-b border-slate-100 gap-2">
<div> <div>
<span class="font-mono font-bold text-xs text-slate-900">#{{ $order->order_number }}</span> <span class="font-mono font-bold text-xs text-slate-900">#{{ $order->order_number }}</span>
<span class="text-xs text-slate-400 ml-2">&bull; {{ $order->created_at->format('d-m-Y om H:i') }}</span> <span class="text-xs text-slate-400 ml-2">&bull; {{ $order->created_at->format('d-m-Y H:i') }}</span>
</div> </div>
<div class="flex items-center space-x-3"> <div class="flex items-center space-x-3">
<span class="px-2.5 py-0.5 rounded-full text-[10px] font-black uppercase <span class="px-2 py-0.5 rounded-full text-[10px] font-semibold
@if($order->status === 'completed' || $order->status === 'shipped' || $order->status === 'verzonden') bg-emerald-100 text-emerald-800 @if($order->status === 'completed' || $order->status === 'shipped') bg-emerald-50 text-emerald-700 border border-emerald-200/60
@elseif($order->status === 'printed' || $order->status === 'processing' || $order->status === 'in_print') bg-sky-100 text-sky-800 @elseif($order->status === 'printed' || $order->status === 'processing') bg-sky-50 text-sky-700 border border-sky-200/60
@elseif($order->status === 'cancelled' || $order->status === 'geannuleerd') bg-rose-100 text-rose-800 @elseif($order->status === 'cancelled') bg-rose-50 text-rose-700 border border-rose-200/60
@else bg-amber-100 text-amber-900 @endif @else bg-amber-50 text-amber-700 border border-amber-200/60 @endif
"> ">
{{ str_replace('_', ' ', $order->status) }} {{ $order->status_label }}
</span> </span>
<span class="font-heading font-black text-slate-900 text-sm"> <span class="font-bold text-slate-900 text-xs">
{{ $order->formatted_total }} {{ $order->formatted_total }}
</span> </span>
</div> </div>
@@ -118,28 +121,28 @@
<!-- Items --> <!-- Items -->
<div class="divide-y divide-slate-100"> <div class="divide-y divide-slate-100">
@foreach($order->items as $item) @foreach($order->items as $item)
<div class="py-2.5 flex items-start justify-between text-xs"> <div class="py-2 flex items-start justify-between text-xs">
<div> <div>
<div class="font-bold text-slate-900">{{ $item->product_name }}</div> <div class="font-medium text-slate-900">{{ $item->product_name }}</div>
<div class="text-[11px] text-slate-500 mt-0.5"> <div class="text-[11px] text-slate-500 mt-0.5">
@if($item->material) Materiaal: <span class="font-semibold">{{ strtoupper($item->material) }}</span> &bull; @endif @if($item->material) {{ strtoupper($item->material) }} &bull; @endif
@if($item->color) Kleur: <span class="font-semibold">{{ $item->color }}</span> &bull; @endif @if($item->color) {{ $item->color }} &bull; @endif
Schaal: {{ $item->scale ?? '100%' }} {{ $item->scale ?? '100%' }}
</div> </div>
</div> </div>
<div class="text-right"> <div class="text-right">
<span class="font-semibold text-slate-600">{{ $item->quantity }}x</span> <span class="text-slate-500">{{ $item->quantity }}x</span>
<span class="font-bold text-slate-900 ml-1">&euro; {{ number_format($item->total_price, 2, ',', '.') }}</span> <span class="font-semibold text-slate-900 ml-1">&euro; {{ number_format($item->total_price, 2, ',', '.') }}</span>
</div> </div>
</div> </div>
@endforeach @endforeach
</div> </div>
<!-- Bezorging adres --> <!-- Bezorging adres -->
<div class="pt-3 border-t border-slate-100 flex items-center justify-between text-[11px] text-slate-500"> <div class="pt-2.5 border-t border-slate-100 flex items-center justify-between text-[11px] text-slate-500">
<span>Bezorgadres: {{ $order->shipping_street }} {{ $order->shipping_number }}, {{ $order->shipping_postal_code }} {{ $order->shipping_city }}</span> <span>Bezorgadres: {{ $order->shipping_street }} {{ $order->shipping_number }}, {{ $order->shipping_postal_code }} {{ $order->shipping_city }}</span>
<span class="font-bold text-emerald-600 flex items-center space-x-1"> <span class="font-medium text-slate-700 flex items-center space-x-1">
<i data-lucide="truck" class="w-3.5 h-3.5"></i> <i data-lucide="truck" class="w-3.5 h-3.5 text-slate-400"></i>
<span>PostNL</span> <span>PostNL</span>
</span> </span>
</div> </div>
@@ -151,31 +154,31 @@
</div> </div>
<!-- TAB 2: PROFIEL & BEVEILIGING --> <!-- TAB 2: PROFIEL & BEVEILIGING -->
<div x-show="tab === 'profile'" class="grid grid-cols-1 md:grid-cols-2 gap-6"> <div x-show="tab === 'profile'" class="grid grid-cols-1 md:grid-cols-2 gap-5">
<!-- Profielgegevens --> <!-- Profielgegevens -->
<div class="p-6 rounded-3xl bg-white border border-slate-200/80 shadow-xs space-y-4"> <div class="p-6 rounded-2xl bg-white border border-slate-200/80 shadow-xs space-y-3.5">
<h3 class="font-heading text-base font-black text-slate-900 flex items-center space-x-2"> <h3 class="text-xs font-bold text-slate-900 uppercase tracking-wider flex items-center space-x-1.5">
<i data-lucide="user" class="w-4 h-4 text-amber-500"></i> <i data-lucide="user" class="w-3.5 h-3.5 text-slate-500"></i>
<span>Persoonlijke gegevens</span> <span>Persoonlijke gegevens</span>
</h3> </h3>
<form action="{{ route('account.profile') }}" method="POST" class="space-y-4"> <form action="{{ route('account.profile') }}" method="POST" class="space-y-3 pt-1">
@csrf @csrf
@method('PUT') @method('PUT')
<div class="space-y-1.5"> <div class="space-y-1">
<label class="block text-xs font-bold text-slate-700">Naam</label> <label class="block text-xs font-medium text-slate-700">Naam</label>
<input type="text" name="name" value="{{ old('name', $user->name) }}" required class="w-full bg-slate-50 border border-slate-200 rounded-xl px-3.5 py-2 text-xs font-semibold focus:bg-white focus:outline-none focus:ring-2 focus:ring-amber-400"> <input type="text" name="name" value="{{ old('name', $user->name) }}" required class="w-full bg-slate-50 border border-slate-200 rounded-xl px-3 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 class="space-y-1.5"> <div class="space-y-1">
<label class="block text-xs font-bold text-slate-700">E-mailadres</label> <label class="block text-xs font-medium text-slate-700">E-mailadres</label>
<input type="email" name="email" value="{{ old('email', $user->email) }}" required class="w-full bg-slate-50 border border-slate-200 rounded-xl px-3.5 py-2 text-xs font-semibold focus:bg-white focus:outline-none focus:ring-2 focus:ring-amber-400"> <input type="email" name="email" value="{{ old('email', $user->email) }}" required class="w-full bg-slate-50 border border-slate-200 rounded-xl px-3 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 class="pt-2"> <div class="pt-1">
<button type="submit" class="px-5 py-2.5 rounded-xl bg-amber-400 hover:bg-amber-300 text-slate-950 font-black text-xs transition cursor-pointer"> <button type="submit" class="px-4 py-2 rounded-xl bg-slate-900 hover:bg-slate-800 text-white font-medium text-xs transition shadow-xs cursor-pointer">
Gegevens Opslaan Gegevens Opslaan
</button> </button>
</div> </div>
@@ -183,33 +186,33 @@
</div> </div>
<!-- Wachtwoord Wijzigen --> <!-- Wachtwoord Wijzigen -->
<div class="p-6 rounded-3xl bg-white border border-slate-200/80 shadow-xs space-y-4"> <div class="p-6 rounded-2xl bg-white border border-slate-200/80 shadow-xs space-y-3.5">
<h3 class="font-heading text-base font-black text-slate-900 flex items-center space-x-2"> <h3 class="text-xs font-bold text-slate-900 uppercase tracking-wider flex items-center space-x-1.5">
<i data-lucide="lock" class="w-4 h-4 text-rose-500"></i> <i data-lucide="lock" class="w-3.5 h-3.5 text-slate-500"></i>
<span>Wachtwoord wijzigen</span> <span>Wachtwoord wijzigen</span>
</h3> </h3>
<form action="{{ route('account.password') }}" method="POST" class="space-y-4"> <form action="{{ route('account.password') }}" method="POST" class="space-y-3 pt-1">
@csrf @csrf
@method('PUT') @method('PUT')
<div class="space-y-1.5"> <div class="space-y-1">
<label class="block text-xs font-bold text-slate-700">Huidig wachtwoord</label> <label class="block text-xs font-medium text-slate-700">Huidig wachtwoord</label>
<input type="password" name="current_password" required placeholder="••••••••" class="w-full bg-slate-50 border border-slate-200 rounded-xl px-3.5 py-2 text-xs font-semibold focus:bg-white focus:outline-none focus:ring-2 focus:ring-amber-400"> <input type="password" name="current_password" required placeholder="••••••••" class="w-full bg-slate-50 border border-slate-200 rounded-xl px-3 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 class="space-y-1.5"> <div class="space-y-1">
<label class="block text-xs font-bold text-slate-700">Nieuw wachtwoord (min. 8 tekens)</label> <label class="block text-xs font-medium text-slate-700">Nieuw wachtwoord (min. 8 tekens)</label>
<input type="password" name="password" required placeholder="••••••••" class="w-full bg-slate-50 border border-slate-200 rounded-xl px-3.5 py-2 text-xs font-semibold focus:bg-white focus:outline-none focus:ring-2 focus:ring-amber-400"> <input type="password" name="password" required placeholder="••••••••" class="w-full bg-slate-50 border border-slate-200 rounded-xl px-3 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 class="space-y-1.5"> <div class="space-y-1">
<label class="block text-xs font-bold text-slate-700">Bevestig nieuw wachtwoord</label> <label class="block text-xs font-medium text-slate-700">Bevestig nieuw wachtwoord</label>
<input type="password" name="password_confirmation" required placeholder="••••••••" class="w-full bg-slate-50 border border-slate-200 rounded-xl px-3.5 py-2 text-xs font-semibold focus:bg-white focus:outline-none focus:ring-2 focus:ring-amber-400"> <input type="password" name="password_confirmation" required placeholder="••••••••" class="w-full bg-slate-50 border border-slate-200 rounded-xl px-3 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 class="pt-2"> <div class="pt-1">
<button type="submit" class="px-5 py-2.5 rounded-xl bg-slate-900 hover:bg-slate-800 text-white font-black text-xs transition cursor-pointer"> <button type="submit" class="px-4 py-2 rounded-xl bg-slate-900 hover:bg-slate-800 text-white font-medium text-xs transition shadow-xs cursor-pointer">
Wachtwoord Wijzigen Wachtwoord Wijzigen
</button> </button>
</div> </div>
@@ -220,4 +223,3 @@
</div> </div>
@endsection @endsection
resources/views/admin/categories/edit.blade.php
+23 -24
View File
@@ -6,58 +6,57 @@
<div class="space-y-6 max-w-xl mx-auto"> <div class="space-y-6 max-w-xl mx-auto">
<!-- Header --> <!-- Header -->
<div class="flex items-center justify-between pb-6 border-b border-slate-800"> <div class="flex items-center justify-between pb-6 border-b border-slate-200/80">
<div> <div>
<a href="{{ route('admin.categories.index') }}" class="text-xs text-amber-400 font-bold hover:underline inline-flex items-center space-x-1 mb-1"> <a href="{{ route('admin.categories.index') }}" class="text-xs text-slate-500 hover:text-slate-900 font-medium inline-flex items-center space-x-1 mb-1 transition">
<i data-lucide="arrow-left" class="w-3.5 h-3.5"></i> <i data-lucide="arrow-left" class="w-3.5 h-3.5"></i>
<span>Terug naar Categorieën</span> <span>Terug naar Categorieën</span>
</a> </a>
<h1 class="font-heading text-2xl font-black text-white">Categorie Bewerken: {{ $category->name }}</h1> <h1 class="text-2xl font-bold tracking-tight text-slate-900">Categorie Bewerken</h1>
<p class="text-xs text-slate-500 mt-0.5">{{ $category->name }}</p>
</div> </div>
</div> </div>
<!-- Edit Form --> <!-- Edit Form -->
<form action="{{ route('admin.categories.update', $category) }}" method="POST" class="space-y-6"> <form action="{{ route('admin.categories.update', $category) }}" method="POST" class="space-y-5">
@csrf @csrf
@method('PUT') @method('PUT')
<div class="p-6 rounded-3xl bg-slate-900 border border-slate-800 space-y-4"> <div class="p-6 rounded-2xl bg-white border border-slate-200/80 shadow-xs space-y-4">
<div class="space-y-1.5"> <div class="space-y-1">
<label class="block text-xs font-bold text-slate-300">Categorienaam *</label> <label class="block text-xs font-medium text-slate-700">Categorienaam *</label>
<input type="text" name="name" value="{{ old('name', $category->name) }}" required class="w-full bg-slate-950 border border-slate-700 rounded-xl px-3.5 py-2.5 text-xs text-white font-bold focus:outline-none focus:ring-2 focus:ring-amber-400"> <input type="text" name="name" value="{{ old('name', $category->name) }}" required class="w-full bg-slate-50 border border-slate-200 rounded-xl px-3.5 py-2 text-xs text-slate-900 font-semibold focus:bg-white focus:outline-none focus:ring-2 focus:ring-slate-900/10 focus:border-slate-900">
</div> </div>
<div class="space-y-1.5"> <div class="space-y-1">
<label class="block text-xs font-bold text-slate-300">Omschrijving</label> <label class="block text-xs font-medium text-slate-700">Omschrijving</label>
<textarea name="description" rows="3" class="w-full bg-slate-950 border border-slate-700 rounded-xl px-3.5 py-2 text-xs text-white leading-relaxed">{{ old('description', $category->description) }}</textarea> <textarea name="description" rows="3" class="w-full bg-slate-50 border border-slate-200 rounded-xl px-3.5 py-2 text-xs text-slate-900 leading-relaxed focus:bg-white focus:outline-none focus:ring-2 focus:ring-slate-900/10 focus:border-slate-900">{{ old('description', $category->description) }}</textarea>
</div> </div>
<div class="grid grid-cols-2 gap-4"> <div class="grid grid-cols-2 gap-4">
<div class="space-y-1.5"> <div class="space-y-1">
<label class="block text-xs font-bold text-slate-300">Lucide Icoon</label> <label class="block text-xs font-medium text-slate-700">Lucide Icoon</label>
<input type="text" name="icon" value="{{ old('icon', $category->icon) }}" placeholder="sparkles, zap, film..." class="w-full bg-slate-950 border border-slate-700 rounded-xl px-3 py-2 text-xs text-white"> <input type="text" name="icon" value="{{ old('icon', $category->icon) }}" placeholder="sparkles, zap, film..." class="w-full bg-slate-50 border border-slate-200 rounded-xl px-3 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 class="space-y-1.5"> <div class="space-y-1">
<label class="block text-xs font-bold text-slate-300">Volgorde</label> <label class="block text-xs font-medium text-slate-700">Volgorde</label>
<input type="number" name="sort_order" value="{{ old('sort_order', $category->sort_order) }}" class="w-full bg-slate-950 border border-slate-700 rounded-xl px-3 py-2 text-xs text-white"> <input type="number" name="sort_order" value="{{ old('sort_order', $category->sort_order) }}" class="w-full bg-slate-50 border border-slate-200 rounded-xl px-3 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> </div>
</div> </div>
<div class="flex items-center justify-end space-x-3"> <div class="flex items-center justify-end space-x-2.5">
<a href="{{ route('admin.categories.index') }}" class="px-4 py-2.5 rounded-xl bg-slate-800 text-slate-300 hover:text-white text-xs font-bold transition"> <a href="{{ route('admin.categories.index') }}" class="px-4 py-2 rounded-xl bg-white hover:bg-slate-50 border border-slate-200 text-slate-700 text-xs font-medium transition">
Annuleren Annuleren
</a> </a>
<button type="submit" class="px-6 py-2.5 rounded-xl bg-amber-400 hover:bg-amber-300 text-slate-950 font-black text-xs transition flex items-center space-x-1.5"> <button type="submit" class="px-4 py-2 rounded-xl bg-slate-900 hover:bg-slate-800 text-white text-xs font-medium transition shadow-xs cursor-pointer">
<i data-lucide="save" class="w-4 h-4"></i> Wijzigingen Opslaan
<span>Opslaan</span>
</button> </button>
</div> </div>
</form> </form>
</div> </div>
@endsection @endsection
resources/views/admin/categories/index.blade.php
+22 -16
View File
@@ -6,41 +6,48 @@
<div class="space-y-6"> <div class="space-y-6">
<!-- Header --> <!-- Header -->
<div class="flex items-center justify-between pb-6 border-b border-slate-800"> <div class="flex items-center justify-between pb-6 border-b border-slate-200/80">
<div> <div>
<div class="inline-flex items-center space-x-2 text-xs text-amber-400 font-bold uppercase tracking-wider mb-1"> <div class="inline-flex items-center space-x-1.5 text-xs text-slate-500 font-medium mb-1">
<i data-lucide="folder-tree" class="w-4 h-4"></i> <i data-lucide="folder-tree" class="w-3.5 h-3.5"></i>
<span>Winkelstructuur</span> <span>Winkelstructuur</span>
</div> </div>
<h1 class="font-heading text-2xl sm:text-3xl font-black text-white">Categorieën Beheer</h1> <h1 class="text-2xl font-bold tracking-tight text-slate-900">Categorieën</h1>
<p class="text-xs sm:text-sm text-slate-400 mt-1">Beheer categorie titels, omschrijvingen en sortering.</p> <p class="text-xs text-slate-500 mt-1">Beheer categorietitels, omschrijvingen en sortering van de webshop.</p>
</div> </div>
</div> </div>
@if(session('success'))
<div class="p-3.5 rounded-xl bg-emerald-50 border border-emerald-200/60 text-emerald-800 text-xs flex items-center space-x-2.5">
<i data-lucide="check-circle" class="w-4 h-4 text-emerald-600 shrink-0"></i>
<span class="font-medium">{{ session('success') }}</span>
</div>
@endif
<!-- Categories Grid --> <!-- Categories Grid -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-6"> <div class="grid grid-cols-1 md:grid-cols-3 gap-5">
@foreach($categories as $category) @foreach($categories as $category)
<div class="p-6 rounded-3xl bg-slate-900 border border-slate-800 flex flex-col justify-between space-y-4"> <div class="p-5 rounded-2xl bg-white border border-slate-200/80 shadow-2xs hover:border-slate-300 transition flex flex-col justify-between space-y-4">
<div class="space-y-3"> <div class="space-y-2.5">
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<span class="px-2.5 py-1 rounded-lg bg-amber-400/20 text-amber-400 font-mono text-xs font-black"> <span class="px-2 py-0.5 rounded-md bg-slate-100 text-slate-700 font-mono text-[11px]">
/catalogus?category={{ $category->slug }} /catalogus?category={{ $category->slug }}
</span> </span>
<span class="text-xs text-slate-400 font-bold"> <span class="text-xs text-slate-500 font-medium">
{{ $category->products_count }} producten {{ $category->products_count }} producten
</span> </span>
</div> </div>
<h3 class="font-heading text-lg font-black text-white">{{ $category->name }}</h3> <h3 class="text-base font-bold text-slate-900">{{ $category->name }}</h3>
<p class="text-xs text-slate-400 leading-relaxed font-normal">{{ $category->description }}</p> <p class="text-xs text-slate-500 leading-relaxed font-normal">{{ $category->description }}</p>
</div> </div>
<div class="pt-4 border-t border-slate-800 flex items-center justify-between"> <div class="pt-3.5 border-t border-slate-100 flex items-center justify-between">
<a href="{{ route('catalog', ['category' => $category->slug]) }}" target="_blank" class="text-xs text-slate-400 hover:text-white flex items-center space-x-1"> <a href="{{ route('catalog', ['category' => $category->slug]) }}" target="_blank" class="text-xs text-slate-500 hover:text-slate-900 flex items-center space-x-1 transition">
<span>Bekijk in shop</span> <span>Bekijk in shop</span>
<i data-lucide="external-link" class="w-3 h-3"></i> <i data-lucide="external-link" class="w-3 h-3"></i>
</a> </a>
<a href="{{ route('admin.categories.edit', $category) }}" class="px-3.5 py-1.5 rounded-xl bg-slate-800 hover:bg-amber-400 text-slate-200 hover:text-slate-950 text-xs font-bold transition flex items-center space-x-1"> <a href="{{ route('admin.categories.edit', $category) }}" class="px-3 py-1.5 rounded-lg bg-slate-100 hover:bg-slate-900 text-slate-700 hover:text-white text-xs font-medium transition flex items-center space-x-1.5">
<i data-lucide="pencil" class="w-3 h-3"></i> <i data-lucide="pencil" class="w-3 h-3"></i>
<span>Bewerken</span> <span>Bewerken</span>
</a> </a>
@@ -51,4 +58,3 @@
</div> </div>
@endsection @endsection
resources/views/admin/content/index.blade.php
+250 -347
View File
File diff suppressed because it is too large Load Diff
resources/views/admin/makerworld/index.blade.php
+524 -547
View File
File diff suppressed because it is too large Load Diff
resources/views/admin/makerworld/staging.blade.php
+108 -137
View File
@@ -6,84 +6,66 @@
<div class="space-y-6" x-data="artikelBeheerApp()"> <div class="space-y-6" x-data="artikelBeheerApp()">
<!-- Top Header & Breadcrumb --> <!-- Top Header & Breadcrumb -->
<div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4 pb-6 border-b border-slate-200/80"> <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4 pb-6 border-b border-slate-200/60">
<div> <div>
<div class="flex items-center space-x-2 text-xs text-amber-700 font-bold uppercase tracking-wider mb-1"> <span class="text-[11px] font-semibold uppercase tracking-wider text-slate-400 block mb-1">MakerWorld Modellen</span>
<span class="inline-block w-2 h-2 rounded-full bg-amber-500 animate-pulse"></span> <h1 class="font-heading text-2xl sm:text-3xl font-bold text-slate-900 tracking-tight">Artikel Beheer (Staging)</h1>
<span>Staging & Curation</span>
<span>&bull;</span>
<span>Geïmporteerde Modellen</span>
</div>
<h1 class="text-2xl sm:text-3xl font-black text-slate-900 flex items-center space-x-3">
<span class="p-2 bg-gradient-to-tr from-amber-400 to-amber-500 rounded-2xl text-slate-950 shadow-sm">
<i data-lucide="layers" class="w-6 h-6"></i>
</span>
<span>Artikel Beheer</span>
</h1>
<p class="mt-1 text-xs sm:text-sm text-slate-500"> <p class="mt-1 text-xs sm:text-sm text-slate-500">
Beoordeel binnengehaalde MakerWorld modellen. Prijzen zijn automatisch berekend op basis van de 3D-printcalculator (gewicht, printtijd & kleuren). Pas naar wens aan en publiceer met 1 klik! Beoordeel binnengehaalde modellen. Prijzen zijn automatisch berekend op basis van gewicht, printduur en kleuren via de 3D-calculator.
</p> </p>
</div> </div>
<!-- Header Quick Actions --> <!-- Header Quick Actions -->
<div class="flex items-center space-x-2.5 self-start md:self-auto"> <div class="flex items-center space-x-2.5 self-start md:self-auto">
<a href="{{ route('admin.makerworld.index', ['tab' => 'collections']) }}" class="px-3.5 py-2 rounded-xl bg-white hover:bg-slate-50 text-slate-700 text-xs font-bold transition flex items-center space-x-1.5 border border-slate-200 shadow-sm"> <a href="{{ route('admin.makerworld.index', ['tab' => 'collections']) }}" class="px-3.5 py-2 rounded-lg bg-white hover:bg-slate-50 text-slate-700 text-xs font-medium transition flex items-center space-x-1.5 border border-slate-200/80 shadow-2xs">
<i data-lucide="refresh-cw" class="w-4 h-4 text-amber-600"></i> <i data-lucide="refresh-cw" class="w-3.5 h-3.5 text-slate-400"></i>
<span>Collecties & Sync</span> <span>Collecties & Sync</span>
</a> </a>
<a href="{{ route('admin.products.index') }}" class="px-3.5 py-2 rounded-xl bg-slate-900 hover:bg-slate-800 text-white text-xs font-bold transition flex items-center space-x-1.5 shadow-sm"> <a href="{{ route('admin.products.index') }}" class="px-3.5 py-2 rounded-lg bg-slate-900 hover:bg-slate-800 text-white text-xs font-medium transition flex items-center space-x-1.5 shadow-2xs">
<i data-lucide="box" class="w-4 h-4"></i> <i data-lucide="box" class="w-3.5 h-3.5"></i>
<span>Actieve Producten</span> <span>Actieve Producten</span>
</a> </a>
</div> </div>
</div> </div>
<!-- Status Filter Tabs --> <!-- Status Filter Tabs (Sleek Segmented Control) -->
<div class="flex items-center space-x-2 border-b border-slate-200/80 pb-2 overflow-x-auto text-xs font-bold"> <div class="flex items-center space-x-1.5 p-1 bg-slate-100/80 rounded-xl w-fit overflow-x-auto text-xs">
<a href="{{ route('admin.makerworld.staging', array_merge(request()->except('tab', 'page'), ['tab' => 'draft'])) }}" class="px-3.5 py-2 rounded-xl transition flex items-center space-x-1.5 {{ ($tab ?? 'draft') === 'draft' ? 'bg-amber-400 text-slate-950 font-black shadow-sm' : 'text-slate-600 hover:text-slate-900 hover:bg-white' }}"> <a href="{{ route('admin.makerworld.staging', array_merge(request()->except('tab', 'page'), ['tab' => 'draft'])) }}" class="px-3 py-1.5 rounded-lg transition flex items-center space-x-1.5 {{ ($tab ?? 'draft') === 'draft' ? 'bg-white text-slate-900 font-semibold shadow-2xs' : 'text-slate-600 hover:text-slate-900' }}">
<i data-lucide="layers" class="w-3.5 h-3.5"></i>
<span>Wacht op Beoordeling</span> <span>Wacht op Beoordeling</span>
<span class="px-1.5 py-0.5 rounded text-[10px] {{ ($tab ?? 'draft') === 'draft' ? 'bg-slate-950 text-amber-400 font-black' : 'bg-slate-100 text-slate-600' }}"> <span class="px-1.5 py-0.2 rounded-full text-[10px] font-semibold {{ ($tab ?? 'draft') === 'draft' ? 'bg-amber-100 text-amber-800' : 'bg-slate-200 text-slate-600' }}">
{{ $countDraft ?? 0 }} {{ $countDraft ?? 0 }}
</span> </span>
</a> </a>
<a href="{{ route('admin.makerworld.staging', array_merge(request()->except('tab', 'page'), ['tab' => 'published'])) }}" class="px-3.5 py-2 rounded-xl transition flex items-center space-x-1.5 {{ ($tab ?? 'draft') === 'published' ? 'bg-emerald-600 text-white font-black shadow-sm' : 'text-slate-600 hover:text-slate-900 hover:bg-white' }}"> <a href="{{ route('admin.makerworld.staging', array_merge(request()->except('tab', 'page'), ['tab' => 'published'])) }}" class="px-3 py-1.5 rounded-lg transition flex items-center space-x-1.5 {{ ($tab ?? 'draft') === 'published' ? 'bg-white text-slate-900 font-semibold shadow-2xs' : 'text-slate-600 hover:text-slate-900' }}">
<span class="w-1.5 h-1.5 rounded-full {{ ($tab ?? 'draft') === 'published' ? 'bg-emerald-200' : 'bg-emerald-500' }}"></span> <span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span>
<span>Reeds Gepubliceerd in Webshop</span> <span>Gepubliceerd</span>
<span class="px-1.5 py-0.5 rounded text-[10px] {{ ($tab ?? 'draft') === 'published' ? 'bg-emerald-800 text-emerald-200 font-black' : 'bg-slate-100 text-slate-600' }}"> <span class="text-[11px] text-slate-400">({{ $countPublished ?? 0 }})</span>
{{ $countPublished ?? 0 }}
</span>
</a> </a>
<a href="{{ route('admin.makerworld.staging', array_merge(request()->except('tab', 'page'), ['tab' => 'all'])) }}" class="px-3.5 py-2 rounded-xl transition flex items-center space-x-1.5 {{ ($tab ?? 'draft') === 'all' ? 'bg-indigo-600 text-white font-black shadow-sm' : 'text-slate-600 hover:text-slate-900 hover:bg-white' }}"> <a href="{{ route('admin.makerworld.staging', array_merge(request()->except('tab', 'page'), ['tab' => 'all'])) }}" class="px-3 py-1.5 rounded-lg transition flex items-center space-x-1.5 {{ ($tab ?? 'draft') === 'all' ? 'bg-white text-slate-900 font-semibold shadow-2xs' : 'text-slate-600 hover:text-slate-900' }}">
<i data-lucide="download-cloud" class="w-3.5 h-3.5"></i> <span>Alle Geïmporteerd</span>
<span>Alle Binnengehaalde Modellen</span> <span class="text-[11px] text-slate-400">({{ $countAll ?? 0 }})</span>
<span class="px-1.5 py-0.5 rounded text-[10px] {{ ($tab ?? 'draft') === 'all' ? 'bg-indigo-800 text-indigo-200 font-black' : 'bg-slate-100 text-slate-600' }}">
{{ $countAll ?? 0 }}
</span>
</a> </a>
</div> </div>
<!-- Filter & Search Toolbar --> <!-- Filter & Search Toolbar -->
<div class="bg-white rounded-2xl p-3.5 border border-slate-200/80 shadow-sm flex flex-col md:flex-row md:items-center justify-between gap-3"> <div class="bg-white rounded-xl p-3 border border-slate-200/60 shadow-2xs flex flex-col md:flex-row md:items-center justify-between gap-3">
<form method="GET" action="{{ route('admin.makerworld.staging') }}" class="flex flex-wrap items-center gap-2.5 flex-1"> <form method="GET" action="{{ route('admin.makerworld.staging') }}" class="flex flex-wrap items-center gap-2.5 flex-1">
<!-- Search input -->
<div class="relative min-w-[220px] flex-1"> <div class="relative min-w-[220px] flex-1">
<input <input
type="text" type="text"
name="q" name="q"
value="{{ request('q') }}" value="{{ request('q') }}"
placeholder="Zoek op titel, maker of model-ID..." placeholder="Zoek op titel of ID..."
class="w-full pl-9 pr-3 py-2 bg-slate-50 border border-slate-200 rounded-xl text-slate-800 text-xs placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-amber-400 focus:bg-white transition" class="w-full pl-8 pr-3 py-1.5 bg-slate-50 border border-slate-200/80 rounded-lg text-slate-800 text-xs placeholder-slate-400 focus:outline-none focus:ring-1 focus:ring-slate-400 focus:bg-white transition"
> >
<i data-lucide="search" class="w-4 h-4 text-slate-400 absolute left-3 top-1/2 -translate-y-1/2"></i> <i data-lucide="search" class="w-3.5 h-3.5 text-slate-400 absolute left-2.5 top-1/2 -translate-y-1/2"></i>
</div> </div>
<!-- Collection dropdown filter --> <div class="w-48">
<div class="w-52"> <select name="collection_id" onchange="this.form.submit()" class="w-full px-2.5 py-1.5 bg-slate-50 border border-slate-200/80 rounded-lg text-slate-700 text-xs focus:outline-none focus:ring-1 focus:ring-slate-400">
<select name="collection_id" onchange="this.form.submit()" class="w-full px-3 py-2 bg-slate-50 border border-slate-200 rounded-xl text-slate-700 text-xs font-semibold focus:outline-none focus:ring-2 focus:ring-amber-400">
<option value="">Alle collecties</option> <option value="">Alle collecties</option>
@foreach($collections as $col) @foreach($collections as $col)
<option value="{{ $col->id }}" {{ request('collection_id') == $col->id ? 'selected' : '' }}> <option value="{{ $col->id }}" {{ request('collection_id') == $col->id ? 'selected' : '' }}>
@@ -93,54 +75,52 @@
</select> </select>
</div> </div>
<button type="submit" class="px-3.5 py-2 rounded-xl bg-slate-900 hover:bg-slate-800 text-white text-xs font-bold transition"> <button type="submit" class="px-3 py-1.5 rounded-lg bg-slate-900 hover:bg-slate-800 text-white text-xs font-medium transition">
Filteren Filter
</button> </button>
@if(request()->hasAny(['q', 'collection_id'])) @if(request()->hasAny(['q', 'collection_id']))
<a href="{{ route('admin.makerworld.staging') }}" class="text-xs text-rose-600 hover:underline font-bold"> <a href="{{ route('admin.makerworld.staging') }}" class="text-xs text-rose-600 hover:underline">
Wissen Wissen
</a> </a>
@endif @endif
</form> </form>
<div class="flex items-center space-x-2 text-xs"> <div class="text-xs text-slate-500 font-medium">
<span class="px-3 py-1 rounded-full bg-amber-50 text-amber-800 border border-amber-200/80 font-bold"> <span>{{ $totalStaged }} concepten wachten op review</span>
{{ $totalStaged }} concepten wachten op beoordeling
</span>
</div> </div>
</div> </div>
<!-- Bulk Selection Action Bar --> <!-- Bulk Selection Bar -->
<div x-show="selectedIds.length > 0" x-cloak class="p-4 rounded-2xl bg-amber-400 text-slate-950 flex flex-col md:flex-row items-center justify-between gap-4 shadow-md"> <div x-show="selectedIds.length > 0" x-cloak class="p-3.5 rounded-xl bg-slate-900 text-white flex flex-col md:flex-row items-center justify-between gap-3 shadow-md">
<div class="flex items-center space-x-2 font-black text-xs uppercase tracking-wider"> <div class="flex items-center space-x-2 text-xs font-medium">
<i data-lucide="check-square" class="w-5 h-5"></i> <i data-lucide="check-square" class="w-4 h-4 text-emerald-400"></i>
<span x-text="selectedIds.length + ' artikelen geselecteerd'"></span> <span x-text="selectedIds.length + ' geselecteerd'"></span>
</div> </div>
<form action="{{ route('admin.makerworld.staging.bulk-publish') }}" method="POST" class="flex flex-wrap items-center gap-3"> <form action="{{ route('admin.makerworld.staging.bulk-publish') }}" method="POST" class="flex flex-wrap items-center gap-2.5">
@csrf @csrf
<template x-for="id in selectedIds" :key="id"> <template x-for="id in selectedIds" :key="id">
<input type="hidden" name="product_ids[]" :value="id"> <input type="hidden" name="product_ids[]" :value="id">
</template> </template>
<div class="flex items-center space-x-2"> <div class="flex items-center space-x-1.5">
<label class="text-xs font-bold uppercase">Categorie:</label> <label class="text-[11px] text-slate-300">Categorie:</label>
<select name="category_id" required class="px-3 py-1.5 bg-white text-slate-900 rounded-xl text-xs font-bold border border-amber-300"> <select name="category_id" required class="px-2.5 py-1 bg-slate-800 text-white rounded-md text-xs border border-slate-700">
@foreach($categories as $cat) @foreach($categories as $cat)
<option value="{{ $cat->id }}">{{ $cat->name }}</option> <option value="{{ $cat->id }}">{{ $cat->name }}</option>
@endforeach @endforeach
</select> </select>
</div> </div>
<div class="flex items-center space-x-2"> <div class="flex items-center space-x-1.5">
<label class="text-xs font-bold uppercase">Winstmarge %:</label> <label class="text-[11px] text-slate-300">Marge %:</label>
<input type="number" name="custom_markup" placeholder="40" class="w-16 px-2 py-1.5 bg-white text-slate-900 rounded-xl text-xs font-bold border border-amber-300"> <input type="number" name="custom_markup" placeholder="40" class="w-14 px-2 py-1 bg-slate-800 text-white rounded-md text-xs border border-slate-700">
</div> </div>
<button type="submit" class="px-4 py-2 bg-slate-950 hover:bg-slate-900 text-amber-400 font-black text-xs rounded-xl shadow transition flex items-center space-x-1.5"> <button type="submit" class="px-3 py-1 bg-white hover:bg-slate-100 text-slate-900 font-semibold text-xs rounded-md transition flex items-center space-x-1 cursor-pointer">
<i data-lucide="check" class="w-4 h-4"></i> <i data-lucide="check" class="w-3.5 h-3.5"></i>
<span>Publiceer Selectie naar Webshop</span> <span>Publiceer Selectie</span>
</button> </button>
</form> </form>
@@ -149,7 +129,7 @@
<template x-for="id in selectedIds" :key="id"> <template x-for="id in selectedIds" :key="id">
<input type="hidden" name="product_ids[]" :value="id"> <input type="hidden" name="product_ids[]" :value="id">
</template> </template>
<button type="submit" class="px-3 py-2 bg-rose-600 hover:bg-rose-700 text-white font-bold text-xs rounded-xl transition flex items-center space-x-1"> <button type="submit" class="px-2.5 py-1 bg-rose-600 hover:bg-rose-700 text-white font-medium text-xs rounded-md transition flex items-center space-x-1 cursor-pointer">
<i data-lucide="trash-2" class="w-3.5 h-3.5"></i> <i data-lucide="trash-2" class="w-3.5 h-3.5"></i>
<span>Verwijderen</span> <span>Verwijderen</span>
</button> </button>
@@ -158,10 +138,10 @@
<!-- Select All Trigger --> <!-- Select All Trigger -->
@if($stagedProducts->isNotEmpty()) @if($stagedProducts->isNotEmpty())
<div class="flex items-center justify-between text-xs text-slate-500 px-1"> <div class="flex items-center justify-between text-xs text-slate-400 px-1">
<button type="button" @click="toggleSelectAll()" class="hover:text-amber-700 font-bold transition flex items-center space-x-1.5"> <button type="button" @click="toggleSelectAll()" class="hover:text-slate-800 font-medium transition flex items-center space-x-1.5 cursor-pointer">
<i data-lucide="check" class="w-4 h-4"></i> <i data-lucide="check" class="w-3.5 h-3.5"></i>
<span x-text="selectedIds.length === {{ $stagedProducts->count() }} ? 'Deselecteer alles' : 'Selecteer alle {{ $stagedProducts->count() }} modellen op deze pagina'"></span> <span x-text="selectedIds.length === {{ $stagedProducts->count() }} ? 'Deselecteer alles' : 'Selecteer alle {{ $stagedProducts->count() }} op deze pagina'"></span>
</button> </button>
<span>Pagina {{ $stagedProducts->currentPage() }} van {{ $stagedProducts->lastPage() }}</span> <span>Pagina {{ $stagedProducts->currentPage() }} van {{ $stagedProducts->lastPage() }}</span>
</div> </div>
@@ -169,16 +149,16 @@
<!-- Staged Products Grid --> <!-- Staged Products Grid -->
@if($stagedProducts->isEmpty()) @if($stagedProducts->isEmpty())
<div class="text-center py-16 bg-white rounded-3xl border border-slate-200/80 p-8 shadow-sm"> <div class="text-center py-16 bg-white rounded-2xl border border-slate-200/60 p-8 shadow-2xs">
<div class="w-16 h-16 rounded-2xl bg-amber-50 flex items-center justify-center text-amber-600 mx-auto mb-4 border border-amber-200/60"> <div class="w-12 h-12 rounded-xl bg-slate-100 flex items-center justify-center text-slate-600 mx-auto mb-3">
<i data-lucide="sparkles" class="w-8 h-8"></i> <i data-lucide="check-circle" class="w-6 h-6 text-emerald-500"></i>
</div> </div>
<h3 class="text-lg font-black text-slate-900">Geen concepten in de wachtrij!</h3> <h3 class="text-base font-semibold text-slate-900">Geen concepten in de wachtrij</h3>
<p class="text-xs text-slate-500 max-w-md mx-auto mt-1.5"> <p class="text-xs text-slate-500 max-w-sm mx-auto mt-1">
Alle binnengehaalde modellen zijn al beoordeeld en gepubliceerd, of er zijn nog geen nieuwe modellen toegevoegd aan je gevolgde collecties. Alle binnengehaalde modellen zijn beoordeeld en gepubliceerd, of er zijn nog geen nieuwe modellen gesynchroniseerd.
</p> </p>
<div class="mt-5 flex items-center justify-center space-x-3"> <div class="mt-4">
<a href="{{ route('admin.makerworld.index', ['tab' => 'collections']) }}" class="px-4 py-2.5 rounded-xl bg-amber-400 hover:bg-amber-300 text-slate-950 font-bold text-xs transition shadow-sm"> <a href="{{ route('admin.makerworld.index', ['tab' => 'collections']) }}" class="px-4 py-2 rounded-lg bg-slate-900 text-white font-medium text-xs transition">
Bekijk Collecties & Auto-Sync Bekijk Collecties & Auto-Sync
</a> </a>
</div> </div>
@@ -189,76 +169,75 @@
@php @php
$printInfo = $product->print_info ?? []; $printInfo = $product->print_info ?? [];
@endphp @endphp
<div class="bg-white rounded-2xl border border-slate-200/80 overflow-hidden flex flex-col justify-between shadow-xs hover:border-slate-300 hover:shadow-md transition relative"> <div class="bg-white rounded-xl border border-slate-200/60 overflow-hidden flex flex-col justify-between shadow-2xs hover:border-slate-300 transition relative">
<!-- Top Image Preview & Gallery -->
<div> <div>
<div class="relative aspect-4/3 bg-slate-100 overflow-hidden group"> <!-- Top Image Preview & Gallery -->
<div class="relative aspect-4/3 bg-slate-50 overflow-hidden group">
<img src="{{ $product->image_url }}" alt="{{ $product->name }}" class="w-full h-full object-cover"> <img src="{{ $product->image_url }}" alt="{{ $product->name }}" class="w-full h-full object-cover">
<!-- Selection Checkbox --> <!-- Selection Checkbox -->
<div class="absolute top-2.5 left-2.5 z-10"> <div class="absolute top-2.5 left-2.5 z-10">
<label class="flex items-center justify-center w-7 h-7 rounded-xl bg-white/90 backdrop-blur border border-slate-300 cursor-pointer shadow-sm hover:scale-105 transition"> <label class="flex items-center justify-center w-6 h-6 rounded-md bg-white/95 backdrop-blur border border-slate-300 cursor-pointer shadow-2xs hover:scale-105 transition">
<input type="checkbox" value="{{ $product->id }}" x-model="selectedIds" class="w-4 h-4 text-amber-500 rounded focus:ring-0"> <input type="checkbox" value="{{ $product->id }}" x-model="selectedIds" class="w-3.5 h-3.5 text-slate-900 rounded focus:ring-0">
</label> </label>
</div> </div>
<!-- Draft Badge --> <!-- Draft Badge -->
<div class="absolute top-2.5 right-2.5 flex flex-col items-end gap-1"> <div class="absolute top-2.5 right-2.5 flex flex-col items-end gap-1">
<span class="px-2.5 py-0.5 rounded-full text-[10px] font-black uppercase tracking-wider bg-amber-400 text-slate-950 shadow-xs"> <span class="px-2 py-0.5 rounded-md text-[10px] font-semibold bg-white/95 backdrop-blur text-slate-800 border border-slate-200 shadow-2xs">
Concept Concept
</span> </span>
@if($product->makerworldCollection) @if($product->makerworldCollection)
<span class="px-2 py-0.5 rounded-md text-[9px] font-bold bg-white/95 text-slate-700 border border-slate-200 shadow-xs truncate max-w-[140px]"> <span class="px-2 py-0.5 rounded-md text-[9px] font-medium bg-slate-900/80 text-white backdrop-blur truncate max-w-[140px]">
{{ $product->makerworldCollection->name }} {{ $product->makerworldCollection->name }}
</span> </span>
@endif @endif
</div> </div>
<!-- MakerWorld Link --> <!-- MakerWorld Link -->
<a href="https://makerworld.com/nl/models/{{ $product->makerworld_id }}" target="_blank" class="absolute bottom-2.5 right-2.5 p-1.5 rounded-xl bg-white/90 hover:bg-white text-slate-700 border border-slate-200 shadow-xs backdrop-blur transition" title="Bekijk origineel op MakerWorld"> <a href="https://makerworld.com/nl/models/{{ $product->makerworld_id }}" target="_blank" class="absolute bottom-2.5 right-2.5 p-1.5 rounded-md bg-white/90 hover:bg-white text-slate-700 border border-slate-200 shadow-2xs backdrop-blur transition" title="Bekijk origineel op MakerWorld">
<i data-lucide="external-link" class="w-3.5 h-3.5"></i> <i data-lucide="external-link" class="w-3.5 h-3.5"></i>
</a> </a>
</div> </div>
<!-- Photo Thumbnails Strip (All Pulled Pictures) --> <!-- Photo Thumbnails Strip -->
@if(!empty($product->gallery_images) && count($product->gallery_images) > 0) @if(!empty($product->gallery_images) && count($product->gallery_images) > 0)
<div class="px-3.5 py-2 bg-slate-50 border-b border-slate-100 flex items-center space-x-1.5 overflow-x-auto"> <div class="px-3 py-1.5 bg-slate-50 border-b border-slate-100 flex items-center space-x-1.5 overflow-x-auto">
<span class="text-[10px] font-bold text-slate-400 uppercase tracking-wider shrink-0">Foto's:</span> <span class="text-[9px] uppercase font-semibold text-slate-400 shrink-0">Foto's:</span>
<img src="{{ $product->image_url }}" alt="" class="w-8 h-8 rounded-lg object-cover border-2 border-amber-400 shrink-0"> <img src="{{ $product->image_url }}" alt="" class="w-7 h-7 rounded-md object-cover border border-slate-900 shrink-0">
@foreach(array_slice($product->gallery_images, 0, 5) as $galleryPic) @foreach(array_slice($product->gallery_images, 0, 5) as $galleryPic)
<img src="{{ $galleryPic }}" alt="" class="w-8 h-8 rounded-lg object-cover border border-slate-200 shrink-0 hover:border-slate-400 transition" loading="lazy"> <img src="{{ $galleryPic }}" alt="" class="w-7 h-7 rounded-md object-cover border border-slate-200 shrink-0 hover:border-slate-400 transition" loading="lazy">
@endforeach @endforeach
@if(count($product->gallery_images) > 5) @if(count($product->gallery_images) > 5)
<span class="text-[10px] text-slate-500 font-bold shrink-0">+{{ count($product->gallery_images) - 5 }} meer</span> <span class="text-[9px] text-slate-400 font-medium shrink-0">+{{ count($product->gallery_images) - 5 }}</span>
@endif @endif
</div> </div>
@endif @endif
<!-- Print Specifications Strip --> <!-- Specs Strip -->
<div class="grid grid-cols-3 gap-1 px-3.5 py-2 bg-slate-50/50 border-b border-slate-100 text-center text-xs"> <div class="grid grid-cols-3 gap-1 px-3 py-2 bg-slate-50/50 border-b border-slate-100 text-center text-xs">
<div> <div>
<span class="text-[10px] font-bold text-slate-400 block uppercase">Printtijd</span> <span class="text-[9px] uppercase font-medium text-slate-400 block">Printtijd</span>
<span class="font-bold text-slate-700"> <span class="font-semibold text-slate-700">
{{ $product->print_time_hours ? $product->print_time_hours . ' u' : '-' }} {{ $product->print_time_hours ? $product->print_time_hours . ' u' : '-' }}
</span> </span>
</div> </div>
<div> <div>
<span class="text-[10px] font-bold text-slate-400 block uppercase">Gewicht</span> <span class="text-[9px] uppercase font-medium text-slate-400 block">Gewicht</span>
<span class="font-bold text-slate-700"> <span class="font-semibold text-slate-700">
{{ $product->weight_grams ? $product->weight_grams . ' g' : '-' }} {{ $product->weight_grams ? $product->weight_grams . ' g' : '-' }}
</span> </span>
</div> </div>
<div> <div>
<span class="text-[10px] font-bold text-amber-700 block uppercase">Adviesprijs</span> <span class="text-[9px] uppercase font-semibold text-slate-500 block">Adviesprijs</span>
<span class="font-black text-slate-900 font-heading"> <span class="font-bold text-slate-900 font-heading">
{{ $product->formatted_price }} {{ $product->formatted_price }}
</span> </span>
</div> </div>
</div> </div>
<!-- Meta Details --> <div class="p-3">
<div class="p-3.5 space-y-1.5">
<div class="text-[11px] text-slate-500 flex items-center justify-between"> <div class="text-[11px] text-slate-500 flex items-center justify-between">
<span class="truncate">Maker: <strong class="text-slate-700">{{ $product->makerworld_author ?? 'MakerWorld' }}</strong></span> <span class="truncate">Maker: <strong class="text-slate-700">{{ $product->makerworld_author ?? 'MakerWorld' }}</strong></span>
<span class="font-mono text-slate-400 text-[10px]">#{{ $product->makerworld_id }}</span> <span class="font-mono text-slate-400 text-[10px]">#{{ $product->makerworld_id }}</span>
@@ -267,47 +246,43 @@
</div> </div>
@if($product->status === 'published') @if($product->status === 'published')
<!-- Already Published Info Card --> <div class="p-3 bg-slate-50/80 border-t border-slate-100 space-y-2">
<div class="p-3.5 bg-slate-50/80 border-t border-slate-100 space-y-2.5"> <div class="p-2 rounded-lg bg-emerald-50 border border-emerald-200/60 text-emerald-800 text-xs flex items-center justify-between">
<div class="p-2.5 rounded-xl bg-emerald-50 border border-emerald-200 text-emerald-800 text-xs flex items-center justify-between"> <div class="flex items-center space-x-1.5 font-medium">
<div class="flex items-center space-x-1.5 font-bold"> <i data-lucide="check-circle" class="w-3.5 h-3.5 text-emerald-600"></i>
<i data-lucide="check-circle" class="w-4 h-4 text-emerald-600"></i> <span>Gepubliceerd</span>
<span>In Webshop</span>
</div> </div>
<span class="font-black text-slate-900">{{ $product->formatted_price }}</span> <span class="font-bold text-slate-900">{{ $product->formatted_price }}</span>
</div> </div>
<div class="flex items-center space-x-2"> <div class="flex items-center space-x-2">
<a href="{{ route('admin.products.edit', $product) }}" class="flex-1 py-1.5 px-3 bg-white hover:bg-slate-100 text-slate-700 font-bold rounded-xl text-xs text-center transition flex items-center justify-center space-x-1 border border-slate-200 shadow-xs"> <a href="{{ route('admin.products.edit', $product) }}" class="flex-1 py-1.5 px-3 bg-white hover:bg-slate-100 text-slate-700 font-medium rounded-lg text-xs text-center transition border border-slate-200/80 shadow-2xs">
<i data-lucide="pencil" class="w-3.5 h-3.5"></i> Bewerken
<span>Bewerken & Prijscalculator</span>
</a> </a>
<a href="{{ route('product.show', $product->slug) }}" target="_blank" class="p-1.5 rounded-xl bg-white hover:bg-slate-100 text-slate-600 border border-slate-200 transition shadow-xs" title="Bekijk in Webshop"> <a href="{{ route('product.show', $product->slug) }}" target="_blank" class="p-1.5 rounded-lg bg-white hover:bg-slate-100 text-slate-600 border border-slate-200/80 transition" title="Bekijk in Shop">
<i data-lucide="external-link" class="w-4 h-4"></i> <i data-lucide="external-link" class="w-3.5 h-3.5"></i>
</a> </a>
</div> </div>
</div> </div>
@else @else
<!-- Curation / Publish Form (Inline) --> <!-- Curation / Publish Form -->
<form action="{{ route('admin.makerworld.staging.publish', $product) }}" method="POST" class="p-3.5 bg-slate-50/50 border-t border-slate-100 space-y-2.5"> <form action="{{ route('admin.makerworld.staging.publish', $product) }}" method="POST" class="p-3 bg-slate-50/50 border-t border-slate-100 space-y-2.5">
@csrf @csrf
<!-- Editable Product Name -->
<div> <div>
<label class="block text-[10px] font-bold uppercase tracking-wider text-slate-500 mb-1">Producttitel</label> <label class="block text-[10px] font-medium uppercase tracking-wider text-slate-500 mb-0.5">Titel</label>
<input <input
type="text" type="text"
name="name" name="name"
value="{{ old('name', $product->name) }}" value="{{ old('name', $product->name) }}"
required required
class="w-full px-2.5 py-1.5 bg-white border border-slate-200 rounded-xl text-slate-800 text-xs font-semibold focus:outline-none focus:ring-2 focus:ring-amber-400" class="w-full px-2.5 py-1.5 bg-white border border-slate-200 rounded-lg text-slate-800 text-xs font-medium focus:outline-none focus:ring-1 focus:ring-slate-400"
> >
</div> </div>
<div class="grid grid-cols-2 gap-2"> <div class="grid grid-cols-2 gap-2">
<!-- Category selector -->
<div> <div>
<label class="block text-[10px] font-bold uppercase tracking-wider text-slate-500 mb-1">Categorie</label> <label class="block text-[10px] font-medium uppercase tracking-wider text-slate-500 mb-0.5">Categorie</label>
<select name="category_id" required class="w-full px-2 py-1.5 bg-white border border-slate-200 rounded-xl text-slate-800 text-xs font-semibold focus:outline-none focus:ring-2 focus:ring-amber-400"> <select name="category_id" required class="w-full px-2 py-1.5 bg-white border border-slate-200 rounded-lg text-slate-800 text-xs focus:outline-none focus:ring-1 focus:ring-slate-400">
@foreach($categories as $cat) @foreach($categories as $cat)
<option value="{{ $cat->id }}" {{ $product->category_id == $cat->id ? 'selected' : '' }}> <option value="{{ $cat->id }}" {{ $product->category_id == $cat->id ? 'selected' : '' }}>
{{ $cat->name }} {{ $cat->name }}
@@ -316,44 +291,41 @@
</select> </select>
</div> </div>
<!-- Retail Price -->
<div> <div>
<label class="block text-[10px] font-bold uppercase tracking-wider text-slate-500 mb-1">Verkoopprijs (€)</label> <label class="block text-[10px] font-medium uppercase tracking-wider text-slate-500 mb-0.5">Prijs (€)</label>
<input <input
type="number" type="number"
step="0.01" step="0.01"
name="base_price" name="base_price"
value="{{ old('base_price', $product->base_price) }}" value="{{ old('base_price', $product->base_price) }}"
required required
class="w-full px-2 py-1.5 bg-white border border-slate-200 rounded-xl text-slate-900 text-xs font-black focus:outline-none focus:ring-2 focus:ring-amber-400" class="w-full px-2 py-1.5 bg-white border border-slate-200 rounded-lg text-slate-900 text-xs font-semibold focus:outline-none focus:ring-1 focus:ring-slate-400"
> >
</div> </div>
</div> </div>
<!-- Action Buttons --> <div class="pt-1 flex items-center justify-between gap-2">
<div class="pt-1.5 flex items-center justify-between gap-2"> <button type="submit" class="flex-1 py-1.5 px-3 bg-slate-900 hover:bg-slate-800 text-white font-medium rounded-lg text-xs transition flex items-center justify-center space-x-1 cursor-pointer">
<button type="submit" class="flex-1 py-2 px-3 bg-emerald-600 hover:bg-emerald-500 text-white font-bold rounded-xl text-xs uppercase tracking-wider shadow-xs transition flex items-center justify-center space-x-1"> <i data-lucide="check" class="w-3.5 h-3.5"></i>
<i data-lucide="check" class="w-4 h-4"></i> <span>Publiceer</span>
<span>Publiceer naar Webshop</span>
</button> </button>
<a href="{{ route('admin.products.edit', $product) }}" class="p-2 rounded-xl text-slate-500 hover:text-amber-700 hover:bg-white border border-slate-200 transition" title="Foto's en calculator openen"> <a href="{{ route('admin.products.edit', $product) }}" class="p-1.5 rounded-lg text-slate-500 hover:text-slate-900 hover:bg-white border border-slate-200 transition" title="Foto's en calculator">
<i data-lucide="sliders" class="w-4 h-4"></i> <i data-lucide="sliders" class="w-3.5 h-3.5"></i>
</a> </a>
<button <button
type="submit" type="submit"
form="reject-form-{{ $product->id }}" form="reject-form-{{ $product->id }}"
class="p-2 rounded-xl text-slate-400 hover:text-rose-600 hover:bg-rose-50 border border-slate-200 transition" class="p-1.5 rounded-lg text-slate-400 hover:text-rose-600 hover:bg-rose-50 border border-slate-200 transition cursor-pointer"
title="Concept afwijzen & verwijderen" title="Verwijderen"
> >
<i data-lucide="trash-2" class="w-4 h-4"></i> <i data-lucide="trash-2" class="w-3.5 h-3.5"></i>
</button> </button>
</div> </div>
</form> </form>
@endif @endif
<!-- Standalone Delete Form for this product -->
<form id="reject-form-{{ $product->id }}" action="{{ route('admin.makerworld.staging.reject', $product) }}" method="POST" onsubmit="return confirm('Weet je zeker dat je dit concept wilt verwijderen?');" class="hidden"> <form id="reject-form-{{ $product->id }}" action="{{ route('admin.makerworld.staging.reject', $product) }}" method="POST" onsubmit="return confirm('Weet je zeker dat je dit concept wilt verwijderen?');" class="hidden">
@csrf @csrf
@method('DELETE') @method('DELETE')
@@ -362,7 +334,6 @@
@endforeach @endforeach
</div> </div>
<!-- Pagination -->
<div class="mt-6"> <div class="mt-6">
{{ $stagedProducts->links() }} {{ $stagedProducts->links() }}
</div> </div>
resources/views/admin/orders/index.blade.php
+35 -36
View File
@@ -6,65 +6,65 @@
<div class="space-y-6"> <div class="space-y-6">
<!-- Header --> <!-- Header -->
<div class="flex items-center justify-between pb-6 border-b border-slate-800"> <div class="flex items-center justify-between pb-6 border-b border-slate-200/80">
<div> <div>
<div class="inline-flex items-center space-x-2 text-xs text-amber-400 font-bold uppercase tracking-wider mb-1"> <div class="inline-flex items-center space-x-1.5 text-xs text-slate-500 font-medium mb-1">
<i data-lucide="shopping-cart" class="w-4 h-4"></i> <i data-lucide="shopping-cart" class="w-3.5 h-3.5"></i>
<span>Verkopen & Facturatie</span> <span>Verkopen & Orders</span>
</div> </div>
<h1 class="font-heading text-2xl sm:text-3xl font-black text-white">Bestellingen ({{ $orders->total() }})</h1> <h1 class="text-2xl font-bold tracking-tight text-slate-900">Bestellingen ({{ $orders->total() }})</h1>
<p class="text-xs sm:text-sm text-slate-400 mt-1">Inzicht in binnengekomen bestellingen, status en klantgegevens.</p> <p class="text-xs text-slate-500 mt-1">Overzicht van binnengekomen bestellingen, orderstatussen en verzending.</p>
</div> </div>
</div> </div>
<!-- Orders Table --> <!-- Orders Table -->
<div class="rounded-3xl bg-slate-900 border border-slate-800 overflow-hidden shadow-xl"> <div class="rounded-2xl bg-white border border-slate-200/80 overflow-hidden shadow-2xs">
<div class="overflow-x-auto"> <div class="overflow-x-auto">
<table class="w-full text-left text-xs text-slate-300"> <table class="w-full text-left text-xs text-slate-700">
<thead class="bg-slate-950/80 text-[11px] uppercase tracking-wider text-slate-400 font-bold border-b border-slate-800"> <thead class="bg-slate-50/80 text-[11px] uppercase tracking-wider text-slate-500 font-semibold border-b border-slate-200/70">
<tr> <tr>
<th class="py-3.5 px-4">Order #</th> <th class="py-3 px-4">Order #</th>
<th class="py-3.5 px-4">Datum</th> <th class="py-3 px-4">Datum</th>
<th class="py-3.5 px-4">Klant</th> <th class="py-3 px-4">Klant</th>
<th class="py-3.5 px-4">Items</th> <th class="py-3 px-4">Items</th>
<th class="py-3.5 px-4">Totaal</th> <th class="py-3 px-4">Totaal</th>
<th class="py-3.5 px-4">Status</th> <th class="py-3 px-4">Status</th>
<th class="py-3.5 px-4 text-right">Details</th> <th class="py-3 px-4 text-right">Details</th>
</tr> </tr>
</thead> </thead>
<tbody class="divide-y divide-slate-800/80 font-medium"> <tbody class="divide-y divide-slate-100 font-medium">
@forelse($orders as $order) @forelse($orders as $order)
<tr class="hover:bg-slate-800/50 transition"> <tr class="hover:bg-slate-50/60 transition">
<td class="py-3.5 px-4 font-mono font-bold text-white"> <td class="py-3.5 px-4 font-mono font-bold text-slate-900">
{{ $order->order_number }} {{ $order->order_number }}
</td> </td>
<td class="py-3.5 px-4 text-slate-400"> <td class="py-3.5 px-4 text-slate-500">
{{ $order->created_at->format('d-m-Y H:i') }} {{ $order->created_at->format('d-m-Y H:i') }}
</td> </td>
<td class="py-3.5 px-4"> <td class="py-3.5 px-4">
<div class="font-bold text-white">{{ $order->customer_name }}</div> <div class="font-semibold text-slate-900">{{ $order->customer_name }}</div>
<div class="text-[11px] text-slate-400">{{ $order->customer_email }}</div> <div class="text-[11px] text-slate-400 font-normal">{{ $order->customer_email }}</div>
</td> </td>
<td class="py-3.5 px-4"> <td class="py-3.5 px-4">
<span class="px-2 py-0.5 rounded-md bg-slate-800 text-slate-300 text-[11px] font-bold"> <span class="px-2 py-0.5 rounded-md bg-slate-100 text-slate-700 text-[11px] font-medium">
{{ $order->items->count() }} items {{ $order->items->count() }} items
</span> </span>
</td> </td>
<td class="py-3.5 px-4"> <td class="py-3.5 px-4">
<span class="font-heading font-black text-amber-400 text-sm">{{ $order->formatted_total }}</span> <span class="font-bold text-slate-900">{{ $order->formatted_total }}</span>
</td> </td>
<td class="py-3.5 px-4"> <td class="py-3.5 px-4">
<span class="px-2.5 py-1 rounded-full text-[10px] font-black uppercase <span class="px-2 py-0.5 rounded-full text-[10px] font-semibold
@if($order->status === 'completed' || $order->status === 'shipped') bg-emerald-500/20 text-emerald-400 @if($order->status === 'completed' || $order->status === 'shipped') bg-emerald-50 text-emerald-700 border border-emerald-200/60
@elseif($order->status === 'printed' || $order->status === 'processing') bg-sky-500/20 text-sky-400 @elseif($order->status === 'printed' || $order->status === 'processing') bg-sky-50 text-sky-700 border border-sky-200/60
@elseif($order->status === 'cancelled') bg-rose-500/20 text-rose-400 @elseif($order->status === 'cancelled') bg-rose-50 text-rose-700 border border-rose-200/60
@else bg-amber-500/20 text-amber-400 @endif @else bg-amber-50 text-amber-700 border border-amber-200/60
"> @endif">
{{ $order->status }} {{ $order->status_label }}
</span> </span>
</td> </td>
<td class="py-3.5 px-4 text-right"> <td class="py-3.5 px-4 text-right">
<a href="{{ route('admin.orders.show', $order) }}" class="px-3 py-1.5 rounded-xl bg-slate-800 hover:bg-slate-700 text-slate-200 text-xs font-bold transition inline-flex items-center space-x-1"> <a href="{{ route('admin.orders.show', $order) }}" class="inline-flex items-center space-x-1 px-2.5 py-1 rounded-lg bg-slate-100 hover:bg-slate-900 text-slate-700 hover:text-white text-xs font-medium transition">
<span>Bekijken</span> <span>Bekijken</span>
<i data-lucide="chevron-right" class="w-3 h-3"></i> <i data-lucide="chevron-right" class="w-3 h-3"></i>
</a> </a>
@@ -72,8 +72,8 @@
</tr> </tr>
@empty @empty
<tr> <tr>
<td colspan="7" class="p-10 text-center text-slate-500"> <td colspan="7" class="py-12 text-center text-slate-400">
Nog geen bestellingen binnengekomen. Nog geen bestellingen geplaatst.
</td> </td>
</tr> </tr>
@endforelse @endforelse
@@ -82,7 +82,7 @@
</div> </div>
@if($orders->hasPages()) @if($orders->hasPages())
<div class="p-4 border-t border-slate-800 bg-slate-950/60"> <div class="p-4 border-t border-slate-100">
{{ $orders->links() }} {{ $orders->links() }}
</div> </div>
@endif @endif
@@ -90,4 +90,3 @@
</div> </div>
@endsection @endsection
resources/views/admin/orders/show.blade.php
+55 -45
View File
@@ -6,20 +6,20 @@
<div class="space-y-6 max-w-5xl mx-auto"> <div class="space-y-6 max-w-5xl mx-auto">
<!-- Header --> <!-- Header -->
<div class="flex items-center justify-between pb-6 border-b border-slate-800"> <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 pb-6 border-b border-slate-200/80">
<div> <div>
<a href="{{ route('admin.orders.index') }}" class="text-xs text-amber-400 font-bold hover:underline inline-flex items-center space-x-1 mb-1"> <a href="{{ route('admin.orders.index') }}" class="text-xs text-slate-500 hover:text-slate-900 font-medium inline-flex items-center space-x-1 mb-1 transition">
<i data-lucide="arrow-left" class="w-3.5 h-3.5"></i> <i data-lucide="arrow-left" class="w-3.5 h-3.5"></i>
<span>Terug naar Bestellingen</span> <span>Terug naar Bestellingen</span>
</a> </a>
<h1 class="font-heading text-2xl font-black text-white">Bestelling #{{ $order->order_number }}</h1> <h1 class="text-2xl font-bold tracking-tight text-slate-900">Bestelling #{{ $order->order_number }}</h1>
<p class="text-xs text-slate-400">Geplaatst op {{ $order->created_at->format('d-m-Y om H:i') }}</p> <p class="text-xs text-slate-500">Geplaatst op {{ $order->created_at->format('d-m-Y om H:i') }}</p>
</div> </div>
<!-- Status update form --> <!-- Status update form -->
<form action="{{ route('admin.orders.status', $order) }}" method="POST" class="flex items-center space-x-2"> <form action="{{ route('admin.orders.status', $order) }}" method="POST" class="flex items-center space-x-2">
@csrf @csrf
<select name="status" class="bg-slate-900 border border-slate-700 rounded-xl px-3 py-2 text-xs font-bold text-white"> <select name="status" class="bg-white border border-slate-200 rounded-xl px-3 py-2 text-xs font-medium text-slate-900 focus:outline-none focus:ring-2 focus:ring-slate-900/10 focus:border-slate-900">
<option value="pending" {{ $order->status === 'pending' ? 'selected' : '' }}>In afwachting</option> <option value="pending" {{ $order->status === 'pending' ? 'selected' : '' }}>In afwachting</option>
<option value="processing" {{ $order->status === 'processing' ? 'selected' : '' }}>In verwerking</option> <option value="processing" {{ $order->status === 'processing' ? 'selected' : '' }}>In verwerking</option>
<option value="printed" {{ $order->status === 'printed' ? 'selected' : '' }}>Geprint (Print klaar)</option> <option value="printed" {{ $order->status === 'printed' ? 'selected' : '' }}>Geprint (Print klaar)</option>
@@ -27,35 +27,50 @@
<option value="completed" {{ $order->status === 'completed' ? 'selected' : '' }}>Afgerond</option> <option value="completed" {{ $order->status === 'completed' ? 'selected' : '' }}>Afgerond</option>
<option value="cancelled" {{ $order->status === 'cancelled' ? 'selected' : '' }}>Geannuleerd</option> <option value="cancelled" {{ $order->status === 'cancelled' ? 'selected' : '' }}>Geannuleerd</option>
</select> </select>
<button type="submit" class="px-4 py-2 rounded-xl bg-amber-400 hover:bg-amber-300 text-slate-950 font-black text-xs transition"> <button type="submit" class="px-3.5 py-2 rounded-xl bg-slate-900 hover:bg-slate-800 text-white font-medium text-xs transition shadow-xs cursor-pointer">
Status Bijwerken Status Bijwerken
</button> </button>
</form> </form>
</div> </div>
@if(session('success'))
<div class="p-3.5 rounded-xl bg-emerald-50 border border-emerald-200/60 text-emerald-800 text-xs flex items-center space-x-2.5">
<i data-lucide="check-circle" class="w-4 h-4 text-emerald-600 shrink-0"></i>
<span class="font-medium">{{ session('success') }}</span>
</div>
@endif
<div class="grid grid-cols-1 md:grid-cols-3 gap-6"> <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<!-- Order Items --> <!-- Order Items -->
<div class="md:col-span-2 space-y-4"> <div class="md:col-span-2 space-y-4">
<div class="p-6 rounded-3xl bg-slate-900 border border-slate-800 space-y-4"> <div class="p-6 rounded-2xl bg-white border border-slate-200/80 shadow-xs space-y-4">
<h3 class="font-heading font-black text-base text-white">Bestelde 3D Prints</h3> <h3 class="font-bold text-sm text-slate-900">Bestelde 3D Prints</h3>
<div class="divide-y divide-slate-800"> <div class="divide-y divide-slate-100">
@foreach($order->items as $item) @foreach($order->items as $item)
<div class="py-3.5 flex items-start justify-between gap-4"> <div class="py-3.5 flex items-start justify-between gap-4">
<div> <div>
<h4 class="font-bold text-white text-sm">{{ $item->product_name }}</h4> <h4 class="font-semibold text-slate-900 text-xs">{{ $item->product_name }}</h4>
<div class="text-xs text-slate-400 space-y-0.5 mt-1"> <div class="text-[11px] text-slate-500 space-y-0.5 mt-1">
<div><strong>Materiaal:</strong> {{ strtoupper($item->material) }}</div> <div><span class="text-slate-400">Materiaal:</span> {{ strtoupper($item->material) }}</div>
<div><strong>Kleur:</strong> {{ $item->color }}</div> <div><span class="text-slate-400">Kleur:</span> {{ $item->color }}</div>
<div><strong>Schaal:</strong> {{ $item->scale ?? '100%' }}</div> <div><span class="text-slate-400">Schaal:</span> {{ $item->scale ?? '100%' }}</div>
@if($item->custom_file_url)
<div class="pt-1">
<a href="{{ $item->custom_file_url }}" target="_blank" class="text-sky-600 hover:underline flex items-center space-x-1 font-mono">
<i data-lucide="download" class="w-3 h-3"></i>
<span>Download 3D bestand (STL/3MF)</span>
</a>
</div>
@endif
</div> </div>
</div> </div>
<div class="text-right"> <div class="text-right">
<span class="font-heading font-black text-white text-sm"> <span class="font-semibold text-slate-900 text-xs">
{{ $item->quantity }}x &euro; {{ number_format($item->unit_price, 2, ',', '.') }} {{ $item->quantity }}x &euro; {{ number_format($item->unit_price, 2, ',', '.') }}
</span> </span>
<div class="text-xs font-black text-amber-400 mt-1"> <div class="text-xs font-bold text-slate-900 mt-0.5">
&euro; {{ number_format($item->total_price, 2, ',', '.') }} &euro; {{ number_format($item->total_price, 2, ',', '.') }}
</div> </div>
</div> </div>
@@ -63,50 +78,45 @@
@endforeach @endforeach
</div> </div>
<div class="pt-4 border-t border-slate-800 flex items-center justify-between font-heading font-black text-lg text-white"> <div class="pt-4 border-t border-slate-100 flex items-center justify-between text-xs">
<span>Totaalbedrag</span> <span class="font-medium text-slate-500">Totaalbedrag (incl. BTW)</span>
<span class="text-amber-400">{{ $order->formatted_total }}</span> <span class="font-bold text-base text-slate-900">{{ $order->formatted_total }}</span>
</div> </div>
</div> </div>
</div> </div>
<!-- Klantgegevens & Afleveradres --> <!-- Klant & Verzendinfo -->
<div class="space-y-4"> <div class="space-y-4">
<div class="p-6 rounded-3xl bg-slate-900 border border-slate-800 space-y-4 text-xs"> <div class="p-5 rounded-2xl bg-white border border-slate-200/80 shadow-xs space-y-3">
<h3 class="font-heading font-black text-base text-white">Klant & Verzendadres</h3> <h3 class="font-bold text-xs text-slate-900 uppercase tracking-wider">Klantgegevens</h3>
<div class="space-y-2 text-slate-300"> <div class="text-xs space-y-1.5 text-slate-600">
<div> <div>
<span class="text-slate-500 block text-[10px] uppercase font-bold">Naam</span> <span class="text-slate-400 block text-[10px]">Naam</span>
<strong class="text-white">{{ $order->customer_name }}</strong> <span class="font-semibold text-slate-900">{{ $order->customer_name }}</span>
</div> </div>
<div> <div>
<span class="text-slate-500 block text-[10px] uppercase font-bold">E-mail</span> <span class="text-slate-400 block text-[10px]">E-mailadres</span>
<span>{{ $order->customer_email }}</span> <a href="mailto:{{ $order->customer_email }}" class="text-slate-900 hover:underline font-mono">{{ $order->customer_email }}</a>
</div> </div>
@if($order->customer_phone) @if($order->customer_phone)
<div> <div>
<span class="text-slate-500 block text-[10px] uppercase font-bold">Telefoon</span> <span class="text-slate-400 block text-[10px]">Telefoonnummer</span>
<span>{{ $order->customer_phone }}</span> <span class="text-slate-900">{{ $order->customer_phone }}</span>
</div> </div>
@endif @endif
<div class="pt-2 border-t border-slate-800">
<span class="text-slate-500 block text-[10px] uppercase font-bold">Adres</span>
<div>{{ $order->shipping_street }} {{ $order->shipping_number }}</div>
<div>{{ $order->shipping_postal_code }} {{ $order->shipping_city }}</div>
<div>{{ $order->shipping_country ?? 'Nederland' }}</div>
</div>
</div> </div>
</div>
@if($order->notes) <div class="p-5 rounded-2xl bg-white border border-slate-200/80 shadow-xs space-y-3">
<div class="pt-3 border-t border-slate-800"> <h3 class="font-bold text-xs text-slate-900 uppercase tracking-wider">Verzendadres</h3>
<span class="text-slate-500 block text-[10px] uppercase font-bold">Klant Opmerking</span>
<p class="text-slate-300 italic mt-1">{{ $order->notes }}</p> <div class="text-xs text-slate-700 leading-relaxed">
</div> <div class="font-semibold text-slate-900">{{ $order->customer_name }}</div>
@endif <div>{{ $order->shipping_street }} {{ $order->shipping_number }}</div>
<div>{{ $order->shipping_postal_code }} {{ $order->shipping_city }}</div>
<div class="text-slate-400">Nederland</div>
</div>
</div> </div>
</div> </div>
resources/views/admin/products/create.blade.php
+116 -152
View File
@@ -76,13 +76,13 @@
}"> }">
<!-- Header --> <!-- Header -->
<div class="flex items-center justify-between pb-5 border-b border-slate-200/80"> <div class="flex items-center justify-between pb-5 border-b border-slate-200/60">
<div> <div>
<a href="{{ route('admin.products.index') }}" class="text-xs text-amber-600 font-bold hover:underline inline-flex items-center space-x-1 mb-1"> <a href="{{ route('admin.products.index') }}" class="text-xs text-slate-500 hover:text-slate-900 font-medium inline-flex items-center space-x-1 mb-1">
<i data-lucide="arrow-left" class="w-3.5 h-3.5"></i> <i data-lucide="arrow-left" class="w-3.5 h-3.5"></i>
<span>Terug naar Producten</span> <span>Terug naar Producten</span>
</a> </a>
<h1 class="font-heading text-2xl font-black text-slate-900">Nieuw Product Toevoegen</h1> <h1 class="font-heading text-2xl font-bold text-slate-900 tracking-tight">Nieuw Product Toevoegen</h1>
</div> </div>
</div> </div>
@@ -90,18 +90,18 @@
<form action="{{ route('admin.products.store') }}" method="POST" class="space-y-6"> <form action="{{ route('admin.products.store') }}" method="POST" class="space-y-6">
@csrf @csrf
<div class="p-6 sm:p-8 rounded-3xl bg-white border border-slate-200/80 shadow-2xs space-y-6"> <div class="p-6 sm:p-7 rounded-2xl bg-white border border-slate-200/60 shadow-2xs space-y-6">
<!-- Basis Informatie --> <!-- Basis Informatie -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-4"> <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div class="md:col-span-2 space-y-1.5"> <div class="md:col-span-2 space-y-1.5">
<label class="block text-xs font-bold text-slate-700">Productnaam *</label> <label class="block text-xs font-medium text-slate-700">Productnaam *</label>
<input type="text" name="name" value="{{ old('name') }}" required placeholder="bijv. Articulated Mecha Robot" class="w-full bg-slate-50/60 focus:bg-white border border-slate-200 rounded-xl px-3.5 py-2.5 text-xs text-slate-900 font-bold focus:outline-none focus:ring-2 focus:ring-amber-400/20 focus:border-amber-400 transition"> <input type="text" name="name" value="{{ old('name') }}" required placeholder="bijv. Articulated Mecha Robot" class="w-full bg-slate-50/70 focus:bg-white border border-slate-200 rounded-lg px-3 py-2 text-xs text-slate-900 font-medium focus:outline-none focus:ring-1 focus:ring-slate-400 transition">
</div> </div>
<div class="space-y-1.5"> <div class="space-y-1.5">
<label class="block text-xs font-bold text-slate-700">Categorie *</label> <label class="block text-xs font-medium text-slate-700">Categorie *</label>
<select name="category_id" required class="w-full bg-slate-50/60 focus:bg-white border border-slate-200 rounded-xl px-3 py-2.5 text-xs text-slate-900 font-bold"> <select name="category_id" required class="w-full bg-slate-50/70 focus:bg-white border border-slate-200 rounded-lg px-3 py-2 text-xs text-slate-900 font-medium">
@foreach($categories as $cat) @foreach($categories as $cat)
<option value="{{ $cat->id }}" {{ old('category_id') == $cat->id ? 'selected' : '' }}> <option value="{{ $cat->id }}" {{ old('category_id') == $cat->id ? 'selected' : '' }}>
{{ $cat->name }} {{ $cat->name }}
@@ -112,52 +112,52 @@
</div> </div>
<!-- ==================================================== --> <!-- ==================================================== -->
<!-- 3D PRINT KOSTPRIJSCALCULATOR WIDGET --> <!-- 3D PRINT KOSTPRIJSCALCULATOR WIDGET (Sleek & Subtle) -->
<!-- ==================================================== --> <!-- ==================================================== -->
<div class="p-5 rounded-2xl bg-amber-50/40 border border-amber-200/70 space-y-4"> <div class="p-4 sm:p-5 rounded-xl bg-slate-50/70 border border-slate-200/70 space-y-4">
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<div class="flex items-center space-x-2"> <div class="flex items-center space-x-2">
<span class="w-6 h-6 rounded-lg bg-amber-400 text-slate-950 flex items-center justify-center text-xs">🖨️</span> <i data-lucide="calculator" class="w-4 h-4 text-slate-500"></i>
<h3 class="font-heading text-xs font-black text-slate-900 uppercase tracking-wider">3D Print Kostprijscalculator</h3> <h3 class="text-xs font-semibold text-slate-900 uppercase tracking-wider">3D Print Kostprijscalculator</h3>
<span class="px-2 py-0.5 rounded-full bg-amber-100 text-amber-900 font-mono text-[10px] font-bold">Automatisch Prijsvoorstel</span> <span class="px-2 py-0.5 rounded-full bg-slate-200/70 text-slate-700 font-mono text-[10px]">Formule</span>
</div> </div>
<button type="button" @click="showCalculator = !showCalculator" class="text-xs text-slate-500 hover:text-slate-800 font-semibold flex items-center space-x-1"> <button type="button" @click="showCalculator = !showCalculator" class="text-xs text-slate-500 hover:text-slate-800 font-medium flex items-center space-x-1 cursor-pointer">
<span x-text="showCalculator ? 'Inklappen' : 'Calculator Openen'"></span> <span x-text="showCalculator ? 'Inklappen' : 'Openen'"></span>
<i data-lucide="chevron-down" class="w-3.5 h-3.5 transition-transform" :class="showCalculator ? 'rotate-180' : ''"></i> <i data-lucide="chevron-down" class="w-3.5 h-3.5 transition-transform" :class="showCalculator ? 'rotate-180' : ''"></i>
</button> </button>
</div> </div>
<div x-show="showCalculator" x-transition class="space-y-4 pt-2"> <div x-show="showCalculator" x-transition class="space-y-4 pt-1">
<div class="grid grid-cols-2 sm:grid-cols-4 gap-3 text-xs"> <div class="grid grid-cols-2 sm:grid-cols-4 gap-3 text-xs">
<!-- Gewicht --> <!-- Gewicht -->
<div class="space-y-1"> <div class="space-y-1">
<label class="block text-[11px] font-bold text-slate-600">Gewicht (gram)</label> <label class="block text-[11px] font-medium text-slate-600">Gewicht</label>
<div class="relative"> <div class="relative">
<input type="number" x-model.number="weightGrams" min="1" max="5000" class="w-full bg-white border border-slate-200 rounded-xl px-3 py-1.5 text-xs font-black text-slate-900"> <input type="number" x-model.number="weightGrams" min="1" max="5000" class="w-full bg-white border border-slate-200 rounded-lg px-2.5 py-1.5 text-xs font-semibold text-slate-900">
<span class="absolute right-2.5 top-1/2 -translate-y-1/2 text-[10px] text-slate-400 font-bold">gram</span> <span class="absolute right-2.5 top-1/2 -translate-y-1/2 text-[10px] text-slate-400">gram</span>
</div> </div>
</div> </div>
<!-- Printtijd --> <!-- Printtijd -->
<div class="space-y-1"> <div class="space-y-1">
<label class="block text-[11px] font-bold text-slate-600">Printtijd (uren)</label> <label class="block text-[11px] font-medium text-slate-600">Printduur</label>
<div class="relative"> <div class="relative">
<input type="number" step="0.1" x-model.number="printTimeHours" min="0.1" max="100" class="w-full bg-white border border-slate-200 rounded-xl px-3 py-1.5 text-xs font-black text-slate-900"> <input type="number" step="0.1" x-model.number="printTimeHours" min="0.1" max="100" class="w-full bg-white border border-slate-200 rounded-lg px-2.5 py-1.5 text-xs font-semibold text-slate-900">
<span class="absolute right-2.5 top-1/2 -translate-y-1/2 text-[10px] text-slate-400 font-bold">uur</span> <span class="absolute right-2.5 top-1/2 -translate-y-1/2 text-[10px] text-slate-400">uur</span>
</div> </div>
</div> </div>
<!-- Aantal Kleuren (AMS Purge) --> <!-- Aantal Kleuren (AMS Purge) -->
<div class="space-y-1"> <div class="space-y-1">
<label class="block text-[11px] font-bold text-slate-600">Aantal Kleuren</label> <label class="block text-[11px] font-medium text-slate-600">Kleuren (AMS)</label>
<div class="grid grid-cols-4 gap-1"> <div class="grid grid-cols-4 gap-1">
<template x-for="c in [1, 2, 3, 4]" :key="c"> <template x-for="c in [1, 2, 3, 4]" :key="c">
<button <button
type="button" type="button"
@click="colorCount = c" @click="colorCount = c"
class="py-1.5 rounded-lg text-center font-bold text-xs transition border" class="py-1 rounded-md text-center font-medium text-xs transition border cursor-pointer"
:class="colorCount === c ? 'bg-amber-400 border-amber-500 text-slate-950 font-black shadow-2xs' : 'bg-white border-slate-200 text-slate-600 hover:bg-slate-50'" :class="colorCount === c ? 'bg-slate-900 border-slate-900 text-white shadow-2xs' : 'bg-white border-slate-200 text-slate-600 hover:bg-slate-50'"
x-text="c" x-text="c"
></button> ></button>
</template> </template>
@@ -166,8 +166,8 @@
<!-- Materiaalsoort --> <!-- Materiaalsoort -->
<div class="space-y-1"> <div class="space-y-1">
<label class="block text-[11px] font-bold text-slate-600">Materiaalsoort</label> <label class="block text-[11px] font-medium text-slate-600">Materiaalsoort</label>
<select x-model="material" class="w-full bg-white border border-slate-200 rounded-xl px-2.5 py-1.5 text-xs font-bold text-slate-900"> <select x-model="material" class="w-full bg-white border border-slate-200 rounded-lg px-2.5 py-1.5 text-xs font-medium text-slate-900">
<option value="pla">Bio-PLA (1.0x)</option> <option value="pla">Bio-PLA (1.0x)</option>
<option value="petg">PETG Tough (1.2x)</option> <option value="petg">PETG Tough (1.2x)</option>
<option value="silk">Silk Zijdeglans (1.3x)</option> <option value="silk">Silk Zijdeglans (1.3x)</option>
@@ -176,48 +176,43 @@
</div> </div>
</div> </div>
<!-- Winstmarge selectie --> <!-- Marge Selector -->
<div class="flex flex-wrap items-center justify-between gap-2 pt-2 border-t border-amber-200/50 text-xs"> <div class="flex flex-wrap items-center justify-between gap-2 pt-2 border-t border-slate-200/60 text-xs">
<div class="flex items-center space-x-1.5"> <div class="flex items-center space-x-2">
<span class="text-slate-600 font-bold text-[11px]">Winstmarge:</span> <span class="text-slate-500 font-medium text-[11px]">Marge:</span>
<div class="inline-flex rounded-lg border border-slate-200 bg-white p-0.5 text-[11px] font-bold"> <div class="inline-flex rounded-lg border border-slate-200 bg-white p-0.5 text-[11px] font-medium">
<button type="button" @click="markupPercent = 35" :class="markupPercent === 35 ? 'bg-amber-400 text-slate-950 font-black' : 'text-slate-600 hover:text-slate-900'" class="px-2 py-0.5 rounded-md transition">35%</button> <button type="button" @click="markupPercent = 35" :class="markupPercent === 35 ? 'bg-slate-900 text-white' : 'text-slate-600 hover:text-slate-900'" class="px-2 py-0.5 rounded transition">35%</button>
<button type="button" @click="markupPercent = 50" :class="markupPercent === 50 ? 'bg-amber-400 text-slate-950 font-black' : 'text-slate-600 hover:text-slate-900'" class="px-2 py-0.5 rounded-md transition">50%</button> <button type="button" @click="markupPercent = 50" :class="markupPercent === 50 ? 'bg-slate-900 text-white' : 'text-slate-600 hover:text-slate-900'" class="px-2 py-0.5 rounded transition">50%</button>
<button type="button" @click="markupPercent = 65" :class="markupPercent === 65 ? 'bg-amber-400 text-slate-950 font-black' : 'text-slate-600 hover:text-slate-900'" class="px-2 py-0.5 rounded-md transition">65%</button> <button type="button" @click="markupPercent = 65" :class="markupPercent === 65 ? 'bg-slate-900 text-white' : 'text-slate-600 hover:text-slate-900'" class="px-2 py-0.5 rounded transition">65%</button>
<button type="button" @click="markupPercent = 100" :class="markupPercent === 100 ? 'bg-amber-400 text-slate-950 font-black' : 'text-slate-600 hover:text-slate-900'" class="px-2 py-0.5 rounded-md transition">100%</button> <button type="button" @click="markupPercent = 100" :class="markupPercent === 100 ? 'bg-slate-900 text-white' : 'text-slate-600 hover:text-slate-900'" class="px-2 py-0.5 rounded transition">100%</button>
</div> </div>
</div> </div>
<!-- Live Cost Breakdown Strip --> <!-- Live Cost Breakdown -->
<div class="flex items-center space-x-3 text-[11px] text-slate-500 font-semibold"> <div class="flex items-center space-x-3 text-[11px] text-slate-400 font-normal">
<span>🧵 Materiaal: €<span x-text="materialCost"></span></span> <span>Materiaal: €<span x-text="materialCost"></span></span>
<span>⚡ Stroom: €<span x-text="electricityCost"></span></span> <span>Stroom: €<span x-text="electricityCost"></span></span>
<span>⚙️ Slijtage: €<span x-text="machineCost"></span></span> <span>Slijtage: €<span x-text="machineCost"></span></span>
<span class="font-bold text-slate-700">Kostprijs: €<span x-text="totalProductionCost"></span></span> <span class="font-semibold text-slate-700">Kostprijs: €<span x-text="totalProductionCost"></span></span>
</div> </div>
</div> </div>
<!-- Result Banner met 1-klik overneem knop --> <!-- Callout Strip -->
<div class="p-3.5 rounded-xl bg-white border border-amber-300 shadow-2xs flex flex-col sm:flex-row sm:items-center justify-between gap-3"> <div class="p-3 rounded-lg bg-white border border-slate-200/80 shadow-2xs flex flex-col sm:flex-row sm:items-center justify-between gap-3">
<div class="flex items-center space-x-3"> <div>
<div class="w-10 h-10 rounded-xl bg-amber-100 text-amber-900 flex items-center justify-center font-heading font-black text-sm"> <span class="text-[10px] text-slate-400 uppercase font-medium block">Adviesprijs (incl. 21% btw)</span>
€ <div class="flex items-baseline space-x-1.5">
</div> <span class="font-heading text-lg font-bold text-slate-900">€ <span x-text="suggestedPrice"></span></span>
<div> <span class="text-[11px] text-slate-400">(op basis van <span x-text="weightGrams"></span>g &bull; <span x-text="printTimeHours"></span>u &bull; <span x-text="colorCount"></span> kleur)</span>
<span class="text-[10px] text-slate-400 block font-bold uppercase tracking-wider">Berekend Prijsvoorstel (incl. 21% btw)</span>
<div class="flex items-baseline space-x-1.5">
<span class="font-heading text-xl font-black text-slate-900">€ <span x-text="suggestedPrice"></span></span>
<span class="text-[11px] text-slate-500">op basis van <span x-text="weightGrams"></span>g &bull; <span x-text="printTimeHours"></span>u &bull; <span x-text="colorCount"></span> kleur(en)</span>
</div>
</div> </div>
</div> </div>
<button <button
type="button" type="button"
@click="applySuggestedPrice" @click="applySuggestedPrice"
class="px-4 py-2 bg-gradient-to-r from-amber-400 to-rose-400 hover:from-amber-300 hover:to-rose-300 text-slate-950 font-black text-xs rounded-xl shadow-xs transition flex items-center justify-center space-x-1.5 cursor-pointer" class="px-3.5 py-1.5 bg-slate-900 hover:bg-slate-800 text-white font-medium text-xs rounded-lg transition flex items-center justify-center space-x-1.5 cursor-pointer shadow-2xs"
> >
<i data-lucide="check" class="w-4 h-4"></i> <i data-lucide="check" class="w-3.5 h-3.5"></i>
<span>Neem Adviesprijs Over (€ <span x-text="suggestedPrice"></span>)</span> <span>Neem Adviesprijs Over (€ <span x-text="suggestedPrice"></span>)</span>
</button> </button>
</div> </div>
@@ -227,30 +222,30 @@
<!-- Prijs & Korte Omschrijving --> <!-- Prijs & Korte Omschrijving -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-4"> <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div class="space-y-1.5"> <div class="space-y-1.5">
<label class="block text-xs font-bold text-slate-700">Basisprijs (€) *</label> <label class="block text-xs font-medium text-slate-700">Basisprijs (€) *</label>
<div class="relative"> <div class="relative">
<span class="absolute left-3.5 top-1/2 -translate-y-1/2 font-bold text-slate-400 text-xs">€</span> <span class="absolute left-3 top-1/2 -translate-y-1/2 font-medium text-slate-400 text-xs">€</span>
<input <input
type="number" type="number"
step="0.01" step="0.01"
name="base_price" name="base_price"
x-model="basePrice" x-model="basePrice"
required required
class="w-full bg-slate-50/60 focus:bg-white border border-slate-200 rounded-xl pl-7 pr-3.5 py-2.5 text-xs text-slate-900 font-bold focus:outline-none focus:ring-2 focus:ring-amber-400/20 focus:border-amber-400" class="w-full bg-slate-50/70 focus:bg-white border border-slate-200 rounded-lg pl-7 pr-3 py-2 text-xs text-slate-900 font-semibold focus:outline-none focus:ring-1 focus:ring-slate-400"
> >
</div> </div>
</div> </div>
<div class="md:col-span-2 space-y-1.5"> <div class="md:col-span-2 space-y-1.5">
<label class="block text-xs font-bold text-slate-700">Korte Omschrijving (voor catalogus cards)</label> <label class="block text-xs font-medium text-slate-700">Korte Omschrijving (voor catalogus cards)</label>
<input type="text" name="short_description" value="{{ old('short_description') }}" placeholder="Korte samenvatting in 1 zin..." class="w-full bg-slate-50/60 focus:bg-white border border-slate-200 rounded-xl px-3.5 py-2.5 text-xs text-slate-900"> <input type="text" name="short_description" value="{{ old('short_description') }}" placeholder="Korte samenvatting in 1 zin..." class="w-full bg-slate-50/70 focus:bg-white border border-slate-200 rounded-lg px-3 py-2 text-xs text-slate-900">
</div> </div>
</div> </div>
<!-- Visueel Afbeeldingen & Fotogalerij Beheer --> <!-- Afbeeldingen & Galerij Beheer -->
<div class="pt-5 border-t border-slate-200/80 space-y-4" <div class="pt-5 border-t border-slate-200/60 space-y-4"
x-data="{ x-data="{
imageUrl: '{{ old('image_url', '/images/products/crystal-dragon.jpg') }}', imageUrl: '{{ old('image_url', '') }}',
galleryImages: {{ json_encode(old('gallery_images', []), JSON_UNESCAPED_SLASHES) }}, galleryImages: {{ json_encode(old('gallery_images', []), JSON_UNESCAPED_SLASHES) }},
newImageUrl: '', newImageUrl: '',
addError: '', addError: '',
@@ -286,7 +281,7 @@
let url = this.newImageUrl.trim(); let url = this.newImageUrl.trim();
if (!url) return; if (!url) return;
if (url === this.imageUrl || this.galleryImages.includes(url)) { if (url === this.imageUrl || this.galleryImages.includes(url)) {
this.addError = 'Deze afbeelding is al toegevoegd!'; this.addError = 'Deze afbeelding is al gekoppeld!';
return; return;
} }
if (!this.imageUrl) { if (!this.imageUrl) {
@@ -327,14 +322,13 @@
}) })
.catch(err => { .catch(err => {
this.isUploading = false; this.isUploading = false;
this.uploadError = 'Fout bij uploaden van afbeelding'; this.uploadError = 'Fout bij uploaden';
}); });
event.target.value = ''; event.target.value = '';
} }
}"> }">
<!-- Verborgen form fields -->
<input type="hidden" name="image_url" :value="imageUrl"> <input type="hidden" name="image_url" :value="imageUrl">
<template x-for="(img, idx) in galleryImages" :key="idx"> <template x-for="(img, idx) in galleryImages" :key="idx">
<input type="hidden" name="gallery_images[]" :value="img"> <input type="hidden" name="gallery_images[]" :value="img">
@@ -343,141 +337,111 @@
<div class="flex flex-col sm:flex-row sm:items-center justify-between gap-2"> <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-2">
<div> <div>
<div class="flex items-center space-x-2"> <div class="flex items-center space-x-2">
<i data-lucide="image" class="w-4 h-4 text-amber-500"></i> <i data-lucide="image" class="w-4 h-4 text-slate-500"></i>
<h3 class="font-heading text-sm font-black text-slate-900 uppercase tracking-wider">Productafbeeldingen & Fotogalerij</h3> <h3 class="text-xs font-semibold text-slate-900 uppercase tracking-wider">Afbeeldingen</h3>
<span class="px-2 py-0.5 rounded-full bg-slate-100 text-slate-700 font-mono text-[11px] font-bold" x-text="(imageUrl ? 1 : 0) + galleryImages.length + ' foto(\'s)'"></span> <span class="px-2 py-0.5 rounded-full bg-slate-100 text-slate-600 font-mono text-[11px]" x-text="(imageUrl ? 1 : 0) + galleryImages.length + ' foto(\'s)'"></span>
</div> </div>
<p class="text-xs text-slate-500 mt-0.5"> <p class="text-xs text-slate-500 mt-0.5">
Upload foto's vanaf je computer of telefoon, of plak een web-URL. Hoofdfoto en extra foto's voor de galerij.
</p> </p>
</div> </div>
<div class="flex items-center space-x-2"> <div class="flex items-center space-x-2">
<!-- Bestand uploaden button --> <label class="px-3 py-1.5 rounded-lg bg-white hover:bg-slate-50 text-slate-700 text-xs font-medium transition flex items-center space-x-1.5 border border-slate-200/80 shadow-2xs cursor-pointer">
<label class="px-3 py-1.5 rounded-xl bg-white hover:bg-slate-50 text-slate-700 text-xs font-bold transition flex items-center space-x-1.5 border border-slate-200 shadow-2xs cursor-pointer"> <i data-lucide="upload" class="w-3.5 h-3.5 text-slate-400"></i>
<i data-lucide="upload" class="w-3.5 h-3.5 text-amber-500"></i>
<span x-text="isUploading ? 'Uploaden...' : 'Foto Uploaden'"></span> <span x-text="isUploading ? 'Uploaden...' : 'Foto Uploaden'"></span>
<input type="file" accept="image/*" class="hidden" @change="uploadFile" :disabled="isUploading"> <input type="file" accept="image/*" class="hidden" @change="uploadFile" :disabled="isUploading">
</label> </label>
<!-- URL toevoegen toggle --> <button type="button" @click="showUrlInput = !showUrlInput" class="px-3 py-1.5 rounded-lg bg-white hover:bg-slate-50 text-slate-700 text-xs font-medium transition flex items-center space-x-1.5 border border-slate-200/80 shadow-2xs">
<button type="button" @click="showUrlInput = !showUrlInput" class="px-3 py-1.5 rounded-xl bg-white hover:bg-slate-50 text-slate-700 text-xs font-bold transition flex items-center space-x-1.5 border border-slate-200 shadow-2xs"> <i data-lucide="link" class="w-3.5 h-3.5 text-slate-400"></i>
<i data-lucide="link" class="w-3.5 h-3.5 text-amber-500"></i>
<span>URL Plakken</span> <span>URL Plakken</span>
</button> </button>
</div> </div>
</div> </div>
<!-- URL Toevoegen Bar --> <!-- URL Toevoegen Bar -->
<div x-show="showUrlInput" x-transition class="p-3 bg-slate-50 rounded-2xl border border-slate-200 space-y-2"> <div x-show="showUrlInput" x-transition class="p-3 bg-slate-50 rounded-xl border border-slate-200/60 space-y-2">
<div class="flex items-center space-x-2"> <div class="flex items-center space-x-2">
<input <input
type="text" type="text"
x-model="newImageUrl" x-model="newImageUrl"
@keydown.enter.prevent="addImageUrl" @keydown.enter.prevent="addImageUrl"
placeholder="Plak hier een foto-URL (bijv. https://... of /images/products/...)" placeholder="Plak hier een foto-URL..."
class="flex-1 bg-white border border-slate-200 rounded-xl px-3 py-2 text-xs text-slate-900 placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-amber-400" class="flex-1 bg-white border border-slate-200 rounded-lg px-3 py-1.5 text-xs text-slate-900 placeholder-slate-400 focus:outline-none focus:ring-1 focus:ring-slate-400"
> >
<button type="button" @click="addImageUrl" class="px-4 py-2 bg-amber-400 hover:bg-amber-300 text-slate-950 rounded-xl text-xs font-black transition flex items-center space-x-1"> <button type="button" @click="addImageUrl" class="px-3.5 py-1.5 bg-slate-900 hover:bg-slate-800 text-white rounded-lg text-xs font-medium transition">
<i data-lucide="plus" class="w-3.5 h-3.5"></i> Toevoegen
<span>Toevoegen</span>
</button> </button>
</div> </div>
<p x-show="addError" x-text="addError" class="text-xs text-rose-600 font-bold"></p> <p x-show="addError" x-text="addError" class="text-xs text-rose-600 font-medium"></p>
</div> </div>
<div x-show="uploadError" x-text="uploadError" class="p-2.5 bg-rose-50 border border-rose-200 text-xs text-rose-700 rounded-xl font-bold"></div> <div x-show="uploadError" x-text="uploadError" class="p-2.5 bg-rose-50 border border-rose-200 text-xs text-rose-700 rounded-lg font-medium"></div>
<!-- Visuele Weergave: Hoofdafbeelding + Gallerij Grid --> <!-- Visuele Weergave -->
<div class="grid grid-cols-1 md:grid-cols-12 gap-4 items-start"> <div class="grid grid-cols-1 md:grid-cols-12 gap-4 items-start">
<!-- Hoofdafbeelding Box (Links) --> <!-- Cover Box -->
<div class="md:col-span-5 bg-slate-50/80 rounded-2xl border-2 border-amber-300 p-3.5 space-y-2 relative overflow-hidden"> <div class="md:col-span-5 bg-slate-50/70 rounded-xl border border-slate-200/80 p-3 space-y-2 relative overflow-hidden">
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<span class="px-2.5 py-1 rounded-full bg-amber-400 text-slate-950 font-black text-[10px] uppercase tracking-wider flex items-center space-x-1 shadow-2xs"> <span class="text-[10px] font-semibold text-slate-500 uppercase tracking-wider">Hoofdafbeelding</span>
<i data-lucide="star" class="w-3 h-3 fill-current"></i>
<span>Hoofdafbeelding (Cover)</span>
</span>
<template x-if="imageUrl"> <template x-if="imageUrl">
<button type="button" @click="removeCover" class="text-slate-400 hover:text-rose-600 text-xs font-bold transition flex items-center space-x-1" title="Verwijder hoofdafbeelding"> <button type="button" @click="removeCover" class="text-slate-400 hover:text-rose-600 text-[11px] transition">
<i data-lucide="trash-2" class="w-3.5 h-3.5"></i> Verwijderen
<span>Verwijderen</span>
</button> </button>
</template> </template>
</div> </div>
<!-- Grote Image Preview --> <div class="aspect-4/3 rounded-lg bg-white overflow-hidden flex items-center justify-center relative border border-slate-200/60 shadow-2xs">
<div class="aspect-4/3 rounded-xl bg-white overflow-hidden flex items-center justify-center relative border border-slate-200 shadow-2xs">
<template x-if="imageUrl"> <template x-if="imageUrl">
<img :src="imageUrl" alt="Hoofdafbeelding" class="w-full h-full object-cover"> <img :src="imageUrl" alt="Hoofdafbeelding" class="w-full h-full object-cover">
</template> </template>
<template x-if="!imageUrl"> <template x-if="!imageUrl">
<div class="text-center p-4 text-slate-400 space-y-1"> <div class="text-center p-4 text-slate-400 space-y-1">
<i data-lucide="image" class="w-8 h-8 mx-auto text-slate-300"></i> <i data-lucide="image" class="w-6 h-6 mx-auto text-slate-300"></i>
<p class="text-xs font-bold">Geen hoofdafbeelding</p> <p class="text-xs">Nog geen foto geselecteerd</p>
<p class="text-[10px]">Kies een foto of voeg er een toe.</p>
</div> </div>
</template> </template>
</div> </div>
<!-- Huidige Cover URL weergave -->
<div class="pt-1">
<span class="text-[10px] font-mono text-slate-400 truncate block" x-text="imageUrl || 'Geen URL ingesteld'"></span>
</div>
</div> </div>
<!-- Gallerij Foto's (Rechts) --> <!-- Gallerij Grid -->
<div class="md:col-span-7 bg-slate-50/60 rounded-2xl border border-slate-200 p-3.5 space-y-3"> <div class="md:col-span-7 bg-slate-50/50 rounded-xl border border-slate-200/60 p-3 space-y-2">
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<span class="text-xs font-black text-slate-700 uppercase tracking-wider">Extra Gallerij Foto's</span> <span class="text-xs font-medium text-slate-700">Extra Galerijfoto's</span>
<span class="text-[10px] text-slate-400 font-bold" x-text="galleryImages.length + ' extra foto(\'s)'"></span> <span class="text-[10px] text-slate-400" x-text="galleryImages.length + ' foto(\'s)'"></span>
</div> </div>
<!-- Grid van Extra Foto's --> <div class="grid grid-cols-2 sm:grid-cols-3 gap-2 max-h-80 overflow-y-auto pr-1">
<div class="grid grid-cols-2 sm:grid-cols-3 gap-2.5 max-h-96 overflow-y-auto pr-1">
<template x-for="(img, index) in galleryImages" :key="index"> <template x-for="(img, index) in galleryImages" :key="index">
<div class="group relative rounded-xl bg-white border border-slate-200 hover:border-amber-400 transition overflow-hidden shadow-2xs"> <div class="group relative rounded-lg bg-white border border-slate-200/80 overflow-hidden shadow-2xs">
<div class="aspect-square w-full overflow-hidden bg-slate-100"> <div class="aspect-square w-full overflow-hidden bg-slate-100">
<img :src="img" alt="Gallerij foto" class="w-full h-full object-cover group-hover:scale-105 transition duration-200" loading="lazy"> <img :src="img" alt="Gallerij foto" class="w-full h-full object-cover" loading="lazy">
</div> </div>
<!-- Index Badge --> <div class="absolute inset-0 bg-slate-900/60 opacity-0 group-hover:opacity-100 transition flex flex-col items-center justify-center gap-1 p-2">
<div class="absolute top-1.5 left-1.5">
<span class="px-1.5 py-0.5 rounded bg-slate-900/80 text-white font-mono text-[9px] font-bold backdrop-blur" x-text="'#' + (index + 1)"></span>
</div>
<!-- Overlay Knoppen -->
<div class="absolute inset-0 bg-slate-900/60 opacity-0 group-hover:opacity-100 transition flex flex-col items-center justify-center gap-1.5 p-2">
<button <button
type="button" type="button"
@click="setAsCover(index)" @click="setAsCover(index)"
class="w-full py-1.5 px-2 bg-amber-400 hover:bg-amber-300 text-slate-950 rounded-lg text-[10px] font-black uppercase tracking-wider transition flex items-center justify-center space-x-1 shadow" class="w-full py-1 px-2 bg-white text-slate-900 rounded text-[10px] font-semibold transition"
> >
<i data-lucide="star" class="w-3 h-3 fill-current"></i> Als Cover
<span>Als Cover</span>
</button> </button>
<button <button
type="button" type="button"
@click="removeGalleryImage(index)" @click="removeGalleryImage(index)"
class="w-full py-1 px-2 bg-rose-600 hover:bg-rose-500 text-white rounded-lg text-[10px] font-bold transition flex items-center justify-center space-x-1" class="w-full py-1 px-2 bg-rose-600 text-white rounded text-[10px] font-medium transition"
> >
<i data-lucide="trash-2" class="w-3 h-3"></i> Verwijder
<span>Verwijder</span>
</button> </button>
</div> </div>
</div> </div>
</template> </template>
</div> </div>
<!-- Empty state --> <div x-show="galleryImages.length === 0" class="text-center py-6 px-3 rounded-lg border border-dashed border-slate-200 text-slate-400 text-xs">
<div x-show="galleryImages.length === 0" class="text-center py-8 px-4 rounded-xl border border-dashed border-slate-200 text-slate-400 space-y-1"> Geen extra foto's in de galerij.
<i data-lucide="images" class="w-6 h-6 mx-auto text-slate-300"></i>
<p class="text-xs font-bold text-slate-600">Nog geen extra galerijfoto's</p>
<p class="text-[11px] text-slate-400 max-w-xs mx-auto">
Voeg extra detailfoto's toe via "URL Plakken" of "Foto Uploaden".
</p>
</div> </div>
</div> </div>
@@ -487,37 +451,37 @@
<!-- Beschrijving --> <!-- Beschrijving -->
<div class="space-y-1.5"> <div class="space-y-1.5">
<label class="block text-xs font-bold text-slate-700">Volledige Productbeschrijving *</label> <label class="block text-xs font-medium text-slate-700">Productbeschrijving *</label>
<textarea name="description" rows="5" required class="w-full bg-slate-50/60 focus:bg-white border border-slate-200 rounded-xl px-3.5 py-2.5 text-xs text-slate-900 leading-relaxed">{{ old('description') }}</textarea> <textarea name="description" rows="5" required placeholder="Gedetailleerde informatie over dit 3D model..." class="w-full bg-slate-50/70 focus:bg-white border border-slate-200 rounded-lg px-3 py-2 text-xs text-slate-900 leading-relaxed focus:outline-none focus:ring-1 focus:ring-slate-400">{{ old('description') }}</textarea>
</div> </div>
<!-- Print Specs --> <!-- Print Specs -->
<div class="grid grid-cols-1 sm:grid-cols-3 gap-4 pt-4 border-t border-slate-200/80"> <div class="grid grid-cols-1 sm:grid-cols-3 gap-4 pt-4 border-t border-slate-200/60">
<div class="space-y-1.5"> <div class="space-y-1.5">
<label class="block text-xs font-bold text-slate-700">Afmetingen (LxBxH)</label> <label class="block text-xs font-medium text-slate-700">Afmetingen</label>
<input type="text" name="dimensions" value="{{ old('dimensions', '15 x 10 x 8 cm') }}" class="w-full bg-slate-50/60 focus:bg-white border border-slate-200 rounded-xl px-3 py-2 text-xs text-slate-900"> <input type="text" name="dimensions" value="{{ old('dimensions') }}" placeholder="bijv. 12 x 8 x 10 cm" class="w-full bg-slate-50/70 focus:bg-white border border-slate-200 rounded-lg px-3 py-1.5 text-xs text-slate-900">
</div> </div>
<div class="space-y-1.5"> <div class="space-y-1.5">
<label class="block text-xs font-bold text-slate-700">Gewicht (gram)</label> <label class="block text-xs font-medium text-slate-700">Gewicht (gram)</label>
<input type="number" name="weight_grams" x-model.number="weightGrams" class="w-full bg-slate-50/60 focus:bg-white border border-slate-200 rounded-xl px-3 py-2 text-xs text-slate-900"> <input type="number" name="weight_grams" x-model.number="weightGrams" class="w-full bg-slate-50/70 focus:bg-white border border-slate-200 rounded-lg px-3 py-1.5 text-xs text-slate-900">
</div> </div>
<div class="space-y-1.5"> <div class="space-y-1.5">
<label class="block text-xs font-bold text-slate-700">Printtijd (uren)</label> <label class="block text-xs font-medium text-slate-700">Printduur (uren)</label>
<input type="number" step="0.1" name="print_time_hours" x-model.number="printTimeHours" class="w-full bg-slate-50/60 focus:bg-white border border-slate-200 rounded-xl px-3 py-2 text-xs text-slate-900"> <input type="number" step="0.1" name="print_time_hours" x-model.number="printTimeHours" class="w-full bg-slate-50/70 focus:bg-white border border-slate-200 rounded-lg px-3 py-1.5 text-xs text-slate-900">
</div> </div>
</div> </div>
<!-- Toggles --> <!-- Toggles -->
<div class="pt-4 border-t border-slate-200/80 flex items-center space-x-6"> <div class="pt-4 border-t border-slate-200/60 flex items-center space-x-6 text-xs text-slate-700 font-medium">
<label class="flex items-center space-x-2 cursor-pointer text-xs font-bold text-slate-700"> <label class="flex items-center space-x-2 cursor-pointer">
<input type="checkbox" name="is_active" value="1" checked class="w-4 h-4 rounded text-amber-500 bg-white border-slate-300"> <input type="checkbox" name="is_active" value="1" {{ old('is_active', 1) ? 'checked' : '' }} class="w-4 h-4 rounded text-slate-900 border-slate-300">
<span>Direct zichtbaar in webshop (Actief)</span> <span>Direct zichtbaar in webshop (Actief)</span>
</label> </label>
<label class="flex items-center space-x-2 cursor-pointer text-xs font-bold text-slate-700"> <label class="flex items-center space-x-2 cursor-pointer">
<input type="checkbox" name="is_featured" value="1" class="w-4 h-4 rounded text-amber-500 bg-white border-slate-300"> <input type="checkbox" name="is_featured" value="1" {{ old('is_featured') ? 'checked' : '' }} class="w-4 h-4 rounded text-slate-900 border-slate-300">
<span>Uitlichten op homepage</span> <span>Uitlichten op homepage</span>
</label> </label>
</div> </div>
@@ -525,12 +489,12 @@
</div> </div>
<div class="flex items-center justify-end space-x-3"> <div class="flex items-center justify-end space-x-3">
<a href="{{ route('admin.products.index') }}" class="px-4 py-2.5 rounded-xl bg-white hover:bg-slate-50 text-slate-600 text-xs font-bold transition border border-slate-200"> <a href="{{ route('admin.products.index') }}" class="px-4 py-2 rounded-lg bg-white hover:bg-slate-50 text-slate-600 text-xs font-medium transition border border-slate-200">
Annuleren Annuleren
</a> </a>
<button type="submit" class="px-6 py-2.5 rounded-xl bg-amber-400 hover:bg-amber-300 text-slate-950 font-black text-xs transition flex items-center space-x-1.5 shadow-xs cursor-pointer"> <button type="submit" class="px-5 py-2 rounded-lg bg-slate-900 hover:bg-slate-800 text-white font-medium text-xs transition flex items-center space-x-1.5 shadow-xs cursor-pointer">
<i data-lucide="plus" class="w-4 h-4"></i> <i data-lucide="plus" class="w-4 h-4"></i>
<span>Product Publiceren</span> <span>Product Opslaan</span>
</button> </button>
</div> </div>
resources/views/admin/products/edit.blade.php
+112 -147
View File
@@ -76,17 +76,17 @@
}"> }">
<!-- Header --> <!-- Header -->
<div class="flex items-center justify-between pb-5 border-b border-slate-200/80"> <div class="flex items-center justify-between pb-5 border-b border-slate-200/60">
<div> <div>
<a href="{{ route('admin.products.index') }}" class="text-xs text-amber-600 font-bold hover:underline inline-flex items-center space-x-1 mb-1"> <a href="{{ route('admin.products.index') }}" class="text-xs text-slate-500 hover:text-slate-900 font-medium inline-flex items-center space-x-1 mb-1">
<i data-lucide="arrow-left" class="w-3.5 h-3.5"></i> <i data-lucide="arrow-left" class="w-3.5 h-3.5"></i>
<span>Terug naar Producten</span> <span>Terug naar Producten</span>
</a> </a>
<h1 class="font-heading text-2xl font-black text-slate-900">Product Bewerken: {{ $product->name }}</h1> <h1 class="font-heading text-2xl font-bold text-slate-900 tracking-tight">Product Bewerken: {{ $product->name }}</h1>
</div> </div>
<div class="flex items-center space-x-2"> <div class="flex items-center space-x-2">
<a href="{{ route('product.show', $product->slug) }}" target="_blank" class="px-3.5 py-2 rounded-xl bg-white hover:bg-slate-50 text-slate-700 text-xs font-bold transition flex items-center space-x-1.5 border border-slate-200 shadow-2xs"> <a href="{{ route('product.show', $product->slug) }}" target="_blank" class="px-3 py-1.5 rounded-lg bg-white hover:bg-slate-50 text-slate-700 text-xs font-medium transition flex items-center space-x-1.5 border border-slate-200/80 shadow-2xs">
<span>Bekijk Live</span> <span>Bekijk Live</span>
<i data-lucide="external-link" class="w-3.5 h-3.5 text-slate-400"></i> <i data-lucide="external-link" class="w-3.5 h-3.5 text-slate-400"></i>
</a> </a>
@@ -98,18 +98,18 @@
@csrf @csrf
@method('PUT') @method('PUT')
<div class="p-6 sm:p-8 rounded-3xl bg-white border border-slate-200/80 shadow-2xs space-y-6"> <div class="p-6 sm:p-7 rounded-2xl bg-white border border-slate-200/60 shadow-2xs space-y-6">
<!-- Basis Informatie --> <!-- Basis Informatie -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-4"> <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div class="md:col-span-2 space-y-1.5"> <div class="md:col-span-2 space-y-1.5">
<label class="block text-xs font-bold text-slate-700">Productnaam *</label> <label class="block text-xs font-medium text-slate-700">Productnaam *</label>
<input type="text" name="name" value="{{ old('name', $product->name) }}" required class="w-full bg-slate-50/60 focus:bg-white border border-slate-200 rounded-xl px-3.5 py-2.5 text-xs text-slate-900 font-bold focus:outline-none focus:ring-2 focus:ring-amber-400/20 focus:border-amber-400 transition"> <input type="text" name="name" value="{{ old('name', $product->name) }}" required class="w-full bg-slate-50/70 focus:bg-white border border-slate-200 rounded-lg px-3 py-2 text-xs text-slate-900 font-medium focus:outline-none focus:ring-1 focus:ring-slate-400 transition">
</div> </div>
<div class="space-y-1.5"> <div class="space-y-1.5">
<label class="block text-xs font-bold text-slate-700">Categorie *</label> <label class="block text-xs font-medium text-slate-700">Categorie *</label>
<select name="category_id" required class="w-full bg-slate-50/60 focus:bg-white border border-slate-200 rounded-xl px-3 py-2.5 text-xs text-slate-900 font-bold"> <select name="category_id" required class="w-full bg-slate-50/70 focus:bg-white border border-slate-200 rounded-lg px-3 py-2 text-xs text-slate-900 font-medium">
@foreach($categories as $cat) @foreach($categories as $cat)
<option value="{{ $cat->id }}" {{ old('category_id', $product->category_id) == $cat->id ? 'selected' : '' }}> <option value="{{ $cat->id }}" {{ old('category_id', $product->category_id) == $cat->id ? 'selected' : '' }}>
{{ $cat->name }} {{ $cat->name }}
@@ -120,52 +120,52 @@
</div> </div>
<!-- ==================================================== --> <!-- ==================================================== -->
<!-- 3D PRINT KOSTPRIJSCALCULATOR WIDGET (3dprintingcostcalculator) --> <!-- 3D PRINT KOSTPRIJSCALCULATOR WIDGET (Sleek & Subtle) -->
<!-- ==================================================== --> <!-- ==================================================== -->
<div class="p-5 rounded-2xl bg-amber-50/40 border border-amber-200/70 space-y-4"> <div class="p-4 sm:p-5 rounded-xl bg-slate-50/70 border border-slate-200/70 space-y-4">
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<div class="flex items-center space-x-2"> <div class="flex items-center space-x-2">
<span class="w-6 h-6 rounded-lg bg-amber-400 text-slate-950 flex items-center justify-center text-xs">🖨️</span> <i data-lucide="calculator" class="w-4 h-4 text-slate-500"></i>
<h3 class="font-heading text-xs font-black text-slate-900 uppercase tracking-wider">3D Print Kostprijscalculator</h3> <h3 class="text-xs font-semibold text-slate-900 uppercase tracking-wider">3D Print Kostprijscalculator</h3>
<span class="px-2 py-0.5 rounded-full bg-amber-100 text-amber-900 font-mono text-[10px] font-bold">Live Calculator</span> <span class="px-2 py-0.5 rounded-full bg-slate-200/70 text-slate-700 font-mono text-[10px]">Formule</span>
</div> </div>
<button type="button" @click="showCalculator = !showCalculator" class="text-xs text-slate-500 hover:text-slate-800 font-semibold flex items-center space-x-1"> <button type="button" @click="showCalculator = !showCalculator" class="text-xs text-slate-500 hover:text-slate-800 font-medium flex items-center space-x-1 cursor-pointer">
<span x-text="showCalculator ? 'Inklappen' : 'Calculator Openen'"></span> <span x-text="showCalculator ? 'Inklappen' : 'Openen'"></span>
<i data-lucide="chevron-down" class="w-3.5 h-3.5 transition-transform" :class="showCalculator ? 'rotate-180' : ''"></i> <i data-lucide="chevron-down" class="w-3.5 h-3.5 transition-transform" :class="showCalculator ? 'rotate-180' : ''"></i>
</button> </button>
</div> </div>
<div x-show="showCalculator" x-transition class="space-y-4 pt-2"> <div x-show="showCalculator" x-transition class="space-y-4 pt-1">
<div class="grid grid-cols-2 sm:grid-cols-4 gap-3 text-xs"> <div class="grid grid-cols-2 sm:grid-cols-4 gap-3 text-xs">
<!-- Gewicht --> <!-- Gewicht -->
<div class="space-y-1"> <div class="space-y-1">
<label class="block text-[11px] font-bold text-slate-600">Gewicht (gram)</label> <label class="block text-[11px] font-medium text-slate-600">Gewicht</label>
<div class="relative"> <div class="relative">
<input type="number" x-model.number="weightGrams" min="1" max="5000" class="w-full bg-white border border-slate-200 rounded-xl px-3 py-1.5 text-xs font-black text-slate-900"> <input type="number" x-model.number="weightGrams" min="1" max="5000" class="w-full bg-white border border-slate-200 rounded-lg px-2.5 py-1.5 text-xs font-semibold text-slate-900">
<span class="absolute right-2.5 top-1/2 -translate-y-1/2 text-[10px] text-slate-400 font-bold">gram</span> <span class="absolute right-2.5 top-1/2 -translate-y-1/2 text-[10px] text-slate-400">gram</span>
</div> </div>
</div> </div>
<!-- Printtijd --> <!-- Printtijd -->
<div class="space-y-1"> <div class="space-y-1">
<label class="block text-[11px] font-bold text-slate-600">Printtijd (uren)</label> <label class="block text-[11px] font-medium text-slate-600">Printduur</label>
<div class="relative"> <div class="relative">
<input type="number" step="0.1" x-model.number="printTimeHours" min="0.1" max="100" class="w-full bg-white border border-slate-200 rounded-xl px-3 py-1.5 text-xs font-black text-slate-900"> <input type="number" step="0.1" x-model.number="printTimeHours" min="0.1" max="100" class="w-full bg-white border border-slate-200 rounded-lg px-2.5 py-1.5 text-xs font-semibold text-slate-900">
<span class="absolute right-2.5 top-1/2 -translate-y-1/2 text-[10px] text-slate-400 font-bold">uur</span> <span class="absolute right-2.5 top-1/2 -translate-y-1/2 text-[10px] text-slate-400">uur</span>
</div> </div>
</div> </div>
<!-- Aantal Kleuren (AMS Purge) --> <!-- Aantal Kleuren (AMS Purge) -->
<div class="space-y-1"> <div class="space-y-1">
<label class="block text-[11px] font-bold text-slate-600">Aantal Kleuren</label> <label class="block text-[11px] font-medium text-slate-600">Kleuren (AMS)</label>
<div class="grid grid-cols-4 gap-1"> <div class="grid grid-cols-4 gap-1">
<template x-for="c in [1, 2, 3, 4]" :key="c"> <template x-for="c in [1, 2, 3, 4]" :key="c">
<button <button
type="button" type="button"
@click="colorCount = c" @click="colorCount = c"
class="py-1.5 rounded-lg text-center font-bold text-xs transition border" class="py-1 rounded-md text-center font-medium text-xs transition border cursor-pointer"
:class="colorCount === c ? 'bg-amber-400 border-amber-500 text-slate-950 font-black shadow-2xs' : 'bg-white border-slate-200 text-slate-600 hover:bg-slate-50'" :class="colorCount === c ? 'bg-slate-900 border-slate-900 text-white shadow-2xs' : 'bg-white border-slate-200 text-slate-600 hover:bg-slate-50'"
x-text="c" x-text="c"
></button> ></button>
</template> </template>
@@ -174,8 +174,8 @@
<!-- Materiaalsoort --> <!-- Materiaalsoort -->
<div class="space-y-1"> <div class="space-y-1">
<label class="block text-[11px] font-bold text-slate-600">Materiaalsoort</label> <label class="block text-[11px] font-medium text-slate-600">Materiaalsoort</label>
<select x-model="material" class="w-full bg-white border border-slate-200 rounded-xl px-2.5 py-1.5 text-xs font-bold text-slate-900"> <select x-model="material" class="w-full bg-white border border-slate-200 rounded-lg px-2.5 py-1.5 text-xs font-medium text-slate-900">
<option value="pla">Bio-PLA (1.0x)</option> <option value="pla">Bio-PLA (1.0x)</option>
<option value="petg">PETG Tough (1.2x)</option> <option value="petg">PETG Tough (1.2x)</option>
<option value="silk">Silk Zijdeglans (1.3x)</option> <option value="silk">Silk Zijdeglans (1.3x)</option>
@@ -184,48 +184,43 @@
</div> </div>
</div> </div>
<!-- Winstmarge selectie --> <!-- Marge Selector -->
<div class="flex flex-wrap items-center justify-between gap-2 pt-2 border-t border-amber-200/50 text-xs"> <div class="flex flex-wrap items-center justify-between gap-2 pt-2 border-t border-slate-200/60 text-xs">
<div class="flex items-center space-x-1.5"> <div class="flex items-center space-x-2">
<span class="text-slate-600 font-bold text-[11px]">Winstmarge:</span> <span class="text-slate-500 font-medium text-[11px]">Marge:</span>
<div class="inline-flex rounded-lg border border-slate-200 bg-white p-0.5 text-[11px] font-bold"> <div class="inline-flex rounded-lg border border-slate-200 bg-white p-0.5 text-[11px] font-medium">
<button type="button" @click="markupPercent = 35" :class="markupPercent === 35 ? 'bg-amber-400 text-slate-950 font-black' : 'text-slate-600 hover:text-slate-900'" class="px-2 py-0.5 rounded-md transition">35%</button> <button type="button" @click="markupPercent = 35" :class="markupPercent === 35 ? 'bg-slate-900 text-white' : 'text-slate-600 hover:text-slate-900'" class="px-2 py-0.5 rounded transition">35%</button>
<button type="button" @click="markupPercent = 50" :class="markupPercent === 50 ? 'bg-amber-400 text-slate-950 font-black' : 'text-slate-600 hover:text-slate-900'" class="px-2 py-0.5 rounded-md transition">50%</button> <button type="button" @click="markupPercent = 50" :class="markupPercent === 50 ? 'bg-slate-900 text-white' : 'text-slate-600 hover:text-slate-900'" class="px-2 py-0.5 rounded transition">50%</button>
<button type="button" @click="markupPercent = 65" :class="markupPercent === 65 ? 'bg-amber-400 text-slate-950 font-black' : 'text-slate-600 hover:text-slate-900'" class="px-2 py-0.5 rounded-md transition">65%</button> <button type="button" @click="markupPercent = 65" :class="markupPercent === 65 ? 'bg-slate-900 text-white' : 'text-slate-600 hover:text-slate-900'" class="px-2 py-0.5 rounded transition">65%</button>
<button type="button" @click="markupPercent = 100" :class="markupPercent === 100 ? 'bg-amber-400 text-slate-950 font-black' : 'text-slate-600 hover:text-slate-900'" class="px-2 py-0.5 rounded-md transition">100%</button> <button type="button" @click="markupPercent = 100" :class="markupPercent === 100 ? 'bg-slate-900 text-white' : 'text-slate-600 hover:text-slate-900'" class="px-2 py-0.5 rounded transition">100%</button>
</div> </div>
</div> </div>
<!-- Live Cost Breakdown Strip --> <!-- Live Cost Breakdown -->
<div class="flex items-center space-x-3 text-[11px] text-slate-500 font-semibold"> <div class="flex items-center space-x-3 text-[11px] text-slate-400 font-normal">
<span>🧵 Materiaal: €<span x-text="materialCost"></span></span> <span>Materiaal: €<span x-text="materialCost"></span></span>
<span>⚡ Stroom: €<span x-text="electricityCost"></span></span> <span>Stroom: €<span x-text="electricityCost"></span></span>
<span>⚙️ Slijtage: €<span x-text="machineCost"></span></span> <span>Slijtage: €<span x-text="machineCost"></span></span>
<span class="font-bold text-slate-700">Kostprijs: €<span x-text="totalProductionCost"></span></span> <span class="font-semibold text-slate-700">Kostprijs: €<span x-text="totalProductionCost"></span></span>
</div> </div>
</div> </div>
<!-- Result Banner met 1-klik overneem knop --> <!-- Callout Strip -->
<div class="p-3.5 rounded-xl bg-white border border-amber-300 shadow-2xs flex flex-col sm:flex-row sm:items-center justify-between gap-3"> <div class="p-3 rounded-lg bg-white border border-slate-200/80 shadow-2xs flex flex-col sm:flex-row sm:items-center justify-between gap-3">
<div class="flex items-center space-x-3"> <div>
<div class="w-10 h-10 rounded-xl bg-amber-100 text-amber-900 flex items-center justify-center font-heading font-black text-sm"> <span class="text-[10px] text-slate-400 uppercase font-medium block">Adviesprijs (incl. 21% btw)</span>
€ <div class="flex items-baseline space-x-1.5">
</div> <span class="font-heading text-lg font-bold text-slate-900">€ <span x-text="suggestedPrice"></span></span>
<div> <span class="text-[11px] text-slate-400">(op basis van <span x-text="weightGrams"></span>g &bull; <span x-text="printTimeHours"></span>u &bull; <span x-text="colorCount"></span> kleur)</span>
<span class="text-[10px] text-slate-400 block font-bold uppercase tracking-wider">Berekend Prijsvoorstel (incl. 21% btw)</span>
<div class="flex items-baseline space-x-1.5">
<span class="font-heading text-xl font-black text-slate-900">€ <span x-text="suggestedPrice"></span></span>
<span class="text-[11px] text-slate-500">op basis van <span x-text="weightGrams"></span>g &bull; <span x-text="printTimeHours"></span>u &bull; <span x-text="colorCount"></span> kleur(en)</span>
</div>
</div> </div>
</div> </div>
<button <button
type="button" type="button"
@click="applySuggestedPrice" @click="applySuggestedPrice"
class="px-4 py-2 bg-gradient-to-r from-amber-400 to-rose-400 hover:from-amber-300 hover:to-rose-300 text-slate-950 font-black text-xs rounded-xl shadow-xs transition flex items-center justify-center space-x-1.5 cursor-pointer" class="px-3.5 py-1.5 bg-slate-900 hover:bg-slate-800 text-white font-medium text-xs rounded-lg transition flex items-center justify-center space-x-1.5 cursor-pointer shadow-2xs"
> >
<i data-lucide="check" class="w-4 h-4"></i> <i data-lucide="check" class="w-3.5 h-3.5"></i>
<span>Neem Adviesprijs Over (€ <span x-text="suggestedPrice"></span>)</span> <span>Neem Adviesprijs Over (€ <span x-text="suggestedPrice"></span>)</span>
</button> </button>
</div> </div>
@@ -235,28 +230,28 @@
<!-- Prijs & Korte Omschrijving --> <!-- Prijs & Korte Omschrijving -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-4"> <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div class="space-y-1.5"> <div class="space-y-1.5">
<label class="block text-xs font-bold text-slate-700">Basisprijs (€) *</label> <label class="block text-xs font-medium text-slate-700">Basisprijs (€) *</label>
<div class="relative"> <div class="relative">
<span class="absolute left-3.5 top-1/2 -translate-y-1/2 font-bold text-slate-400 text-xs">€</span> <span class="absolute left-3 top-1/2 -translate-y-1/2 font-medium text-slate-400 text-xs">€</span>
<input <input
type="number" type="number"
step="0.01" step="0.01"
name="base_price" name="base_price"
x-model="basePrice" x-model="basePrice"
required required
class="w-full bg-slate-50/60 focus:bg-white border border-slate-200 rounded-xl pl-7 pr-3.5 py-2.5 text-xs text-slate-900 font-bold focus:outline-none focus:ring-2 focus:ring-amber-400/20 focus:border-amber-400" class="w-full bg-slate-50/70 focus:bg-white border border-slate-200 rounded-lg pl-7 pr-3 py-2 text-xs text-slate-900 font-semibold focus:outline-none focus:ring-1 focus:ring-slate-400"
> >
</div> </div>
</div> </div>
<div class="md:col-span-2 space-y-1.5"> <div class="md:col-span-2 space-y-1.5">
<label class="block text-xs font-bold text-slate-700">Korte Omschrijving (voor catalogus cards)</label> <label class="block text-xs font-medium text-slate-700">Korte Omschrijving (voor catalogus cards)</label>
<input type="text" name="short_description" value="{{ old('short_description', $product->short_description) }}" placeholder="Korte samenvatting in 1 zin..." class="w-full bg-slate-50/60 focus:bg-white border border-slate-200 rounded-xl px-3.5 py-2.5 text-xs text-slate-900"> <input type="text" name="short_description" value="{{ old('short_description', $product->short_description) }}" placeholder="Korte samenvatting in 1 zin..." class="w-full bg-slate-50/70 focus:bg-white border border-slate-200 rounded-lg px-3 py-2 text-xs text-slate-900">
</div> </div>
</div> </div>
<!-- Visueel Afbeeldingen & Fotogalerij Beheer --> <!-- Visueel Afbeeldingen & Fotogalerij Beheer -->
<div class="pt-5 border-t border-slate-200/80 space-y-4" <div class="pt-5 border-t border-slate-200/60 space-y-4"
x-data="{ x-data="{
imageUrl: '{{ old('image_url', $product->image_url ?? '') }}', imageUrl: '{{ old('image_url', $product->image_url ?? '') }}',
galleryImages: {{ json_encode(old('gallery_images', $product->gallery_images ?? []), JSON_UNESCAPED_SLASHES) }}, galleryImages: {{ json_encode(old('gallery_images', $product->gallery_images ?? []), JSON_UNESCAPED_SLASHES) }},
@@ -351,141 +346,111 @@
<div class="flex flex-col sm:flex-row sm:items-center justify-between gap-2"> <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-2">
<div> <div>
<div class="flex items-center space-x-2"> <div class="flex items-center space-x-2">
<i data-lucide="image" class="w-4 h-4 text-amber-500"></i> <i data-lucide="image" class="w-4 h-4 text-slate-500"></i>
<h3 class="font-heading text-sm font-black text-slate-900 uppercase tracking-wider">Productafbeeldingen & Fotogalerij</h3> <h3 class="text-xs font-semibold text-slate-900 uppercase tracking-wider">Productafbeeldingen & Fotogalerij</h3>
<span class="px-2 py-0.5 rounded-full bg-slate-100 text-slate-700 font-mono text-[11px] font-bold" x-text="(imageUrl ? 1 : 0) + galleryImages.length + ' foto(\'s)'"></span> <span class="px-2 py-0.5 rounded-full bg-slate-100 text-slate-600 font-mono text-[11px]" x-text="(imageUrl ? 1 : 0) + galleryImages.length + ' foto(\'s)'"></span>
</div> </div>
<p class="text-xs text-slate-500 mt-0.5"> <p class="text-xs text-slate-500 mt-0.5">
Alle foto's die vanuit MakerWorld zijn binnengehaald worden hier visueel getoond. Je kunt foto's toevoegen, wisselen van hoofdfoto of verwijderen. Hoofdfoto en extra detailfoto's van MakerWorld of uploads.
</p> </p>
</div> </div>
<div class="flex items-center space-x-2"> <div class="flex items-center space-x-2">
<!-- Bestand uploaden button --> <label class="px-3 py-1.5 rounded-lg bg-white hover:bg-slate-50 text-slate-700 text-xs font-medium transition flex items-center space-x-1.5 border border-slate-200/80 shadow-2xs cursor-pointer">
<label class="px-3 py-1.5 rounded-xl bg-white hover:bg-slate-50 text-slate-700 text-xs font-bold transition flex items-center space-x-1.5 border border-slate-200 shadow-2xs cursor-pointer"> <i data-lucide="upload" class="w-3.5 h-3.5 text-slate-400"></i>
<i data-lucide="upload" class="w-3.5 h-3.5 text-amber-500"></i>
<span x-text="isUploading ? 'Uploaden...' : 'Foto Uploaden'"></span> <span x-text="isUploading ? 'Uploaden...' : 'Foto Uploaden'"></span>
<input type="file" accept="image/*" class="hidden" @change="uploadFile" :disabled="isUploading"> <input type="file" accept="image/*" class="hidden" @change="uploadFile" :disabled="isUploading">
</label> </label>
<!-- URL toevoegen toggle --> <button type="button" @click="showUrlInput = !showUrlInput" class="px-3 py-1.5 rounded-lg bg-white hover:bg-slate-50 text-slate-700 text-xs font-medium transition flex items-center space-x-1.5 border border-slate-200/80 shadow-2xs">
<button type="button" @click="showUrlInput = !showUrlInput" class="px-3 py-1.5 rounded-xl bg-white hover:bg-slate-50 text-slate-700 text-xs font-bold transition flex items-center space-x-1.5 border border-slate-200 shadow-2xs"> <i data-lucide="link" class="w-3.5 h-3.5 text-slate-400"></i>
<i data-lucide="link" class="w-3.5 h-3.5 text-amber-500"></i>
<span>URL Plakken</span> <span>URL Plakken</span>
</button> </button>
</div> </div>
</div> </div>
<!-- URL Toevoegen Bar --> <!-- URL Toevoegen Bar -->
<div x-show="showUrlInput" x-transition class="p-3 bg-slate-50 rounded-2xl border border-slate-200 space-y-2"> <div x-show="showUrlInput" x-transition class="p-3 bg-slate-50 rounded-xl border border-slate-200/60 space-y-2">
<div class="flex items-center space-x-2"> <div class="flex items-center space-x-2">
<input <input
type="text" type="text"
x-model="newImageUrl" x-model="newImageUrl"
@keydown.enter.prevent="addImageUrl" @keydown.enter.prevent="addImageUrl"
placeholder="Plak hier een foto-URL (bijv. https://makerworld... of /images/products/...)" placeholder="Plak hier een foto-URL..."
class="flex-1 bg-white border border-slate-200 rounded-xl px-3 py-2 text-xs text-slate-900 placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-amber-400" class="flex-1 bg-white border border-slate-200 rounded-lg px-3 py-1.5 text-xs text-slate-900 placeholder-slate-400 focus:outline-none focus:ring-1 focus:ring-slate-400"
> >
<button type="button" @click="addImageUrl" class="px-4 py-2 bg-amber-400 hover:bg-amber-300 text-slate-950 rounded-xl text-xs font-black transition flex items-center space-x-1"> <button type="button" @click="addImageUrl" class="px-3.5 py-1.5 bg-slate-900 hover:bg-slate-800 text-white rounded-lg text-xs font-medium transition">
<i data-lucide="plus" class="w-3.5 h-3.5"></i> Toevoegen
<span>Toevoegen</span>
</button> </button>
</div> </div>
<p x-show="addError" x-text="addError" class="text-xs text-rose-600 font-bold"></p> <p x-show="addError" x-text="addError" class="text-xs text-rose-600 font-medium"></p>
</div> </div>
<div x-show="uploadError" x-text="uploadError" class="p-2.5 bg-rose-50 border border-rose-200 text-xs text-rose-700 rounded-xl font-bold"></div> <div x-show="uploadError" x-text="uploadError" class="p-2.5 bg-rose-50 border border-rose-200 text-xs text-rose-700 rounded-lg font-medium"></div>
<!-- Visuele Weergave: Hoofdafbeelding + Gallerij Grid --> <!-- Visuele Weergave -->
<div class="grid grid-cols-1 md:grid-cols-12 gap-4 items-start"> <div class="grid grid-cols-1 md:grid-cols-12 gap-4 items-start">
<!-- Hoofdafbeelding Box (Links) --> <!-- Cover Box -->
<div class="md:col-span-5 bg-slate-50/80 rounded-2xl border-2 border-amber-300 p-3.5 space-y-2 relative overflow-hidden"> <div class="md:col-span-5 bg-slate-50/70 rounded-xl border border-slate-200/80 p-3 space-y-2 relative overflow-hidden">
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<span class="px-2.5 py-1 rounded-full bg-amber-400 text-slate-950 font-black text-[10px] uppercase tracking-wider flex items-center space-x-1 shadow-2xs"> <span class="text-[10px] font-semibold text-slate-500 uppercase tracking-wider">Hoofdafbeelding (Cover)</span>
<i data-lucide="star" class="w-3 h-3 fill-current"></i>
<span>Hoofdafbeelding (Cover)</span>
</span>
<template x-if="imageUrl"> <template x-if="imageUrl">
<button type="button" @click="removeCover" class="text-slate-400 hover:text-rose-600 text-xs font-bold transition flex items-center space-x-1" title="Verwijder hoofdafbeelding"> <button type="button" @click="removeCover" class="text-slate-400 hover:text-rose-600 text-[11px] transition">
<i data-lucide="trash-2" class="w-3.5 h-3.5"></i> Verwijderen
<span>Verwijderen</span>
</button> </button>
</template> </template>
</div> </div>
<!-- Grote Image Preview --> <div class="aspect-4/3 rounded-lg bg-white overflow-hidden flex items-center justify-center relative border border-slate-200/60 shadow-2xs">
<div class="aspect-4/3 rounded-xl bg-white overflow-hidden flex items-center justify-center relative border border-slate-200 shadow-2xs">
<template x-if="imageUrl"> <template x-if="imageUrl">
<img :src="imageUrl" alt="Hoofdafbeelding" class="w-full h-full object-cover"> <img :src="imageUrl" alt="Hoofdafbeelding" class="w-full h-full object-cover">
</template> </template>
<template x-if="!imageUrl"> <template x-if="!imageUrl">
<div class="text-center p-4 text-slate-400 space-y-1"> <div class="text-center p-4 text-slate-400 space-y-1">
<i data-lucide="image" class="w-8 h-8 mx-auto text-slate-300"></i> <i data-lucide="image" class="w-6 h-6 mx-auto text-slate-300"></i>
<p class="text-xs font-bold">Geen hoofdafbeelding</p> <p class="text-xs">Geen cover</p>
<p class="text-[10px]">Kies een foto uit de galerij of voeg er een toe.</p>
</div> </div>
</template> </template>
</div> </div>
<!-- Huidige Cover URL weergave -->
<div class="pt-1">
<span class="text-[10px] font-mono text-slate-400 truncate block" x-text="imageUrl || 'Geen URL ingesteld'"></span>
</div>
</div> </div>
<!-- Gallerij Foto's (Rechts) --> <!-- Gallerij Grid -->
<div class="md:col-span-7 bg-slate-50/60 rounded-2xl border border-slate-200 p-3.5 space-y-3"> <div class="md:col-span-7 bg-slate-50/50 rounded-xl border border-slate-200/60 p-3 space-y-2">
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<span class="text-xs font-black text-slate-700 uppercase tracking-wider">Extra Gallerij Foto's</span> <span class="text-xs font-medium text-slate-700">Extra Galerijfoto's</span>
<span class="text-[10px] text-slate-400 font-bold" x-text="galleryImages.length + ' extra foto(\'s)'"></span> <span class="text-[10px] text-slate-400" x-text="galleryImages.length + ' foto(\'s)'"></span>
</div> </div>
<!-- Grid van Extra Foto's --> <div class="grid grid-cols-2 sm:grid-cols-3 gap-2 max-h-80 overflow-y-auto pr-1">
<div class="grid grid-cols-2 sm:grid-cols-3 gap-2.5 max-h-96 overflow-y-auto pr-1">
<template x-for="(img, index) in galleryImages" :key="index"> <template x-for="(img, index) in galleryImages" :key="index">
<div class="group relative rounded-xl bg-white border border-slate-200 hover:border-amber-400 transition overflow-hidden shadow-2xs"> <div class="group relative rounded-lg bg-white border border-slate-200/80 overflow-hidden shadow-2xs">
<div class="aspect-square w-full overflow-hidden bg-slate-100"> <div class="aspect-square w-full overflow-hidden bg-slate-100">
<img :src="img" alt="Gallerij foto" class="w-full h-full object-cover group-hover:scale-105 transition duration-200" loading="lazy"> <img :src="img" alt="Gallerij foto" class="w-full h-full object-cover" loading="lazy">
</div> </div>
<!-- Index Badge --> <div class="absolute inset-0 bg-slate-900/60 opacity-0 group-hover:opacity-100 transition flex flex-col items-center justify-center gap-1 p-2">
<div class="absolute top-1.5 left-1.5">
<span class="px-1.5 py-0.5 rounded bg-slate-900/80 text-white font-mono text-[9px] font-bold backdrop-blur" x-text="'#' + (index + 1)"></span>
</div>
<!-- Overlay Knoppen -->
<div class="absolute inset-0 bg-slate-900/60 opacity-0 group-hover:opacity-100 transition flex flex-col items-center justify-center gap-1.5 p-2">
<button <button
type="button" type="button"
@click="setAsCover(index)" @click="setAsCover(index)"
class="w-full py-1.5 px-2 bg-amber-400 hover:bg-amber-300 text-slate-950 rounded-lg text-[10px] font-black uppercase tracking-wider transition flex items-center justify-center space-x-1 shadow" class="w-full py-1 px-2 bg-white text-slate-900 rounded text-[10px] font-semibold transition"
> >
<i data-lucide="star" class="w-3 h-3 fill-current"></i> Als Cover
<span>Als Cover</span>
</button> </button>
<button <button
type="button" type="button"
@click="removeGalleryImage(index)" @click="removeGalleryImage(index)"
class="w-full py-1 px-2 bg-rose-600 hover:bg-rose-500 text-white rounded-lg text-[10px] font-bold transition flex items-center justify-center space-x-1" class="w-full py-1 px-2 bg-rose-600 text-white rounded text-[10px] font-medium transition"
> >
<i data-lucide="trash-2" class="w-3 h-3"></i> Verwijder
<span>Verwijder</span>
</button> </button>
</div> </div>
</div> </div>
</template> </template>
</div> </div>
<!-- Empty state --> <div x-show="galleryImages.length === 0" class="text-center py-6 px-3 rounded-lg border border-dashed border-slate-200 text-slate-400 text-xs">
<div x-show="galleryImages.length === 0" class="text-center py-8 px-4 rounded-xl border border-dashed border-slate-200 text-slate-400 space-y-1"> Geen extra foto's in de galerij.
<i data-lucide="images" class="w-6 h-6 mx-auto text-slate-300"></i>
<p class="text-xs font-bold text-slate-600">Nog geen extra galerijfoto's</p>
<p class="text-[11px] text-slate-400 max-w-xs mx-auto">
Voeg extra detailfoto's of printbedfoto's toe via "URL Plakken" of "Foto Uploaden".
</p>
</div> </div>
</div> </div>
@@ -495,37 +460,37 @@
<!-- Beschrijving --> <!-- Beschrijving -->
<div class="space-y-1.5"> <div class="space-y-1.5">
<label class="block text-xs font-bold text-slate-700">Volledige Productbeschrijving *</label> <label class="block text-xs font-medium text-slate-700">Productbeschrijving *</label>
<textarea name="description" rows="6" required class="w-full bg-slate-50/60 focus:bg-white border border-slate-200 rounded-xl px-3.5 py-2.5 text-xs text-slate-900 leading-relaxed">{{ old('description', $product->description) }}</textarea> <textarea name="description" rows="5" required class="w-full bg-slate-50/70 focus:bg-white border border-slate-200 rounded-lg px-3 py-2 text-xs text-slate-900 leading-relaxed focus:outline-none focus:ring-1 focus:ring-slate-400">{{ old('description', $product->description) }}</textarea>
</div> </div>
<!-- Print Specs --> <!-- Print Specs -->
<div class="grid grid-cols-1 sm:grid-cols-3 gap-4 pt-4 border-t border-slate-200/80"> <div class="grid grid-cols-1 sm:grid-cols-3 gap-4 pt-4 border-t border-slate-200/60">
<div class="space-y-1.5"> <div class="space-y-1.5">
<label class="block text-xs font-bold text-slate-700">Afmetingen (LxBxH)</label> <label class="block text-xs font-medium text-slate-700">Afmetingen</label>
<input type="text" name="dimensions" value="{{ old('dimensions', $product->dimensions) }}" placeholder="bijv. 12 x 8 x 10 cm" class="w-full bg-slate-50/60 focus:bg-white border border-slate-200 rounded-xl px-3 py-2 text-xs text-slate-900"> <input type="text" name="dimensions" value="{{ old('dimensions', $product->dimensions) }}" placeholder="bijv. 12 x 8 x 10 cm" class="w-full bg-slate-50/70 focus:bg-white border border-slate-200 rounded-lg px-3 py-1.5 text-xs text-slate-900">
</div> </div>
<div class="space-y-1.5"> <div class="space-y-1.5">
<label class="block text-xs font-bold text-slate-700">Gewicht (gram)</label> <label class="block text-xs font-medium text-slate-700">Gewicht (gram)</label>
<input type="number" name="weight_grams" x-model.number="weightGrams" class="w-full bg-slate-50/60 focus:bg-white border border-slate-200 rounded-xl px-3 py-2 text-xs text-slate-900"> <input type="number" name="weight_grams" x-model.number="weightGrams" class="w-full bg-slate-50/70 focus:bg-white border border-slate-200 rounded-lg px-3 py-1.5 text-xs text-slate-900">
</div> </div>
<div class="space-y-1.5"> <div class="space-y-1.5">
<label class="block text-xs font-bold text-slate-700">Printtijd (uren)</label> <label class="block text-xs font-medium text-slate-700">Printduur (uren)</label>
<input type="number" step="0.1" name="print_time_hours" x-model.number="printTimeHours" class="w-full bg-slate-50/60 focus:bg-white border border-slate-200 rounded-xl px-3 py-2 text-xs text-slate-900"> <input type="number" step="0.1" name="print_time_hours" x-model.number="printTimeHours" class="w-full bg-slate-50/70 focus:bg-white border border-slate-200 rounded-lg px-3 py-1.5 text-xs text-slate-900">
</div> </div>
</div> </div>
<!-- Toggles --> <!-- Toggles -->
<div class="pt-4 border-t border-slate-200/80 flex items-center space-x-6"> <div class="pt-4 border-t border-slate-200/60 flex items-center space-x-6 text-xs text-slate-700 font-medium">
<label class="flex items-center space-x-2 cursor-pointer text-xs font-bold text-slate-700"> <label class="flex items-center space-x-2 cursor-pointer">
<input type="checkbox" name="is_active" value="1" {{ old('is_active', $product->is_active) ? 'checked' : '' }} class="w-4 h-4 rounded text-amber-500 bg-white border-slate-300"> <input type="checkbox" name="is_active" value="1" {{ old('is_active', $product->is_active) ? 'checked' : '' }} class="w-4 h-4 rounded text-slate-900 border-slate-300">
<span>Zichtbaar in webshop (Actief)</span> <span>Zichtbaar in webshop (Actief)</span>
</label> </label>
<label class="flex items-center space-x-2 cursor-pointer text-xs font-bold text-slate-700"> <label class="flex items-center space-x-2 cursor-pointer">
<input type="checkbox" name="is_featured" value="1" {{ old('is_featured', $product->is_featured) ? 'checked' : '' }} class="w-4 h-4 rounded text-amber-500 bg-white border-slate-300"> <input type="checkbox" name="is_featured" value="1" {{ old('is_featured', $product->is_featured) ? 'checked' : '' }} class="w-4 h-4 rounded text-slate-900 border-slate-300">
<span>Uitlichten op homepage</span> <span>Uitlichten op homepage</span>
</label> </label>
</div> </div>
@@ -533,10 +498,10 @@
</div> </div>
<div class="flex items-center justify-end space-x-3"> <div class="flex items-center justify-end space-x-3">
<a href="{{ route('admin.products.index') }}" class="px-4 py-2.5 rounded-xl bg-white hover:bg-slate-50 text-slate-600 text-xs font-bold transition border border-slate-200"> <a href="{{ route('admin.products.index') }}" class="px-4 py-2 rounded-lg bg-white hover:bg-slate-50 text-slate-600 text-xs font-medium transition border border-slate-200">
Annuleren Annuleren
</a> </a>
<button type="submit" class="px-6 py-2.5 rounded-xl bg-amber-400 hover:bg-amber-300 text-slate-950 font-black text-xs transition flex items-center space-x-1.5 shadow-xs cursor-pointer"> <button type="submit" class="px-5 py-2 rounded-lg bg-slate-900 hover:bg-slate-800 text-white font-medium text-xs transition flex items-center space-x-1.5 shadow-xs cursor-pointer">
<i data-lucide="save" class="w-4 h-4"></i> <i data-lucide="save" class="w-4 h-4"></i>
<span>Wijzigingen Opslaan</span> <span>Wijzigingen Opslaan</span>
</button> </button>
resources/views/admin/products/index.blade.php
+60 -83
View File
@@ -6,108 +6,95 @@
<div class="space-y-6"> <div class="space-y-6">
<!-- Header --> <!-- Header -->
<div class="flex flex-col sm:flex-row sm:items-center justify-between pb-6 border-b border-slate-200/80 gap-4"> <div class="flex flex-col sm:flex-row sm:items-center justify-between pb-6 border-b border-slate-200/60 gap-4">
<div> <div>
<div class="inline-flex items-center space-x-1.5 text-xs text-amber-700 font-bold uppercase tracking-wider mb-1"> <span class="text-[11px] font-semibold uppercase tracking-wider text-slate-400 block mb-1">Catalogus & Assortiment</span>
<i data-lucide="box" class="w-4 h-4"></i> <h1 class="font-heading text-2xl sm:text-3xl font-bold text-slate-900 tracking-tight">Producten ({{ $products->total() }})</h1>
<span>Assortiment & Voorraad</span>
</div>
<h1 class="font-heading text-2xl sm:text-3xl font-black text-slate-900">Producten Overzicht ({{ $products->total() }})</h1>
<p class="text-xs sm:text-sm text-slate-500 mt-1">Beheer prijzen, teksten, kostprijscalculaties en afbeeldingen van alle 3D prints.</p> <p class="text-xs sm:text-sm text-slate-500 mt-1">Beheer prijzen, teksten, kostprijscalculaties en afbeeldingen van alle 3D prints.</p>
</div> </div>
<div class="flex items-center space-x-2.5 self-start sm:self-auto"> <div class="flex items-center space-x-2.5 self-start sm:self-auto">
<a href="{{ route('admin.makerworld.index') }}" class="px-3.5 py-2 rounded-xl bg-white hover:bg-slate-50 text-slate-700 text-xs font-bold transition flex items-center space-x-1.5 border border-slate-200 shadow-sm"> <a href="{{ route('admin.makerworld.index') }}" class="px-3.5 py-2 rounded-lg bg-white hover:bg-slate-50 text-slate-700 text-xs font-medium transition flex items-center space-x-1.5 border border-slate-200/80 shadow-2xs">
<i data-lucide="download-cloud" class="w-4 h-4 text-slate-500"></i> <i data-lucide="download-cloud" class="w-3.5 h-3.5 text-slate-400"></i>
<span>MakerWorld Importer</span> <span>MakerWorld Sync</span>
</a> </a>
<a href="{{ route('admin.products.create') }}" class="px-4 py-2 rounded-xl bg-amber-400 hover:bg-amber-300 text-slate-950 font-black text-xs transition flex items-center space-x-1.5 shadow-sm"> <a href="{{ route('admin.products.create') }}" class="px-3.5 py-2 rounded-lg bg-slate-900 hover:bg-slate-800 text-white font-medium text-xs transition flex items-center space-x-1.5 shadow-2xs">
<i data-lucide="plus" class="w-4 h-4"></i> <i data-lucide="plus" class="w-3.5 h-3.5"></i>
<span>Nieuw Product</span> <span>Nieuw Product</span>
</a> </a>
</div> </div>
</div> </div>
<!-- Status Filter Tabs --> <!-- Status Filter Tabs (Sleek Segmented Control) -->
<div class="flex items-center space-x-2 border-b border-slate-200/80 pb-2 overflow-x-auto text-xs font-bold"> <div class="flex items-center space-x-1.5 p-1 bg-slate-100/80 rounded-xl w-fit overflow-x-auto text-xs">
<a href="{{ route('admin.products.index', array_merge(request()->except('tab', 'page'), ['tab' => 'all'])) }}" class="px-3.5 py-2 rounded-xl transition flex items-center space-x-1.5 {{ ($tab ?? 'all') === 'all' ? 'bg-amber-400 text-slate-950 font-black shadow-sm' : 'text-slate-600 hover:text-slate-900 hover:bg-white' }}"> <a href="{{ route('admin.products.index', array_merge(request()->except('tab', 'page'), ['tab' => 'all'])) }}" class="px-3 py-1.5 rounded-lg transition flex items-center space-x-1.5 {{ ($tab ?? 'all') === 'all' ? 'bg-white text-slate-900 font-semibold shadow-2xs' : 'text-slate-600 hover:text-slate-900' }}">
<span>Alle Producten</span> <span>Alle</span>
<span class="px-1.5 py-0.5 rounded text-[10px] {{ ($tab ?? 'all') === 'all' ? 'bg-slate-950 text-amber-400 font-black' : 'bg-slate-100 text-slate-600' }}"> <span class="text-[11px] text-slate-400">({{ $totalAll ?? $products->total() }})</span>
{{ $totalAll ?? $products->total() }}
</span>
</a> </a>
<a href="{{ route('admin.products.index', array_merge(request()->except('tab', 'page'), ['tab' => 'published'])) }}" class="px-3.5 py-2 rounded-xl transition flex items-center space-x-1.5 {{ ($tab ?? 'all') === 'published' ? 'bg-emerald-600 text-white font-black shadow-sm' : 'text-slate-600 hover:text-slate-900 hover:bg-white' }}"> <a href="{{ route('admin.products.index', array_merge(request()->except('tab', 'page'), ['tab' => 'published'])) }}" class="px-3 py-1.5 rounded-lg transition flex items-center space-x-1.5 {{ ($tab ?? 'all') === 'published' ? 'bg-white text-slate-900 font-semibold shadow-2xs' : 'text-slate-600 hover:text-slate-900' }}">
<span class="w-1.5 h-1.5 rounded-full {{ ($tab ?? 'all') === 'published' ? 'bg-emerald-200' : 'bg-emerald-500' }}"></span> <span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span>
<span>Live in Webshop</span> <span>Live in Webshop</span>
<span class="px-1.5 py-0.5 rounded text-[10px] {{ ($tab ?? 'all') === 'published' ? 'bg-emerald-800 text-emerald-200 font-black' : 'bg-slate-100 text-slate-600' }}"> <span class="text-[11px] text-slate-400">({{ $totalPublished ?? 0 }})</span>
{{ $totalPublished ?? 0 }}
</span>
</a> </a>
<a href="{{ route('admin.products.index', array_merge(request()->except('tab', 'page'), ['tab' => 'draft'])) }}" class="px-3.5 py-2 rounded-xl transition flex items-center space-x-1.5 {{ ($tab ?? 'all') === 'draft' ? 'bg-amber-400 text-slate-950 font-black shadow-sm' : 'text-slate-600 hover:text-slate-900 hover:bg-white' }}"> <a href="{{ route('admin.products.index', array_merge(request()->except('tab', 'page'), ['tab' => 'draft'])) }}" class="px-3 py-1.5 rounded-lg transition flex items-center space-x-1.5 {{ ($tab ?? 'all') === 'draft' ? 'bg-white text-slate-900 font-semibold shadow-2xs' : 'text-slate-600 hover:text-slate-900' }}">
<i data-lucide="layers" class="w-3.5 h-3.5"></i>
<span>Concepten / Staging</span> <span>Concepten / Staging</span>
@if(($totalDraft ?? 0) > 0) @if(($totalDraft ?? 0) > 0)
<span class="px-1.5 py-0.5 rounded text-[10px] bg-amber-500 text-slate-950 font-black"> <span class="px-1.5 py-0.2 rounded-full text-[10px] font-semibold bg-amber-100 text-amber-800">
{{ $totalDraft }} {{ $totalDraft }}
</span> </span>
@endif @endif
</a> </a>
<a href="{{ route('admin.products.index', array_merge(request()->except('tab', 'page'), ['tab' => 'makerworld'])) }}" class="px-3.5 py-2 rounded-xl transition flex items-center space-x-1.5 {{ ($tab ?? 'all') === 'makerworld' ? 'bg-indigo-600 text-white font-black shadow-sm' : 'text-slate-600 hover:text-slate-900 hover:bg-white' }}"> <a href="{{ route('admin.products.index', array_merge(request()->except('tab', 'page'), ['tab' => 'makerworld'])) }}" class="px-3 py-1.5 rounded-lg transition flex items-center space-x-1.5 {{ ($tab ?? 'all') === 'makerworld' ? 'bg-white text-slate-900 font-semibold shadow-2xs' : 'text-slate-600 hover:text-slate-900' }}">
<i data-lucide="download-cloud" class="w-3.5 h-3.5"></i> <span>MakerWorld</span>
<span>MakerWorld Modellen</span> <span class="text-[11px] text-slate-400">({{ $totalMakerWorld ?? 0 }})</span>
<span class="px-1.5 py-0.5 rounded text-[10px] {{ ($tab ?? 'all') === 'makerworld' ? 'bg-indigo-800 text-indigo-200 font-black' : 'bg-slate-100 text-slate-600' }}">
{{ $totalMakerWorld ?? 0 }}
</span>
</a> </a>
@if(($totalDraft ?? 0) > 0)
<div class="ml-auto">
<a href="{{ route('admin.makerworld.staging') }}" class="px-3 py-1.5 rounded-xl bg-amber-400 hover:bg-amber-300 text-slate-950 font-black text-xs transition flex items-center space-x-1.5 shadow-sm">
<i data-lucide="layers" class="w-3.5 h-3.5"></i>
<span>Naar Artikel Beheer ({{ $totalDraft }} nieuw) &rarr;</span>
</a>
</div>
@endif
</div> </div>
<!-- Search & Filters --> <!-- Search & Filters -->
<div class="p-3.5 rounded-2xl bg-white border border-slate-200/80 shadow-sm flex flex-col sm:flex-row items-center justify-between gap-3"> <div class="p-3 rounded-xl bg-white border border-slate-200/60 shadow-2xs flex flex-col sm:flex-row items-center justify-between gap-3">
<form action="{{ route('admin.products.index') }}" method="GET" class="w-full sm:w-auto flex-1 flex items-center space-x-2"> <form action="{{ route('admin.products.index') }}" method="GET" class="w-full sm:w-auto flex-1 flex items-center space-x-2">
<div class="relative flex-1 max-w-md"> <div class="relative flex-1 max-w-sm">
<input <input
type="text" type="text"
name="q" name="q"
value="{{ request('q') }}" value="{{ request('q') }}"
placeholder="Zoek op naam of omschrijving..." placeholder="Zoek op naam..."
class="w-full bg-slate-50 border border-slate-200 rounded-xl pl-9 pr-3.5 py-2 text-xs text-slate-800 placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-amber-400 focus:bg-white transition" class="w-full bg-slate-50 border border-slate-200/80 rounded-lg pl-8 pr-3 py-1.5 text-xs text-slate-800 placeholder-slate-400 focus:outline-none focus:ring-1 focus:ring-slate-400 focus:bg-white transition"
> >
<i data-lucide="search" class="w-4 h-4 text-slate-400 absolute left-3 top-1/2 -translate-y-1/2"></i> <i data-lucide="search" class="w-3.5 h-3.5 text-slate-400 absolute left-2.5 top-1/2 -translate-y-1/2"></i>
</div> </div>
<select name="category_id" onchange="this.form.submit()" class="bg-slate-50 border border-slate-200 rounded-xl px-3 py-2 text-xs text-slate-700 focus:outline-none focus:ring-2 focus:ring-amber-400"> <select name="category_id" onchange="this.form.submit()" class="bg-slate-50 border border-slate-200/80 rounded-lg px-2.5 py-1.5 text-xs text-slate-700 focus:outline-none focus:ring-1 focus:ring-slate-400">
<option value="">Alle Categorieën</option> <option value="">Alle Categorieën</option>
@foreach($categories as $cat) @foreach($categories as $cat)
<option value="{{ $cat->id }}" {{ request('category_id') == $cat->id ? 'selected' : '' }}>{{ $cat->name }}</option> <option value="{{ $cat->id }}" {{ request('category_id') == $cat->id ? 'selected' : '' }}>{{ $cat->name }}</option>
@endforeach @endforeach
</select> </select>
<button type="submit" class="px-3.5 py-2 bg-slate-900 hover:bg-slate-800 text-white rounded-xl text-xs font-bold transition"> <button type="submit" class="px-3 py-1.5 bg-slate-900 hover:bg-slate-800 text-white rounded-lg text-xs font-medium transition">
Filter Filter
</button> </button>
@if(request()->hasAny(['q', 'category_id'])) @if(request()->hasAny(['q', 'category_id']))
<a href="{{ route('admin.products.index') }}" class="text-xs text-rose-600 hover:underline">Wissen</a> <a href="{{ route('admin.products.index') }}" class="text-xs text-rose-600 hover:underline">Wissen</a>
@endif @endif
</form> </form>
@if(($totalDraft ?? 0) > 0)
<a href="{{ route('admin.makerworld.staging') }}" class="text-xs text-slate-600 hover:text-slate-900 font-medium flex items-center space-x-1">
<span>Naar Artikel Beheer ({{ $totalDraft }} nieuw)</span>
<i data-lucide="arrow-right" class="w-3 h-3"></i>
</a>
@endif
</div> </div>
<!-- Products Table --> <!-- Products Table (Clean & Airy) -->
<div class="rounded-2xl bg-white border border-slate-200/80 overflow-hidden shadow-sm"> <div class="rounded-xl bg-white border border-slate-200/60 overflow-hidden shadow-2xs">
<div class="overflow-x-auto"> <div class="overflow-x-auto">
<table class="w-full text-left text-xs text-slate-600"> <table class="w-full text-left text-xs text-slate-600">
<thead class="bg-slate-50/80 text-[11px] uppercase tracking-wider text-slate-500 font-bold border-b border-slate-200"> <thead class="bg-slate-50/70 text-[11px] uppercase tracking-wider text-slate-400 font-semibold border-b border-slate-200/60">
<tr> <tr>
<th class="py-3 px-4">Product</th> <th class="py-3 px-4">Product</th>
<th class="py-3 px-4">Categorie</th> <th class="py-3 px-4">Categorie</th>
@@ -117,31 +104,31 @@
<th class="py-3 px-4 text-right">Acties</th> <th class="py-3 px-4 text-right">Acties</th>
</tr> </tr>
</thead> </thead>
<tbody class="divide-y divide-slate-100 font-medium"> <tbody class="divide-y divide-slate-100 font-normal">
@forelse($products as $product) @forelse($products as $product)
<tr class="hover:bg-slate-50/70 transition"> <tr class="hover:bg-slate-50/50 transition">
<td class="py-3 px-4"> <td class="py-3 px-4">
<div class="flex items-center space-x-3"> <div class="flex items-center space-x-3">
<div class="w-12 h-12 rounded-xl bg-slate-100 overflow-hidden border border-slate-200 flex-shrink-0 relative group shadow-xs"> <div class="w-10 h-10 rounded-lg bg-slate-100 overflow-hidden border border-slate-200/60 shrink-0 relative group">
<img src="{{ $product->image_url }}" alt="{{ $product->name }}" class="w-full h-full object-cover"> <img src="{{ $product->image_url }}" alt="{{ $product->name }}" class="w-full h-full object-cover">
@if(!empty($product->gallery_images) && count($product->gallery_images) > 0) @if(!empty($product->gallery_images) && count($product->gallery_images) > 0)
<span class="absolute bottom-0 right-0 px-1 py-0.5 rounded-tl-md bg-white/95 text-slate-700 font-mono text-[9px] font-bold border-t border-l border-slate-200 shadow-xs" title="{{ count($product->gallery_images) + 1 }} foto's in galerij"> <span class="absolute bottom-0 right-0 px-1 py-0.2 rounded-tl-sm bg-slate-900/80 text-white font-mono text-[8px]" title="{{ count($product->gallery_images) + 1 }} foto's in galerij">
+{{ count($product->gallery_images) }} +{{ count($product->gallery_images) }}
</span> </span>
@endif @endif
</div> </div>
<div> <div>
<a href="{{ route('admin.products.edit', $product) }}" class="font-bold text-slate-900 hover:text-amber-600 transition block text-sm"> <a href="{{ route('admin.products.edit', $product) }}" class="font-semibold text-slate-900 hover:text-sky-600 transition block text-xs">
{{ $product->name }} {{ $product->name }}
</a> </a>
<span class="text-[10px] text-slate-400 font-mono">/product/{{ $product->slug }}</span> <span class="text-[10px] text-slate-400 font-mono">/{{ $product->slug }}</span>
</div> </div>
</div> </div>
</td> </td>
<td class="py-3 px-4"> <td class="py-3 px-4">
@if($product->category) @if($product->category)
<span class="px-2 py-0.5 rounded-md bg-slate-100 text-slate-700 text-[11px] font-bold border border-slate-200/80"> <span class="px-2 py-0.5 rounded-md bg-slate-100 text-slate-600 text-[11px] font-medium">
{{ $product->category->name }} {{ $product->category->name }}
</span> </span>
@else @else
@@ -150,10 +137,10 @@
</td> </td>
<td class="py-3 px-4"> <td class="py-3 px-4">
<span class="font-black text-slate-900 font-heading text-sm">{{ $product->formatted_price }}</span> <span class="font-bold text-slate-900 font-heading text-xs">{{ $product->formatted_price }}</span>
</td> </td>
<td class="py-3 px-4 text-[11px] text-slate-500 space-y-0.5"> <td class="py-3 px-4 text-[11px] text-slate-400 space-y-0.5">
<div>{{ $product->dimensions ?? 'Standaard' }}</div> <div>{{ $product->dimensions ?? 'Standaard' }}</div>
<div>~{{ $product->weight_grams ?? 0 }}g &bull; {{ $product->print_time_hours ?? 0 }}u</div> <div>~{{ $product->weight_grams ?? 0 }}g &bull; {{ $product->print_time_hours ?? 0 }}u</div>
</td> </td>
@@ -161,51 +148,41 @@
<td class="py-3 px-4"> <td class="py-3 px-4">
<div class="flex flex-col gap-1 items-start"> <div class="flex flex-col gap-1 items-start">
@if($product->status === 'draft') @if($product->status === 'draft')
<span class="inline-flex items-center space-x-1 px-2 py-0.5 rounded-md bg-amber-50 text-amber-800 border border-amber-200 text-[10px] font-bold uppercase tracking-wider"> <span class="inline-flex items-center space-x-1 px-2 py-0.5 rounded-md bg-amber-50 text-amber-800 text-[10px] font-semibold border border-amber-200/60">
<i data-lucide="layers" class="w-3 h-3 text-amber-600"></i> <span>Concept</span>
<span>Concept Staging</span>
</span> </span>
<a href="{{ route('admin.makerworld.staging') }}" class="text-[10px] text-amber-700 hover:underline font-bold">
Beoordeel in Artikel Beheer &rarr;
</a>
@elseif($product->is_active) @elseif($product->is_active)
<span class="inline-flex items-center space-x-1 text-emerald-700 text-[11px] font-bold bg-emerald-50 px-2 py-0.5 rounded-md border border-emerald-200/60"> <span class="inline-flex items-center space-x-1.5 text-emerald-700 text-[11px] font-medium">
<span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span> <span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span>
<span>Live in Webshop</span> <span>Live</span>
</span> </span>
@else @else
<span class="inline-flex items-center space-x-1 text-slate-500 text-[11px] font-bold bg-slate-100 px-2 py-0.5 rounded-md border border-slate-200"> <span class="inline-flex items-center space-x-1.5 text-slate-400 text-[11px]">
<span class="w-1.5 h-1.5 rounded-full bg-slate-400"></span> <span class="w-1.5 h-1.5 rounded-full bg-slate-300"></span>
<span>Verborgen</span> <span>Verborgen</span>
</span> </span>
@endif @endif
@if($product->makerworld_id) @if($product->makerworld_id)
<span class="text-[10px] text-indigo-600 font-mono font-medium"> <span class="text-[10px] text-slate-400 font-mono">
MakerWorld #{{ $product->makerworld_id }} MW #{{ $product->makerworld_id }}
</span>
@endif
@if($product->is_featured)
<span class="inline-flex items-center text-amber-600 text-[10px] font-bold">
★ Uitgelicht
</span> </span>
@endif @endif
</div> </div>
</td> </td>
<td class="py-3 px-4 text-right"> <td class="py-3 px-4 text-right">
<div class="flex items-center justify-end space-x-1.5"> <div class="flex items-center justify-end space-x-1">
<a href="{{ route('product.show', $product->slug) }}" target="_blank" class="p-1.5 rounded-lg bg-slate-100 hover:bg-slate-200 text-slate-600 hover:text-slate-900 transition" title="Bekijk in Shop"> <a href="{{ route('product.show', $product->slug) }}" target="_blank" class="p-1.5 rounded-md text-slate-400 hover:text-slate-700 hover:bg-slate-100 transition" title="Bekijk in Shop">
<i data-lucide="external-link" class="w-3.5 h-3.5"></i> <i data-lucide="external-link" class="w-3.5 h-3.5"></i>
</a> </a>
<a href="{{ route('admin.products.edit', $product) }}" class="p-1.5 rounded-lg bg-slate-100 hover:bg-amber-100 text-slate-600 hover:text-amber-800 transition" title="Bewerken & Prijscalculator"> <a href="{{ route('admin.products.edit', $product) }}" class="p-1.5 rounded-md text-slate-500 hover:text-slate-900 hover:bg-slate-100 transition" title="Bewerken & Prijscalculator">
<i data-lucide="pencil" class="w-3.5 h-3.5"></i> <i data-lucide="pencil" class="w-3.5 h-3.5"></i>
</a> </a>
<form action="{{ route('admin.products.destroy', $product) }}" method="POST" onsubmit="return confirm('Weet je zeker dat je dit product wilt verwijderen?')"> <form action="{{ route('admin.products.destroy', $product) }}" method="POST" onsubmit="return confirm('Weet je zeker dat je dit product wilt verwijderen?')">
@csrf @csrf
@method('DELETE') @method('DELETE')
<button type="submit" class="p-1.5 rounded-lg bg-slate-100 hover:bg-rose-100 text-slate-600 hover:text-rose-700 transition cursor-pointer" title="Verwijderen"> <button type="submit" class="p-1.5 rounded-md text-slate-400 hover:text-rose-600 hover:bg-rose-50 transition cursor-pointer" title="Verwijderen">
<i data-lucide="trash-2" class="w-3.5 h-3.5"></i> <i data-lucide="trash-2" class="w-3.5 h-3.5"></i>
</button> </button>
</form> </form>
@@ -224,7 +201,7 @@
</div> </div>
@if($products->hasPages()) @if($products->hasPages())
<div class="p-4 border-t border-slate-200/80 bg-slate-50/50"> <div class="p-3.5 border-t border-slate-100 bg-slate-50/50">
{{ $products->links() }} {{ $products->links() }}
</div> </div>
@endif @endif
resources/views/auth/forgot-password.blade.php
+17 -21
View File
@@ -3,26 +3,23 @@
@section('title', 'Wachtwoord Vergeten | Jouwdriedee.nl') @section('title', 'Wachtwoord Vergeten | Jouwdriedee.nl')
@section('content') @section('content')
<div class="min-h-[70vh] flex items-center justify-center py-10 px-4 sm:px-6 lg:px-8"> <div class="min-h-[70vh] flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
<div class="w-full max-w-md space-y-6"> <div class="w-full max-w-sm space-y-6">
<!-- Header --> <!-- Header -->
<div class="text-center space-y-2"> <div class="text-center space-y-1.5">
<div class="inline-flex items-center justify-center w-12 h-12 rounded-2xl bg-indigo-100 text-indigo-900 shadow-2xs mb-1"> <h1 class="text-2xl font-bold text-slate-900 tracking-tight">Wachtwoord vergeten</h1>
<i data-lucide="key-round" class="w-6 h-6 text-indigo-600"></i> <p class="text-xs text-slate-500">Vul je e-mailadres in om een herstellink te ontvangen</p>
</div>
<h1 class="font-heading text-2xl sm:text-3xl font-black text-slate-900 tracking-tight">Wachtwoord vergeten</h1>
<p class="text-xs text-slate-500">Vul je e-mailadres in en ontvang een beveiligde herstellink</p>
</div> </div>
<!-- Form Card --> <!-- Form Card -->
<div class="p-6 sm:p-8 rounded-3xl bg-white border border-slate-200/80 shadow-lg space-y-5"> <div class="p-6 sm:p-7 rounded-2xl bg-white border border-slate-200/80 shadow-xs space-y-4">
<form action="{{ route('password.email') }}" method="POST" class="space-y-4"> <form action="{{ route('password.email') }}" method="POST" class="space-y-4">
@csrf @csrf
<!-- E-mailadres --> <!-- E-mailadres -->
<div class="space-y-1.5"> <div class="space-y-1">
<label for="email" class="block text-xs font-bold text-slate-700">Jouw geregistreerde e-mailadres</label> <label for="email" class="block text-xs font-medium text-slate-700">Jouw e-mailadres</label>
<div class="relative"> <div class="relative">
<input <input
type="email" type="email"
@@ -32,26 +29,26 @@
required required
autofocus autofocus
placeholder="jouw@email.nl" placeholder="jouw@email.nl"
class="w-full bg-slate-50 border border-slate-200 rounded-xl pl-9 pr-3.5 py-2.5 text-xs text-slate-900 font-semibold placeholder-slate-400 focus:bg-white focus:outline-none focus:ring-2 focus:ring-amber-400 @error('email') border-rose-400 @enderror" class="w-full bg-slate-50 border border-slate-200 rounded-xl pl-9 pr-3.5 py-2 text-xs text-slate-900 placeholder-slate-400 focus:bg-white focus:outline-none focus:ring-2 focus:ring-slate-900/10 focus:border-slate-900 @error('email') border-rose-400 @enderror"
> >
<i data-lucide="mail" class="w-4 h-4 text-slate-400 absolute left-3 top-1/2 -translate-y-1/2"></i> <i data-lucide="mail" class="w-3.5 h-3.5 text-slate-400 absolute left-3 top-1/2 -translate-y-1/2"></i>
</div> </div>
@error('email') @error('email')
<p class="text-[11px] font-bold text-rose-500 mt-1">{{ $message }}</p> <p class="text-[11px] text-rose-600 mt-1">{{ $message }}</p>
@enderror @enderror
</div> </div>
<!-- Submit Button --> <!-- Submit Button -->
<div class="pt-2"> <div class="pt-1">
<button type="submit" class="w-full py-3 px-5 rounded-2xl bg-amber-400 hover:bg-amber-300 text-slate-950 font-black text-xs sm:text-sm transition flex items-center justify-center space-x-2 shadow-xs cursor-pointer"> <button type="submit" class="w-full py-2.5 px-4 rounded-xl bg-slate-900 hover:bg-slate-800 text-white font-medium text-xs transition flex items-center justify-center space-x-2 shadow-xs cursor-pointer">
<i data-lucide="send" class="w-4 h-4"></i> <i data-lucide="send" class="w-3.5 h-3.5"></i>
<span>Herstellink Versturen</span> <span>Herstellink versturen</span>
</button> </button>
</div> </div>
</form> </form>
<div class="pt-4 border-t border-slate-100 text-center text-xs font-bold text-slate-600"> <div class="pt-3 border-t border-slate-100 text-center text-xs text-slate-500">
<a href="{{ route('login') }}" class="text-rose-600 hover:text-rose-700 underline inline-flex items-center space-x-1"> <a href="{{ route('login') }}" class="text-slate-900 font-medium hover:underline inline-flex items-center space-x-1">
<i data-lucide="arrow-left" class="w-3.5 h-3.5"></i> <i data-lucide="arrow-left" class="w-3.5 h-3.5"></i>
<span>Terug naar inloggen</span> <span>Terug naar inloggen</span>
</a> </a>
@@ -61,4 +58,3 @@
</div> </div>
</div> </div>
@endsection @endsection
resources/views/auth/login.blade.php
+23 -27
View File
@@ -3,26 +3,23 @@
@section('title', 'Inloggen | Jouwdriedee.nl') @section('title', 'Inloggen | Jouwdriedee.nl')
@section('content') @section('content')
<div class="min-h-[70vh] flex items-center justify-center py-10 px-4 sm:px-6 lg:px-8"> <div class="min-h-[70vh] flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
<div class="w-full max-w-md space-y-6"> <div class="w-full max-w-sm space-y-6">
<!-- Header --> <!-- Header -->
<div class="text-center space-y-2"> <div class="text-center space-y-1.5">
<div class="inline-flex items-center justify-center w-12 h-12 rounded-2xl bg-amber-100 text-amber-900 shadow-2xs mb-1"> <h1 class="text-2xl font-bold text-slate-900 tracking-tight">Welkom terug</h1>
<i data-lucide="log-in" class="w-6 h-6 text-amber-600"></i>
</div>
<h1 class="font-heading text-2xl sm:text-3xl font-black text-slate-900 tracking-tight">Welkom terug</h1>
<p class="text-xs text-slate-500">Log in met jouw e-mailadres en wachtwoord</p> <p class="text-xs text-slate-500">Log in met jouw e-mailadres en wachtwoord</p>
</div> </div>
<!-- Form Card --> <!-- Form Card -->
<div class="p-6 sm:p-8 rounded-3xl bg-white border border-slate-200/80 shadow-lg space-y-5"> <div class="p-6 sm:p-7 rounded-2xl bg-white border border-slate-200/80 shadow-xs space-y-4">
<form action="{{ route('login.submit') }}" method="POST" class="space-y-4"> <form action="{{ route('login.submit') }}" method="POST" class="space-y-4">
@csrf @csrf
<!-- E-mailadres --> <!-- E-mailadres -->
<div class="space-y-1.5"> <div class="space-y-1">
<label for="email" class="block text-xs font-bold text-slate-700">E-mailadres</label> <label for="email" class="block text-xs font-medium text-slate-700">E-mailadres</label>
<div class="relative"> <div class="relative">
<input <input
type="email" type="email"
@@ -32,20 +29,20 @@
required required
autofocus autofocus
placeholder="jouw@email.nl" placeholder="jouw@email.nl"
class="w-full bg-slate-50 border border-slate-200 rounded-xl pl-9 pr-3.5 py-2.5 text-xs text-slate-900 font-semibold placeholder-slate-400 focus:bg-white focus:outline-none focus:ring-2 focus:ring-amber-400 @error('email') border-rose-400 @enderror" class="w-full bg-slate-50 border border-slate-200 rounded-xl pl-9 pr-3.5 py-2 text-xs text-slate-900 placeholder-slate-400 focus:bg-white focus:outline-none focus:ring-2 focus:ring-slate-900/10 focus:border-slate-900 @error('email') border-rose-400 @enderror"
> >
<i data-lucide="mail" class="w-4 h-4 text-slate-400 absolute left-3 top-1/2 -translate-y-1/2"></i> <i data-lucide="mail" class="w-3.5 h-3.5 text-slate-400 absolute left-3 top-1/2 -translate-y-1/2"></i>
</div> </div>
@error('email') @error('email')
<p class="text-[11px] font-bold text-rose-500 mt-1">{{ $message }}</p> <p class="text-[11px] text-rose-600 mt-1">{{ $message }}</p>
@enderror @enderror
</div> </div>
<!-- Wachtwoord --> <!-- Wachtwoord -->
<div class="space-y-1.5"> <div class="space-y-1">
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<label for="password" class="block text-xs font-bold text-slate-700">Wachtwoord</label> <label for="password" class="block text-xs font-medium text-slate-700">Wachtwoord</label>
<a href="{{ route('password.request') }}" class="text-[11px] font-bold text-rose-600 hover:text-rose-700 transition"> <a href="{{ route('password.request') }}" class="text-[11px] font-medium text-slate-500 hover:text-slate-900 transition">
Wachtwoord vergeten? Wachtwoord vergeten?
</a> </a>
</div> </div>
@@ -56,35 +53,35 @@
id="password" id="password"
required required
placeholder="••••••••" placeholder="••••••••"
class="w-full bg-slate-50 border border-slate-200 rounded-xl pl-9 pr-3.5 py-2.5 text-xs text-slate-900 font-semibold placeholder-slate-400 focus:bg-white focus:outline-none focus:ring-2 focus:ring-amber-400 @error('password') border-rose-400 @enderror" class="w-full bg-slate-50 border border-slate-200 rounded-xl pl-9 pr-3.5 py-2 text-xs text-slate-900 placeholder-slate-400 focus:bg-white focus:outline-none focus:ring-2 focus:ring-slate-900/10 focus:border-slate-900 @error('password') border-rose-400 @enderror"
> >
<i data-lucide="lock" class="w-4 h-4 text-slate-400 absolute left-3 top-1/2 -translate-y-1/2"></i> <i data-lucide="lock" class="w-3.5 h-3.5 text-slate-400 absolute left-3 top-1/2 -translate-y-1/2"></i>
</div> </div>
@error('password') @error('password')
<p class="text-[11px] font-bold text-rose-500 mt-1">{{ $message }}</p> <p class="text-[11px] text-rose-600 mt-1">{{ $message }}</p>
@enderror @enderror
</div> </div>
<!-- Onthoud mij --> <!-- Onthoud mij -->
<div class="flex items-center justify-between pt-1"> <div class="flex items-center justify-between pt-1">
<label class="flex items-center space-x-2 cursor-pointer"> <label class="flex items-center space-x-2 cursor-pointer">
<input type="checkbox" name="remember" value="1" class="w-4 h-4 rounded text-amber-500 focus:ring-amber-400 border-slate-300"> <input type="checkbox" name="remember" value="1" class="w-4 h-4 rounded text-slate-900 focus:ring-slate-900 border-slate-300">
<span class="text-xs font-bold text-slate-600">Onthoud mij op dit apparaat</span> <span class="text-xs text-slate-600">Onthoud mij op dit apparaat</span>
</label> </label>
</div> </div>
<!-- Submit Button --> <!-- Submit Button -->
<div class="pt-2"> <div class="pt-1">
<button type="submit" class="w-full py-3 px-5 rounded-2xl bg-amber-400 hover:bg-amber-300 text-slate-950 font-black text-xs sm:text-sm transition flex items-center justify-center space-x-2 shadow-xs cursor-pointer"> <button type="submit" class="w-full py-2.5 px-4 rounded-xl bg-slate-900 hover:bg-slate-800 text-white font-medium text-xs transition flex items-center justify-center space-x-2 shadow-xs cursor-pointer">
<span>Inloggen</span> <span>Inloggen</span>
<i data-lucide="arrow-right" class="w-4 h-4"></i> <i data-lucide="arrow-right" class="w-3.5 h-3.5"></i>
</button> </button>
</div> </div>
</form> </form>
<div class="pt-4 border-t border-slate-100 text-center text-xs font-bold text-slate-600"> <div class="pt-3 border-t border-slate-100 text-center text-xs text-slate-500">
<span>Nog geen account?</span> <span>Nog geen account?</span>
<a href="{{ route('register') }}" class="text-rose-600 hover:text-rose-700 underline ml-1"> <a href="{{ route('register') }}" class="text-slate-900 font-semibold hover:underline ml-1">
Direct registreren Direct registreren
</a> </a>
</div> </div>
@@ -93,4 +90,3 @@
</div> </div>
</div> </div>
@endsection @endsection
resources/views/auth/register.blade.php
+34 -38
View File
@@ -3,26 +3,23 @@
@section('title', 'Registreren | Jouwdriedee.nl') @section('title', 'Registreren | Jouwdriedee.nl')
@section('content') @section('content')
<div class="min-h-[75vh] flex items-center justify-center py-10 px-4 sm:px-6 lg:px-8"> <div class="min-h-[75vh] flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
<div class="w-full max-w-md space-y-6"> <div class="w-full max-w-sm space-y-6">
<!-- Header --> <!-- Header -->
<div class="text-center space-y-2"> <div class="text-center space-y-1.5">
<div class="inline-flex items-center justify-center w-12 h-12 rounded-2xl bg-rose-100 text-rose-900 shadow-2xs mb-1"> <h1 class="text-2xl font-bold text-slate-900 tracking-tight">Account aanmaken</h1>
<i data-lucide="user-plus" class="w-6 h-6 text-rose-600"></i> <p class="text-xs text-slate-500">Meld je aan om bestellingen te volgen en sneller af te rekenen</p>
</div>
<h1 class="font-heading text-2xl sm:text-3xl font-black text-slate-900 tracking-tight">Account aanmaken</h1>
<p class="text-xs text-slate-500">Meld je aan om bestellingen te volgen en sneller te bestellen</p>
</div> </div>
<!-- Form Card --> <!-- Form Card -->
<div class="p-6 sm:p-8 rounded-3xl bg-white border border-slate-200/80 shadow-lg space-y-5"> <div class="p-6 sm:p-7 rounded-2xl bg-white border border-slate-200/80 shadow-xs space-y-4">
<form action="{{ route('register.submit') }}" method="POST" class="space-y-4"> <form action="{{ route('register.submit') }}" method="POST" class="space-y-3.5">
@csrf @csrf
<!-- Naam --> <!-- Naam -->
<div class="space-y-1.5"> <div class="space-y-1">
<label for="name" class="block text-xs font-bold text-slate-700">Voor- en achternaam *</label> <label for="name" class="block text-xs font-medium text-slate-700">Voor- en achternaam *</label>
<div class="relative"> <div class="relative">
<input <input
type="text" type="text"
@@ -31,19 +28,19 @@
value="{{ old('name') }}" value="{{ old('name') }}"
required required
autofocus autofocus
placeholder="bijv. Jan Jansen" placeholder="Jan Jansen"
class="w-full bg-slate-50 border border-slate-200 rounded-xl pl-9 pr-3.5 py-2.5 text-xs text-slate-900 font-semibold placeholder-slate-400 focus:bg-white focus:outline-none focus:ring-2 focus:ring-amber-400 @error('name') border-rose-400 @enderror" class="w-full bg-slate-50 border border-slate-200 rounded-xl pl-9 pr-3.5 py-2 text-xs text-slate-900 placeholder-slate-400 focus:bg-white focus:outline-none focus:ring-2 focus:ring-slate-900/10 focus:border-slate-900 @error('name') border-rose-400 @enderror"
> >
<i data-lucide="user" class="w-4 h-4 text-slate-400 absolute left-3 top-1/2 -translate-y-1/2"></i> <i data-lucide="user" class="w-3.5 h-3.5 text-slate-400 absolute left-3 top-1/2 -translate-y-1/2"></i>
</div> </div>
@error('name') @error('name')
<p class="text-[11px] font-bold text-rose-500 mt-1">{{ $message }}</p> <p class="text-[11px] text-rose-600 mt-1">{{ $message }}</p>
@enderror @enderror
</div> </div>
<!-- E-mailadres --> <!-- E-mailadres -->
<div class="space-y-1.5"> <div class="space-y-1">
<label for="email" class="block text-xs font-bold text-slate-700">E-mailadres *</label> <label for="email" class="block text-xs font-medium text-slate-700">E-mailadres *</label>
<div class="relative"> <div class="relative">
<input <input
type="email" type="email"
@@ -52,18 +49,18 @@
value="{{ old('email') }}" value="{{ old('email') }}"
required required
placeholder="jouw@email.nl" placeholder="jouw@email.nl"
class="w-full bg-slate-50 border border-slate-200 rounded-xl pl-9 pr-3.5 py-2.5 text-xs text-slate-900 font-semibold placeholder-slate-400 focus:bg-white focus:outline-none focus:ring-2 focus:ring-amber-400 @error('email') border-rose-400 @enderror" class="w-full bg-slate-50 border border-slate-200 rounded-xl pl-9 pr-3.5 py-2 text-xs text-slate-900 placeholder-slate-400 focus:bg-white focus:outline-none focus:ring-2 focus:ring-slate-900/10 focus:border-slate-900 @error('email') border-rose-400 @enderror"
> >
<i data-lucide="mail" class="w-4 h-4 text-slate-400 absolute left-3 top-1/2 -translate-y-1/2"></i> <i data-lucide="mail" class="w-3.5 h-3.5 text-slate-400 absolute left-3 top-1/2 -translate-y-1/2"></i>
</div> </div>
@error('email') @error('email')
<p class="text-[11px] font-bold text-rose-500 mt-1">{{ $message }}</p> <p class="text-[11px] text-rose-600 mt-1">{{ $message }}</p>
@enderror @enderror
</div> </div>
<!-- Wachtwoord --> <!-- Wachtwoord -->
<div class="space-y-1.5"> <div class="space-y-1">
<label for="password" class="block text-xs font-bold text-slate-700">Wachtwoord (minimaal 8 tekens) *</label> <label for="password" class="block text-xs font-medium text-slate-700">Wachtwoord (minimaal 8 tekens) *</label>
<div class="relative"> <div class="relative">
<input <input
type="password" type="password"
@@ -71,18 +68,18 @@
id="password" id="password"
required required
placeholder="••••••••" placeholder="••••••••"
class="w-full bg-slate-50 border border-slate-200 rounded-xl pl-9 pr-3.5 py-2.5 text-xs text-slate-900 font-semibold placeholder-slate-400 focus:bg-white focus:outline-none focus:ring-2 focus:ring-amber-400 @error('password') border-rose-400 @enderror" class="w-full bg-slate-50 border border-slate-200 rounded-xl pl-9 pr-3.5 py-2 text-xs text-slate-900 placeholder-slate-400 focus:bg-white focus:outline-none focus:ring-2 focus:ring-slate-900/10 focus:border-slate-900 @error('password') border-rose-400 @enderror"
> >
<i data-lucide="lock" class="w-4 h-4 text-slate-400 absolute left-3 top-1/2 -translate-y-1/2"></i> <i data-lucide="lock" class="w-3.5 h-3.5 text-slate-400 absolute left-3 top-1/2 -translate-y-1/2"></i>
</div> </div>
@error('password') @error('password')
<p class="text-[11px] font-bold text-rose-500 mt-1">{{ $message }}</p> <p class="text-[11px] text-rose-600 mt-1">{{ $message }}</p>
@enderror @enderror
</div> </div>
<!-- Bevestig Wachtwoord --> <!-- Bevestig Wachtwoord -->
<div class="space-y-1.5"> <div class="space-y-1">
<label for="password_confirmation" class="block text-xs font-bold text-slate-700">Bevestig wachtwoord *</label> <label for="password_confirmation" class="block text-xs font-medium text-slate-700">Bevestig wachtwoord *</label>
<div class="relative"> <div class="relative">
<input <input
type="password" type="password"
@@ -90,25 +87,25 @@
id="password_confirmation" id="password_confirmation"
required required
placeholder="••••••••" placeholder="••••••••"
class="w-full bg-slate-50 border border-slate-200 rounded-xl pl-9 pr-3.5 py-2.5 text-xs text-slate-900 font-semibold placeholder-slate-400 focus:bg-white focus:outline-none focus:ring-2 focus:ring-amber-400" class="w-full bg-slate-50 border border-slate-200 rounded-xl pl-9 pr-3.5 py-2 text-xs text-slate-900 placeholder-slate-400 focus:bg-white focus:outline-none focus:ring-2 focus:ring-slate-900/10 focus:border-slate-900"
> >
<i data-lucide="shield-check" class="w-4 h-4 text-slate-400 absolute left-3 top-1/2 -translate-y-1/2"></i> <i data-lucide="shield-check" class="w-3.5 h-3.5 text-slate-400 absolute left-3 top-1/2 -translate-y-1/2"></i>
</div> </div>
</div> </div>
<!-- Submit Button --> <!-- Submit Button -->
<div class="pt-2"> <div class="pt-2">
<button type="submit" class="w-full py-3 px-5 rounded-2xl bg-amber-400 hover:bg-amber-300 text-slate-950 font-black text-xs sm:text-sm transition flex items-center justify-center space-x-2 shadow-xs cursor-pointer"> <button type="submit" class="w-full py-2.5 px-4 rounded-xl bg-slate-900 hover:bg-slate-800 text-white font-medium text-xs transition flex items-center justify-center space-x-2 shadow-xs cursor-pointer">
<span>Account Aanmaken</span> <span>Account registreren</span>
<i data-lucide="arrow-right" class="w-4 h-4"></i> <i data-lucide="arrow-right" class="w-3.5 h-3.5"></i>
</button> </button>
</div> </div>
</form> </form>
<div class="pt-4 border-t border-slate-100 text-center text-xs font-bold text-slate-600"> <div class="pt-3 border-t border-slate-100 text-center text-xs text-slate-500">
<span>Heb je al een account?</span> <span>Al een account?</span>
<a href="{{ route('login') }}" class="text-rose-600 hover:text-rose-700 underline ml-1"> <a href="{{ route('login') }}" class="text-slate-900 font-semibold hover:underline ml-1">
Hier inloggen Inloggen
</a> </a>
</div> </div>
</div> </div>
@@ -116,4 +113,3 @@
</div> </div>
</div> </div>
@endsection @endsection
resources/views/auth/reset-password.blade.php
+20 -25
View File
@@ -3,27 +3,24 @@
@section('title', 'Nieuw Wachtwoord Instellen | Jouwdriedee.nl') @section('title', 'Nieuw Wachtwoord Instellen | Jouwdriedee.nl')
@section('content') @section('content')
<div class="min-h-[70vh] flex items-center justify-center py-10 px-4 sm:px-6 lg:px-8"> <div class="min-h-[70vh] flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
<div class="w-full max-w-md space-y-6"> <div class="w-full max-w-sm space-y-6">
<!-- Header --> <!-- Header -->
<div class="text-center space-y-2"> <div class="text-center space-y-1.5">
<div class="inline-flex items-center justify-center w-12 h-12 rounded-2xl bg-amber-100 text-amber-900 shadow-2xs mb-1"> <h1 class="text-2xl font-bold text-slate-900 tracking-tight">Nieuw wachtwoord</h1>
<i data-lucide="lock" class="w-6 h-6 text-amber-600"></i> <p class="text-xs text-slate-500">Kies een nieuw en veilig wachtwoord voor je account</p>
</div>
<h1 class="font-heading text-2xl sm:text-3xl font-black text-slate-900 tracking-tight">Nieuw wachtwoord</h1>
<p class="text-xs text-slate-500">Kies een nieuw en veilig wachtwoord voor jouw account</p>
</div> </div>
<!-- Form Card --> <!-- Form Card -->
<div class="p-6 sm:p-8 rounded-3xl bg-white border border-slate-200/80 shadow-lg space-y-5"> <div class="p-6 sm:p-7 rounded-2xl bg-white border border-slate-200/80 shadow-xs space-y-4">
<form action="{{ route('password.update') }}" method="POST" class="space-y-4"> <form action="{{ route('password.update') }}" method="POST" class="space-y-3.5">
@csrf @csrf
<input type="hidden" name="token" value="{{ $token }}"> <input type="hidden" name="token" value="{{ $token }}">
<!-- E-mailadres --> <!-- E-mailadres -->
<div class="space-y-1.5"> <div class="space-y-1">
<label for="email" class="block text-xs font-bold text-slate-700">E-mailadres</label> <label for="email" class="block text-xs font-medium text-slate-700">E-mailadres</label>
<input <input
type="email" type="email"
name="email" name="email"
@@ -31,16 +28,16 @@
value="{{ old('email', $email) }}" value="{{ old('email', $email) }}"
required required
readonly readonly
class="w-full bg-slate-100 border border-slate-200 rounded-xl px-3.5 py-2.5 text-xs text-slate-600 font-semibold cursor-not-allowed" class="w-full bg-slate-100 border border-slate-200 rounded-xl px-3.5 py-2 text-xs text-slate-600 font-medium cursor-not-allowed"
> >
@error('email') @error('email')
<p class="text-[11px] font-bold text-rose-500 mt-1">{{ $message }}</p> <p class="text-[11px] text-rose-600 mt-1">{{ $message }}</p>
@enderror @enderror
</div> </div>
<!-- Nieuw Wachtwoord --> <!-- Nieuw Wachtwoord -->
<div class="space-y-1.5"> <div class="space-y-1">
<label for="password" class="block text-xs font-bold text-slate-700">Nieuw wachtwoord (min. 8 tekens)</label> <label for="password" class="block text-xs font-medium text-slate-700">Nieuw wachtwoord (min. 8 tekens)</label>
<input <input
type="password" type="password"
name="password" name="password"
@@ -48,31 +45,30 @@
required required
autofocus autofocus
placeholder="••••••••" placeholder="••••••••"
class="w-full bg-slate-50 border border-slate-200 rounded-xl px-3.5 py-2.5 text-xs text-slate-900 font-semibold focus:bg-white focus:outline-none focus:ring-2 focus:ring-amber-400 @error('password') border-rose-400 @enderror" 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 @error('password') border-rose-400 @enderror"
> >
@error('password') @error('password')
<p class="text-[11px] font-bold text-rose-500 mt-1">{{ $message }}</p> <p class="text-[11px] text-rose-600 mt-1">{{ $message }}</p>
@enderror @enderror
</div> </div>
<!-- Bevestig Nieuw Wachtwoord --> <!-- Bevestig Nieuw Wachtwoord -->
<div class="space-y-1.5"> <div class="space-y-1">
<label for="password_confirmation" class="block text-xs font-bold text-slate-700">Bevestig nieuw wachtwoord</label> <label for="password_confirmation" class="block text-xs font-medium text-slate-700">Bevestig nieuw wachtwoord</label>
<input <input
type="password" type="password"
name="password_confirmation" name="password_confirmation"
id="password_confirmation" id="password_confirmation"
required required
placeholder="••••••••" placeholder="••••••••"
class="w-full bg-slate-50 border border-slate-200 rounded-xl px-3.5 py-2.5 text-xs text-slate-900 font-semibold focus:bg-white focus:outline-none focus:ring-2 focus:ring-amber-400" 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>
<!-- Submit Button --> <!-- Submit Button -->
<div class="pt-2"> <div class="pt-2">
<button type="submit" class="w-full py-3 px-5 rounded-2xl bg-amber-400 hover:bg-amber-300 text-slate-950 font-black text-xs sm:text-sm transition flex items-center justify-center space-x-2 shadow-xs cursor-pointer"> <button type="submit" class="w-full py-2.5 px-4 rounded-xl bg-slate-900 hover:bg-slate-800 text-white font-medium text-xs transition flex items-center justify-center space-x-2 shadow-xs cursor-pointer">
<i data-lucide="check" class="w-4 h-4"></i> <span>Wachtwoord Opslaan</span>
<span>Wachtwoord Opslaan & Inloggen</span>
</button> </button>
</div> </div>
</form> </form>
@@ -81,4 +77,3 @@
</div> </div>
</div> </div>
@endsection @endsection
resources/views/cart/index.blade.php
+57 -57
View File
@@ -1,86 +1,86 @@
@extends('layouts.app') @extends('layouts.app')
@section('title', 'Winkelwagen 🛒 | Jouwdriedee.nl') @section('title', 'Winkelwagen | Jouwdriedee.nl')
@section('content') @section('content')
<div class="bg-gradient-to-b from-amber-50 to-[#FFFDF9] border-b border-slate-200/80 py-5 sm:py-7"> <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"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<h1 class="font-heading text-2xl sm:text-3xl font-black text-slate-900 tracking-tight flex items-center space-x-2"> <h1 class="text-2xl sm:text-3xl font-bold tracking-tight text-slate-900">
<span>🛒</span> Winkelwagen
<span>Jouw Winkelwagen</span>
</h1> </h1>
<p class="text-xs text-slate-500 mt-0.5">Controleer jouw geselecteerde 3D prints, custom bestanden en kleuren.</p> <p class="text-xs text-slate-500 mt-1">Overzicht van jouw geselecteerde 3D prints en configuraties.</p>
</div> </div>
</div> </div>
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6 sm:py-10"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 sm:py-12">
@if(empty($cart)) @if(empty($cart))
<div class="p-8 sm:p-12 text-center rounded-3xl bg-white border border-slate-100 shadow-sm space-y-4 max-w-lg mx-auto"> <div class="p-10 sm:p-14 text-center rounded-2xl bg-white border border-slate-200/80 shadow-xs space-y-3 max-w-md mx-auto">
<div class="w-16 h-16 rounded-2xl bg-amber-50 text-slate-800 flex items-center justify-center mx-auto text-3xl"> <div class="w-12 h-12 rounded-xl bg-slate-100 text-slate-400 flex items-center justify-center mx-auto">
🧸 <i data-lucide="shopping-bag" class="w-6 h-6"></i>
</div> </div>
<h2 class="font-heading text-xl font-black text-slate-900">Je winkelmandje is nog leeg!</h2> <h2 class="text-base font-bold text-slate-900">Je winkelwagen is nog leeg</h2>
<p class="text-xs text-slate-500 max-w-sm mx-auto">Bekijk onze vrolijke collectie fidget toys en Pokémon prints, of bestel direct je eigen 3D model.</p> <p class="text-xs text-slate-500 max-w-xs mx-auto">Bekijk onze studio collectie of upload direct een eigen model.</p>
<div class="pt-2 flex flex-col sm:flex-row items-center justify-center gap-2"> <div class="pt-3 flex flex-col sm:flex-row items-center justify-center gap-2">
<a href="{{ route('catalog') }}" class="playful-btn w-full sm:w-auto px-5 py-3 rounded-xl bg-amber-400 hover:bg-amber-300 text-slate-950 font-black text-xs inline-flex items-center justify-center space-x-1.5 shadow-xs"> <a href="{{ route('catalog') }}" class="w-full sm:w-auto px-4 py-2 rounded-xl bg-slate-900 hover:bg-slate-800 text-white font-medium text-xs inline-flex items-center justify-center space-x-1.5 shadow-xs transition">
<span>Bekijk Alle Prints 🎁</span> <span>Bekijk collectie</span>
<i data-lucide="arrow-right" class="w-3.5 h-3.5"></i>
</a> </a>
<a href="{{ route('custom.request') }}" class="playful-btn w-full sm:w-auto px-5 py-3 rounded-xl bg-slate-100 hover:bg-slate-200 text-slate-800 font-bold text-xs inline-flex items-center justify-center space-x-1.5"> <a href="{{ route('custom.request') }}" class="w-full sm:w-auto px-4 py-2 rounded-xl bg-white hover:bg-slate-50 border border-slate-200 text-slate-700 font-medium text-xs inline-flex items-center justify-center space-x-1.5 transition">
<span>Eigen Model Bestellen 🚀</span> <span>Eigen bestand uploaden</span>
</a> </a>
</div> </div>
</div> </div>
@else @else
<div class="grid grid-cols-1 lg:grid-cols-12 gap-6 lg:gap-8"> <div class="grid grid-cols-1 lg:grid-cols-12 gap-8">
<!-- Items Lijst --> <!-- Items Lijst -->
<div class="lg:col-span-8 space-y-3 sm:space-y-4"> <div class="lg:col-span-8 space-y-3">
@foreach($cart as $key => $item) @foreach($cart as $key => $item)
<div class="p-4 sm:p-5 rounded-2xl sm:rounded-3xl bg-white border border-slate-100 shadow-xs flex flex-col sm:flex-row items-center justify-between gap-4"> <div class="p-4 sm:p-5 rounded-2xl bg-white border border-slate-200/80 shadow-2xs flex flex-col sm:flex-row items-center justify-between gap-4">
<div class="flex items-center space-x-3.5 w-full sm:w-auto"> <div class="flex items-center space-x-3.5 w-full sm:w-auto">
<div class="w-16 h-16 sm:w-20 sm:h-20 rounded-2xl bg-slate-100 overflow-hidden flex-shrink-0 border border-slate-100"> <div class="w-16 h-16 rounded-xl bg-slate-100 overflow-hidden shrink-0 border border-slate-200/60">
<img src="{{ $item['image_url'] }}" alt="{{ $item['name'] }}" class="w-full h-full object-cover"> <img src="{{ $item['image_url'] }}" alt="{{ $item['name'] }}" class="w-full h-full object-cover">
</div> </div>
<div class="space-y-1"> <div class="space-y-1">
<h3 class="font-heading text-sm sm:text-base font-black text-slate-900">{{ $item['name'] }}</h3> <h3 class="text-sm font-semibold text-slate-900">{{ $item['name'] }}</h3>
<div class="flex flex-wrap items-center gap-1.5 text-[11px] text-slate-500"> <div class="flex flex-wrap items-center gap-1.5 text-[11px] text-slate-500">
<span class="px-2 py-0.2 rounded-md bg-rose-50 text-rose-700 font-bold">{{ $item['material'] }}</span> <span class="px-1.5 py-0.2 rounded bg-slate-100 text-slate-700 font-medium">{{ strtoupper($item['material']) }}</span>
<span>•</span> <span>&bull;</span>
<span class="font-semibold text-slate-700">Kleur: {{ $item['color'] }}</span> <span>Kleur: {{ $item['color'] }}</span>
<span>•</span> <span>&bull;</span>
<span class="font-mono text-slate-600">{{ $item['scale'] }}</span> <span class="font-mono text-slate-600">{{ $item['scale'] }}</span>
</div> </div>
@if(!empty($item['custom_file_name'])) @if(!empty($item['custom_file_name']))
<div class="text-[10px] font-bold text-indigo-600 flex items-center space-x-1 pt-0.5"> <div class="text-[10px] text-slate-500 font-mono flex items-center space-x-1 pt-0.5">
<span>📁</span> <i data-lucide="file-code" class="w-3 h-3 text-slate-400"></i>
<span>Bestand: {{ $item['custom_file_name'] }}</span> <span>{{ $item['custom_file_name'] }}</span>
</div> </div>
@endif @endif
@if(!empty($item['custom_model_url'])) @if(!empty($item['custom_model_url']))
<div class="text-[10px] font-bold text-indigo-600 flex items-center space-x-1 pt-0.5"> <div class="text-[10px] text-slate-500 font-mono flex items-center space-x-1 pt-0.5">
<span>🔗</span> <i data-lucide="link" class="w-3 h-3 text-slate-400"></i>
<span class="truncate max-w-xs">{{ $item['custom_model_url'] }}</span> <span class="truncate max-w-xs">{{ $item['custom_model_url'] }}</span>
</div> </div>
@endif @endif
<div class="text-xs font-black text-slate-900 pt-0.5"> <div class="text-xs font-medium text-slate-600 pt-0.5">
€ {{ number_format($item['price'], 2, ',', '.') }} per stuk € {{ number_format($item['price'], 2, ',', '.') }} per stuk
</div> </div>
</div> </div>
</div> </div>
<!-- Aantal en acties --> <!-- Aantal en acties -->
<div class="flex items-center justify-between sm:justify-end space-x-3 w-full sm:w-auto pt-2 sm:pt-0 border-t sm:border-t-0 border-slate-100"> <div class="flex items-center justify-between sm:justify-end space-x-4 w-full sm:w-auto pt-2 sm:pt-0 border-t sm:border-t-0 border-slate-100">
<!-- Update Formulier --> <!-- Update Formulier -->
<form action="{{ route('cart.update') }}" method="POST" class="flex items-center space-x-1"> <form action="{{ route('cart.update') }}" method="POST" class="flex items-center space-x-1.5">
@csrf @csrf
<input type="hidden" name="key" value="{{ $key }}"> <input type="hidden" name="key" value="{{ $key }}">
<input type="number" name="quantity" min="1" max="50" value="{{ $item['quantity'] }}" class="w-14 bg-slate-50 border border-slate-200 rounded-lg px-2 py-1 text-xs text-center font-heading font-black text-slate-900 focus:outline-none"> <input type="number" name="quantity" min="1" max="50" value="{{ $item['quantity'] }}" class="w-12 bg-slate-50 border border-slate-200 rounded-lg px-2 py-1 text-xs text-center font-medium text-slate-900 focus:bg-white focus:outline-none focus:ring-1 focus:ring-slate-900">
<button type="submit" class="p-1 rounded-lg text-slate-400 hover:text-slate-800 transition" title="Bijwerken"> <button type="submit" class="p-1 rounded-lg text-slate-400 hover:text-slate-800 transition cursor-pointer" title="Bijwerken">
<i data-lucide="refresh-cw" class="w-3.5 h-3.5"></i> <i data-lucide="refresh-cw" class="w-3 h-3"></i>
</button> </button>
</form> </form>
<span class="font-heading text-base font-black text-slate-900 w-20 text-right"> <span class="font-semibold text-slate-900 text-sm w-20 text-right">
€ {{ number_format($item['price'] * $item['quantity'], 2, ',', '.') }} € {{ number_format($item['price'] * $item['quantity'], 2, ',', '.') }}
</span> </span>
@@ -88,7 +88,7 @@
<form action="{{ route('cart.remove', $key) }}" method="POST"> <form action="{{ route('cart.remove', $key) }}" method="POST">
@csrf @csrf
@method('DELETE') @method('DELETE')
<button type="submit" class="p-1.5 text-slate-300 hover:text-rose-500 transition cursor-pointer" title="Verwijderen"> <button type="submit" class="p-1.5 text-slate-400 hover:text-rose-600 transition cursor-pointer" title="Verwijderen">
<i data-lucide="trash-2" class="w-4 h-4"></i> <i data-lucide="trash-2" class="w-4 h-4"></i>
</button> </button>
</form> </form>
@@ -99,45 +99,45 @@
<!-- Samenvatting --> <!-- Samenvatting -->
<div class="lg:col-span-4"> <div class="lg:col-span-4">
<div class="p-6 rounded-3xl bg-white border border-slate-100 shadow-md space-y-4 sticky top-24"> <div class="p-6 rounded-2xl bg-white border border-slate-200/80 shadow-xs space-y-4 sticky top-24">
<h3 class="font-heading text-sm font-black text-slate-900 uppercase tracking-wider pb-2.5 border-b border-slate-100 flex items-center space-x-1.5"> <h3 class="text-xs font-bold text-slate-900 uppercase tracking-wider pb-2 border-b border-slate-100">
<span>🧾</span> Besteloverzicht
<span>Overzicht Bestelling</span>
</h3> </h3>
<div class="space-y-2 text-xs font-bold"> <div class="space-y-2 text-xs">
<div class="flex justify-between text-slate-600"> <div class="flex justify-between text-slate-600">
<span>Subtotaal</span> <span>Subtotaal</span>
<span class="font-heading text-sm font-black text-slate-900">€ {{ number_format($subtotal, 2, ',', '.') }}</span> <span class="font-semibold text-slate-900">€ {{ number_format($subtotal, 2, ',', '.') }}</span>
</div> </div>
<div class="flex justify-between text-slate-600"> <div class="flex justify-between text-slate-600">
<span>Verzendkosten</span> <span>Verzendkosten</span>
@if($shipping == 0) @if($shipping == 0)
<span class="text-emerald-700 font-black bg-emerald-100 px-2 py-0.2 rounded-md">GRATIS 🎉</span> <span class="text-emerald-700 font-semibold bg-emerald-50 px-2 py-0.5 rounded-md">Gratis</span>
@else @else
<span class="font-heading text-sm font-black text-slate-900">€ {{ number_format($shipping, 2, ',', '.') }}</span> <span class="font-semibold text-slate-900">€ {{ number_format($shipping, 2, ',', '.') }}</span>
@endif @endif
</div> </div>
@if($subtotal < 50) @if($subtotal < 50)
<p class="text-[11px] text-amber-900 bg-amber-50 p-2.5 rounded-xl border border-amber-200 font-bold"> <p class="text-[11px] text-slate-600 bg-slate-50 p-2.5 rounded-xl border border-slate-200/60">
💡 Tip: Bestel nog voor <strong>€ {{ number_format(50 - $subtotal, 2, ',', '.') }}</strong> voor gratis verzending! Bestel nog voor <strong>€ {{ number_format(50 - $subtotal, 2, ',', '.') }}</strong> voor gratis verzending.
</p> </p>
@endif @endif
</div> </div>
<div class="pt-3 border-t border-slate-100 flex justify-between items-baseline"> <div class="pt-3 border-t border-slate-100 flex justify-between items-baseline">
<span class="font-heading text-sm font-black text-slate-900">Totaal (incl. btw)</span> <span class="text-xs font-medium text-slate-600">Totaal (incl. btw)</span>
<span class="font-heading text-2xl font-black text-slate-900">€ {{ number_format($total, 2, ',', '.') }}</span> <span class="text-xl font-bold text-slate-900">€ {{ number_format($total, 2, ',', '.') }}</span>
</div> </div>
<a href="{{ route('checkout.index') }}" class="playful-btn w-full py-3.5 rounded-2xl bg-gradient-to-r from-amber-400 via-rose-400 to-rose-500 hover:opacity-95 text-slate-950 font-black text-xs uppercase tracking-wider transition shadow-md shadow-rose-500/20 flex items-center justify-center space-x-2"> <a href="{{ route('checkout.index') }}" 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">
<span>Doorgaan Naar Afrekenen 🚀</span> <span>Doorgaan naar afrekenen</span>
<i data-lucide="arrow-right" class="w-3.5 h-3.5"></i>
</a> </a>
<div class="flex items-center justify-center space-x-2 text-[11px] font-bold text-slate-400 pt-1"> <div class="flex items-center justify-center space-x-2 text-[11px] text-slate-400 pt-1">
<span>🔒 Veilig betalen met iDEAL</span> <span>Veilig betalen via iDEAL</span>
<span>•</span> <span>&bull;</span>
<span>PostNL</span> <span>PostNL bezorging</span>
</div> </div>
</div> </div>
</div> </div>
resources/views/checkout/index.blade.php
+69 -70
View File
@@ -3,14 +3,14 @@
@section('title', 'Afrekenen | Jouwdriedee.nl') @section('title', 'Afrekenen | Jouwdriedee.nl')
@section('content') @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"> <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> <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-0.5">Vul je bezorgadres in om jouw 3D-prints in de printwachtrij te plaatsen.</p> <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> </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"> <form action="{{ route('checkout.store') }}" method="POST">
@csrf @csrf
<div class="grid grid-cols-1 lg:grid-cols-12 gap-8"> <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"> <div class="lg:col-span-7 space-y-6">
<!-- 1. Contactgegevens --> <!-- 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"> <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> <span>1. Contactgegevens</span>
</h2> </h2>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4"> <div class="grid grid-cols-1 sm:grid-cols-2 gap-3.5">
<div class="sm:col-span-2"> <div class="sm:col-span-2 space-y-1">
<label class="block text-xs font-semibold text-slate-700 mb-1">Volledige Naam *</label> <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 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"> <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>
<div> <div class="space-y-1">
<label class="block text-xs font-semibold text-slate-700 mb-1">E-mailadres *</label> <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.5 text-xs text-slate-900 focus:bg-white focus:outline-none focus:ring-1 focus:ring-indigo-500"> <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>
<div> <div class="space-y-1">
<label class="block text-xs font-semibold text-slate-700 mb-1">Telefoonnummer (voor bezorgupdates)</label> <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.5 text-xs text-slate-900 focus:bg-white focus:outline-none focus:ring-1 focus:ring-indigo-500"> <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> </div>
</div> </div>
<!-- 2. Verzendadres --> <!-- 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"> <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> <span>2. Verzendadres (Nederland)</span>
</h2> </h2>
<div class="grid grid-cols-1 sm:grid-cols-3 gap-4"> <div class="grid grid-cols-1 sm:grid-cols-3 gap-3.5">
<div class="sm:col-span-2"> <div class="sm:col-span-2 space-y-1">
<label class="block text-xs font-semibold text-slate-700 mb-1">Straatnaam *</label> <label class="block text-xs font-medium text-slate-700">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"> <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>
<div> <div class="space-y-1">
<label class="block text-xs font-semibold text-slate-700 mb-1">Huisnummer *</label> <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.5 text-xs text-slate-900 focus:bg-white focus:outline-none focus:ring-1 focus:ring-indigo-500"> <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>
<div> <div class="space-y-1">
<label class="block text-xs font-semibold text-slate-700 mb-1">Postcode *</label> <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="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"> <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>
<div class="sm:col-span-2"> <div class="sm:col-span-2 space-y-1">
<label class="block text-xs font-semibold text-slate-700 mb-1">Woonplaats *</label> <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.5 text-xs text-slate-900 focus:bg-white focus:outline-none focus:ring-1 focus:ring-indigo-500"> <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> </div>
</div> </div>
<!-- 3. Betaalmethode --> <!-- 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"> <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> <span>3. Betaalmethode</span>
</h2> </h2>
<div class="space-y-2.5"> <div class="space-y-2">
<label class="flex items-center justify-between p-3.5 rounded-2xl border border-indigo-200 bg-indigo-50/40 cursor-pointer"> <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-3"> <div class="flex items-center space-x-2.5">
<input type="radio" name="payment_method" value="ideal" checked class="text-indigo-600 focus:ring-indigo-500"> <input type="radio" name="payment_method" value="ideal" checked class="text-slate-900 focus:ring-slate-900">
<span class="text-xs font-bold text-slate-900">iDEAL</span> <span class="text-xs font-semibold text-slate-900">iDEAL</span>
</div> </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>
<label class="flex items-center justify-between p-3.5 rounded-2xl border border-slate-200 hover:bg-slate-50 cursor-pointer"> <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-3"> <div class="flex items-center space-x-2.5">
<input type="radio" name="payment_method" value="bancontact" class="text-indigo-600 focus:ring-indigo-500"> <input type="radio" name="payment_method" value="bancontact" class="text-slate-900 focus:ring-slate-900">
<span class="text-xs font-bold text-slate-900">Bancontact</span> <span class="text-xs font-semibold text-slate-900">Bancontact</span>
</div> </div>
<span class="text-[11px] text-slate-400">België</span> <span class="text-[11px] text-slate-400">België</span>
</label> </label>
<label class="flex items-center justify-between p-3.5 rounded-2xl border border-slate-200 hover:bg-slate-50 cursor-pointer"> <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-3"> <div class="flex items-center space-x-2.5">
<input type="radio" name="payment_method" value="overboeking" class="text-indigo-600 focus:ring-indigo-500"> <input type="radio" name="payment_method" value="overboeking" class="text-slate-900 focus:ring-slate-900">
<span class="text-xs font-bold text-slate-900">Handmatige Bankoverschrijving</span> <span class="text-xs font-semibold text-slate-900">Handmatige Bankoverschrijving</span>
</div> </div>
<span class="text-[11px] text-slate-400">Achteraf / Factuur</span> <span class="text-[11px] text-slate-400">Achteraf</span>
</label> </label>
</div> </div>
<div> <div class="space-y-1 pt-1">
<label class="block text-xs font-semibold text-slate-700 mb-1">Opmerkingen voor de printer (optioneel)</label> <label class="block text-xs font-medium text-slate-700">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> <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>
</div> </div>
@@ -116,49 +116,49 @@
<!-- Rechterkant: Besteloverzicht Card --> <!-- Rechterkant: Besteloverzicht Card -->
<div class="lg:col-span-5"> <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"> <div class="p-6 rounded-2xl bg-white border border-slate-200/80 shadow-xs space-y-4 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> <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) @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="space-y-0.5">
<div class="font-bold text-slate-900">{{ $item['name'] }} <span class="text-slate-400 font-normal">&times; {{ $item['quantity'] }}</span></div> <div class="font-medium text-slate-900">{{ $item['name'] }} <span class="text-slate-400">&times; {{ $item['quantity'] }}</span></div>
<div class="text-[11px] text-slate-500">{{ $item['material'] }} • {{ $item['color'] }} ({{ $item['scale'] }})</div> <div class="text-[11px] text-slate-500">{{ strtoupper($item['material']) }} &bull; {{ $item['color'] }} ({{ $item['scale'] }})</div>
</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, ',', '.') }} € {{ number_format($item['price'] * $item['quantity'], 2, ',', '.') }}
</span> </span>
</div> </div>
@endforeach @endforeach
</div> </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"> <div class="flex justify-between text-slate-600">
<span>Subtotaal</span> <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>
<div class="flex justify-between text-slate-600"> <div class="flex justify-between text-slate-600">
<span>Verzendkosten</span> <span>Verzendkosten</span>
@if($shipping == 0) @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 @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 @endif
</div> </div>
</div> </div>
<div class="pt-4 border-t border-slate-100 flex justify-between items-baseline"> <div class="pt-3 border-t border-slate-100 flex justify-between items-baseline">
<span class="text-sm font-bold text-slate-900">Totaalbedrag</span> <span class="text-xs font-medium text-slate-600">Totaalbedrag</span>
<span class="text-2xl font-black text-indigo-600 font-mono">€ {{ number_format($total, 2, ',', '.') }}</span> <span class="text-xl font-bold text-slate-900">€ {{ number_format($total, 2, ',', '.') }}</span>
</div> </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"> <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-circle-2" class="w-4 h-4"></i> <i data-lucide="check" class="w-4 h-4"></i>
<span>Bestelling Definitief Plaatsen</span> <span>Bestelling Plaatsen</span>
</button> </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. Door te bestellen ga je akkoord met de algemene voorwaarden van Jouwdriedee.nl.
</p> </p>
</div> </div>
@@ -168,4 +168,3 @@
</form> </form>
</div> </div>
@endsection @endsection
resources/views/checkout/success.blade.php
+40 -47
View File
@@ -1,105 +1,98 @@
@extends('layouts.app') @extends('layouts.app')
@section('title', 'Bestelling Ontvangen! | Jouwdriedee.nl') @section('title', 'Bestelling Ontvangen | Jouwdriedee.nl')
@section('content') @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 --> <!-- Success Badge -->
<div class="space-y-4"> <div class="space-y-3">
<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"> <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-10 h-10 stroke-[2.5]"></i> <i data-lucide="check" class="w-7 h-7 stroke-[2]"></i>
</div> </div>
<h1 class="text-3xl sm:text-4xl font-black text-slate-900 tracking-tight">Bedankt voor je bestelling!</h1> <h1 class="text-2xl sm:text-3xl font-bold tracking-tight text-slate-900">Bedankt voor je bestelling!</h1>
<p class="text-xs sm:text-sm text-slate-500 max-w-md mx-auto"> <p class="text-xs text-slate-500 max-w-sm mx-auto">
We hebben jouw bestelling ontvangen. De printbestanden worden klaargezet voor de 3D-printers. We hebben jouw bestelling ontvangen. De printbestanden worden klaargezet voor productie.
</p> </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"> <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="text-indigo-600">{{ $order->order_number }}</span> Bestelnummer: <span class="font-bold text-slate-900">{{ $order->order_number }}</span>
</div> </div>
</div> </div>
<!-- Live 3D Print Status Tracker --> <!-- 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"> <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> <i data-lucide="printer" class="w-3.5 h-3.5 text-slate-500"></i>
<span>Live Print & Productie Status</span> <span>Productiestatus</span>
</h3> </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 --> <!-- Stap 1: Ontvangen -->
<div class="relative"> <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> <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-bold text-slate-900">1. Bestelling ontvangen & geverifieerd</h4> <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> <p class="text-[11px] text-slate-500 mt-0.5">Jouw configuratie en materiaalkeuzes zijn opgeslagen.</p>
</div> </div>
<!-- Stap 2: Slicing & Printbed --> <!-- Stap 2: Slicing & Printbed -->
<div class="relative"> <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> <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-bold text-indigo-600">2. Slicing & printwachtrij (Huidige fase)</h4> <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> <p class="text-[11px] text-slate-500 mt-0.5">Het 3D-model wordt geoptimaliseerd en klaargezet voor de printer.</p>
</div> </div>
<!-- Stap 3: 3D Printen --> <!-- Stap 3: 3D Printen -->
<div class="relative opacity-60"> <div class="relative opacity-50">
<span class="absolute -left-[31px] top-0.5 w-4 h-4 rounded-full bg-slate-300"></span> <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-bold text-slate-700">3. 3D Printen in de studio</h4> <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> <p class="text-[11px] text-slate-500 mt-0.5">Laag voor laag geprint op hoge resolutie.</p>
</div> </div>
<!-- Stap 4: Kwaliteitscontrole & Verzenden --> <!-- Stap 4: Kwaliteitscontrole & Verzenden -->
<div class="relative opacity-60"> <div class="relative opacity-50">
<span class="absolute -left-[31px] top-0.5 w-4 h-4 rounded-full bg-slate-300"></span> <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-bold text-slate-700">4. Kwaliteitscontrole, inpakken & PostNL verzending</h4> <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 direct een Track & Trace code.</p> <p class="text-[11px] text-slate-500 mt-0.5">Je ontvangt per e-mail een Track & Trace code.</p>
</div> </div>
</div> </div>
</div> </div>
<!-- Besteloverzicht Card --> <!-- Besteloverzicht Card -->
<div class="p-6 rounded-3xl bg-white border border-slate-200 shadow-sm text-left space-y-4"> <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-3 border-b border-slate-100"> <h3 class="text-xs font-bold text-slate-900 uppercase tracking-wider pb-2 border-b border-slate-100">
Overzicht van jouw bestelling Overzicht van jouw bestelling
</h3> </h3>
<div class="space-y-3"> <div class="space-y-2">
@foreach($order->items as $item) @foreach($order->items as $item)
<div class="flex items-center justify-between text-xs py-1"> <div class="flex items-center justify-between text-xs py-1">
<div> <div>
<span class="font-bold text-slate-900">{{ $item->product_name }}</span> <div class="font-medium text-slate-900">{{ $item->product_name }} <span class="text-slate-400">&times; {{ $item->quantity }}</span></div>
<span class="text-slate-400">&times; {{ $item->quantity }}</span> <div class="text-[11px] text-slate-500">{{ strtoupper($item->material) }} &bull; {{ $item->color }} ({{ $item->scale }})</div>
<div class="text-[11px] text-slate-500">{{ $item->material }} • {{ $item->color }} ({{ $item->scale }})</div>
</div> </div>
<span class="font-mono font-bold text-slate-900"> <span class="font-semibold text-slate-900">
€ {{ number_format($item->total_price, 2, ',', '.') }} &euro; {{ number_format($item->total_price, 2, ',', '.') }}
</span> </span>
</div> </div>
@endforeach @endforeach
</div> </div>
<div class="pt-3 border-t border-slate-100 flex justify-between items-baseline text-xs"> <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="font-medium text-slate-500">Totaal betaald</span>
<span class="text-lg font-black text-indigo-600 font-mono">{{ $order->formatted_total }}</span> <span class="text-base font-bold text-slate-900">{{ $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> </div>
<div> <div class="flex flex-col sm:flex-row items-center justify-center gap-3">
<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"> <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">
<span>Terug Naar De Homepagina</span> Terug naar de homepagina
<i data-lucide="arrow-right" class="w-4 h-4"></i> </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> </a>
</div> </div>
</div> </div>
@endsection @endsection
resources/views/errors/offline.blade.php
+29 -40
View File
@@ -3,82 +3,72 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<title>Aan deze webshop wordt hard gewerkt! 🛠️ | Jouwdriedee.nl</title> <title>{{ $offlineTitle ?? 'Aan deze webshop wordt hard gewerkt!' }} | Jouwdriedee.nl</title>
<link rel="icon" type="image/svg+xml" href="/images/logo-icon.svg"> <link rel="icon" type="image/svg+xml" href="/images/logo-icon.svg">
<!-- Google Fonts: Fredoka & Nunito --> <!-- Plus Jakarta Sans -->
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600;700;800&family=Nunito:wght@400;600;700;800;900&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">
@vite(['resources/css/app.css', 'resources/js/app.js']) @vite(['resources/css/app.css', 'resources/js/app.js'])
<style> <style>
body { font-family: 'Nunito', system-ui, sans-serif; } body { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; }
h1, h2, h3, h4, .font-heading { font-family: 'Fredoka', ui-rounded, 'Nunito', sans-serif; }
</style> </style>
</head> </head>
<body class="min-h-full flex flex-col justify-between bg-gradient-to-b from-rose-950 via-slate-950 to-slate-950 text-slate-100 p-4 sm:p-6 lg:p-8 selection:bg-rose-500 selection:text-white"> <body class="min-h-full flex flex-col justify-between bg-slate-950 text-slate-100 p-4 sm:p-6 lg:p-8 selection:bg-rose-500 selection:text-white">
<!-- Top Logo Bar --> <!-- Top Logo Bar -->
<div class="max-w-4xl mx-auto w-full flex items-center justify-between py-2"> <div class="max-w-4xl mx-auto w-full flex items-center justify-between py-3">
<div class="flex items-center space-x-3"> <div class="flex items-center space-x-3">
<img src="/images/logo.svg" alt="Jouwdriedee.nl" class="h-9 sm:h-11 w-auto brightness-200 invert"> <img src="/images/logo.svg" alt="Jouwdriedee.nl" class="h-8 sm:h-9 w-auto brightness-200 invert">
</div> </div>
<div class="inline-flex items-center space-x-2 px-3 py-1 rounded-full bg-rose-600/30 border border-rose-500/40 text-rose-300 text-xs font-bold"> <div class="inline-flex items-center space-x-2 px-3 py-1 rounded-full bg-rose-500/10 border border-rose-500/20 text-rose-400 text-xs font-medium">
<span class="w-2 h-2 rounded-full bg-rose-500 animate-ping"></span> <span class="w-1.5 h-1.5 rounded-full bg-rose-500 animate-pulse"></span>
<span>Onderhoudsmodus</span> <span>Onderhoudsmodus</span>
</div> </div>
</div> </div>
<!-- Main Large Red Offline Banner / Card --> <!-- Main Large Red Offline Banner / Card -->
<main class="max-w-3xl mx-auto w-full my-auto py-8"> <main class="max-w-2xl mx-auto w-full my-auto py-10">
<div class="rounded-3xl bg-slate-900/90 border-2 border-rose-500/80 shadow-2xl shadow-rose-900/50 p-6 sm:p-10 text-center relative overflow-hidden backdrop-blur-xl"> <div class="rounded-3xl bg-slate-900 border border-rose-500/30 p-8 sm:p-12 text-center relative overflow-hidden shadow-2xl">
<!-- Glow effect behind content --> <!-- Glow effect -->
<div class="absolute -top-24 -left-24 w-72 h-72 bg-rose-600/20 rounded-full blur-3xl pointer-events-none"></div> <div class="absolute -top-24 -left-24 w-64 h-64 bg-rose-600/10 rounded-full blur-3xl pointer-events-none"></div>
<div class="absolute -bottom-24 -right-24 w-72 h-72 bg-amber-500/10 rounded-full blur-3xl pointer-events-none"></div>
<!-- Pulsing Alert Badge --> <!-- Alert Badge -->
<div class="inline-flex items-center space-x-2 px-4 py-1.5 rounded-full bg-rose-600 text-white font-black text-xs uppercase tracking-wider shadow-lg shadow-rose-600/40 mb-6"> <div class="inline-flex items-center space-x-2 px-3.5 py-1 rounded-full bg-rose-500/10 border border-rose-500/30 text-rose-400 text-xs font-semibold mb-6">
<span class="w-2.5 h-2.5 rounded-full bg-white animate-pulse"></span> <span class="w-2 h-2 rounded-full bg-rose-500 animate-pulse"></span>
<span>Webshop Tijdelijk Offline</span> <span>Webshop Tijdelijk Offline</span>
</div> </div>
<!-- Animated 3D Printer Icon Illustration -->
<div class="w-20 h-20 sm:w-24 sm:h-24 rounded-3xl bg-rose-500/20 border border-rose-500/40 text-rose-400 mx-auto flex items-center justify-center text-4xl sm:text-5xl mb-6 shadow-inner animate-bounce" style="animation-duration: 3s;">
🖨️
</div>
<!-- Big Main Headline --> <!-- Big Main Headline -->
<h1 class="font-heading text-2xl sm:text-4xl md:text-5xl font-black text-white tracking-tight leading-tight mb-4"> <h1 class="text-2xl sm:text-4xl font-bold text-white tracking-tight leading-tight mb-4">
{{ $offlineTitle ?? 'Aan deze webshop wordt hard gewerkt!' }} {{ $offlineTitle ?? 'Aan deze webshop wordt hard gewerkt!' }}
</h1> </h1>
<!-- Explanatory message --> <!-- Explanatory message -->
<p class="text-slate-300 text-sm sm:text-base max-w-xl mx-auto leading-relaxed font-medium mb-8"> <p class="text-slate-400 text-xs sm:text-sm max-w-lg mx-auto leading-relaxed mb-8">
{{ $offlineMessage ?? 'Onze 3D printers worden momenteel opnieuw gekalibreerd en we bouwen aan nieuwe toffe prints en functies. We zijn heel snel weer online voor bestellingen!' }} {{ $offlineMessage ?? 'Onze 3D printers worden momenteel opnieuw gekalibreerd en we bouwen aan nieuwe toffe prints en functies. We zijn heel snel weer online voor bestellingen!' }}
</p> </p>
<!-- 3 Info Columns --> <!-- 3 Info Columns -->
<div class="grid grid-cols-1 sm:grid-cols-3 gap-3 text-left pt-6 border-t border-slate-800"> <div class="grid grid-cols-1 sm:grid-cols-3 gap-3 text-left pt-6 border-t border-slate-800/80">
<div class="p-4 rounded-2xl bg-slate-950/60 border border-slate-800/80"> <div class="p-4 rounded-xl bg-slate-950/50 border border-slate-800">
<div class="text-xl mb-1">🛠️</div> <h3 class="text-xs font-semibold text-white mb-1">Printstudio Update</h3>
<h3 class="text-xs font-black text-white uppercase tracking-wider mb-1">Printstudio Update</h3> <p class="text-[11px] text-slate-400 leading-normal">Finetunen van laagdiktes en toevoegen van nieuwe designs.</p>
<p class="text-[11px] text-slate-400 leading-normal">Finetunen van laagdiktes en toevoegen van nieuwe multi-color designs.</p>
</div> </div>
<div class="p-4 rounded-2xl bg-slate-950/60 border border-slate-800/80"> <div class="p-4 rounded-xl bg-slate-950/50 border border-slate-800">
<div class="text-xl mb-1">📦</div> <h3 class="text-xs font-semibold text-white mb-1">Lopende Orders</h3>
<h3 class="text-xs font-black text-white uppercase tracking-wider mb-1">Lopende Orders</h3> <p class="text-[11px] text-slate-400 leading-normal">Reeds geplaatste bestellingen worden gewoon geprint en bezorgd.</p>
<p class="text-[11px] text-slate-400 leading-normal">Reeds geplaatste bestellingen worden gewoon geprint en verzonden via PostNL.</p>
</div> </div>
<div class="p-4 rounded-2xl bg-slate-950/60 border border-slate-800/80"> <div class="p-4 rounded-xl bg-slate-950/50 border border-slate-800">
<div class="text-xl mb-1">✉️</div> <h3 class="text-xs font-semibold text-white mb-1">Vragen of Contact</h3>
<h3 class="text-xs font-black text-white uppercase tracking-wider mb-1">Vragen of Contact?</h3>
<p class="text-[11px] text-slate-400 leading-normal"> <p class="text-[11px] text-slate-400 leading-normal">
Bereikbaar via <a href="mailto:info@jouwdriedee.nl" class="text-rose-400 font-bold hover:underline">info@jouwdriedee.nl</a>. Bereikbaar via <a href="mailto:info@jouwdriedee.nl" class="text-slate-200 underline font-medium">info@jouwdriedee.nl</a>.
</p> </p>
</div> </div>
</div> </div>
@@ -93,7 +83,7 @@
</div> </div>
<div> <div>
<a href="{{ route('login') }}" class="text-slate-500 hover:text-slate-300 transition text-[11px] font-bold flex items-center space-x-1"> <a href="{{ route('login') }}" class="text-slate-400 hover:text-white transition text-xs font-medium flex items-center space-x-1">
<span>Beheerder inloggen</span> <span>Beheerder inloggen</span>
<span>&rarr;</span> <span>&rarr;</span>
</a> </a>
@@ -102,4 +92,3 @@
</body> </body>
</html> </html>
resources/views/layouts/admin.blade.php
+68 -66
View File
@@ -6,69 +6,75 @@
<title>@yield('title', 'Admin Dashboard | Jouwdriedee.nl')</title> <title>@yield('title', 'Admin Dashboard | Jouwdriedee.nl')</title>
<link rel="icon" type="image/svg+xml" href="/images/logo-icon.svg"> <link rel="icon" type="image/svg+xml" href="/images/logo-icon.svg">
<!-- Google Fonts: Fredoka & Nunito --> <!-- Modern Typography: Plus Jakarta Sans -->
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600;700&family=Nunito:wght@400;600;700;800;900&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
@vite(['resources/css/app.css', 'resources/js/app.js']) @vite(['resources/css/app.css', 'resources/js/app.js'])
<style> <style>
body { font-family: 'Nunito', system-ui, sans-serif; } body {
h1, h2, h3, h4, .font-heading { font-family: 'Fredoka', ui-rounded, 'Nunito', sans-serif; } font-family: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
letter-spacing: -0.01em;
}
h1, h2, h3, h4, .font-heading {
font-family: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
letter-spacing: -0.025em;
}
</style> </style>
</head> </head>
<body class="min-h-full flex flex-col bg-slate-50 text-slate-800 selection:bg-amber-200 selection:text-slate-900" x-data="{ mobileNav: false }"> <body class="min-h-full flex flex-col bg-slate-50/70 text-slate-800 selection:bg-slate-900 selection:text-white" x-data="{ mobileNav: false }">
<!-- Admin Header (Clean, Light & Modern) --> <!-- Admin Header (Sleek, Minimalist, SaaS Style) -->
<header class="bg-white/95 backdrop-blur-md border-b border-slate-200/80 sticky top-0 z-30 shadow-2xs"> <header class="bg-white/85 backdrop-blur-md border-b border-slate-200/70 sticky top-0 z-30">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-16"> <div class="flex items-center justify-between h-16">
<!-- Brand / Logo --> <!-- Brand / Logo -->
<div class="flex items-center space-x-6"> <div class="flex items-center space-x-6">
<a href="{{ route('admin.content.index') }}" class="flex items-center space-x-2.5 group"> <a href="{{ route('admin.content.index') }}" class="flex items-center space-x-2.5 group">
<img src="/images/logo.svg" alt="Jouwdriedee.nl" class="h-8 w-auto"> <img src="/images/logo.svg" alt="Jouwdriedee.nl" class="h-7 w-auto">
<span class="px-2 py-0.5 rounded-full bg-amber-50 text-amber-800 border border-amber-200/60 font-bold text-[10px] uppercase tracking-wider">Beheer</span> <span class="px-2 py-0.5 rounded-md bg-slate-100 text-slate-600 font-medium text-[11px] tracking-wide">Studio CMS</span>
</a> </a>
<!-- Desktop Nav Links --> <!-- Desktop Nav Links -->
<nav class="hidden md:flex items-center space-x-1 text-xs font-bold"> <nav class="hidden md:flex items-center space-x-1 text-xs font-medium">
<a href="{{ route('admin.content.index') }}" class="px-3 py-2 rounded-xl transition flex items-center space-x-1.5 {{ request()->routeIs('admin.content.*') ? 'bg-amber-100 text-amber-950 font-black shadow-2xs' : 'text-slate-600 hover:text-slate-900 hover:bg-slate-100' }}"> <a href="{{ route('admin.content.index') }}" class="px-3 py-1.5 rounded-lg transition flex items-center space-x-1.5 {{ request()->routeIs('admin.content.*') ? 'bg-slate-900 text-white font-semibold' : 'text-slate-600 hover:text-slate-900 hover:bg-slate-100' }}">
<i data-lucide="palette" class="w-4 h-4"></i> <i data-lucide="palette" class="w-3.5 h-3.5"></i>
<span>Layout & Teksten</span> <span>Layout & Teksten</span>
</a> </a>
<a href="{{ route('admin.products.index') }}" class="px-3 py-2 rounded-xl transition flex items-center space-x-1.5 {{ request()->routeIs('admin.products.*') ? 'bg-amber-100 text-amber-950 font-black shadow-2xs' : 'text-slate-600 hover:text-slate-900 hover:bg-slate-100' }}"> <a href="{{ route('admin.products.index') }}" class="px-3 py-1.5 rounded-lg transition flex items-center space-x-1.5 {{ request()->routeIs('admin.products.*') ? 'bg-slate-900 text-white font-semibold' : 'text-slate-600 hover:text-slate-900 hover:bg-slate-100' }}">
<i data-lucide="box" class="w-4 h-4"></i> <i data-lucide="box" class="w-3.5 h-3.5"></i>
<span>Producten</span> <span>Producten</span>
</a> </a>
@php @php
$draftBadgeCount = \App\Models\Product::where('status', 'draft')->count(); $draftBadgeCount = \App\Models\Product::where('status', 'draft')->count();
@endphp @endphp
<a href="{{ route('admin.makerworld.staging') }}" class="px-3 py-2 rounded-xl transition flex items-center space-x-1.5 {{ request()->routeIs('admin.makerworld.staging*') ? 'bg-amber-100 text-amber-950 font-black shadow-2xs' : 'text-slate-600 hover:text-slate-900 hover:bg-slate-100' }}"> <a href="{{ route('admin.makerworld.staging') }}" class="px-3 py-1.5 rounded-lg transition flex items-center space-x-1.5 {{ request()->routeIs('admin.makerworld.staging*') ? 'bg-slate-900 text-white font-semibold' : 'text-slate-600 hover:text-slate-900 hover:bg-slate-100' }}">
<i data-lucide="layers" class="w-4 h-4"></i> <i data-lucide="layers" class="w-3.5 h-3.5"></i>
<span>Artikel Beheer</span> <span>Artikel Beheer</span>
@if($draftBadgeCount > 0) @if($draftBadgeCount > 0)
<span class="ml-1 px-1.5 py-0.2 rounded-full text-[10px] font-black {{ request()->routeIs('admin.makerworld.staging*') ? 'bg-white text-amber-900' : 'bg-amber-200 text-amber-950' }}"> <span class="ml-1 px-1.5 py-0.2 rounded-full text-[10px] font-semibold {{ request()->routeIs('admin.makerworld.staging*') ? 'bg-white text-slate-900' : 'bg-slate-200 text-slate-800' }}">
{{ $draftBadgeCount }} {{ $draftBadgeCount }}
</span> </span>
@endif @endif
</a> </a>
<a href="{{ route('admin.categories.index') }}" class="px-3 py-2 rounded-xl transition flex items-center space-x-1.5 {{ request()->routeIs('admin.categories.*') ? 'bg-amber-100 text-amber-950 font-black shadow-2xs' : 'text-slate-600 hover:text-slate-900 hover:bg-slate-100' }}"> <a href="{{ route('admin.categories.index') }}" class="px-3 py-1.5 rounded-lg transition flex items-center space-x-1.5 {{ request()->routeIs('admin.categories.*') ? 'bg-slate-900 text-white font-semibold' : 'text-slate-600 hover:text-slate-900 hover:bg-slate-100' }}">
<i data-lucide="folder-tree" class="w-4 h-4"></i> <i data-lucide="folder-tree" class="w-3.5 h-3.5"></i>
<span>Categorieën</span> <span>Categorieën</span>
</a> </a>
<a href="{{ route('admin.orders.index') }}" class="px-3 py-2 rounded-xl transition flex items-center space-x-1.5 {{ request()->routeIs('admin.orders.*') ? 'bg-amber-100 text-amber-950 font-black shadow-2xs' : 'text-slate-600 hover:text-slate-900 hover:bg-slate-100' }}"> <a href="{{ route('admin.orders.index') }}" class="px-3 py-1.5 rounded-lg transition flex items-center space-x-1.5 {{ request()->routeIs('admin.orders.*') ? 'bg-slate-900 text-white font-semibold' : 'text-slate-600 hover:text-slate-900 hover:bg-slate-100' }}">
<i data-lucide="shopping-cart" class="w-4 h-4"></i> <i data-lucide="shopping-cart" class="w-3.5 h-3.5"></i>
<span>Bestellingen</span> <span>Bestellingen</span>
</a> </a>
<a href="{{ route('admin.makerworld.index') }}" class="px-3 py-2 rounded-xl transition flex items-center space-x-1.5 {{ request()->routeIs('admin.makerworld.index*') ? 'bg-amber-100 text-amber-950 font-black shadow-2xs' : 'text-slate-600 hover:text-slate-900 hover:bg-slate-100' }}"> <a href="{{ route('admin.makerworld.index') }}" class="px-3 py-1.5 rounded-lg transition flex items-center space-x-1.5 {{ request()->routeIs('admin.makerworld.index*') ? 'bg-slate-900 text-white font-semibold' : 'text-slate-600 hover:text-slate-900 hover:bg-slate-100' }}">
<i data-lucide="download-cloud" class="w-4 h-4"></i> <i data-lucide="download-cloud" class="w-3.5 h-3.5"></i>
<span>MakerWorld Sync</span> <span>MakerWorld Sync</span>
</a> </a>
</nav> </nav>
@@ -84,26 +90,26 @@
<form action="{{ route('admin.toggle-offline') }}" method="POST" class="inline"> <form action="{{ route('admin.toggle-offline') }}" method="POST" class="inline">
@csrf @csrf
@if($isShopOffline) @if($isShopOffline)
<button type="submit" class="px-3 py-1.5 rounded-xl bg-rose-500 hover:bg-rose-600 text-white text-xs font-black transition flex items-center space-x-1.5 shadow-sm shadow-rose-500/20 animate-pulse cursor-pointer" title="Klik om de webshop weer direct online te zetten"> <button type="submit" class="px-3 py-1.5 rounded-lg bg-rose-500 hover:bg-rose-600 text-white text-xs font-semibold transition flex items-center space-x-1.5 shadow-2xs cursor-pointer" title="Klik om de webshop weer direct online te zetten">
<span class="w-2 h-2 rounded-full bg-white"></span> <span class="w-1.5 h-1.5 rounded-full bg-white animate-pulse"></span>
<span>Webshop: OFFLINE</span> <span>Webshop: Offline</span>
</button> </button>
@else @else
<button type="submit" class="px-2.5 sm:px-3 py-1.5 rounded-xl bg-white hover:bg-slate-50 text-slate-700 hover:text-rose-600 text-xs font-bold transition flex items-center space-x-1.5 border border-slate-200/90 shadow-2xs cursor-pointer" title="Klik om de webshop direct offline te zetten voor bezoekers"> <button type="submit" class="px-2.5 sm:px-3 py-1.5 rounded-lg bg-slate-50 hover:bg-slate-100 text-slate-700 text-xs font-medium transition flex items-center space-x-1.5 border border-slate-200/80 cursor-pointer" title="Klik om de webshop direct offline te zetten voor bezoekers">
<span class="w-2 h-2 rounded-full bg-emerald-500"></span> <span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span>
<span class="hidden sm:inline">Webshop: Online</span> <span class="hidden sm:inline">Webshop: Live</span>
<span class="text-[10px] text-slate-400 hover:text-rose-500">(Zet Offline)</span> <span class="text-[10px] text-slate-400">(Offline zetten)</span>
</button> </button>
@endif @endif
</form> </form>
<a href="{{ route('home') }}" target="_blank" class="px-3 py-1.5 rounded-xl bg-white hover:bg-slate-50 text-slate-700 hover:text-slate-900 text-xs font-bold transition flex items-center space-x-1.5 border border-slate-200/90 shadow-2xs"> <a href="{{ route('home') }}" target="_blank" class="px-3 py-1.5 rounded-lg text-slate-600 hover:text-slate-900 hover:bg-slate-100 text-xs font-medium transition flex items-center space-x-1.5">
<span>Naar Webshop</span> <span>Webshop</span>
<i data-lucide="external-link" class="w-3.5 h-3.5 text-slate-400"></i> <i data-lucide="external-link" class="w-3.5 h-3.5 text-slate-400"></i>
</a> </a>
<!-- Mobile trigger --> <!-- Mobile trigger -->
<button @click="mobileNav = !mobileNav" type="button" class="md:hidden p-2 rounded-xl bg-white text-slate-700 hover:bg-slate-50 border border-slate-200 shadow-2xs"> <button @click="mobileNav = !mobileNav" type="button" class="md:hidden p-1.5 rounded-lg text-slate-600 hover:bg-slate-100">
<i data-lucide="menu" class="w-5 h-5"></i> <i data-lucide="menu" class="w-5 h-5"></i>
</button> </button>
</div> </div>
@@ -112,71 +118,68 @@
</div> </div>
<!-- Mobile Drawer --> <!-- Mobile Drawer -->
<div x-show="mobileNav" x-cloak class="md:hidden border-t border-slate-200 bg-white px-4 py-3 space-y-1 text-sm font-bold shadow-lg"> <div x-show="mobileNav" x-cloak class="md:hidden border-t border-slate-200/80 bg-white px-4 py-3 space-y-1 text-xs font-medium shadow-md">
<a href="{{ route('admin.content.index') }}" class="block px-3 py-2 rounded-xl {{ request()->routeIs('admin.content.*') ? 'bg-amber-100 text-amber-950 font-black' : 'text-slate-700 hover:bg-slate-50' }}"> <a href="{{ route('admin.content.index') }}" class="block px-3 py-2 rounded-lg {{ request()->routeIs('admin.content.*') ? 'bg-slate-100 text-slate-900 font-semibold' : 'text-slate-600 hover:bg-slate-50' }}">
🎨 Layout & Teksten Layout & Teksten
</a> </a>
<a href="{{ route('admin.products.index') }}" class="block px-3 py-2 rounded-xl {{ request()->routeIs('admin.products.*') ? 'bg-amber-100 text-amber-950 font-black' : 'text-slate-700 hover:bg-slate-50' }}"> <a href="{{ route('admin.products.index') }}" class="block px-3 py-2 rounded-lg {{ request()->routeIs('admin.products.*') ? 'bg-slate-100 text-slate-900 font-semibold' : 'text-slate-600 hover:bg-slate-50' }}">
📦 Producten Producten
</a> </a>
<a href="{{ route('admin.makerworld.staging') }}" class="block px-3 py-2 rounded-xl {{ request()->routeIs('admin.makerworld.staging*') ? 'bg-amber-100 text-amber-950 font-black' : 'text-slate-700 hover:bg-slate-50' }}"> <a href="{{ route('admin.makerworld.staging') }}" class="block px-3 py-2 rounded-lg {{ request()->routeIs('admin.makerworld.staging*') ? 'bg-slate-100 text-slate-900 font-semibold' : 'text-slate-600 hover:bg-slate-50' }}">
⚡ Artikel Beheer (Geïmporteerd) Artikel Beheer (Geïmporteerd)
@if(($draftBadgeCount ?? 0) > 0) @if(($draftBadgeCount ?? 0) > 0)
<span class="ml-2 px-1.5 py-0.5 rounded-full text-xs font-black bg-amber-200 text-amber-950"> <span class="ml-2 px-1.5 py-0.5 rounded-full text-[10px] font-semibold bg-slate-200 text-slate-800">
{{ $draftBadgeCount }} nieuw {{ $draftBadgeCount }}
</span> </span>
@endif @endif
</a> </a>
<a href="{{ route('admin.categories.index') }}" class="block px-3 py-2 rounded-xl {{ request()->routeIs('admin.categories.*') ? 'bg-amber-100 text-amber-950 font-black' : 'text-slate-700 hover:bg-slate-50' }}"> <a href="{{ route('admin.categories.index') }}" class="block px-3 py-2 rounded-lg {{ request()->routeIs('admin.categories.*') ? 'bg-slate-100 text-slate-900 font-semibold' : 'text-slate-600 hover:bg-slate-50' }}">
📁 Categorieën Categorieën
</a> </a>
<a href="{{ route('admin.orders.index') }}" class="block px-3 py-2 rounded-xl {{ request()->routeIs('admin.orders.*') ? 'bg-amber-100 text-amber-950 font-black' : 'text-slate-700 hover:bg-slate-50' }}"> <a href="{{ route('admin.orders.index') }}" class="block px-3 py-2 rounded-lg {{ request()->routeIs('admin.orders.*') ? 'bg-slate-100 text-slate-900 font-semibold' : 'text-slate-600 hover:bg-slate-50' }}">
🛒 Bestellingen Bestellingen
</a> </a>
<a href="{{ route('admin.makerworld.index') }}" class="block px-3 py-2 rounded-xl {{ request()->routeIs('admin.makerworld.*') ? 'bg-amber-100 text-amber-950 font-black' : 'text-slate-700 hover:bg-slate-50' }}"> <a href="{{ route('admin.makerworld.index') }}" class="block px-3 py-2 rounded-lg {{ request()->routeIs('admin.makerworld.*') ? 'bg-slate-100 text-slate-900 font-semibold' : 'text-slate-600 hover:bg-slate-50' }}">
🤖 MakerWorld Importer MakerWorld Sync
</a> </a>
</div> </div>
</header> </header>
<!-- Prominent Offline Alert Banner --> <!-- Offline Alert Banner -->
@if($isShopOffline ?? (\App\Models\Setting::get('shop_offline', '0') === '1')) @if($isShopOffline ?? (\App\Models\Setting::get('shop_offline', '0') === '1'))
<div class="bg-rose-500 text-white px-4 py-2.5 text-xs font-bold border-b border-rose-600 shadow-md flex flex-col sm:flex-row items-center justify-between gap-3 sticky top-16 z-20"> <div class="bg-rose-500 text-white px-4 py-2.5 text-xs font-medium border-b border-rose-600 shadow-sm flex flex-col sm:flex-row items-center justify-between gap-3 sticky top-16 z-20">
<div class="flex items-center space-x-2.5"> <div class="flex items-center space-x-2">
<span class="w-2.5 h-2.5 rounded-full bg-white animate-ping shrink-0"></span> <span class="w-2 h-2 rounded-full bg-white animate-pulse shrink-0"></span>
<span class="px-2 py-0.5 rounded-md bg-white text-rose-700 font-black text-[10px] uppercase tracking-wider shrink-0">Offline Actief</span>
<span>De webshop staat momenteel <strong>OFFLINE</strong> voor bezoekers (rode onderhoudsbanner actief). Alleen jij als beheerder kunt de website bezoeken.</span> <span>De webshop staat momenteel <strong>OFFLINE</strong> voor bezoekers (rode onderhoudsbanner actief). Alleen jij als beheerder kunt de website bezoeken.</span>
</div> </div>
<form action="{{ route('admin.toggle-offline') }}" method="POST" class="shrink-0"> <form action="{{ route('admin.toggle-offline') }}" method="POST" class="shrink-0">
@csrf @csrf
<button type="submit" class="px-3.5 py-1.5 bg-white hover:bg-slate-50 text-rose-700 font-black rounded-xl text-xs transition shadow-xs cursor-pointer flex items-center space-x-1.5"> <button type="submit" class="px-3 py-1 bg-white hover:bg-slate-50 text-rose-700 font-semibold rounded-md text-xs transition shadow-2xs cursor-pointer flex items-center space-x-1.5">
<span class="w-2 h-2 rounded-full bg-emerald-500"></span> <span>Zet Nu Weer Online</span>
<span>Zet Webshop Nu Weer Online &rarr;</span>
</button> </button>
</form> </form>
</div> </div>
@endif @endif
<!-- Main Admin Container --> <!-- Main Admin Container -->
<main class="flex-1 max-w-7xl w-full mx-auto px-4 sm:px-6 lg:px-8 py-6 sm:py-8"> <main class="flex-1 max-w-7xl w-full mx-auto px-4 sm:px-6 lg:px-8 py-8 sm:py-10">
<!-- Flash Alerts --> <!-- Flash Alerts -->
@if(session('success')) @if(session('success'))
<div class="mb-6 p-4 rounded-2xl bg-emerald-50 border border-emerald-200/80 text-emerald-900 text-xs sm:text-sm font-bold flex items-center justify-between shadow-2xs"> <div class="mb-6 p-4 rounded-xl bg-emerald-50/80 border border-emerald-200/60 text-emerald-800 text-xs font-medium flex items-center justify-between shadow-2xs">
<div class="flex items-center space-x-2.5"> <div class="flex items-center space-x-2.5">
<i data-lucide="check-circle" class="w-5 h-5 text-emerald-600 shrink-0"></i> <i data-lucide="check-circle" class="w-4 h-4 text-emerald-600 shrink-0"></i>
<span>{{ session('success') }}</span> <span>{{ session('success') }}</span>
</div> </div>
<a href="{{ route('home') }}" target="_blank" class="px-3 py-1 rounded-xl bg-emerald-600 hover:bg-emerald-500 text-white font-bold text-xs transition flex items-center space-x-1 shrink-0"> <a href="{{ route('home') }}" target="_blank" class="px-2.5 py-1 rounded-md bg-emerald-600 hover:bg-emerald-700 text-white font-medium text-[11px] transition shrink-0">
<span>Bekijk Live</span> Bekijk Live Shop
<i data-lucide="arrow-right" class="w-3.5 h-3.5"></i>
</a> </a>
</div> </div>
@endif @endif
@if(session('error')) @if(session('error'))
<div class="mb-6 p-4 rounded-2xl bg-rose-50 border border-rose-200/80 text-rose-900 text-xs sm:text-sm font-bold flex items-center space-x-2.5 shadow-2xs"> <div class="mb-6 p-4 rounded-xl bg-rose-50/80 border border-rose-200/60 text-rose-800 text-xs font-medium flex items-center space-x-2.5 shadow-2xs">
<i data-lucide="alert-circle" class="w-5 h-5 text-rose-600 shrink-0"></i> <i data-lucide="alert-circle" class="w-4 h-4 text-rose-600 shrink-0"></i>
<span>{{ session('error') }}</span> <span>{{ session('error') }}</span>
</div> </div>
@endif @endif
@@ -184,10 +187,9 @@
@yield('content') @yield('content')
</main> </main>
<footer class="border-t border-slate-200/80 py-4 text-center text-xs text-slate-400 bg-white/50"> <footer class="border-t border-slate-200/60 py-4 text-center text-[11px] text-slate-400 bg-white">
Jouwdriedee.nl Beheerpaneel &bull; Direct gekoppeld aan live webshop Jouwdriedee.nl Beheerpaneel &bull; Direct gekoppeld aan live webshop
</footer> </footer>
</body> </body>
</html> </html>
resources/views/layouts/app.blade.php
+108 -111
View File
@@ -7,38 +7,40 @@
<meta name="description" content="@yield('meta_description', setting('meta_description', 'Jouwdriedee.nl - Kleurrijke en gedetailleerde 3D prints, soepele fidget toys, Pokémon planters en toffe collectibles. Met zorg en precisie geprint in Nederland!'))"> <meta name="description" content="@yield('meta_description', setting('meta_description', 'Jouwdriedee.nl - Kleurrijke en gedetailleerde 3D prints, soepele fidget toys, Pokémon planters en toffe collectibles. Met zorg en precisie geprint in Nederland!'))">
<link rel="icon" type="image/svg+xml" href="/images/logo-icon.svg"> <link rel="icon" type="image/svg+xml" href="/images/logo-icon.svg">
<!-- Google Fonts: Fredoka & Nunito --> <!-- Modern Typography: Plus Jakarta Sans -->
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600;700&family=Nunito:wght@400;600;700;800;900&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
@vite(['resources/css/app.css', 'resources/js/app.js']) @vite(['resources/css/app.css', 'resources/js/app.js'])
<style> <style>
body { body {
font-family: 'Nunito', system-ui, sans-serif; font-family: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
letter-spacing: -0.01em;
} }
h1, h2, h3, h4, .font-heading { h1, h2, h3, h4, .font-heading {
font-family: 'Fredoka', ui-rounded, 'Nunito', sans-serif; font-family: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
letter-spacing: -0.025em;
} }
</style> </style>
</head> </head>
<body class="min-h-full flex flex-col bg-[#FAF9F6] text-slate-800 selection:bg-amber-300 selection:text-slate-900" x-data="{ mobileMenuOpen: false }"> <body class="min-h-full flex flex-col bg-white text-slate-800 selection:bg-sky-500 selection:text-white" x-data="{ mobileMenuOpen: false }">
<!-- Admin Offline Preview Notice --> <!-- Admin Offline Preview Notice -->
@if(\App\Models\Setting::get('shop_offline', '0') === '1' && auth()->check() && auth()->user()->isAdmin()) @if(\App\Models\Setting::get('shop_offline', '0') === '1' && auth()->check() && auth()->user()->isAdmin())
<div class="bg-rose-600 text-white px-4 py-2 text-xs font-bold flex flex-col sm:flex-row items-center justify-between sticky top-0 z-50 border-b border-rose-700 shadow-md gap-2"> <div class="bg-rose-500 text-white px-4 py-2 text-xs font-semibold flex flex-col sm:flex-row items-center justify-between sticky top-0 z-50 shadow-sm gap-2">
<div class="flex items-center space-x-2"> <div class="flex items-center space-x-2">
<span class="w-2.5 h-2.5 rounded-full bg-white animate-pulse"></span> <span class="w-2 h-2 rounded-full bg-white animate-pulse"></span>
<span>⚠️ OFFLINE BEHEERDERS-PREVIEW: Webshop staat momenteel OFFLINE voor bezoekers. Alleen jij als beheerder ziet deze pagina.</span> <span>⚠️ OFFLINE BEHEERDERS-PREVIEW: Webshop staat momenteel OFFLINE voor bezoekers. Alleen jij als beheerder ziet deze pagina.</span>
</div> </div>
<div class="flex items-center space-x-2"> <div class="flex items-center space-x-2">
<a href="{{ route('admin.content.index') }}" class="px-2.5 py-1 rounded-lg bg-rose-700 hover:bg-rose-800 text-white text-[11px] font-bold transition"> <a href="{{ route('admin.content.index') }}" class="px-2.5 py-1 rounded-md bg-rose-600 hover:bg-rose-700 text-white text-[11px] font-medium transition">
Naar Beheer Naar Beheer
</a> </a>
<form action="{{ route('admin.toggle-offline') }}" method="POST" class="inline"> <form action="{{ route('admin.toggle-offline') }}" method="POST" class="inline">
@csrf @csrf
<button type="submit" class="px-3 py-1 rounded-lg bg-white text-rose-700 hover:bg-rose-50 text-[11px] font-bold shadow-xs transition"> <button type="submit" class="px-3 py-1 rounded-md bg-white text-rose-600 hover:bg-rose-50 text-[11px] font-semibold shadow-xs transition cursor-pointer">
Zet Nu Weer Online Zet Nu Weer Online
</button> </button>
</form> </form>
@@ -46,24 +48,24 @@
</div> </div>
@endif @endif
<!-- Top Announcement Bar (Subtiel, Warm & Vriendelijk) --> <!-- Sleek Top Announcement Bar -->
@if(setting('announcement_enabled', '1') == '1') @if(setting('announcement_enabled', '1') == '1')
<div class="bg-slate-900 text-slate-300 text-xs py-2 px-3 sm:px-4 font-semibold border-b border-slate-800/80"> <div class="bg-slate-950 text-slate-400 text-[11px] py-2 px-4 font-normal border-b border-slate-900">
<div class="max-w-7xl mx-auto flex items-center justify-between"> <div class="max-w-7xl mx-auto flex items-center justify-between">
<div class="flex items-center space-x-2 mx-auto sm:mx-0 text-center sm:text-left"> <div class="flex items-center space-x-2 mx-auto sm:mx-0">
<span class="w-1.5 h-1.5 rounded-full bg-emerald-400 animate-pulse"></span> <span class="w-1.5 h-1.5 rounded-full bg-emerald-400 animate-pulse"></span>
<span>{{ setting('announcement_text', 'Nederlandse 3D Printstudio • Haarscherpe afwerking op Bambu Lab printers') }}</span> <span class="text-slate-300 font-medium">{{ setting('announcement_text', 'Nederlandse 3D Printstudio • Haarscherpe afwerking op Bambu Lab printers') }}</span>
</div> </div>
<div class="hidden md:flex items-center space-x-4 text-[11px] text-slate-300 font-medium"> <div class="hidden md:flex items-center space-x-5 text-slate-400">
@if(setting('announcement_badge_1')) @if(setting('announcement_badge_1'))
<span class="flex items-center space-x-1.5"> <span class="flex items-center space-x-1.5">
<i data-lucide="truck" class="w-3.5 h-3.5 text-amber-400"></i> <i data-lucide="truck" class="w-3.5 h-3.5 text-sky-400"></i>
<span>{{ setting('announcement_badge_1', 'Gratis verzending vanaf € 50,-') }}</span> <span>{{ setting('announcement_badge_1', 'Gratis verzending vanaf € 50,-') }}</span>
</span> </span>
@endif @endif
@if(setting('announcement_badge_2')) @if(setting('announcement_badge_2'))
<span class="flex items-center space-x-1.5"> <span class="flex items-center space-x-1.5">
<i data-lucide="clock" class="w-3.5 h-3.5 text-sky-400"></i> <i data-lucide="clock" class="w-3.5 h-3.5 text-slate-400"></i>
<span>{{ setting('announcement_badge_2', 'Verzending binnen 2-3 werkdagen') }}</span> <span>{{ setting('announcement_badge_2', 'Verzending binnen 2-3 werkdagen') }}</span>
</span> </span>
@endif @endif
@@ -72,62 +74,62 @@
</div> </div>
@endif @endif
<!-- Main Navigation Header --> <!-- Modern Glass Navigation Bar -->
<header class="sticky top-0 z-40 bg-white/95 backdrop-blur-md border-b border-slate-200/70 shadow-xs"> <header class="sticky top-0 z-40 bg-white/80 backdrop-blur-md border-b border-slate-200/60 transition-all">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-16 sm:h-20"> <div class="flex items-center justify-between h-16">
<!-- Friendly Brand Logo --> <!-- Brand Logo -->
<div class="flex items-center space-x-4 sm:space-x-8"> <div class="flex items-center space-x-8">
<a href="{{ route('home') }}" class="flex items-center group py-1"> <a href="{{ route('home') }}" class="flex items-center group py-1">
<img src="/images/logo.svg" alt="{{ setting('site_name', 'Jouwdriedee.nl') }}" class="h-9 sm:h-11 w-auto transition-transform duration-200 group-hover:scale-105"> <img src="/images/logo.svg" alt="{{ setting('site_name', 'Jouwdriedee.nl') }}" class="h-8 sm:h-9 w-auto transition-transform duration-200 group-hover:opacity-90">
</a> </a>
<!-- Desktop Nav Links --> <!-- Minimalist Navigation Links -->
<nav class="hidden lg:flex items-center space-x-1 text-xs font-bold text-slate-600"> <nav class="hidden lg:flex items-center space-x-1 text-xs font-medium text-slate-600">
<a href="{{ route('home') }}" class="px-3.5 py-2 rounded-xl transition {{ request()->routeIs('home') ? 'bg-amber-100 text-amber-950 font-black' : 'hover:bg-slate-100 text-slate-700' }}"> <a href="{{ route('home') }}" class="px-3 py-1.5 rounded-lg transition {{ request()->routeIs('home') ? 'bg-slate-100 text-slate-900 font-semibold' : 'hover:text-slate-900 hover:bg-slate-50' }}">
Home Home
</a> </a>
<a href="{{ route('catalog', ['category' => 'fidget-toys']) }}" class="px-3.5 py-2 rounded-xl transition {{ request('category') === 'fidget-toys' ? 'bg-violet-100 text-violet-900 font-black' : 'hover:bg-violet-50 hover:text-violet-700 text-slate-700' }}"> <a href="{{ route('catalog', ['category' => 'fidget-toys']) }}" class="px-3 py-1.5 rounded-lg transition {{ request('category') === 'fidget-toys' ? 'bg-slate-100 text-slate-900 font-semibold' : 'hover:text-slate-900 hover:bg-slate-50' }}">
Fidget Toys Fidget Toys
</a> </a>
<a href="{{ route('catalog', ['category' => 'pokemon-3d']) }}" class="px-3.5 py-2 rounded-xl transition {{ request('category') === 'pokemon-3d' ? 'bg-amber-100 text-amber-900 font-black' : 'hover:bg-amber-50 hover:text-amber-700 text-slate-700' }}"> <a href="{{ route('catalog', ['category' => 'pokemon-3d']) }}" class="px-3 py-1.5 rounded-lg transition {{ request('category') === 'pokemon-3d' ? 'bg-slate-100 text-slate-900 font-semibold' : 'hover:text-slate-900 hover:bg-slate-50' }}">
Pokémon Pokémon
</a> </a>
<a href="{{ route('catalog', ['category' => 'film-popculture']) }}" class="px-3.5 py-2 rounded-xl transition {{ request('category') === 'film-popculture' ? 'bg-rose-100 text-rose-900 font-black' : 'hover:bg-rose-50 hover:text-rose-700 text-slate-700' }}"> <a href="{{ route('catalog', ['category' => 'film-popculture']) }}" class="px-3 py-1.5 rounded-lg transition {{ request('category') === 'film-popculture' ? 'bg-slate-100 text-slate-900 font-semibold' : 'hover:text-slate-900 hover:bg-slate-50' }}">
Film & Gaming Film & Gaming
</a> </a>
<a href="{{ route('catalog') }}" class="px-3.5 py-2 rounded-xl transition {{ request()->routeIs('catalog') && !request('category') ? 'bg-slate-100 text-slate-900 font-black' : 'hover:bg-slate-100 text-slate-700' }}"> <a href="{{ route('catalog') }}" class="px-3 py-1.5 rounded-lg transition {{ request()->routeIs('catalog') && !request('category') ? 'bg-slate-100 text-slate-900 font-semibold' : 'hover:text-slate-900 hover:bg-slate-50' }}">
Alle Prints Alle Prints
</a> </a>
</nav> </nav>
</div> </div>
<!-- Right Action Bar --> <!-- Right Action Bar -->
<div class="flex items-center space-x-2 sm:space-x-3"> <div class="flex items-center space-x-3">
<!-- Search Bar in Header --> <!-- Clean Search Bar -->
<form action="{{ route('catalog') }}" method="GET" class="hidden md:flex items-center relative"> <form action="{{ route('catalog') }}" method="GET" class="hidden md:flex items-center relative">
<input <input
type="text" type="text"
name="q" name="q"
value="{{ request('q') }}" value="{{ request('q') }}"
placeholder="Zoek print, model..." placeholder="Zoek model..."
class="w-44 lg:w-56 bg-slate-50 border border-slate-200 rounded-xl pl-8 pr-3 py-2 text-xs font-medium text-slate-800 placeholder-slate-400 focus:bg-white focus:outline-none focus:ring-2 focus:ring-amber-400 transition" class="w-48 lg:w-60 bg-slate-50/80 border border-slate-200/70 rounded-lg pl-8 pr-3 py-1.5 text-xs text-slate-800 placeholder-slate-400 focus:bg-white focus:outline-none focus:ring-1 focus:ring-slate-900/10 focus:border-slate-400 transition"
> >
<i data-lucide="search" class="w-3.5 h-3.5 text-slate-400 absolute left-2.5 pointer-events-none"></i> <i data-lucide="search" class="w-3.5 h-3.5 text-slate-400 absolute left-2.5 pointer-events-none"></i>
</form> </form>
<!-- Cart Button with Counter --> <!-- Cart Button with Pill Badge -->
@php @php
$cartItems = is_array(session('cart')) ? session('cart') : []; $cartItems = is_array(session('cart')) ? session('cart') : [];
$cartCount = array_sum(array_column($cartItems, 'quantity')); $cartCount = array_sum(array_column($cartItems, 'quantity'));
@endphp @endphp
<a href="{{ route('cart.index') }}" class="px-3.5 sm:px-4 py-2 rounded-xl bg-amber-400 hover:bg-amber-300 text-slate-950 font-bold text-xs flex items-center space-x-1.5 sm:space-x-2 transition shadow-xs"> <a href="{{ route('cart.index') }}" class="px-3.5 py-1.5 rounded-lg bg-slate-900 hover:bg-slate-800 text-white font-medium text-xs flex items-center space-x-1.5 transition shadow-xs cursor-pointer">
<i data-lucide="shopping-bag" class="w-4 h-4 text-slate-900"></i> <i data-lucide="shopping-bag" class="w-3.5 h-3.5"></i>
<span class="hidden sm:inline">Winkelwagen</span> <span class="hidden sm:inline">Winkelmand</span>
@if($cartCount > 0) @if($cartCount > 0)
<span class="inline-flex items-center justify-center px-1.5 py-0.5 text-[10px] font-black text-white bg-rose-500 rounded-full"> <span class="ml-1 inline-flex items-center justify-center px-1.5 py-0.2 rounded-full text-[10px] font-bold bg-white text-slate-900">
{{ $cartCount }} {{ $cartCount }}
</span> </span>
@endif @endif
@@ -135,34 +137,36 @@
<!-- User Account / Login Button --> <!-- User Account / Login Button -->
@guest @guest
<a href="{{ route('login') }}" class="px-3 py-2 rounded-xl bg-slate-100 hover:bg-slate-200 text-slate-700 font-bold text-xs flex items-center space-x-1.5 transition"> <a href="{{ route('login') }}" class="px-3 py-1.5 rounded-lg text-slate-600 hover:text-slate-900 hover:bg-slate-50 font-medium text-xs flex items-center space-x-1.5 transition">
<i data-lucide="user" class="w-4 h-4 text-slate-600"></i> <i data-lucide="user" class="w-3.5 h-3.5 text-slate-500"></i>
<span class="hidden sm:inline">Inloggen</span> <span class="hidden sm:inline">Inloggen</span>
</a> </a>
@else @else
<div class="relative" x-data="{ userMenu: false }"> <div class="relative" x-data="{ userMenu: false }">
<button @click="userMenu = !userMenu" type="button" class="px-3 py-2 rounded-xl bg-slate-100 hover:bg-slate-200 text-slate-800 font-bold text-xs flex items-center space-x-1.5 transition cursor-pointer"> <button @click="userMenu = !userMenu" type="button" class="px-2.5 py-1.5 rounded-lg text-slate-700 hover:bg-slate-100 font-medium text-xs flex items-center space-x-1.5 transition cursor-pointer">
<i data-lucide="user-check" class="w-4 h-4 text-amber-600"></i> <span class="w-5 h-5 rounded-full bg-slate-100 text-slate-700 flex items-center justify-center text-[10px] font-bold border border-slate-200">
{{ strtoupper(substr(auth()->user()->name, 0, 1)) }}
</span>
<span class="hidden sm:inline">{{ Str::limit(auth()->user()->name, 12) }}</span> <span class="hidden sm:inline">{{ Str::limit(auth()->user()->name, 12) }}</span>
<i data-lucide="chevron-down" class="w-3 h-3 text-slate-500"></i> <i data-lucide="chevron-down" class="w-3 h-3 text-slate-400"></i>
</button> </button>
<div x-show="userMenu" @click.away="userMenu = false" x-cloak class="absolute right-0 mt-2 w-48 rounded-2xl bg-white border border-slate-200 shadow-xl py-2 z-50 text-xs font-bold text-slate-700"> <div x-show="userMenu" @click.away="userMenu = false" x-cloak class="absolute right-0 mt-2 w-48 rounded-xl bg-white border border-slate-200/80 shadow-lg py-1.5 z-50 text-xs font-medium text-slate-700">
<a href="{{ route('account.index') }}" class="flex items-center space-x-2 px-4 py-2 hover:bg-slate-50 text-slate-800"> <a href="{{ route('account.index') }}" class="flex items-center space-x-2 px-3.5 py-2 hover:bg-slate-50 text-slate-700">
<i data-lucide="user-circle" class="w-4 h-4 text-slate-500"></i> <i data-lucide="user" class="w-3.5 h-3.5 text-slate-400"></i>
<span>Mijn Account</span> <span>Mijn Account</span>
</a> </a>
@if(auth()->user()->isAdmin()) @if(auth()->user()->isAdmin())
<a href="{{ route('admin.content.index') }}" class="flex items-center space-x-2 px-4 py-2 hover:bg-amber-50 text-amber-900 font-black"> <a href="{{ route('admin.content.index') }}" class="flex items-center space-x-2 px-3.5 py-2 hover:bg-sky-50 text-sky-700 font-semibold">
<i data-lucide="shield" class="w-4 h-4 text-amber-600"></i> <i data-lucide="shield" class="w-3.5 h-3.5 text-sky-600"></i>
<span>Admin Beheer</span> <span>Admin Beheer</span>
</a> </a>
@endif @endif
<div class="border-t border-slate-100 my-1"></div> <div class="border-t border-slate-100 my-1"></div>
<form action="{{ route('logout') }}" method="POST"> <form action="{{ route('logout') }}" method="POST">
@csrf @csrf
<button type="submit" class="w-full text-left flex items-center space-x-2 px-4 py-2 hover:bg-rose-50 text-rose-600 cursor-pointer"> <button type="submit" class="w-full text-left flex items-center space-x-2 px-3.5 py-2 hover:bg-rose-50 text-rose-600 cursor-pointer">
<i data-lucide="log-out" class="w-4 h-4"></i> <i data-lucide="log-out" class="w-3.5 h-3.5"></i>
<span>Uitloggen</span> <span>Uitloggen</span>
</button> </button>
</form> </form>
@@ -171,7 +175,7 @@
@endguest @endguest
<!-- Mobile Menu Trigger --> <!-- Mobile Menu Trigger -->
<button @click="mobileMenuOpen = !mobileMenuOpen" type="button" class="lg:hidden p-2 rounded-xl bg-slate-100 hover:bg-slate-200 text-slate-700 transition"> <button @click="mobileMenuOpen = !mobileMenuOpen" type="button" class="lg:hidden p-1.5 rounded-lg text-slate-600 hover:bg-slate-100 transition">
<i data-lucide="menu" class="w-5 h-5"></i> <i data-lucide="menu" class="w-5 h-5"></i>
</button> </button>
</div> </div>
@@ -179,65 +183,58 @@
</div> </div>
<!-- Mobile Menu Drawer --> <!-- Mobile Menu Drawer -->
<div x-show="mobileMenuOpen" x-cloak class="lg:hidden border-t border-slate-200 bg-white px-4 pt-3 pb-6 space-y-3 shadow-lg"> <div x-show="mobileMenuOpen" x-cloak class="lg:hidden border-t border-slate-200/80 bg-white px-4 pt-3 pb-5 space-y-3 shadow-lg">
<form action="{{ route('catalog') }}" method="GET" class="flex items-center relative mb-2"> <form action="{{ route('catalog') }}" method="GET" class="flex items-center relative mb-2">
<input <input
type="text" type="text"
name="q" name="q"
value="{{ request('q') }}" value="{{ request('q') }}"
placeholder="Zoek print, model..." placeholder="Zoek model..."
class="w-full bg-slate-50 border border-slate-200 rounded-xl pl-9 pr-3.5 py-2.5 text-xs font-medium placeholder-slate-400" class="w-full bg-slate-50 border border-slate-200 rounded-lg pl-9 pr-3.5 py-2 text-xs font-normal placeholder-slate-400"
> >
<i data-lucide="search" class="w-4 h-4 text-slate-400 absolute left-3"></i> <i data-lucide="search" class="w-4 h-4 text-slate-400 absolute left-3"></i>
</form> </form>
<div class="flex flex-col space-y-1.5 font-bold text-sm"> <div class="flex flex-col space-y-1 font-medium text-xs">
<a href="{{ route('home') }}" class="px-3.5 py-2.5 rounded-xl hover:bg-slate-50 flex items-center justify-between {{ request()->routeIs('home') ? 'bg-amber-50 text-amber-950 font-black' : '' }}"> <a href="{{ route('home') }}" class="px-3 py-2 rounded-lg hover:bg-slate-50 flex items-center justify-between {{ request()->routeIs('home') ? 'bg-slate-100 text-slate-900 font-semibold' : 'text-slate-600' }}">
<span>Home</span> <span>Home</span>
</a> </a>
<a href="{{ route('catalog', ['category' => 'fidget-toys']) }}" class="px-3.5 py-2.5 rounded-xl hover:bg-violet-50 flex items-center justify-between text-violet-700"> <a href="{{ route('catalog', ['category' => 'fidget-toys']) }}" class="px-3 py-2 rounded-lg hover:bg-slate-50 flex items-center justify-between text-slate-600">
<span>Fidget Toys & Sensory</span> <span>Fidget Toys & Sensory</span>
<span class="text-xs bg-violet-100 px-2 py-0.5 rounded-md font-bold">Bestsellers</span>
</a> </a>
<a href="{{ route('catalog', ['category' => 'pokemon-3d']) }}" class="px-3.5 py-2.5 rounded-xl hover:bg-amber-50 flex items-center justify-between text-amber-700"> <a href="{{ route('catalog', ['category' => 'pokemon-3d']) }}" class="px-3 py-2 rounded-lg hover:bg-slate-50 flex items-center justify-between text-slate-600">
<span>Pokémon 3D Prints</span> <span>Pokémon 3D Prints</span>
<span class="text-xs bg-amber-100 px-2 py-0.5 rounded-md font-bold">Populair</span>
</a> </a>
<a href="{{ route('catalog', ['category' => 'film-popculture']) }}" class="px-3.5 py-2.5 rounded-xl hover:bg-rose-50 flex items-center justify-between text-rose-700"> <a href="{{ route('catalog', ['category' => 'film-popculture']) }}" class="px-3 py-2 rounded-lg hover:bg-slate-50 flex items-center justify-between text-slate-600">
<span>Film, Gaming & Collectibles</span> <span>Film, Gaming & Collectibles</span>
</a> </a>
<a href="{{ route('catalog') }}" class="px-3.5 py-2.5 rounded-xl hover:bg-slate-50 flex items-center justify-between text-slate-700"> <a href="{{ route('catalog') }}" class="px-3 py-2 rounded-lg hover:bg-slate-50 flex items-center justify-between text-slate-600">
<span>Alle Prints Bekijken</span> <span>Alle Prints Bekijken</span>
</a> </a>
<div class="border-t border-slate-100 pt-2 mt-1"> <div class="border-t border-slate-100 pt-3 mt-2">
@guest @guest
<div class="grid grid-cols-2 gap-2"> <div class="grid grid-cols-2 gap-2">
<a href="{{ route('login') }}" class="py-2.5 px-3 rounded-xl bg-slate-100 hover:bg-slate-200 text-slate-800 text-center font-bold text-xs flex items-center justify-center space-x-1.5"> <a href="{{ route('login') }}" class="py-2 px-3 rounded-lg bg-slate-100 text-slate-800 text-center font-medium text-xs flex items-center justify-center space-x-1.5">
<i data-lucide="log-in" class="w-3.5 h-3.5"></i>
<span>Inloggen</span> <span>Inloggen</span>
</a> </a>
<a href="{{ route('register') }}" class="py-2.5 px-3 rounded-xl bg-amber-400 hover:bg-amber-300 text-slate-950 text-center font-bold text-xs flex items-center justify-center space-x-1.5 shadow-xs"> <a href="{{ route('register') }}" class="py-2 px-3 rounded-lg bg-slate-900 text-white text-center font-medium text-xs flex items-center justify-center space-x-1.5">
<i data-lucide="user-plus" class="w-3.5 h-3.5"></i>
<span>Registreren</span> <span>Registreren</span>
</a> </a>
</div> </div>
@else @else
<div class="space-y-1"> <div class="space-y-1">
<a href="{{ route('account.index') }}" class="px-3.5 py-2.5 rounded-xl hover:bg-slate-50 flex items-center justify-between text-slate-900 font-bold"> <a href="{{ route('account.index') }}" class="px-3 py-2 rounded-lg hover:bg-slate-50 flex items-center justify-between text-slate-800">
<span>Mijn Account ({{ auth()->user()->name }})</span> <span>Mijn Account ({{ auth()->user()->name }})</span>
<i data-lucide="user" class="w-4 h-4 text-amber-600"></i>
</a> </a>
@if(auth()->user()->isAdmin()) @if(auth()->user()->isAdmin())
<a href="{{ route('admin.content.index') }}" class="px-3.5 py-2.5 rounded-xl bg-amber-50 hover:bg-amber-100 flex items-center justify-between text-amber-950 font-black"> <a href="{{ route('admin.content.index') }}" class="px-3 py-2 rounded-lg bg-sky-50 text-sky-800 font-semibold flex items-center justify-between">
<span>Admin Beheer</span> <span>Admin Beheer</span>
<i data-lucide="shield" class="w-4 h-4 text-amber-600"></i>
</a> </a>
@endif @endif
<form action="{{ route('logout') }}" method="POST"> <form action="{{ route('logout') }}" method="POST">
@csrf @csrf
<button type="submit" class="w-full text-left px-3.5 py-2.5 rounded-xl hover:bg-rose-50 text-rose-600 font-bold flex items-center justify-between"> <button type="submit" class="w-full text-left px-3 py-2 rounded-lg hover:bg-rose-50 text-rose-600 font-medium flex items-center justify-between">
<span>Uitloggen</span> <span>Uitloggen</span>
<i data-lucide="log-out" class="w-4 h-4"></i>
</button> </button>
</form> </form>
</div> </div>
@@ -250,19 +247,19 @@
<!-- Global Flash Alerts --> <!-- Global Flash Alerts -->
@if(session('success')) @if(session('success'))
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mt-4"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mt-4">
<div class="p-3.5 sm:p-4 rounded-2xl bg-emerald-50 border border-emerald-200 text-emerald-900 text-xs sm:text-sm font-bold flex items-center justify-between shadow-xs"> <div class="p-3.5 rounded-xl bg-emerald-50/80 border border-emerald-200/60 text-emerald-800 text-xs font-medium flex items-center justify-between shadow-xs">
<div class="flex items-center space-x-2"> <div class="flex items-center space-x-2">
<i data-lucide="check-circle" class="w-4 h-4 text-emerald-600"></i> <i data-lucide="check-circle" class="w-4 h-4 text-emerald-600"></i>
<span>{{ session('success') }}</span> <span>{{ session('success') }}</span>
</div> </div>
<a href="{{ route('cart.index') }}" class="px-3 py-1 bg-white border border-emerald-300 rounded-xl text-xs font-bold text-emerald-800 hover:bg-emerald-100 transition">Winkelwagen &rarr;</a> <a href="{{ route('cart.index') }}" class="text-xs font-semibold text-emerald-700 hover:underline">Winkelwagen &rarr;</a>
</div> </div>
</div> </div>
@endif @endif
@if(session('error')) @if(session('error'))
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mt-4"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mt-4">
<div class="p-3.5 sm:p-4 rounded-2xl bg-rose-50 border border-rose-200 text-rose-900 text-xs sm:text-sm font-bold flex items-center space-x-2 shadow-xs"> <div class="p-3.5 rounded-xl bg-rose-50/80 border border-rose-200/60 text-rose-800 text-xs font-medium flex items-center space-x-2 shadow-xs">
<i data-lucide="alert-circle" class="w-4 h-4 text-rose-600"></i> <i data-lucide="alert-circle" class="w-4 h-4 text-rose-600"></i>
<span>{{ session('error') }}</span> <span>{{ session('error') }}</span>
</div> </div>
@@ -274,70 +271,70 @@
@yield('content') @yield('content')
</main> </main>
<!-- Footer (Licht, Verfijnd, Vriendelijk) --> <!-- Fresh, Minimalist, Modern Footer -->
<footer class="bg-slate-900 text-slate-200 border-t border-slate-800 pt-12 pb-10 mt-16"> <footer class="border-t border-slate-200/60 bg-slate-50/50 pt-14 pb-12 mt-20 text-slate-600 text-xs">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-8 pb-10 border-b border-slate-800/80"> <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-10 pb-12 border-b border-slate-200/60">
<!-- Col 1: Brand & Info --> <!-- Col 1: Brand & Info -->
<div class="space-y-3 sm:col-span-1"> <div class="space-y-3 sm:col-span-1">
<div class="flex items-center space-x-2"> <a href="{{ route('home') }}" class="inline-block">
<img src="/images/logo.svg" alt="{{ setting('site_name', 'Jouwdriedee.nl') }}" class="h-8 w-auto"> <img src="/images/logo.svg" alt="{{ setting('site_name', 'Jouwdriedee.nl') }}" class="h-7 w-auto">
</div> </a>
<p class="text-xs text-slate-300 leading-relaxed font-normal"> <p class="text-xs text-slate-500 leading-relaxed font-normal">
{{ setting('footer_description', 'Gespecialiseerd in het 3D printen van gedetailleerde modellen, soepel bewegende fidget toys en iconische popculture figuren. Gemaakt met hoogwaardige filamenten op hypermoderne FDM-printers.') }} {{ setting('footer_description', 'Gespecialiseerd in het 3D printen van gedetailleerde modellen, soepel bewegende fidget toys en iconische popculture figuren. Gemaakt met hoogwaardige filamenten op hypermoderne FDM-printers.') }}
</p> </p>
<div class="inline-flex items-center space-x-1.5 text-[11px] font-bold text-emerald-400 bg-emerald-950/60 px-2.5 py-1 rounded-full border border-emerald-500/30"> <div class="inline-flex items-center space-x-1.5 text-[11px] font-medium text-emerald-700 bg-emerald-50 px-2.5 py-1 rounded-full border border-emerald-200/50">
<span class="w-2 h-2 rounded-full bg-emerald-400 animate-pulse"></span> <span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span>
<span>{{ setting('footer_status_text', 'Printers gekalibreerd & actief') }}</span> <span>{{ setting('footer_status_text', 'Printers gekalibreerd & actief') }}</span>
</div> </div>
</div> </div>
<!-- Col 2: Categorieën --> <!-- Col 2: Categorieën -->
<div class="space-y-2"> <div class="space-y-2.5">
<h3 class="font-heading text-xs font-black uppercase tracking-wider text-amber-300">Collectie</h3> <h3 class="text-xs font-semibold text-slate-900 tracking-wider uppercase text-[11px]">Collecties</h3>
<ul class="space-y-1.5 text-xs text-slate-300 font-medium"> <ul class="space-y-2 text-xs text-slate-500 font-normal">
<li><a href="{{ route('catalog', ['category' => 'fidget-toys']) }}" class="hover:text-white transition">Fidget Toys & Slugs</a></li> <li><a href="{{ route('catalog', ['category' => 'fidget-toys']) }}" class="hover:text-slate-900 transition">Fidget Toys & Slugs</a></li>
<li><a href="{{ route('catalog', ['category' => 'pokemon-3d']) }}" class="hover:text-white transition">Pokémon 3D Prints</a></li> <li><a href="{{ route('catalog', ['category' => 'pokemon-3d']) }}" class="hover:text-slate-900 transition">Pokémon 3D Prints</a></li>
<li><a href="{{ route('catalog', ['category' => 'film-popculture']) }}" class="hover:text-white transition">Film, Gaming & Collectibles</a></li> <li><a href="{{ route('catalog', ['category' => 'film-popculture']) }}" class="hover:text-slate-900 transition">Film, Gaming & Props</a></li>
<li><a href="{{ route('catalog') }}" class="hover:text-white transition">Alle Prints Bekijken</a></li> <li><a href="{{ route('catalog') }}" class="hover:text-slate-900 transition">Alle Prints Bekijken</a></li>
</ul> </ul>
</div> </div>
<!-- Col 3: Materialen & Kwaliteit --> <!-- Col 3: Materialen & Kwaliteit -->
<div class="space-y-2"> <div class="space-y-2.5">
<h3 class="font-heading text-xs font-black uppercase tracking-wider text-sky-300">Materialen & Kwaliteit</h3> <h3 class="text-xs font-semibold text-slate-900 tracking-wider uppercase text-[11px]">Precisie & Materialen</h3>
<ul class="space-y-1.5 text-xs text-slate-300 font-medium"> <ul class="space-y-2 text-xs text-slate-500 font-normal">
<li class="flex items-center space-x-1.5"> <li class="flex items-center space-x-1.5">
<span class="w-1.5 h-1.5 rounded-full bg-emerald-400"></span> <span class="w-1.5 h-1.5 rounded-full bg-emerald-400"></span>
<span><strong>Bio-PLA+</strong>: Biologisch & geurloos</span> <span><strong>Bio-PLA+</strong>: Biologisch & reukloos</span>
</li> </li>
<li class="flex items-center space-x-1.5"> <li class="flex items-center space-x-1.5">
<span class="w-1.5 h-1.5 rounded-full bg-sky-400"></span> <span class="w-1.5 h-1.5 rounded-full bg-sky-400"></span>
<span><strong>PETG Tough</strong>: Slagvast & stevig</span> <span><strong>PETG Tough</strong>: Slagvast & hittebestendig</span>
</li> </li>
<li class="flex items-center space-x-1.5"> <li class="flex items-center space-x-1.5">
<span class="w-1.5 h-1.5 rounded-full bg-amber-400"></span> <span class="w-1.5 h-1.5 rounded-full bg-indigo-400"></span>
<span><strong>TPU 95A</strong>: Flexibel rubber</span> <span><strong>TPU 95A</strong>: Flexibel rubber</span>
</li> </li>
<li class="flex items-center space-x-1.5"> <li class="flex items-center space-x-1.5">
<span class="w-1.5 h-1.5 rounded-full bg-purple-400"></span> <span class="w-1.5 h-1.5 rounded-full bg-amber-400"></span>
<span><strong>Silk Glans</strong>: Prachtige glans</span> <span><strong>Silk Glans</strong>: Luxe zijdeglans</span>
</li> </li>
</ul> </ul>
</div> </div>
<!-- Col 4: Contact --> <!-- Col 4: Contact -->
<div class="space-y-2"> <div class="space-y-2.5">
<h3 class="font-heading text-xs font-black uppercase tracking-wider text-rose-300">Bestelling & Verzending</h3> <h3 class="text-xs font-semibold text-slate-900 tracking-wider uppercase text-[11px]">Service & Contact</h3>
<p class="text-xs text-slate-300 font-normal">Heb je een vraag over een print of levertijd van jouw bestelling?</p> <p class="text-xs text-slate-500 leading-relaxed font-normal">Vragen over custom printopdrachten of bestellingen?</p>
<div class="p-3 rounded-2xl bg-slate-800/60 border border-slate-700/80 text-xs space-y-1 font-semibold"> <div class="p-3 rounded-xl bg-white border border-slate-200/60 text-xs space-y-1.5 font-medium shadow-2xs">
<div class="flex items-center space-x-1.5 text-slate-200"> <div class="flex items-center space-x-2 text-slate-700">
<i data-lucide="mail" class="w-3.5 h-3.5 text-amber-400"></i> <i data-lucide="mail" class="w-3.5 h-3.5 text-slate-400"></i>
<span>{{ setting('footer_email', 'info@jouwdriedee.nl') }}</span> <span>{{ setting('footer_email', 'info@jouwdriedee.nl') }}</span>
</div> </div>
<div class="flex items-center space-x-1.5 text-slate-200"> <div class="flex items-center space-x-2 text-slate-700">
<i data-lucide="truck" class="w-3.5 h-3.5 text-amber-400"></i> <i data-lucide="truck" class="w-3.5 h-3.5 text-slate-400"></i>
<span>{{ setting('footer_shipping_text', 'Snelle verzending via PostNL') }}</span> <span>{{ setting('footer_shipping_text', 'Snelle verzending via PostNL') }}</span>
</div> </div>
</div> </div>
@@ -345,10 +342,10 @@
</div> </div>
<div class="pt-6 flex flex-col sm:flex-row items-center justify-between text-xs text-slate-400 font-medium gap-3 text-center sm:text-left"> <div class="pt-8 flex flex-col sm:flex-row items-center justify-between text-xs text-slate-400 font-normal gap-3 text-center sm:text-left">
<p>&copy; {{ date('Y') }} {{ setting('site_name', 'Jouwdriedee.nl') }}. {{ setting('footer_copyright', 'Alle 3D prints worden op bestelling vervaardigd.') }}</p> <p>&copy; {{ date('Y') }} {{ setting('site_name', 'Jouwdriedee.nl') }}. {{ setting('footer_copyright', 'Alle 3D prints worden op bestelling vervaardigd.') }}</p>
<div class="flex items-center space-x-3 text-slate-400"> <div class="text-slate-400 text-[11px]">
<span>{{ setting('footer_payment_text', 'iDEAL & Bancontact • PostNL Track & Trace') }}</span> {{ setting('footer_payment_text', 'iDEAL & Bancontact • PostNL Track & Trace') }}
</div> </div>
</div> </div>
</div> </div>
resources/views/shop/catalog.blade.php
+58 -57
View File
@@ -3,46 +3,45 @@
@section('title', '3D Print Catalogus | Jouwdriedee.nl') @section('title', '3D Print Catalogus | Jouwdriedee.nl')
@section('content') @section('content')
<!-- Page Header --> <!-- Page Header (Fris & Minimalistisch) -->
<div class="bg-gradient-to-b from-amber-50/40 via-white to-[#FAF9F6] border-b border-slate-200/60 py-6 sm:py-8"> <div class="border-b border-slate-100 bg-slate-50/50 py-8 sm:py-10">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex flex-col sm:flex-row sm:items-center justify-between gap-3"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex flex-col sm:flex-row sm:items-center justify-between gap-4">
<div> <div>
<div class="inline-flex items-center space-x-1.5 px-3 py-1 rounded-full bg-white border border-slate-200/80 text-xs font-semibold text-slate-700 shadow-xs mb-2"> <span class="text-[11px] font-semibold uppercase tracking-wider text-slate-400">Assortiment</span>
<span>Overzicht 3D Modellen</span> <h1 class="font-heading text-2xl sm:text-4xl font-extrabold text-slate-900 tracking-tight mt-0.5">3D Print Collectie</h1>
</div> <p class="text-xs sm:text-sm text-slate-500 mt-1">Fidget toys, Pokémon figuren en popculture modellen. Geprint op aanvraag in jouw gewenste kleur.</p>
<h1 class="font-heading text-2xl sm:text-4xl font-black text-slate-900 tracking-tight">Onze 3D Print Collectie</h1>
<p class="text-xs text-slate-500 mt-1">Fidget toys, Pokémon figuren en popculture modellen. Geprint op aanvraag in jouw gewenste kleur.</p>
</div> </div>
@if(request()->hasAny(['category', 'material', 'q', 'sort'])) @if(request()->hasAny(['category', 'material', 'q', 'sort']))
<a href="{{ route('catalog') }}" class="px-3 py-1.5 rounded-xl bg-white border border-slate-200 text-xs font-bold text-rose-600 hover:bg-rose-50 flex items-center space-x-1 self-start shadow-xs transition"> <a href="{{ route('catalog') }}" class="px-3 py-1.5 rounded-lg bg-white border border-slate-200 text-xs font-medium text-rose-600 hover:bg-rose-50 flex items-center space-x-1.5 self-start shadow-2xs transition">
<span>✕ Filters Wissen</span> <i data-lucide="x" class="w-3.5 h-3.5"></i>
<span>Filters wissen</span>
</a> </a>
@endif @endif
</div> </div>
</div> </div>
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6 sm:py-10" x-data="{ mobileFiltersOpen: false }"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 sm:py-12" x-data="{ mobileFiltersOpen: false }">
<!-- Mobile Filter Toggle Bar --> <!-- Mobile Filter Toggle Bar -->
<div class="lg:hidden mb-4 flex items-center justify-between gap-2"> <div class="lg:hidden mb-6 flex items-center justify-between gap-2">
<button <button
type="button" type="button"
@click="mobileFiltersOpen = !mobileFiltersOpen" @click="mobileFiltersOpen = !mobileFiltersOpen"
class="flex-1 py-2.5 px-4 rounded-xl bg-white border border-slate-200 text-slate-800 text-xs font-bold flex items-center justify-center space-x-2 shadow-xs" class="flex-1 py-2 px-3.5 rounded-lg bg-white border border-slate-200 text-slate-800 text-xs font-medium flex items-center justify-center space-x-2 shadow-2xs"
> >
<i data-lucide="sliders-horizontal" class="w-4 h-4 text-amber-600"></i> <i data-lucide="sliders-horizontal" class="w-3.5 h-3.5 text-slate-500"></i>
<span x-text="mobileFiltersOpen ? 'Verberg Filters' : 'Filters & Categorieën'"></span> <span x-text="mobileFiltersOpen ? 'Verberg filters' : 'Filters & Categorieën'"></span>
@if(request()->hasAny(['category', 'material', 'q'])) @if(request()->hasAny(['category', 'material', 'q']))
<span class="w-2 h-2 rounded-full bg-amber-500"></span> <span class="w-1.5 h-1.5 rounded-full bg-sky-500"></span>
@endif @endif
</button> </button>
<!-- Snelle Sortering op Mobiel --> <!-- Quick Sort on Mobile -->
<form action="{{ route('catalog') }}" method="GET" class="w-40"> <form action="{{ route('catalog') }}" method="GET" class="w-36">
@if(request('category')) <input type="hidden" name="category" value="{{ request('category') }}"> @endif @if(request('category')) <input type="hidden" name="category" value="{{ request('category') }}"> @endif
@if(request('material')) <input type="hidden" name="material" value="{{ request('material') }}"> @endif @if(request('material')) <input type="hidden" name="material" value="{{ request('material') }}"> @endif
@if(request('q')) <input type="hidden" name="q" value="{{ request('q') }}"> @endif @if(request('q')) <input type="hidden" name="q" value="{{ request('q') }}"> @endif
<select name="sort" onchange="this.form.submit()" class="w-full bg-white border border-slate-200 rounded-xl px-2.5 py-2.5 text-xs font-bold text-slate-700 shadow-xs"> <select name="sort" onchange="this.form.submit()" class="w-full bg-white border border-slate-200 rounded-lg px-2.5 py-2 text-xs font-medium text-slate-700 shadow-2xs">
<option value="newest" {{ request('sort') === 'newest' ? 'selected' : '' }}>Nieuwste</option> <option value="newest" {{ request('sort') === 'newest' ? 'selected' : '' }}>Nieuwste</option>
<option value="price_asc" {{ request('sort') === 'price_asc' ? 'selected' : '' }}>Prijs &uarr;</option> <option value="price_asc" {{ request('sort') === 'price_asc' ? 'selected' : '' }}>Prijs &uarr;</option>
<option value="price_desc" {{ request('sort') === 'price_desc' ? 'selected' : '' }}>Prijs &darr;</option> <option value="price_desc" {{ request('sort') === 'price_desc' ? 'selected' : '' }}>Prijs &darr;</option>
@@ -50,35 +49,36 @@
</form> </form>
</div> </div>
<div class="grid grid-cols-1 lg:grid-cols-4 gap-6 lg:gap-8"> <div class="grid grid-cols-1 lg:grid-cols-4 gap-8">
<!-- Filters Sidebar --> <!-- Filters Sidebar -->
<aside :class="mobileFiltersOpen ? 'block' : 'hidden lg:block'" class="space-y-4"> <aside :class="mobileFiltersOpen ? 'block' : 'hidden lg:block'" class="space-y-6">
<div class="p-5 sm:p-6 rounded-2xl bg-white border border-slate-200/80 shadow-xs space-y-5"> <div class="p-5 rounded-2xl bg-white border border-slate-200/60 shadow-2xs space-y-6">
<div class="flex items-center justify-between pb-3 border-b border-slate-100"> <div class="flex items-center justify-between pb-3 border-b border-slate-100">
<span class="font-heading text-xs font-black text-slate-900 uppercase tracking-wider flex items-center space-x-1.5"> <span class="text-xs font-semibold uppercase tracking-wider text-slate-900 flex items-center space-x-1.5">
<i data-lucide="filter" class="w-3.5 h-3.5 text-amber-600"></i> <i data-lucide="filter" class="w-3.5 h-3.5 text-slate-400"></i>
<span>Filters & Zoeken</span> <span>Filters</span>
</span> </span>
@if(request()->hasAny(['category', 'material', 'q', 'sort'])) @if(request()->hasAny(['category', 'material', 'q', 'sort']))
<a href="{{ route('catalog') }}" class="text-[11px] font-bold text-rose-600 hover:underline">Wissen</a> <a href="{{ route('catalog') }}" class="text-[11px] text-rose-600 hover:underline">Wissen</a>
@endif @endif
</div> </div>
<!-- Zoekveld --> <!-- Zoekveld -->
<form action="{{ route('catalog') }}" method="GET" class="space-y-4"> <form action="{{ route('catalog') }}" method="GET" class="space-y-5">
@if(request('category')) <input type="hidden" name="category" value="{{ request('category') }}"> @endif @if(request('category')) <input type="hidden" name="category" value="{{ request('category') }}"> @endif
@if(request('material')) <input type="hidden" name="material" value="{{ request('material') }}"> @endif @if(request('material')) <input type="hidden" name="material" value="{{ request('material') }}"> @endif
<div> <div>
<label class="block text-xs font-bold text-slate-700 mb-1.5">Zoeken</label> <label class="block text-xs font-medium text-slate-700 mb-1.5">Zoeken</label>
<div class="relative"> <div class="relative">
<input <input
type="text" type="text"
name="q" name="q"
value="{{ request('q') }}" value="{{ request('q') }}"
placeholder="Draak, Pikachu, Grogu..." placeholder="Draak, Pikachu, Grogu..."
class="w-full bg-slate-50 border border-slate-200 rounded-xl pl-8 pr-3 py-2 text-xs font-medium text-slate-900 placeholder-slate-400 focus:bg-white focus:outline-none focus:ring-2 focus:ring-amber-400" class="w-full bg-slate-50 border border-slate-200 rounded-lg pl-8 pr-3 py-1.5 text-xs text-slate-900 placeholder-slate-400 focus:bg-white focus:outline-none focus:ring-1 focus:ring-slate-400"
> >
<i data-lucide="search" class="w-3.5 h-3.5 text-slate-400 absolute left-2.5 top-1/2 -translate-y-1/2"></i> <i data-lucide="search" class="w-3.5 h-3.5 text-slate-400 absolute left-2.5 top-1/2 -translate-y-1/2"></i>
</div> </div>
@@ -86,13 +86,13 @@
<!-- Categorie filter --> <!-- Categorie filter -->
<div> <div>
<label class="block text-xs font-bold text-slate-700 mb-2">Categorieën</label> <label class="block text-xs font-medium text-slate-700 mb-2">Categorieën</label>
<div class="space-y-1"> <div class="space-y-0.5">
<a href="{{ route('catalog', array_merge(request()->except('category', 'page'), [])) }}" class="flex items-center justify-between px-3 py-2 rounded-xl text-xs font-bold transition {{ !request('category') ? 'bg-amber-100 text-amber-950 font-black' : 'text-slate-600 hover:bg-slate-50' }}"> <a href="{{ route('catalog', array_merge(request()->except('category', 'page'), [])) }}" class="flex items-center justify-between px-2.5 py-1.5 rounded-lg text-xs transition {{ !request('category') ? 'bg-slate-100 text-slate-900 font-semibold' : 'text-slate-600 hover:bg-slate-50' }}">
<span>Alle categorieën</span> <span>Alle categorieën</span>
</a> </a>
@foreach($categories as $cat) @foreach($categories as $cat)
<a href="{{ route('catalog', array_merge(request()->except('category', 'page'), ['category' => $cat->slug])) }}" class="flex items-center justify-between px-3 py-2 rounded-xl text-xs font-bold transition {{ request('category') === $cat->slug ? 'bg-amber-100 text-amber-950 font-black' : 'text-slate-600 hover:bg-slate-50' }}"> <a href="{{ route('catalog', array_merge(request()->except('category', 'page'), ['category' => $cat->slug])) }}" class="flex items-center justify-between px-2.5 py-1.5 rounded-lg text-xs transition {{ request('category') === $cat->slug ? 'bg-slate-100 text-slate-900 font-semibold' : 'text-slate-600 hover:bg-slate-50' }}">
<span>{{ $cat->name }}</span> <span>{{ $cat->name }}</span>
</a> </a>
@endforeach @endforeach
@@ -101,13 +101,13 @@
<!-- Materiaal filter --> <!-- Materiaal filter -->
<div> <div>
<label class="block text-xs font-bold text-slate-700 mb-2">Filament Materiaal</label> <label class="block text-xs font-medium text-slate-700 mb-2">Filament Materiaal</label>
<div class="space-y-1"> <div class="space-y-0.5">
<a href="{{ route('catalog', array_merge(request()->except('material', 'page'), [])) }}" class="flex items-center justify-between px-3 py-1.5 rounded-xl text-xs font-bold transition {{ !request('material') ? 'bg-sky-100 text-sky-950 font-black' : 'text-slate-600 hover:bg-slate-50' }}"> <a href="{{ route('catalog', array_merge(request()->except('material', 'page'), [])) }}" class="flex items-center justify-between px-2.5 py-1.5 rounded-lg text-xs transition {{ !request('material') ? 'bg-slate-100 text-slate-900 font-semibold' : 'text-slate-600 hover:bg-slate-50' }}">
<span>Alle materialen</span> <span>Alle materialen</span>
</a> </a>
@foreach($materials as $mat) @foreach($materials as $mat)
<a href="{{ route('catalog', array_merge(request()->except('material', 'page'), ['material' => $mat->code])) }}" class="flex items-center justify-between px-3 py-1.5 rounded-xl text-xs font-bold transition {{ request('material') === $mat->code ? 'bg-sky-100 text-sky-950 font-black' : 'text-slate-600 hover:bg-slate-50' }}"> <a href="{{ route('catalog', array_merge(request()->except('material', 'page'), ['material' => $mat->code])) }}" class="flex items-center justify-between px-2.5 py-1.5 rounded-lg text-xs transition {{ request('material') === $mat->code ? 'bg-slate-100 text-slate-900 font-semibold' : 'text-slate-600 hover:bg-slate-50' }}">
<span>{{ $mat->name }}</span> <span>{{ $mat->name }}</span>
</a> </a>
@endforeach @endforeach
@@ -116,8 +116,8 @@
<!-- Sortering Desktop --> <!-- Sortering Desktop -->
<div class="hidden lg:block"> <div class="hidden lg:block">
<label class="block text-xs font-bold text-slate-700 mb-1.5">Sorteren</label> <label class="block text-xs font-medium text-slate-700 mb-1.5">Sorteren</label>
<select name="sort" onchange="this.form.submit()" class="w-full bg-slate-50 border border-slate-200 rounded-xl px-3 py-2 text-xs font-bold text-slate-700 focus:bg-white focus:outline-none focus:ring-2 focus:ring-amber-400"> <select name="sort" onchange="this.form.submit()" class="w-full bg-slate-50 border border-slate-200 rounded-lg px-2.5 py-1.5 text-xs font-medium text-slate-700 focus:bg-white focus:outline-none">
<option value="newest" {{ request('sort') === 'newest' ? 'selected' : '' }}>Nieuwste toevoegingen</option> <option value="newest" {{ request('sort') === 'newest' ? 'selected' : '' }}>Nieuwste toevoegingen</option>
<option value="price_asc" {{ request('sort') === 'price_asc' ? 'selected' : '' }}>Prijs: Laag naar hoog</option> <option value="price_asc" {{ request('sort') === 'price_asc' ? 'selected' : '' }}>Prijs: Laag naar hoog</option>
<option value="price_desc" {{ request('sort') === 'price_desc' ? 'selected' : '' }}>Prijs: Hoog naar laag</option> <option value="price_desc" {{ request('sort') === 'price_desc' ? 'selected' : '' }}>Prijs: Hoog naar laag</option>
@@ -130,51 +130,52 @@
<!-- Producten Overzicht --> <!-- Producten Overzicht -->
<div class="lg:col-span-3 space-y-6"> <div class="lg:col-span-3 space-y-6">
@if($products->isEmpty()) @if($products->isEmpty())
<div class="p-10 text-center rounded-3xl bg-white border border-slate-200/80 shadow-xs space-y-3"> <div class="p-12 text-center rounded-2xl bg-white border border-slate-200/60 shadow-2xs space-y-3">
<div class="w-14 h-14 rounded-2xl bg-amber-50 text-slate-800 flex items-center justify-center mx-auto text-3xl"> <div class="w-12 h-12 rounded-xl bg-slate-100 text-slate-600 flex items-center justify-center mx-auto text-xl">
🙈 <i data-lucide="box" class="w-6 h-6 text-slate-400"></i>
</div> </div>
<h3 class="font-heading text-lg font-black text-slate-900">Geen artikelen gevonden</h3> <h3 class="font-heading text-base font-semibold text-slate-900">Geen artikelen gevonden</h3>
<p class="text-xs text-slate-500 max-w-sm mx-auto">Er zijn geen prints gevonden die voldoen aan je huidige filters. Wis je filters of bekijk alle categorieën!</p> <p class="text-xs text-slate-500 max-w-sm mx-auto">Er zijn geen prints gevonden die voldoen aan je huidige filters. Wis je filters of bekijk alle categorieën!</p>
<a href="{{ route('catalog') }}" class="inline-flex px-5 py-2.5 rounded-xl bg-amber-400 text-slate-950 text-xs font-bold shadow-xs">Alle prints bekijken 🎁</a> <a href="{{ route('catalog') }}" class="inline-flex px-4 py-2 rounded-lg bg-slate-900 text-white text-xs font-medium hover:bg-slate-800 transition">Alle prints bekijken</a>
</div> </div>
@else @else
<div class="grid grid-cols-2 md:grid-cols-3 gap-3 sm:gap-6"> <div class="grid grid-cols-2 md:grid-cols-3 gap-4 sm:gap-6">
@foreach($products as $product) @foreach($products as $product)
<div class="rounded-2xl sm:rounded-3xl bg-white border border-slate-200/80 shadow-xs hover:shadow-md transition-all duration-200 overflow-hidden flex flex-col justify-between group"> <div class="group flex flex-col justify-between bg-white rounded-2xl p-3 border border-slate-200/60 card-hover">
<div> <div>
<div class="relative h-40 sm:h-56 bg-slate-100 overflow-hidden"> <div class="relative aspect-square rounded-xl overflow-hidden bg-slate-50">
<img <img
src="{{ $product->image_url }}" src="{{ $product->image_url }}"
alt="{{ $product->name }}" alt="{{ $product->name }}"
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" class="w-full h-full object-cover group-hover:scale-103 transition-transform duration-500 ease-out"
loading="lazy" loading="lazy"
> >
@if($product->category) @if($product->category)
<span class="absolute top-2 left-2 sm:top-3 sm:left-3 px-2 py-0.5 rounded-md bg-white/95 backdrop-blur-xs text-[9px] sm:text-[10px] font-bold text-slate-800 shadow-xs border border-slate-200/60"> <span class="absolute top-2 left-2 px-2 py-0.5 rounded-md bg-white/90 backdrop-blur-xs text-[10px] font-medium text-slate-700 border border-slate-200/50 shadow-2xs">
{{ $product->category->name }} {{ $product->category->name }}
</span> </span>
@endif @endif
</div> </div>
<div class="p-3 sm:p-4"> <div class="pt-3 pb-1">
<h3 class="font-heading text-xs sm:text-sm font-black text-slate-900 group-hover:text-amber-700 transition line-clamp-2"> <h3 class="font-heading text-xs sm:text-sm font-semibold text-slate-900 group-hover:text-sky-600 transition line-clamp-1">
<a href="{{ route('product.show', $product->slug) }}"> <a href="{{ route('product.show', $product->slug) }}">
{{ $product->name }} {{ $product->name }}
</a> </a>
</h3> </h3>
<p class="hidden sm:block text-xs text-slate-500 mt-1 line-clamp-2 leading-relaxed font-normal"> <p class="text-[11px] text-slate-400 mt-0.5 line-clamp-1 font-normal">
{{ $product->short_description }} {{ $product->short_description }}
</p> </p>
</div> </div>
</div> </div>
<div class="p-3 sm:p-4 pt-0 border-t border-slate-100 mt-1 flex items-center justify-between"> <div class="pt-2 border-t border-slate-100 flex items-center justify-between mt-2">
<div> <div>
<span class="text-[9px] sm:text-[10px] text-slate-400 block font-bold uppercase">Vanaf</span> <span class="text-[10px] text-slate-400 block font-normal leading-none">Vanaf</span>
<span class="font-heading text-sm sm:text-base font-black text-slate-900">{{ $product->formatted_price }}</span> <span class="font-heading text-sm font-bold text-slate-900">{{ $product->formatted_price }}</span>
</div> </div>
<a href="{{ route('product.show', $product->slug) }}" class="px-2.5 sm:px-3 py-1 sm:py-1.5 rounded-xl bg-amber-400 hover:bg-amber-300 text-slate-950 text-[10px] sm:text-xs font-bold transition flex items-center space-x-1 shadow-xs"> <a href="{{ route('product.show', $product->slug) }}" class="px-2.5 py-1.5 rounded-lg bg-slate-900 hover:bg-slate-800 text-white text-[11px] font-medium transition flex items-center space-x-1 cursor-pointer">
<span>Kleur 🎨</span> <span>Kies kleur</span>
<i data-lucide="chevron-right" class="w-3 h-3"></i>
</a> </a>
</div> </div>
</div> </div>
resources/views/shop/custom.blade.php
+107 -111
View File
@@ -1,30 +1,30 @@
@extends('layouts.app') @extends('layouts.app')
@section('title', 'Eigen 3D Model Printen (STL / 3MF) | Jouwdriedee.nl') @section('title', 'Eigen 3D Model Printen | Jouwdriedee.nl')
@section('content') @section('content')
<!-- Header Banner --> <!-- Header Banner -->
<div class="bg-slate-50 border-b border-slate-200/80 py-8 sm:py-12"> <div class="border-b border-slate-200/80 py-8 sm:py-12 bg-slate-50/50">
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center space-y-3"> <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center space-y-2.5">
<span class="px-3.5 py-1 rounded-full bg-white border border-slate-200 text-xs font-bold text-slate-700 inline-flex items-center space-x-1.5 shadow-2xs"> <span class="px-3 py-1 rounded-full bg-white border border-slate-200 text-xs font-medium text-slate-700 inline-flex items-center space-x-1.5 shadow-2xs">
<i data-lucide="layers" class="w-3.5 h-3.5 text-rose-500"></i> <i data-lucide="layers" class="w-3.5 h-3.5 text-slate-500"></i>
<span>3D Print op Aanvraag & Maatwerk</span> <span>3D Print op Aanvraag</span>
</span> </span>
<h1 class="font-heading text-3xl sm:text-5xl font-black text-slate-900 tracking-tight">Eigen 3D Model Printen</h1> <h1 class="text-3xl sm:text-4xl font-bold tracking-tight text-slate-900">Eigen 3D Model Printen</h1>
<p class="text-xs sm:text-sm text-slate-600 max-w-xl mx-auto leading-relaxed font-normal"> <p class="text-xs sm:text-sm text-slate-500 max-w-xl mx-auto leading-relaxed">
Heb je een 3D-bestand van MakerWorld, Printables of Thingiverse, of een eigen CAD-ontwerp? Upload jouw bestand of plak de link, kies je materiaal en bestel direct online. Upload jouw eigen STL, 3MF of STEP bestand, of plak de link van een MakerWorld of Printables model. Kies je materiaal en configureer direct online.
</p> </p>
</div> </div>
</div> </div>
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8 sm:py-12" <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8 sm:py-12"
x-data="{ x-data="{
activeTab: 'direct', // 'direct' of 'offerte' activeTab: 'direct',
selectedSize: 'medium', selectedSize: 'medium',
sizePrices: { sizePrices: {
'klein': 9.95, // tot 8 cm 'klein': 9.95,
'medium': 16.95, // tot 15 cm 'medium': 16.95,
'groot': 24.95 // tot 22 cm 'groot': 24.95
}, },
selectedMaterial: 'pla', selectedMaterial: 'pla',
materialMultipliers: { materialMultipliers: {
@@ -32,7 +32,7 @@
'{{ $mat->code }}': {{ $mat->price_multiplier }}, '{{ $mat->code }}': {{ $mat->price_multiplier }},
@endforeach @endforeach
}, },
selectedColor: '{{ $colors[0]->name ?? 'Zon Geel (Pikachu)' }}', selectedColor: '{{ $colors[0]->name ?? 'Zwart' }}',
quantity: 1, quantity: 1,
get calculatedTotal() { get calculatedTotal() {
@@ -48,75 +48,75 @@
}"> }">
<!-- Tab Selector --> <!-- Tab Selector -->
<div class="flex items-center justify-center p-1.5 bg-slate-100 rounded-2xl max-w-md mx-auto mb-8"> <div class="flex items-center justify-center p-1 bg-slate-100 rounded-xl max-w-xs mx-auto mb-8">
<button <button
type="button" type="button"
@click="activeTab = 'direct'" @click="activeTab = 'direct'"
:class="activeTab === 'direct' ? 'bg-white text-slate-900 shadow-sm font-black' : 'text-slate-600 hover:text-slate-900 font-bold'" :class="activeTab === 'direct' ? 'bg-white text-slate-900 shadow-2xs font-semibold' : 'text-slate-600 hover:text-slate-900 font-medium'"
class="flex-1 py-2.5 px-4 rounded-xl text-xs transition flex items-center justify-center space-x-1.5" class="flex-1 py-1.5 px-3 rounded-lg text-xs transition flex items-center justify-center space-x-1.5 cursor-pointer"
> >
<i data-lucide="shopping-bag" class="w-3.5 h-3.5"></i> <i data-lucide="shopping-bag" class="w-3.5 h-3.5"></i>
<span>Direct online bestellen</span> <span>Direct bestellen</span>
</button> </button>
<button <button
type="button" type="button"
@click="activeTab = 'offerte'" @click="activeTab = 'offerte'"
:class="activeTab === 'offerte' ? 'bg-white text-slate-900 shadow-sm font-black' : 'text-slate-600 hover:text-slate-900 font-bold'" :class="activeTab === 'offerte' ? 'bg-white text-slate-900 shadow-2xs font-semibold' : 'text-slate-600 hover:text-slate-900 font-medium'"
class="flex-1 py-2.5 px-4 rounded-xl text-xs transition flex items-center justify-center space-x-1.5" class="flex-1 py-1.5 px-3 rounded-lg text-xs transition flex items-center justify-center space-x-1.5 cursor-pointer"
> >
<i data-lucide="file-text" class="w-3.5 h-3.5"></i> <i data-lucide="file-text" class="w-3.5 h-3.5"></i>
<span>Maatwerk offerte</span> <span>Maatwerk offerte</span>
</button> </button>
</div> </div>
<!-- TAB 1: DIRECT BESTELLEN EN IN WINKELWAGEN --> <!-- TAB 1: DIRECT BESTELLEN -->
<div x-show="activeTab === 'direct'" class="p-6 sm:p-10 rounded-3xl bg-white border border-slate-200/80 shadow-lg shadow-slate-200/40 space-y-8"> <div x-show="activeTab === 'direct'" class="p-6 sm:p-8 rounded-2xl bg-white border border-slate-200/80 shadow-xs space-y-6">
<form action="{{ route('custom.cart.add') }}" method="POST" enctype="multipart/form-data" class="space-y-6"> <form action="{{ route('custom.cart.add') }}" method="POST" enctype="multipart/form-data" class="space-y-6">
@csrf @csrf
<!-- 1. Model bron: Bestand of Link --> <!-- 1. Model bron: Bestand of Link -->
<div class="space-y-4"> <div class="space-y-3">
<div class="border-b border-slate-100 pb-3"> <div class="border-b border-slate-100 pb-2">
<h3 class="font-heading text-base font-black text-slate-900 flex items-center space-x-2"> <h3 class="text-xs font-bold text-slate-900 uppercase tracking-wider">
<span>1. 3D-bestand uploaden of link invoeren</span> 1. 3D-bestand uploaden of link invoeren
</h3> </h3>
<p class="text-xs text-slate-500 mt-0.5">Ondersteunt STL, 3MF, STEP en OBJ, of een directe link naar het model op MakerWorld of Printables.</p> <p class="text-xs text-slate-500 mt-0.5">Ondersteunt STL, 3MF, STEP en OBJ, of een directe link naar een model.</p>
</div> </div>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4"> <div class="grid grid-cols-1 sm:grid-cols-2 gap-3.5">
<!-- Bestand upload --> <!-- Bestand upload -->
<div class="p-4 rounded-2xl bg-slate-50 border border-slate-200/80 hover:border-slate-300 transition"> <div class="p-4 rounded-xl bg-slate-50 border border-slate-200 hover:border-slate-300 transition">
<label class="block text-xs font-bold text-slate-800 mb-1 flex items-center space-x-1.5"> <label class="block text-xs font-semibold text-slate-800 mb-1 flex items-center space-x-1.5">
<i data-lucide="file" class="w-3.5 h-3.5 text-rose-500"></i> <i data-lucide="file-up" class="w-3.5 h-3.5 text-slate-500"></i>
<span>Bestand uploaden (.stl, .3mf, .step, .obj)</span> <span>Bestand uploaden (.stl, .3mf, .step)</span>
</label> </label>
<input type="file" name="model_file" accept=".stl,.step,.stp,.obj,.3mf,.zip" class="w-full text-xs text-slate-600 file:mr-3 file:py-1.5 file:px-3 file:rounded-xl file:border-0 file:text-xs file:font-bold file:bg-slate-900 file:text-white hover:file:bg-slate-800 cursor-pointer"> <input type="file" name="model_file" accept=".stl,.step,.stp,.obj,.3mf,.zip" class="w-full text-xs text-slate-600 file:mr-3 file:py-1 file:px-2.5 file:rounded-lg file:border-0 file:text-xs file:font-medium file:bg-slate-900 file:text-white hover:file:bg-slate-800 cursor-pointer">
<span class="text-[10px] text-slate-400 block mt-1">Maximale bestandsgrootte: 50MB</span> <span class="text-[10px] text-slate-400 block mt-1">Tot 50 MB per bestand</span>
</div> </div>
<!-- Of URL --> <!-- Of URL -->
<div class="p-4 rounded-2xl bg-slate-50 border border-slate-200/80 hover:border-slate-300 transition"> <div class="p-4 rounded-xl bg-slate-50 border border-slate-200 hover:border-slate-300 transition">
<label class="block text-xs font-bold text-slate-800 mb-1 flex items-center space-x-1.5"> <label class="block text-xs font-semibold text-slate-800 mb-1 flex items-center space-x-1.5">
<i data-lucide="link" class="w-3.5 h-3.5 text-rose-500"></i> <i data-lucide="link" class="w-3.5 h-3.5 text-slate-500"></i>
<span>Of plak een MakerWorld / Printables link</span> <span>Of plak een MakerWorld / Printables link</span>
</label> </label>
<input type="url" name="model_url" placeholder="https://makerworld.com/nl/models/..." class="w-full bg-white border border-slate-200 rounded-xl px-3 py-2 text-xs font-medium placeholder-slate-400 focus:outline-none focus:ring-1 focus:ring-rose-400"> <input type="url" name="model_url" placeholder="https://makerworld.com/nl/models/..." class="w-full bg-white border border-slate-200 rounded-lg px-3 py-1.5 text-xs text-slate-900 placeholder-slate-400 focus:outline-none focus:ring-1 focus:ring-slate-900">
<span class="text-[10px] text-slate-400 block mt-1">Wij downloaden en inspecteren het bestand</span> <span class="text-[10px] text-slate-400 block mt-1">Wij halen de specificaties automatisch op</span>
</div> </div>
</div> </div>
<div> <div class="space-y-1">
<label class="block text-xs font-bold text-slate-700 mb-1">Omschrijving of modelnaam (optioneel)</label> <label class="block text-xs font-medium text-slate-700">Omschrijving of modelnaam (optioneel)</label>
<input type="text" name="model_name" placeholder="Bijv. Pikachu sleutelhanger of Fidget Toy" class="w-full bg-slate-50 border border-slate-200 rounded-xl px-3 py-2 text-xs font-medium text-slate-800 focus:bg-white focus:outline-none"> <input type="text" name="model_name" placeholder="Bijv. Bureau organizer of vervangend tandwiel" class="w-full bg-slate-50 border border-slate-200 rounded-xl px-3 py-2 text-xs text-slate-900 focus:bg-white focus:outline-none focus:ring-1 focus:ring-slate-900">
</div> </div>
</div> </div>
<!-- 2. Formaat & Afmeting --> <!-- 2. Formaat & Afmeting -->
<div class="space-y-3"> <div class="space-y-3">
<div class="border-b border-slate-100 pb-2"> <div class="border-b border-slate-100 pb-2">
<h3 class="font-heading text-base font-black text-slate-900"> <h3 class="text-xs font-bold text-slate-900 uppercase tracking-wider">
<span>2. Formaat en schaal selecteren</span> 2. Formaat en schaal selecteren
</h3> </h3>
</div> </div>
@@ -125,57 +125,57 @@
<button <button
type="button" type="button"
@click="selectedSize = 'klein'" @click="selectedSize = 'klein'"
:class="selectedSize === 'klein' ? 'border-amber-400 bg-amber-50 ring-2 ring-amber-400 font-bold' : 'border-slate-200 hover:bg-slate-50 font-semibold'" :class="selectedSize === 'klein' ? 'border-slate-900 bg-slate-50 ring-1 ring-slate-900 font-semibold' : 'border-slate-200 hover:bg-slate-50 font-normal'"
class="p-4 rounded-2xl border text-left transition cursor-pointer flex flex-col justify-between" class="p-4 rounded-xl border text-left transition cursor-pointer flex flex-col justify-between"
> >
<div> <div>
<span class="text-xs font-bold text-slate-900 block">Klein (tot 8 cm)</span> <span class="text-xs font-bold text-slate-900 block">Klein (tot 8 cm)</span>
<span class="text-[11px] text-slate-500 block mt-0.5">Sleutelhangers, miniaturen, kleine clips</span> <span class="text-[11px] text-slate-500 block mt-0.5">Sleutelhangers, clips, miniaturen</span>
</div> </div>
<span class="font-heading text-base font-black text-slate-900 mt-2 block">€ 9,95</span> <span class="text-sm font-bold text-slate-900 mt-2 block">&euro; 9,95</span>
</button> </button>
<button <button
type="button" type="button"
@click="selectedSize = 'medium'" @click="selectedSize = 'medium'"
:class="selectedSize === 'medium' ? 'border-amber-400 bg-amber-50 ring-2 ring-amber-400 font-bold' : 'border-slate-200 hover:bg-slate-50 font-semibold'" :class="selectedSize === 'medium' ? 'border-slate-900 bg-slate-50 ring-1 ring-slate-900 font-semibold' : 'border-slate-200 hover:bg-slate-50 font-normal'"
class="p-4 rounded-2xl border text-left transition cursor-pointer flex flex-col justify-between" class="p-4 rounded-xl border text-left transition cursor-pointer flex flex-col justify-between"
> >
<div> <div>
<span class="text-xs font-bold text-slate-900 block">Medium (tot 15 cm)</span> <span class="text-xs font-bold text-slate-900 block">Medium (tot 15 cm)</span>
<span class="text-[11px] text-slate-500 block mt-0.5">Figuren, plantenbakjes, bureau-organizers</span> <span class="text-[11px] text-slate-500 block mt-0.5">Figuren, bureau-organizers</span>
</div> </div>
<span class="font-heading text-base font-black text-slate-900 mt-2 block">€ 16,95</span> <span class="text-sm font-bold text-slate-900 mt-2 block">&euro; 16,95</span>
</button> </button>
<button <button
type="button" type="button"
@click="selectedSize = 'groot'" @click="selectedSize = 'groot'"
:class="selectedSize === 'groot' ? 'border-amber-400 bg-amber-50 ring-2 ring-amber-400 font-bold' : 'border-slate-200 hover:bg-slate-50 font-semibold'" :class="selectedSize === 'groot' ? 'border-slate-900 bg-slate-50 ring-1 ring-slate-900 font-semibold' : 'border-slate-200 hover:bg-slate-50 font-normal'"
class="p-4 rounded-2xl border text-left transition cursor-pointer flex flex-col justify-between" class="p-4 rounded-xl border text-left transition cursor-pointer flex flex-col justify-between"
> >
<div> <div>
<span class="text-xs font-bold text-slate-900 block">Groot (tot 22 cm)</span> <span class="text-xs font-bold text-slate-900 block">Groot (tot 22 cm)</span>
<span class="text-[11px] text-slate-500 block mt-0.5">Grote displays, cosplay props, vazen</span> <span class="text-[11px] text-slate-500 block mt-0.5">Cosplay props, grote displays</span>
</div> </div>
<span class="font-heading text-base font-black text-slate-900 mt-2 block">€ 24,95</span> <span class="text-sm font-bold text-slate-900 mt-2 block">&euro; 24,95</span>
</button> </button>
</div> </div>
</div> </div>
<!-- 3. Materiaal & Kleur --> <!-- 3. Materiaal & Kleur -->
<div class="space-y-4"> <div class="space-y-3">
<div class="border-b border-slate-100 pb-2"> <div class="border-b border-slate-100 pb-2">
<h3 class="font-heading text-base font-black text-slate-900"> <h3 class="text-xs font-bold text-slate-900 uppercase tracking-wider">
<span>3. Materiaal en printkleur</span> 3. Materiaal en printkleur
</h3> </h3>
</div> </div>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4"> <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
<!-- Materiaal --> <!-- Materiaal -->
<div> <div class="space-y-1">
<label class="block text-xs font-bold text-slate-700 mb-1.5">Filament type</label> <label class="block text-xs font-medium text-slate-700">Filament type</label>
<select name="material" x-model="selectedMaterial" class="w-full bg-slate-50 border border-slate-200 rounded-xl px-3 py-2.5 text-xs font-bold text-slate-800 focus:bg-white focus:outline-none"> <select name="material" x-model="selectedMaterial" class="w-full bg-slate-50 border border-slate-200 rounded-xl px-3 py-2 text-xs font-medium text-slate-900 focus:bg-white focus:outline-none">
@foreach($materials as $mat) @foreach($materials as $mat)
<option value="{{ $mat->code }}">{{ $mat->name }}</option> <option value="{{ $mat->code }}">{{ $mat->name }}</option>
@endforeach @endforeach
@@ -183,57 +183,54 @@
</div> </div>
<!-- Kleur --> <!-- Kleur -->
<div> <div class="space-y-1">
<label class="block text-xs font-bold text-slate-700 mb-1.5">Printkleur: <span class="text-rose-500 font-bold" x-text="selectedColor"></span></label> <label class="block text-xs font-medium text-slate-700">Kleur: <span class="font-semibold text-slate-900" x-text="selectedColor"></span></label>
<input type="hidden" name="color" x-model="selectedColor"> <input type="hidden" name="color" x-model="selectedColor">
<div class="flex flex-wrap gap-2 pt-1"> <div class="flex flex-wrap gap-1.5 pt-1">
@foreach($colors as $c) @foreach($colors as $c)
<button <button
type="button" type="button"
@click="selectedColor = '{{ $c->name }}'" @click="selectedColor = '{{ $c->name }}'"
:class="selectedColor === '{{ $c->name }}' ? 'ring-3 ring-rose-500 ring-offset-2 scale-110' : 'hover:scale-105 border-slate-300'" :class="selectedColor === '{{ $c->name }}' ? 'ring-2 ring-slate-900 ring-offset-1' : 'hover:scale-105 border-slate-200'"
class="w-7 h-7 rounded-xl border shadow-2xs transition flex items-center justify-center cursor-pointer relative" class="w-6 h-6 rounded-full border shadow-2xs transition flex items-center justify-center cursor-pointer"
style="background-color: {{ $c->hex }};" style="background-color: {{ $c->hex }};"
title="{{ $c->name }}" title="{{ $c->name }}"
> >
<template x-if="selectedColor === '{{ $c->name }}'">
<i data-lucide="check" class="w-3.5 h-3.5 {{ in_array($c->name, ['Sneeuwwit', 'Zon Geel (Pikachu)']) ? 'text-slate-950' : 'text-white' }} stroke-[3]"></i>
</template>
</button> </button>
@endforeach @endforeach
</div> </div>
</div> </div>
</div> </div>
<div> <div class="space-y-1">
<label class="block text-xs font-bold text-slate-700 mb-1">Bijzondere instructies (optioneel)</label> <label class="block text-xs font-medium text-slate-700">Bijzondere instructies (optioneel)</label>
<textarea name="notes" rows="2" placeholder="Bijv. gewenste oriëntatie, specifieke wanddikte of infill..." class="w-full bg-slate-50 border border-slate-200 rounded-xl p-3 text-xs text-slate-800 focus:bg-white focus:outline-none"></textarea> <textarea name="notes" rows="2" placeholder="Bijv. gewenste printoriëntatie of gewenste wanddikte..." 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"></textarea>
</div> </div>
</div> </div>
<!-- 4. Prijs & Bestelknop --> <!-- 4. Prijs & Bestelknop -->
<div class="p-5 rounded-2xl bg-slate-50 border border-slate-200/80 flex flex-col sm:flex-row items-center justify-between gap-4"> <div class="p-4 rounded-xl bg-slate-50 border border-slate-200 flex flex-col sm:flex-row items-center justify-between gap-4">
<div> <div>
<span class="text-[10px] font-bold text-slate-400 uppercase tracking-wider block">Berekende Stukprijs</span> <span class="text-[10px] font-semibold text-slate-400 uppercase tracking-wider block">Berekende stukprijs</span>
<div class="flex items-baseline space-x-2"> <div class="flex items-baseline space-x-1.5">
<span class="font-heading text-3xl font-black text-slate-900">€ <span x-text="unitPrice"></span></span> <span class="text-2xl font-bold text-slate-900">&euro; <span x-text="unitPrice"></span></span>
<span class="text-xs text-slate-500">incl. btw & materiaal</span> <span class="text-xs text-slate-500">incl. btw</span>
</div> </div>
</div> </div>
<div class="flex items-center space-x-3 w-full sm:w-auto"> <div class="flex items-center space-x-3 w-full sm:w-auto">
<!-- Aantal --> <!-- Aantal -->
<div class="flex items-center border border-slate-200 rounded-xl bg-white overflow-hidden shadow-2xs"> <div class="flex items-center border border-slate-200 rounded-lg bg-white overflow-hidden">
<button type="button" @click="if (quantity > 1) quantity--" class="px-3 py-2 text-slate-700 font-bold cursor-pointer text-sm hover:bg-slate-100">-</button> <button type="button" @click="if (quantity > 1) quantity--" class="px-2.5 py-1 text-slate-600 font-bold cursor-pointer hover:bg-slate-50">-</button>
<span class="px-3 py-2 font-heading font-black text-xs text-slate-900" x-text="quantity"></span> <span class="px-2.5 py-1 text-xs font-semibold text-slate-900" x-text="quantity"></span>
<input type="hidden" name="quantity" x-model="quantity"> <input type="hidden" name="quantity" x-model="quantity">
<button type="button" @click="if (quantity < 20) quantity++" class="px-3 py-2 text-slate-700 font-bold cursor-pointer text-sm hover:bg-slate-100">+</button> <button type="button" @click="if (quantity < 20) quantity++" class="px-2.5 py-1 text-slate-600 font-bold cursor-pointer hover:bg-slate-50">+</button>
</div> </div>
<!-- Bestelknop --> <!-- Bestelknop -->
<button type="submit" class="playful-btn flex-1 sm:flex-none px-6 py-3.5 rounded-2xl bg-amber-400 hover:bg-amber-300 text-slate-950 font-black text-xs sm:text-sm shadow-xs flex items-center justify-center space-x-2 cursor-pointer"> <button type="submit" class="flex-1 sm:flex-none px-5 py-2.5 rounded-xl bg-slate-900 hover:bg-slate-800 text-white font-medium text-xs shadow-xs flex items-center justify-center space-x-1.5 transition cursor-pointer">
<i data-lucide="shopping-bag" class="w-4 h-4"></i> <i data-lucide="shopping-bag" class="w-3.5 h-3.5"></i>
<span>In Winkelwagen • € <span x-text="calculatedTotal"></span></span> <span>In winkelwagen &bull; &euro; <span x-text="calculatedTotal"></span></span>
</button> </button>
</div> </div>
</div> </div>
@@ -242,48 +239,48 @@
</div> </div>
<!-- TAB 2: VRIJBLIJVENDE OFFERTE (VOOR MAATWERK & ADVIES) --> <!-- TAB 2: VRIJBLIJVENDE OFFERTE -->
<div x-show="activeTab === 'offerte'" class="p-6 sm:p-10 rounded-3xl bg-white border border-slate-200/80 shadow-lg shadow-slate-200/40 space-y-6"> <div x-show="activeTab === 'offerte'" class="p-6 sm:p-8 rounded-2xl bg-white border border-slate-200/80 shadow-xs space-y-5">
<div class="border-b border-slate-100 pb-3"> <div class="border-b border-slate-100 pb-3">
<h3 class="font-heading text-lg font-black text-slate-900">Vrijblijvende Maatwerk Offerte</h3> <h3 class="text-base font-bold text-slate-900">Vrijblijvende Maatwerk Offerte</h3>
<p class="text-xs text-slate-500 mt-1">Voor grotere series, meerkleurige assemblages of speciale technische vereisten. We reageren binnen 24 uur met een passend voorstel.</p> <p class="text-xs text-slate-500 mt-0.5">Voor grotere series, multi-color assemblages of specifieke technische kunststoffen. Binnen 24 uur reactie.</p>
</div> </div>
<form action="{{ route('custom.store') }}" method="POST" enctype="multipart/form-data" class="space-y-5"> <form action="{{ route('custom.store') }}" method="POST" enctype="multipart/form-data" class="space-y-4">
@csrf @csrf
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4"> <div class="grid grid-cols-1 sm:grid-cols-2 gap-3.5">
<div> <div class="space-y-1">
<label class="block text-xs font-bold text-slate-700 uppercase tracking-wider mb-1">Naam *</label> <label class="block text-xs font-medium text-slate-700">Naam *</label>
<input type="text" name="name" required value="{{ old('name') }}" placeholder="Bijv. 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"> <input type="text" name="name" required value="{{ old('name') }}" placeholder="Jan Jansen" class="w-full bg-slate-50 border border-slate-200 rounded-xl px-3 py-2 text-xs text-slate-900 focus:bg-white focus:outline-none">
</div> </div>
<div> <div class="space-y-1">
<label class="block text-xs font-bold text-slate-700 uppercase tracking-wider mb-1">E-mailadres *</label> <label class="block text-xs font-medium text-slate-700">E-mailadres *</label>
<input type="email" name="email" required value="{{ old('email') }}" placeholder="jouw@email.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"> <input type="email" name="email" required value="{{ old('email') }}" placeholder="jouw@email.nl" class="w-full bg-slate-50 border border-slate-200 rounded-xl px-3 py-2 text-xs text-slate-900 focus:bg-white focus:outline-none">
</div> </div>
</div> </div>
<div> <div class="space-y-1">
<label class="block text-xs font-bold text-slate-700 uppercase tracking-wider mb-1">Telefoonnummer (optioneel)</label> <label class="block text-xs font-medium text-slate-700">Telefoonnummer (optioneel)</label>
<input type="text" name="phone" value="{{ old('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"> <input type="text" name="phone" value="{{ old('phone') }}" placeholder="06-12345678" class="w-full bg-slate-50 border border-slate-200 rounded-xl px-3 py-2 text-xs text-slate-900 focus:bg-white focus:outline-none">
</div> </div>
<div> <div class="space-y-1">
<label class="block text-xs font-bold text-slate-700 uppercase tracking-wider mb-1">3D Model Bestand (.stl, .step, .obj, .zip)</label> <label class="block text-xs font-medium text-slate-700">3D Model Bestand (.stl, .step, .obj, .zip)</label>
<div class="p-6 border-2 border-dashed border-slate-200 hover:border-slate-300 rounded-2xl bg-slate-50/60 text-center transition"> <div class="p-5 border border-dashed border-slate-200 hover:border-slate-300 rounded-xl bg-slate-50/50 text-center transition">
<input type="file" name="model_file" accept=".stl,.step,.stp,.obj,.3mf,.zip" class="w-full text-xs text-slate-500 file:mr-4 file:py-2 file:px-4 file:rounded-xl file:border-0 file:text-xs file:font-bold file:bg-slate-900 file:text-white hover:file:bg-slate-800 cursor-pointer"> <input type="file" name="model_file" accept=".stl,.step,.stp,.obj,.3mf,.zip" class="w-full text-xs text-slate-500 file:mr-3 file:py-1.5 file:px-3 file:rounded-lg file:border-0 file:text-xs file:font-medium file:bg-slate-900 file:text-white hover:file:bg-slate-800 cursor-pointer">
<p class="text-[11px] text-slate-400 mt-2">Ondersteunde formaten: STL, STEP, OBJ, 3MF of ZIP (max 50 MB)</p> <p class="text-[10px] text-slate-400 mt-1.5">STL, STEP, OBJ, 3MF of ZIP (max 50 MB)</p>
</div> </div>
</div> </div>
<div> <div class="space-y-1">
<label class="block text-xs font-bold text-slate-700 uppercase tracking-wider mb-1">Toelichting, Afmetingen & Aantal *</label> <label class="block text-xs font-medium text-slate-700">Toelichting, Afmetingen & Aantal *</label>
<textarea name="description" rows="4" required placeholder="Vermeld eventuele gewenste afmetingen, aantal en toepassing..." class="w-full bg-slate-50 border border-slate-200 rounded-xl p-3.5 text-xs text-slate-900 focus:bg-white focus:outline-none"></textarea> <textarea name="description" rows="3" required placeholder="Vermeld eventuele gewenste afmetingen, aantal stuks en gewenste mechanische sterkte..." 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"></textarea>
</div> </div>
<button type="submit" class="playful-btn w-full py-4 rounded-2xl bg-slate-900 hover:bg-slate-800 text-white font-black text-xs uppercase tracking-wider transition shadow-sm flex items-center justify-center space-x-2 cursor-pointer"> <button type="submit" class="w-full py-2.5 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-1.5 cursor-pointer">
<i data-lucide="send" class="w-4 h-4"></i> <i data-lucide="send" class="w-3.5 h-3.5"></i>
<span>Aanvraag Verzenden</span> <span>Aanvraag Verzenden</span>
</button> </button>
</form> </form>
@@ -291,4 +288,3 @@
</div> </div>
@endsection @endsection
resources/views/shop/index.blade.php
+152 -176
View File
@@ -3,62 +3,62 @@
@section('title', setting('site_name', 'Jouwdriedee.nl') . ' | ' . setting('site_tagline', 'Kleurrijke 3D Prints, Fidget Toys & Collectibles')) @section('title', setting('site_name', 'Jouwdriedee.nl') . ' | ' . setting('site_tagline', 'Kleurrijke 3D Prints, Fidget Toys & Collectibles'))
@section('content') @section('content')
<!-- Hero Section (Subtiel, Vriendelijk, Kleurrijk) --> <!-- Hero Section (Fris, Subtiel, Modern & Ruimtelijk) -->
<section class="relative overflow-hidden bg-gradient-to-b from-amber-50/40 via-white to-[#FAF9F6] pt-8 pb-12 sm:pt-14 sm:pb-18 border-b border-slate-200/60"> <section class="relative overflow-hidden pt-10 pb-16 sm:pt-16 sm:pb-24 border-b border-slate-100 bg-gradient-to-b from-slate-50/60 to-white">
<div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid grid-cols-1 lg:grid-cols-12 gap-8 lg:gap-12 items-center"> <div class="grid grid-cols-1 lg:grid-cols-12 gap-12 lg:gap-16 items-center">
<!-- Left Hero Content --> <!-- Left Hero Content -->
<div class="lg:col-span-7 space-y-4 sm:space-y-6 text-center lg:text-left"> <div class="lg:col-span-7 space-y-6 text-center lg:text-left">
<div class="inline-flex items-center space-x-2 px-3.5 py-1.5 rounded-full bg-white border border-slate-200/80 shadow-xs text-slate-800 text-xs font-semibold"> <div class="inline-flex items-center space-x-2 px-3 py-1 rounded-full bg-white border border-slate-200/80 text-slate-700 text-xs font-medium shadow-2xs">
<span class="w-2 h-2 rounded-full bg-emerald-500 animate-pulse"></span> <span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span>
<span>{{ setting('hero_badge', 'Nederlandse 3D Printstudio • Bambu Lab Precisie') }}</span> <span>{{ setting('hero_badge', 'Nederlandse 3D Printstudio • Bambu Lab Precisie') }}</span>
</div> </div>
<h1 class="font-heading text-3xl sm:text-5xl lg:text-6xl font-black tracking-tight text-slate-900 leading-[1.15]"> <h1 class="font-heading text-4xl sm:text-6xl font-extrabold tracking-tight text-slate-900 leading-[1.08]">
{!! nl2br(e(setting('hero_title', 'Kleurrijke 3D prints, fidget toys & collectibles.'))) !!} {!! nl2br(e(setting('hero_title', 'Kleurrijke 3D prints, fidget toys & collectibles.'))) !!}
</h1> </h1>
<p class="text-sm sm:text-base text-slate-600 max-w-xl mx-auto lg:mx-0 font-normal leading-relaxed"> <p class="text-base sm:text-lg text-slate-500 max-w-xl mx-auto lg:mx-0 font-normal leading-relaxed">
{{ setting('hero_subtitle', 'Van soepel bewegende kristaldraken en geometrische Pokémon planters tot filmprops op schaal. Haarscherp geprint in hoogwaardig Bio-PLA+, stevig PETG of flexibel TPU in jouw favoriete kleur!') }} {{ setting('hero_subtitle', 'Van soepel bewegende kristaldraken en geometrische Pokémon planters tot filmprops op schaal. Haarscherp geprint in hoogwaardig Bio-PLA+, stevig PETG of flexibel TPU in jouw favoriete kleur!') }}
</p> </p>
<!-- Action CTA's --> <!-- Clean Minimal CTAs -->
<div class="flex flex-col sm:flex-row items-center justify-center lg:justify-start gap-3 pt-2"> <div class="flex flex-col sm:flex-row items-center justify-center lg:justify-start gap-3 pt-1">
<a href="{{ setting('hero_primary_btn_url', route('catalog')) }}" class="w-full sm:w-auto px-7 py-3.5 rounded-2xl bg-amber-400 hover:bg-amber-300 text-slate-950 font-bold text-sm flex items-center justify-center space-x-2 transition shadow-xs"> <a href="{{ setting('hero_primary_btn_url', route('catalog')) }}" class="w-full sm:w-auto px-6 py-3 rounded-xl bg-slate-900 hover:bg-slate-800 text-white font-medium text-sm flex items-center justify-center space-x-2 transition shadow-xs">
<span>{{ setting('hero_primary_btn_text', 'Bekijk de Collectie') }}</span> <span>{{ setting('hero_primary_btn_text', 'Bekijk de Collectie') }}</span>
<i data-lucide="arrow-right" class="w-4 h-4"></i> <i data-lucide="arrow-right" class="w-4 h-4"></i>
</a> </a>
<a href="{{ setting('hero_secondary_btn_url', route('catalog', ['category' => 'fidget-toys'])) }}" class="w-full sm:w-auto px-6 py-3.5 rounded-2xl bg-violet-50 hover:bg-violet-100 text-violet-900 font-bold text-sm flex items-center justify-center space-x-2 transition border border-violet-200/50"> <a href="{{ setting('hero_secondary_btn_url', route('catalog', ['category' => 'fidget-toys'])) }}" class="w-full sm:w-auto px-5 py-3 rounded-xl text-slate-700 hover:text-slate-900 hover:bg-slate-100 font-medium text-sm flex items-center justify-center space-x-2 transition">
<span>{{ setting('hero_secondary_btn_text', 'Fidget Toys & Slugs') }}</span> <span>{{ setting('hero_secondary_btn_text', 'Fidget Toys & Slugs') }}</span>
<i data-lucide="sparkles" class="w-4 h-4 text-violet-600"></i> <i data-lucide="sparkles" class="w-4 h-4 text-slate-400"></i>
</a> </a>
</div> </div>
<!-- Technische specificaties / Kwaliteitsbadges --> <!-- Sleek Micro Spec Badges -->
<div class="pt-4 grid grid-cols-3 gap-2 sm:gap-4 max-w-md mx-auto lg:mx-0"> <div class="pt-6 border-t border-slate-200/60 grid grid-cols-3 gap-4 max-w-md mx-auto lg:mx-0 text-left">
<div class="p-3 bg-white border border-slate-200/70 rounded-2xl shadow-xs text-center"> <div>
<div class="text-base sm:text-xl font-black text-slate-900 font-heading"> <div class="text-base sm:text-lg font-bold text-slate-900">
{{ setting('hero_stat_1_val', '0.12 mm') }} {{ setting('hero_stat_1_val', '0.12 mm') }}
</div> </div>
<div class="text-[10px] sm:text-[11px] font-semibold text-slate-500 mt-0.5"> <div class="text-[11px] text-slate-400 font-normal mt-0.5">
{{ setting('hero_stat_1_lbl', 'Minimale laaghoogte') }} {{ setting('hero_stat_1_lbl', 'Minimale laaghoogte') }}
</div> </div>
</div> </div>
<div class="p-3 bg-white border border-slate-200/70 rounded-2xl shadow-xs text-center"> <div>
<div class="text-base sm:text-xl font-black text-slate-900 font-heading"> <div class="text-base sm:text-lg font-bold text-slate-900">
{{ setting('hero_stat_2_val', 'Bambu Lab') }} {{ setting('hero_stat_2_val', 'Bambu Lab') }}
</div> </div>
<div class="text-[10px] sm:text-[11px] font-semibold text-slate-500 mt-0.5"> <div class="text-[11px] text-slate-400 font-normal mt-0.5">
{{ setting('hero_stat_2_lbl', 'X1-Carbon Precisie') }} {{ setting('hero_stat_2_lbl', 'X1-Carbon Precisie') }}
</div> </div>
</div> </div>
<div class="p-3 bg-white border border-slate-200/70 rounded-2xl shadow-xs text-center"> <div>
<div class="text-base sm:text-xl font-black text-slate-900 font-heading"> <div class="text-base sm:text-lg font-bold text-slate-900">
{{ setting('hero_stat_3_val', '2-3 Dagen') }} {{ setting('hero_stat_3_val', '2-3 Dagen') }}
</div> </div>
<div class="text-[10px] sm:text-[11px] font-semibold text-slate-500 mt-0.5"> <div class="text-[11px] text-slate-400 font-normal mt-0.5">
{{ setting('hero_stat_3_lbl', 'Verzending via PostNL') }} {{ setting('hero_stat_3_lbl', 'Verzending via PostNL') }}
</div> </div>
</div> </div>
@@ -66,41 +66,29 @@
</div> </div>
<!-- Right Hero Card / Werkelijke 3D Print Productfoto --> <!-- Right Hero Card: Frameless Editorial Showcase -->
<div class="lg:col-span-5 relative"> <div class="lg:col-span-5 relative">
<div class="relative rounded-3xl bg-white p-3 sm:p-4 border border-slate-200/80 shadow-md"> <div class="relative rounded-3xl overflow-hidden bg-slate-100 shadow-xl shadow-slate-900/5 aspect-4/3 sm:aspect-square group border border-slate-200/60">
<img
<div class="absolute top-5 right-5 bg-white/95 backdrop-blur-xs text-amber-900 border border-amber-200/80 font-bold text-[10px] sm:text-xs px-3 py-1 rounded-full shadow-xs z-10"> src="/images/products/crystal-dragon.jpg"
{{ setting('hero_card_badge', 'Meest gekozen print') }} alt="Articulated Kristaldraak 3D Print"
</div> class="w-full h-full object-cover object-center group-hover:scale-102 transition-transform duration-700 ease-out"
>
<div class="relative h-64 sm:h-84 rounded-2xl overflow-hidden bg-slate-100"> <!-- Minimalist Floating Pill -->
<img <div class="absolute bottom-4 left-4 right-4 p-3 rounded-2xl bg-white/90 backdrop-blur-md border border-white/40 shadow-sm flex items-center justify-between">
src="/images/products/crystal-dragon.jpg" <div>
alt="Articulated Kristaldraak 3D Print" <span class="text-[10px] font-semibold uppercase tracking-wider text-slate-400 block">Uitgelicht</span>
class="w-full h-full object-cover object-center hover:scale-105 transition-transform duration-500" <h3 class="font-heading font-bold text-slate-900 text-xs sm:text-sm">Articulated Kristaldraak</h3>
> </div>
<div class="text-right">
<div class="absolute bottom-2.5 left-2.5 right-2.5 p-3 rounded-xl bg-white/95 backdrop-blur-xs border border-slate-200/80 shadow-xs flex items-center justify-between"> <span class="text-[10px] text-slate-400 block">Vanaf</span>
<div> <span class="font-heading font-bold text-slate-900 text-xs sm:text-sm">€ 17,95</span>
<span class="text-[10px] font-bold uppercase tracking-wider text-rose-600 block">Fidget & Sensory</span>
<h3 class="font-heading font-black text-slate-900 text-xs sm:text-sm">Articulated Kristaldraak</h3>
</div>
<div class="text-right">
<span class="text-[10px] text-slate-400 block font-semibold">Vanaf</span>
<span class="font-heading font-black text-slate-900 text-xs sm:text-sm">€ 17,95</span>
</div>
</div> </div>
</div> </div>
<div class="mt-3 flex items-center justify-between text-[11px] text-slate-500 font-medium px-1"> <div class="absolute top-4 right-4 bg-slate-900/80 backdrop-blur-md text-white text-[11px] font-medium px-3 py-1 rounded-full shadow-xs">
<span class="flex items-center space-x-1.5"> {{ setting('hero_card_badge', 'Meest gekozen print') }}
<span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span>
<span>Print-in-place scharnieren</span>
</span>
<span class="flex items-center space-x-1 text-slate-600">
<span>Kleur naar keuze selecteerbaar</span>
</span>
</div> </div>
</div> </div>
</div> </div>
@@ -109,156 +97,144 @@
</div> </div>
</section> </section>
<!-- 3 Categorieën Grid (Subtiel, Warm & Vriendelijk) --> <!-- 3 Categorieën Strip (Schoon, Modern & Subtiel) -->
<section class="py-12 sm:py-16 bg-white border-b border-slate-200/60"> <section class="py-16 sm:py-20 bg-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex flex-col sm:flex-row sm:items-end justify-between mb-8 gap-2">
<div class="flex flex-col sm:flex-row sm:items-end justify-between mb-10 gap-3">
<div> <div>
<span class="text-xs font-bold uppercase tracking-wider text-amber-700"> <span class="text-xs font-semibold uppercase tracking-wider text-slate-400">
{{ setting('categories_tag', 'Collecties') }} {{ setting('categories_tag', 'Collecties') }}
</span> </span>
<h2 class="font-heading text-2xl sm:text-3xl font-black text-slate-900 tracking-tight"> <h2 class="font-heading text-2xl sm:text-3xl font-bold text-slate-900 tracking-tight mt-1">
{{ setting('categories_title', 'Ontdek per categorie') }} {{ setting('categories_title', 'Ontdek per categorie') }}
</h2> </h2>
<p class="text-xs text-slate-500 mt-1"> <p class="text-xs sm:text-sm text-slate-500 mt-1 max-w-lg">
{{ setting('categories_subtitle', 'Selecteer een categorie voor alle beschikbare modellen, formaten en kleurstalen.') }} {{ setting('categories_subtitle', 'Selecteer een categorie voor alle beschikbare modellen, formaten en kleurstalen.') }}
</p> </p>
</div> </div>
<a href="{{ route('catalog') }}" class="text-xs font-bold text-amber-700 hover:text-amber-800 flex items-center space-x-1 self-start sm:self-auto"> <a href="{{ route('catalog') }}" class="text-xs font-semibold text-slate-700 hover:text-slate-900 flex items-center space-x-1.5 self-start sm:self-auto transition">
<span>Alle prints bekijken</span> <span>Alles bekijken</span>
<i data-lucide="chevron-right" class="w-3.5 h-3.5"></i> <i data-lucide="arrow-right" class="w-3.5 h-3.5"></i>
</a> </a>
</div> </div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6"> <div class="grid grid-cols-1 md:grid-cols-3 gap-6 sm:gap-8">
<!-- 1. Fidget Toys --> <!-- 1. Fidget Toys -->
<a href="{{ route('catalog', ['category' => 'fidget-toys']) }}" class="rounded-3xl bg-[#FAF7FD] border border-violet-100 hover:border-violet-200 hover:shadow-md transition-all duration-300 overflow-hidden group shadow-xs flex flex-col justify-between"> <a href="{{ route('catalog', ['category' => 'fidget-toys']) }}" class="group block">
<div class="h-48 overflow-hidden bg-violet-50"> <div class="aspect-4/3 rounded-2xl overflow-hidden bg-slate-100 border border-slate-200/60 transition-all duration-300 group-hover:border-slate-300 group-hover:shadow-md">
<img src="/images/categories/fidget-toys.jpg" alt="Fidget Toys 3D Prints" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"> <img src="/images/categories/fidget-toys.jpg" alt="Fidget Toys 3D Prints" class="w-full h-full object-cover group-hover:scale-103 transition-transform duration-500">
</div> </div>
<div class="p-5"> <div class="pt-3.5 space-y-1">
<span class="text-[10px] font-bold text-violet-700 uppercase tracking-wider block">Beweegbare Scharnieren</span> <div class="flex items-center justify-between">
<h3 class="font-heading text-lg font-black text-slate-900 group-hover:text-violet-700 transition">Fidget Toys & Sensory</h3> <h3 class="font-heading font-semibold text-base text-slate-900 group-hover:text-sky-600 transition">Fidget Toys & Sensory</h3>
<p class="text-xs text-slate-500 mt-1.5 line-clamp-2 leading-relaxed font-normal">Kristaldraken, wriemel-slakken en compacte folding cubes met soepel klikgeluid.</p> <i data-lucide="arrow-up-right" class="w-4 h-4 text-slate-400 group-hover:text-slate-900 group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition"></i>
<div class="mt-4 flex items-center text-xs font-bold text-violet-700 group-hover:translate-x-1 transition-transform">
<span>Bekijk collectie</span>
<i data-lucide="arrow-right" class="w-3.5 h-3.5 ml-1"></i>
</div> </div>
<p class="text-xs text-slate-500 line-clamp-1 font-normal">Kristaldraken, wriemel-slakken en compacte cubes met soepele scharnieren.</p>
</div> </div>
</a> </a>
<!-- 2. Pokémon --> <!-- 2. Pokémon -->
<a href="{{ route('catalog', ['category' => 'pokemon-3d']) }}" class="rounded-3xl bg-[#FFFBF0] border border-amber-100 hover:border-amber-200 hover:shadow-md transition-all duration-300 overflow-hidden group shadow-xs flex flex-col justify-between"> <a href="{{ route('catalog', ['category' => 'pokemon-3d']) }}" class="group block">
<div class="h-48 overflow-hidden bg-amber-50"> <div class="aspect-4/3 rounded-2xl overflow-hidden bg-slate-100 border border-slate-200/60 transition-all duration-300 group-hover:border-slate-300 group-hover:shadow-md">
<img src="/images/categories/pokemon-3d.jpg" alt="Pokémon 3D Prints" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"> <img src="/images/categories/pokemon-3d.jpg" alt="Pokémon 3D Prints" class="w-full h-full object-cover group-hover:scale-103 transition-transform duration-500">
</div> </div>
<div class="p-5"> <div class="pt-3.5 space-y-1">
<span class="text-[10px] font-bold text-amber-700 uppercase tracking-wider block">Gedetailleerde Figuren</span> <div class="flex items-center justify-between">
<h3 class="font-heading text-lg font-black text-slate-900 group-hover:text-amber-700 transition">Pokémon 3D Prints</h3> <h3 class="font-heading font-semibold text-base text-slate-900 group-hover:text-sky-600 transition">Pokémon 3D Prints</h3>
<p class="text-xs text-slate-500 mt-1.5 line-clamp-2 leading-relaxed font-normal">Low-poly Pikachu planters, beweegbare Charizard, sluitende Pokéballs en Gengar.</p> <i data-lucide="arrow-up-right" class="w-4 h-4 text-slate-400 group-hover:text-slate-900 group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition"></i>
<div class="mt-4 flex items-center text-xs font-bold text-amber-800 group-hover:translate-x-1 transition-transform">
<span>Bekijk collectie</span>
<i data-lucide="arrow-right" class="w-3.5 h-3.5 ml-1"></i>
</div> </div>
<p class="text-xs text-slate-500 line-clamp-1 font-normal">Pikachu planters, beweegbare Charizard, Pokéballs en Gengar figuren.</p>
</div> </div>
</a> </a>
<!-- 3. Film & Gaming --> <!-- 3. Film & Gaming -->
<a href="{{ route('catalog', ['category' => 'film-popculture']) }}" class="rounded-3xl bg-[#FFF5F5] border border-rose-100 hover:border-rose-200 hover:shadow-md transition-all duration-300 overflow-hidden group shadow-xs flex flex-col justify-between"> <a href="{{ route('catalog', ['category' => 'film-popculture']) }}" class="group block">
<div class="h-48 overflow-hidden bg-rose-50"> <div class="aspect-4/3 rounded-2xl overflow-hidden bg-slate-100 border border-slate-200/60 transition-all duration-300 group-hover:border-slate-300 group-hover:shadow-md">
<img src="/images/categories/film-popculture.jpg" alt="Film & Gaming 3D Prints" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"> <img src="/images/categories/film-popculture.jpg" alt="Film & Gaming 3D Prints" class="w-full h-full object-cover group-hover:scale-103 transition-transform duration-500">
</div> </div>
<div class="p-5"> <div class="pt-3.5 space-y-1">
<span class="text-[10px] font-bold text-rose-600 uppercase tracking-wider block">Collectibles & Display</span> <div class="flex items-center justify-between">
<h3 class="font-heading text-lg font-black text-slate-900 group-hover:text-rose-600 transition">Film, Gaming & Props</h3> <h3 class="font-heading font-semibold text-base text-slate-900 group-hover:text-sky-600 transition">Film, Gaming & Props</h3>
<p class="text-xs text-slate-500 mt-1.5 line-clamp-2 leading-relaxed font-normal">Lightsaber standaarden, Thor Mjolnir bureau-organizers en gedetailleerde figuren.</p> <i data-lucide="arrow-up-right" class="w-4 h-4 text-slate-400 group-hover:text-slate-900 group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition"></i>
<div class="mt-4 flex items-center text-xs font-bold text-rose-600 group-hover:translate-x-1 transition-transform">
<span>Bekijk collectie</span>
<i data-lucide="arrow-right" class="w-3.5 h-3.5 ml-1"></i>
</div> </div>
<p class="text-xs text-slate-500 line-clamp-1 font-normal">Lightsaber displays, Mjolnir desk organizers en iconische filmfiguren.</p>
</div> </div>
</a> </a>
</div> </div>
</div> </div>
</section> </section>
<!-- Uitgelichte Prints Showcase (Subtiel & Vriendelijk) --> <!-- Uitgelichte Prints Showcase (Crisp & Modern Grid) -->
<section class="py-12 sm:py-16 bg-[#FAF9F6]"> <section class="py-16 sm:py-20 bg-slate-50/50 border-t border-slate-100">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex flex-col sm:flex-row sm:items-end justify-between mb-8 gap-3">
<div class="flex flex-col sm:flex-row sm:items-end justify-between mb-10 gap-3">
<div> <div>
<span class="text-xs font-bold uppercase tracking-wider text-amber-700"> <span class="text-xs font-semibold uppercase tracking-wider text-slate-400">
{{ setting('featured_tag', 'Selectie') }} {{ setting('featured_tag', 'Selectie') }}
</span> </span>
<h2 class="font-heading text-2xl sm:text-3xl font-black text-slate-900 tracking-tight"> <h2 class="font-heading text-2xl sm:text-3xl font-bold text-slate-900 tracking-tight mt-1">
{{ setting('featured_title', 'Populaire modellen') }} {{ setting('featured_title', 'Populaire modellen') }}
</h2> </h2>
<p class="text-xs text-slate-500 mt-1"> <p class="text-xs sm:text-sm text-slate-500 mt-1">
{{ setting('featured_subtitle', 'Elk item wordt op bestelling geprint in jouw gewenste kleur en met de hand nagekeken.') }} {{ setting('featured_subtitle', 'Elk item wordt op bestelling geprint in jouw gewenste kleur en met de hand nagekeken.') }}
</p> </p>
</div> </div>
<a href="{{ route('catalog') }}" class="px-4 py-2 rounded-xl bg-white border border-slate-200 text-slate-700 text-xs font-bold hover:bg-slate-50 transition flex items-center space-x-1.5 self-start sm:self-auto shadow-xs"> <a href="{{ route('catalog') }}" class="px-4 py-2 rounded-lg bg-white border border-slate-200 text-slate-700 text-xs font-medium hover:bg-slate-50 transition flex items-center space-x-1.5 self-start sm:self-auto shadow-2xs">
<span>Volledige catalogus</span> <span>Volledige catalogus</span>
<i data-lucide="arrow-right" class="w-3.5 h-3.5"></i> <i data-lucide="arrow-right" class="w-3.5 h-3.5"></i>
</a> </a>
</div> </div>
<!-- 2 Kolommen mobiel, 3 op desktop --> <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 sm:gap-6">
<div class="grid grid-cols-2 md:grid-cols-3 gap-3 sm:gap-6">
@foreach($featuredProducts as $product) @foreach($featuredProducts as $product)
<div class="rounded-2xl sm:rounded-3xl bg-white border border-slate-200/80 shadow-xs hover:shadow-md transition-all duration-200 overflow-hidden flex flex-col justify-between group"> <div class="group flex flex-col justify-between bg-white rounded-2xl p-3 border border-slate-200/60 card-hover">
<!-- Afbeelding & Categorie Badge --> <div>
<div class="relative h-44 sm:h-60 overflow-hidden bg-slate-100"> <!-- Product Photo Frame -->
<img <div class="relative aspect-square rounded-xl overflow-hidden bg-slate-50">
src="{{ $product->image_url }}" <img
alt="{{ $product->name }}" src="{{ $product->image_url }}"
class="w-full h-full object-cover object-center group-hover:scale-105 transition-transform duration-500" alt="{{ $product->name }}"
loading="lazy" class="w-full h-full object-cover object-center group-hover:scale-103 transition-transform duration-500 ease-out"
> loading="lazy"
@if($product->category) >
<div class="absolute top-2 left-2 sm:top-3 sm:left-3"> @if($product->category)
<span class="px-2 py-0.5 sm:px-2.5 sm:py-1 rounded-md bg-white/95 backdrop-blur-xs text-slate-800 text-[9px] sm:text-[10px] font-bold shadow-xs border border-slate-200/60"> <div class="absolute top-2 left-2">
{{ $product->category->name }} <span class="px-2 py-0.5 rounded-md bg-white/90 backdrop-blur-xs text-slate-700 text-[10px] font-medium border border-slate-200/50 shadow-2xs">
</span> {{ $product->category->name }}
</div> </span>
@endif </div>
@endif
</div>
@if($product->print_time_hours) <!-- Product Info -->
<div class="hidden sm:flex absolute bottom-2.5 left-2.5 px-2 py-0.5 rounded-md bg-white/95 backdrop-blur-xs text-slate-700 border border-slate-200/60 text-[10px] font-medium items-center space-x-1 shadow-xs"> <div class="pt-3 pb-1">
<i data-lucide="clock" class="w-3 h-3 text-sky-600"></i> <h3 class="font-heading text-xs sm:text-sm font-semibold text-slate-900 group-hover:text-sky-600 transition line-clamp-1">
<span>{{ $product->print_time_hours }}u printtijd</span>
</div>
@endif
</div>
<!-- Inhoud -->
<div class="p-3.5 sm:p-5 flex-1 flex flex-col justify-between space-y-3">
<div>
<h3 class="font-heading text-xs sm:text-base font-black text-slate-900 group-hover:text-amber-700 transition tracking-tight line-clamp-2">
<a href="{{ route('product.show', $product->slug) }}"> <a href="{{ route('product.show', $product->slug) }}">
{{ $product->name }} {{ $product->name }}
</a> </a>
</h3> </h3>
<p class="hidden sm:block text-xs text-slate-500 mt-1 line-clamp-2 leading-relaxed font-normal"> <p class="text-[11px] text-slate-400 mt-0.5 line-clamp-1 font-normal">
{{ $product->short_description }} {{ $product->short_description }}
</p> </p>
</div> </div>
</div>
<!-- Footer met prijs & actieknop --> <!-- Footer: Price & Direct Link -->
<div class="pt-2 sm:pt-3 border-t border-slate-100 flex items-center justify-between"> <div class="pt-2 border-t border-slate-100 flex items-center justify-between mt-2">
<div> <div>
<span class="text-[9px] sm:text-[10px] text-slate-400 font-bold uppercase block">Vanaf</span> <span class="text-[10px] text-slate-400 block font-normal leading-none">Vanaf</span>
<span class="font-heading text-sm sm:text-lg font-black text-slate-900"> <span class="font-heading text-sm font-bold text-slate-900">
{{ $product->formatted_price }} {{ $product->formatted_price }}
</span> </span>
</div>
<a href="{{ route('product.show', $product->slug) }}" class="px-3 sm:px-3.5 py-1.5 sm:py-2 rounded-xl bg-amber-400 hover:bg-amber-300 text-slate-950 text-[10px] sm:text-xs font-bold transition flex items-center space-x-1 shadow-xs">
<span>Kies Kleur</span>
<i data-lucide="chevron-right" class="w-3 h-3"></i>
</a>
</div> </div>
<a href="{{ route('product.show', $product->slug) }}" class="px-2.5 py-1.5 rounded-lg bg-slate-900 hover:bg-slate-800 text-white text-[11px] font-medium transition flex items-center space-x-1 cursor-pointer">
<span>Kies kleur</span>
<i data-lucide="chevron-right" class="w-3 h-3"></i>
</a>
</div> </div>
</div> </div>
@@ -267,29 +243,29 @@
</div> </div>
</section> </section>
<!-- Subtiele Kwaliteits & Voordelen Banner (Aanpasbaar via Admin) --> <!-- Subtiele USP's (Puur, Wit & Ruimtelijk) -->
<section class="py-12 sm:py-16 bg-white border-t border-slate-200/60"> <section class="py-16 sm:py-20 bg-white border-t border-slate-100">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center max-w-2xl mx-auto mb-10"> <div class="text-center max-w-xl mx-auto mb-14">
<span class="text-xs font-bold uppercase tracking-wider text-amber-700"> <span class="text-xs font-semibold uppercase tracking-wider text-slate-400">
{{ setting('usp_tag', 'Waarom Jouwdriedee.nl?') }} {{ setting('usp_tag', 'Waarom Jouwdriedee.nl?') }}
</span> </span>
<h2 class="font-heading text-2xl sm:text-3xl font-black text-slate-900 tracking-tight mt-1"> <h2 class="font-heading text-2xl sm:text-3xl font-bold text-slate-900 tracking-tight mt-1">
{{ setting('usp_title', 'Kwaliteit en passie in elke printlaag') }} {{ setting('usp_title', 'Kwaliteit en passie in elke printlaag') }}
</h2> </h2>
<p class="text-xs sm:text-sm text-slate-500 mt-2 leading-relaxed font-normal"> <p class="text-xs sm:text-sm text-slate-500 mt-2 font-normal leading-relaxed">
{{ setting('usp_subtitle', 'Geen vage levertijden of ruwe prints. Elk model wordt in eigen werkplaats gekalibreerd, geprint en gecontroleerd voordat het veilig verpakt op de post gaat.') }} {{ setting('usp_subtitle', 'Geen vage levertijden of ruwe prints. Elk model wordt in eigen werkplaats gekalibreerd, geprint en gecontroleerd voordat het veilig verpakt op de post gaat.') }}
</p> </p>
</div> </div>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-6"> <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
<!-- Feature 1 --> <!-- USP 1 -->
<div class="p-5 rounded-3xl bg-[#FAF7FD] border border-violet-100 text-left space-y-2"> <div class="space-y-2">
<div class="w-10 h-10 rounded-2xl bg-violet-200/60 text-violet-700 flex items-center justify-center font-black"> <div class="w-9 h-9 rounded-lg bg-slate-100 text-slate-800 flex items-center justify-center font-medium">
<i data-lucide="printer" class="w-5 h-5"></i> <i data-lucide="printer" class="w-4 h-4"></i>
</div> </div>
<h3 class="font-heading font-black text-slate-900 text-sm"> <h3 class="font-heading font-semibold text-slate-900 text-sm">
{{ setting('usp_1_title', 'Bambu Lab Precisie') }} {{ setting('usp_1_title', 'Bambu Lab Precisie') }}
</h3> </h3>
<p class="text-xs text-slate-500 leading-relaxed font-normal"> <p class="text-xs text-slate-500 leading-relaxed font-normal">
@@ -297,12 +273,12 @@
</p> </p>
</div> </div>
<!-- Feature 2 --> <!-- USP 2 -->
<div class="p-5 rounded-3xl bg-[#FFFBF0] border border-amber-100 text-left space-y-2"> <div class="space-y-2">
<div class="w-10 h-10 rounded-2xl bg-amber-200/60 text-amber-800 flex items-center justify-center font-black"> <div class="w-9 h-9 rounded-lg bg-slate-100 text-slate-800 flex items-center justify-center font-medium">
<i data-lucide="palette" class="w-5 h-5"></i> <i data-lucide="palette" class="w-4 h-4"></i>
</div> </div>
<h3 class="font-heading font-black text-slate-900 text-sm"> <h3 class="font-heading font-semibold text-slate-900 text-sm">
{{ setting('usp_2_title', '16+ Kleurvariaties') }} {{ setting('usp_2_title', '16+ Kleurvariaties') }}
</h3> </h3>
<p class="text-xs text-slate-500 leading-relaxed font-normal"> <p class="text-xs text-slate-500 leading-relaxed font-normal">
@@ -310,12 +286,12 @@
</p> </p>
</div> </div>
<!-- Feature 3 --> <!-- USP 3 -->
<div class="p-5 rounded-3xl bg-[#F0FDF4] border border-emerald-100 text-left space-y-2"> <div class="space-y-2">
<div class="w-10 h-10 rounded-2xl bg-emerald-200/60 text-emerald-800 flex items-center justify-center font-black"> <div class="w-9 h-9 rounded-lg bg-slate-100 text-slate-800 flex items-center justify-center font-medium">
<i data-lucide="shield-check" class="w-5 h-5"></i> <i data-lucide="shield-check" class="w-4 h-4"></i>
</div> </div>
<h3 class="font-heading font-black text-slate-900 text-sm"> <h3 class="font-heading font-semibold text-slate-900 text-sm">
{{ setting('usp_3_title', 'Veilig & Duurzaam PLA+') }} {{ setting('usp_3_title', 'Veilig & Duurzaam PLA+') }}
</h3> </h3>
<p class="text-xs text-slate-500 leading-relaxed font-normal"> <p class="text-xs text-slate-500 leading-relaxed font-normal">
@@ -323,12 +299,12 @@
</p> </p>
</div> </div>
<!-- Feature 4 --> <!-- USP 4 -->
<div class="p-5 rounded-3xl bg-[#EFF6FF] border border-sky-100 text-left space-y-2"> <div class="space-y-2">
<div class="w-10 h-10 rounded-2xl bg-sky-200/60 text-sky-800 flex items-center justify-center font-black"> <div class="w-9 h-9 rounded-lg bg-slate-100 text-slate-800 flex items-center justify-center font-medium">
<i data-lucide="truck" class="w-5 h-5"></i> <i data-lucide="truck" class="w-4 h-4"></i>
</div> </div>
<h3 class="font-heading font-black text-slate-900 text-sm"> <h3 class="font-heading font-semibold text-slate-900 text-sm">
{{ setting('usp_4_title', 'Snelle Verzending') }} {{ setting('usp_4_title', 'Snelle Verzending') }}
</h3> </h3>
<p class="text-xs text-slate-500 leading-relaxed font-normal"> <p class="text-xs text-slate-500 leading-relaxed font-normal">
@@ -337,10 +313,10 @@
</div> </div>
</div> </div>
<div class="mt-8 text-center"> <div class="mt-12 text-center">
<a href="{{ route('catalog') }}" class="inline-flex items-center space-x-2 px-6 py-3 rounded-2xl bg-amber-400 hover:bg-amber-300 text-slate-950 font-bold text-xs transition shadow-xs"> <a href="{{ route('catalog') }}" class="inline-flex items-center space-x-2 px-5 py-2.5 rounded-xl bg-slate-100 hover:bg-slate-200 text-slate-900 font-medium text-xs transition">
<span>{{ setting('usp_btn_text', 'Bekijk alle 3D prints in de winkel') }}</span> <span>{{ setting('usp_btn_text', 'Bekijk alle 3D prints in de winkel') }}</span>
<i data-lucide="arrow-right" class="w-4 h-4"></i> <i data-lucide="arrow-right" class="w-3.5 h-3.5"></i>
</a> </a>
</div> </div>
resources/views/shop/show.blade.php
+134 -142
View File
@@ -1,24 +1,24 @@
@extends('layouts.app') @extends('layouts.app')
@section('title', $product->name . ' 🎨 | Jouwdriedee.nl') @section('title', $product->name . ' | Jouwdriedee.nl')
@section('content') @section('content')
<!-- Breadcrumbs --> <!-- Breadcrumbs (Subtiel) -->
<div class="bg-white/80 border-b border-slate-200/60 py-2.5 sm:py-3"> <div class="border-b border-slate-100 bg-white py-3">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-xs font-semibold text-slate-500 flex items-center space-x-1.5 overflow-x-auto whitespace-nowrap"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-xs font-normal text-slate-500 flex items-center space-x-2 overflow-x-auto whitespace-nowrap">
<a href="{{ route('home') }}" class="hover:text-amber-700">Home</a> <a href="{{ route('home') }}" class="hover:text-slate-900 transition">Home</a>
<span>/</span> <span class="text-slate-300">/</span>
<a href="{{ route('catalog') }}" class="hover:text-amber-700">Catalogus</a> <a href="{{ route('catalog') }}" class="hover:text-slate-900 transition">Catalogus</a>
@if($product->category) @if($product->category)
<span>/</span> <span class="text-slate-300">/</span>
<a href="{{ route('catalog', ['category' => $product->category->slug]) }}" class="hover:text-amber-700">{{ $product->category->name }}</a> <a href="{{ route('catalog', ['category' => $product->category->slug]) }}" class="hover:text-slate-900 transition">{{ $product->category->name }}</a>
@endif @endif
<span>/</span> <span class="text-slate-300">/</span>
<span class="font-bold text-slate-900 truncate">{{ $product->name }}</span> <span class="text-slate-900 font-medium truncate">{{ $product->name }}</span>
</div> </div>
</div> </div>
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6 sm:py-10" <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 sm:py-14"
x-data="{ x-data="{
basePrice: {{ $product->base_price }}, basePrice: {{ $product->base_price }},
selectedMaterial: '{{ $product->available_materials[0] ?? 'pla' }}', selectedMaterial: '{{ $product->available_materials[0] ?? 'pla' }}',
@@ -51,10 +51,10 @@
} }
}"> }">
<div class="grid grid-cols-1 lg:grid-cols-12 gap-8 lg:gap-12"> <div class="grid grid-cols-1 lg:grid-cols-12 gap-10 lg:gap-14">
<!-- Linkerkant: Productgalerij & Specificaties --> <!-- Linkerkant: Productgalerij & Details -->
<div class="lg:col-span-6 space-y-4 sm:space-y-6"> <div class="lg:col-span-7 space-y-6">
@php @php
$gallery = []; $gallery = [];
if (!empty($product->image_url)) { if (!empty($product->image_url)) {
@@ -72,7 +72,7 @@
} }
@endphp @endphp
<!-- Productgalerij met interactieve fotokiezer --> <!-- Fotokiezer -->
<div class="space-y-3" <div class="space-y-3"
x-data="{ x-data="{
activeImage: '{{ $gallery[0] }}', activeImage: '{{ $gallery[0] }}',
@@ -92,62 +92,59 @@
} }
}"> }">
<div class="rounded-3xl bg-white border border-slate-200/80 overflow-hidden shadow-xs relative group"> <div class="rounded-2xl bg-slate-50 overflow-hidden relative group border border-slate-200/60 aspect-4/3 sm:aspect-square">
<div class="relative h-72 sm:h-96 md:h-112 bg-slate-100 flex items-center justify-center overflow-hidden"> <img
<img :src="activeImage"
:src="activeImage" alt="{{ $product->name }}"
alt="{{ $product->name }}" class="w-full h-full object-cover object-center transition-all duration-300"
class="w-full h-full object-cover object-center transition-all duration-300" >
>
@if($product->is_featured)
<div class="absolute top-3 left-3 flex flex-col gap-1.5 z-10"> <div class="absolute top-3 left-3">
@if($product->is_featured) <span class="px-2.5 py-1 rounded-md bg-white/95 backdrop-blur-xs text-slate-800 text-[11px] font-medium border border-slate-200/60 shadow-2xs">
<span class="px-3 py-1 rounded-full bg-white/95 backdrop-blur-xs text-amber-800 border border-amber-200 text-xs font-bold shadow-xs flex items-center space-x-1"> Uitgelicht
<span>★</span> </span>
<span>Populair</span> </div>
</span> @endif
@endif
<!-- Foto Counter Badge -->
@if(count($gallery) > 1)
<div class="absolute bottom-3 right-3">
<span class="px-2.5 py-1 rounded-md bg-white/90 backdrop-blur-xs text-slate-600 border border-slate-200/50 font-mono text-[11px] shadow-2xs">
<span x-text="currentIndex + 1"></span> / {{ count($gallery) }}
</span>
</div> </div>
<!-- Foto Counter Badge --> <!-- Vorige / Volgende Pijlen -->
@if(count($gallery) > 1) <button
<div class="absolute bottom-3 right-3 z-10"> type="button"
<span class="px-2.5 py-1 rounded-full bg-white/95 backdrop-blur-xs text-slate-700 border border-slate-200 font-mono text-[11px] font-bold shadow-xs"> @click="prevImage"
<span x-text="currentIndex + 1"></span> / {{ count($gallery) }} class="absolute left-3 top-1/2 -translate-y-1/2 w-8 h-8 rounded-full bg-white/90 hover:bg-white text-slate-700 shadow-sm flex items-center justify-center transition opacity-0 group-hover:opacity-100 cursor-pointer"
</span> aria-label="Vorige foto"
</div> >
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/></svg>
</button>
<!-- Vorige / Volgende Pijlen --> <button
<button type="button"
type="button" @click="nextImage"
@click="prevImage" class="absolute right-3 top-1/2 -translate-y-1/2 w-8 h-8 rounded-full bg-white/90 hover:bg-white text-slate-700 shadow-sm flex items-center justify-center transition opacity-0 group-hover:opacity-100 cursor-pointer"
class="absolute left-3 top-1/2 -translate-y-1/2 w-9 h-9 rounded-full bg-white/90 hover:bg-white text-slate-800 shadow-md flex items-center justify-center transition opacity-0 group-hover:opacity-100 focus:opacity-100 z-10" aria-label="Volgende foto"
aria-label="Vorige foto" >
> <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M15 19l-7-7 7-7"/></svg> </button>
</button> @endif
<button
type="button"
@click="nextImage"
class="absolute right-3 top-1/2 -translate-y-1/2 w-9 h-9 rounded-full bg-white/90 hover:bg-white text-slate-800 shadow-md flex items-center justify-center transition opacity-0 group-hover:opacity-100 focus:opacity-100 z-10"
aria-label="Volgende foto"
>
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M9 5l7 7-7 7"/></svg>
</button>
@endif
</div>
</div> </div>
<!-- Thumbnails Strip (indien meerdere foto's) --> <!-- Thumbnails Strip -->
@if(count($gallery) > 1) @if(count($gallery) > 1)
<div class="flex items-center space-x-2.5 overflow-x-auto pb-2"> <div class="flex items-center space-x-2 overflow-x-auto pb-1">
<template x-for="(img, idx) in images" :key="idx"> <template x-for="(img, idx) in images" :key="idx">
<button <button
type="button" type="button"
@click="selectImage(idx)" @click="selectImage(idx)"
class="relative w-16 h-16 sm:w-20 sm:h-20 rounded-2xl overflow-hidden shrink-0 border-2 transition-all duration-200 cursor-pointer" class="relative w-16 h-16 rounded-xl overflow-hidden shrink-0 border transition-all cursor-pointer"
:class="currentIndex === idx ? 'border-amber-400 ring-2 ring-amber-400/40 shadow-xs scale-105' : 'border-slate-200 opacity-60 hover:opacity-100 hover:border-slate-300'" :class="currentIndex === idx ? 'border-slate-900 ring-1 ring-slate-900 opacity-100' : 'border-slate-200 opacity-60 hover:opacity-100'"
> >
<img :src="img" alt="Thumbnail" class="w-full h-full object-cover"> <img :src="img" alt="Thumbnail" class="w-full h-full object-cover">
</button> </button>
@@ -156,86 +153,81 @@
@endif @endif
</div> </div>
<!-- Print Specificaties Card (Minder lomp, verfijnd) --> <!-- Print Specificaties Strip (Subtiel) -->
<div class="p-4 sm:p-6 rounded-2xl bg-white border border-slate-200/80 shadow-xs space-y-3"> <div class="p-5 rounded-2xl bg-slate-50/70 border border-slate-200/60 space-y-4">
<h3 class="font-heading text-xs font-black text-slate-900 uppercase tracking-wider flex items-center space-x-1.5"> <h3 class="text-xs font-semibold text-slate-900 uppercase tracking-wider">
<span>🖨️</span> Print Specificaties
<span>Print Details & Formaat</span>
</h3> </h3>
<div class="grid grid-cols-2 sm:grid-cols-4 gap-2 sm:gap-3 text-xs"> <div class="grid grid-cols-2 sm:grid-cols-4 gap-3 text-xs">
<div class="p-3 rounded-xl bg-slate-50 border border-slate-100 text-center"> <div class="p-2.5 rounded-lg bg-white border border-slate-200/50">
<span class="text-slate-400 block text-[10px] uppercase font-bold">Formaat</span> <span class="text-slate-400 block text-[10px] uppercase font-medium">Formaat</span>
<span class="font-black text-slate-800 mt-0.5 block font-heading">{{ $product->dimensions ?? 'Standaard' }}</span> <span class="font-semibold text-slate-800 mt-0.5 block">{{ $product->dimensions ?? 'Standaard' }}</span>
</div> </div>
<div class="p-3 rounded-xl bg-slate-50 border border-slate-100 text-center"> <div class="p-2.5 rounded-lg bg-white border border-slate-200/50">
<span class="text-slate-400 block text-[10px] uppercase font-bold">Gewicht</span> <span class="text-slate-400 block text-[10px] uppercase font-medium">Gewicht</span>
<span class="font-black text-slate-800 mt-0.5 block font-heading">~{{ $product->weight_grams ?? '80' }}g</span> <span class="font-semibold text-slate-800 mt-0.5 block">~{{ $product->weight_grams ?? '80' }}g</span>
</div> </div>
<div class="p-3 rounded-xl bg-slate-50 border border-slate-100 text-center"> <div class="p-2.5 rounded-lg bg-white border border-slate-200/50">
<span class="text-slate-400 block text-[10px] uppercase font-bold">Printtijd</span> <span class="text-slate-400 block text-[10px] uppercase font-medium">Printduur</span>
<span class="font-black text-slate-800 mt-0.5 block font-heading">{{ $product->print_time_hours ?? '4.0' }} u</span> <span class="font-semibold text-slate-800 mt-0.5 block">{{ $product->print_time_hours ?? '4.0' }} uur</span>
</div> </div>
<div class="p-3 rounded-xl bg-slate-50 border border-slate-100 text-center"> <div class="p-2.5 rounded-lg bg-white border border-slate-200/50">
<span class="text-slate-400 block text-[10px] uppercase font-bold">Resolutie</span> <span class="text-slate-400 block text-[10px] uppercase font-medium">Resolutie</span>
<span class="font-black text-slate-800 mt-0.5 block font-heading">0.12 - 0.16 mm</span> <span class="font-semibold text-slate-800 mt-0.5 block">0.12 - 0.16 mm</span>
</div> </div>
</div> </div>
<div class="pt-2 flex flex-col sm:flex-row items-center justify-between text-[11px] text-slate-500 font-medium border-t border-slate-100 gap-1.5"> <div class="pt-2 flex flex-col sm:flex-row items-center justify-between text-[11px] text-slate-500 font-normal border-t border-slate-200/50 gap-2">
<span class="flex items-center space-x-1"> <span class="flex items-center space-x-1.5">
<span>✨</span> <span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span>
<span>Geprint op precisie Bambu Lab printers</span> <span>Geprint op precisie Bambu Lab X1/P1 printers</span>
</span>
<span class="flex items-center space-x-1">
<span>🌱</span>
<span>Veilig & biologisch afbreekbaar PLA</span>
</span> </span>
<span>100% biologisch afbreekbaar Bio-PLA+</span>
</div> </div>
</div> </div>
<!-- Productomschrijving --> <!-- Productomschrijving -->
<div class="p-4 sm:p-6 rounded-2xl bg-white border border-slate-200/80 shadow-xs space-y-2"> <div class="p-5 rounded-2xl bg-white border border-slate-200/60 space-y-3">
<h3 class="font-heading text-sm font-black text-slate-900 flex items-center space-x-1.5"> <h3 class="text-sm font-semibold text-slate-900">
<span>📝</span> Omschrijving
<span>Over deze 3D print</span>
</h3> </h3>
<div class="text-xs text-slate-600 leading-relaxed space-y-1.5 font-normal"> <div class="text-xs text-slate-600 leading-relaxed space-y-2 font-normal">
{!! nl2br(strip_tags($product->description, '<p><br><strong><b><em><i><u><ul><ol><li><h3><h4>')) !!} {!! nl2br(strip_tags($product->description, '<p><br><strong><b><em><i><u><ul><ol><li><h3><h4>')) !!}
</div> </div>
</div> </div>
</div> </div>
<!-- Rechterkant: Interactive Configurator & Bestelmodule --> <!-- Rechterkant: Clean Configurator & Bestelmodule -->
<div class="lg:col-span-6 space-y-6"> <div class="lg:col-span-5 space-y-6">
<div class="p-5 sm:p-8 rounded-3xl bg-white border border-slate-200/80 shadow-sm space-y-5 sm:space-y-6"> <div class="p-6 sm:p-7 rounded-2xl bg-white border border-slate-200/70 shadow-xs space-y-6">
<div> <div class="space-y-1.5">
@if($product->category) @if($product->category)
<span class="inline-block px-2.5 py-0.5 rounded-full bg-amber-100 text-[10px] sm:text-xs font-bold text-amber-900 mb-1.5"> <span class="inline-block px-2.5 py-0.5 rounded-md bg-slate-100 text-[10px] font-medium text-slate-700">
{{ $product->category->name }} {{ $product->category->name }}
</span> </span>
@endif @endif
<h1 class="font-heading text-xl sm:text-3xl font-black text-slate-900 tracking-tight">{{ $product->name }}</h1> <h1 class="font-heading text-xl sm:text-2xl font-bold text-slate-900 tracking-tight">{{ $product->name }}</h1>
<p class="text-xs text-slate-500 mt-1 leading-relaxed">{{ $product->short_description }}</p> <p class="text-xs text-slate-500 font-normal leading-relaxed">{{ $product->short_description }}</p>
</div> </div>
<!-- Prijs Display --> <!-- Prijs Display -->
<div class="p-3.5 sm:p-4 rounded-2xl bg-amber-50/70 border border-amber-200/60 flex items-center justify-between"> <div class="p-4 rounded-xl bg-slate-50 border border-slate-200/60 flex items-center justify-between">
<div> <div>
<span class="text-[10px] text-slate-500 block font-bold uppercase">Stukprijs</span> <span class="text-[10px] text-slate-400 block uppercase font-medium">Stukprijs</span>
<div class="flex items-baseline space-x-1.5"> <div class="flex items-baseline space-x-1.5">
<span class="font-heading text-2xl sm:text-3xl font-black text-slate-900">€ <span x-text="unitPriceFormatted"></span></span> <span class="font-heading text-2xl font-extrabold text-slate-900">€ <span x-text="unitPriceFormatted"></span></span>
<span class="text-xs text-slate-500 font-normal">incl. btw</span> <span class="text-[11px] text-slate-500">incl. btw</span>
</div> </div>
</div> </div>
<div class="text-right"> <div class="text-right">
<span class="px-2.5 py-1 rounded-full bg-emerald-100 text-emerald-800 text-[11px] font-bold inline-flex items-center space-x-1"> <span class="px-2.5 py-1 rounded-full bg-emerald-50 text-emerald-700 text-[11px] font-medium inline-flex items-center space-x-1.5 border border-emerald-200/60">
<span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span> <span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span>
<span>Print-klaar</span> <span>Op bestelling geprint</span>
</span> </span>
</div> </div>
</div> </div>
@@ -252,9 +244,9 @@
<!-- 1. Materiaal Keuze --> <!-- 1. Materiaal Keuze -->
<div> <div>
<div class="flex items-center justify-between mb-1.5"> <div class="flex items-center justify-between mb-2">
<label class="text-xs font-bold text-slate-800 uppercase tracking-wider">1. Kies Materiaal</label> <label class="text-xs font-semibold text-slate-900">1. Materiaal</label>
<span class="text-xs font-bold text-amber-700" x-text="selectedMaterial.toUpperCase()"></span> <span class="text-xs font-medium text-slate-500" x-text="selectedMaterial.toUpperCase()"></span>
</div> </div>
<div class="grid grid-cols-2 gap-2"> <div class="grid grid-cols-2 gap-2">
@foreach($product->available_materials ?? ['pla'] as $matCode) @foreach($product->available_materials ?? ['pla'] as $matCode)
@@ -263,40 +255,40 @@
<button <button
type="button" type="button"
@click="selectedMaterial = '{{ $mat->code }}'" @click="selectedMaterial = '{{ $mat->code }}'"
:class="selectedMaterial === '{{ $mat->code }}' ? 'border-amber-400 bg-amber-50/80 ring-2 ring-amber-400/50 font-bold text-slate-950 shadow-xs' : 'border-slate-200 bg-white hover:bg-slate-50 text-slate-700'" :class="selectedMaterial === '{{ $mat->code }}' ? 'border-slate-900 bg-slate-900 text-white shadow-xs' : 'border-slate-200 bg-white hover:bg-slate-50 text-slate-700'"
class="p-2.5 rounded-xl border text-left transition flex flex-col justify-between cursor-pointer" class="p-2.5 rounded-xl border text-left transition flex flex-col justify-between cursor-pointer"
> >
<div class="flex items-center justify-between"> <div class="flex items-center justify-between w-full">
<span class="text-xs font-bold">{{ $mat->name }}</span> <span class="text-xs font-medium">{{ $mat->name }}</span>
@if($mat->price_multiplier > 1.0) @if($mat->price_multiplier > 1.0)
<span class="text-[9px] px-1 py-0.2 rounded bg-slate-100 font-mono text-slate-600">+{{ round(($mat->price_multiplier - 1) * 100) }}%</span> <span class="text-[9px] px-1 rounded font-mono" :class="selectedMaterial === '{{ $mat->code }}' ? 'bg-slate-800 text-slate-300' : 'bg-slate-100 text-slate-600'">+{{ round(($mat->price_multiplier - 1) * 100) }}%</span>
@endif @endif
</div> </div>
<p class="text-[10px] text-slate-500 mt-0.5 line-clamp-1 font-normal">{{ $mat->description }}</p> <p class="text-[10px] mt-0.5 line-clamp-1" :class="selectedMaterial === '{{ $mat->code }}' ? 'text-slate-300' : 'text-slate-400'">{{ $mat->description }}</p>
</button> </button>
@endif @endif
@endforeach @endforeach
</div> </div>
</div> </div>
<!-- 2. Kleur Selectie (Swatches met mooie afwerking) --> <!-- 2. Kleur Selectie -->
<div> <div>
<div class="flex items-center justify-between mb-1.5"> <div class="flex items-center justify-between mb-2">
<label class="text-xs font-bold text-slate-800 uppercase tracking-wider">2. Kies Jouw Kleur</label> <label class="text-xs font-semibold text-slate-900">2. Kleur</label>
<span class="text-xs font-bold text-amber-700" x-text="selectedColor"></span> <span class="text-xs font-medium text-slate-600" x-text="selectedColor"></span>
</div> </div>
<div class="flex flex-wrap gap-2"> <div class="flex flex-wrap gap-2">
@foreach($allColors as $c) @foreach($allColors as $c)
<button <button
type="button" type="button"
@click="selectedColor = '{{ $c->name }}'" @click="selectedColor = '{{ $c->name }}'"
:class="selectedColor === '{{ $c->name }}' ? 'ring-2 ring-amber-400 ring-offset-2 scale-110 shadow-xs' : 'hover:scale-105 border-slate-200'" :class="selectedColor === '{{ $c->name }}' ? 'ring-2 ring-slate-900 ring-offset-2 scale-105' : 'hover:scale-105 border-slate-200 opacity-90 hover:opacity-100'"
class="w-8 h-8 rounded-xl border shadow-xs transition flex items-center justify-center cursor-pointer relative" class="w-7 h-7 rounded-full border shadow-2xs transition flex items-center justify-center cursor-pointer relative"
style="background-color: {{ $c->hex }};" style="background-color: {{ $c->hex }};"
title="{{ $c->name }}" title="{{ $c->name }}"
> >
<template x-if="selectedColor === '{{ $c->name }}'"> <template x-if="selectedColor === '{{ $c->name }}'">
<i data-lucide="check" class="w-4 h-4 {{ in_array($c->name, ['Sneeuwwit', 'Zon Geel (Pikachu)']) ? 'text-slate-950' : 'text-white' }} stroke-[3]"></i> <i data-lucide="check" class="w-3.5 h-3.5 {{ in_array($c->name, ['Sneeuwwit', 'Zon Geel (Pikachu)']) ? 'text-slate-950' : 'text-white' }} stroke-[3]"></i>
</template> </template>
</button> </button>
@endforeach @endforeach
@@ -305,59 +297,59 @@
<!-- 3. Formaat & Schaal --> <!-- 3. Formaat & Schaal -->
<div> <div>
<div class="flex items-center justify-between mb-1.5"> <div class="flex items-center justify-between mb-2">
<label class="text-xs font-bold text-slate-800 uppercase tracking-wider">3. Formaat / Schaal</label> <label class="text-xs font-semibold text-slate-900">3. Formaat</label>
<span class="text-xs font-bold text-slate-700" x-text="selectedScale"></span> <span class="text-xs font-medium text-slate-600" x-text="selectedScale"></span>
</div> </div>
<div class="grid grid-cols-3 gap-2 text-xs"> <div class="grid grid-cols-3 gap-2 text-xs">
<button <button
type="button" type="button"
@click="selectedScale = '100%'" @click="selectedScale = '100%'"
:class="selectedScale === '100%' ? 'border-amber-400 bg-amber-50/80 ring-2 ring-amber-400/50 font-bold text-slate-900 shadow-xs' : 'border-slate-200 font-medium hover:bg-slate-50 text-slate-700'" :class="selectedScale === '100%' ? 'border-slate-900 bg-slate-900 text-white font-medium shadow-xs' : 'border-slate-200 text-slate-700 hover:bg-slate-50'"
class="p-2.5 rounded-xl border text-center transition cursor-pointer" class="p-2 rounded-lg border text-center transition cursor-pointer"
> >
<span>100% (Normaal)</span> <span>100% (Normaal)</span>
</button> </button>
<button <button
type="button" type="button"
@click="selectedScale = '150%'" @click="selectedScale = '150%'"
:class="selectedScale === '150%' ? 'border-amber-400 bg-amber-50/80 ring-2 ring-amber-400/50 font-bold text-slate-900 shadow-xs' : 'border-slate-200 font-medium hover:bg-slate-50 text-slate-700'" :class="selectedScale === '150%' ? 'border-slate-900 bg-slate-900 text-white font-medium shadow-xs' : 'border-slate-200 text-slate-700 hover:bg-slate-50'"
class="p-2.5 rounded-xl border text-center transition cursor-pointer" class="p-2 rounded-lg border text-center transition cursor-pointer"
> >
<span>150% (+45%)</span> <span>150% (+45%)</span>
</button> </button>
<button <button
type="button" type="button"
@click="selectedScale = '200%'" @click="selectedScale = '200%'"
:class="selectedScale === '200%' ? 'border-amber-400 bg-amber-50/80 ring-2 ring-amber-400/50 font-bold text-slate-900 shadow-xs' : 'border-slate-200 font-medium hover:bg-slate-50 text-slate-700'" :class="selectedScale === '200%' ? 'border-slate-900 bg-slate-900 text-white font-medium shadow-xs' : 'border-slate-200 text-slate-700 hover:bg-slate-50'"
class="p-2.5 rounded-xl border text-center transition cursor-pointer" class="p-2 rounded-lg border text-center transition cursor-pointer"
> >
<span>200% (+95%)</span> <span>200% (+95%)</span>
</button> </button>
</div> </div>
</div> </div>
<!-- Aantal en Toevoegen Knop --> <!-- Aantal en Bestelknop -->
<div class="pt-3 border-t border-slate-100 space-y-3"> <div class="pt-2 border-t border-slate-100 space-y-3">
<div class="flex items-center space-x-2.5"> <div class="flex items-center space-x-2.5">
<!-- Stepper --> <!-- Stepper -->
<div class="flex items-center border border-slate-200 rounded-xl bg-slate-50 overflow-hidden"> <div class="flex items-center border border-slate-200 rounded-xl bg-slate-50 overflow-hidden">
<button type="button" @click="if (quantity > 1) quantity--" class="px-3 py-2.5 hover:bg-slate-200 transition text-slate-700 font-bold cursor-pointer text-sm">-</button> <button type="button" @click="if (quantity > 1) quantity--" class="px-3 py-2 hover:bg-slate-200 transition text-slate-700 font-semibold cursor-pointer text-xs">-</button>
<span class="px-3.5 py-2.5 font-heading font-black text-xs text-slate-900" x-text="quantity"></span> <span class="px-3.5 py-2 font-mono text-xs font-semibold text-slate-900" x-text="quantity"></span>
<button type="button" @click="if (quantity < 50) quantity++" class="px-3 py-2.5 hover:bg-slate-200 transition text-slate-700 font-bold cursor-pointer text-sm">+</button> <button type="button" @click="if (quantity < 50) quantity++" class="px-3 py-2 hover:bg-slate-200 transition text-slate-700 font-semibold cursor-pointer text-xs">+</button>
</div> </div>
<!-- Knop Desktop --> <!-- Bestelknop -->
<button type="submit" class="flex-1 py-3 px-5 rounded-xl bg-amber-400 hover:bg-amber-300 text-slate-950 font-bold text-xs sm:text-sm transition flex items-center justify-center space-x-1.5 shadow-xs cursor-pointer"> <button type="submit" class="flex-1 py-2.5 px-4 rounded-xl bg-slate-900 hover:bg-slate-800 text-white font-medium text-xs sm:text-sm transition flex items-center justify-center space-x-2 shadow-xs cursor-pointer">
<span>🛒</span> <i data-lucide="shopping-bag" class="w-4 h-4"></i>
<span>In Winkelmandje • € <span x-text="calculatedPrice"></span></span> <span>In winkelwagen • € <span x-text="calculatedPrice"></span></span>
</button> </button>
</div> </div>
<div class="flex items-center justify-center space-x-3 text-[11px] text-slate-500 font-medium pt-1"> <div class="flex items-center justify-center space-x-3 text-[11px] text-slate-400 font-normal pt-1">
<span>🚚 Gratis verzending vanaf €50</span> <span>Gratis verzending vanaf €50</span>
<span>•</span> <span>•</span>
<span>📦 PostNL Track & Trace</span> <span>PostNL Track & Trace</span>
</div> </div>
</div> </div>
tests/Feature/AdminContentTest.php
-95
View File
@@ -407,99 +407,4 @@ class AdminContentTest extends TestCase
$this->assertEquals(45, (int) Setting::get('calc_default_markup')); $this->assertEquals(45, (int) Setting::get('calc_default_markup'));
$this->assertEquals(8, (int) Setting::get('calc_failure_rate')); $this->assertEquals(8, (int) Setting::get('calc_failure_rate'));
} }
public function test_3d_print_price_calculator_service_calculates_correctly(): void
{
$calculator = app(\App\Services\PriceCalculatorService::class);
// 100 grams, 4 hours, 1 color, PLA, 40% margin
$result = $calculator->calculate(
weightGrams: 100,
printTimeHours: 4.0,
colorCount: 1,
material: 'pla',
customMarkupPercent: 40.0
);
$this->assertArrayHasKey('suggested_price', $result);
$this->assertArrayHasKey('suggested_price_formatted', $result);
$this->assertArrayHasKey('breakdown', $result);
$this->assertArrayHasKey('material_cost', $result['breakdown']);
$this->assertArrayHasKey('electricity_cost', $result['breakdown']);
$this->assertArrayHasKey('machine_cost', $result['breakdown']);
$this->assertArrayHasKey('total_cost_price', $result['breakdown']);
$this->assertGreaterThan(5.0, $result['suggested_price']);
// Multi-color test: 4 colors should cost more than 1 color due to purge waste & setup
$multiColorResult = $calculator->calculate(
weightGrams: 100,
printTimeHours: 4.0,
colorCount: 4,
material: 'pla',
customMarkupPercent: 40.0
);
$this->assertGreaterThan($result['suggested_price'], $multiColorResult['suggested_price']);
$this->assertGreaterThan($result['breakdown']['material_cost'], $multiColorResult['breakdown']['material_cost']);
}
public function test_admin_can_use_calculate_price_api_endpoint(): void
{
$response = $this->actingAs($this->admin)->postJson(route('admin.products.calculate-price'), [
'weight_grams' => 120,
'print_time_hours' => 5.5,
'color_count' => 2,
'material' => 'petg',
'markup_percent' => 50,
]);
$response->assertStatus(200);
$response->assertJsonStructure([
'success',
'data' => [
'inputs',
'rates',
'breakdown' => [
'effective_weight_grams',
'material_cost',
'electricity_cost',
'machine_cost',
'handling_cost',
'failure_cost',
'total_cost_price',
'profit_amount',
'price_excl_vat',
'vat_amount',
'price_incl_vat_exact',
],
'suggested_price',
'suggested_price_formatted',
],
]);
}
public function test_admin_can_save_calculator_tariffs_in_content_settings(): void
{
$response = $this->actingAs($this->admin)->post(route('admin.content.update'), [
'calc_filament_price_kg' => '22.50',
'calc_electricity_kwh' => '0.40',
'calc_printer_wattage' => '180',
'calc_machine_hourly_rate' => '0.65',
'calc_handling_flat' => '2.00',
'calc_default_markup' => '45',
'calc_failure_rate' => '8',
]);
$response->assertRedirect(route('admin.content.index'));
Setting::flushCache();
$this->assertEquals(22.50, (float) Setting::get('calc_filament_price_kg'));
$this->assertEquals(0.40, (float) Setting::get('calc_electricity_kwh'));
$this->assertEquals(180, (int) Setting::get('calc_printer_wattage'));
$this->assertEquals(0.65, (float) Setting::get('calc_machine_hourly_rate'));
$this->assertEquals(2.00, (float) Setting::get('calc_handling_flat'));
$this->assertEquals(45, (int) Setting::get('calc_default_markup'));
$this->assertEquals(8, (int) Setting::get('calc_failure_rate'));
}
} }