Complete redesign: modern, fresh, subtle Scandinavian tech studio look & feel for webshop and admin
This commit is contained in:
File diff suppressed because it is too large
Load Diff
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user