Complete redesign: modern, fresh, subtle Scandinavian tech studio look & feel for webshop and admin
This commit is contained in:
+21
-31
@@ -1,41 +1,31 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" fill="none">
|
||||
<defs>
|
||||
<!-- Soft Warm Coral Gradient -->
|
||||
<linearGradient id="iconCoral" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#FB7185" />
|
||||
<stop offset="100%" stop-color="#F43F5E" />
|
||||
<linearGradient id="icoTop" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#38bdf8" />
|
||||
<stop offset="100%" stop-color="#0284c7" />
|
||||
</linearGradient>
|
||||
|
||||
<!-- Warm Amber Gradient -->
|
||||
<linearGradient id="iconAmber" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#FBBF24" />
|
||||
<stop offset="100%" stop-color="#F59E0B" />
|
||||
<linearGradient id="icoLeft" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#6366f1" />
|
||||
<stop offset="100%" stop-color="#4338ca" />
|
||||
</linearGradient>
|
||||
|
||||
<!-- Gentle Sky Gradient -->
|
||||
<linearGradient id="iconSky" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#38BDF8" />
|
||||
<stop offset="100%" stop-color="#0284C7" />
|
||||
<linearGradient id="icoRight" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#0ea5e9" />
|
||||
<stop offset="100%" stop-color="#0369a1" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
|
||||
<!-- Friendly Rounded Layered 3D Emblem -->
|
||||
<g transform="translate(4, 4)">
|
||||
<!-- Base Layer (Amber) -->
|
||||
<rect x="2" y="26" width="36" height="12" rx="6" fill="url(#iconAmber)" />
|
||||
<!-- Background rounded squircle with subtle border -->
|
||||
<rect x="2" y="2" width="44" height="44" rx="12" fill="#0f172a" />
|
||||
|
||||
<!-- Middle Layer (Coral) -->
|
||||
<rect x="2" y="14" width="36" height="12" rx="6" fill="url(#iconCoral)" />
|
||||
|
||||
<!-- Top Layer (Sky) -->
|
||||
<rect x="2" y="2" width="36" height="12" rx="6" fill="url(#iconSky)" />
|
||||
|
||||
<!-- Cute extrusion highlights -->
|
||||
<circle cx="10" cy="8" r="2.5" fill="#FFFFFF" opacity="0.85" />
|
||||
<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" />
|
||||
<!-- Modern Geometric 3D Prism Mark -->
|
||||
<g transform="translate(6, 6)">
|
||||
<!-- Top Face -->
|
||||
<path d="M18 6 L31 13.5 L18 21 L5 13.5 Z" fill="url(#icoTop)" />
|
||||
<!-- Left Face -->
|
||||
<path d="M5 15.5 L17 22.5 L17 34 L5 27 Z" fill="url(#icoLeft)" />
|
||||
<!-- Right Face -->
|
||||
<path d="M19 22.5 L31 15.5 L31 27 L19 34 Z" fill="url(#icoRight)" />
|
||||
<!-- Precision Core Light Accent -->
|
||||
<circle cx="18" cy="21" r="2" fill="#ffffff" opacity="0.95" />
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 1.2 KiB |
+35
-57
@@ -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>
|
||||
<!-- Soft Warm Coral Gradient -->
|
||||
<linearGradient id="softCoral" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#FB7185" />
|
||||
<stop offset="100%" stop-color="#F43F5E" />
|
||||
<!-- Modern high-end gradients -->
|
||||
<linearGradient id="facetTop" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#38bdf8" />
|
||||
<stop offset="100%" stop-color="#0284c7" />
|
||||
</linearGradient>
|
||||
|
||||
<!-- Warm Amber / Mango Gradient -->
|
||||
<linearGradient id="softAmber" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#FBBF24" />
|
||||
<stop offset="100%" stop-color="#F59E0B" />
|
||||
<linearGradient id="facetLeft" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#6366f1" />
|
||||
<stop offset="100%" stop-color="#4338ca" />
|
||||
</linearGradient>
|
||||
|
||||
<!-- Gentle Sky / Mint Gradient -->
|
||||
<linearGradient id="softSky" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#38BDF8" />
|
||||
<stop offset="100%" stop-color="#0284C7" />
|
||||
<linearGradient id="facetRight" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#0ea5e9" />
|
||||
<stop offset="100%" stop-color="#0369a1" />
|
||||
</linearGradient>
|
||||
|
||||
<!-- Playful Text Gradient -->
|
||||
<linearGradient id="textGradient" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||
<stop offset="0%" stop-color="#F43F5E" />
|
||||
<stop offset="60%" stop-color="#EA580C" />
|
||||
<stop offset="100%" stop-color="#F59E0B" />
|
||||
<linearGradient id="accentDot" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#38bdf8" />
|
||||
<stop offset="100%" stop-color="#6366f1" />
|
||||
</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>
|
||||
|
||||
<!-- Friendly Rounded 3D Printing Emblem (Cubic Spool / Layered Soft Prism) -->
|
||||
<g transform="translate(6, 6)" filter="url(#softGlow)">
|
||||
<!-- Base Layer (Soft Amber Pill) -->
|
||||
<rect x="2" y="24" width="36" height="12" rx="6" fill="url(#softAmber)" />
|
||||
|
||||
<!-- Middle Layer (Soft Coral Pill) -->
|
||||
<rect x="2" y="13" width="36" height="12" rx="6" fill="url(#softCoral)" />
|
||||
|
||||
<!-- Top Layer (Soft Sky Pill) -->
|
||||
<rect x="2" y="2" width="36" height="12" rx="6" fill="url(#softSky)" />
|
||||
|
||||
<!-- 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" />
|
||||
<!-- Modern Geometric 3D Prism Mark -->
|
||||
<g transform="translate(6, 6)">
|
||||
<!-- Top Face (Soft Isometric Diamond) -->
|
||||
<path d="M18 4 L30 11 L18 18 L6 11 Z" fill="url(#facetTop)" />
|
||||
<!-- Left Face (Dimension with 3D print layer notch) -->
|
||||
<path d="M6 13 L17 19.5 L17 31 L6 24.5 Z" fill="url(#facetLeft)" />
|
||||
<!-- Right Face -->
|
||||
<path d="M19 19.5 L30 13 L30 24.5 L19 31 Z" fill="url(#facetRight)" />
|
||||
<!-- Precision Core Light Accent -->
|
||||
<circle cx="18" cy="18" r="1.75" fill="#ffffff" opacity="0.95" />
|
||||
</g>
|
||||
|
||||
<!-- Wordmark Text -->
|
||||
<g transform="translate(56, 36)">
|
||||
<!-- "jouw" in Friendly Rounded Slate -->
|
||||
<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>
|
||||
|
||||
<!-- "3D" / "driedee" in Vibrant Soft Gradient -->
|
||||
<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>
|
||||
|
||||
<!-- Subtle Friendly ".nl" Badge -->
|
||||
<g transform="translate(148, -20)">
|
||||
<rect x="0" y="0" width="26" height="17" rx="8.5" fill="#F1F5F9" />
|
||||
<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>
|
||||
<!-- Modern Clean Typography -->
|
||||
<g transform="translate(50, 31)">
|
||||
<!-- 'jouw' in clean, light-medium neutral font -->
|
||||
<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 -->
|
||||
<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>
|
||||
<!-- Vibrant Modern Dot -->
|
||||
<circle cx="137.5" cy="-5.5" r="3" fill="url(#accentDot)" />
|
||||
<!-- '.nl' micro pill badge -->
|
||||
<rect x="145" y="-17" width="24" height="15" rx="4" 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>
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 3.0 KiB After Width: | Height: | Size: 2.3 KiB |
+21
-16
@@ -4,8 +4,8 @@
|
||||
@source '../../storage/framework/views/*.php';
|
||||
|
||||
@theme {
|
||||
--font-heading: 'Fredoka', ui-rounded, 'Nunito', system-ui, sans-serif;
|
||||
--font-sans: 'Nunito', system-ui, sans-serif;
|
||||
--font-heading: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
--font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
}
|
||||
|
||||
@layer utilities {
|
||||
@@ -13,22 +13,27 @@
|
||||
font-family: var(--font-heading);
|
||||
}
|
||||
|
||||
/* Refined, smooth playful button */
|
||||
.playful-btn {
|
||||
transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
}
|
||||
.playful-btn:hover {
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
.playful-btn:active {
|
||||
transform: translateY(1px);
|
||||
/* Modern subtle glass effect */
|
||||
.glass-header {
|
||||
background-color: rgba(255, 255, 255, 0.85);
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
}
|
||||
|
||||
/* Modern playful card */
|
||||
.playful-card {
|
||||
transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
/* Clean modern micro-elevation */
|
||||
.card-hover {
|
||||
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 {
|
||||
transform: translateY(-3px);
|
||||
.card-hover:hover {
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -3,22 +3,22 @@
|
||||
@section('title', 'Mijn Account | Jouwdriedee.nl')
|
||||
|
||||
@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 -->
|
||||
<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="flex items-center space-x-4">
|
||||
<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="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-3.5">
|
||||
<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)) }}
|
||||
</div>
|
||||
<div>
|
||||
<div class="flex items-center space-x-2">
|
||||
<h1 class="font-heading text-xl sm:text-2xl font-black text-slate-900">
|
||||
Hallo, {{ $user->name }}!
|
||||
<h1 class="text-xl font-bold text-slate-900">
|
||||
{{ $user->name }}
|
||||
</h1>
|
||||
@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">
|
||||
Admin Beheerder
|
||||
<span class="px-2 py-0.5 rounded-full bg-slate-100 text-slate-700 text-[10px] font-semibold border border-slate-200">
|
||||
Beheerder
|
||||
</span>
|
||||
@endif
|
||||
</div>
|
||||
@@ -28,17 +28,17 @@
|
||||
</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())
|
||||
<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">
|
||||
<i data-lucide="shield" class="w-4 h-4"></i>
|
||||
<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-3.5 h-3.5"></i>
|
||||
<span>Admin Dashboard</span>
|
||||
</a>
|
||||
@endif
|
||||
|
||||
<form action="{{ route('logout') }}" method="POST">
|
||||
@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>
|
||||
<span>Uitloggen</span>
|
||||
</button>
|
||||
@@ -47,69 +47,72 @@
|
||||
</div>
|
||||
|
||||
<!-- 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
|
||||
type="button"
|
||||
@click="tab = 'orders'"
|
||||
:class="tab === 'orders' ? 'bg-amber-400 text-slate-950 font-black' : 'bg-white text-slate-600 hover:bg-slate-100'"
|
||||
class="px-4 py-2 rounded-xl transition flex items-center space-x-1.5 cursor-pointer"
|
||||
:class="tab === 'orders' ? 'bg-white text-slate-900 font-semibold shadow-2xs' : 'text-slate-600 hover:text-slate-900'"
|
||||
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>
|
||||
<span>Mijn Bestellingen ({{ $orders->count() }})</span>
|
||||
<i data-lucide="package" class="w-3.5 h-3.5"></i>
|
||||
<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
|
||||
type="button"
|
||||
@click="tab = 'profile'"
|
||||
:class="tab === 'profile' ? 'bg-amber-400 text-slate-950 font-black' : 'bg-white text-slate-600 hover:bg-slate-100'"
|
||||
class="px-4 py-2 rounded-xl transition flex items-center space-x-1.5 cursor-pointer"
|
||||
:class="tab === 'profile' ? 'bg-white text-slate-900 font-semibold shadow-2xs' : 'text-slate-600 hover:text-slate-900'"
|
||||
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>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- TAB 1: BESTELLINGEN -->
|
||||
<div x-show="tab === 'orders'" class="space-y-4">
|
||||
<div x-show="tab === 'orders'" class="space-y-3">
|
||||
@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="w-14 h-14 rounded-2xl bg-amber-50 text-amber-600 flex items-center justify-center mx-auto text-2xl">
|
||||
🛍️
|
||||
<div class="p-10 text-center rounded-2xl bg-white border border-slate-200/80 shadow-xs space-y-2.5">
|
||||
<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>
|
||||
<h3 class="font-heading text-lg font-black text-slate-900">Nog geen bestellingen geplaatst</h3>
|
||||
<p class="text-xs text-slate-500 max-w-sm mx-auto">
|
||||
Je hebt nog geen 3D prints besteld. Ontdek onze fidget toys, Pokémon figuren en popculture modellen!
|
||||
<h3 class="text-sm font-semibold text-slate-900">Nog geen bestellingen</h3>
|
||||
<p class="text-xs text-slate-500 max-w-xs mx-auto">
|
||||
Je hebt nog geen 3D prints besteld. Bekijk onze studio collectie!
|
||||
</p>
|
||||
<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">
|
||||
<span>Winkelassortiment bekijken</span>
|
||||
<i data-lucide="arrow-right" class="w-3.5 h-3.5"></i>
|
||||
<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>Collectie bekijken</span>
|
||||
<i data-lucide="arrow-right" class="w-3 h-3"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
@else
|
||||
<div class="space-y-4">
|
||||
<div class="space-y-3">
|
||||
@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 -->
|
||||
<div class="flex flex-col sm:flex-row sm:items-center justify-between pb-3 border-b border-slate-100 gap-2">
|
||||
<div>
|
||||
<span class="font-mono font-bold text-xs text-slate-900">#{{ $order->order_number }}</span>
|
||||
<span class="text-xs text-slate-400 ml-2">• {{ $order->created_at->format('d-m-Y om H:i') }}</span>
|
||||
<span class="text-xs text-slate-400 ml-2">• {{ $order->created_at->format('d-m-Y H:i') }}</span>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center space-x-3">
|
||||
<span class="px-2.5 py-0.5 rounded-full text-[10px] font-black uppercase
|
||||
@if($order->status === 'completed' || $order->status === 'shipped' || $order->status === 'verzonden') bg-emerald-100 text-emerald-800
|
||||
@elseif($order->status === 'printed' || $order->status === 'processing' || $order->status === 'in_print') bg-sky-100 text-sky-800
|
||||
@elseif($order->status === 'cancelled' || $order->status === 'geannuleerd') bg-rose-100 text-rose-800
|
||||
@else bg-amber-100 text-amber-900 @endif
|
||||
<span class="px-2 py-0.5 rounded-full text-[10px] font-semibold
|
||||
@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-50 text-sky-700 border border-sky-200/60
|
||||
@elseif($order->status === 'cancelled') bg-rose-50 text-rose-700 border border-rose-200/60
|
||||
@else bg-amber-50 text-amber-700 border border-amber-200/60 @endif
|
||||
">
|
||||
{{ str_replace('_', ' ', $order->status) }}
|
||||
{{ $order->status_label }}
|
||||
</span>
|
||||
|
||||
<span class="font-heading font-black text-slate-900 text-sm">
|
||||
<span class="font-bold text-slate-900 text-xs">
|
||||
{{ $order->formatted_total }}
|
||||
</span>
|
||||
</div>
|
||||
@@ -118,28 +121,28 @@
|
||||
<!-- Items -->
|
||||
<div class="divide-y divide-slate-100">
|
||||
@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 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">
|
||||
@if($item->material) Materiaal: <span class="font-semibold">{{ strtoupper($item->material) }}</span> • @endif
|
||||
@if($item->color) Kleur: <span class="font-semibold">{{ $item->color }}</span> • @endif
|
||||
Schaal: {{ $item->scale ?? '100%' }}
|
||||
@if($item->material) {{ strtoupper($item->material) }} • @endif
|
||||
@if($item->color) {{ $item->color }} • @endif
|
||||
{{ $item->scale ?? '100%' }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<span class="font-semibold text-slate-600">{{ $item->quantity }}x</span>
|
||||
<span class="font-bold text-slate-900 ml-1">€ {{ number_format($item->total_price, 2, ',', '.') }}</span>
|
||||
<span class="text-slate-500">{{ $item->quantity }}x</span>
|
||||
<span class="font-semibold text-slate-900 ml-1">€ {{ number_format($item->total_price, 2, ',', '.') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
|
||||
<!-- 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 class="font-bold text-emerald-600 flex items-center space-x-1">
|
||||
<i data-lucide="truck" class="w-3.5 h-3.5"></i>
|
||||
<span class="font-medium text-slate-700 flex items-center space-x-1">
|
||||
<i data-lucide="truck" class="w-3.5 h-3.5 text-slate-400"></i>
|
||||
<span>PostNL</span>
|
||||
</span>
|
||||
</div>
|
||||
@@ -151,31 +154,31 @@
|
||||
</div>
|
||||
|
||||
<!-- 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 -->
|
||||
<div class="p-6 rounded-3xl bg-white border border-slate-200/80 shadow-xs space-y-4">
|
||||
<h3 class="font-heading text-base font-black text-slate-900 flex items-center space-x-2">
|
||||
<i data-lucide="user" class="w-4 h-4 text-amber-500"></i>
|
||||
<div class="p-6 rounded-2xl bg-white border border-slate-200/80 shadow-xs space-y-3.5">
|
||||
<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-3.5 h-3.5 text-slate-500"></i>
|
||||
<span>Persoonlijke gegevens</span>
|
||||
</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
|
||||
@method('PUT')
|
||||
|
||||
<div class="space-y-1.5">
|
||||
<label class="block text-xs font-bold 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">
|
||||
<div class="space-y-1">
|
||||
<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 py-2 text-xs text-slate-900 focus:bg-white focus:outline-none focus:ring-2 focus:ring-slate-900/10 focus:border-slate-900">
|
||||
</div>
|
||||
|
||||
<div class="space-y-1.5">
|
||||
<label class="block text-xs font-bold 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">
|
||||
<div class="space-y-1">
|
||||
<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 py-2 text-xs text-slate-900 focus:bg-white focus:outline-none focus:ring-2 focus:ring-slate-900/10 focus:border-slate-900">
|
||||
</div>
|
||||
|
||||
<div class="pt-2">
|
||||
<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">
|
||||
<div class="pt-1">
|
||||
<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
|
||||
</button>
|
||||
</div>
|
||||
@@ -183,33 +186,33 @@
|
||||
</div>
|
||||
|
||||
<!-- Wachtwoord Wijzigen -->
|
||||
<div class="p-6 rounded-3xl bg-white border border-slate-200/80 shadow-xs space-y-4">
|
||||
<h3 class="font-heading text-base font-black text-slate-900 flex items-center space-x-2">
|
||||
<i data-lucide="lock" class="w-4 h-4 text-rose-500"></i>
|
||||
<div class="p-6 rounded-2xl bg-white border border-slate-200/80 shadow-xs space-y-3.5">
|
||||
<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-3.5 h-3.5 text-slate-500"></i>
|
||||
<span>Wachtwoord wijzigen</span>
|
||||
</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
|
||||
@method('PUT')
|
||||
|
||||
<div class="space-y-1.5">
|
||||
<label class="block text-xs font-bold 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">
|
||||
<div class="space-y-1">
|
||||
<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 py-2 text-xs text-slate-900 focus:bg-white focus:outline-none focus:ring-2 focus:ring-slate-900/10 focus:border-slate-900">
|
||||
</div>
|
||||
|
||||
<div class="space-y-1.5">
|
||||
<label class="block text-xs font-bold 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">
|
||||
<div class="space-y-1">
|
||||
<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 py-2 text-xs text-slate-900 focus:bg-white focus:outline-none focus:ring-2 focus:ring-slate-900/10 focus:border-slate-900">
|
||||
</div>
|
||||
|
||||
<div class="space-y-1.5">
|
||||
<label class="block text-xs font-bold 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">
|
||||
<div class="space-y-1">
|
||||
<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 py-2 text-xs text-slate-900 focus:bg-white focus:outline-none focus:ring-2 focus:ring-slate-900/10 focus:border-slate-900">
|
||||
</div>
|
||||
|
||||
<div class="pt-2">
|
||||
<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">
|
||||
<div class="pt-1">
|
||||
<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
|
||||
</button>
|
||||
</div>
|
||||
@@ -220,4 +223,3 @@
|
||||
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
|
||||
@@ -6,58 +6,57 @@
|
||||
<div class="space-y-6 max-w-xl mx-auto">
|
||||
|
||||
<!-- 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>
|
||||
<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>
|
||||
<span>Terug naar Categorieën</span>
|
||||
</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>
|
||||
|
||||
<!-- 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
|
||||
@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">
|
||||
<label class="block text-xs font-bold text-slate-300">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">
|
||||
<div class="space-y-1">
|
||||
<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-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 class="space-y-1.5">
|
||||
<label class="block text-xs font-bold text-slate-300">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>
|
||||
<div class="space-y-1">
|
||||
<label class="block text-xs font-medium text-slate-700">Omschrijving</label>
|
||||
<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 class="grid grid-cols-2 gap-4">
|
||||
<div class="space-y-1.5">
|
||||
<label class="block text-xs font-bold text-slate-300">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">
|
||||
<div class="space-y-1">
|
||||
<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-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 class="space-y-1.5">
|
||||
<label class="block text-xs font-bold text-slate-300">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">
|
||||
<div class="space-y-1">
|
||||
<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-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 class="flex items-center justify-end space-x-3">
|
||||
<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">
|
||||
<div class="flex items-center justify-end space-x-2.5">
|
||||
<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
|
||||
</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">
|
||||
<i data-lucide="save" class="w-4 h-4"></i>
|
||||
<span>Opslaan</span>
|
||||
<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">
|
||||
Wijzigingen Opslaan
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
|
||||
@@ -6,41 +6,48 @@
|
||||
<div class="space-y-6">
|
||||
|
||||
<!-- 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 class="inline-flex items-center space-x-2 text-xs text-amber-400 font-bold uppercase tracking-wider mb-1">
|
||||
<i data-lucide="folder-tree" class="w-4 h-4"></i>
|
||||
<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-3.5 h-3.5"></i>
|
||||
<span>Winkelstructuur</span>
|
||||
</div>
|
||||
<h1 class="font-heading text-2xl sm:text-3xl font-black text-white">Categorieën Beheer</h1>
|
||||
<p class="text-xs sm:text-sm text-slate-400 mt-1">Beheer categorie titels, omschrijvingen en sortering.</p>
|
||||
<h1 class="text-2xl font-bold tracking-tight text-slate-900">Categorieën</h1>
|
||||
<p class="text-xs text-slate-500 mt-1">Beheer categorietitels, omschrijvingen en sortering van de webshop.</p>
|
||||
</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 -->
|
||||
<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)
|
||||
<div class="p-6 rounded-3xl bg-slate-900 border border-slate-800 flex flex-col justify-between space-y-4">
|
||||
<div class="space-y-3">
|
||||
<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-2.5">
|
||||
<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 }}
|
||||
</span>
|
||||
<span class="text-xs text-slate-400 font-bold">
|
||||
<span class="text-xs text-slate-500 font-medium">
|
||||
{{ $category->products_count }} producten
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<h3 class="font-heading text-lg font-black text-white">{{ $category->name }}</h3>
|
||||
<p class="text-xs text-slate-400 leading-relaxed font-normal">{{ $category->description }}</p>
|
||||
<h3 class="text-base font-bold text-slate-900">{{ $category->name }}</h3>
|
||||
<p class="text-xs text-slate-500 leading-relaxed font-normal">{{ $category->description }}</p>
|
||||
</div>
|
||||
|
||||
<div class="pt-4 border-t border-slate-800 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">
|
||||
<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-500 hover:text-slate-900 flex items-center space-x-1 transition">
|
||||
<span>Bekijk in shop</span>
|
||||
<i data-lucide="external-link" class="w-3 h-3"></i>
|
||||
</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>
|
||||
<span>Bewerken</span>
|
||||
</a>
|
||||
@@ -51,4 +58,3 @@
|
||||
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -3,37 +3,30 @@
|
||||
@section('title', 'MakerWorld Collecties & Auto-Sync | Jouwdriedee.nl Beheer')
|
||||
|
||||
@section('content')
|
||||
<div class="py-8 bg-slate-950 text-slate-100 min-h-screen" x-data="makerWorldSyncApp()">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 space-y-8">
|
||||
<div class="space-y-6" x-data="makerWorldSyncApp()">
|
||||
|
||||
<!-- Header & Status Bar -->
|
||||
<div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4 pb-6 border-b border-slate-800">
|
||||
<!-- Header -->
|
||||
<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>
|
||||
<div class="flex items-center space-x-2 text-xs text-amber-400 font-bold uppercase tracking-wider mb-1">
|
||||
<span class="inline-block w-2.5 h-2.5 rounded-full bg-emerald-400 animate-pulse"></span>
|
||||
<span>MakerWorld Integratie</span>
|
||||
<span>•</span>
|
||||
<span>Collecties & 10-Minuten Auto-Sync</span>
|
||||
<div class="inline-flex items-center space-x-2 text-xs font-semibold text-slate-500 mb-1">
|
||||
<span class="inline-block w-2 h-2 rounded-full bg-emerald-500 animate-pulse"></span>
|
||||
<span>MakerWorld Sync Engine</span>
|
||||
<span class="text-slate-300">•</span>
|
||||
<span>10-minuten automatische synchronisatie</span>
|
||||
</div>
|
||||
<h1 class="text-2xl sm:text-3xl font-black text-white flex items-center space-x-3">
|
||||
<span class="p-2 bg-gradient-to-tr from-amber-400 to-orange-500 rounded-2xl text-slate-950 shadow-lg shadow-amber-400/20">
|
||||
<i data-lucide="refresh-cw" class="w-6 h-6"></i>
|
||||
</span>
|
||||
<span>MakerWorld Product Importer & Collecties Sync</span>
|
||||
</h1>
|
||||
<p class="mt-1 text-sm text-slate-400">
|
||||
Koppel je MakerWorld collecties (zoals <code class="text-amber-400 font-mono">@user_1718037659</code>). Het systeem controleert elke 10 minuten automatisch op nieuwe modellen!
|
||||
<h1 class="text-2xl font-bold tracking-tight text-slate-900">MakerWorld Product Importer & Collecties</h1>
|
||||
<p class="text-xs text-slate-500 mt-1">
|
||||
Koppel MakerWorld collecties van je profiel (<code class="text-slate-800 font-mono bg-slate-100 px-1.5 py-0.5 rounded">@user_1718037659</code>). Nieuwe prints worden elke 10 minuten automatisch binnengehaald.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Quick Stats & Staging Link -->
|
||||
<div class="flex items-center space-x-3">
|
||||
<a href="{{ route('admin.makerworld.staging') }}" class="px-4 py-2.5 bg-gradient-to-r from-amber-400 to-amber-500 hover:from-amber-500 hover:to-amber-600 text-slate-950 font-black text-xs rounded-xl shadow-md transition flex items-center space-x-2">
|
||||
<div class="flex items-center space-x-2">
|
||||
<a href="{{ route('admin.makerworld.staging') }}" class="inline-flex items-center space-x-2 px-3.5 py-2 rounded-xl bg-slate-900 text-white text-xs font-medium hover:bg-slate-800 transition shadow-xs">
|
||||
<i data-lucide="layers" class="w-4 h-4"></i>
|
||||
<span>Artikel Beheer</span>
|
||||
@if($stagedCount > 0)
|
||||
<span class="px-2 py-0.5 rounded-full bg-slate-950 text-amber-300 text-[11px] font-black">
|
||||
{{ $stagedCount }} concepten
|
||||
<span class="px-1.5 py-0.5 rounded-md bg-white/20 text-white text-[10px] font-bold">
|
||||
{{ $stagedCount }}
|
||||
</span>
|
||||
@endif
|
||||
</a>
|
||||
@@ -42,40 +35,40 @@
|
||||
|
||||
<!-- Notification Alerts -->
|
||||
@if(session('success'))
|
||||
<div class="p-4 rounded-2xl bg-emerald-950/60 border border-emerald-500/40 text-emerald-200 text-sm flex items-center space-x-3">
|
||||
<i data-lucide="check-circle-2" class="w-5 h-5 text-emerald-400 shrink-0"></i>
|
||||
<div class="font-bold">{{ session('success') }}</div>
|
||||
<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
|
||||
|
||||
@if(session('warning'))
|
||||
<div class="p-4 rounded-2xl bg-amber-950/60 border border-amber-500/40 text-amber-200 text-sm flex items-center space-x-3">
|
||||
<i data-lucide="alert-triangle" class="w-5 h-5 text-amber-400 shrink-0"></i>
|
||||
<div class="font-bold">{{ session('warning') }}</div>
|
||||
<div class="p-3.5 rounded-xl bg-amber-50 border border-amber-200/60 text-amber-800 text-xs flex items-center space-x-2.5">
|
||||
<i data-lucide="alert-triangle" class="w-4 h-4 text-amber-600 shrink-0"></i>
|
||||
<span class="font-medium">{{ session('warning') }}</span>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
@if(session('error'))
|
||||
<div class="p-4 rounded-2xl bg-rose-950/60 border border-rose-500/40 text-rose-200 text-sm flex items-center space-x-3">
|
||||
<i data-lucide="x-circle" class="w-5 h-5 text-rose-400 shrink-0"></i>
|
||||
<div class="font-bold">{{ session('error') }}</div>
|
||||
<div class="p-3.5 rounded-xl bg-rose-50 border border-rose-200/60 text-rose-800 text-xs flex items-center space-x-2.5">
|
||||
<i data-lucide="x-circle" class="w-4 h-4 text-rose-600 shrink-0"></i>
|
||||
<span class="font-medium">{{ session('error') }}</span>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<!-- 2FA Verificatiecode Invoerscherm (Bambu Lab) -->
|
||||
@if(session('makerworld_2fa_account'))
|
||||
<div class="bg-gradient-to-r from-slate-900 to-amber-950/80 p-6 sm:p-8 rounded-3xl border-2 border-amber-400 shadow-2xl">
|
||||
<div class="max-w-xl mx-auto text-center space-y-4">
|
||||
<div class="w-16 h-16 rounded-2xl bg-amber-400/20 text-amber-400 flex items-center justify-center mx-auto shadow-inner">
|
||||
<i data-lucide="shield-check" class="w-8 h-8"></i>
|
||||
<div class="bg-white p-6 sm:p-8 rounded-2xl border border-slate-200/80 shadow-xs">
|
||||
<div class="max-w-md mx-auto text-center space-y-4">
|
||||
<div class="w-12 h-12 rounded-xl bg-slate-100 text-slate-700 flex items-center justify-center mx-auto">
|
||||
<i data-lucide="shield-check" class="w-6 h-6"></i>
|
||||
</div>
|
||||
<div>
|
||||
<span class="px-3 py-1 rounded-full text-xs font-black uppercase tracking-wider bg-amber-400 text-slate-950">
|
||||
Stap 2: Twee-staps Verificatie (2FA)
|
||||
<span class="px-2.5 py-0.5 rounded-full text-[11px] font-semibold bg-slate-100 text-slate-700">
|
||||
Tweestapsverificatie (2FA)
|
||||
</span>
|
||||
<h2 class="text-2xl font-black text-white mt-2">Bambu Lab Verificatiecode</h2>
|
||||
<p class="text-xs text-slate-300 mt-1">
|
||||
Vul de 6-cijferige verificatiecode in die Bambu Lab zojuist heeft verzonden naar <strong class="text-amber-300 font-mono">{{ session('makerworld_2fa_account') }}</strong>.
|
||||
<h2 class="text-xl font-bold text-slate-900 mt-2">Bambu Lab Beveiligingscode</h2>
|
||||
<p class="text-xs text-slate-500 mt-1">
|
||||
Vul de 6-cijferige verificatiecode in die verzonden is naar <strong class="text-slate-800 font-mono">{{ session('makerworld_2fa_account') }}</strong>.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -91,123 +84,123 @@
|
||||
placeholder="123456"
|
||||
autofocus
|
||||
required
|
||||
class="w-56 text-center text-3xl font-mono font-black tracking-widest px-4 py-3 bg-slate-950 border-2 border-amber-400 rounded-2xl text-amber-300 focus:outline-none focus:ring-4 focus:ring-amber-400/30 placeholder-slate-700"
|
||||
class="w-48 text-center text-2xl font-mono font-bold tracking-widest px-4 py-2.5 bg-slate-50 border border-slate-200 rounded-xl text-slate-900 focus:bg-white focus:outline-none focus:ring-2 focus:ring-slate-900/10 focus:border-slate-900 placeholder-slate-400"
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-center space-x-3 pt-2">
|
||||
<button type="submit" class="px-8 py-3 bg-amber-400 hover:bg-amber-300 text-slate-950 font-black rounded-2xl text-xs uppercase tracking-wider shadow-lg shadow-amber-400/20 transition flex items-center space-x-2">
|
||||
<button type="submit" class="px-6 py-2.5 bg-slate-900 hover:bg-slate-800 text-white font-medium rounded-xl text-xs transition flex items-center space-x-2 shadow-xs">
|
||||
<i data-lucide="check" class="w-4 h-4"></i>
|
||||
<span>Verifieer Code & Inloggen</span>
|
||||
<span>Verifieer & Koppel</span>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="pt-3 border-t border-slate-800/80 flex items-center justify-center space-x-6 text-xs text-slate-400">
|
||||
<div class="pt-3 border-t border-slate-100 flex items-center justify-center space-x-4 text-xs text-slate-500">
|
||||
<form action="{{ route('admin.makerworld.resend-code') }}" method="POST">
|
||||
@csrf
|
||||
<input type="hidden" name="account" value="{{ session('makerworld_2fa_account') }}">
|
||||
<button type="submit" class="hover:text-amber-400 underline font-bold transition">
|
||||
Geen code ontvangen? Verstuur opnieuw
|
||||
<button type="submit" class="hover:text-slate-900 underline font-medium transition">
|
||||
Code opnieuw verzenden
|
||||
</button>
|
||||
</form>
|
||||
<span>•</span>
|
||||
<a href="{{ route('admin.makerworld.index', ['tab' => 'auth']) }}" class="hover:text-slate-300 underline font-bold transition">
|
||||
Ander account proberen
|
||||
<a href="{{ route('admin.makerworld.index', ['tab' => 'auth']) }}" class="hover:text-slate-900 underline font-medium transition">
|
||||
Ander account
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<!-- TAB Bar -->
|
||||
<div class="flex items-center space-x-2 border-b border-slate-800 pb-2 overflow-x-auto text-sm font-bold">
|
||||
<a href="{{ route('admin.makerworld.index', ['tab' => 'collections']) }}" class="px-4 py-2 rounded-xl transition flex items-center space-x-2 {{ $currentTab === 'collections' ? 'bg-amber-400 text-slate-950 font-black' : 'text-slate-400 hover:text-white hover:bg-slate-900' }}">
|
||||
<i data-lucide="folder-sync" class="w-4 h-4"></i>
|
||||
<!-- TAB Bar: Subtle Segmented Control -->
|
||||
<div class="flex items-center space-x-1.5 p-1 bg-slate-100/80 rounded-xl max-w-max text-xs font-medium">
|
||||
<a href="{{ route('admin.makerworld.index', ['tab' => 'collections']) }}" class="px-3 py-1.5 rounded-lg transition flex items-center space-x-1.5 {{ $currentTab === 'collections' ? 'bg-white text-slate-900 font-semibold shadow-2xs' : 'text-slate-600 hover:text-slate-900' }}">
|
||||
<i data-lucide="folder-sync" class="w-3.5 h-3.5"></i>
|
||||
<span>Gekoppelde Collecties</span>
|
||||
<span class="px-2 py-0.5 rounded-md text-xs {{ $currentTab === 'collections' ? 'bg-slate-950 text-amber-400' : 'bg-slate-800 text-slate-400' }}">
|
||||
<span class="px-1.5 py-0.2 rounded-md text-[10px] {{ $currentTab === 'collections' ? 'bg-slate-100 text-slate-700' : 'bg-slate-200/60 text-slate-600' }}">
|
||||
{{ $trackedCollections->count() }}
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<a href="{{ route('admin.makerworld.staging') }}" class="px-4 py-2 rounded-xl transition flex items-center space-x-2 text-slate-400 hover:text-white hover:bg-slate-900">
|
||||
<i data-lucide="layers" class="w-4 h-4"></i>
|
||||
<span>Artikel Beheer (Staging)</span>
|
||||
<a href="{{ route('admin.makerworld.staging') }}" class="px-3 py-1.5 rounded-lg transition flex items-center space-x-1.5 text-slate-600 hover:text-slate-900">
|
||||
<i data-lucide="layers" class="w-3.5 h-3.5"></i>
|
||||
<span>Artikel Beheer</span>
|
||||
@if($stagedCount > 0)
|
||||
<span class="px-2 py-0.5 rounded-md text-xs bg-amber-400 text-slate-950 font-black">
|
||||
{{ $stagedCount }} nieuw
|
||||
<span class="px-1.5 py-0.2 rounded-md text-[10px] bg-slate-900 text-white font-semibold">
|
||||
{{ $stagedCount }}
|
||||
</span>
|
||||
@endif
|
||||
</a>
|
||||
|
||||
<a href="{{ route('admin.makerworld.index', ['tab' => 'quick']) }}" class="px-4 py-2 rounded-xl transition flex items-center space-x-2 {{ $currentTab === 'quick' ? 'bg-amber-400 text-slate-950 font-black' : 'text-slate-400 hover:text-white hover:bg-slate-900' }}">
|
||||
<i data-lucide="zap" class="w-4 h-4"></i>
|
||||
<span>Los Model Importeren</span>
|
||||
<a href="{{ route('admin.makerworld.index', ['tab' => 'quick']) }}" class="px-3 py-1.5 rounded-lg transition flex items-center space-x-1.5 {{ $currentTab === 'quick' ? 'bg-white text-slate-900 font-semibold shadow-2xs' : 'text-slate-600 hover:text-slate-900' }}">
|
||||
<i data-lucide="zap" class="w-3.5 h-3.5"></i>
|
||||
<span>Los Model</span>
|
||||
</a>
|
||||
|
||||
<a href="{{ route('admin.makerworld.index', ['tab' => 'auth']) }}" class="px-4 py-2 rounded-xl transition flex items-center space-x-2 {{ $currentTab === 'auth' ? 'bg-amber-400 text-slate-950 font-black' : 'text-slate-400 hover:text-white hover:bg-slate-900' }}">
|
||||
<i data-lucide="key" class="w-4 h-4"></i>
|
||||
<span>MakerWorld Login & Token</span>
|
||||
<a href="{{ route('admin.makerworld.index', ['tab' => 'auth']) }}" class="px-3 py-1.5 rounded-lg transition flex items-center space-x-1.5 {{ $currentTab === 'auth' ? 'bg-white text-slate-900 font-semibold shadow-2xs' : 'text-slate-600 hover:text-slate-900' }}">
|
||||
<i data-lucide="key" class="w-3.5 h-3.5"></i>
|
||||
<span>MakerWorld Login</span>
|
||||
@if($isAuthenticated)
|
||||
<span class="w-2 h-2 rounded-full bg-emerald-400"></span>
|
||||
<span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span>
|
||||
@endif
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- TAB 1: COLLECTIONS & AUTO-SYNC -->
|
||||
@if($currentTab === 'collections')
|
||||
<div class="space-y-8">
|
||||
<div class="space-y-6">
|
||||
|
||||
<!-- Add Collection Form -->
|
||||
<div class="bg-slate-900/90 rounded-3xl p-6 sm:p-8 border border-slate-800 shadow-xl">
|
||||
<div class="bg-white rounded-2xl p-6 border border-slate-200/80 shadow-xs">
|
||||
<div class="max-w-3xl">
|
||||
<div class="flex items-center space-x-2 text-xs font-bold uppercase tracking-wider text-amber-400 mb-1">
|
||||
<i data-lucide="plus-circle" class="w-4 h-4"></i>
|
||||
<span>Nieuwe Collectie Toevoegen</span>
|
||||
<div class="flex items-center space-x-2 text-xs font-semibold text-slate-700 mb-1">
|
||||
<i data-lucide="plus" class="w-3.5 h-3.5 text-slate-500"></i>
|
||||
<span>Nieuwe collectie koppelen</span>
|
||||
</div>
|
||||
<h2 class="text-xl font-black text-white">MakerWorld Collectie Koppelen aan Auto-Sync</h2>
|
||||
<p class="text-xs text-slate-400 mt-1">
|
||||
Voer de link in van een collectie (bijv. <code class="text-amber-300 font-mono">https://makerworld.com/nl/collections/9205051</code>) of je gebruikersprofiel <code class="text-amber-300 font-mono">https://makerworld.com/nl/@user_1718037659/collections</code>.
|
||||
<h2 class="text-base font-bold text-slate-900">MakerWorld Collectie toevoegen aan Auto-Sync</h2>
|
||||
<p class="text-xs text-slate-500 mt-0.5">
|
||||
Voer een collectie URL in of je gebruikersprofiel <code class="text-slate-700 font-mono bg-slate-100 px-1 py-0.5 rounded">https://makerworld.com/nl/@user_1718037659/collections</code>.
|
||||
</p>
|
||||
|
||||
<form action="{{ route('admin.makerworld.collections.add') }}" method="POST" class="mt-6 space-y-4">
|
||||
<form action="{{ route('admin.makerworld.collections.add') }}" method="POST" class="mt-4 space-y-3.5">
|
||||
@csrf
|
||||
|
||||
<div>
|
||||
<label class="block text-xs font-bold text-slate-300 uppercase tracking-wider mb-2">
|
||||
Collectie URL, Model Collectie-ID of Gebruikersprofiel
|
||||
<label class="block text-xs font-medium text-slate-700 mb-1.5">
|
||||
Collectie URL, ID of Gebruikersprofiel
|
||||
</label>
|
||||
<div class="relative">
|
||||
<div class="absolute inset-y-0 left-0 pl-3.5 flex items-center pointer-events-none text-slate-500">
|
||||
<i data-lucide="link" class="w-5 h-5"></i>
|
||||
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-slate-400">
|
||||
<i data-lucide="link" class="w-4 h-4"></i>
|
||||
</div>
|
||||
<input
|
||||
type="text"
|
||||
name="collection_input"
|
||||
value="{{ old('collection_input', 'https://makerworld.com/nl/@user_1718037659/collections') }}"
|
||||
placeholder="bijv. https://makerworld.com/nl/@user_1718037659/collections of 9205051..."
|
||||
class="w-full pl-11 pr-4 py-3 bg-slate-950 border border-slate-800 rounded-2xl text-white placeholder-slate-600 focus:outline-none focus:ring-2 focus:ring-amber-400 text-sm font-mono"
|
||||
placeholder="bijv. https://makerworld.com/nl/@user_1718037659/collections"
|
||||
class="w-full pl-9 pr-3.5 py-2.5 bg-slate-50 border border-slate-200 rounded-xl text-slate-900 placeholder-slate-400 focus:bg-white focus:outline-none focus:ring-2 focus:ring-slate-900/10 focus:border-slate-900 text-xs font-mono"
|
||||
required
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4 pt-2">
|
||||
<div class="flex items-center space-x-6 text-xs text-slate-300">
|
||||
<div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3 pt-1">
|
||||
<div class="flex items-center space-x-4 text-xs text-slate-600">
|
||||
<label class="flex items-center space-x-2 cursor-pointer">
|
||||
<input type="checkbox" name="is_active_sync" value="1" checked class="w-4 h-4 rounded text-amber-500 bg-slate-950 border-slate-700 focus:ring-amber-400">
|
||||
<span class="font-bold">Iedere 10 minuten automatisch controleren</span>
|
||||
<input type="checkbox" name="is_active_sync" value="1" checked class="w-4 h-4 rounded text-slate-900 border-slate-300 focus:ring-slate-900">
|
||||
<span>Elke 10 minuten synchroniseren</span>
|
||||
</label>
|
||||
|
||||
<label class="flex items-center space-x-2 cursor-pointer">
|
||||
<input type="checkbox" name="sync_now" value="1" checked class="w-4 h-4 rounded text-amber-500 bg-slate-950 border-slate-700 focus:ring-amber-400">
|
||||
<span class="font-bold">Direct eerste import uitvoeren</span>
|
||||
<input type="checkbox" name="sync_now" value="1" checked class="w-4 h-4 rounded text-slate-900 border-slate-300 focus:ring-slate-900">
|
||||
<span>Direct importeren</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="px-6 py-3 bg-amber-400 hover:bg-amber-300 text-slate-950 font-black rounded-2xl text-xs uppercase tracking-wider shadow-lg shadow-amber-400/20 transition flex items-center justify-center space-x-2 shrink-0">
|
||||
<i data-lucide="download-cloud" class="w-4 h-4"></i>
|
||||
<span>Collectie Koppelen</span>
|
||||
<button type="submit" class="px-4 py-2 bg-slate-900 hover:bg-slate-800 text-white font-medium rounded-xl text-xs transition flex items-center justify-center space-x-1.5 shadow-xs shrink-0 cursor-pointer">
|
||||
<i data-lucide="download" class="w-3.5 h-3.5"></i>
|
||||
<span>Koppelen & Synchroniseren</span>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
@@ -215,111 +208,101 @@
|
||||
</div>
|
||||
|
||||
<!-- Tracked Collections List -->
|
||||
<div class="space-y-4">
|
||||
<div class="space-y-3">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<h2 class="text-lg font-black text-white flex items-center space-x-2">
|
||||
<i data-lucide="check-check" class="w-5 h-5 text-emerald-400"></i>
|
||||
<span>Actief Gevolgde Collecties (Auto-Sync)</span>
|
||||
</h2>
|
||||
<p class="text-xs text-slate-400">
|
||||
Modellen uit deze collecties worden binnengehaald als concepten in <a href="{{ route('admin.makerworld.staging') }}" class="text-amber-400 underline font-bold">Artikel Beheer</a>.
|
||||
<h2 class="text-sm font-bold text-slate-900">Actief gevolgde collecties ({{ $trackedCollections->count() }})</h2>
|
||||
<p class="text-xs text-slate-500">
|
||||
Prints uit deze collecties komen binnen als concepten in <a href="{{ route('admin.makerworld.staging') }}" class="text-slate-900 underline font-medium">Artikel Beheer</a>.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@if($trackedCollections->isEmpty())
|
||||
<div class="text-center py-12 bg-slate-900/60 rounded-3xl border border-slate-800 p-8">
|
||||
<div class="w-16 h-16 rounded-2xl bg-slate-800 flex items-center justify-center text-slate-400 mx-auto mb-4">
|
||||
<i data-lucide="folder-x" class="w-8 h-8"></i>
|
||||
<div class="text-center py-10 bg-white rounded-2xl border border-slate-200/80 p-6">
|
||||
<div class="w-10 h-10 rounded-xl bg-slate-100 flex items-center justify-center text-slate-400 mx-auto mb-2">
|
||||
<i data-lucide="folder-x" class="w-5 h-5"></i>
|
||||
</div>
|
||||
<h3 class="text-base font-bold text-white">Nog geen collecties gekoppeld</h3>
|
||||
<p class="text-xs text-slate-400 max-w-md mx-auto mt-1">
|
||||
Voeg hierboven een collectie toe of gebruik je gebruikersnaam <code class="text-amber-400 font-mono">@user_1718037659</code> om automatische 10-minuten import te starten.
|
||||
<h3 class="text-xs font-semibold text-slate-800">Nog geen collecties gekoppeld</h3>
|
||||
<p class="text-xs text-slate-500 max-w-sm mx-auto mt-0.5">
|
||||
Koppel hierboven je profiel om automatische 10-minuten import te starten.
|
||||
</p>
|
||||
</div>
|
||||
@else
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
@foreach($trackedCollections as $collection)
|
||||
<div class="bg-slate-900 rounded-3xl border border-slate-800 overflow-hidden flex flex-col justify-between shadow-lg hover:border-slate-700 transition">
|
||||
<div class="bg-white rounded-2xl border border-slate-200/80 overflow-hidden flex flex-col justify-between shadow-2xs hover:border-slate-300 transition">
|
||||
<div>
|
||||
<!-- Collection Header & Cover -->
|
||||
<div class="relative h-40 bg-slate-950 overflow-hidden">
|
||||
<!-- Cover -->
|
||||
<div class="relative h-36 bg-slate-100 overflow-hidden">
|
||||
@if($collection->cover_url)
|
||||
<img src="{{ $collection->cover_url }}" alt="{{ $collection->name }}" class="w-full h-full object-cover">
|
||||
@else
|
||||
<div class="w-full h-full flex items-center justify-center bg-gradient-to-tr from-slate-900 to-slate-800 text-slate-600">
|
||||
<i data-lucide="image" class="w-12 h-12"></i>
|
||||
<div class="w-full h-full flex items-center justify-center bg-slate-100 text-slate-400">
|
||||
<i data-lucide="image" class="w-8 h-8"></i>
|
||||
</div>
|
||||
@endif
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-slate-900 via-transparent to-transparent"></div>
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-slate-950/70 via-transparent to-transparent"></div>
|
||||
|
||||
<!-- Auto-sync badge -->
|
||||
<div class="absolute top-3 right-3">
|
||||
<!-- Badge -->
|
||||
<div class="absolute top-2.5 right-2.5">
|
||||
@if($collection->is_active_sync)
|
||||
<span class="px-2.5 py-1 rounded-full text-[10px] font-black uppercase tracking-wider bg-emerald-500/90 text-white backdrop-blur flex items-center space-x-1 shadow-md">
|
||||
<span class="px-2 py-0.5 rounded-full text-[10px] font-semibold bg-emerald-500/90 text-white backdrop-blur flex items-center space-x-1 shadow-xs">
|
||||
<span class="w-1.5 h-1.5 rounded-full bg-white animate-pulse"></span>
|
||||
<span>Auto-Sync 10m</span>
|
||||
<span>10m Sync</span>
|
||||
</span>
|
||||
@else
|
||||
<span class="px-2.5 py-1 rounded-full text-[10px] font-black uppercase tracking-wider bg-slate-800 text-slate-400 backdrop-blur border border-slate-700">
|
||||
<span class="px-2 py-0.5 rounded-full text-[10px] font-medium bg-slate-900/80 text-slate-300 backdrop-blur">
|
||||
Gepauzeerd
|
||||
</span>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
<div class="absolute bottom-3 left-3 right-3">
|
||||
<div class="text-[10px] font-bold text-amber-400 uppercase tracking-wider">
|
||||
<div class="absolute bottom-2.5 left-3 right-3 text-white">
|
||||
<div class="text-[10px] text-slate-300 font-mono">
|
||||
ID: #{{ $collection->makerworld_collection_id }} • {{ $collection->user_handle ?? 'MakerWorld' }}
|
||||
</div>
|
||||
<h3 class="text-base font-black text-white truncate" title="{{ $collection->name }}">
|
||||
<h3 class="text-sm font-bold truncate" title="{{ $collection->name }}">
|
||||
{{ $collection->name }}
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Body Stats -->
|
||||
<div class="p-5 space-y-3">
|
||||
<div class="p-4 space-y-3">
|
||||
@if($collection->description)
|
||||
<p class="text-xs text-slate-400 line-clamp-2">
|
||||
<p class="text-xs text-slate-500 line-clamp-2">
|
||||
{{ $collection->description }}
|
||||
</p>
|
||||
@endif
|
||||
|
||||
<div class="grid grid-cols-3 gap-2 py-2 px-3 bg-slate-950 rounded-2xl border border-slate-800 text-center">
|
||||
<div class="grid grid-cols-3 gap-2 py-2 px-3 bg-slate-50 rounded-xl text-center text-xs">
|
||||
<div>
|
||||
<div class="text-[10px] font-bold text-slate-500 uppercase">Totaal</div>
|
||||
<div class="text-sm font-black text-white">{{ $collection->items_count }}</div>
|
||||
<div class="text-[10px] text-slate-400 font-medium">Totaal</div>
|
||||
<div class="font-bold text-slate-800">{{ $collection->items_count }}</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-[10px] font-bold text-amber-400 uppercase">Concept</div>
|
||||
<div class="text-sm font-black text-amber-400">{{ $collection->draft_products_count }}</div>
|
||||
<div class="text-[10px] text-amber-600 font-medium">Concept</div>
|
||||
<div class="font-bold text-amber-700">{{ $collection->draft_products_count }}</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-[10px] font-bold text-emerald-400 uppercase">Live</div>
|
||||
<div class="text-sm font-black text-emerald-400">{{ $collection->published_products_count }}</div>
|
||||
<div class="text-[10px] text-emerald-600 font-medium">Live</div>
|
||||
<div class="font-bold text-emerald-700">{{ $collection->published_products_count }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-[11px] text-slate-400 space-y-1">
|
||||
<div class="text-[11px] text-slate-500 space-y-0.5">
|
||||
<div class="flex items-center justify-between">
|
||||
<span>Laatste controle:</span>
|
||||
<span class="font-mono text-slate-300 font-bold">
|
||||
<span class="font-mono text-slate-700 font-medium">
|
||||
{{ $collection->last_synced_at ? $collection->last_synced_at->diffForHumans() : 'Nog niet' }}
|
||||
@if($collection->last_synced_at)
|
||||
<span class="text-[10px] text-slate-500 font-normal">({{ $collection->last_synced_at->format('H:i:s') }})</span>
|
||||
<span class="text-[10px] text-slate-400 font-normal">({{ $collection->last_synced_at->format('H:i') }})</span>
|
||||
@endif
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between text-[10px]">
|
||||
<span class="text-slate-500">Auto-sync interval:</span>
|
||||
<span class="font-bold text-emerald-400 flex items-center space-x-1">
|
||||
<span class="w-1.5 h-1.5 rounded-full bg-emerald-400 animate-pulse"></span>
|
||||
<span>Iedere 5 min</span>
|
||||
</span>
|
||||
</div>
|
||||
@if($collection->last_sync_message)
|
||||
<div class="text-[10px] text-slate-500 truncate" title="{{ $collection->last_sync_message }}">
|
||||
<div class="text-[10px] text-slate-400 truncate" title="{{ $collection->last_sync_message }}">
|
||||
Status: {{ $collection->last_sync_message }}
|
||||
</div>
|
||||
@endif
|
||||
@@ -328,32 +311,29 @@
|
||||
</div>
|
||||
|
||||
<!-- Action Buttons -->
|
||||
<div class="p-4 bg-slate-950/60 border-t border-slate-800 flex items-center justify-between gap-2">
|
||||
<div class="flex items-center space-x-2">
|
||||
<!-- Manual Sync Now -->
|
||||
<div class="p-3 bg-slate-50/60 border-t border-slate-100 flex items-center justify-between gap-2">
|
||||
<div class="flex items-center space-x-1.5">
|
||||
<form action="{{ route('admin.makerworld.collections.sync', $collection) }}" method="POST">
|
||||
@csrf
|
||||
<button type="submit" title="Nu direct synchroniseren" class="px-3 py-1.5 rounded-xl bg-slate-800 hover:bg-slate-700 text-white text-xs font-bold transition flex items-center space-x-1 border border-slate-700">
|
||||
<i data-lucide="refresh-cw" class="w-3.5 h-3.5 text-amber-400"></i>
|
||||
<span>Nu Syncen</span>
|
||||
<button type="submit" class="px-2.5 py-1.5 rounded-lg bg-white border border-slate-200 text-slate-700 hover:text-slate-900 text-xs font-medium transition flex items-center space-x-1 cursor-pointer">
|
||||
<i data-lucide="refresh-cw" class="w-3 h-3 text-slate-500"></i>
|
||||
<span>Sync nu</span>
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<!-- Toggle Active Auto-sync -->
|
||||
<form action="{{ route('admin.makerworld.collections.toggle', $collection) }}" method="POST">
|
||||
@csrf
|
||||
<button type="submit" title="{{ $collection->is_active_sync ? 'Auto-sync pauzeren' : 'Auto-sync aanzetten' }}" class="px-2.5 py-1.5 rounded-xl text-xs font-bold transition border {{ $collection->is_active_sync ? 'bg-amber-400/10 text-amber-400 border-amber-400/30 hover:bg-amber-400/20' : 'bg-emerald-500/10 text-emerald-400 border-emerald-500/30 hover:bg-emerald-500/20' }}">
|
||||
<button type="submit" class="px-2 py-1.5 rounded-lg text-xs font-medium transition border cursor-pointer {{ $collection->is_active_sync ? 'bg-white text-slate-600 border-slate-200 hover:text-slate-900' : 'bg-emerald-50 text-emerald-700 border-emerald-200 hover:bg-emerald-100' }}">
|
||||
{{ $collection->is_active_sync ? 'Pauzeren' : 'Inschakelen' }}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- Delete Collection -->
|
||||
<form action="{{ route('admin.makerworld.collections.delete', $collection) }}" method="POST" onsubmit="return confirm('Weet je zeker dat je deze collectie wilt ontkoppelen?');">
|
||||
@csrf
|
||||
@method('DELETE')
|
||||
<button type="submit" title="Collectie verwijderen" class="p-2 rounded-xl text-slate-500 hover:text-rose-400 hover:bg-rose-500/10 transition">
|
||||
<i data-lucide="trash-2" class="w-4 h-4"></i>
|
||||
<button type="submit" title="Collectie verwijderen" class="p-1.5 rounded-lg text-slate-400 hover:text-rose-600 hover:bg-rose-50 transition cursor-pointer">
|
||||
<i data-lucide="trash-2" class="w-3.5 h-3.5"></i>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
@@ -366,51 +346,49 @@
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<!-- TAB: COMMUNITY / FAVORITES SHOWCASE -->
|
||||
<!-- TAB: COMMUNITY & POPULAIRE MODELLEN -->
|
||||
@if(in_array($currentTab, ['community', 'favorites']))
|
||||
<div class="space-y-6">
|
||||
<div class="space-y-4">
|
||||
<div>
|
||||
<h2 class="text-xl font-black text-white flex items-center space-x-2">
|
||||
<i data-lucide="compass" class="w-5 h-5 text-amber-400"></i>
|
||||
<span>MakerWorld Modellen Showcase</span>
|
||||
</h2>
|
||||
<p class="text-xs text-slate-400 mt-1">
|
||||
Selecteer modellen om direct toe te voegen aan je webshop catalogus.
|
||||
</p>
|
||||
<h2 class="text-base font-bold text-slate-900">Populaire MakerWorld Modellen</h2>
|
||||
<p class="text-xs text-slate-500 mt-0.5">Direct importeren naar je catalogus of artikelbeheer.</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
|
||||
@forelse($models as $model)
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
|
||||
@forelse($models ?? [] as $model)
|
||||
@php
|
||||
$mId = $model['id'] ?? 0;
|
||||
$cover = $model['cover'] ?? $model['coverUrl'] ?? 'https://images.unsplash.com/photo-1581092160607-ee22621dd758?auto=format&fit=crop&w=600&q=80';
|
||||
$cover = $model['cover'] ?? $model['coverUrl'] ?? '';
|
||||
$title = $model['title'] ?? 'MakerWorld Model #' . $mId;
|
||||
$author = $model['designCreator']['name'] ?? $model['designCreator']['handle'] ?? 'MakerWorld Maker';
|
||||
$author = $model['designCreator']['name'] ?? $model['designCreator']['handle'] ?? 'MakerWorld';
|
||||
@endphp
|
||||
<div class="bg-slate-900 rounded-3xl border border-slate-800 overflow-hidden flex flex-col justify-between shadow-lg">
|
||||
<div class="relative aspect-4/3 overflow-hidden bg-slate-950">
|
||||
<div class="bg-white rounded-2xl border border-slate-200/80 overflow-hidden shadow-2xs flex flex-col justify-between">
|
||||
<div class="aspect-4/3 bg-slate-100 overflow-hidden relative">
|
||||
@if($cover)
|
||||
<img src="{{ $cover }}" alt="{{ $title }}" class="w-full h-full object-cover">
|
||||
@else
|
||||
<div class="w-full h-full flex items-center justify-center text-slate-300">
|
||||
<i data-lucide="image" class="w-8 h-8"></i>
|
||||
</div>
|
||||
<div class="p-4 flex flex-col flex-1">
|
||||
<div class="text-[10px] text-slate-500 mb-1 flex items-center justify-between">
|
||||
<span class="truncate">Door {{ $author }}</span>
|
||||
<span class="font-mono">#{{ $mId }}</span>
|
||||
@endif
|
||||
</div>
|
||||
<div class="p-3.5 space-y-2 flex-1 flex flex-col justify-between">
|
||||
<div>
|
||||
<div class="text-[10px] text-slate-400 font-mono">#{{ $mId }} • {{ $author }}</div>
|
||||
<h3 class="text-xs font-semibold text-slate-900 line-clamp-2 mt-0.5" title="{{ $title }}">{{ $title }}</h3>
|
||||
</div>
|
||||
<h3 class="text-sm font-bold text-white line-clamp-2 leading-snug mb-3 flex-1">
|
||||
{{ $title }}
|
||||
</h3>
|
||||
<form action="{{ route('admin.makerworld.import') }}" method="POST">
|
||||
@csrf
|
||||
<input type="hidden" name="makerworld_id" value="{{ $mId }}">
|
||||
<button type="submit" class="w-full py-2 px-3 rounded-xl bg-amber-400 hover:bg-amber-300 text-slate-950 font-black text-xs uppercase tracking-wider transition">
|
||||
Importeer Model
|
||||
<button type="submit" class="w-full py-1.5 px-3 rounded-lg bg-slate-900 hover:bg-slate-800 text-white font-medium text-xs transition cursor-pointer shadow-xs">
|
||||
Importeren
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
@empty
|
||||
<div class="col-span-full py-12 text-center text-slate-400 text-xs">
|
||||
Geen modellen gevonden in deze weergave.
|
||||
<div class="col-span-full py-12 text-center text-slate-400 text-xs bg-white rounded-2xl border border-slate-200">
|
||||
Geen modellen gevonden in dit overzicht.
|
||||
</div>
|
||||
@endforelse
|
||||
</div>
|
||||
@@ -419,108 +397,108 @@
|
||||
|
||||
<!-- TAB 2: QUICK SINGLE MODEL IMPORT -->
|
||||
@if($currentTab === 'quick')
|
||||
<div class="bg-slate-900/90 rounded-3xl p-6 sm:p-8 border border-slate-800 shadow-xl space-y-6">
|
||||
<div class="bg-white rounded-2xl p-6 border border-slate-200/80 shadow-xs space-y-4">
|
||||
<div>
|
||||
<h2 class="text-xl font-black text-white flex items-center space-x-2">
|
||||
<i data-lucide="zap" class="w-5 h-5 text-amber-400"></i>
|
||||
<span>Los Model Importeren via MakerWorld URL of ID</span>
|
||||
<h2 class="text-base font-bold text-slate-900 flex items-center space-x-2">
|
||||
<i data-lucide="zap" class="w-4 h-4 text-slate-700"></i>
|
||||
<span>Los model importeren</span>
|
||||
</h2>
|
||||
<p class="text-xs text-slate-400 mt-1">
|
||||
Plak de URL van een specifiek model op MakerWorld (bijv. <code class="text-amber-300 font-mono">https://makerworld.com/nl/models/55866</code>) om het direct op te halen met alle foto's en printgegevens.
|
||||
<p class="text-xs text-slate-500 mt-0.5">
|
||||
Plak de URL van een specifiek MakerWorld model (bijv. <code class="text-slate-700 font-mono bg-slate-100 px-1 py-0.5 rounded">https://makerworld.com/nl/models/55866</code>) om het direct op te halen met alle foto's en printgegevens.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<form @submit.prevent="fetchQuickPreview()" class="flex flex-col sm:flex-row gap-3">
|
||||
<form @submit.prevent="fetchQuickPreview()" class="flex flex-col sm:flex-row gap-2.5">
|
||||
<div class="relative flex-1">
|
||||
<div class="absolute inset-y-0 left-0 pl-3.5 flex items-center pointer-events-none text-slate-500">
|
||||
<i data-lucide="link" class="w-5 h-5"></i>
|
||||
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-slate-400">
|
||||
<i data-lucide="link" class="w-4 h-4"></i>
|
||||
</div>
|
||||
<input
|
||||
type="text"
|
||||
x-model="quickInput"
|
||||
placeholder="https://makerworld.com/nl/models/55866 of 55866..."
|
||||
class="w-full pl-11 pr-4 py-3 bg-slate-950 border border-slate-800 rounded-2xl text-white placeholder-slate-600 focus:outline-none focus:ring-2 focus:ring-amber-400 text-sm font-mono"
|
||||
class="w-full pl-9 pr-3.5 py-2.5 bg-slate-50 border border-slate-200 rounded-xl text-slate-900 placeholder-slate-400 focus:bg-white focus:outline-none focus:ring-2 focus:ring-slate-900/10 focus:border-slate-900 text-xs font-mono"
|
||||
required
|
||||
>
|
||||
</div>
|
||||
<button
|
||||
type="submit"
|
||||
:disabled="isLoadingQuick"
|
||||
class="px-6 py-3 bg-amber-400 hover:bg-amber-300 disabled:opacity-50 text-slate-950 font-black rounded-2xl text-xs uppercase tracking-wider flex items-center justify-center space-x-2 shadow-lg shadow-amber-400/20 transition shrink-0"
|
||||
class="px-4 py-2.5 bg-slate-900 hover:bg-slate-800 disabled:opacity-50 text-white font-medium rounded-xl text-xs flex items-center justify-center space-x-1.5 shadow-xs transition shrink-0 cursor-pointer"
|
||||
>
|
||||
<template x-if="isLoadingQuick">
|
||||
<div class="flex items-center space-x-2">
|
||||
<i data-lucide="loader-2" class="w-4 h-4 animate-spin"></i>
|
||||
<div class="flex items-center space-x-1.5">
|
||||
<i data-lucide="loader-2" class="w-3.5 h-3.5 animate-spin"></i>
|
||||
<span>Ophalen...</span>
|
||||
</div>
|
||||
</template>
|
||||
<template x-if="!isLoadingQuick">
|
||||
<div class="flex items-center space-x-2">
|
||||
<i data-lucide="search" class="w-4 h-4"></i>
|
||||
<span>Gegevens Bekijken</span>
|
||||
<div class="flex items-center space-x-1.5">
|
||||
<i data-lucide="search" class="w-3.5 h-3.5"></i>
|
||||
<span>Gegevens ophalen</span>
|
||||
</div>
|
||||
</template>
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<!-- Preview Area -->
|
||||
<div x-show="quickPreview" x-cloak class="mt-6 p-6 rounded-3xl bg-slate-950 border border-slate-800">
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<div x-show="quickPreview" x-cloak class="mt-4 p-5 rounded-2xl bg-slate-50 border border-slate-200">
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-5">
|
||||
<div>
|
||||
<img :src="quickPreview?.model?.image_url" alt="" class="w-full aspect-square object-cover rounded-2xl bg-slate-900 border border-slate-800">
|
||||
<div class="mt-2 flex gap-2 overflow-x-auto py-1">
|
||||
<img :src="quickPreview?.model?.image_url" alt="" class="w-full aspect-square object-cover rounded-xl bg-white border border-slate-200">
|
||||
<div class="mt-2 flex gap-1.5 overflow-x-auto py-1">
|
||||
<template x-for="(pic, idx) in quickPreview?.model?.gallery_images" :key="idx">
|
||||
<img :src="pic" alt="" class="w-12 h-12 object-cover rounded-lg border border-slate-800 shrink-0">
|
||||
<img :src="pic" alt="" class="w-10 h-10 object-cover rounded-lg border border-slate-200 shrink-0">
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="md:col-span-2 space-y-4">
|
||||
<div class="md:col-span-2 space-y-3">
|
||||
<div>
|
||||
<div class="text-xs text-amber-400 font-bold uppercase tracking-wider" x-text="'MakerWorld #' + quickPreview?.model?.makerworld_id"></div>
|
||||
<h3 class="text-xl font-black text-white" x-text="quickPreview?.model?.name"></h3>
|
||||
<p class="text-xs text-slate-400 mt-1" x-text="'Maker: ' + quickPreview?.model?.makerworld_author"></p>
|
||||
<div class="text-[11px] font-semibold text-slate-500 font-mono" x-text="'MakerWorld #' + quickPreview?.model?.makerworld_id"></div>
|
||||
<h3 class="text-base font-bold text-slate-900" x-text="quickPreview?.model?.name"></h3>
|
||||
<p class="text-xs text-slate-500" x-text="'Maker: ' + quickPreview?.model?.makerworld_author"></p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-2 sm:grid-cols-3 gap-3 p-3 rounded-2xl bg-slate-900 border border-slate-800 text-xs">
|
||||
<div class="grid grid-cols-3 gap-2.5 p-3 rounded-xl bg-white border border-slate-200 text-xs">
|
||||
<div>
|
||||
<span class="text-slate-500 block">Printtijd</span>
|
||||
<span class="font-bold text-white" x-text="(quickPreview?.model?.print_time_hours || '?') + ' uur'"></span>
|
||||
<span class="text-slate-400 block text-[10px]">Printtijd</span>
|
||||
<span class="font-bold text-slate-800" x-text="(quickPreview?.model?.print_time_hours || '?') + ' uur'"></span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="text-slate-500 block">Gewicht</span>
|
||||
<span class="font-bold text-white" x-text="(quickPreview?.model?.weight_grams || '?') + ' gram'"></span>
|
||||
<span class="text-slate-400 block text-[10px]">Gewicht</span>
|
||||
<span class="font-bold text-slate-800" x-text="(quickPreview?.model?.weight_grams || '?') + ' gram'"></span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="text-slate-500 block">Adviesprijs</span>
|
||||
<span class="font-black text-amber-400" x-text="'€ ' + quickPreview?.model?.base_price"></span>
|
||||
<span class="text-slate-400 block text-[10px]">Adviesprijs</span>
|
||||
<span class="font-bold text-slate-900" x-text="'€ ' + quickPreview?.model?.base_price"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Import form -->
|
||||
<form action="{{ route('admin.makerworld.import') }}" method="POST" class="pt-4 border-t border-slate-800 flex flex-wrap gap-4 items-end">
|
||||
<form action="{{ route('admin.makerworld.import') }}" method="POST" class="pt-3 border-t border-slate-200 flex flex-wrap gap-3 items-end">
|
||||
@csrf
|
||||
<input type="hidden" name="makerworld_id" :value="quickPreview?.model?.makerworld_id">
|
||||
|
||||
<div class="w-48">
|
||||
<label class="block text-[11px] font-bold text-slate-400 uppercase mb-1">Categorie</label>
|
||||
<select name="category_id" class="w-full px-3 py-2 bg-slate-900 border border-slate-700 rounded-xl text-white text-xs font-bold focus:ring-amber-400">
|
||||
<div class="w-44">
|
||||
<label class="block text-[11px] font-medium text-slate-600 mb-1">Categorie</label>
|
||||
<select name="category_id" class="w-full px-2.5 py-1.5 bg-white border border-slate-200 rounded-lg text-slate-900 text-xs">
|
||||
@foreach($categories as $cat)
|
||||
<option value="{{ $cat->id }}">{{ $cat->name }}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="w-32">
|
||||
<label class="block text-[11px] font-bold text-slate-400 uppercase mb-1">Verkoopprijs (€)</label>
|
||||
<input type="number" step="0.01" name="custom_price" :value="quickPreview?.model?.base_price" class="w-full px-3 py-2 bg-slate-900 border border-slate-700 rounded-xl text-white text-xs font-bold focus:ring-amber-400">
|
||||
<div class="w-28">
|
||||
<label class="block text-[11px] font-medium text-slate-600 mb-1">Prijs (€)</label>
|
||||
<input type="number" step="0.01" name="custom_price" :value="quickPreview?.model?.base_price" class="w-full px-2.5 py-1.5 bg-white border border-slate-200 rounded-lg text-slate-900 text-xs font-semibold">
|
||||
</div>
|
||||
|
||||
<div class="flex items-center space-x-3">
|
||||
<button type="submit" name="status" value="published" class="px-5 py-2.5 bg-emerald-500 hover:bg-emerald-400 text-white font-black rounded-xl text-xs uppercase tracking-wider transition">
|
||||
✓ Direct Publiceren
|
||||
<div class="flex items-center space-x-2">
|
||||
<button type="submit" name="status" value="published" class="px-3.5 py-1.5 bg-slate-900 hover:bg-slate-800 text-white font-medium rounded-lg text-xs transition shadow-xs cursor-pointer">
|
||||
Direct Publiceren
|
||||
</button>
|
||||
<button type="submit" name="status" value="draft" class="px-5 py-2.5 bg-slate-800 hover:bg-slate-700 text-amber-300 font-bold rounded-xl text-xs uppercase tracking-wider transition border border-slate-700">
|
||||
<button type="submit" name="status" value="draft" class="px-3.5 py-1.5 bg-white hover:bg-slate-50 text-slate-700 font-medium rounded-lg text-xs transition border border-slate-200 cursor-pointer">
|
||||
Naar Concepten
|
||||
</button>
|
||||
</div>
|
||||
@@ -533,70 +511,70 @@
|
||||
|
||||
<!-- TAB 3: AUTH & CREDENTIALS -->
|
||||
@if($currentTab === 'auth')
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<!-- Login with MakerWorld Credentials -->
|
||||
<div class="bg-slate-900/90 rounded-3xl p-6 sm:p-8 border border-slate-800 shadow-xl space-y-4">
|
||||
<div class="bg-white rounded-2xl p-6 border border-slate-200/80 shadow-xs space-y-4">
|
||||
<div class="flex items-center space-x-3">
|
||||
<div class="w-10 h-10 rounded-2xl bg-amber-400/10 text-amber-400 flex items-center justify-center font-bold">
|
||||
<div class="w-10 h-10 rounded-xl bg-slate-100 text-slate-700 flex items-center justify-center">
|
||||
<i data-lucide="shield-check" class="w-5 h-5"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h2 class="text-lg font-black text-white">Inloggen met MakerWorld</h2>
|
||||
<p class="text-xs text-slate-400">Bambu Lab / MakerWorld inloggegevens</p>
|
||||
<h2 class="text-sm font-bold text-slate-900">Inloggen met MakerWorld</h2>
|
||||
<p class="text-xs text-slate-500">Bambu Lab / MakerWorld inloggegevens</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form action="{{ route('admin.makerworld.login') }}" method="POST" class="space-y-4 pt-2">
|
||||
<form action="{{ route('admin.makerworld.login') }}" method="POST" class="space-y-3 pt-1">
|
||||
@csrf
|
||||
<div>
|
||||
<label class="block text-xs font-bold text-slate-300 uppercase mb-1">E-mailadres MakerWorld</label>
|
||||
<input type="text" name="account" value="{{ old('account', 'info@jouwdriedee.nl') }}" class="w-full px-4 py-2.5 bg-slate-950 border border-slate-800 rounded-xl text-white text-sm" required>
|
||||
<label class="block text-xs font-medium text-slate-700 mb-1">E-mailadres MakerWorld</label>
|
||||
<input type="text" name="account" value="{{ old('account', 'info@jouwdriedee.nl') }}" class="w-full px-3 py-2 bg-slate-50 border border-slate-200 rounded-xl text-slate-900 text-xs focus:bg-white focus:outline-none focus:ring-2 focus:ring-slate-900/10 focus:border-slate-900" required>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-xs font-bold text-slate-300 uppercase mb-1">Wachtwoord</label>
|
||||
<input type="password" name="password" class="w-full px-4 py-2.5 bg-slate-950 border border-slate-800 rounded-xl text-white text-sm" required>
|
||||
<label class="block text-xs font-medium text-slate-700 mb-1">Wachtwoord</label>
|
||||
<input type="password" name="password" class="w-full px-3 py-2 bg-slate-50 border border-slate-200 rounded-xl text-slate-900 text-xs focus:bg-white focus:outline-none focus:ring-2 focus:ring-slate-900/10 focus:border-slate-900" required>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="w-full py-3 bg-amber-400 hover:bg-amber-300 text-slate-950 font-black rounded-xl text-xs uppercase tracking-wider transition">
|
||||
<button type="submit" class="w-full py-2.5 bg-slate-900 hover:bg-slate-800 text-white font-medium rounded-xl text-xs transition shadow-xs cursor-pointer">
|
||||
Inloggen bij MakerWorld
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- Or Paste Token Directly -->
|
||||
<div class="bg-slate-900/90 rounded-3xl p-6 sm:p-8 border border-slate-800 shadow-xl space-y-4">
|
||||
<div class="bg-white rounded-2xl p-6 border border-slate-200/80 shadow-xs space-y-4">
|
||||
<div class="flex items-center space-x-3">
|
||||
<div class="w-10 h-10 rounded-2xl bg-sky-500/10 text-sky-400 flex items-center justify-center font-bold">
|
||||
<div class="w-10 h-10 rounded-xl bg-slate-100 text-slate-700 flex items-center justify-center">
|
||||
<i data-lucide="key" class="w-5 h-5"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h2 class="text-lg font-black text-white">MakerWorld Bearer Token</h2>
|
||||
<p class="text-xs text-slate-400">Plak direct je MakerWorld JWT token</p>
|
||||
<h2 class="text-sm font-bold text-slate-900">MakerWorld Bearer Token</h2>
|
||||
<p class="text-xs text-slate-500">Plak direct je MakerWorld JWT token</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form action="{{ route('admin.makerworld.token') }}" method="POST" class="space-y-4 pt-2">
|
||||
<form action="{{ route('admin.makerworld.token') }}" method="POST" class="space-y-3 pt-1">
|
||||
@csrf
|
||||
<div>
|
||||
<label class="block text-xs font-bold text-slate-300 uppercase mb-1">Access Token</label>
|
||||
<textarea name="token" rows="4" placeholder="eyJhbGciOi..." class="w-full px-4 py-2.5 bg-slate-950 border border-slate-800 rounded-xl text-white text-xs font-mono" required></textarea>
|
||||
<label class="block text-xs font-medium text-slate-700 mb-1">Access Token</label>
|
||||
<textarea name="token" rows="3" placeholder="eyJhbGciOi..." class="w-full px-3 py-2 bg-slate-50 border border-slate-200 rounded-xl text-slate-900 text-xs font-mono focus:bg-white focus:outline-none focus:ring-2 focus:ring-slate-900/10 focus:border-slate-900" required></textarea>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="w-full py-3 bg-slate-800 hover:bg-slate-700 text-white font-bold rounded-xl text-xs uppercase tracking-wider transition border border-slate-700">
|
||||
<button type="submit" class="w-full py-2.5 bg-white hover:bg-slate-50 text-slate-800 font-medium rounded-xl text-xs transition border border-slate-200 cursor-pointer">
|
||||
Token Opslaan
|
||||
</button>
|
||||
</form>
|
||||
|
||||
@if($isAuthenticated)
|
||||
<div class="pt-4 border-t border-slate-800 flex items-center justify-between">
|
||||
<span class="text-xs text-emerald-400 font-bold flex items-center space-x-1.5">
|
||||
<span class="w-2 h-2 rounded-full bg-emerald-400"></span>
|
||||
<span>Momenteel actief gekoppeld</span>
|
||||
<div class="pt-3 border-t border-slate-100 flex items-center justify-between">
|
||||
<span class="text-xs text-emerald-600 font-medium flex items-center space-x-1.5">
|
||||
<span class="w-2 h-2 rounded-full bg-emerald-500"></span>
|
||||
<span>Actief verbonden</span>
|
||||
</span>
|
||||
<form action="{{ route('admin.makerworld.disconnect') }}" method="POST">
|
||||
@csrf
|
||||
<button type="submit" class="text-xs text-rose-400 hover:underline font-bold">
|
||||
<button type="submit" class="text-xs text-rose-600 hover:underline font-medium cursor-pointer">
|
||||
Ontkoppelen
|
||||
</button>
|
||||
</form>
|
||||
@@ -606,7 +584,6 @@
|
||||
</div>
|
||||
@endif
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
|
||||
@@ -6,84 +6,66 @@
|
||||
<div class="space-y-6" x-data="artikelBeheerApp()">
|
||||
|
||||
<!-- 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 class="flex items-center space-x-2 text-xs text-amber-700 font-bold uppercase tracking-wider mb-1">
|
||||
<span class="inline-block w-2 h-2 rounded-full bg-amber-500 animate-pulse"></span>
|
||||
<span>Staging & Curation</span>
|
||||
<span>•</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>
|
||||
<span class="text-[11px] font-semibold uppercase tracking-wider text-slate-400 block mb-1">MakerWorld Modellen</span>
|
||||
<h1 class="font-heading text-2xl sm:text-3xl font-bold text-slate-900 tracking-tight">Artikel Beheer (Staging)</h1>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<!-- Header Quick Actions -->
|
||||
<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">
|
||||
<i data-lucide="refresh-cw" class="w-4 h-4 text-amber-600"></i>
|
||||
<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-3.5 h-3.5 text-slate-400"></i>
|
||||
<span>Collecties & Sync</span>
|
||||
</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">
|
||||
<i data-lucide="box" class="w-4 h-4"></i>
|
||||
<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-3.5 h-3.5"></i>
|
||||
<span>Actieve Producten</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Status Filter Tabs -->
|
||||
<div class="flex items-center space-x-2 border-b border-slate-200/80 pb-2 overflow-x-auto text-xs font-bold">
|
||||
<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' }}">
|
||||
<i data-lucide="layers" class="w-3.5 h-3.5"></i>
|
||||
<!-- Status Filter Tabs (Sleek Segmented Control) -->
|
||||
<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 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' }}">
|
||||
<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 }}
|
||||
</span>
|
||||
</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' }}">
|
||||
<span class="w-1.5 h-1.5 rounded-full {{ ($tab ?? 'draft') === 'published' ? 'bg-emerald-200' : 'bg-emerald-500' }}"></span>
|
||||
<span>Reeds Gepubliceerd in Webshop</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' }}">
|
||||
{{ $countPublished ?? 0 }}
|
||||
</span>
|
||||
<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 bg-emerald-500"></span>
|
||||
<span>Gepubliceerd</span>
|
||||
<span class="text-[11px] text-slate-400">({{ $countPublished ?? 0 }})</span>
|
||||
</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' }}">
|
||||
<i data-lucide="download-cloud" class="w-3.5 h-3.5"></i>
|
||||
<span>Alle Binnengehaalde Modellen</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 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' }}">
|
||||
<span>Alle Geïmporteerd</span>
|
||||
<span class="text-[11px] text-slate-400">({{ $countAll ?? 0 }})</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- 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">
|
||||
<!-- Search input -->
|
||||
<div class="relative min-w-[220px] flex-1">
|
||||
<input
|
||||
type="text"
|
||||
name="q"
|
||||
value="{{ request('q') }}"
|
||||
placeholder="Zoek op titel, maker of model-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"
|
||||
placeholder="Zoek op titel of ID..."
|
||||
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>
|
||||
|
||||
<!-- Collection dropdown filter -->
|
||||
<div class="w-52">
|
||||
<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">
|
||||
<div class="w-48">
|
||||
<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">
|
||||
<option value="">Alle collecties</option>
|
||||
@foreach($collections as $col)
|
||||
<option value="{{ $col->id }}" {{ request('collection_id') == $col->id ? 'selected' : '' }}>
|
||||
@@ -93,54 +75,52 @@
|
||||
</select>
|
||||
</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">
|
||||
Filteren
|
||||
<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">
|
||||
Filter
|
||||
</button>
|
||||
|
||||
@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
|
||||
</a>
|
||||
@endif
|
||||
</form>
|
||||
|
||||
<div class="flex items-center space-x-2 text-xs">
|
||||
<span class="px-3 py-1 rounded-full bg-amber-50 text-amber-800 border border-amber-200/80 font-bold">
|
||||
{{ $totalStaged }} concepten wachten op beoordeling
|
||||
</span>
|
||||
<div class="text-xs text-slate-500 font-medium">
|
||||
<span>{{ $totalStaged }} concepten wachten op review</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Bulk Selection Action 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 class="flex items-center space-x-2 font-black text-xs uppercase tracking-wider">
|
||||
<i data-lucide="check-square" class="w-5 h-5"></i>
|
||||
<span x-text="selectedIds.length + ' artikelen geselecteerd'"></span>
|
||||
<!-- Bulk Selection Bar -->
|
||||
<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 text-xs font-medium">
|
||||
<i data-lucide="check-square" class="w-4 h-4 text-emerald-400"></i>
|
||||
<span x-text="selectedIds.length + ' geselecteerd'"></span>
|
||||
</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
|
||||
<template x-for="id in selectedIds" :key="id">
|
||||
<input type="hidden" name="product_ids[]" :value="id">
|
||||
</template>
|
||||
|
||||
<div class="flex items-center space-x-2">
|
||||
<label class="text-xs font-bold uppercase">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">
|
||||
<div class="flex items-center space-x-1.5">
|
||||
<label class="text-[11px] text-slate-300">Categorie:</label>
|
||||
<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)
|
||||
<option value="{{ $cat->id }}">{{ $cat->name }}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center space-x-2">
|
||||
<label class="text-xs font-bold uppercase">Winstmarge %:</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">
|
||||
<div class="flex items-center space-x-1.5">
|
||||
<label class="text-[11px] text-slate-300">Marge %:</label>
|
||||
<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>
|
||||
|
||||
<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">
|
||||
<i data-lucide="check" class="w-4 h-4"></i>
|
||||
<span>Publiceer Selectie naar Webshop</span>
|
||||
<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-3.5 h-3.5"></i>
|
||||
<span>Publiceer Selectie</span>
|
||||
</button>
|
||||
</form>
|
||||
|
||||
@@ -149,7 +129,7 @@
|
||||
<template x-for="id in selectedIds" :key="id">
|
||||
<input type="hidden" name="product_ids[]" :value="id">
|
||||
</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>
|
||||
<span>Verwijderen</span>
|
||||
</button>
|
||||
@@ -158,10 +138,10 @@
|
||||
|
||||
<!-- Select All Trigger -->
|
||||
@if($stagedProducts->isNotEmpty())
|
||||
<div class="flex items-center justify-between text-xs text-slate-500 px-1">
|
||||
<button type="button" @click="toggleSelectAll()" class="hover:text-amber-700 font-bold transition flex items-center space-x-1.5">
|
||||
<i data-lucide="check" class="w-4 h-4"></i>
|
||||
<span x-text="selectedIds.length === {{ $stagedProducts->count() }} ? 'Deselecteer alles' : 'Selecteer alle {{ $stagedProducts->count() }} modellen op deze pagina'"></span>
|
||||
<div class="flex items-center justify-between text-xs text-slate-400 px-1">
|
||||
<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-3.5 h-3.5"></i>
|
||||
<span x-text="selectedIds.length === {{ $stagedProducts->count() }} ? 'Deselecteer alles' : 'Selecteer alle {{ $stagedProducts->count() }} op deze pagina'"></span>
|
||||
</button>
|
||||
<span>Pagina {{ $stagedProducts->currentPage() }} van {{ $stagedProducts->lastPage() }}</span>
|
||||
</div>
|
||||
@@ -169,16 +149,16 @@
|
||||
|
||||
<!-- Staged Products Grid -->
|
||||
@if($stagedProducts->isEmpty())
|
||||
<div class="text-center py-16 bg-white rounded-3xl border border-slate-200/80 p-8 shadow-sm">
|
||||
<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">
|
||||
<i data-lucide="sparkles" class="w-8 h-8"></i>
|
||||
<div class="text-center py-16 bg-white rounded-2xl border border-slate-200/60 p-8 shadow-2xs">
|
||||
<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="check-circle" class="w-6 h-6 text-emerald-500"></i>
|
||||
</div>
|
||||
<h3 class="text-lg font-black text-slate-900">Geen concepten in de wachtrij!</h3>
|
||||
<p class="text-xs text-slate-500 max-w-md mx-auto mt-1.5">
|
||||
Alle binnengehaalde modellen zijn al beoordeeld en gepubliceerd, of er zijn nog geen nieuwe modellen toegevoegd aan je gevolgde collecties.
|
||||
<h3 class="text-base font-semibold text-slate-900">Geen concepten in de wachtrij</h3>
|
||||
<p class="text-xs text-slate-500 max-w-sm mx-auto mt-1">
|
||||
Alle binnengehaalde modellen zijn beoordeeld en gepubliceerd, of er zijn nog geen nieuwe modellen gesynchroniseerd.
|
||||
</p>
|
||||
<div class="mt-5 flex items-center justify-center space-x-3">
|
||||
<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">
|
||||
<div class="mt-4">
|
||||
<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
|
||||
</a>
|
||||
</div>
|
||||
@@ -189,76 +169,75 @@
|
||||
@php
|
||||
$printInfo = $product->print_info ?? [];
|
||||
@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 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">
|
||||
|
||||
<!-- Selection Checkbox -->
|
||||
<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">
|
||||
<input type="checkbox" value="{{ $product->id }}" x-model="selectedIds" class="w-4 h-4 text-amber-500 rounded focus:ring-0">
|
||||
<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-3.5 h-3.5 text-slate-900 rounded focus:ring-0">
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<!-- Draft Badge -->
|
||||
<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
|
||||
</span>
|
||||
@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 }}
|
||||
</span>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
<!-- 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>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Photo Thumbnails Strip (All Pulled Pictures) -->
|
||||
<!-- Photo Thumbnails Strip -->
|
||||
@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">
|
||||
<span class="text-[10px] font-bold text-slate-400 uppercase tracking-wider 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">
|
||||
<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-[9px] uppercase font-semibold text-slate-400 shrink-0">Foto's:</span>
|
||||
<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)
|
||||
<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
|
||||
@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
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<!-- Print Specifications 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">
|
||||
<!-- Specs Strip -->
|
||||
<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>
|
||||
<span class="text-[10px] font-bold text-slate-400 block uppercase">Printtijd</span>
|
||||
<span class="font-bold text-slate-700">
|
||||
<span class="text-[9px] uppercase font-medium text-slate-400 block">Printtijd</span>
|
||||
<span class="font-semibold text-slate-700">
|
||||
{{ $product->print_time_hours ? $product->print_time_hours . ' u' : '-' }}
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="text-[10px] font-bold text-slate-400 block uppercase">Gewicht</span>
|
||||
<span class="font-bold text-slate-700">
|
||||
<span class="text-[9px] uppercase font-medium text-slate-400 block">Gewicht</span>
|
||||
<span class="font-semibold text-slate-700">
|
||||
{{ $product->weight_grams ? $product->weight_grams . ' g' : '-' }}
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="text-[10px] font-bold text-amber-700 block uppercase">Adviesprijs</span>
|
||||
<span class="font-black text-slate-900 font-heading">
|
||||
<span class="text-[9px] uppercase font-semibold text-slate-500 block">Adviesprijs</span>
|
||||
<span class="font-bold text-slate-900 font-heading">
|
||||
{{ $product->formatted_price }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Meta Details -->
|
||||
<div class="p-3.5 space-y-1.5">
|
||||
<div class="p-3">
|
||||
<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="font-mono text-slate-400 text-[10px]">#{{ $product->makerworld_id }}</span>
|
||||
@@ -267,47 +246,43 @@
|
||||
</div>
|
||||
|
||||
@if($product->status === 'published')
|
||||
<!-- Already Published Info Card -->
|
||||
<div class="p-3.5 bg-slate-50/80 border-t border-slate-100 space-y-2.5">
|
||||
<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-bold">
|
||||
<i data-lucide="check-circle" class="w-4 h-4 text-emerald-600"></i>
|
||||
<span>In Webshop</span>
|
||||
<div class="p-3 bg-slate-50/80 border-t border-slate-100 space-y-2">
|
||||
<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="flex items-center space-x-1.5 font-medium">
|
||||
<i data-lucide="check-circle" class="w-3.5 h-3.5 text-emerald-600"></i>
|
||||
<span>Gepubliceerd</span>
|
||||
</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 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">
|
||||
<i data-lucide="pencil" class="w-3.5 h-3.5"></i>
|
||||
<span>Bewerken & Prijscalculator</span>
|
||||
<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">
|
||||
Bewerken
|
||||
</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">
|
||||
<i data-lucide="external-link" class="w-4 h-4"></i>
|
||||
<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-3.5 h-3.5"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
@else
|
||||
<!-- Curation / Publish Form (Inline) -->
|
||||
<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">
|
||||
<!-- Curation / Publish Form -->
|
||||
<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
|
||||
|
||||
<!-- Editable Product Name -->
|
||||
<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
|
||||
type="text"
|
||||
name="name"
|
||||
value="{{ old('name', $product->name) }}"
|
||||
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 class="grid grid-cols-2 gap-2">
|
||||
<!-- Category selector -->
|
||||
<div>
|
||||
<label class="block text-[10px] font-bold uppercase tracking-wider text-slate-500 mb-1">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">
|
||||
<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-lg text-slate-800 text-xs focus:outline-none focus:ring-1 focus:ring-slate-400">
|
||||
@foreach($categories as $cat)
|
||||
<option value="{{ $cat->id }}" {{ $product->category_id == $cat->id ? 'selected' : '' }}>
|
||||
{{ $cat->name }}
|
||||
@@ -316,44 +291,41 @@
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Retail Price -->
|
||||
<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
|
||||
type="number"
|
||||
step="0.01"
|
||||
name="base_price"
|
||||
value="{{ old('base_price', $product->base_price) }}"
|
||||
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>
|
||||
|
||||
<!-- Action Buttons -->
|
||||
<div class="pt-1.5 flex items-center justify-between gap-2">
|
||||
<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-4 h-4"></i>
|
||||
<span>Publiceer naar Webshop</span>
|
||||
<div class="pt-1 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">
|
||||
<i data-lucide="check" class="w-3.5 h-3.5"></i>
|
||||
<span>Publiceer</span>
|
||||
</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">
|
||||
<i data-lucide="sliders" class="w-4 h-4"></i>
|
||||
<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-3.5 h-3.5"></i>
|
||||
</a>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
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"
|
||||
title="Concept afwijzen & verwijderen"
|
||||
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="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>
|
||||
</div>
|
||||
</form>
|
||||
@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">
|
||||
@csrf
|
||||
@method('DELETE')
|
||||
@@ -362,7 +334,6 @@
|
||||
@endforeach
|
||||
</div>
|
||||
|
||||
<!-- Pagination -->
|
||||
<div class="mt-6">
|
||||
{{ $stagedProducts->links() }}
|
||||
</div>
|
||||
|
||||
@@ -6,65 +6,65 @@
|
||||
<div class="space-y-6">
|
||||
|
||||
<!-- 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 class="inline-flex items-center space-x-2 text-xs text-amber-400 font-bold uppercase tracking-wider mb-1">
|
||||
<i data-lucide="shopping-cart" class="w-4 h-4"></i>
|
||||
<span>Verkopen & Facturatie</span>
|
||||
<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-3.5 h-3.5"></i>
|
||||
<span>Verkopen & Orders</span>
|
||||
</div>
|
||||
<h1 class="font-heading text-2xl sm:text-3xl font-black text-white">Bestellingen ({{ $orders->total() }})</h1>
|
||||
<p class="text-xs sm:text-sm text-slate-400 mt-1">Inzicht in binnengekomen bestellingen, status en klantgegevens.</p>
|
||||
<h1 class="text-2xl font-bold tracking-tight text-slate-900">Bestellingen ({{ $orders->total() }})</h1>
|
||||
<p class="text-xs text-slate-500 mt-1">Overzicht van binnengekomen bestellingen, orderstatussen en verzending.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 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">
|
||||
<table class="w-full text-left text-xs text-slate-300">
|
||||
<thead class="bg-slate-950/80 text-[11px] uppercase tracking-wider text-slate-400 font-bold border-b border-slate-800">
|
||||
<table class="w-full text-left text-xs text-slate-700">
|
||||
<thead class="bg-slate-50/80 text-[11px] uppercase tracking-wider text-slate-500 font-semibold border-b border-slate-200/70">
|
||||
<tr>
|
||||
<th class="py-3.5 px-4">Order #</th>
|
||||
<th class="py-3.5 px-4">Datum</th>
|
||||
<th class="py-3.5 px-4">Klant</th>
|
||||
<th class="py-3.5 px-4">Items</th>
|
||||
<th class="py-3.5 px-4">Totaal</th>
|
||||
<th class="py-3.5 px-4">Status</th>
|
||||
<th class="py-3.5 px-4 text-right">Details</th>
|
||||
<th class="py-3 px-4">Order #</th>
|
||||
<th class="py-3 px-4">Datum</th>
|
||||
<th class="py-3 px-4">Klant</th>
|
||||
<th class="py-3 px-4">Items</th>
|
||||
<th class="py-3 px-4">Totaal</th>
|
||||
<th class="py-3 px-4">Status</th>
|
||||
<th class="py-3 px-4 text-right">Details</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-slate-800/80 font-medium">
|
||||
<tbody class="divide-y divide-slate-100 font-medium">
|
||||
@forelse($orders as $order)
|
||||
<tr class="hover:bg-slate-800/50 transition">
|
||||
<td class="py-3.5 px-4 font-mono font-bold text-white">
|
||||
<tr class="hover:bg-slate-50/60 transition">
|
||||
<td class="py-3.5 px-4 font-mono font-bold text-slate-900">
|
||||
{{ $order->order_number }}
|
||||
</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') }}
|
||||
</td>
|
||||
<td class="py-3.5 px-4">
|
||||
<div class="font-bold text-white">{{ $order->customer_name }}</div>
|
||||
<div class="text-[11px] text-slate-400">{{ $order->customer_email }}</div>
|
||||
<div class="font-semibold text-slate-900">{{ $order->customer_name }}</div>
|
||||
<div class="text-[11px] text-slate-400 font-normal">{{ $order->customer_email }}</div>
|
||||
</td>
|
||||
<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
|
||||
</span>
|
||||
</td>
|
||||
<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 class="py-3.5 px-4">
|
||||
<span class="px-2.5 py-1 rounded-full text-[10px] font-black uppercase
|
||||
@if($order->status === 'completed' || $order->status === 'shipped') bg-emerald-500/20 text-emerald-400
|
||||
@elseif($order->status === 'printed' || $order->status === 'processing') bg-sky-500/20 text-sky-400
|
||||
@elseif($order->status === 'cancelled') bg-rose-500/20 text-rose-400
|
||||
@else bg-amber-500/20 text-amber-400 @endif
|
||||
">
|
||||
{{ $order->status }}
|
||||
<span class="px-2 py-0.5 rounded-full text-[10px] font-semibold
|
||||
@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-50 text-sky-700 border border-sky-200/60
|
||||
@elseif($order->status === 'cancelled') bg-rose-50 text-rose-700 border border-rose-200/60
|
||||
@else bg-amber-50 text-amber-700 border border-amber-200/60
|
||||
@endif">
|
||||
{{ $order->status_label }}
|
||||
</span>
|
||||
</td>
|
||||
<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>
|
||||
<i data-lucide="chevron-right" class="w-3 h-3"></i>
|
||||
</a>
|
||||
@@ -72,8 +72,8 @@
|
||||
</tr>
|
||||
@empty
|
||||
<tr>
|
||||
<td colspan="7" class="p-10 text-center text-slate-500">
|
||||
Nog geen bestellingen binnengekomen.
|
||||
<td colspan="7" class="py-12 text-center text-slate-400">
|
||||
Nog geen bestellingen geplaatst.
|
||||
</td>
|
||||
</tr>
|
||||
@endforelse
|
||||
@@ -82,7 +82,7 @@
|
||||
</div>
|
||||
|
||||
@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() }}
|
||||
</div>
|
||||
@endif
|
||||
@@ -90,4 +90,3 @@
|
||||
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
|
||||
@@ -6,20 +6,20 @@
|
||||
<div class="space-y-6 max-w-5xl mx-auto">
|
||||
|
||||
<!-- 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>
|
||||
<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>
|
||||
<span>Terug naar Bestellingen</span>
|
||||
</a>
|
||||
<h1 class="font-heading text-2xl font-black text-white">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>
|
||||
<h1 class="text-2xl font-bold tracking-tight text-slate-900">Bestelling #{{ $order->order_number }}</h1>
|
||||
<p class="text-xs text-slate-500">Geplaatst op {{ $order->created_at->format('d-m-Y om H:i') }}</p>
|
||||
</div>
|
||||
|
||||
<!-- Status update form -->
|
||||
<form action="{{ route('admin.orders.status', $order) }}" method="POST" class="flex items-center space-x-2">
|
||||
@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="processing" {{ $order->status === 'processing' ? 'selected' : '' }}>In verwerking</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="cancelled" {{ $order->status === 'cancelled' ? 'selected' : '' }}>Geannuleerd</option>
|
||||
</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
|
||||
</button>
|
||||
</form>
|
||||
</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">
|
||||
|
||||
<!-- Order Items -->
|
||||
<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">
|
||||
<h3 class="font-heading font-black text-base text-white">Bestelde 3D Prints</h3>
|
||||
<div class="p-6 rounded-2xl bg-white border border-slate-200/80 shadow-xs space-y-4">
|
||||
<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)
|
||||
<div class="py-3.5 flex items-start justify-between gap-4">
|
||||
<div>
|
||||
<h4 class="font-bold text-white text-sm">{{ $item->product_name }}</h4>
|
||||
<div class="text-xs text-slate-400 space-y-0.5 mt-1">
|
||||
<div><strong>Materiaal:</strong> {{ strtoupper($item->material) }}</div>
|
||||
<div><strong>Kleur:</strong> {{ $item->color }}</div>
|
||||
<div><strong>Schaal:</strong> {{ $item->scale ?? '100%' }}</div>
|
||||
<h4 class="font-semibold text-slate-900 text-xs">{{ $item->product_name }}</h4>
|
||||
<div class="text-[11px] text-slate-500 space-y-0.5 mt-1">
|
||||
<div><span class="text-slate-400">Materiaal:</span> {{ strtoupper($item->material) }}</div>
|
||||
<div><span class="text-slate-400">Kleur:</span> {{ $item->color }}</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 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 € {{ number_format($item->unit_price, 2, ',', '.') }}
|
||||
</span>
|
||||
<div class="text-xs font-black text-amber-400 mt-1">
|
||||
<div class="text-xs font-bold text-slate-900 mt-0.5">
|
||||
€ {{ number_format($item->total_price, 2, ',', '.') }}
|
||||
</div>
|
||||
</div>
|
||||
@@ -63,51 +78,46 @@
|
||||
@endforeach
|
||||
</div>
|
||||
|
||||
<div class="pt-4 border-t border-slate-800 flex items-center justify-between font-heading font-black text-lg text-white">
|
||||
<span>Totaalbedrag</span>
|
||||
<span class="text-amber-400">{{ $order->formatted_total }}</span>
|
||||
<div class="pt-4 border-t border-slate-100 flex items-center justify-between text-xs">
|
||||
<span class="font-medium text-slate-500">Totaalbedrag (incl. BTW)</span>
|
||||
<span class="font-bold text-base text-slate-900">{{ $order->formatted_total }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Klantgegevens & Afleveradres -->
|
||||
<!-- Klant & Verzendinfo -->
|
||||
<div class="space-y-4">
|
||||
<div class="p-6 rounded-3xl bg-slate-900 border border-slate-800 space-y-4 text-xs">
|
||||
<h3 class="font-heading font-black text-base text-white">Klant & Verzendadres</h3>
|
||||
<div class="p-5 rounded-2xl bg-white border border-slate-200/80 shadow-xs space-y-3">
|
||||
<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>
|
||||
<span class="text-slate-500 block text-[10px] uppercase font-bold">Naam</span>
|
||||
<strong class="text-white">{{ $order->customer_name }}</strong>
|
||||
<span class="text-slate-400 block text-[10px]">Naam</span>
|
||||
<span class="font-semibold text-slate-900">{{ $order->customer_name }}</span>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<span class="text-slate-500 block text-[10px] uppercase font-bold">E-mail</span>
|
||||
<span>{{ $order->customer_email }}</span>
|
||||
<span class="text-slate-400 block text-[10px]">E-mailadres</span>
|
||||
<a href="mailto:{{ $order->customer_email }}" class="text-slate-900 hover:underline font-mono">{{ $order->customer_email }}</a>
|
||||
</div>
|
||||
|
||||
@if($order->customer_phone)
|
||||
<div>
|
||||
<span class="text-slate-500 block text-[10px] uppercase font-bold">Telefoon</span>
|
||||
<span>{{ $order->customer_phone }}</span>
|
||||
<span class="text-slate-400 block text-[10px]">Telefoonnummer</span>
|
||||
<span class="text-slate-900">{{ $order->customer_phone }}</span>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pt-2 border-t border-slate-800">
|
||||
<span class="text-slate-500 block text-[10px] uppercase font-bold">Adres</span>
|
||||
<div class="p-5 rounded-2xl bg-white border border-slate-200/80 shadow-xs space-y-3">
|
||||
<h3 class="font-bold text-xs text-slate-900 uppercase tracking-wider">Verzendadres</h3>
|
||||
|
||||
<div class="text-xs text-slate-700 leading-relaxed">
|
||||
<div class="font-semibold text-slate-900">{{ $order->customer_name }}</div>
|
||||
<div>{{ $order->shipping_street }} {{ $order->shipping_number }}</div>
|
||||
<div>{{ $order->shipping_postal_code }} {{ $order->shipping_city }}</div>
|
||||
<div>{{ $order->shipping_country ?? 'Nederland' }}</div>
|
||||
<div class="text-slate-400">Nederland</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@if($order->notes)
|
||||
<div class="pt-3 border-t border-slate-800">
|
||||
<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>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@@ -76,13 +76,13 @@
|
||||
}">
|
||||
|
||||
<!-- 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>
|
||||
<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>
|
||||
<span>Terug naar Producten</span>
|
||||
</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>
|
||||
|
||||
@@ -90,18 +90,18 @@
|
||||
<form action="{{ route('admin.products.store') }}" method="POST" class="space-y-6">
|
||||
@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 -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<div class="md:col-span-2 space-y-1.5">
|
||||
<label class="block text-xs font-bold 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">
|
||||
<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/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 class="space-y-1.5">
|
||||
<label class="block text-xs font-bold 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">
|
||||
<label class="block text-xs font-medium text-slate-700">Categorie *</label>
|
||||
<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)
|
||||
<option value="{{ $cat->id }}" {{ old('category_id') == $cat->id ? 'selected' : '' }}>
|
||||
{{ $cat->name }}
|
||||
@@ -112,52 +112,52 @@
|
||||
</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 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>
|
||||
<h3 class="font-heading text-xs font-black 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>
|
||||
<i data-lucide="calculator" class="w-4 h-4 text-slate-500"></i>
|
||||
<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-slate-200/70 text-slate-700 font-mono text-[10px]">Formule</span>
|
||||
</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">
|
||||
<span x-text="showCalculator ? 'Inklappen' : 'Calculator Openen'"></span>
|
||||
<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' : 'Openen'"></span>
|
||||
<i data-lucide="chevron-down" class="w-3.5 h-3.5 transition-transform" :class="showCalculator ? 'rotate-180' : ''"></i>
|
||||
</button>
|
||||
</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">
|
||||
<!-- Gewicht -->
|
||||
<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">
|
||||
<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">
|
||||
<span class="absolute right-2.5 top-1/2 -translate-y-1/2 text-[10px] text-slate-400 font-bold">gram</span>
|
||||
<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">gram</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Printtijd -->
|
||||
<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">
|
||||
<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">
|
||||
<span class="absolute right-2.5 top-1/2 -translate-y-1/2 text-[10px] text-slate-400 font-bold">uur</span>
|
||||
<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">uur</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Aantal Kleuren (AMS Purge) -->
|
||||
<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">
|
||||
<template x-for="c in [1, 2, 3, 4]" :key="c">
|
||||
<button
|
||||
type="button"
|
||||
@click="colorCount = c"
|
||||
class="py-1.5 rounded-lg text-center font-bold text-xs transition border"
|
||||
: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="py-1 rounded-md text-center font-medium text-xs transition border cursor-pointer"
|
||||
: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"
|
||||
></button>
|
||||
</template>
|
||||
@@ -166,8 +166,8 @@
|
||||
|
||||
<!-- Materiaalsoort -->
|
||||
<div class="space-y-1">
|
||||
<label class="block text-[11px] font-bold 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">
|
||||
<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-lg px-2.5 py-1.5 text-xs font-medium text-slate-900">
|
||||
<option value="pla">Bio-PLA (1.0x)</option>
|
||||
<option value="petg">PETG Tough (1.2x)</option>
|
||||
<option value="silk">Silk Zijdeglans (1.3x)</option>
|
||||
@@ -176,48 +176,43 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Winstmarge selectie -->
|
||||
<div class="flex flex-wrap items-center justify-between gap-2 pt-2 border-t border-amber-200/50 text-xs">
|
||||
<div class="flex items-center space-x-1.5">
|
||||
<span class="text-slate-600 font-bold text-[11px]">Winstmarge:</span>
|
||||
<div class="inline-flex rounded-lg border border-slate-200 bg-white p-0.5 text-[11px] font-bold">
|
||||
<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 = 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 = 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 = 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>
|
||||
<!-- Marge Selector -->
|
||||
<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-2">
|
||||
<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-medium">
|
||||
<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-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-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-slate-900 text-white' : 'text-slate-600 hover:text-slate-900'" class="px-2 py-0.5 rounded transition">100%</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Live Cost Breakdown Strip -->
|
||||
<div class="flex items-center space-x-3 text-[11px] text-slate-500 font-semibold">
|
||||
<span>🧵 Materiaal: €<span x-text="materialCost"></span></span>
|
||||
<span>⚡ Stroom: €<span x-text="electricityCost"></span></span>
|
||||
<span>⚙️ Slijtage: €<span x-text="machineCost"></span></span>
|
||||
<span class="font-bold text-slate-700">Kostprijs: €<span x-text="totalProductionCost"></span></span>
|
||||
<!-- Live Cost Breakdown -->
|
||||
<div class="flex items-center space-x-3 text-[11px] text-slate-400 font-normal">
|
||||
<span>Materiaal: €<span x-text="materialCost"></span></span>
|
||||
<span>Stroom: €<span x-text="electricityCost"></span></span>
|
||||
<span>Slijtage: €<span x-text="machineCost"></span></span>
|
||||
<span class="font-semibold text-slate-700">Kostprijs: €<span x-text="totalProductionCost"></span></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Result Banner met 1-klik overneem knop -->
|
||||
<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="flex items-center space-x-3">
|
||||
<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">
|
||||
€
|
||||
</div>
|
||||
<!-- Callout Strip -->
|
||||
<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>
|
||||
<span class="text-[10px] text-slate-400 block font-bold uppercase tracking-wider">Berekend Prijsvoorstel (incl. 21% btw)</span>
|
||||
<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">
|
||||
<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 • <span x-text="printTimeHours"></span>u • <span x-text="colorCount"></span> kleur(en)</span>
|
||||
</div>
|
||||
<span class="font-heading text-lg font-bold text-slate-900">€ <span x-text="suggestedPrice"></span></span>
|
||||
<span class="text-[11px] text-slate-400">(op basis van <span x-text="weightGrams"></span>g • <span x-text="printTimeHours"></span>u • <span x-text="colorCount"></span> kleur)</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
@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>
|
||||
</button>
|
||||
</div>
|
||||
@@ -227,30 +222,30 @@
|
||||
<!-- Prijs & Korte Omschrijving -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<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">
|
||||
<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
|
||||
type="number"
|
||||
step="0.01"
|
||||
name="base_price"
|
||||
x-model="basePrice"
|
||||
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 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>
|
||||
<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">
|
||||
<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/70 focus:bg-white border border-slate-200 rounded-lg px-3 py-2 text-xs text-slate-900">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Visueel Afbeeldingen & Fotogalerij Beheer -->
|
||||
<div class="pt-5 border-t border-slate-200/80 space-y-4"
|
||||
<!-- Afbeeldingen & Galerij Beheer -->
|
||||
<div class="pt-5 border-t border-slate-200/60 space-y-4"
|
||||
x-data="{
|
||||
imageUrl: '{{ old('image_url', '/images/products/crystal-dragon.jpg') }}',
|
||||
imageUrl: '{{ old('image_url', '') }}',
|
||||
galleryImages: {{ json_encode(old('gallery_images', []), JSON_UNESCAPED_SLASHES) }},
|
||||
newImageUrl: '',
|
||||
addError: '',
|
||||
@@ -286,7 +281,7 @@
|
||||
let url = this.newImageUrl.trim();
|
||||
if (!url) return;
|
||||
if (url === this.imageUrl || this.galleryImages.includes(url)) {
|
||||
this.addError = 'Deze afbeelding is al toegevoegd!';
|
||||
this.addError = 'Deze afbeelding is al gekoppeld!';
|
||||
return;
|
||||
}
|
||||
if (!this.imageUrl) {
|
||||
@@ -327,14 +322,13 @@
|
||||
})
|
||||
.catch(err => {
|
||||
this.isUploading = false;
|
||||
this.uploadError = 'Fout bij uploaden van afbeelding';
|
||||
this.uploadError = 'Fout bij uploaden';
|
||||
});
|
||||
|
||||
event.target.value = '';
|
||||
}
|
||||
}">
|
||||
|
||||
<!-- Verborgen form fields -->
|
||||
<input type="hidden" name="image_url" :value="imageUrl">
|
||||
<template x-for="(img, idx) in galleryImages" :key="idx">
|
||||
<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>
|
||||
<div class="flex items-center space-x-2">
|
||||
<i data-lucide="image" class="w-4 h-4 text-amber-500"></i>
|
||||
<h3 class="font-heading text-sm font-black 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>
|
||||
<i data-lucide="image" class="w-4 h-4 text-slate-500"></i>
|
||||
<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-600 font-mono text-[11px]" x-text="(imageUrl ? 1 : 0) + galleryImages.length + ' foto(\'s)'"></span>
|
||||
</div>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center space-x-2">
|
||||
<!-- Bestand uploaden button -->
|
||||
<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-amber-500"></i>
|
||||
<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">
|
||||
<i data-lucide="upload" class="w-3.5 h-3.5 text-slate-400"></i>
|
||||
<span x-text="isUploading ? 'Uploaden...' : 'Foto Uploaden'"></span>
|
||||
<input type="file" accept="image/*" class="hidden" @change="uploadFile" :disabled="isUploading">
|
||||
</label>
|
||||
|
||||
<!-- URL toevoegen toggle -->
|
||||
<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-amber-500"></i>
|
||||
<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">
|
||||
<i data-lucide="link" class="w-3.5 h-3.5 text-slate-400"></i>
|
||||
<span>URL Plakken</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 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">
|
||||
<input
|
||||
type="text"
|
||||
x-model="newImageUrl"
|
||||
@keydown.enter.prevent="addImageUrl"
|
||||
placeholder="Plak hier een foto-URL (bijv. https://... of /images/products/...)"
|
||||
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"
|
||||
placeholder="Plak hier een foto-URL..."
|
||||
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">
|
||||
<i data-lucide="plus" class="w-3.5 h-3.5"></i>
|
||||
<span>Toevoegen</span>
|
||||
<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">
|
||||
Toevoegen
|
||||
</button>
|
||||
</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 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">
|
||||
|
||||
<!-- Hoofdafbeelding Box (Links) -->
|
||||
<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">
|
||||
<!-- Cover Box -->
|
||||
<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">
|
||||
<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">
|
||||
<i data-lucide="star" class="w-3 h-3 fill-current"></i>
|
||||
<span>Hoofdafbeelding (Cover)</span>
|
||||
</span>
|
||||
|
||||
<span class="text-[10px] font-semibold text-slate-500 uppercase tracking-wider">Hoofdafbeelding</span>
|
||||
<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">
|
||||
<i data-lucide="trash-2" class="w-3.5 h-3.5"></i>
|
||||
<span>Verwijderen</span>
|
||||
<button type="button" @click="removeCover" class="text-slate-400 hover:text-rose-600 text-[11px] transition">
|
||||
Verwijderen
|
||||
</button>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<!-- Grote Image Preview -->
|
||||
<div class="aspect-4/3 rounded-xl bg-white overflow-hidden flex items-center justify-center relative border border-slate-200 shadow-2xs">
|
||||
<div class="aspect-4/3 rounded-lg bg-white overflow-hidden flex items-center justify-center relative border border-slate-200/60 shadow-2xs">
|
||||
<template x-if="imageUrl">
|
||||
<img :src="imageUrl" alt="Hoofdafbeelding" class="w-full h-full object-cover">
|
||||
</template>
|
||||
<template x-if="!imageUrl">
|
||||
<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>
|
||||
<p class="text-xs font-bold">Geen hoofdafbeelding</p>
|
||||
<p class="text-[10px]">Kies een foto of voeg er een toe.</p>
|
||||
<i data-lucide="image" class="w-6 h-6 mx-auto text-slate-300"></i>
|
||||
<p class="text-xs">Nog geen foto geselecteerd</p>
|
||||
</div>
|
||||
</template>
|
||||
</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>
|
||||
|
||||
<!-- Gallerij Foto's (Rechts) -->
|
||||
<div class="md:col-span-7 bg-slate-50/60 rounded-2xl border border-slate-200 p-3.5 space-y-3">
|
||||
<!-- Gallerij Grid -->
|
||||
<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">
|
||||
<span class="text-xs font-black text-slate-700 uppercase tracking-wider">Extra Gallerij Foto's</span>
|
||||
<span class="text-[10px] text-slate-400 font-bold" x-text="galleryImages.length + ' extra foto(\'s)'"></span>
|
||||
<span class="text-xs font-medium text-slate-700">Extra Galerijfoto's</span>
|
||||
<span class="text-[10px] text-slate-400" x-text="galleryImages.length + ' foto(\'s)'"></span>
|
||||
</div>
|
||||
|
||||
<!-- Grid van Extra Foto's -->
|
||||
<div class="grid grid-cols-2 sm:grid-cols-3 gap-2.5 max-h-96 overflow-y-auto pr-1">
|
||||
<div class="grid grid-cols-2 sm:grid-cols-3 gap-2 max-h-80 overflow-y-auto pr-1">
|
||||
<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">
|
||||
<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>
|
||||
|
||||
<!-- Index Badge -->
|
||||
<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">
|
||||
<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">
|
||||
<button
|
||||
type="button"
|
||||
@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>
|
||||
<span>Als Cover</span>
|
||||
Als Cover
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
@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>
|
||||
<span>Verwijder</span>
|
||||
Verwijder
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<!-- Empty state -->
|
||||
<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">
|
||||
<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 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">
|
||||
Geen extra foto's in de galerij.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -487,37 +451,37 @@
|
||||
|
||||
<!-- Beschrijving -->
|
||||
<div class="space-y-1.5">
|
||||
<label class="block text-xs font-bold text-slate-700">Volledige 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>
|
||||
<label class="block text-xs font-medium text-slate-700">Productbeschrijving *</label>
|
||||
<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>
|
||||
|
||||
<!-- 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">
|
||||
<label class="block text-xs font-bold text-slate-700">Afmetingen (LxBxH)</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">
|
||||
<label class="block text-xs font-medium text-slate-700">Afmetingen</label>
|
||||
<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 class="space-y-1.5">
|
||||
<label class="block text-xs font-bold 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">
|
||||
<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/70 focus:bg-white border border-slate-200 rounded-lg px-3 py-1.5 text-xs text-slate-900">
|
||||
</div>
|
||||
|
||||
<div class="space-y-1.5">
|
||||
<label class="block text-xs font-bold text-slate-700">Printtijd (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">
|
||||
<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/70 focus:bg-white border border-slate-200 rounded-lg px-3 py-1.5 text-xs text-slate-900">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Toggles -->
|
||||
<div class="pt-4 border-t border-slate-200/80 flex items-center space-x-6">
|
||||
<label class="flex items-center space-x-2 cursor-pointer text-xs font-bold text-slate-700">
|
||||
<input type="checkbox" name="is_active" value="1" checked class="w-4 h-4 rounded text-amber-500 bg-white border-slate-300">
|
||||
<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">
|
||||
<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>
|
||||
</label>
|
||||
|
||||
<label class="flex items-center space-x-2 cursor-pointer text-xs font-bold text-slate-700">
|
||||
<input type="checkbox" name="is_featured" value="1" class="w-4 h-4 rounded text-amber-500 bg-white border-slate-300">
|
||||
<label class="flex items-center space-x-2 cursor-pointer">
|
||||
<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>
|
||||
</label>
|
||||
</div>
|
||||
@@ -525,12 +489,12 @@
|
||||
</div>
|
||||
|
||||
<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
|
||||
</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>
|
||||
<span>Product Publiceren</span>
|
||||
<span>Product Opslaan</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -76,17 +76,17 @@
|
||||
}">
|
||||
|
||||
<!-- 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>
|
||||
<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>
|
||||
<span>Terug naar Producten</span>
|
||||
</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 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>
|
||||
<i data-lucide="external-link" class="w-3.5 h-3.5 text-slate-400"></i>
|
||||
</a>
|
||||
@@ -98,18 +98,18 @@
|
||||
@csrf
|
||||
@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 -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<div class="md:col-span-2 space-y-1.5">
|
||||
<label class="block text-xs font-bold 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">
|
||||
<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/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 class="space-y-1.5">
|
||||
<label class="block text-xs font-bold 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">
|
||||
<label class="block text-xs font-medium text-slate-700">Categorie *</label>
|
||||
<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)
|
||||
<option value="{{ $cat->id }}" {{ old('category_id', $product->category_id) == $cat->id ? 'selected' : '' }}>
|
||||
{{ $cat->name }}
|
||||
@@ -120,52 +120,52 @@
|
||||
</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 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>
|
||||
<h3 class="font-heading text-xs font-black 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>
|
||||
<i data-lucide="calculator" class="w-4 h-4 text-slate-500"></i>
|
||||
<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-slate-200/70 text-slate-700 font-mono text-[10px]">Formule</span>
|
||||
</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">
|
||||
<span x-text="showCalculator ? 'Inklappen' : 'Calculator Openen'"></span>
|
||||
<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' : 'Openen'"></span>
|
||||
<i data-lucide="chevron-down" class="w-3.5 h-3.5 transition-transform" :class="showCalculator ? 'rotate-180' : ''"></i>
|
||||
</button>
|
||||
</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">
|
||||
<!-- Gewicht -->
|
||||
<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">
|
||||
<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">
|
||||
<span class="absolute right-2.5 top-1/2 -translate-y-1/2 text-[10px] text-slate-400 font-bold">gram</span>
|
||||
<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">gram</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Printtijd -->
|
||||
<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">
|
||||
<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">
|
||||
<span class="absolute right-2.5 top-1/2 -translate-y-1/2 text-[10px] text-slate-400 font-bold">uur</span>
|
||||
<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">uur</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Aantal Kleuren (AMS Purge) -->
|
||||
<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">
|
||||
<template x-for="c in [1, 2, 3, 4]" :key="c">
|
||||
<button
|
||||
type="button"
|
||||
@click="colorCount = c"
|
||||
class="py-1.5 rounded-lg text-center font-bold text-xs transition border"
|
||||
: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="py-1 rounded-md text-center font-medium text-xs transition border cursor-pointer"
|
||||
: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"
|
||||
></button>
|
||||
</template>
|
||||
@@ -174,8 +174,8 @@
|
||||
|
||||
<!-- Materiaalsoort -->
|
||||
<div class="space-y-1">
|
||||
<label class="block text-[11px] font-bold 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">
|
||||
<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-lg px-2.5 py-1.5 text-xs font-medium text-slate-900">
|
||||
<option value="pla">Bio-PLA (1.0x)</option>
|
||||
<option value="petg">PETG Tough (1.2x)</option>
|
||||
<option value="silk">Silk Zijdeglans (1.3x)</option>
|
||||
@@ -184,48 +184,43 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Winstmarge selectie -->
|
||||
<div class="flex flex-wrap items-center justify-between gap-2 pt-2 border-t border-amber-200/50 text-xs">
|
||||
<div class="flex items-center space-x-1.5">
|
||||
<span class="text-slate-600 font-bold text-[11px]">Winstmarge:</span>
|
||||
<div class="inline-flex rounded-lg border border-slate-200 bg-white p-0.5 text-[11px] font-bold">
|
||||
<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 = 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 = 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 = 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>
|
||||
<!-- Marge Selector -->
|
||||
<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-2">
|
||||
<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-medium">
|
||||
<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-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-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-slate-900 text-white' : 'text-slate-600 hover:text-slate-900'" class="px-2 py-0.5 rounded transition">100%</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Live Cost Breakdown Strip -->
|
||||
<div class="flex items-center space-x-3 text-[11px] text-slate-500 font-semibold">
|
||||
<span>🧵 Materiaal: €<span x-text="materialCost"></span></span>
|
||||
<span>⚡ Stroom: €<span x-text="electricityCost"></span></span>
|
||||
<span>⚙️ Slijtage: €<span x-text="machineCost"></span></span>
|
||||
<span class="font-bold text-slate-700">Kostprijs: €<span x-text="totalProductionCost"></span></span>
|
||||
<!-- Live Cost Breakdown -->
|
||||
<div class="flex items-center space-x-3 text-[11px] text-slate-400 font-normal">
|
||||
<span>Materiaal: €<span x-text="materialCost"></span></span>
|
||||
<span>Stroom: €<span x-text="electricityCost"></span></span>
|
||||
<span>Slijtage: €<span x-text="machineCost"></span></span>
|
||||
<span class="font-semibold text-slate-700">Kostprijs: €<span x-text="totalProductionCost"></span></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Result Banner met 1-klik overneem knop -->
|
||||
<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="flex items-center space-x-3">
|
||||
<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">
|
||||
€
|
||||
</div>
|
||||
<!-- Callout Strip -->
|
||||
<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>
|
||||
<span class="text-[10px] text-slate-400 block font-bold uppercase tracking-wider">Berekend Prijsvoorstel (incl. 21% btw)</span>
|
||||
<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">
|
||||
<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 • <span x-text="printTimeHours"></span>u • <span x-text="colorCount"></span> kleur(en)</span>
|
||||
</div>
|
||||
<span class="font-heading text-lg font-bold text-slate-900">€ <span x-text="suggestedPrice"></span></span>
|
||||
<span class="text-[11px] text-slate-400">(op basis van <span x-text="weightGrams"></span>g • <span x-text="printTimeHours"></span>u • <span x-text="colorCount"></span> kleur)</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
@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>
|
||||
</button>
|
||||
</div>
|
||||
@@ -235,28 +230,28 @@
|
||||
<!-- Prijs & Korte Omschrijving -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<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">
|
||||
<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
|
||||
type="number"
|
||||
step="0.01"
|
||||
name="base_price"
|
||||
x-model="basePrice"
|
||||
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 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>
|
||||
<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">
|
||||
<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/70 focus:bg-white border border-slate-200 rounded-lg px-3 py-2 text-xs text-slate-900">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 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="{
|
||||
imageUrl: '{{ old('image_url', $product->image_url ?? '') }}',
|
||||
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>
|
||||
<div class="flex items-center space-x-2">
|
||||
<i data-lucide="image" class="w-4 h-4 text-amber-500"></i>
|
||||
<h3 class="font-heading text-sm font-black 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>
|
||||
<i data-lucide="image" class="w-4 h-4 text-slate-500"></i>
|
||||
<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-600 font-mono text-[11px]" x-text="(imageUrl ? 1 : 0) + galleryImages.length + ' foto(\'s)'"></span>
|
||||
</div>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center space-x-2">
|
||||
<!-- Bestand uploaden button -->
|
||||
<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-amber-500"></i>
|
||||
<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">
|
||||
<i data-lucide="upload" class="w-3.5 h-3.5 text-slate-400"></i>
|
||||
<span x-text="isUploading ? 'Uploaden...' : 'Foto Uploaden'"></span>
|
||||
<input type="file" accept="image/*" class="hidden" @change="uploadFile" :disabled="isUploading">
|
||||
</label>
|
||||
|
||||
<!-- URL toevoegen toggle -->
|
||||
<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-amber-500"></i>
|
||||
<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">
|
||||
<i data-lucide="link" class="w-3.5 h-3.5 text-slate-400"></i>
|
||||
<span>URL Plakken</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 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">
|
||||
<input
|
||||
type="text"
|
||||
x-model="newImageUrl"
|
||||
@keydown.enter.prevent="addImageUrl"
|
||||
placeholder="Plak hier een foto-URL (bijv. https://makerworld... of /images/products/...)"
|
||||
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"
|
||||
placeholder="Plak hier een foto-URL..."
|
||||
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">
|
||||
<i data-lucide="plus" class="w-3.5 h-3.5"></i>
|
||||
<span>Toevoegen</span>
|
||||
<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">
|
||||
Toevoegen
|
||||
</button>
|
||||
</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 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">
|
||||
|
||||
<!-- Hoofdafbeelding Box (Links) -->
|
||||
<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">
|
||||
<!-- Cover Box -->
|
||||
<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">
|
||||
<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">
|
||||
<i data-lucide="star" class="w-3 h-3 fill-current"></i>
|
||||
<span>Hoofdafbeelding (Cover)</span>
|
||||
</span>
|
||||
|
||||
<span class="text-[10px] font-semibold text-slate-500 uppercase tracking-wider">Hoofdafbeelding (Cover)</span>
|
||||
<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">
|
||||
<i data-lucide="trash-2" class="w-3.5 h-3.5"></i>
|
||||
<span>Verwijderen</span>
|
||||
<button type="button" @click="removeCover" class="text-slate-400 hover:text-rose-600 text-[11px] transition">
|
||||
Verwijderen
|
||||
</button>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<!-- Grote Image Preview -->
|
||||
<div class="aspect-4/3 rounded-xl bg-white overflow-hidden flex items-center justify-center relative border border-slate-200 shadow-2xs">
|
||||
<div class="aspect-4/3 rounded-lg bg-white overflow-hidden flex items-center justify-center relative border border-slate-200/60 shadow-2xs">
|
||||
<template x-if="imageUrl">
|
||||
<img :src="imageUrl" alt="Hoofdafbeelding" class="w-full h-full object-cover">
|
||||
</template>
|
||||
<template x-if="!imageUrl">
|
||||
<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>
|
||||
<p class="text-xs font-bold">Geen hoofdafbeelding</p>
|
||||
<p class="text-[10px]">Kies een foto uit de galerij of voeg er een toe.</p>
|
||||
<i data-lucide="image" class="w-6 h-6 mx-auto text-slate-300"></i>
|
||||
<p class="text-xs">Geen cover</p>
|
||||
</div>
|
||||
</template>
|
||||
</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>
|
||||
|
||||
<!-- Gallerij Foto's (Rechts) -->
|
||||
<div class="md:col-span-7 bg-slate-50/60 rounded-2xl border border-slate-200 p-3.5 space-y-3">
|
||||
<!-- Gallerij Grid -->
|
||||
<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">
|
||||
<span class="text-xs font-black text-slate-700 uppercase tracking-wider">Extra Gallerij Foto's</span>
|
||||
<span class="text-[10px] text-slate-400 font-bold" x-text="galleryImages.length + ' extra foto(\'s)'"></span>
|
||||
<span class="text-xs font-medium text-slate-700">Extra Galerijfoto's</span>
|
||||
<span class="text-[10px] text-slate-400" x-text="galleryImages.length + ' foto(\'s)'"></span>
|
||||
</div>
|
||||
|
||||
<!-- Grid van Extra Foto's -->
|
||||
<div class="grid grid-cols-2 sm:grid-cols-3 gap-2.5 max-h-96 overflow-y-auto pr-1">
|
||||
<div class="grid grid-cols-2 sm:grid-cols-3 gap-2 max-h-80 overflow-y-auto pr-1">
|
||||
<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">
|
||||
<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>
|
||||
|
||||
<!-- Index Badge -->
|
||||
<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">
|
||||
<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">
|
||||
<button
|
||||
type="button"
|
||||
@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>
|
||||
<span>Als Cover</span>
|
||||
Als Cover
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
@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>
|
||||
<span>Verwijder</span>
|
||||
Verwijder
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<!-- Empty state -->
|
||||
<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">
|
||||
<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 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">
|
||||
Geen extra foto's in de galerij.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -495,37 +460,37 @@
|
||||
|
||||
<!-- Beschrijving -->
|
||||
<div class="space-y-1.5">
|
||||
<label class="block text-xs font-bold text-slate-700">Volledige 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>
|
||||
<label class="block text-xs font-medium text-slate-700">Productbeschrijving *</label>
|
||||
<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>
|
||||
|
||||
<!-- 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">
|
||||
<label class="block text-xs font-bold text-slate-700">Afmetingen (LxBxH)</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">
|
||||
<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/70 focus:bg-white border border-slate-200 rounded-lg px-3 py-1.5 text-xs text-slate-900">
|
||||
</div>
|
||||
|
||||
<div class="space-y-1.5">
|
||||
<label class="block text-xs font-bold 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">
|
||||
<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/70 focus:bg-white border border-slate-200 rounded-lg px-3 py-1.5 text-xs text-slate-900">
|
||||
</div>
|
||||
|
||||
<div class="space-y-1.5">
|
||||
<label class="block text-xs font-bold text-slate-700">Printtijd (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">
|
||||
<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/70 focus:bg-white border border-slate-200 rounded-lg px-3 py-1.5 text-xs text-slate-900">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Toggles -->
|
||||
<div class="pt-4 border-t border-slate-200/80 flex items-center space-x-6">
|
||||
<label class="flex items-center space-x-2 cursor-pointer text-xs font-bold text-slate-700">
|
||||
<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">
|
||||
<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">
|
||||
<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>
|
||||
</label>
|
||||
|
||||
<label class="flex items-center space-x-2 cursor-pointer text-xs font-bold text-slate-700">
|
||||
<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">
|
||||
<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-slate-900 border-slate-300">
|
||||
<span>Uitlichten op homepage</span>
|
||||
</label>
|
||||
</div>
|
||||
@@ -533,10 +498,10 @@
|
||||
</div>
|
||||
|
||||
<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
|
||||
</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>
|
||||
<span>Wijzigingen Opslaan</span>
|
||||
</button>
|
||||
|
||||
@@ -6,108 +6,95 @@
|
||||
<div class="space-y-6">
|
||||
|
||||
<!-- 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 class="inline-flex items-center space-x-1.5 text-xs text-amber-700 font-bold uppercase tracking-wider mb-1">
|
||||
<i data-lucide="box" class="w-4 h-4"></i>
|
||||
<span>Assortiment & Voorraad</span>
|
||||
</div>
|
||||
<h1 class="font-heading text-2xl sm:text-3xl font-black text-slate-900">Producten Overzicht ({{ $products->total() }})</h1>
|
||||
<span class="text-[11px] font-semibold uppercase tracking-wider text-slate-400 block mb-1">Catalogus & Assortiment</span>
|
||||
<h1 class="font-heading text-2xl sm:text-3xl font-bold text-slate-900 tracking-tight">Producten ({{ $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>
|
||||
</div>
|
||||
|
||||
<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">
|
||||
<i data-lucide="download-cloud" class="w-4 h-4 text-slate-500"></i>
|
||||
<span>MakerWorld Importer</span>
|
||||
<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-3.5 h-3.5 text-slate-400"></i>
|
||||
<span>MakerWorld Sync</span>
|
||||
</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">
|
||||
<i data-lucide="plus" class="w-4 h-4"></i>
|
||||
<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-3.5 h-3.5"></i>
|
||||
<span>Nieuw Product</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Status Filter Tabs -->
|
||||
<div class="flex items-center space-x-2 border-b border-slate-200/80 pb-2 overflow-x-auto text-xs font-bold">
|
||||
<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' }}">
|
||||
<span>Alle Producten</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' }}">
|
||||
{{ $totalAll ?? $products->total() }}
|
||||
</span>
|
||||
<!-- Status Filter Tabs (Sleek Segmented Control) -->
|
||||
<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 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</span>
|
||||
<span class="text-[11px] text-slate-400">({{ $totalAll ?? $products->total() }})</span>
|
||||
</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' }}">
|
||||
<span class="w-1.5 h-1.5 rounded-full {{ ($tab ?? 'all') === 'published' ? 'bg-emerald-200' : 'bg-emerald-500' }}"></span>
|
||||
<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 bg-emerald-500"></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' }}">
|
||||
{{ $totalPublished ?? 0 }}
|
||||
</span>
|
||||
<span class="text-[11px] text-slate-400">({{ $totalPublished ?? 0 }})</span>
|
||||
</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' }}">
|
||||
<i data-lucide="layers" class="w-3.5 h-3.5"></i>
|
||||
<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' }}">
|
||||
<span>Concepten / Staging</span>
|
||||
@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 }}
|
||||
</span>
|
||||
@endif
|
||||
</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' }}">
|
||||
<i data-lucide="download-cloud" class="w-3.5 h-3.5"></i>
|
||||
<span>MakerWorld Modellen</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 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' }}">
|
||||
<span>MakerWorld</span>
|
||||
<span class="text-[11px] text-slate-400">({{ $totalMakerWorld ?? 0 }})</span>
|
||||
</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) →</span>
|
||||
</a>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
<!-- 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">
|
||||
<div class="relative flex-1 max-w-md">
|
||||
<div class="relative flex-1 max-w-sm">
|
||||
<input
|
||||
type="text"
|
||||
name="q"
|
||||
value="{{ request('q') }}"
|
||||
placeholder="Zoek op naam of omschrijving..."
|
||||
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"
|
||||
placeholder="Zoek op naam..."
|
||||
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>
|
||||
|
||||
<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>
|
||||
@foreach($categories as $cat)
|
||||
<option value="{{ $cat->id }}" {{ request('category_id') == $cat->id ? 'selected' : '' }}>{{ $cat->name }}</option>
|
||||
@endforeach
|
||||
</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
|
||||
</button>
|
||||
@if(request()->hasAny(['q', 'category_id']))
|
||||
<a href="{{ route('admin.products.index') }}" class="text-xs text-rose-600 hover:underline">Wissen</a>
|
||||
@endif
|
||||
</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>
|
||||
|
||||
<!-- Products Table -->
|
||||
<div class="rounded-2xl bg-white border border-slate-200/80 overflow-hidden shadow-sm">
|
||||
<!-- Products Table (Clean & Airy) -->
|
||||
<div class="rounded-xl bg-white border border-slate-200/60 overflow-hidden shadow-2xs">
|
||||
<div class="overflow-x-auto">
|
||||
<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>
|
||||
<th class="py-3 px-4">Product</th>
|
||||
<th class="py-3 px-4">Categorie</th>
|
||||
@@ -117,31 +104,31 @@
|
||||
<th class="py-3 px-4 text-right">Acties</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-slate-100 font-medium">
|
||||
<tbody class="divide-y divide-slate-100 font-normal">
|
||||
@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">
|
||||
<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">
|
||||
@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) }}
|
||||
</span>
|
||||
@endif
|
||||
</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 }}
|
||||
</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>
|
||||
</td>
|
||||
|
||||
<td class="py-3 px-4">
|
||||
@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 }}
|
||||
</span>
|
||||
@else
|
||||
@@ -150,10 +137,10 @@
|
||||
</td>
|
||||
|
||||
<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 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->weight_grams ?? 0 }}g • {{ $product->print_time_hours ?? 0 }}u</div>
|
||||
</td>
|
||||
@@ -161,51 +148,41 @@
|
||||
<td class="py-3 px-4">
|
||||
<div class="flex flex-col gap-1 items-start">
|
||||
@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">
|
||||
<i data-lucide="layers" class="w-3 h-3 text-amber-600"></i>
|
||||
<span>Concept Staging</span>
|
||||
<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">
|
||||
<span>Concept</span>
|
||||
</span>
|
||||
<a href="{{ route('admin.makerworld.staging') }}" class="text-[10px] text-amber-700 hover:underline font-bold">
|
||||
Beoordeel in Artikel Beheer →
|
||||
</a>
|
||||
@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>Live in Webshop</span>
|
||||
<span>Live</span>
|
||||
</span>
|
||||
@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="w-1.5 h-1.5 rounded-full bg-slate-400"></span>
|
||||
<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-300"></span>
|
||||
<span>Verborgen</span>
|
||||
</span>
|
||||
@endif
|
||||
|
||||
@if($product->makerworld_id)
|
||||
<span class="text-[10px] text-indigo-600 font-mono font-medium">
|
||||
MakerWorld #{{ $product->makerworld_id }}
|
||||
</span>
|
||||
@endif
|
||||
|
||||
@if($product->is_featured)
|
||||
<span class="inline-flex items-center text-amber-600 text-[10px] font-bold">
|
||||
★ Uitgelicht
|
||||
<span class="text-[10px] text-slate-400 font-mono">
|
||||
MW #{{ $product->makerworld_id }}
|
||||
</span>
|
||||
@endif
|
||||
</div>
|
||||
</td>
|
||||
|
||||
<td class="py-3 px-4 text-right">
|
||||
<div class="flex items-center justify-end space-x-1.5">
|
||||
<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">
|
||||
<div class="flex items-center justify-end space-x-1">
|
||||
<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>
|
||||
</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>
|
||||
</a>
|
||||
<form action="{{ route('admin.products.destroy', $product) }}" method="POST" onsubmit="return confirm('Weet je zeker dat je dit product wilt verwijderen?')">
|
||||
@csrf
|
||||
@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>
|
||||
</button>
|
||||
</form>
|
||||
@@ -224,7 +201,7 @@
|
||||
</div>
|
||||
|
||||
@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() }}
|
||||
</div>
|
||||
@endif
|
||||
|
||||
@@ -3,26 +3,23 @@
|
||||
@section('title', 'Wachtwoord Vergeten | Jouwdriedee.nl')
|
||||
|
||||
@section('content')
|
||||
<div class="min-h-[70vh] flex items-center justify-center py-10 px-4 sm:px-6 lg:px-8">
|
||||
<div class="w-full max-w-md space-y-6">
|
||||
<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-sm space-y-6">
|
||||
|
||||
<!-- Header -->
|
||||
<div class="text-center space-y-2">
|
||||
<div class="inline-flex items-center justify-center w-12 h-12 rounded-2xl bg-indigo-100 text-indigo-900 shadow-2xs mb-1">
|
||||
<i data-lucide="key-round" class="w-6 h-6 text-indigo-600"></i>
|
||||
</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 class="text-center space-y-1.5">
|
||||
<h1 class="text-2xl font-bold text-slate-900 tracking-tight">Wachtwoord vergeten</h1>
|
||||
<p class="text-xs text-slate-500">Vul je e-mailadres in om een herstellink te ontvangen</p>
|
||||
</div>
|
||||
|
||||
<!-- 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">
|
||||
@csrf
|
||||
|
||||
<!-- E-mailadres -->
|
||||
<div class="space-y-1.5">
|
||||
<label for="email" class="block text-xs font-bold text-slate-700">Jouw geregistreerde e-mailadres</label>
|
||||
<div class="space-y-1">
|
||||
<label for="email" class="block text-xs font-medium text-slate-700">Jouw e-mailadres</label>
|
||||
<div class="relative">
|
||||
<input
|
||||
type="email"
|
||||
@@ -32,26 +29,26 @@
|
||||
required
|
||||
autofocus
|
||||
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>
|
||||
@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
|
||||
</div>
|
||||
|
||||
<!-- Submit Button -->
|
||||
<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">
|
||||
<i data-lucide="send" class="w-4 h-4"></i>
|
||||
<span>Herstellink Versturen</span>
|
||||
<div class="pt-1">
|
||||
<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-3.5 h-3.5"></i>
|
||||
<span>Herstellink versturen</span>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="pt-4 border-t border-slate-100 text-center text-xs font-bold text-slate-600">
|
||||
<a href="{{ route('login') }}" class="text-rose-600 hover:text-rose-700 underline inline-flex items-center space-x-1">
|
||||
<div class="pt-3 border-t border-slate-100 text-center text-xs text-slate-500">
|
||||
<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>
|
||||
<span>Terug naar inloggen</span>
|
||||
</a>
|
||||
@@ -61,4 +58,3 @@
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
|
||||
@@ -3,26 +3,23 @@
|
||||
@section('title', 'Inloggen | Jouwdriedee.nl')
|
||||
|
||||
@section('content')
|
||||
<div class="min-h-[70vh] flex items-center justify-center py-10 px-4 sm:px-6 lg:px-8">
|
||||
<div class="w-full max-w-md space-y-6">
|
||||
<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-sm space-y-6">
|
||||
|
||||
<!-- Header -->
|
||||
<div class="text-center space-y-2">
|
||||
<div class="inline-flex items-center justify-center w-12 h-12 rounded-2xl bg-amber-100 text-amber-900 shadow-2xs mb-1">
|
||||
<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>
|
||||
<div class="text-center space-y-1.5">
|
||||
<h1 class="text-2xl font-bold text-slate-900 tracking-tight">Welkom terug</h1>
|
||||
<p class="text-xs text-slate-500">Log in met jouw e-mailadres en wachtwoord</p>
|
||||
</div>
|
||||
|
||||
<!-- 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">
|
||||
@csrf
|
||||
|
||||
<!-- E-mailadres -->
|
||||
<div class="space-y-1.5">
|
||||
<label for="email" class="block text-xs font-bold text-slate-700">E-mailadres</label>
|
||||
<div class="space-y-1">
|
||||
<label for="email" class="block text-xs font-medium text-slate-700">E-mailadres</label>
|
||||
<div class="relative">
|
||||
<input
|
||||
type="email"
|
||||
@@ -32,20 +29,20 @@
|
||||
required
|
||||
autofocus
|
||||
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>
|
||||
@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
|
||||
</div>
|
||||
|
||||
<!-- Wachtwoord -->
|
||||
<div class="space-y-1.5">
|
||||
<div class="space-y-1">
|
||||
<div class="flex items-center justify-between">
|
||||
<label for="password" class="block text-xs font-bold text-slate-700">Wachtwoord</label>
|
||||
<a href="{{ route('password.request') }}" class="text-[11px] font-bold text-rose-600 hover:text-rose-700 transition">
|
||||
<label for="password" class="block text-xs font-medium text-slate-700">Wachtwoord</label>
|
||||
<a href="{{ route('password.request') }}" class="text-[11px] font-medium text-slate-500 hover:text-slate-900 transition">
|
||||
Wachtwoord vergeten?
|
||||
</a>
|
||||
</div>
|
||||
@@ -56,35 +53,35 @@
|
||||
id="password"
|
||||
required
|
||||
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>
|
||||
@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
|
||||
</div>
|
||||
|
||||
<!-- Onthoud mij -->
|
||||
<div class="flex items-center justify-between pt-1">
|
||||
<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">
|
||||
<span class="text-xs font-bold text-slate-600">Onthoud mij op dit apparaat</span>
|
||||
<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 text-slate-600">Onthoud mij op dit apparaat</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<!-- Submit Button -->
|
||||
<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">
|
||||
<div class="pt-1">
|
||||
<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>
|
||||
<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>
|
||||
</div>
|
||||
</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>
|
||||
<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
|
||||
</a>
|
||||
</div>
|
||||
@@ -93,4 +90,3 @@
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
|
||||
@@ -3,26 +3,23 @@
|
||||
@section('title', 'Registreren | Jouwdriedee.nl')
|
||||
|
||||
@section('content')
|
||||
<div class="min-h-[75vh] flex items-center justify-center py-10 px-4 sm:px-6 lg:px-8">
|
||||
<div class="w-full max-w-md space-y-6">
|
||||
<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-sm space-y-6">
|
||||
|
||||
<!-- Header -->
|
||||
<div class="text-center space-y-2">
|
||||
<div class="inline-flex items-center justify-center w-12 h-12 rounded-2xl bg-rose-100 text-rose-900 shadow-2xs mb-1">
|
||||
<i data-lucide="user-plus" class="w-6 h-6 text-rose-600"></i>
|
||||
</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 class="text-center space-y-1.5">
|
||||
<h1 class="text-2xl font-bold text-slate-900 tracking-tight">Account aanmaken</h1>
|
||||
<p class="text-xs text-slate-500">Meld je aan om bestellingen te volgen en sneller af te rekenen</p>
|
||||
</div>
|
||||
|
||||
<!-- Form Card -->
|
||||
<div class="p-6 sm:p-8 rounded-3xl bg-white border border-slate-200/80 shadow-lg space-y-5">
|
||||
<form action="{{ route('register.submit') }}" method="POST" class="space-y-4">
|
||||
<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-3.5">
|
||||
@csrf
|
||||
|
||||
<!-- Naam -->
|
||||
<div class="space-y-1.5">
|
||||
<label for="name" class="block text-xs font-bold text-slate-700">Voor- en achternaam *</label>
|
||||
<div class="space-y-1">
|
||||
<label for="name" class="block text-xs font-medium text-slate-700">Voor- en achternaam *</label>
|
||||
<div class="relative">
|
||||
<input
|
||||
type="text"
|
||||
@@ -31,19 +28,19 @@
|
||||
value="{{ old('name') }}"
|
||||
required
|
||||
autofocus
|
||||
placeholder="bijv. 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"
|
||||
placeholder="Jan Jansen"
|
||||
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>
|
||||
@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
|
||||
</div>
|
||||
|
||||
<!-- E-mailadres -->
|
||||
<div class="space-y-1.5">
|
||||
<label for="email" class="block text-xs font-bold text-slate-700">E-mailadres *</label>
|
||||
<div class="space-y-1">
|
||||
<label for="email" class="block text-xs font-medium text-slate-700">E-mailadres *</label>
|
||||
<div class="relative">
|
||||
<input
|
||||
type="email"
|
||||
@@ -52,18 +49,18 @@
|
||||
value="{{ old('email') }}"
|
||||
required
|
||||
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>
|
||||
@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
|
||||
</div>
|
||||
|
||||
<!-- Wachtwoord -->
|
||||
<div class="space-y-1.5">
|
||||
<label for="password" class="block text-xs font-bold text-slate-700">Wachtwoord (minimaal 8 tekens) *</label>
|
||||
<div class="space-y-1">
|
||||
<label for="password" class="block text-xs font-medium text-slate-700">Wachtwoord (minimaal 8 tekens) *</label>
|
||||
<div class="relative">
|
||||
<input
|
||||
type="password"
|
||||
@@ -71,18 +68,18 @@
|
||||
id="password"
|
||||
required
|
||||
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>
|
||||
@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
|
||||
</div>
|
||||
|
||||
<!-- Bevestig Wachtwoord -->
|
||||
<div class="space-y-1.5">
|
||||
<label for="password_confirmation" class="block text-xs font-bold text-slate-700">Bevestig wachtwoord *</label>
|
||||
<div class="space-y-1">
|
||||
<label for="password_confirmation" class="block text-xs font-medium text-slate-700">Bevestig wachtwoord *</label>
|
||||
<div class="relative">
|
||||
<input
|
||||
type="password"
|
||||
@@ -90,25 +87,25 @@
|
||||
id="password_confirmation"
|
||||
required
|
||||
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>
|
||||
|
||||
<!-- Submit Button -->
|
||||
<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">
|
||||
<span>Account Aanmaken</span>
|
||||
<i data-lucide="arrow-right" class="w-4 h-4"></i>
|
||||
<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 registreren</span>
|
||||
<i data-lucide="arrow-right" class="w-3.5 h-3.5"></i>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="pt-4 border-t border-slate-100 text-center text-xs font-bold text-slate-600">
|
||||
<span>Heb je al een account?</span>
|
||||
<a href="{{ route('login') }}" class="text-rose-600 hover:text-rose-700 underline ml-1">
|
||||
Hier inloggen
|
||||
<div class="pt-3 border-t border-slate-100 text-center text-xs text-slate-500">
|
||||
<span>Al een account?</span>
|
||||
<a href="{{ route('login') }}" class="text-slate-900 font-semibold hover:underline ml-1">
|
||||
Inloggen
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
@@ -116,4 +113,3 @@
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
|
||||
@@ -3,27 +3,24 @@
|
||||
@section('title', 'Nieuw Wachtwoord Instellen | Jouwdriedee.nl')
|
||||
|
||||
@section('content')
|
||||
<div class="min-h-[70vh] flex items-center justify-center py-10 px-4 sm:px-6 lg:px-8">
|
||||
<div class="w-full max-w-md space-y-6">
|
||||
<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-sm space-y-6">
|
||||
|
||||
<!-- Header -->
|
||||
<div class="text-center space-y-2">
|
||||
<div class="inline-flex items-center justify-center w-12 h-12 rounded-2xl bg-amber-100 text-amber-900 shadow-2xs mb-1">
|
||||
<i data-lucide="lock" 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">Nieuw wachtwoord</h1>
|
||||
<p class="text-xs text-slate-500">Kies een nieuw en veilig wachtwoord voor jouw account</p>
|
||||
<div class="text-center space-y-1.5">
|
||||
<h1 class="text-2xl font-bold text-slate-900 tracking-tight">Nieuw wachtwoord</h1>
|
||||
<p class="text-xs text-slate-500">Kies een nieuw en veilig wachtwoord voor je account</p>
|
||||
</div>
|
||||
|
||||
<!-- Form Card -->
|
||||
<div class="p-6 sm:p-8 rounded-3xl bg-white border border-slate-200/80 shadow-lg space-y-5">
|
||||
<form action="{{ route('password.update') }}" method="POST" class="space-y-4">
|
||||
<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-3.5">
|
||||
@csrf
|
||||
<input type="hidden" name="token" value="{{ $token }}">
|
||||
|
||||
<!-- E-mailadres -->
|
||||
<div class="space-y-1.5">
|
||||
<label for="email" class="block text-xs font-bold text-slate-700">E-mailadres</label>
|
||||
<div class="space-y-1">
|
||||
<label for="email" class="block text-xs font-medium text-slate-700">E-mailadres</label>
|
||||
<input
|
||||
type="email"
|
||||
name="email"
|
||||
@@ -31,16 +28,16 @@
|
||||
value="{{ old('email', $email) }}"
|
||||
required
|
||||
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')
|
||||
<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
|
||||
</div>
|
||||
|
||||
<!-- Nieuw Wachtwoord -->
|
||||
<div class="space-y-1.5">
|
||||
<label for="password" class="block text-xs font-bold text-slate-700">Nieuw wachtwoord (min. 8 tekens)</label>
|
||||
<div class="space-y-1">
|
||||
<label for="password" class="block text-xs font-medium text-slate-700">Nieuw wachtwoord (min. 8 tekens)</label>
|
||||
<input
|
||||
type="password"
|
||||
name="password"
|
||||
@@ -48,31 +45,30 @@
|
||||
required
|
||||
autofocus
|
||||
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')
|
||||
<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
|
||||
</div>
|
||||
|
||||
<!-- Bevestig Nieuw Wachtwoord -->
|
||||
<div class="space-y-1.5">
|
||||
<label for="password_confirmation" class="block text-xs font-bold text-slate-700">Bevestig nieuw wachtwoord</label>
|
||||
<div class="space-y-1">
|
||||
<label for="password_confirmation" class="block text-xs font-medium text-slate-700">Bevestig nieuw wachtwoord</label>
|
||||
<input
|
||||
type="password"
|
||||
name="password_confirmation"
|
||||
id="password_confirmation"
|
||||
required
|
||||
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>
|
||||
|
||||
<!-- Submit Button -->
|
||||
<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">
|
||||
<i data-lucide="check" class="w-4 h-4"></i>
|
||||
<span>Wachtwoord Opslaan & Inloggen</span>
|
||||
<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>Wachtwoord Opslaan</span>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
@@ -81,4 +77,3 @@
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
|
||||
@@ -1,86 +1,86 @@
|
||||
@extends('layouts.app')
|
||||
|
||||
@section('title', 'Winkelwagen 🛒 | Jouwdriedee.nl')
|
||||
@section('title', 'Winkelwagen | Jouwdriedee.nl')
|
||||
|
||||
@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">
|
||||
<h1 class="font-heading text-2xl sm:text-3xl font-black text-slate-900 tracking-tight flex items-center space-x-2">
|
||||
<span>🛒</span>
|
||||
<span>Jouw Winkelwagen</span>
|
||||
<h1 class="text-2xl sm:text-3xl font-bold tracking-tight text-slate-900">
|
||||
Winkelwagen
|
||||
</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 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))
|
||||
<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="w-16 h-16 rounded-2xl bg-amber-50 text-slate-800 flex items-center justify-center mx-auto text-3xl">
|
||||
🧸
|
||||
<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-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>
|
||||
<h2 class="font-heading text-xl font-black text-slate-900">Je winkelmandje 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>
|
||||
<div class="pt-2 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">
|
||||
<span>Bekijk Alle Prints 🎁</span>
|
||||
<h2 class="text-base font-bold text-slate-900">Je winkelwagen is nog leeg</h2>
|
||||
<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-3 flex flex-col sm:flex-row items-center justify-center gap-2">
|
||||
<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 collectie</span>
|
||||
<i data-lucide="arrow-right" class="w-3.5 h-3.5"></i>
|
||||
</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">
|
||||
<span>Eigen Model Bestellen 🚀</span>
|
||||
<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 bestand uploaden</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
@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 -->
|
||||
<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)
|
||||
<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="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">
|
||||
</div>
|
||||
<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">
|
||||
<span class="px-2 py-0.2 rounded-md bg-rose-50 text-rose-700 font-bold">{{ $item['material'] }}</span>
|
||||
<span>•</span>
|
||||
<span class="font-semibold text-slate-700">Kleur: {{ $item['color'] }}</span>
|
||||
<span>•</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>Kleur: {{ $item['color'] }}</span>
|
||||
<span>•</span>
|
||||
<span class="font-mono text-slate-600">{{ $item['scale'] }}</span>
|
||||
</div>
|
||||
@if(!empty($item['custom_file_name']))
|
||||
<div class="text-[10px] font-bold text-indigo-600 flex items-center space-x-1 pt-0.5">
|
||||
<span>📁</span>
|
||||
<span>Bestand: {{ $item['custom_file_name'] }}</span>
|
||||
<div class="text-[10px] text-slate-500 font-mono flex items-center space-x-1 pt-0.5">
|
||||
<i data-lucide="file-code" class="w-3 h-3 text-slate-400"></i>
|
||||
<span>{{ $item['custom_file_name'] }}</span>
|
||||
</div>
|
||||
@endif
|
||||
@if(!empty($item['custom_model_url']))
|
||||
<div class="text-[10px] font-bold text-indigo-600 flex items-center space-x-1 pt-0.5">
|
||||
<span>🔗</span>
|
||||
<div class="text-[10px] text-slate-500 font-mono flex items-center space-x-1 pt-0.5">
|
||||
<i data-lucide="link" class="w-3 h-3 text-slate-400"></i>
|
||||
<span class="truncate max-w-xs">{{ $item['custom_model_url'] }}</span>
|
||||
</div>
|
||||
@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
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 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 -->
|
||||
<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
|
||||
<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">
|
||||
<button type="submit" class="p-1 rounded-lg text-slate-400 hover:text-slate-800 transition" title="Bijwerken">
|
||||
<i data-lucide="refresh-cw" class="w-3.5 h-3.5"></i>
|
||||
<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 cursor-pointer" title="Bijwerken">
|
||||
<i data-lucide="refresh-cw" class="w-3 h-3"></i>
|
||||
</button>
|
||||
</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, ',', '.') }}
|
||||
</span>
|
||||
|
||||
@@ -88,7 +88,7 @@
|
||||
<form action="{{ route('cart.remove', $key) }}" method="POST">
|
||||
@csrf
|
||||
@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>
|
||||
</button>
|
||||
</form>
|
||||
@@ -99,45 +99,45 @@
|
||||
|
||||
<!-- Samenvatting -->
|
||||
<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">
|
||||
<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">
|
||||
<span>🧾</span>
|
||||
<span>Overzicht Bestelling</span>
|
||||
<div class="p-6 rounded-2xl bg-white border border-slate-200/80 shadow-xs space-y-4 sticky top-24">
|
||||
<h3 class="text-xs font-bold text-slate-900 uppercase tracking-wider pb-2 border-b border-slate-100">
|
||||
Besteloverzicht
|
||||
</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">
|
||||
<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 class="flex justify-between text-slate-600">
|
||||
<span>Verzendkosten</span>
|
||||
@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
|
||||
<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
|
||||
</div>
|
||||
@if($subtotal < 50)
|
||||
<p class="text-[11px] text-amber-900 bg-amber-50 p-2.5 rounded-xl border border-amber-200 font-bold">
|
||||
💡 Tip: Bestel nog voor <strong>€ {{ number_format(50 - $subtotal, 2, ',', '.') }}</strong> voor gratis verzending!
|
||||
<p class="text-[11px] text-slate-600 bg-slate-50 p-2.5 rounded-xl border border-slate-200/60">
|
||||
Bestel nog voor <strong>€ {{ number_format(50 - $subtotal, 2, ',', '.') }}</strong> voor gratis verzending.
|
||||
</p>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
<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="font-heading text-2xl font-black text-slate-900">€ {{ number_format($total, 2, ',', '.') }}</span>
|
||||
<span class="text-xs font-medium text-slate-600">Totaal (incl. btw)</span>
|
||||
<span class="text-xl font-bold text-slate-900">€ {{ number_format($total, 2, ',', '.') }}</span>
|
||||
</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">
|
||||
<span>Doorgaan Naar Afrekenen 🚀</span>
|
||||
<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>
|
||||
<i data-lucide="arrow-right" class="w-3.5 h-3.5"></i>
|
||||
</a>
|
||||
|
||||
<div class="flex items-center justify-center space-x-2 text-[11px] font-bold text-slate-400 pt-1">
|
||||
<span>🔒 Veilig betalen met iDEAL</span>
|
||||
<span>•</span>
|
||||
<span>PostNL</span>
|
||||
<div class="flex items-center justify-center space-x-2 text-[11px] text-slate-400 pt-1">
|
||||
<span>Veilig betalen via iDEAL</span>
|
||||
<span>•</span>
|
||||
<span>PostNL bezorging</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -3,14 +3,14 @@
|
||||
@section('title', 'Afrekenen | Jouwdriedee.nl')
|
||||
|
||||
@section('content')
|
||||
<div class="bg-white border-b border-slate-200 py-6">
|
||||
<div class="border-b border-slate-200/80 py-6 sm:py-8 bg-slate-50/50">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<h1 class="text-2xl sm:text-3xl font-black text-slate-900 tracking-tight">Afrekenen & Gegevens</h1>
|
||||
<p class="text-xs text-slate-500 mt-0.5">Vul je bezorgadres in om jouw 3D-prints in de printwachtrij te plaatsen.</p>
|
||||
<h1 class="text-2xl sm:text-3xl font-bold tracking-tight text-slate-900">Afrekenen & Gegevens</h1>
|
||||
<p class="text-xs text-slate-500 mt-1">Vul je bezorgadres in om jouw 3D prints in de productiewachtrij te plaatsen.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 sm:py-12">
|
||||
<form action="{{ route('checkout.store') }}" method="POST">
|
||||
@csrf
|
||||
<div class="grid grid-cols-1 lg:grid-cols-12 gap-8">
|
||||
@@ -19,96 +19,96 @@
|
||||
<div class="lg:col-span-7 space-y-6">
|
||||
|
||||
<!-- 1. Contactgegevens -->
|
||||
<div class="p-6 rounded-3xl bg-white border border-slate-200 shadow-2xs space-y-4">
|
||||
<div class="p-6 rounded-2xl bg-white border border-slate-200/80 shadow-xs space-y-4">
|
||||
<h2 class="text-xs font-bold text-slate-900 uppercase tracking-wider flex items-center space-x-2">
|
||||
<i data-lucide="user" class="w-4 h-4 text-indigo-600"></i>
|
||||
<i data-lucide="user" class="w-3.5 h-3.5 text-slate-500"></i>
|
||||
<span>1. Contactgegevens</span>
|
||||
</h2>
|
||||
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<div class="sm:col-span-2">
|
||||
<label class="block text-xs font-semibold text-slate-700 mb-1">Volledige Naam *</label>
|
||||
<input type="text" name="customer_name" required value="{{ old('customer_name') }}" placeholder="Jan de Vries" class="w-full bg-slate-50 border border-slate-200 rounded-xl px-3.5 py-2.5 text-xs text-slate-900 focus:bg-white focus:outline-none focus:ring-1 focus:ring-indigo-500">
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-3.5">
|
||||
<div class="sm:col-span-2 space-y-1">
|
||||
<label class="block text-xs font-medium text-slate-700">Volledige Naam *</label>
|
||||
<input type="text" name="customer_name" required value="{{ old('customer_name') }}" placeholder="Jan Jansen" class="w-full bg-slate-50 border border-slate-200 rounded-xl px-3.5 py-2 text-xs text-slate-900 focus:bg-white focus:outline-none focus:ring-2 focus:ring-slate-900/10 focus:border-slate-900">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-xs font-semibold text-slate-700 mb-1">E-mailadres *</label>
|
||||
<input type="email" name="customer_email" required value="{{ old('customer_email') }}" placeholder="jan@voorbeeld.nl" class="w-full bg-slate-50 border border-slate-200 rounded-xl px-3.5 py-2.5 text-xs text-slate-900 focus:bg-white focus:outline-none focus:ring-1 focus:ring-indigo-500">
|
||||
<div class="space-y-1">
|
||||
<label class="block text-xs font-medium text-slate-700">E-mailadres *</label>
|
||||
<input type="email" name="customer_email" required value="{{ old('customer_email') }}" placeholder="jan@voorbeeld.nl" class="w-full bg-slate-50 border border-slate-200 rounded-xl px-3.5 py-2 text-xs text-slate-900 focus:bg-white focus:outline-none focus:ring-2 focus:ring-slate-900/10 focus:border-slate-900">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-xs font-semibold text-slate-700 mb-1">Telefoonnummer (voor bezorgupdates)</label>
|
||||
<input type="text" name="customer_phone" value="{{ old('customer_phone') }}" placeholder="06-12345678" class="w-full bg-slate-50 border border-slate-200 rounded-xl px-3.5 py-2.5 text-xs text-slate-900 focus:bg-white focus:outline-none focus:ring-1 focus:ring-indigo-500">
|
||||
<div class="space-y-1">
|
||||
<label class="block text-xs font-medium text-slate-700">Telefoonnummer</label>
|
||||
<input type="text" name="customer_phone" value="{{ old('customer_phone') }}" placeholder="06-12345678" class="w-full bg-slate-50 border border-slate-200 rounded-xl px-3.5 py-2 text-xs text-slate-900 focus:bg-white focus:outline-none focus:ring-2 focus:ring-slate-900/10 focus:border-slate-900">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 2. Verzendadres -->
|
||||
<div class="p-6 rounded-3xl bg-white border border-slate-200 shadow-2xs space-y-4">
|
||||
<div class="p-6 rounded-2xl bg-white border border-slate-200/80 shadow-xs space-y-4">
|
||||
<h2 class="text-xs font-bold text-slate-900 uppercase tracking-wider flex items-center space-x-2">
|
||||
<i data-lucide="map-pin" class="w-4 h-4 text-indigo-600"></i>
|
||||
<i data-lucide="map-pin" class="w-3.5 h-3.5 text-slate-500"></i>
|
||||
<span>2. Verzendadres (Nederland)</span>
|
||||
</h2>
|
||||
|
||||
<div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
|
||||
<div class="sm:col-span-2">
|
||||
<label class="block text-xs font-semibold text-slate-700 mb-1">Straatnaam *</label>
|
||||
<input type="text" name="shipping_street" required value="{{ old('shipping_street') }}" placeholder="Hoofdstraat" class="w-full bg-slate-50 border border-slate-200 rounded-xl px-3.5 py-2.5 text-xs text-slate-900 focus:bg-white focus:outline-none focus:ring-1 focus:ring-indigo-500">
|
||||
<div class="grid grid-cols-1 sm:grid-cols-3 gap-3.5">
|
||||
<div class="sm:col-span-2 space-y-1">
|
||||
<label class="block text-xs font-medium text-slate-700">Straatnaam *</label>
|
||||
<input type="text" name="shipping_street" required value="{{ old('shipping_street') }}" placeholder="Kalverstraat" class="w-full bg-slate-50 border border-slate-200 rounded-xl px-3.5 py-2 text-xs text-slate-900 focus:bg-white focus:outline-none focus:ring-2 focus:ring-slate-900/10 focus:border-slate-900">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-xs font-semibold text-slate-700 mb-1">Huisnummer *</label>
|
||||
<input type="text" name="shipping_number" required value="{{ old('shipping_number') }}" placeholder="12A" class="w-full bg-slate-50 border border-slate-200 rounded-xl px-3.5 py-2.5 text-xs text-slate-900 focus:bg-white focus:outline-none focus:ring-1 focus:ring-indigo-500">
|
||||
<div class="space-y-1">
|
||||
<label class="block text-xs font-medium text-slate-700">Huisnummer *</label>
|
||||
<input type="text" name="shipping_number" required value="{{ old('shipping_number') }}" placeholder="12A" class="w-full bg-slate-50 border border-slate-200 rounded-xl px-3.5 py-2 text-xs text-slate-900 focus:bg-white focus:outline-none focus:ring-2 focus:ring-slate-900/10 focus:border-slate-900">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-xs font-semibold text-slate-700 mb-1">Postcode *</label>
|
||||
<input type="text" name="shipping_postal_code" required value="{{ old('shipping_postal_code') }}" placeholder="1234 AB" class="w-full bg-slate-50 border border-slate-200 rounded-xl px-3.5 py-2.5 text-xs text-slate-900 focus:bg-white focus:outline-none focus:ring-1 focus:ring-indigo-500">
|
||||
<div class="space-y-1">
|
||||
<label class="block text-xs font-medium text-slate-700">Postcode *</label>
|
||||
<input type="text" name="shipping_postal_code" required value="{{ old('shipping_postal_code') }}" placeholder="1012 AB" class="w-full bg-slate-50 border border-slate-200 rounded-xl px-3.5 py-2 text-xs text-slate-900 focus:bg-white focus:outline-none focus:ring-2 focus:ring-slate-900/10 focus:border-slate-900">
|
||||
</div>
|
||||
|
||||
<div class="sm:col-span-2">
|
||||
<label class="block text-xs font-semibold text-slate-700 mb-1">Woonplaats *</label>
|
||||
<input type="text" name="shipping_city" required value="{{ old('shipping_city') }}" placeholder="Amsterdam" class="w-full bg-slate-50 border border-slate-200 rounded-xl px-3.5 py-2.5 text-xs text-slate-900 focus:bg-white focus:outline-none focus:ring-1 focus:ring-indigo-500">
|
||||
<div class="sm:col-span-2 space-y-1">
|
||||
<label class="block text-xs font-medium text-slate-700">Woonplaats *</label>
|
||||
<input type="text" name="shipping_city" required value="{{ old('shipping_city') }}" placeholder="Amsterdam" class="w-full bg-slate-50 border border-slate-200 rounded-xl px-3.5 py-2 text-xs text-slate-900 focus:bg-white focus:outline-none focus:ring-2 focus:ring-slate-900/10 focus:border-slate-900">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 3. Betaalmethode -->
|
||||
<div class="p-6 rounded-3xl bg-white border border-slate-200 shadow-2xs space-y-4">
|
||||
<div class="p-6 rounded-2xl bg-white border border-slate-200/80 shadow-xs space-y-4">
|
||||
<h2 class="text-xs font-bold text-slate-900 uppercase tracking-wider flex items-center space-x-2">
|
||||
<i data-lucide="credit-card" class="w-4 h-4 text-indigo-600"></i>
|
||||
<i data-lucide="credit-card" class="w-3.5 h-3.5 text-slate-500"></i>
|
||||
<span>3. Betaalmethode</span>
|
||||
</h2>
|
||||
|
||||
<div class="space-y-2.5">
|
||||
<label class="flex items-center justify-between p-3.5 rounded-2xl border border-indigo-200 bg-indigo-50/40 cursor-pointer">
|
||||
<div class="flex items-center space-x-3">
|
||||
<input type="radio" name="payment_method" value="ideal" checked class="text-indigo-600 focus:ring-indigo-500">
|
||||
<span class="text-xs font-bold text-slate-900">iDEAL</span>
|
||||
<div class="space-y-2">
|
||||
<label class="flex items-center justify-between p-3.5 rounded-xl border border-slate-900/10 bg-slate-50 cursor-pointer">
|
||||
<div class="flex items-center space-x-2.5">
|
||||
<input type="radio" name="payment_method" value="ideal" checked class="text-slate-900 focus:ring-slate-900">
|
||||
<span class="text-xs font-semibold text-slate-900">iDEAL</span>
|
||||
</div>
|
||||
<span class="text-[10px] font-mono px-2 py-0.5 rounded bg-white text-indigo-700 font-bold border border-indigo-200">Aanbevolen</span>
|
||||
<span class="text-[10px] font-medium px-2 py-0.5 rounded bg-white text-slate-700 border border-slate-200">Aanbevolen</span>
|
||||
</label>
|
||||
|
||||
<label class="flex items-center justify-between p-3.5 rounded-2xl border border-slate-200 hover:bg-slate-50 cursor-pointer">
|
||||
<div class="flex items-center space-x-3">
|
||||
<input type="radio" name="payment_method" value="bancontact" class="text-indigo-600 focus:ring-indigo-500">
|
||||
<span class="text-xs font-bold text-slate-900">Bancontact</span>
|
||||
<label class="flex items-center justify-between p-3.5 rounded-xl border border-slate-200 hover:bg-slate-50 cursor-pointer transition">
|
||||
<div class="flex items-center space-x-2.5">
|
||||
<input type="radio" name="payment_method" value="bancontact" class="text-slate-900 focus:ring-slate-900">
|
||||
<span class="text-xs font-semibold text-slate-900">Bancontact</span>
|
||||
</div>
|
||||
<span class="text-[11px] text-slate-400">België</span>
|
||||
</label>
|
||||
|
||||
<label class="flex items-center justify-between p-3.5 rounded-2xl border border-slate-200 hover:bg-slate-50 cursor-pointer">
|
||||
<div class="flex items-center space-x-3">
|
||||
<input type="radio" name="payment_method" value="overboeking" class="text-indigo-600 focus:ring-indigo-500">
|
||||
<span class="text-xs font-bold text-slate-900">Handmatige Bankoverschrijving</span>
|
||||
<label class="flex items-center justify-between p-3.5 rounded-xl border border-slate-200 hover:bg-slate-50 cursor-pointer transition">
|
||||
<div class="flex items-center space-x-2.5">
|
||||
<input type="radio" name="payment_method" value="overboeking" class="text-slate-900 focus:ring-slate-900">
|
||||
<span class="text-xs font-semibold text-slate-900">Handmatige Bankoverschrijving</span>
|
||||
</div>
|
||||
<span class="text-[11px] text-slate-400">Achteraf / Factuur</span>
|
||||
<span class="text-[11px] text-slate-400">Achteraf</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-xs font-semibold text-slate-700 mb-1">Opmerkingen voor de printer (optioneel)</label>
|
||||
<textarea name="notes" rows="2" placeholder="Bijv. neerzetten bij de achterdeur of speciale printinstructie..." class="w-full bg-slate-50 border border-slate-200 rounded-xl p-3 text-xs text-slate-900 focus:bg-white focus:outline-none focus:ring-1 focus:ring-indigo-500"></textarea>
|
||||
<div class="space-y-1 pt-1">
|
||||
<label class="block text-xs font-medium text-slate-700">Opmerkingen voor de printer (optioneel)</label>
|
||||
<textarea name="notes" rows="2" placeholder="Bijv. gewenste printoriëntatie of bezorginstructie..." class="w-full bg-slate-50 border border-slate-200 rounded-xl p-2.5 text-xs text-slate-900 focus:bg-white focus:outline-none focus:ring-2 focus:ring-slate-900/10 focus:border-slate-900"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -116,49 +116,49 @@
|
||||
|
||||
<!-- Rechterkant: Besteloverzicht Card -->
|
||||
<div class="lg:col-span-5">
|
||||
<div class="p-6 rounded-3xl bg-white border border-slate-200 shadow-md space-y-5 sticky top-24">
|
||||
<h3 class="text-sm font-bold text-slate-900 uppercase tracking-wider pb-3 border-b border-slate-100">Jouw Bestelling</h3>
|
||||
<div class="p-6 rounded-2xl bg-white border border-slate-200/80 shadow-xs space-y-4 sticky top-24">
|
||||
<h3 class="text-xs font-bold text-slate-900 uppercase tracking-wider pb-2 border-b border-slate-100">Jouw Bestelling</h3>
|
||||
|
||||
<div class="space-y-3 max-h-72 overflow-y-auto pr-1">
|
||||
<div class="space-y-2.5 max-h-72 overflow-y-auto pr-1">
|
||||
@foreach($cart as $item)
|
||||
<div class="flex items-center justify-between text-xs py-2 border-b border-slate-100">
|
||||
<div class="flex items-center justify-between text-xs py-1.5 border-b border-slate-100">
|
||||
<div class="space-y-0.5">
|
||||
<div class="font-bold text-slate-900">{{ $item['name'] }} <span class="text-slate-400 font-normal">× {{ $item['quantity'] }}</span></div>
|
||||
<div class="text-[11px] text-slate-500">{{ $item['material'] }} • {{ $item['color'] }} ({{ $item['scale'] }})</div>
|
||||
<div class="font-medium text-slate-900">{{ $item['name'] }} <span class="text-slate-400">× {{ $item['quantity'] }}</span></div>
|
||||
<div class="text-[11px] text-slate-500">{{ strtoupper($item['material']) }} • {{ $item['color'] }} ({{ $item['scale'] }})</div>
|
||||
</div>
|
||||
<span class="font-mono font-bold text-slate-900">
|
||||
<span class="font-semibold text-slate-900">
|
||||
€ {{ number_format($item['price'] * $item['quantity'], 2, ',', '.') }}
|
||||
</span>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
|
||||
<div class="space-y-2 text-xs pt-2">
|
||||
<div class="space-y-1.5 text-xs pt-1">
|
||||
<div class="flex justify-between text-slate-600">
|
||||
<span>Subtotaal</span>
|
||||
<span class="font-mono font-bold text-slate-900">€ {{ number_format($subtotal, 2, ',', '.') }}</span>
|
||||
<span class="font-semibold text-slate-900">€ {{ number_format($subtotal, 2, ',', '.') }}</span>
|
||||
</div>
|
||||
<div class="flex justify-between text-slate-600">
|
||||
<span>Verzendkosten</span>
|
||||
@if($shipping == 0)
|
||||
<span class="text-emerald-600 font-bold">GRATIS</span>
|
||||
<span class="text-emerald-700 font-semibold bg-emerald-50 px-2 py-0.5 rounded-md">Gratis</span>
|
||||
@else
|
||||
<span class="font-mono font-bold text-slate-900">€ {{ number_format($shipping, 2, ',', '.') }}</span>
|
||||
<span class="font-semibold text-slate-900">€ {{ number_format($shipping, 2, ',', '.') }}</span>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pt-4 border-t border-slate-100 flex justify-between items-baseline">
|
||||
<span class="text-sm font-bold text-slate-900">Totaalbedrag</span>
|
||||
<span class="text-2xl font-black text-indigo-600 font-mono">€ {{ number_format($total, 2, ',', '.') }}</span>
|
||||
<div class="pt-3 border-t border-slate-100 flex justify-between items-baseline">
|
||||
<span class="text-xs font-medium text-slate-600">Totaalbedrag</span>
|
||||
<span class="text-xl font-bold text-slate-900">€ {{ number_format($total, 2, ',', '.') }}</span>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="w-full py-4 rounded-2xl bg-indigo-600 hover:bg-indigo-500 text-white font-bold text-xs uppercase tracking-wider transition shadow-lg shadow-indigo-600/25 flex items-center justify-center space-x-2 cursor-pointer">
|
||||
<i data-lucide="check-circle-2" class="w-4 h-4"></i>
|
||||
<span>Bestelling Definitief Plaatsen</span>
|
||||
<button type="submit" class="w-full py-3 rounded-xl bg-slate-900 hover:bg-slate-800 text-white font-medium text-xs transition shadow-xs flex items-center justify-center space-x-2 cursor-pointer">
|
||||
<i data-lucide="check" class="w-4 h-4"></i>
|
||||
<span>Bestelling Plaatsen</span>
|
||||
</button>
|
||||
|
||||
<p class="text-center text-[10px] text-slate-400">
|
||||
<p class="text-center text-[11px] text-slate-400">
|
||||
Door te bestellen ga je akkoord met de algemene voorwaarden van Jouwdriedee.nl.
|
||||
</p>
|
||||
</div>
|
||||
@@ -168,4 +168,3 @@
|
||||
</form>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
|
||||
@@ -1,105 +1,98 @@
|
||||
@extends('layouts.app')
|
||||
|
||||
@section('title', 'Bestelling Ontvangen! | Jouwdriedee.nl')
|
||||
@section('title', 'Bestelling Ontvangen | Jouwdriedee.nl')
|
||||
|
||||
@section('content')
|
||||
<div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 py-16 text-center space-y-8">
|
||||
<div class="max-w-2xl mx-auto px-4 sm:px-6 lg:px-8 py-16 text-center space-y-8">
|
||||
|
||||
<!-- Success Badge -->
|
||||
<div class="space-y-4">
|
||||
<div class="w-20 h-20 rounded-3xl bg-emerald-100 text-emerald-600 flex items-center justify-center mx-auto shadow-lg shadow-emerald-500/20">
|
||||
<i data-lucide="check" class="w-10 h-10 stroke-[2.5]"></i>
|
||||
<div class="space-y-3">
|
||||
<div class="w-14 h-14 rounded-2xl bg-emerald-50 text-emerald-600 border border-emerald-200/60 flex items-center justify-center mx-auto">
|
||||
<i data-lucide="check" class="w-7 h-7 stroke-[2]"></i>
|
||||
</div>
|
||||
<h1 class="text-3xl sm:text-4xl font-black text-slate-900 tracking-tight">Bedankt voor je bestelling!</h1>
|
||||
<p class="text-xs sm:text-sm text-slate-500 max-w-md mx-auto">
|
||||
We hebben jouw bestelling ontvangen. De printbestanden worden klaargezet voor de 3D-printers.
|
||||
<h1 class="text-2xl sm:text-3xl font-bold tracking-tight text-slate-900">Bedankt voor je bestelling!</h1>
|
||||
<p class="text-xs text-slate-500 max-w-sm mx-auto">
|
||||
We hebben jouw bestelling ontvangen. De printbestanden worden klaargezet voor productie.
|
||||
</p>
|
||||
<div class="inline-block px-4 py-2 rounded-xl bg-slate-100 border border-slate-200 text-xs font-mono font-bold text-slate-800">
|
||||
Bestelnummer: <span class="text-indigo-600">{{ $order->order_number }}</span>
|
||||
<div class="inline-block px-3 py-1.5 rounded-xl bg-slate-100 border border-slate-200 text-xs font-mono font-medium text-slate-700">
|
||||
Bestelnummer: <span class="font-bold text-slate-900">{{ $order->order_number }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Live 3D Print Status Tracker -->
|
||||
<div class="p-6 rounded-3xl bg-white border border-slate-200 shadow-sm text-left space-y-6">
|
||||
<div class="p-6 rounded-2xl bg-white border border-slate-200/80 shadow-xs text-left space-y-5">
|
||||
<h3 class="text-xs font-bold text-slate-900 uppercase tracking-wider flex items-center space-x-2">
|
||||
<i data-lucide="printer" class="w-4 h-4 text-indigo-600"></i>
|
||||
<span>Live Print & Productie Status</span>
|
||||
<i data-lucide="printer" class="w-3.5 h-3.5 text-slate-500"></i>
|
||||
<span>Productiestatus</span>
|
||||
</h3>
|
||||
|
||||
<div class="relative pl-6 space-y-6 border-l-2 border-slate-200">
|
||||
<div class="relative pl-6 space-y-5 border-l-2 border-slate-200">
|
||||
|
||||
<!-- Stap 1: Ontvangen -->
|
||||
<div class="relative">
|
||||
<span class="absolute -left-[31px] top-0.5 w-4 h-4 rounded-full bg-emerald-500 ring-4 ring-emerald-100"></span>
|
||||
<h4 class="text-xs font-bold text-slate-900">1. Bestelling ontvangen & geverifieerd</h4>
|
||||
<span class="absolute -left-[31px] top-0.5 w-3.5 h-3.5 rounded-full bg-emerald-500 ring-4 ring-emerald-50"></span>
|
||||
<h4 class="text-xs font-semibold text-slate-900">1. Bestelling ontvangen & gecontroleerd</h4>
|
||||
<p class="text-[11px] text-slate-500 mt-0.5">Jouw configuratie en materiaalkeuzes zijn opgeslagen.</p>
|
||||
</div>
|
||||
|
||||
<!-- Stap 2: Slicing & Printbed -->
|
||||
<div class="relative">
|
||||
<span class="absolute -left-[31px] top-0.5 w-4 h-4 rounded-full bg-indigo-600 ring-4 ring-indigo-100 animate-pulse"></span>
|
||||
<h4 class="text-xs font-bold text-indigo-600">2. Slicing & printwachtrij (Huidige fase)</h4>
|
||||
<span class="absolute -left-[31px] top-0.5 w-3.5 h-3.5 rounded-full bg-slate-900 ring-4 ring-slate-100 animate-pulse"></span>
|
||||
<h4 class="text-xs font-semibold text-slate-900">2. Slicing & printwachtrij (Huidige fase)</h4>
|
||||
<p class="text-[11px] text-slate-500 mt-0.5">Het 3D-model wordt geoptimaliseerd en klaargezet voor de printer.</p>
|
||||
</div>
|
||||
|
||||
<!-- Stap 3: 3D Printen -->
|
||||
<div class="relative opacity-60">
|
||||
<span class="absolute -left-[31px] top-0.5 w-4 h-4 rounded-full bg-slate-300"></span>
|
||||
<h4 class="text-xs font-bold text-slate-700">3. 3D Printen in de studio</h4>
|
||||
<div class="relative opacity-50">
|
||||
<span class="absolute -left-[31px] top-0.5 w-3.5 h-3.5 rounded-full bg-slate-300"></span>
|
||||
<h4 class="text-xs font-medium text-slate-700">3. 3D Printen in de studio</h4>
|
||||
<p class="text-[11px] text-slate-500 mt-0.5">Laag voor laag geprint op hoge resolutie.</p>
|
||||
</div>
|
||||
|
||||
<!-- Stap 4: Kwaliteitscontrole & Verzenden -->
|
||||
<div class="relative opacity-60">
|
||||
<span class="absolute -left-[31px] top-0.5 w-4 h-4 rounded-full bg-slate-300"></span>
|
||||
<h4 class="text-xs font-bold text-slate-700">4. Kwaliteitscontrole, inpakken & PostNL verzending</h4>
|
||||
<p class="text-[11px] text-slate-500 mt-0.5">Je ontvangt per e-mail direct een Track & Trace code.</p>
|
||||
<div class="relative opacity-50">
|
||||
<span class="absolute -left-[31px] top-0.5 w-3.5 h-3.5 rounded-full bg-slate-300"></span>
|
||||
<h4 class="text-xs font-medium text-slate-700">4. Kwaliteitscontrole & PostNL verzending</h4>
|
||||
<p class="text-[11px] text-slate-500 mt-0.5">Je ontvangt per e-mail een Track & Trace code.</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Besteloverzicht Card -->
|
||||
<div class="p-6 rounded-3xl bg-white border border-slate-200 shadow-sm text-left space-y-4">
|
||||
<h3 class="text-xs font-bold text-slate-900 uppercase tracking-wider pb-3 border-b border-slate-100">
|
||||
<div class="p-6 rounded-2xl bg-white border border-slate-200/80 shadow-xs text-left space-y-4">
|
||||
<h3 class="text-xs font-bold text-slate-900 uppercase tracking-wider pb-2 border-b border-slate-100">
|
||||
Overzicht van jouw bestelling
|
||||
</h3>
|
||||
|
||||
<div class="space-y-3">
|
||||
<div class="space-y-2">
|
||||
@foreach($order->items as $item)
|
||||
<div class="flex items-center justify-between text-xs py-1">
|
||||
<div>
|
||||
<span class="font-bold text-slate-900">{{ $item->product_name }}</span>
|
||||
<span class="text-slate-400">× {{ $item->quantity }}</span>
|
||||
<div class="text-[11px] text-slate-500">{{ $item->material }} • {{ $item->color }} ({{ $item->scale }})</div>
|
||||
<div class="font-medium text-slate-900">{{ $item->product_name }} <span class="text-slate-400">× {{ $item->quantity }}</span></div>
|
||||
<div class="text-[11px] text-slate-500">{{ strtoupper($item->material) }} • {{ $item->color }} ({{ $item->scale }})</div>
|
||||
</div>
|
||||
<span class="font-mono font-bold text-slate-900">
|
||||
€ {{ number_format($item->total_price, 2, ',', '.') }}
|
||||
<span class="font-semibold text-slate-900">
|
||||
€ {{ number_format($item->total_price, 2, ',', '.') }}
|
||||
</span>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
|
||||
<div class="pt-3 border-t border-slate-100 flex justify-between items-baseline text-xs">
|
||||
<span class="font-bold text-slate-700">Totaal betaald</span>
|
||||
<span class="text-lg font-black text-indigo-600 font-mono">{{ $order->formatted_total }}</span>
|
||||
</div>
|
||||
|
||||
<div class="pt-3 border-t border-slate-100 text-xs text-slate-500">
|
||||
<span class="font-bold text-slate-700 block mb-1">Bezorgadres:</span>
|
||||
{{ $order->customer_name }}<br>
|
||||
{{ $order->shipping_street }} {{ $order->shipping_number }}<br>
|
||||
{{ $order->shipping_postal_code }} {{ $order->shipping_city }}
|
||||
<span class="font-medium text-slate-500">Totaal betaald</span>
|
||||
<span class="text-base font-bold text-slate-900">{{ $order->formatted_total }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<a href="{{ route('home') }}" class="px-6 py-3.5 rounded-2xl bg-indigo-600 hover:bg-indigo-500 text-white font-bold text-xs transition inline-flex items-center space-x-2 shadow-md">
|
||||
<span>Terug Naar De Homepagina</span>
|
||||
<i data-lucide="arrow-right" class="w-4 h-4"></i>
|
||||
<div class="flex flex-col sm:flex-row items-center justify-center gap-3">
|
||||
<a href="{{ route('home') }}" class="px-5 py-2.5 rounded-xl bg-slate-900 hover:bg-slate-800 text-white font-medium text-xs transition shadow-xs">
|
||||
Terug naar de homepagina
|
||||
</a>
|
||||
<a href="{{ route('account.index') }}" class="px-5 py-2.5 rounded-xl bg-white hover:bg-slate-50 border border-slate-200 text-slate-700 font-medium text-xs transition">
|
||||
Bestelling bekijken in account
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
|
||||
@@ -3,82 +3,72 @@
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<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">
|
||||
|
||||
<!-- Google Fonts: Fredoka & Nunito -->
|
||||
<!-- Plus Jakarta Sans -->
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<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'])
|
||||
|
||||
<style>
|
||||
body { font-family: 'Nunito', system-ui, sans-serif; }
|
||||
h1, h2, h3, h4, .font-heading { font-family: 'Fredoka', ui-rounded, 'Nunito', sans-serif; }
|
||||
body { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; }
|
||||
</style>
|
||||
</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 -->
|
||||
<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">
|
||||
<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 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">
|
||||
<span class="w-2 h-2 rounded-full bg-rose-500 animate-ping"></span>
|
||||
<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-1.5 h-1.5 rounded-full bg-rose-500 animate-pulse"></span>
|
||||
<span>Onderhoudsmodus</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Main Large Red Offline Banner / Card -->
|
||||
<main class="max-w-3xl mx-auto w-full my-auto py-8">
|
||||
<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">
|
||||
<main class="max-w-2xl mx-auto w-full my-auto py-10">
|
||||
<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 -->
|
||||
<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 -bottom-24 -right-24 w-72 h-72 bg-amber-500/10 rounded-full blur-3xl pointer-events-none"></div>
|
||||
<!-- Glow effect -->
|
||||
<div class="absolute -top-24 -left-24 w-64 h-64 bg-rose-600/10 rounded-full blur-3xl pointer-events-none"></div>
|
||||
|
||||
<!-- Pulsing 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">
|
||||
<span class="w-2.5 h-2.5 rounded-full bg-white animate-pulse"></span>
|
||||
<!-- Alert Badge -->
|
||||
<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 h-2 rounded-full bg-rose-500 animate-pulse"></span>
|
||||
<span>Webshop Tijdelijk Offline</span>
|
||||
</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 -->
|
||||
<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!' }}
|
||||
</h1>
|
||||
|
||||
<!-- 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!' }}
|
||||
</p>
|
||||
|
||||
<!-- 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="p-4 rounded-2xl bg-slate-950/60 border border-slate-800/80">
|
||||
<div class="text-xl mb-1">🛠️</div>
|
||||
<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 multi-color designs.</p>
|
||||
<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-xl bg-slate-950/50 border border-slate-800">
|
||||
<h3 class="text-xs font-semibold text-white mb-1">Printstudio Update</h3>
|
||||
<p class="text-[11px] text-slate-400 leading-normal">Finetunen van laagdiktes en toevoegen van nieuwe designs.</p>
|
||||
</div>
|
||||
|
||||
<div class="p-4 rounded-2xl bg-slate-950/60 border border-slate-800/80">
|
||||
<div class="text-xl mb-1">📦</div>
|
||||
<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 verzonden via PostNL.</p>
|
||||
<div class="p-4 rounded-xl bg-slate-950/50 border border-slate-800">
|
||||
<h3 class="text-xs font-semibold text-white mb-1">Lopende Orders</h3>
|
||||
<p class="text-[11px] text-slate-400 leading-normal">Reeds geplaatste bestellingen worden gewoon geprint en bezorgd.</p>
|
||||
</div>
|
||||
|
||||
<div class="p-4 rounded-2xl bg-slate-950/60 border border-slate-800/80">
|
||||
<div class="text-xl mb-1">✉️</div>
|
||||
<h3 class="text-xs font-black text-white uppercase tracking-wider mb-1">Vragen of Contact?</h3>
|
||||
<div class="p-4 rounded-xl bg-slate-950/50 border border-slate-800">
|
||||
<h3 class="text-xs font-semibold text-white mb-1">Vragen of Contact</h3>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
@@ -93,7 +83,7 @@
|
||||
</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>→</span>
|
||||
</a>
|
||||
@@ -102,4 +92,3 @@
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
@@ -6,69 +6,75 @@
|
||||
<title>@yield('title', 'Admin Dashboard | Jouwdriedee.nl')</title>
|
||||
<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.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'])
|
||||
|
||||
<style>
|
||||
body { font-family: 'Nunito', system-ui, sans-serif; }
|
||||
h1, h2, h3, h4, .font-heading { font-family: 'Fredoka', ui-rounded, 'Nunito', sans-serif; }
|
||||
body {
|
||||
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>
|
||||
</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) -->
|
||||
<header class="bg-white/95 backdrop-blur-md border-b border-slate-200/80 sticky top-0 z-30 shadow-2xs">
|
||||
<!-- Admin Header (Sleek, Minimalist, SaaS Style) -->
|
||||
<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="flex items-center justify-between h-16">
|
||||
|
||||
<!-- Brand / Logo -->
|
||||
<div class="flex items-center space-x-6">
|
||||
<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">
|
||||
<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>
|
||||
<img src="/images/logo.svg" alt="Jouwdriedee.nl" class="h-7 w-auto">
|
||||
<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>
|
||||
|
||||
<!-- Desktop Nav Links -->
|
||||
<nav class="hidden md:flex items-center space-x-1 text-xs font-bold">
|
||||
<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' }}">
|
||||
<i data-lucide="palette" class="w-4 h-4"></i>
|
||||
<nav class="hidden md:flex items-center space-x-1 text-xs font-medium">
|
||||
<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-3.5 h-3.5"></i>
|
||||
<span>Layout & Teksten</span>
|
||||
</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' }}">
|
||||
<i data-lucide="box" class="w-4 h-4"></i>
|
||||
<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-3.5 h-3.5"></i>
|
||||
<span>Producten</span>
|
||||
</a>
|
||||
|
||||
@php
|
||||
$draftBadgeCount = \App\Models\Product::where('status', 'draft')->count();
|
||||
@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' }}">
|
||||
<i data-lucide="layers" class="w-4 h-4"></i>
|
||||
<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-3.5 h-3.5"></i>
|
||||
<span>Artikel Beheer</span>
|
||||
@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 }}
|
||||
</span>
|
||||
@endif
|
||||
</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' }}">
|
||||
<i data-lucide="folder-tree" class="w-4 h-4"></i>
|
||||
<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-3.5 h-3.5"></i>
|
||||
<span>Categorieën</span>
|
||||
</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' }}">
|
||||
<i data-lucide="shopping-cart" class="w-4 h-4"></i>
|
||||
<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-3.5 h-3.5"></i>
|
||||
<span>Bestellingen</span>
|
||||
</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' }}">
|
||||
<i data-lucide="download-cloud" class="w-4 h-4"></i>
|
||||
<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-3.5 h-3.5"></i>
|
||||
<span>MakerWorld Sync</span>
|
||||
</a>
|
||||
</nav>
|
||||
@@ -84,26 +90,26 @@
|
||||
<form action="{{ route('admin.toggle-offline') }}" method="POST" class="inline">
|
||||
@csrf
|
||||
@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">
|
||||
<span class="w-2 h-2 rounded-full bg-white"></span>
|
||||
<span>Webshop: OFFLINE</span>
|
||||
<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-1.5 h-1.5 rounded-full bg-white animate-pulse"></span>
|
||||
<span>Webshop: Offline</span>
|
||||
</button>
|
||||
@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">
|
||||
<span class="w-2 h-2 rounded-full bg-emerald-500"></span>
|
||||
<span class="hidden sm:inline">Webshop: Online</span>
|
||||
<span class="text-[10px] text-slate-400 hover:text-rose-500">(Zet Offline)</span>
|
||||
<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-1.5 h-1.5 rounded-full bg-emerald-500"></span>
|
||||
<span class="hidden sm:inline">Webshop: Live</span>
|
||||
<span class="text-[10px] text-slate-400">(Offline zetten)</span>
|
||||
</button>
|
||||
@endif
|
||||
</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">
|
||||
<span>Naar Webshop</span>
|
||||
<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>Webshop</span>
|
||||
<i data-lucide="external-link" class="w-3.5 h-3.5 text-slate-400"></i>
|
||||
</a>
|
||||
|
||||
<!-- 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>
|
||||
</button>
|
||||
</div>
|
||||
@@ -112,71 +118,68 @@
|
||||
</div>
|
||||
|
||||
<!-- 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">
|
||||
<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' }}">
|
||||
🎨 Layout & Teksten
|
||||
<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-lg {{ request()->routeIs('admin.content.*') ? 'bg-slate-100 text-slate-900 font-semibold' : 'text-slate-600 hover:bg-slate-50' }}">
|
||||
Layout & Teksten
|
||||
</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' }}">
|
||||
📦 Producten
|
||||
<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
|
||||
</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' }}">
|
||||
⚡ Artikel Beheer (Geïmporteerd)
|
||||
<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)
|
||||
@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">
|
||||
{{ $draftBadgeCount }} nieuw
|
||||
<span class="ml-2 px-1.5 py-0.5 rounded-full text-[10px] font-semibold bg-slate-200 text-slate-800">
|
||||
{{ $draftBadgeCount }}
|
||||
</span>
|
||||
@endif
|
||||
</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' }}">
|
||||
📁 Categorieën
|
||||
<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
|
||||
</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' }}">
|
||||
🛒 Bestellingen
|
||||
<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
|
||||
</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' }}">
|
||||
🤖 MakerWorld Importer
|
||||
<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 Sync
|
||||
</a>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Prominent Offline Alert Banner -->
|
||||
<!-- Offline Alert Banner -->
|
||||
@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="flex items-center space-x-2.5">
|
||||
<span class="w-2.5 h-2.5 rounded-full bg-white animate-ping 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>
|
||||
<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">
|
||||
<span class="w-2 h-2 rounded-full bg-white animate-pulse shrink-0"></span>
|
||||
<span>De webshop staat momenteel <strong>OFFLINE</strong> voor bezoekers (rode onderhoudsbanner actief). Alleen jij als beheerder kunt de website bezoeken.</span>
|
||||
</div>
|
||||
<form action="{{ route('admin.toggle-offline') }}" method="POST" class="shrink-0">
|
||||
@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">
|
||||
<span class="w-2 h-2 rounded-full bg-emerald-500"></span>
|
||||
<span>Zet Webshop Nu Weer Online →</span>
|
||||
<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>Zet Nu Weer Online</span>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<!-- 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 -->
|
||||
@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">
|
||||
<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>
|
||||
</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">
|
||||
<span>Bekijk Live</span>
|
||||
<i data-lucide="arrow-right" class="w-3.5 h-3.5"></i>
|
||||
<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">
|
||||
Bekijk Live Shop
|
||||
</a>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
@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">
|
||||
<i data-lucide="alert-circle" class="w-5 h-5 text-rose-600 shrink-0"></i>
|
||||
<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-4 h-4 text-rose-600 shrink-0"></i>
|
||||
<span>{{ session('error') }}</span>
|
||||
</div>
|
||||
@endif
|
||||
@@ -184,10 +187,9 @@
|
||||
@yield('content')
|
||||
</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 • Direct gekoppeld aan live webshop
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
@@ -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!'))">
|
||||
<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.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'])
|
||||
|
||||
<style>
|
||||
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 {
|
||||
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>
|
||||
</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 -->
|
||||
@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">
|
||||
<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>
|
||||
</div>
|
||||
<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
|
||||
</a>
|
||||
<form action="{{ route('admin.toggle-offline') }}" method="POST" class="inline">
|
||||
@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
|
||||
</button>
|
||||
</form>
|
||||
@@ -46,24 +48,24 @@
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<!-- Top Announcement Bar (Subtiel, Warm & Vriendelijk) -->
|
||||
<!-- Sleek Top Announcement Bar -->
|
||||
@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="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>{{ 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 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'))
|
||||
<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>
|
||||
@endif
|
||||
@if(setting('announcement_badge_2'))
|
||||
<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>
|
||||
@endif
|
||||
@@ -72,62 +74,62 @@
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<!-- Main Navigation Header -->
|
||||
<header class="sticky top-0 z-40 bg-white/95 backdrop-blur-md border-b border-slate-200/70 shadow-xs">
|
||||
<!-- Modern Glass Navigation Bar -->
|
||||
<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="flex items-center justify-between h-16 sm:h-20">
|
||||
<div class="flex items-center justify-between h-16">
|
||||
|
||||
<!-- Friendly Brand Logo -->
|
||||
<div class="flex items-center space-x-4 sm:space-x-8">
|
||||
<!-- Brand Logo -->
|
||||
<div class="flex items-center space-x-8">
|
||||
<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>
|
||||
|
||||
<!-- Desktop Nav Links -->
|
||||
<nav class="hidden lg:flex items-center space-x-1 text-xs font-bold 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' }}">
|
||||
<!-- Minimalist Navigation Links -->
|
||||
<nav class="hidden lg:flex items-center space-x-1 text-xs font-medium text-slate-600">
|
||||
<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
|
||||
</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
|
||||
</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
|
||||
</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
|
||||
</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
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<!-- 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">
|
||||
<input
|
||||
type="text"
|
||||
name="q"
|
||||
value="{{ request('q') }}"
|
||||
placeholder="Zoek print, 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"
|
||||
placeholder="Zoek model..."
|
||||
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>
|
||||
</form>
|
||||
|
||||
<!-- Cart Button with Counter -->
|
||||
<!-- Cart Button with Pill Badge -->
|
||||
@php
|
||||
$cartItems = is_array(session('cart')) ? session('cart') : [];
|
||||
$cartCount = array_sum(array_column($cartItems, 'quantity'));
|
||||
@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">
|
||||
<i data-lucide="shopping-bag" class="w-4 h-4 text-slate-900"></i>
|
||||
<span class="hidden sm:inline">Winkelwagen</span>
|
||||
<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-3.5 h-3.5"></i>
|
||||
<span class="hidden sm:inline">Winkelmand</span>
|
||||
@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 }}
|
||||
</span>
|
||||
@endif
|
||||
@@ -135,34 +137,36 @@
|
||||
|
||||
<!-- User Account / Login Button -->
|
||||
@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">
|
||||
<i data-lucide="user" class="w-4 h-4 text-slate-600"></i>
|
||||
<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-3.5 h-3.5 text-slate-500"></i>
|
||||
<span class="hidden sm:inline">Inloggen</span>
|
||||
</a>
|
||||
@else
|
||||
<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">
|
||||
<i data-lucide="user-check" class="w-4 h-4 text-amber-600"></i>
|
||||
<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">
|
||||
<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>
|
||||
<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>
|
||||
|
||||
<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">
|
||||
<a href="{{ route('account.index') }}" class="flex items-center space-x-2 px-4 py-2 hover:bg-slate-50 text-slate-800">
|
||||
<i data-lucide="user-circle" class="w-4 h-4 text-slate-500"></i>
|
||||
<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-3.5 py-2 hover:bg-slate-50 text-slate-700">
|
||||
<i data-lucide="user" class="w-3.5 h-3.5 text-slate-400"></i>
|
||||
<span>Mijn Account</span>
|
||||
</a>
|
||||
@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">
|
||||
<i data-lucide="shield" class="w-4 h-4 text-amber-600"></i>
|
||||
<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-3.5 h-3.5 text-sky-600"></i>
|
||||
<span>Admin Beheer</span>
|
||||
</a>
|
||||
@endif
|
||||
<div class="border-t border-slate-100 my-1"></div>
|
||||
<form action="{{ route('logout') }}" method="POST">
|
||||
@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">
|
||||
<i data-lucide="log-out" class="w-4 h-4"></i>
|
||||
<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-3.5 h-3.5"></i>
|
||||
<span>Uitloggen</span>
|
||||
</button>
|
||||
</form>
|
||||
@@ -171,7 +175,7 @@
|
||||
@endguest
|
||||
|
||||
<!-- 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>
|
||||
</button>
|
||||
</div>
|
||||
@@ -179,65 +183,58 @@
|
||||
</div>
|
||||
|
||||
<!-- 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">
|
||||
<input
|
||||
type="text"
|
||||
name="q"
|
||||
value="{{ request('q') }}"
|
||||
placeholder="Zoek print, 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"
|
||||
placeholder="Zoek model..."
|
||||
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>
|
||||
</form>
|
||||
<div class="flex flex-col space-y-1.5 font-bold text-sm">
|
||||
<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' : '' }}">
|
||||
<div class="flex flex-col space-y-1 font-medium text-xs">
|
||||
<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>
|
||||
</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 class="text-xs bg-violet-100 px-2 py-0.5 rounded-md font-bold">Bestsellers</span>
|
||||
</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 class="text-xs bg-amber-100 px-2 py-0.5 rounded-md font-bold">Populair</span>
|
||||
</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>
|
||||
</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>
|
||||
</a>
|
||||
|
||||
<div class="border-t border-slate-100 pt-2 mt-1">
|
||||
<div class="border-t border-slate-100 pt-3 mt-2">
|
||||
@guest
|
||||
<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">
|
||||
<i data-lucide="log-in" class="w-3.5 h-3.5"></i>
|
||||
<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">
|
||||
<span>Inloggen</span>
|
||||
</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">
|
||||
<i data-lucide="user-plus" class="w-3.5 h-3.5"></i>
|
||||
<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">
|
||||
<span>Registreren</span>
|
||||
</a>
|
||||
</div>
|
||||
@else
|
||||
<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>
|
||||
<i data-lucide="user" class="w-4 h-4 text-amber-600"></i>
|
||||
</a>
|
||||
@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>
|
||||
<i data-lucide="shield" class="w-4 h-4 text-amber-600"></i>
|
||||
</a>
|
||||
@endif
|
||||
<form action="{{ route('logout') }}" method="POST">
|
||||
@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>
|
||||
<i data-lucide="log-out" class="w-4 h-4"></i>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
@@ -250,19 +247,19 @@
|
||||
<!-- Global Flash Alerts -->
|
||||
@if(session('success'))
|
||||
<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">
|
||||
<i data-lucide="check-circle" class="w-4 h-4 text-emerald-600"></i>
|
||||
<span>{{ session('success') }}</span>
|
||||
</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 →</a>
|
||||
<a href="{{ route('cart.index') }}" class="text-xs font-semibold text-emerald-700 hover:underline">Winkelwagen →</a>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
@if(session('error'))
|
||||
<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>
|
||||
<span>{{ session('error') }}</span>
|
||||
</div>
|
||||
@@ -274,70 +271,70 @@
|
||||
@yield('content')
|
||||
</main>
|
||||
|
||||
<!-- Footer (Licht, Verfijnd, Vriendelijk) -->
|
||||
<footer class="bg-slate-900 text-slate-200 border-t border-slate-800 pt-12 pb-10 mt-16">
|
||||
<!-- Fresh, Minimalist, Modern Footer -->
|
||||
<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="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 -->
|
||||
<div class="space-y-3 sm:col-span-1">
|
||||
<div class="flex items-center space-x-2">
|
||||
<img src="/images/logo.svg" alt="{{ setting('site_name', 'Jouwdriedee.nl') }}" class="h-8 w-auto">
|
||||
</div>
|
||||
<p class="text-xs text-slate-300 leading-relaxed font-normal">
|
||||
<a href="{{ route('home') }}" class="inline-block">
|
||||
<img src="/images/logo.svg" alt="{{ setting('site_name', 'Jouwdriedee.nl') }}" class="h-7 w-auto">
|
||||
</a>
|
||||
<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.') }}
|
||||
</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">
|
||||
<span class="w-2 h-2 rounded-full bg-emerald-400 animate-pulse"></span>
|
||||
<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-1.5 h-1.5 rounded-full bg-emerald-500"></span>
|
||||
<span>{{ setting('footer_status_text', 'Printers gekalibreerd & actief') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Col 2: Categorieën -->
|
||||
<div class="space-y-2">
|
||||
<h3 class="font-heading text-xs font-black uppercase tracking-wider text-amber-300">Collectie</h3>
|
||||
<ul class="space-y-1.5 text-xs text-slate-300 font-medium">
|
||||
<li><a href="{{ route('catalog', ['category' => 'fidget-toys']) }}" class="hover:text-white 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' => 'film-popculture']) }}" class="hover:text-white transition">Film, Gaming & Collectibles</a></li>
|
||||
<li><a href="{{ route('catalog') }}" class="hover:text-white transition">Alle Prints Bekijken</a></li>
|
||||
<div class="space-y-2.5">
|
||||
<h3 class="text-xs font-semibold text-slate-900 tracking-wider uppercase text-[11px]">Collecties</h3>
|
||||
<ul class="space-y-2 text-xs text-slate-500 font-normal">
|
||||
<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-slate-900 transition">Pokémon 3D Prints</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-slate-900 transition">Alle Prints Bekijken</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Col 3: Materialen & Kwaliteit -->
|
||||
<div class="space-y-2">
|
||||
<h3 class="font-heading text-xs font-black uppercase tracking-wider text-sky-300">Materialen & Kwaliteit</h3>
|
||||
<ul class="space-y-1.5 text-xs text-slate-300 font-medium">
|
||||
<div class="space-y-2.5">
|
||||
<h3 class="text-xs font-semibold text-slate-900 tracking-wider uppercase text-[11px]">Precisie & Materialen</h3>
|
||||
<ul class="space-y-2 text-xs text-slate-500 font-normal">
|
||||
<li class="flex items-center space-x-1.5">
|
||||
<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 class="flex items-center space-x-1.5">
|
||||
<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 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>
|
||||
</li>
|
||||
<li class="flex items-center space-x-1.5">
|
||||
<span class="w-1.5 h-1.5 rounded-full bg-purple-400"></span>
|
||||
<span><strong>Silk Glans</strong>: Prachtige glans</span>
|
||||
<span class="w-1.5 h-1.5 rounded-full bg-amber-400"></span>
|
||||
<span><strong>Silk Glans</strong>: Luxe zijdeglans</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Col 4: Contact -->
|
||||
<div class="space-y-2">
|
||||
<h3 class="font-heading text-xs font-black uppercase tracking-wider text-rose-300">Bestelling & Verzending</h3>
|
||||
<p class="text-xs text-slate-300 font-normal">Heb je een vraag over een print of levertijd van jouw bestelling?</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="flex items-center space-x-1.5 text-slate-200">
|
||||
<i data-lucide="mail" class="w-3.5 h-3.5 text-amber-400"></i>
|
||||
<div class="space-y-2.5">
|
||||
<h3 class="text-xs font-semibold text-slate-900 tracking-wider uppercase text-[11px]">Service & Contact</h3>
|
||||
<p class="text-xs text-slate-500 leading-relaxed font-normal">Vragen over custom printopdrachten of bestellingen?</p>
|
||||
<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-2 text-slate-700">
|
||||
<i data-lucide="mail" class="w-3.5 h-3.5 text-slate-400"></i>
|
||||
<span>{{ setting('footer_email', 'info@jouwdriedee.nl') }}</span>
|
||||
</div>
|
||||
<div class="flex items-center space-x-1.5 text-slate-200">
|
||||
<i data-lucide="truck" class="w-3.5 h-3.5 text-amber-400"></i>
|
||||
<div class="flex items-center space-x-2 text-slate-700">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
@@ -345,10 +342,10 @@
|
||||
|
||||
</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>© {{ 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">
|
||||
<span>{{ setting('footer_payment_text', 'iDEAL & Bancontact • PostNL Track & Trace') }}</span>
|
||||
<div class="text-slate-400 text-[11px]">
|
||||
{{ setting('footer_payment_text', 'iDEAL & Bancontact • PostNL Track & Trace') }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -3,46 +3,45 @@
|
||||
@section('title', '3D Print Catalogus | Jouwdriedee.nl')
|
||||
|
||||
@section('content')
|
||||
<!-- Page Header -->
|
||||
<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="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">
|
||||
<!-- Page Header (Fris & Minimalistisch) -->
|
||||
<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-4">
|
||||
<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>Overzicht 3D Modellen</span>
|
||||
</div>
|
||||
<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>
|
||||
<span class="text-[11px] font-semibold uppercase tracking-wider text-slate-400">Assortiment</span>
|
||||
<h1 class="font-heading text-2xl sm:text-4xl font-extrabold text-slate-900 tracking-tight mt-0.5">3D Print Collectie</h1>
|
||||
<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>
|
||||
</div>
|
||||
@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">
|
||||
<span>✕ Filters Wissen</span>
|
||||
<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">
|
||||
<i data-lucide="x" class="w-3.5 h-3.5"></i>
|
||||
<span>Filters wissen</span>
|
||||
</a>
|
||||
@endif
|
||||
</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 -->
|
||||
<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
|
||||
type="button"
|
||||
@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>
|
||||
<span x-text="mobileFiltersOpen ? 'Verberg Filters' : 'Filters & Categorieën'"></span>
|
||||
<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>
|
||||
@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
|
||||
</button>
|
||||
|
||||
<!-- Snelle Sortering op Mobiel -->
|
||||
<form action="{{ route('catalog') }}" method="GET" class="w-40">
|
||||
<!-- Quick Sort on Mobile -->
|
||||
<form action="{{ route('catalog') }}" method="GET" class="w-36">
|
||||
@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('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="price_asc" {{ request('sort') === 'price_asc' ? 'selected' : '' }}>Prijs ↑</option>
|
||||
<option value="price_desc" {{ request('sort') === 'price_desc' ? 'selected' : '' }}>Prijs ↓</option>
|
||||
@@ -50,35 +49,36 @@
|
||||
</form>
|
||||
</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 -->
|
||||
<aside :class="mobileFiltersOpen ? 'block' : 'hidden lg:block'" class="space-y-4">
|
||||
<div class="p-5 sm:p-6 rounded-2xl bg-white border border-slate-200/80 shadow-xs space-y-5">
|
||||
<aside :class="mobileFiltersOpen ? 'block' : 'hidden lg:block'" class="space-y-6">
|
||||
<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">
|
||||
<span class="font-heading text-xs font-black text-slate-900 uppercase tracking-wider flex items-center space-x-1.5">
|
||||
<i data-lucide="filter" class="w-3.5 h-3.5 text-amber-600"></i>
|
||||
<span>Filters & Zoeken</span>
|
||||
<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-slate-400"></i>
|
||||
<span>Filters</span>
|
||||
</span>
|
||||
@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
|
||||
</div>
|
||||
|
||||
<!-- 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('material')) <input type="hidden" name="material" value="{{ request('material') }}"> @endif
|
||||
|
||||
<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">
|
||||
<input
|
||||
type="text"
|
||||
name="q"
|
||||
value="{{ request('q') }}"
|
||||
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>
|
||||
</div>
|
||||
@@ -86,13 +86,13 @@
|
||||
|
||||
<!-- Categorie filter -->
|
||||
<div>
|
||||
<label class="block text-xs font-bold text-slate-700 mb-2">Categorieën</label>
|
||||
<div class="space-y-1">
|
||||
<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' }}">
|
||||
<label class="block text-xs font-medium text-slate-700 mb-2">Categorieën</label>
|
||||
<div class="space-y-0.5">
|
||||
<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>
|
||||
</a>
|
||||
@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>
|
||||
</a>
|
||||
@endforeach
|
||||
@@ -101,13 +101,13 @@
|
||||
|
||||
<!-- Materiaal filter -->
|
||||
<div>
|
||||
<label class="block text-xs font-bold text-slate-700 mb-2">Filament Materiaal</label>
|
||||
<div class="space-y-1">
|
||||
<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' }}">
|
||||
<label class="block text-xs font-medium text-slate-700 mb-2">Filament Materiaal</label>
|
||||
<div class="space-y-0.5">
|
||||
<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>
|
||||
</a>
|
||||
@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>
|
||||
</a>
|
||||
@endforeach
|
||||
@@ -116,8 +116,8 @@
|
||||
|
||||
<!-- Sortering Desktop -->
|
||||
<div class="hidden lg:block">
|
||||
<label class="block text-xs font-bold 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">
|
||||
<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-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="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>
|
||||
@@ -130,51 +130,52 @@
|
||||
<!-- Producten Overzicht -->
|
||||
<div class="lg:col-span-3 space-y-6">
|
||||
@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="w-14 h-14 rounded-2xl bg-amber-50 text-slate-800 flex items-center justify-center mx-auto text-3xl">
|
||||
🙈
|
||||
<div class="p-12 text-center rounded-2xl bg-white border border-slate-200/60 shadow-2xs space-y-3">
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
@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)
|
||||
<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 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
|
||||
src="{{ $product->image_url }}"
|
||||
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"
|
||||
>
|
||||
@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 }}
|
||||
</span>
|
||||
@endif
|
||||
</div>
|
||||
<div class="p-3 sm:p-4">
|
||||
<h3 class="font-heading text-xs sm:text-sm font-black text-slate-900 group-hover:text-amber-700 transition line-clamp-2">
|
||||
<div class="pt-3 pb-1">
|
||||
<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) }}">
|
||||
{{ $product->name }}
|
||||
</a>
|
||||
</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 }}
|
||||
</p>
|
||||
</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>
|
||||
<span class="text-[9px] sm:text-[10px] text-slate-400 block font-bold uppercase">Vanaf</span>
|
||||
<span class="font-heading text-sm sm:text-base font-black text-slate-900">{{ $product->formatted_price }}</span>
|
||||
<span class="text-[10px] text-slate-400 block font-normal leading-none">Vanaf</span>
|
||||
<span class="font-heading text-sm font-bold text-slate-900">{{ $product->formatted_price }}</span>
|
||||
</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">
|
||||
<span>Kleur 🎨</span>
|
||||
<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>
|
||||
|
||||
@@ -1,30 +1,30 @@
|
||||
@extends('layouts.app')
|
||||
|
||||
@section('title', 'Eigen 3D Model Printen (STL / 3MF) | Jouwdriedee.nl')
|
||||
@section('title', 'Eigen 3D Model Printen | Jouwdriedee.nl')
|
||||
|
||||
@section('content')
|
||||
<!-- Header Banner -->
|
||||
<div class="bg-slate-50 border-b border-slate-200/80 py-8 sm:py-12">
|
||||
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center space-y-3">
|
||||
<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">
|
||||
<i data-lucide="layers" class="w-3.5 h-3.5 text-rose-500"></i>
|
||||
<span>3D Print op Aanvraag & Maatwerk</span>
|
||||
<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-2.5">
|
||||
<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-slate-500"></i>
|
||||
<span>3D Print op Aanvraag</span>
|
||||
</span>
|
||||
<h1 class="font-heading text-3xl sm:text-5xl font-black text-slate-900 tracking-tight">Eigen 3D Model Printen</h1>
|
||||
<p class="text-xs sm:text-sm text-slate-600 max-w-xl mx-auto leading-relaxed font-normal">
|
||||
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.
|
||||
<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-500 max-w-xl mx-auto leading-relaxed">
|
||||
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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8 sm:py-12"
|
||||
x-data="{
|
||||
activeTab: 'direct', // 'direct' of 'offerte'
|
||||
activeTab: 'direct',
|
||||
selectedSize: 'medium',
|
||||
sizePrices: {
|
||||
'klein': 9.95, // tot 8 cm
|
||||
'medium': 16.95, // tot 15 cm
|
||||
'groot': 24.95 // tot 22 cm
|
||||
'klein': 9.95,
|
||||
'medium': 16.95,
|
||||
'groot': 24.95
|
||||
},
|
||||
selectedMaterial: 'pla',
|
||||
materialMultipliers: {
|
||||
@@ -32,7 +32,7 @@
|
||||
'{{ $mat->code }}': {{ $mat->price_multiplier }},
|
||||
@endforeach
|
||||
},
|
||||
selectedColor: '{{ $colors[0]->name ?? 'Zon Geel (Pikachu)' }}',
|
||||
selectedColor: '{{ $colors[0]->name ?? 'Zwart' }}',
|
||||
quantity: 1,
|
||||
|
||||
get calculatedTotal() {
|
||||
@@ -48,75 +48,75 @@
|
||||
}">
|
||||
|
||||
<!-- 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
|
||||
type="button"
|
||||
@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="flex-1 py-2.5 px-4 rounded-xl text-xs transition flex items-center justify-center space-x-1.5"
|
||||
: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-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>
|
||||
<span>Direct online bestellen</span>
|
||||
<span>Direct bestellen</span>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
@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="flex-1 py-2.5 px-4 rounded-xl text-xs transition flex items-center justify-center space-x-1.5"
|
||||
: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-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>
|
||||
<span>Maatwerk offerte</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- TAB 1: DIRECT BESTELLEN EN IN WINKELWAGEN -->
|
||||
<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">
|
||||
<!-- TAB 1: DIRECT BESTELLEN -->
|
||||
<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">
|
||||
@csrf
|
||||
|
||||
<!-- 1. Model bron: Bestand of Link -->
|
||||
<div class="space-y-4">
|
||||
<div class="border-b border-slate-100 pb-3">
|
||||
<h3 class="font-heading text-base font-black text-slate-900 flex items-center space-x-2">
|
||||
<span>1. 3D-bestand uploaden of link invoeren</span>
|
||||
<div class="space-y-3">
|
||||
<div class="border-b border-slate-100 pb-2">
|
||||
<h3 class="text-xs font-bold text-slate-900 uppercase tracking-wider">
|
||||
1. 3D-bestand uploaden of link invoeren
|
||||
</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 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 -->
|
||||
<div class="p-4 rounded-2xl bg-slate-50 border border-slate-200/80 hover:border-slate-300 transition">
|
||||
<label class="block text-xs font-bold 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>
|
||||
<span>Bestand uploaden (.stl, .3mf, .step, .obj)</span>
|
||||
<div class="p-4 rounded-xl bg-slate-50 border border-slate-200 hover:border-slate-300 transition">
|
||||
<label class="block text-xs font-semibold text-slate-800 mb-1 flex items-center space-x-1.5">
|
||||
<i data-lucide="file-up" class="w-3.5 h-3.5 text-slate-500"></i>
|
||||
<span>Bestand uploaden (.stl, .3mf, .step)</span>
|
||||
</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">
|
||||
<span class="text-[10px] text-slate-400 block mt-1">Maximale bestandsgrootte: 50MB</span>
|
||||
<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">Tot 50 MB per bestand</span>
|
||||
</div>
|
||||
|
||||
<!-- Of URL -->
|
||||
<div class="p-4 rounded-2xl bg-slate-50 border border-slate-200/80 hover:border-slate-300 transition">
|
||||
<label class="block text-xs font-bold 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>
|
||||
<div class="p-4 rounded-xl bg-slate-50 border border-slate-200 hover:border-slate-300 transition">
|
||||
<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-slate-500"></i>
|
||||
<span>Of plak een MakerWorld / Printables link</span>
|
||||
</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">
|
||||
<span class="text-[10px] text-slate-400 block mt-1">Wij downloaden en inspecteren het bestand</span>
|
||||
<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 halen de specificaties automatisch op</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-xs font-bold text-slate-700 mb-1">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">
|
||||
<div class="space-y-1">
|
||||
<label class="block text-xs font-medium text-slate-700">Omschrijving of modelnaam (optioneel)</label>
|
||||
<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>
|
||||
|
||||
<!-- 2. Formaat & Afmeting -->
|
||||
<div class="space-y-3">
|
||||
<div class="border-b border-slate-100 pb-2">
|
||||
<h3 class="font-heading text-base font-black text-slate-900">
|
||||
<span>2. Formaat en schaal selecteren</span>
|
||||
<h3 class="text-xs font-bold text-slate-900 uppercase tracking-wider">
|
||||
2. Formaat en schaal selecteren
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
@@ -125,57 +125,57 @@
|
||||
<button
|
||||
type="button"
|
||||
@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="p-4 rounded-2xl border text-left transition cursor-pointer flex flex-col justify-between"
|
||||
: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-xl border text-left transition cursor-pointer flex flex-col justify-between"
|
||||
>
|
||||
<div>
|
||||
<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>
|
||||
<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">€ 9,95</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
@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="p-4 rounded-2xl border text-left transition cursor-pointer flex flex-col justify-between"
|
||||
: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-xl border text-left transition cursor-pointer flex flex-col justify-between"
|
||||
>
|
||||
<div>
|
||||
<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>
|
||||
<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">€ 16,95</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
@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="p-4 rounded-2xl border text-left transition cursor-pointer flex flex-col justify-between"
|
||||
: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-xl border text-left transition cursor-pointer flex flex-col justify-between"
|
||||
>
|
||||
<div>
|
||||
<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>
|
||||
<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">€ 24,95</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 3. Materiaal & Kleur -->
|
||||
<div class="space-y-4">
|
||||
<div class="space-y-3">
|
||||
<div class="border-b border-slate-100 pb-2">
|
||||
<h3 class="font-heading text-base font-black text-slate-900">
|
||||
<span>3. Materiaal en printkleur</span>
|
||||
<h3 class="text-xs font-bold text-slate-900 uppercase tracking-wider">
|
||||
3. Materiaal en printkleur
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<!-- Materiaal -->
|
||||
<div>
|
||||
<label class="block text-xs font-bold text-slate-700 mb-1.5">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">
|
||||
<div class="space-y-1">
|
||||
<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 text-xs font-medium text-slate-900 focus:bg-white focus:outline-none">
|
||||
@foreach($materials as $mat)
|
||||
<option value="{{ $mat->code }}">{{ $mat->name }}</option>
|
||||
@endforeach
|
||||
@@ -183,57 +183,54 @@
|
||||
</div>
|
||||
|
||||
<!-- Kleur -->
|
||||
<div>
|
||||
<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>
|
||||
<div class="space-y-1">
|
||||
<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">
|
||||
<div class="flex flex-wrap gap-2 pt-1">
|
||||
<div class="flex flex-wrap gap-1.5 pt-1">
|
||||
@foreach($colors as $c)
|
||||
<button
|
||||
type="button"
|
||||
@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="w-7 h-7 rounded-xl border shadow-2xs transition flex items-center justify-center cursor-pointer relative"
|
||||
:class="selectedColor === '{{ $c->name }}' ? 'ring-2 ring-slate-900 ring-offset-1' : 'hover:scale-105 border-slate-200'"
|
||||
class="w-6 h-6 rounded-full border shadow-2xs transition flex items-center justify-center cursor-pointer"
|
||||
style="background-color: {{ $c->hex }};"
|
||||
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>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-xs font-bold text-slate-700 mb-1">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>
|
||||
<div class="space-y-1">
|
||||
<label class="block text-xs font-medium text-slate-700">Bijzondere instructies (optioneel)</label>
|
||||
<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>
|
||||
|
||||
<!-- 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>
|
||||
<span class="text-[10px] font-bold text-slate-400 uppercase tracking-wider block">Berekende Stukprijs</span>
|
||||
<div class="flex items-baseline space-x-2">
|
||||
<span class="font-heading text-3xl font-black text-slate-900">€ <span x-text="unitPrice"></span></span>
|
||||
<span class="text-xs text-slate-500">incl. btw & materiaal</span>
|
||||
<span class="text-[10px] font-semibold text-slate-400 uppercase tracking-wider block">Berekende stukprijs</span>
|
||||
<div class="flex items-baseline space-x-1.5">
|
||||
<span class="text-2xl font-bold text-slate-900">€ <span x-text="unitPrice"></span></span>
|
||||
<span class="text-xs text-slate-500">incl. btw</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center space-x-3 w-full sm:w-auto">
|
||||
<!-- Aantal -->
|
||||
<div class="flex items-center border border-slate-200 rounded-xl bg-white overflow-hidden shadow-2xs">
|
||||
<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>
|
||||
<span class="px-3 py-2 font-heading font-black text-xs text-slate-900" x-text="quantity"></span>
|
||||
<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-2.5 py-1 text-slate-600 font-bold cursor-pointer hover:bg-slate-50">-</button>
|
||||
<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">
|
||||
<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>
|
||||
|
||||
<!-- 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">
|
||||
<i data-lucide="shopping-bag" class="w-4 h-4"></i>
|
||||
<span>In Winkelwagen • € <span x-text="calculatedTotal"></span></span>
|
||||
<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-3.5 h-3.5"></i>
|
||||
<span>In winkelwagen • € <span x-text="calculatedTotal"></span></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -242,48 +239,48 @@
|
||||
|
||||
</div>
|
||||
|
||||
<!-- TAB 2: VRIJBLIJVENDE OFFERTE (VOOR MAATWERK & ADVIES) -->
|
||||
<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">
|
||||
<!-- TAB 2: VRIJBLIJVENDE OFFERTE -->
|
||||
<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">
|
||||
<h3 class="font-heading text-lg font-black 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>
|
||||
<h3 class="text-base font-bold text-slate-900">Vrijblijvende Maatwerk Offerte</h3>
|
||||
<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>
|
||||
|
||||
<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
|
||||
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label class="block text-xs font-bold text-slate-700 uppercase tracking-wider mb-1">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">
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-3.5">
|
||||
<div class="space-y-1">
|
||||
<label class="block text-xs font-medium text-slate-700">Naam *</label>
|
||||
<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>
|
||||
<label class="block text-xs font-bold text-slate-700 uppercase tracking-wider mb-1">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">
|
||||
<div class="space-y-1">
|
||||
<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 py-2 text-xs text-slate-900 focus:bg-white focus:outline-none">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-xs font-bold text-slate-700 uppercase tracking-wider mb-1">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">
|
||||
<div class="space-y-1">
|
||||
<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 py-2 text-xs text-slate-900 focus:bg-white focus:outline-none">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-xs font-bold text-slate-700 uppercase tracking-wider mb-1">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">
|
||||
<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">
|
||||
<p class="text-[11px] text-slate-400 mt-2">Ondersteunde formaten: STL, STEP, OBJ, 3MF of ZIP (max 50 MB)</p>
|
||||
<div class="space-y-1">
|
||||
<label class="block text-xs font-medium text-slate-700">3D Model Bestand (.stl, .step, .obj, .zip)</label>
|
||||
<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-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-[10px] text-slate-400 mt-1.5">STL, STEP, OBJ, 3MF of ZIP (max 50 MB)</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-xs font-bold text-slate-700 uppercase tracking-wider mb-1">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>
|
||||
<div class="space-y-1">
|
||||
<label class="block text-xs font-medium text-slate-700">Toelichting, Afmetingen & Aantal *</label>
|
||||
<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>
|
||||
|
||||
<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">
|
||||
<i data-lucide="send" class="w-4 h-4"></i>
|
||||
<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-3.5 h-3.5"></i>
|
||||
<span>Aanvraag Verzenden</span>
|
||||
</button>
|
||||
</form>
|
||||
@@ -291,4 +288,3 @@
|
||||
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
|
||||
@@ -3,62 +3,62 @@
|
||||
@section('title', setting('site_name', 'Jouwdriedee.nl') . ' | ' . setting('site_tagline', 'Kleurrijke 3D Prints, Fidget Toys & Collectibles'))
|
||||
|
||||
@section('content')
|
||||
<!-- Hero Section (Subtiel, Vriendelijk, Kleurrijk) -->
|
||||
<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">
|
||||
<div class="relative 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">
|
||||
<!-- Hero Section (Fris, Subtiel, Modern & Ruimtelijk) -->
|
||||
<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="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="grid grid-cols-1 lg:grid-cols-12 gap-12 lg:gap-16 items-center">
|
||||
|
||||
<!-- 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">
|
||||
<span class="w-2 h-2 rounded-full bg-emerald-500 animate-pulse"></span>
|
||||
<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-1.5 h-1.5 rounded-full bg-emerald-500"></span>
|
||||
<span>{{ setting('hero_badge', 'Nederlandse 3D Printstudio • Bambu Lab Precisie') }}</span>
|
||||
</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.'))) !!}
|
||||
</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!') }}
|
||||
</p>
|
||||
|
||||
<!-- Action CTA's -->
|
||||
<div class="flex flex-col sm:flex-row items-center justify-center lg:justify-start gap-3 pt-2">
|
||||
<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">
|
||||
<!-- Clean Minimal CTAs -->
|
||||
<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-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>
|
||||
<i data-lucide="arrow-right" class="w-4 h-4"></i>
|
||||
</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>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<!-- Technische specificaties / Kwaliteitsbadges -->
|
||||
<div class="pt-4 grid grid-cols-3 gap-2 sm:gap-4 max-w-md mx-auto lg:mx-0">
|
||||
<div class="p-3 bg-white border border-slate-200/70 rounded-2xl shadow-xs text-center">
|
||||
<div class="text-base sm:text-xl font-black text-slate-900 font-heading">
|
||||
<!-- Sleek Micro Spec Badges -->
|
||||
<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>
|
||||
<div class="text-base sm:text-lg font-bold text-slate-900">
|
||||
{{ setting('hero_stat_1_val', '0.12 mm') }}
|
||||
</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') }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-3 bg-white border border-slate-200/70 rounded-2xl shadow-xs text-center">
|
||||
<div class="text-base sm:text-xl font-black text-slate-900 font-heading">
|
||||
<div>
|
||||
<div class="text-base sm:text-lg font-bold text-slate-900">
|
||||
{{ setting('hero_stat_2_val', 'Bambu Lab') }}
|
||||
</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') }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-3 bg-white border border-slate-200/70 rounded-2xl shadow-xs text-center">
|
||||
<div class="text-base sm:text-xl font-black text-slate-900 font-heading">
|
||||
<div>
|
||||
<div class="text-base sm:text-lg font-bold text-slate-900">
|
||||
{{ setting('hero_stat_3_val', '2-3 Dagen') }}
|
||||
</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') }}
|
||||
</div>
|
||||
</div>
|
||||
@@ -66,41 +66,29 @@
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Right Hero Card / Werkelijke 3D Print Productfoto -->
|
||||
<!-- Right Hero Card: Frameless Editorial Showcase -->
|
||||
<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="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">
|
||||
{{ setting('hero_card_badge', 'Meest gekozen print') }}
|
||||
</div>
|
||||
|
||||
<div class="relative h-64 sm:h-84 rounded-2xl overflow-hidden bg-slate-100">
|
||||
<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
|
||||
src="/images/products/crystal-dragon.jpg"
|
||||
alt="Articulated Kristaldraak 3D Print"
|
||||
class="w-full h-full object-cover object-center hover:scale-105 transition-transform duration-500"
|
||||
class="w-full h-full object-cover object-center group-hover:scale-102 transition-transform duration-700 ease-out"
|
||||
>
|
||||
|
||||
<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">
|
||||
<!-- Minimalist Floating Pill -->
|
||||
<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">
|
||||
<div>
|
||||
<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>
|
||||
<span class="text-[10px] font-semibold uppercase tracking-wider text-slate-400 block">Uitgelicht</span>
|
||||
<h3 class="font-heading font-bold 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>
|
||||
<span class="text-[10px] text-slate-400 block">Vanaf</span>
|
||||
<span class="font-heading font-bold text-slate-900 text-xs sm:text-sm">€ 17,95</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-3 flex items-center justify-between text-[11px] text-slate-500 font-medium px-1">
|
||||
<span class="flex items-center space-x-1.5">
|
||||
<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 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">
|
||||
{{ setting('hero_card_badge', 'Meest gekozen print') }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -109,157 +97,145 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 3 Categorieën Grid (Subtiel, Warm & Vriendelijk) -->
|
||||
<section class="py-12 sm:py-16 bg-white border-b border-slate-200/60">
|
||||
<!-- 3 Categorieën Strip (Schoon, Modern & Subtiel) -->
|
||||
<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="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>
|
||||
<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') }}
|
||||
</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') }}
|
||||
</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.') }}
|
||||
</p>
|
||||
</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">
|
||||
<span>Alle prints bekijken</span>
|
||||
<i data-lucide="chevron-right" class="w-3.5 h-3.5"></i>
|
||||
<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>Alles bekijken</span>
|
||||
<i data-lucide="arrow-right" class="w-3.5 h-3.5"></i>
|
||||
</a>
|
||||
</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 -->
|
||||
<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">
|
||||
<div class="h-48 overflow-hidden bg-violet-50">
|
||||
<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">
|
||||
<a href="{{ route('catalog', ['category' => 'fidget-toys']) }}" class="group block">
|
||||
<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-103 transition-transform duration-500">
|
||||
</div>
|
||||
<div class="p-5">
|
||||
<span class="text-[10px] font-bold text-violet-700 uppercase tracking-wider block">Beweegbare Scharnieren</span>
|
||||
<h3 class="font-heading text-lg font-black text-slate-900 group-hover:text-violet-700 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>
|
||||
<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 class="pt-3.5 space-y-1">
|
||||
<div class="flex items-center justify-between">
|
||||
<h3 class="font-heading font-semibold text-base text-slate-900 group-hover:text-sky-600 transition">Fidget Toys & Sensory</h3>
|
||||
<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>
|
||||
<p class="text-xs text-slate-500 line-clamp-1 font-normal">Kristaldraken, wriemel-slakken en compacte cubes met soepele scharnieren.</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- 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">
|
||||
<div class="h-48 overflow-hidden bg-amber-50">
|
||||
<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">
|
||||
<a href="{{ route('catalog', ['category' => 'pokemon-3d']) }}" class="group block">
|
||||
<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-103 transition-transform duration-500">
|
||||
</div>
|
||||
<div class="p-5">
|
||||
<span class="text-[10px] font-bold text-amber-700 uppercase tracking-wider block">Gedetailleerde Figuren</span>
|
||||
<h3 class="font-heading text-lg font-black text-slate-900 group-hover:text-amber-700 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>
|
||||
<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 class="pt-3.5 space-y-1">
|
||||
<div class="flex items-center justify-between">
|
||||
<h3 class="font-heading font-semibold text-base text-slate-900 group-hover:text-sky-600 transition">Pokémon 3D Prints</h3>
|
||||
<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>
|
||||
<p class="text-xs text-slate-500 line-clamp-1 font-normal">Pikachu planters, beweegbare Charizard, Pokéballs en Gengar figuren.</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- 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">
|
||||
<div class="h-48 overflow-hidden bg-rose-50">
|
||||
<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">
|
||||
<a href="{{ route('catalog', ['category' => 'film-popculture']) }}" class="group block">
|
||||
<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-103 transition-transform duration-500">
|
||||
</div>
|
||||
<div class="p-5">
|
||||
<span class="text-[10px] font-bold text-rose-600 uppercase tracking-wider block">Collectibles & Display</span>
|
||||
<h3 class="font-heading text-lg font-black text-slate-900 group-hover:text-rose-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>
|
||||
<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 class="pt-3.5 space-y-1">
|
||||
<div class="flex items-center justify-between">
|
||||
<h3 class="font-heading font-semibold text-base text-slate-900 group-hover:text-sky-600 transition">Film, Gaming & Props</h3>
|
||||
<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>
|
||||
<p class="text-xs text-slate-500 line-clamp-1 font-normal">Lightsaber displays, Mjolnir desk organizers en iconische filmfiguren.</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Uitgelichte Prints Showcase (Subtiel & Vriendelijk) -->
|
||||
<section class="py-12 sm:py-16 bg-[#FAF9F6]">
|
||||
<!-- Uitgelichte Prints Showcase (Crisp & Modern Grid) -->
|
||||
<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="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>
|
||||
<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') }}
|
||||
</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') }}
|
||||
</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.') }}
|
||||
</p>
|
||||
</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>
|
||||
<i data-lucide="arrow-right" class="w-3.5 h-3.5"></i>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- 2 Kolommen mobiel, 3 op desktop -->
|
||||
<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 lg:grid-cols-4 gap-4 sm:gap-6">
|
||||
@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 class="relative h-44 sm:h-60 overflow-hidden bg-slate-100">
|
||||
<div>
|
||||
<!-- Product Photo Frame -->
|
||||
<div class="relative aspect-square rounded-xl overflow-hidden bg-slate-50">
|
||||
<img
|
||||
src="{{ $product->image_url }}"
|
||||
alt="{{ $product->name }}"
|
||||
class="w-full h-full object-cover object-center group-hover:scale-105 transition-transform duration-500"
|
||||
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">
|
||||
<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">
|
||||
<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">
|
||||
{{ $product->category->name }}
|
||||
</span>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
@if($product->print_time_hours)
|
||||
<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">
|
||||
<i data-lucide="clock" class="w-3 h-3 text-sky-600"></i>
|
||||
<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">
|
||||
<!-- Product Info -->
|
||||
<div class="pt-3 pb-1">
|
||||
<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) }}">
|
||||
{{ $product->name }}
|
||||
</a>
|
||||
</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 }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Footer met prijs & actieknop -->
|
||||
<div class="pt-2 sm:pt-3 border-t border-slate-100 flex items-center justify-between">
|
||||
<!-- Footer: Price & Direct Link -->
|
||||
<div class="pt-2 border-t border-slate-100 flex items-center justify-between mt-2">
|
||||
<div>
|
||||
<span class="text-[9px] sm:text-[10px] text-slate-400 font-bold uppercase block">Vanaf</span>
|
||||
<span class="font-heading text-sm sm:text-lg font-black text-slate-900">
|
||||
<span class="text-[10px] text-slate-400 block font-normal leading-none">Vanaf</span>
|
||||
<span class="font-heading text-sm font-bold text-slate-900">
|
||||
{{ $product->formatted_price }}
|
||||
</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>
|
||||
<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>
|
||||
@endforeach
|
||||
@@ -267,29 +243,29 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Subtiele Kwaliteits & Voordelen Banner (Aanpasbaar via Admin) -->
|
||||
<section class="py-12 sm:py-16 bg-white border-t border-slate-200/60">
|
||||
<!-- Subtiele USP's (Puur, Wit & Ruimtelijk) -->
|
||||
<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="text-center max-w-2xl mx-auto mb-10">
|
||||
<span class="text-xs font-bold uppercase tracking-wider text-amber-700">
|
||||
<div class="text-center max-w-xl mx-auto mb-14">
|
||||
<span class="text-xs font-semibold uppercase tracking-wider text-slate-400">
|
||||
{{ setting('usp_tag', 'Waarom Jouwdriedee.nl?') }}
|
||||
</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') }}
|
||||
</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.') }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-6">
|
||||
<!-- Feature 1 -->
|
||||
<div class="p-5 rounded-3xl bg-[#FAF7FD] border border-violet-100 text-left 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">
|
||||
<i data-lucide="printer" class="w-5 h-5"></i>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
|
||||
<!-- USP 1 -->
|
||||
<div class="space-y-2">
|
||||
<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-4 h-4"></i>
|
||||
</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') }}
|
||||
</h3>
|
||||
<p class="text-xs text-slate-500 leading-relaxed font-normal">
|
||||
@@ -297,12 +273,12 @@
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Feature 2 -->
|
||||
<div class="p-5 rounded-3xl bg-[#FFFBF0] border border-amber-100 text-left 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">
|
||||
<i data-lucide="palette" class="w-5 h-5"></i>
|
||||
<!-- USP 2 -->
|
||||
<div class="space-y-2">
|
||||
<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-4 h-4"></i>
|
||||
</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') }}
|
||||
</h3>
|
||||
<p class="text-xs text-slate-500 leading-relaxed font-normal">
|
||||
@@ -310,12 +286,12 @@
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Feature 3 -->
|
||||
<div class="p-5 rounded-3xl bg-[#F0FDF4] border border-emerald-100 text-left 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">
|
||||
<i data-lucide="shield-check" class="w-5 h-5"></i>
|
||||
<!-- USP 3 -->
|
||||
<div class="space-y-2">
|
||||
<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-4 h-4"></i>
|
||||
</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+') }}
|
||||
</h3>
|
||||
<p class="text-xs text-slate-500 leading-relaxed font-normal">
|
||||
@@ -323,12 +299,12 @@
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Feature 4 -->
|
||||
<div class="p-5 rounded-3xl bg-[#EFF6FF] border border-sky-100 text-left 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">
|
||||
<i data-lucide="truck" class="w-5 h-5"></i>
|
||||
<!-- USP 4 -->
|
||||
<div class="space-y-2">
|
||||
<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-4 h-4"></i>
|
||||
</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') }}
|
||||
</h3>
|
||||
<p class="text-xs text-slate-500 leading-relaxed font-normal">
|
||||
@@ -337,10 +313,10 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-8 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">
|
||||
<div class="mt-12 text-center">
|
||||
<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>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
|
||||
+106
-114
@@ -1,24 +1,24 @@
|
||||
@extends('layouts.app')
|
||||
|
||||
@section('title', $product->name . ' 🎨 | Jouwdriedee.nl')
|
||||
@section('title', $product->name . ' | Jouwdriedee.nl')
|
||||
|
||||
@section('content')
|
||||
<!-- Breadcrumbs -->
|
||||
<div class="bg-white/80 border-b border-slate-200/60 py-2.5 sm: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">
|
||||
<a href="{{ route('home') }}" class="hover:text-amber-700">Home</a>
|
||||
<span>/</span>
|
||||
<a href="{{ route('catalog') }}" class="hover:text-amber-700">Catalogus</a>
|
||||
<!-- Breadcrumbs (Subtiel) -->
|
||||
<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-normal text-slate-500 flex items-center space-x-2 overflow-x-auto whitespace-nowrap">
|
||||
<a href="{{ route('home') }}" class="hover:text-slate-900 transition">Home</a>
|
||||
<span class="text-slate-300">/</span>
|
||||
<a href="{{ route('catalog') }}" class="hover:text-slate-900 transition">Catalogus</a>
|
||||
@if($product->category)
|
||||
<span>/</span>
|
||||
<a href="{{ route('catalog', ['category' => $product->category->slug]) }}" class="hover:text-amber-700">{{ $product->category->name }}</a>
|
||||
<span class="text-slate-300">/</span>
|
||||
<a href="{{ route('catalog', ['category' => $product->category->slug]) }}" class="hover:text-slate-900 transition">{{ $product->category->name }}</a>
|
||||
@endif
|
||||
<span>/</span>
|
||||
<span class="font-bold text-slate-900 truncate">{{ $product->name }}</span>
|
||||
<span class="text-slate-300">/</span>
|
||||
<span class="text-slate-900 font-medium truncate">{{ $product->name }}</span>
|
||||
</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="{
|
||||
basePrice: {{ $product->base_price }},
|
||||
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 -->
|
||||
<div class="lg:col-span-6 space-y-4 sm:space-y-6">
|
||||
<!-- Linkerkant: Productgalerij & Details -->
|
||||
<div class="lg:col-span-7 space-y-6">
|
||||
@php
|
||||
$gallery = [];
|
||||
if (!empty($product->image_url)) {
|
||||
@@ -72,7 +72,7 @@
|
||||
}
|
||||
@endphp
|
||||
|
||||
<!-- Productgalerij met interactieve fotokiezer -->
|
||||
<!-- Fotokiezer -->
|
||||
<div class="space-y-3"
|
||||
x-data="{
|
||||
activeImage: '{{ $gallery[0] }}',
|
||||
@@ -92,27 +92,25 @@
|
||||
}
|
||||
}">
|
||||
|
||||
<div class="rounded-3xl bg-white border border-slate-200/80 overflow-hidden shadow-xs relative group">
|
||||
<div class="relative h-72 sm:h-96 md:h-112 bg-slate-100 flex items-center justify-center overflow-hidden">
|
||||
<div class="rounded-2xl bg-slate-50 overflow-hidden relative group border border-slate-200/60 aspect-4/3 sm:aspect-square">
|
||||
<img
|
||||
:src="activeImage"
|
||||
alt="{{ $product->name }}"
|
||||
class="w-full h-full object-cover object-center transition-all duration-300"
|
||||
>
|
||||
|
||||
<div class="absolute top-3 left-3 flex flex-col gap-1.5 z-10">
|
||||
@if($product->is_featured)
|
||||
<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">
|
||||
<span>★</span>
|
||||
<span>Populair</span>
|
||||
<div class="absolute top-3 left-3">
|
||||
<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">
|
||||
Uitgelicht
|
||||
</span>
|
||||
@endif
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<!-- Foto Counter Badge -->
|
||||
@if(count($gallery) > 1)
|
||||
<div class="absolute bottom-3 right-3 z-10">
|
||||
<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">
|
||||
<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>
|
||||
@@ -121,33 +119,32 @@
|
||||
<button
|
||||
type="button"
|
||||
@click="prevImage"
|
||||
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"
|
||||
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"
|
||||
aria-label="Vorige 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="M15 19l-7-7 7-7"/></svg>
|
||||
<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>
|
||||
|
||||
<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"
|
||||
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"
|
||||
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>
|
||||
<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>
|
||||
</button>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Thumbnails Strip (indien meerdere foto's) -->
|
||||
<!-- Thumbnails Strip -->
|
||||
@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">
|
||||
<button
|
||||
type="button"
|
||||
@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="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="relative w-16 h-16 rounded-xl overflow-hidden shrink-0 border transition-all cursor-pointer"
|
||||
: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">
|
||||
</button>
|
||||
@@ -156,86 +153,81 @@
|
||||
@endif
|
||||
</div>
|
||||
|
||||
<!-- Print Specificaties Card (Minder lomp, verfijnd) -->
|
||||
<div class="p-4 sm:p-6 rounded-2xl bg-white border border-slate-200/80 shadow-xs space-y-3">
|
||||
<h3 class="font-heading text-xs font-black text-slate-900 uppercase tracking-wider flex items-center space-x-1.5">
|
||||
<span>🖨️</span>
|
||||
<span>Print Details & Formaat</span>
|
||||
<!-- Print Specificaties Strip (Subtiel) -->
|
||||
<div class="p-5 rounded-2xl bg-slate-50/70 border border-slate-200/60 space-y-4">
|
||||
<h3 class="text-xs font-semibold text-slate-900 uppercase tracking-wider">
|
||||
Print Specificaties
|
||||
</h3>
|
||||
|
||||
<div class="grid grid-cols-2 sm:grid-cols-4 gap-2 sm:gap-3 text-xs">
|
||||
<div class="p-3 rounded-xl bg-slate-50 border border-slate-100 text-center">
|
||||
<span class="text-slate-400 block text-[10px] uppercase font-bold">Formaat</span>
|
||||
<span class="font-black text-slate-800 mt-0.5 block font-heading">{{ $product->dimensions ?? 'Standaard' }}</span>
|
||||
<div class="grid grid-cols-2 sm:grid-cols-4 gap-3 text-xs">
|
||||
<div class="p-2.5 rounded-lg bg-white border border-slate-200/50">
|
||||
<span class="text-slate-400 block text-[10px] uppercase font-medium">Formaat</span>
|
||||
<span class="font-semibold text-slate-800 mt-0.5 block">{{ $product->dimensions ?? 'Standaard' }}</span>
|
||||
</div>
|
||||
|
||||
<div class="p-3 rounded-xl bg-slate-50 border border-slate-100 text-center">
|
||||
<span class="text-slate-400 block text-[10px] uppercase font-bold">Gewicht</span>
|
||||
<span class="font-black text-slate-800 mt-0.5 block font-heading">~{{ $product->weight_grams ?? '80' }}g</span>
|
||||
<div class="p-2.5 rounded-lg bg-white border border-slate-200/50">
|
||||
<span class="text-slate-400 block text-[10px] uppercase font-medium">Gewicht</span>
|
||||
<span class="font-semibold text-slate-800 mt-0.5 block">~{{ $product->weight_grams ?? '80' }}g</span>
|
||||
</div>
|
||||
|
||||
<div class="p-3 rounded-xl bg-slate-50 border border-slate-100 text-center">
|
||||
<span class="text-slate-400 block text-[10px] uppercase font-bold">Printtijd</span>
|
||||
<span class="font-black text-slate-800 mt-0.5 block font-heading">{{ $product->print_time_hours ?? '4.0' }} u</span>
|
||||
<div class="p-2.5 rounded-lg bg-white border border-slate-200/50">
|
||||
<span class="text-slate-400 block text-[10px] uppercase font-medium">Printduur</span>
|
||||
<span class="font-semibold text-slate-800 mt-0.5 block">{{ $product->print_time_hours ?? '4.0' }} uur</span>
|
||||
</div>
|
||||
|
||||
<div class="p-3 rounded-xl bg-slate-50 border border-slate-100 text-center">
|
||||
<span class="text-slate-400 block text-[10px] uppercase font-bold">Resolutie</span>
|
||||
<span class="font-black text-slate-800 mt-0.5 block font-heading">0.12 - 0.16 mm</span>
|
||||
<div class="p-2.5 rounded-lg bg-white border border-slate-200/50">
|
||||
<span class="text-slate-400 block text-[10px] uppercase font-medium">Resolutie</span>
|
||||
<span class="font-semibold text-slate-800 mt-0.5 block">0.12 - 0.16 mm</span>
|
||||
</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">
|
||||
<span class="flex items-center space-x-1">
|
||||
<span>✨</span>
|
||||
<span>Geprint op precisie Bambu Lab printers</span>
|
||||
</span>
|
||||
<span class="flex items-center space-x-1">
|
||||
<span>🌱</span>
|
||||
<span>Veilig & biologisch afbreekbaar PLA</span>
|
||||
<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.5">
|
||||
<span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span>
|
||||
<span>Geprint op precisie Bambu Lab X1/P1 printers</span>
|
||||
</span>
|
||||
<span>100% biologisch afbreekbaar Bio-PLA+</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Productomschrijving -->
|
||||
<div class="p-4 sm:p-6 rounded-2xl bg-white border border-slate-200/80 shadow-xs space-y-2">
|
||||
<h3 class="font-heading text-sm font-black text-slate-900 flex items-center space-x-1.5">
|
||||
<span>📝</span>
|
||||
<span>Over deze 3D print</span>
|
||||
<div class="p-5 rounded-2xl bg-white border border-slate-200/60 space-y-3">
|
||||
<h3 class="text-sm font-semibold text-slate-900">
|
||||
Omschrijving
|
||||
</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>')) !!}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Rechterkant: Interactive Configurator & Bestelmodule -->
|
||||
<div class="lg:col-span-6 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">
|
||||
<!-- Rechterkant: Clean Configurator & Bestelmodule -->
|
||||
<div class="lg:col-span-5 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)
|
||||
<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 }}
|
||||
</span>
|
||||
@endif
|
||||
<h1 class="font-heading text-xl sm:text-3xl font-black text-slate-900 tracking-tight">{{ $product->name }}</h1>
|
||||
<p class="text-xs text-slate-500 mt-1 leading-relaxed">{{ $product->short_description }}</p>
|
||||
<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 font-normal leading-relaxed">{{ $product->short_description }}</p>
|
||||
</div>
|
||||
|
||||
<!-- 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>
|
||||
<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">
|
||||
<span class="font-heading text-2xl sm:text-3xl font-black text-slate-900">€ <span x-text="unitPriceFormatted"></span></span>
|
||||
<span class="text-xs text-slate-500 font-normal">incl. btw</span>
|
||||
<span class="font-heading text-2xl font-extrabold text-slate-900">€ <span x-text="unitPriceFormatted"></span></span>
|
||||
<span class="text-[11px] text-slate-500">incl. btw</span>
|
||||
</div>
|
||||
</div>
|
||||
<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>Print-klaar</span>
|
||||
<span>Op bestelling geprint</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -252,9 +244,9 @@
|
||||
|
||||
<!-- 1. Materiaal Keuze -->
|
||||
<div>
|
||||
<div class="flex items-center justify-between mb-1.5">
|
||||
<label class="text-xs font-bold text-slate-800 uppercase tracking-wider">1. Kies Materiaal</label>
|
||||
<span class="text-xs font-bold text-amber-700" x-text="selectedMaterial.toUpperCase()"></span>
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<label class="text-xs font-semibold text-slate-900">1. Materiaal</label>
|
||||
<span class="text-xs font-medium text-slate-500" x-text="selectedMaterial.toUpperCase()"></span>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-2">
|
||||
@foreach($product->available_materials ?? ['pla'] as $matCode)
|
||||
@@ -263,40 +255,40 @@
|
||||
<button
|
||||
type="button"
|
||||
@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"
|
||||
>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-xs font-bold">{{ $mat->name }}</span>
|
||||
<div class="flex items-center justify-between w-full">
|
||||
<span class="text-xs font-medium">{{ $mat->name }}</span>
|
||||
@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
|
||||
</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>
|
||||
@endif
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 2. Kleur Selectie (Swatches met mooie afwerking) -->
|
||||
<!-- 2. Kleur Selectie -->
|
||||
<div>
|
||||
<div class="flex items-center justify-between mb-1.5">
|
||||
<label class="text-xs font-bold text-slate-800 uppercase tracking-wider">2. Kies Jouw Kleur</label>
|
||||
<span class="text-xs font-bold text-amber-700" x-text="selectedColor"></span>
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<label class="text-xs font-semibold text-slate-900">2. Kleur</label>
|
||||
<span class="text-xs font-medium text-slate-600" x-text="selectedColor"></span>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
@foreach($allColors as $c)
|
||||
<button
|
||||
type="button"
|
||||
@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="w-8 h-8 rounded-xl border shadow-xs transition flex items-center justify-center cursor-pointer relative"
|
||||
: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-7 h-7 rounded-full border shadow-2xs transition flex items-center justify-center cursor-pointer relative"
|
||||
style="background-color: {{ $c->hex }};"
|
||||
title="{{ $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>
|
||||
</button>
|
||||
@endforeach
|
||||
@@ -305,59 +297,59 @@
|
||||
|
||||
<!-- 3. Formaat & Schaal -->
|
||||
<div>
|
||||
<div class="flex items-center justify-between mb-1.5">
|
||||
<label class="text-xs font-bold text-slate-800 uppercase tracking-wider">3. Formaat / Schaal</label>
|
||||
<span class="text-xs font-bold text-slate-700" x-text="selectedScale"></span>
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<label class="text-xs font-semibold text-slate-900">3. Formaat</label>
|
||||
<span class="text-xs font-medium text-slate-600" x-text="selectedScale"></span>
|
||||
</div>
|
||||
<div class="grid grid-cols-3 gap-2 text-xs">
|
||||
<button
|
||||
type="button"
|
||||
@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="p-2.5 rounded-xl border text-center transition cursor-pointer"
|
||||
: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 rounded-lg border text-center transition cursor-pointer"
|
||||
>
|
||||
<span>100% (Normaal)</span>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
@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="p-2.5 rounded-xl border text-center transition cursor-pointer"
|
||||
: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 rounded-lg border text-center transition cursor-pointer"
|
||||
>
|
||||
<span>150% (+45%)</span>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
@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="p-2.5 rounded-xl border text-center transition cursor-pointer"
|
||||
: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 rounded-lg border text-center transition cursor-pointer"
|
||||
>
|
||||
<span>200% (+95%)</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Aantal en Toevoegen Knop -->
|
||||
<div class="pt-3 border-t border-slate-100 space-y-3">
|
||||
<!-- Aantal en Bestelknop -->
|
||||
<div class="pt-2 border-t border-slate-100 space-y-3">
|
||||
<div class="flex items-center space-x-2.5">
|
||||
<!-- Stepper -->
|
||||
<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>
|
||||
<span class="px-3.5 py-2.5 font-heading font-black text-xs 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 > 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 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 hover:bg-slate-200 transition text-slate-700 font-semibold cursor-pointer text-xs">+</button>
|
||||
</div>
|
||||
|
||||
<!-- Knop Desktop -->
|
||||
<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">
|
||||
<span>🛒</span>
|
||||
<span>In Winkelmandje • € <span x-text="calculatedPrice"></span></span>
|
||||
<!-- Bestelknop -->
|
||||
<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">
|
||||
<i data-lucide="shopping-bag" class="w-4 h-4"></i>
|
||||
<span>In winkelwagen • € <span x-text="calculatedPrice"></span></span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-center space-x-3 text-[11px] text-slate-500 font-medium pt-1">
|
||||
<span>🚚 Gratis verzending vanaf €50</span>
|
||||
<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>•</span>
|
||||
<span>📦 PostNL Track & Trace</span>
|
||||
<span>PostNL Track & Trace</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -407,99 +407,4 @@ class AdminContentTest extends TestCase
|
||||
$this->assertEquals(45, (int) Setting::get('calc_default_markup'));
|
||||
$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'));
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user