904 lines
61 KiB
PHP
904 lines
61 KiB
PHP
@extends('layouts.admin')
|
|
|
|
@section('title', 'Layout & Teksten Aanpassen | Jouwdriedee Beheer')
|
|
|
|
@section('content')
|
|
<div class="space-y-6" x-data="{ activeTab: 'hero' }">
|
|
|
|
<!-- Header Section -->
|
|
<div class="flex flex-col sm:flex-row sm:items-center justify-between pb-6 border-b border-slate-200/80 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="palette" class="w-4 h-4"></i>
|
|
<span>Shop Content & Stijl CMS</span>
|
|
</div>
|
|
<h1 class="font-heading text-2xl sm:text-3xl font-black text-slate-900">Layout & Teksten Beheer</h1>
|
|
<p class="text-xs sm:text-sm text-slate-500 mt-1">
|
|
Pas alle teksten, titels, USP's, call-to-actions, kostprijstarieven en de lay-out van jouw webshop direct aan. Wijzigingen zijn onmiddellijk live zichtbaar!
|
|
</p>
|
|
</div>
|
|
|
|
<div class="flex items-center space-x-2.5 self-start sm:self-auto">
|
|
<a href="{{ route('home') }}" 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-sm">
|
|
<i data-lucide="eye" class="w-4 h-4 text-sky-600"></i>
|
|
<span>Bekijk Live Shop</span>
|
|
</a>
|
|
<form action="{{ route('admin.content.reset') }}" method="POST" onsubmit="return confirm('Weet je zeker dat je alle teksten wilt resetten naar de standaard fabrieksinstellingen?')">
|
|
@csrf
|
|
<button type="submit" class="px-3 py-2 rounded-xl bg-slate-100 hover:bg-rose-50 text-slate-600 hover:text-rose-700 text-xs font-bold transition border border-slate-200">
|
|
Reset Naar Standaard
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Main Form -->
|
|
<form action="{{ route('admin.content.update') }}" method="POST" class="space-y-6">
|
|
@csrf
|
|
|
|
<!-- Tabs Navigation -->
|
|
<div class="flex items-center space-x-1.5 overflow-x-auto pb-2 border-b border-slate-200/80 text-xs font-bold">
|
|
<button
|
|
type="button"
|
|
@click="activeTab = 'hero'"
|
|
:class="activeTab === 'hero' ? 'bg-amber-400 text-slate-950 font-black shadow-sm' : 'bg-white text-slate-600 hover:text-slate-900 hover:bg-slate-50 border border-slate-200/80'"
|
|
class="px-3.5 py-2 rounded-xl transition flex items-center space-x-1.5 whitespace-nowrap cursor-pointer"
|
|
>
|
|
<i data-lucide="sparkles" class="w-3.5 h-3.5"></i>
|
|
<span>1. Homepage Hero</span>
|
|
</button>
|
|
|
|
<button
|
|
type="button"
|
|
@click="activeTab = 'usp'"
|
|
:class="activeTab === 'usp' ? 'bg-amber-400 text-slate-950 font-black shadow-sm' : 'bg-white text-slate-600 hover:text-slate-900 hover:bg-slate-50 border border-slate-200/80'"
|
|
class="px-3.5 py-2 rounded-xl transition flex items-center space-x-1.5 whitespace-nowrap cursor-pointer"
|
|
>
|
|
<i data-lucide="shield-check" class="w-3.5 h-3.5"></i>
|
|
<span>2. USP's & Voordelen</span>
|
|
</button>
|
|
|
|
<button
|
|
type="button"
|
|
@click="activeTab = 'sections'"
|
|
:class="activeTab === 'sections' ? 'bg-amber-400 text-slate-950 font-black shadow-sm' : 'bg-white text-slate-600 hover:text-slate-900 hover:bg-slate-50 border border-slate-200/80'"
|
|
class="px-3.5 py-2 rounded-xl transition flex items-center space-x-1.5 whitespace-nowrap cursor-pointer"
|
|
>
|
|
<i data-lucide="layers" class="w-3.5 h-3.5"></i>
|
|
<span>3. Categorieën & Bestsellers</span>
|
|
</button>
|
|
|
|
<button
|
|
type="button"
|
|
@click="activeTab = 'calculator'"
|
|
:class="activeTab === 'calculator' ? 'bg-amber-400 text-slate-950 font-black shadow-sm' : 'bg-white text-slate-600 hover:text-slate-900 hover:bg-slate-50 border border-slate-200/80'"
|
|
class="px-3.5 py-2 rounded-xl transition flex items-center space-x-1.5 whitespace-nowrap cursor-pointer"
|
|
>
|
|
<i data-lucide="calculator" class="w-3.5 h-3.5 text-amber-700"></i>
|
|
<span>4. Kostprijscalculator</span>
|
|
</button>
|
|
|
|
<button
|
|
type="button"
|
|
@click="activeTab = 'announcement'"
|
|
:class="activeTab === 'announcement' ? 'bg-amber-400 text-slate-950 font-black shadow-sm' : 'bg-white text-slate-600 hover:text-slate-900 hover:bg-slate-50 border border-slate-200/80'"
|
|
class="px-3.5 py-2 rounded-xl transition flex items-center space-x-1.5 whitespace-nowrap cursor-pointer"
|
|
>
|
|
<i data-lucide="megaphone" class="w-3.5 h-3.5"></i>
|
|
<span>5. Bovenbalk (Meldingen)</span>
|
|
</button>
|
|
|
|
<button
|
|
type="button"
|
|
@click="activeTab = 'footer'"
|
|
:class="activeTab === 'footer' ? 'bg-amber-400 text-slate-950 font-black shadow-sm' : 'bg-white text-slate-600 hover:text-slate-900 hover:bg-slate-50 border border-slate-200/80'"
|
|
class="px-3.5 py-2 rounded-xl transition flex items-center space-x-1.5 whitespace-nowrap cursor-pointer"
|
|
>
|
|
<i data-lucide="info" class="w-3.5 h-3.5"></i>
|
|
<span>6. Footer & Contact</span>
|
|
</button>
|
|
|
|
<button
|
|
type="button"
|
|
@click="activeTab = 'brand'"
|
|
:class="activeTab === 'brand' ? 'bg-amber-400 text-slate-950 font-black shadow-sm' : 'bg-white text-slate-600 hover:text-slate-900 hover:bg-slate-50 border border-slate-200/80'"
|
|
class="px-3.5 py-2 rounded-xl transition flex items-center space-x-1.5 whitespace-nowrap cursor-pointer"
|
|
>
|
|
<i data-lucide="settings" class="w-3.5 h-3.5"></i>
|
|
<span>7. Algemeen & Thema</span>
|
|
</button>
|
|
|
|
<button
|
|
type="button"
|
|
@click="activeTab = 'email'"
|
|
:class="activeTab === 'email' ? 'bg-amber-400 text-slate-950 font-black shadow-sm' : 'bg-white text-slate-600 hover:text-slate-900 hover:bg-slate-50 border border-slate-200/80'"
|
|
class="px-3.5 py-2 rounded-xl transition flex items-center space-x-1.5 whitespace-nowrap cursor-pointer"
|
|
>
|
|
<i data-lucide="mail" class="w-3.5 h-3.5"></i>
|
|
<span>8. E-mail & SMTP</span>
|
|
</button>
|
|
|
|
<button
|
|
type="button"
|
|
@click="activeTab = 'offline'"
|
|
:class="activeTab === 'offline' ? 'bg-rose-600 text-white font-black shadow-sm' : 'bg-white text-rose-600 hover:bg-rose-50 border border-rose-200'"
|
|
class="px-3.5 py-2 rounded-xl transition flex items-center space-x-1.5 whitespace-nowrap cursor-pointer"
|
|
>
|
|
<span class="w-2 h-2 rounded-full {{ setting('shop_offline', '0') === '1' ? 'bg-rose-400 animate-ping' : 'bg-emerald-500' }}"></span>
|
|
<span>9. Offline Modus</span>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- ==================================================== -->
|
|
<!-- TAB 1: HOMEPAGE HERO -->
|
|
<!-- ==================================================== -->
|
|
<div x-show="activeTab === 'hero'" class="space-y-6">
|
|
<div class="p-6 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 font-black text-lg text-slate-900">Homepage Hero Bovenkant</h3>
|
|
<p class="text-xs text-slate-500">De eerste sectie die bezoekers zien bij het openen van de winkel.</p>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div class="space-y-1.5">
|
|
<label class="block text-xs font-bold text-slate-700">Pill Badge Tekst (bovenaan hero)</label>
|
|
<input
|
|
type="text"
|
|
name="hero_badge"
|
|
value="{{ setting('hero_badge', 'Nederlandse 3D Printstudio • Bambu Lab Precisie') }}"
|
|
class="w-full bg-slate-50 border border-slate-200 rounded-xl px-3.5 py-2.5 text-xs text-slate-900 focus:outline-none focus:ring-2 focus:ring-amber-400 focus:bg-white transition"
|
|
>
|
|
</div>
|
|
|
|
<div class="space-y-1.5">
|
|
<label class="block text-xs font-bold text-slate-700">Uitgelichte Kaart Badge (rechts op foto)</label>
|
|
<input
|
|
type="text"
|
|
name="hero_card_badge"
|
|
value="{{ setting('hero_card_badge', 'Meest gekozen print') }}"
|
|
class="w-full bg-slate-50 border border-slate-200 rounded-xl px-3.5 py-2.5 text-xs text-slate-900 focus:outline-none focus:ring-2 focus:ring-amber-400 focus:bg-white transition"
|
|
>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="space-y-1.5">
|
|
<label class="block text-xs font-bold text-slate-700">Hero Hoofdtitel (Grote H1)</label>
|
|
<input
|
|
type="text"
|
|
name="hero_title"
|
|
value="{{ setting('hero_title', 'Kleurrijke 3D prints, fidget toys & collectibles.') }}"
|
|
class="w-full bg-slate-50 border border-slate-200 rounded-xl px-3.5 py-2.5 text-sm font-black text-slate-900 focus:outline-none focus:ring-2 focus:ring-amber-400 focus:bg-white transition"
|
|
>
|
|
<p class="text-[11px] text-slate-400">Kies een pakkende, speelse titel die meteen duidelijk maakt wat er te koop is.</p>
|
|
</div>
|
|
|
|
<div class="space-y-1.5">
|
|
<label class="block text-xs font-bold text-slate-700">Hero Subtitel / Introductietekst</label>
|
|
<textarea
|
|
name="hero_subtitle"
|
|
rows="3"
|
|
class="w-full bg-slate-50 border border-slate-200 rounded-xl px-3.5 py-2.5 text-xs text-slate-900 focus:outline-none focus:ring-2 focus:ring-amber-400 focus:bg-white transition 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!') }}</textarea>
|
|
</div>
|
|
|
|
<!-- Knoppen in de hero -->
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 pt-2 border-t border-slate-100">
|
|
<div class="space-y-2 p-4 rounded-xl bg-slate-50 border border-slate-200/80">
|
|
<span class="text-xs font-bold text-amber-700 block">Primaire Actieknop (Gele knop)</span>
|
|
<div class="space-y-1.5">
|
|
<label class="text-[11px] text-slate-500 font-bold block">Knoptekst</label>
|
|
<input type="text" name="hero_primary_btn_text" value="{{ setting('hero_primary_btn_text', 'Bekijk de Collectie') }}" class="w-full bg-white border border-slate-200 rounded-xl px-3 py-2 text-xs text-slate-900">
|
|
</div>
|
|
<div class="space-y-1.5">
|
|
<label class="text-[11px] text-slate-500 font-bold block">Link URL</label>
|
|
<input type="text" name="hero_primary_btn_url" value="{{ setting('hero_primary_btn_url', '/catalogus') }}" class="w-full bg-white border border-slate-200 rounded-xl px-3 py-2 text-xs text-slate-900">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="space-y-2 p-4 rounded-xl bg-slate-50 border border-slate-200/80">
|
|
<span class="text-xs font-bold text-violet-700 block">Secundaire Actieknop (Lila knop)</span>
|
|
<div class="space-y-1.5">
|
|
<label class="text-[11px] text-slate-500 font-bold block">Knoptekst</label>
|
|
<input type="text" name="hero_secondary_btn_text" value="{{ setting('hero_secondary_btn_text', 'Fidget Toys & Slugs') }}" class="w-full bg-white border border-slate-200 rounded-xl px-3 py-2 text-xs text-slate-900">
|
|
</div>
|
|
<div class="space-y-1.5">
|
|
<label class="text-[11px] text-slate-500 font-bold block">Link URL</label>
|
|
<input type="text" name="hero_secondary_btn_url" value="{{ setting('hero_secondary_btn_url', '/catalogus?category=fidget-toys') }}" class="w-full bg-white border border-slate-200 rounded-xl px-3 py-2 text-xs text-slate-900">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 3 Statistieken / Kwaliteitsbadges -->
|
|
<div class="pt-4 border-t border-slate-100">
|
|
<span class="text-xs font-bold text-slate-800 block mb-3">3 Kwaliteitskenmerken onder de knoppen</span>
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-3">
|
|
<div class="p-3 bg-slate-50 border border-slate-200/80 rounded-xl space-y-1.5">
|
|
<label class="text-[10px] uppercase font-bold text-slate-500 block">Stat 1 Waarde & Label</label>
|
|
<input type="text" name="hero_stat_1_val" value="{{ setting('hero_stat_1_val', '0.12 mm') }}" class="w-full bg-white border border-slate-200 rounded-lg px-2.5 py-1.5 text-xs text-slate-900 font-bold">
|
|
<input type="text" name="hero_stat_1_lbl" value="{{ setting('hero_stat_1_lbl', 'Minimale laaghoogte') }}" class="w-full bg-white border border-slate-200 rounded-lg px-2.5 py-1 text-xs text-slate-500">
|
|
</div>
|
|
|
|
<div class="p-3 bg-slate-50 border border-slate-200/80 rounded-xl space-y-1.5">
|
|
<label class="text-[10px] uppercase font-bold text-slate-500 block">Stat 2 Waarde & Label</label>
|
|
<input type="text" name="hero_stat_2_val" value="{{ setting('hero_stat_2_val', 'Bambu Lab') }}" class="w-full bg-white border border-slate-200 rounded-lg px-2.5 py-1.5 text-xs text-slate-900 font-bold">
|
|
<input type="text" name="hero_stat_2_lbl" value="{{ setting('hero_stat_2_lbl', 'X1-Carbon Precisie') }}" class="w-full bg-white border border-slate-200 rounded-lg px-2.5 py-1 text-xs text-slate-500">
|
|
</div>
|
|
|
|
<div class="p-3 bg-slate-50 border border-slate-200/80 rounded-xl space-y-1.5">
|
|
<label class="text-[10px] uppercase font-bold text-slate-500 block">Stat 3 Waarde & Label</label>
|
|
<input type="text" name="hero_stat_3_val" value="{{ setting('hero_stat_3_val', '2-3 Dagen') }}" class="w-full bg-white border border-slate-200 rounded-lg px-2.5 py-1.5 text-xs text-slate-900 font-bold">
|
|
<input type="text" name="hero_stat_3_lbl" value="{{ setting('hero_stat_3_lbl', 'Verzending via PostNL') }}" class="w-full bg-white border border-slate-200 rounded-lg px-2.5 py-1 text-xs text-slate-500">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ==================================================== -->
|
|
<!-- TAB 2: WAAROM JOUWDRIEDEE (USP'S) -->
|
|
<!-- ==================================================== -->
|
|
<div x-show="activeTab === 'usp'" class="space-y-6">
|
|
<div class="p-6 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 font-black text-lg text-slate-900">Waarom Jouwdriedee? (Voordelen & USP's)</h3>
|
|
<p class="text-xs text-slate-500">De 4 kleurrijke informatieblokken onderaan de homepage.</p>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div class="space-y-1.5">
|
|
<label class="block text-xs font-bold text-slate-700">Sectie Tag / Label</label>
|
|
<input type="text" name="usp_tag" value="{{ setting('usp_tag', 'Waarom Jouwdriedee.nl?') }}" class="w-full bg-slate-50 border border-slate-200 rounded-xl px-3.5 py-2 text-xs text-slate-900">
|
|
</div>
|
|
<div class="space-y-1.5">
|
|
<label class="block text-xs font-bold text-slate-700">Sectie Hoofdtitel</label>
|
|
<input type="text" name="usp_title" value="{{ setting('usp_title', 'Kwaliteit en passie in elke printlaag') }}" class="w-full bg-slate-50 border border-slate-200 rounded-xl px-3.5 py-2 text-xs text-slate-900 font-bold">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="space-y-1.5">
|
|
<label class="block text-xs font-bold text-slate-700">Sectie Subtitel</label>
|
|
<textarea name="usp_subtitle" rows="2" class="w-full bg-slate-50 border border-slate-200 rounded-xl px-3.5 py-2 text-xs text-slate-900 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.') }}</textarea>
|
|
</div>
|
|
|
|
<!-- 4 USP Cards -->
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 pt-2 border-t border-slate-100">
|
|
<!-- Kaart 1 -->
|
|
<div class="p-4 rounded-xl bg-violet-50/50 border border-violet-200/60 space-y-2">
|
|
<span class="text-xs font-bold text-violet-800 block">Voordeel 1 (Paars blok)</span>
|
|
<input type="text" name="usp_1_title" value="{{ setting('usp_1_title', 'Bambu Lab Precisie') }}" class="w-full bg-white border border-violet-200 rounded-xl px-3 py-1.5 text-xs text-slate-900 font-bold">
|
|
<textarea name="usp_1_desc" rows="2" class="w-full bg-white border border-violet-200 rounded-xl px-3 py-1.5 text-xs text-slate-600">{{ setting('usp_1_desc', 'Haarscherpe lagen vanaf 0.12mm. Vaste toleranties waardoor scharnieren moeiteloos bewegen.') }}</textarea>
|
|
</div>
|
|
|
|
<!-- Kaart 2 -->
|
|
<div class="p-4 rounded-xl bg-amber-50/50 border border-amber-200/60 space-y-2">
|
|
<span class="text-xs font-bold text-amber-800 block">Voordeel 2 (Geel blok)</span>
|
|
<input type="text" name="usp_2_title" value="{{ setting('usp_2_title', '16+ Kleurvariaties') }}" class="w-full bg-white border border-amber-200 rounded-xl px-3 py-1.5 text-xs text-slate-900 font-bold">
|
|
<textarea name="usp_2_desc" rows="2" class="w-full bg-white border border-amber-200 rounded-xl px-3 py-1.5 text-xs text-slate-600">{{ setting('usp_2_desc', 'Van glanzend Silk Goud en Galaxy Zwart tot mat pastel en glow-in-the-dark filament.') }}</textarea>
|
|
</div>
|
|
|
|
<!-- Kaart 3 -->
|
|
<div class="p-4 rounded-xl bg-emerald-50/50 border border-emerald-200/60 space-y-2">
|
|
<span class="text-xs font-bold text-emerald-800 block">Voordeel 3 (Groen blok)</span>
|
|
<input type="text" name="usp_3_title" value="{{ setting('usp_3_title', 'Veilig & Duurzaam PLA+') }}" class="w-full bg-white border border-emerald-200 rounded-xl px-3 py-1.5 text-xs text-slate-900 font-bold">
|
|
<textarea name="usp_3_desc" rows="2" class="w-full bg-white border border-emerald-200 rounded-xl px-3 py-1.5 text-xs text-slate-600">{{ setting('usp_3_desc', 'Gemaakt van hernieuwbare plantaardige zetmelen. Geurloos, gifvrij en stevig in gebruik.') }}</textarea>
|
|
</div>
|
|
|
|
<!-- Kaart 4 -->
|
|
<div class="p-4 rounded-xl bg-sky-50/50 border border-sky-200/60 space-y-2">
|
|
<span class="text-xs font-bold text-sky-800 block">Voordeel 4 (Blauw blok)</span>
|
|
<input type="text" name="usp_4_title" value="{{ setting('usp_4_title', 'Snelle Verzending') }}" class="w-full bg-white border border-sky-200 rounded-xl px-3 py-1.5 text-xs text-slate-900 font-bold">
|
|
<textarea name="usp_4_desc" rows="2" class="w-full bg-white border border-sky-200 rounded-xl px-3 py-1.5 text-xs text-slate-600">{{ setting('usp_4_desc', 'Met zorg verpakt in beschermend materiaal. Binnen 2-3 werkdagen verzonden via PostNL.') }}</textarea>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="space-y-1.5 pt-2">
|
|
<label class="block text-xs font-bold text-slate-700">Knop onder de voordelen</label>
|
|
<input type="text" name="usp_btn_text" value="{{ setting('usp_btn_text', 'Bekijk alle 3D prints in de winkel') }}" class="w-full bg-slate-50 border border-slate-200 rounded-xl px-3.5 py-2 text-xs text-slate-900">
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ==================================================== -->
|
|
<!-- TAB 3: CATEGORIEËN & BESTSELLERS SECTIES -->
|
|
<!-- ==================================================== -->
|
|
<div x-show="activeTab === 'sections'" class="space-y-6">
|
|
<div class="p-6 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 font-black text-lg text-slate-900">Categorieën & Collecties Sectie</h3>
|
|
<p class="text-xs text-slate-500">Titels van het blok met Fidget Toys, Pokémon en Film & Gaming.</p>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div class="space-y-1.5">
|
|
<label class="block text-xs font-bold text-slate-700">Categorieën Tag</label>
|
|
<input type="text" name="categories_tag" value="{{ setting('categories_tag', 'Collecties') }}" class="w-full bg-slate-50 border border-slate-200 rounded-xl px-3.5 py-2 text-xs text-slate-900">
|
|
</div>
|
|
<div class="space-y-1.5">
|
|
<label class="block text-xs font-bold text-slate-700">Categorieën Hoofdtitel</label>
|
|
<input type="text" name="categories_title" value="{{ setting('categories_title', 'Ontdek per categorie') }}" class="w-full bg-slate-50 border border-slate-200 rounded-xl px-3.5 py-2 text-xs text-slate-900 font-bold">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="space-y-1.5">
|
|
<label class="block text-xs font-bold text-slate-700">Categorieën Omschrijving</label>
|
|
<input type="text" name="categories_subtitle" value="{{ setting('categories_subtitle', 'Selecteer een categorie voor alle beschikbare modellen, formaten en kleurstalen.') }}" class="w-full bg-slate-50 border border-slate-200 rounded-xl px-3.5 py-2 text-xs text-slate-900">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="p-6 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 font-black text-lg text-slate-900">Populaire Modellen (Uitgelichte Prints)</h3>
|
|
<p class="text-xs text-slate-500">Titels van de product-showcase op de homepage.</p>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div class="space-y-1.5">
|
|
<label class="block text-xs font-bold text-slate-700">Showcase Tag</label>
|
|
<input type="text" name="featured_tag" value="{{ setting('featured_tag', 'Selectie') }}" class="w-full bg-slate-50 border border-slate-200 rounded-xl px-3.5 py-2 text-xs text-slate-900">
|
|
</div>
|
|
<div class="space-y-1.5">
|
|
<label class="block text-xs font-bold text-slate-700">Showcase Hoofdtitel</label>
|
|
<input type="text" name="featured_title" value="{{ setting('featured_title', 'Populaire modellen') }}" class="w-full bg-slate-50 border border-slate-200 rounded-xl px-3.5 py-2 text-xs text-slate-900 font-bold">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="space-y-1.5">
|
|
<label class="block text-xs font-bold text-slate-700">Showcase Omschrijving</label>
|
|
<input type="text" name="featured_subtitle" value="{{ setting('featured_subtitle', 'Elk item wordt op bestelling geprint in jouw gewenste kleur en met de hand nagekeken.') }}" class="w-full bg-slate-50 border border-slate-200 rounded-xl px-3.5 py-2 text-xs text-slate-900">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ==================================================== -->
|
|
<!-- TAB 4: 3D PRINT KOSTPRIJSCALCULATOR TARIEVEN -->
|
|
<!-- ==================================================== -->
|
|
<div x-show="activeTab === 'calculator'" class="space-y-6">
|
|
<div class="p-6 rounded-2xl bg-white border border-slate-200/80 shadow-xs space-y-5">
|
|
<div class="border-b border-slate-100 pb-3">
|
|
<div class="inline-flex items-center space-x-1.5 text-xs text-amber-700 font-bold uppercase tracking-wider mb-1">
|
|
<i data-lucide="calculator" class="w-4 h-4"></i>
|
|
<span>3D Printing Cost Calculator Standaarden</span>
|
|
</div>
|
|
<h3 class="font-heading font-black text-lg text-slate-900">3D Print Kostprijs Tarieven & Formules</h3>
|
|
<p class="text-xs text-slate-500">
|
|
Deze standaardtarieven worden gebruikt bij het automatisch berekenen van de adviesprijzen voor binnengehaalde MakerWorld modellen en in de interactieve calculator bij het bewerken van een artikel. Gebaseerd op het model van <em>3dprintingcostcalculator.com/nl</em>.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
|
<!-- Filament per KG -->
|
|
<div class="p-4 rounded-xl bg-slate-50 border border-slate-200/80 space-y-1.5">
|
|
<label class="block text-xs font-bold text-slate-700">Filament Prijs per KG (€)</label>
|
|
<div class="relative">
|
|
<span class="absolute left-3 top-1/2 -translate-y-1/2 text-xs text-slate-400 font-bold">€</span>
|
|
<input
|
|
type="number"
|
|
step="0.01"
|
|
name="calc_filament_price_kg"
|
|
value="{{ setting('calc_filament_price_kg', '20.00') }}"
|
|
class="w-full bg-white border border-slate-200 rounded-xl pl-7 pr-3 py-2 text-xs text-slate-900 font-bold focus:ring-2 focus:ring-amber-400"
|
|
>
|
|
</div>
|
|
<p class="text-[10px] text-slate-400">Gemiddelde inkoop per kg Bambu/eSun PLA+ spool.</p>
|
|
</div>
|
|
|
|
<!-- Stroomtarief per kWh -->
|
|
<div class="p-4 rounded-xl bg-slate-50 border border-slate-200/80 space-y-1.5">
|
|
<label class="block text-xs font-bold text-slate-700">Stroomtarief per kWh (€)</label>
|
|
<div class="relative">
|
|
<span class="absolute left-3 top-1/2 -translate-y-1/2 text-xs text-slate-400 font-bold">€</span>
|
|
<input
|
|
type="number"
|
|
step="0.01"
|
|
name="calc_electricity_kwh"
|
|
value="{{ setting('calc_electricity_kwh', '0.35') }}"
|
|
class="w-full bg-white border border-slate-200 rounded-xl pl-7 pr-3 py-2 text-xs text-slate-900 font-bold focus:ring-2 focus:ring-amber-400"
|
|
>
|
|
</div>
|
|
<p class="text-[10px] text-slate-400">Energietarief inclusief belasting en netbeheer.</p>
|
|
</div>
|
|
|
|
<!-- Printer Wattage -->
|
|
<div class="p-4 rounded-xl bg-slate-50 border border-slate-200/80 space-y-1.5">
|
|
<label class="block text-xs font-bold text-slate-700">Printer Verbruik (Watt)</label>
|
|
<div class="relative">
|
|
<input
|
|
type="number"
|
|
step="1"
|
|
name="calc_printer_wattage"
|
|
value="{{ setting('calc_printer_wattage', '150') }}"
|
|
class="w-full bg-white border border-slate-200 rounded-xl px-3 py-2 text-xs text-slate-900 font-bold focus:ring-2 focus:ring-amber-400"
|
|
>
|
|
<span class="absolute right-3 top-1/2 -translate-y-1/2 text-xs text-slate-400 font-bold">W</span>
|
|
</div>
|
|
<p class="text-[10px] text-slate-400">Gemiddeld verbruik Bambu Lab (120 - 180W).</p>
|
|
</div>
|
|
|
|
<!-- Machine afschrijving per uur -->
|
|
<div class="p-4 rounded-xl bg-slate-50 border border-slate-200/80 space-y-1.5">
|
|
<label class="block text-xs font-bold text-slate-700">Machineafschrijving / uur (€)</label>
|
|
<div class="relative">
|
|
<span class="absolute left-3 top-1/2 -translate-y-1/2 text-xs text-slate-400 font-bold">€</span>
|
|
<input
|
|
type="number"
|
|
step="0.01"
|
|
name="calc_machine_hourly_rate"
|
|
value="{{ setting('calc_machine_hourly_rate', '0.50') }}"
|
|
class="w-full bg-white border border-slate-200 rounded-xl pl-7 pr-3 py-2 text-xs text-slate-900 font-bold focus:ring-2 focus:ring-amber-400"
|
|
>
|
|
</div>
|
|
<p class="text-[10px] text-slate-400">Voor nozzle-slijtage, riemen, lagers en onderhoud.</p>
|
|
</div>
|
|
|
|
<!-- Handling / Nabewerking per print -->
|
|
<div class="p-4 rounded-xl bg-slate-50 border border-slate-200/80 space-y-1.5">
|
|
<label class="block text-xs font-bold text-slate-700">Vaste Handling & Inpakken (€)</label>
|
|
<div class="relative">
|
|
<span class="absolute left-3 top-1/2 -translate-y-1/2 text-xs text-slate-400 font-bold">€</span>
|
|
<input
|
|
type="number"
|
|
step="0.01"
|
|
name="calc_handling_flat"
|
|
value="{{ setting('calc_handling_flat', '1.50') }}"
|
|
class="w-full bg-white border border-slate-200 rounded-xl pl-7 pr-3 py-2 text-xs text-slate-900 font-bold focus:ring-2 focus:ring-amber-400"
|
|
>
|
|
</div>
|
|
<p class="text-[10px] text-slate-400">Bedprep, supports verwijderen en inpakdoos.</p>
|
|
</div>
|
|
|
|
<!-- Standaard Winstmarge % -->
|
|
<div class="p-4 rounded-xl bg-slate-50 border border-slate-200/80 space-y-1.5">
|
|
<label class="block text-xs font-bold text-slate-700">Standaard Winstmarge (%)</label>
|
|
<div class="relative">
|
|
<input
|
|
type="number"
|
|
step="1"
|
|
name="calc_default_markup"
|
|
value="{{ setting('calc_default_markup', '40') }}"
|
|
class="w-full bg-white border border-slate-200 rounded-xl px-3 py-2 text-xs text-slate-900 font-bold focus:ring-2 focus:ring-amber-400"
|
|
>
|
|
<span class="absolute right-3 top-1/2 -translate-y-1/2 text-xs text-slate-400 font-bold">%</span>
|
|
</div>
|
|
<p class="text-[10px] text-slate-400">Winstmarge bovenop de totale productiekosten.</p>
|
|
</div>
|
|
|
|
<!-- Faal-risico buffer % -->
|
|
<div class="p-4 rounded-xl bg-slate-50 border border-slate-200/80 space-y-1.5">
|
|
<label class="block text-xs font-bold text-slate-700">Faal-risico buffer (%)</label>
|
|
<div class="relative">
|
|
<input
|
|
type="number"
|
|
step="1"
|
|
name="calc_failure_rate"
|
|
value="{{ setting('calc_failure_rate', '5') }}"
|
|
class="w-full bg-white border border-slate-200 rounded-xl px-3 py-2 text-xs text-slate-900 font-bold focus:ring-2 focus:ring-amber-400"
|
|
>
|
|
<span class="absolute right-3 top-1/2 -translate-y-1/2 text-xs text-slate-400 font-bold">%</span>
|
|
</div>
|
|
<p class="text-[10px] text-slate-400">Opslag voor mislukte prints of warping risico.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Info Banner Multi-color AMS & Afronding -->
|
|
<div class="p-4 rounded-xl bg-amber-50/70 border border-amber-200/80 text-amber-900 text-xs space-y-1.5">
|
|
<div class="font-bold flex items-center space-x-1.5 text-amber-800">
|
|
<i data-lucide="info" class="w-4 h-4 text-amber-600"></i>
|
|
<span>Automatische Meerkleurige & Commerciële Afronding</span>
|
|
</div>
|
|
<p class="text-amber-800/90 leading-relaxed text-[11px]">
|
|
Het systeem berekent bij meerkleurige prints (Bambu Lab AMS) automatisch de spoeltoren- en purge-afvalfactor (+15% bij 2 kleuren, +25% bij 3 kleuren, +35% bij 4 kleuren). Alle adviesprijzen worden commercieel afgerond op psychologische webshopprijzen (bijv. <strong>€ 12,95</strong> of <strong>€ 24,50</strong>) inclusief 21% btw.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ==================================================== -->
|
|
<!-- TAB 5: BOVENBALK (ANNOUNCEMENT BAR) -->
|
|
<!-- ==================================================== -->
|
|
<div x-show="activeTab === 'announcement'" class="space-y-6">
|
|
<div class="p-6 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 font-black text-lg text-slate-900">Bovenbalk (Top Announcement Bar)</h3>
|
|
<p class="text-xs text-slate-500">De dunne balk helemaal bovenaan de website voor mededelingen en levertijd.</p>
|
|
</div>
|
|
|
|
<div class="flex items-center space-x-3 p-3.5 rounded-xl bg-slate-50 border border-slate-200/80">
|
|
<input
|
|
type="checkbox"
|
|
name="announcement_enabled"
|
|
id="announcement_enabled"
|
|
value="1"
|
|
{{ setting('announcement_enabled', '1') == '1' ? 'checked' : '' }}
|
|
class="w-4 h-4 rounded text-amber-500 focus:ring-amber-400 border-slate-300"
|
|
>
|
|
<label for="announcement_enabled" class="text-xs font-bold text-slate-800 cursor-pointer">
|
|
Bovenbalk tonen op de website
|
|
</label>
|
|
</div>
|
|
|
|
<div class="space-y-1.5">
|
|
<label class="block text-xs font-bold text-slate-700">Hoofdmededeling (Links op desktop, gecentreerd op mobiel)</label>
|
|
<input
|
|
type="text"
|
|
name="announcement_text"
|
|
value="{{ setting('announcement_text', 'Nederlandse 3D Printstudio • Haarscherpe afwerking op Bambu Lab printers') }}"
|
|
class="w-full bg-slate-50 border border-slate-200 rounded-xl px-3.5 py-2.5 text-xs text-slate-900"
|
|
>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div class="space-y-1.5">
|
|
<label class="block text-xs font-bold text-slate-700">Badge 1 (Bijv. Gratis verzending)</label>
|
|
<input
|
|
type="text"
|
|
name="announcement_badge_1"
|
|
value="{{ setting('announcement_badge_1', 'Gratis verzending vanaf € 50,-') }}"
|
|
class="w-full bg-slate-50 border border-slate-200 rounded-xl px-3.5 py-2 text-xs text-slate-900"
|
|
>
|
|
</div>
|
|
|
|
<div class="space-y-1.5">
|
|
<label class="block text-xs font-bold text-slate-700">Badge 2 (Bijv. Levertijd)</label>
|
|
<input
|
|
type="text"
|
|
name="announcement_badge_2"
|
|
value="{{ setting('announcement_badge_2', 'Verzending binnen 2-3 werkdagen') }}"
|
|
class="w-full bg-slate-50 border border-slate-200 rounded-xl px-3.5 py-2 text-xs text-slate-900"
|
|
>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ==================================================== -->
|
|
<!-- TAB 6: FOOTER & CONTACT -->
|
|
<!-- ==================================================== -->
|
|
<div x-show="activeTab === 'footer'" class="space-y-6">
|
|
<div class="p-6 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 font-black text-lg text-slate-900">Voettekst (Footer Informatie & Contact)</h3>
|
|
<p class="text-xs text-slate-500">Teksten in de footer onderaan alle pagina's.</p>
|
|
</div>
|
|
|
|
<div class="space-y-1.5">
|
|
<label class="block text-xs font-bold text-slate-700">Korte Bedrijfsomschrijving</label>
|
|
<textarea
|
|
name="footer_description"
|
|
rows="3"
|
|
class="w-full bg-slate-50 border border-slate-200 rounded-xl px-3.5 py-2.5 text-xs text-slate-900 leading-relaxed"
|
|
>{{ 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.') }}</textarea>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div class="space-y-1.5">
|
|
<label class="block text-xs font-bold text-slate-700">Printer Status Badge</label>
|
|
<input
|
|
type="text"
|
|
name="footer_status_text"
|
|
value="{{ setting('footer_status_text', 'Printers gekalibreerd & actief') }}"
|
|
class="w-full bg-slate-50 border border-slate-200 rounded-xl px-3.5 py-2 text-xs text-slate-900"
|
|
>
|
|
</div>
|
|
|
|
<div class="space-y-1.5">
|
|
<label class="block text-xs font-bold text-slate-700">Contact E-mailadres</label>
|
|
<input
|
|
type="email"
|
|
name="footer_email"
|
|
value="{{ setting('footer_email', 'info@jouwdriedee.nl') }}"
|
|
class="w-full bg-slate-50 border border-slate-200 rounded-xl px-3.5 py-2 text-xs text-slate-900"
|
|
>
|
|
</div>
|
|
|
|
<div class="space-y-1.5">
|
|
<label class="block text-xs font-bold text-slate-700">Verzendmethode Tekst</label>
|
|
<input
|
|
type="text"
|
|
name="footer_shipping_text"
|
|
value="{{ setting('footer_shipping_text', 'Snelle verzending via PostNL') }}"
|
|
class="w-full bg-slate-50 border border-slate-200 rounded-xl px-3.5 py-2 text-xs text-slate-900"
|
|
>
|
|
</div>
|
|
|
|
<div class="space-y-1.5">
|
|
<label class="block text-xs font-bold text-slate-700">Betaalmethoden & Betrouwbaarheid</label>
|
|
<input
|
|
type="text"
|
|
name="footer_payment_text"
|
|
value="{{ setting('footer_payment_text', 'iDEAL & Bancontact • PostNL Track & Trace') }}"
|
|
class="w-full bg-slate-50 border border-slate-200 rounded-xl px-3.5 py-2 text-xs text-slate-900"
|
|
>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="space-y-1.5">
|
|
<label class="block text-xs font-bold text-slate-700">Copyright Tekst (onderste regel)</label>
|
|
<input
|
|
type="text"
|
|
name="footer_copyright"
|
|
value="{{ setting('footer_copyright', 'Alle 3D prints worden op bestelling vervaardigd.') }}"
|
|
class="w-full bg-slate-50 border border-slate-200 rounded-xl px-3.5 py-2 text-xs text-slate-900"
|
|
>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ==================================================== -->
|
|
<!-- TAB 7: BRAND & THEMA -->
|
|
<!-- ==================================================== -->
|
|
<div x-show="activeTab === 'brand'" class="space-y-6">
|
|
<div class="p-6 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 font-black text-lg text-slate-900">Algemeen & Branding</h3>
|
|
<p class="text-xs text-slate-500">Shopnaam, zoekmachine omschrijving en algemene instellingen.</p>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div class="space-y-1.5">
|
|
<label class="block text-xs font-bold text-slate-700">Webshop Naam</label>
|
|
<input
|
|
type="text"
|
|
name="site_name"
|
|
value="{{ setting('site_name', 'Jouwdriedee.nl') }}"
|
|
class="w-full bg-slate-50 border border-slate-200 rounded-xl px-3.5 py-2.5 text-xs text-slate-900"
|
|
>
|
|
</div>
|
|
|
|
<div class="space-y-1.5">
|
|
<label class="block text-xs font-bold text-slate-700">Shop Slogan / Ondertitel</label>
|
|
<input
|
|
type="text"
|
|
name="site_tagline"
|
|
value="{{ setting('site_tagline', '3D Prints, Fidgets & Collectibles') }}"
|
|
class="w-full bg-slate-50 border border-slate-200 rounded-xl px-3.5 py-2.5 text-xs text-slate-900"
|
|
>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="space-y-1.5">
|
|
<label class="block text-xs font-bold text-slate-700">SEO Meta Omschrijving</label>
|
|
<textarea
|
|
name="meta_description"
|
|
rows="2"
|
|
class="w-full bg-slate-50 border border-slate-200 rounded-xl px-3.5 py-2 text-xs text-slate-900 leading-relaxed"
|
|
>{{ 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!') }}</textarea>
|
|
</div>
|
|
|
|
<div class="space-y-1.5 pt-2 border-t border-slate-100">
|
|
<label class="block text-xs font-bold text-slate-700">Thema Kleurenpalet</label>
|
|
@php $currentTheme = setting('theme_palette', 'default'); @endphp
|
|
<select name="theme_palette" class="w-full bg-slate-50 border border-slate-200 rounded-xl px-3.5 py-2.5 text-xs text-slate-900 font-bold">
|
|
<option value="default" {{ $currentTheme === 'default' ? 'selected' : '' }}>Speels Warm (Zacht Amber, Koraal & Luchtig Blauw) [Aanbevolen]</option>
|
|
<option value="violet" {{ $currentTheme === 'violet' ? 'selected' : '' }}>Neon Lila & Cyaan (Fris en modern)</option>
|
|
<option value="emerald" {{ $currentTheme === 'emerald' ? 'selected' : '' }}>Eco Mint & Goud (Natuurlijk & Rustig)</option>
|
|
</select>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ==================================================== -->
|
|
<!-- TAB 8: E-MAIL & SMTP DIAGNOSTIEK -->
|
|
<!-- ==================================================== -->
|
|
<div x-show="activeTab === 'email'" class="space-y-6">
|
|
<div class="p-6 rounded-2xl bg-white border border-slate-200/80 shadow-xs space-y-6">
|
|
<div class="border-b border-slate-100 pb-3 flex items-center justify-between">
|
|
<div>
|
|
<h3 class="font-heading font-black text-lg text-slate-900 flex items-center space-x-2">
|
|
<i data-lucide="mail-check" class="w-5 h-5 text-amber-600"></i>
|
|
<span>E-mail & SMTP Status</span>
|
|
</h3>
|
|
<p class="text-xs text-slate-500">Controleer waarom wachtwoordherstel- en registratiemails wel of niet aankomen op Gmail.</p>
|
|
</div>
|
|
@php
|
|
$activeMailer = config('mail.default');
|
|
@endphp
|
|
<span class="px-3 py-1 rounded-full text-xs font-black uppercase tracking-wider {{ $activeMailer === 'log' ? 'bg-amber-100 text-amber-800 border border-amber-300' : 'bg-emerald-100 text-emerald-800 border border-emerald-300' }}">
|
|
Driver: {{ strtoupper($activeMailer) }}
|
|
</span>
|
|
</div>
|
|
|
|
@if($activeMailer === 'log')
|
|
<div class="p-4 rounded-xl bg-amber-50 border border-amber-200 text-amber-900 text-xs space-y-2">
|
|
<div class="font-black text-sm flex items-center space-x-2 text-amber-900">
|
|
<i data-lucide="alert-triangle" class="w-5 h-5 shrink-0 text-amber-600"></i>
|
|
<span>Belangrijke Oorzaak: MAIL_MAILER staat op 'log'</span>
|
|
</div>
|
|
<p>
|
|
Momenteel worden uitgaande e-mails (zoals wachtwoord vergeten en welkomstmails) weggeschreven naar de serverlogbestanden en <strong>niet via internet naar Gmail verzonden</strong>.
|
|
</p>
|
|
<p>
|
|
Om echte e-mails te versturen, moet op de server (Coolify Environment Variables) <code class="bg-white border border-amber-200 px-1.5 py-0.5 rounded text-amber-900 font-mono font-bold">MAIL_MAILER=smtp</code> ingesteld worden met de bijbehorende SMTP-host, poort en wachtwoord.
|
|
</p>
|
|
</div>
|
|
@endif
|
|
|
|
<!-- Server SMTP Overview Table -->
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-xs">
|
|
<div class="p-4 rounded-xl bg-slate-50 border border-slate-200/80 space-y-2">
|
|
<div class="font-bold text-slate-500 uppercase tracking-wider text-[10px]">Huidige Server Mail Instellingen</div>
|
|
<div class="flex justify-between py-1 border-b border-slate-200/60">
|
|
<span class="text-slate-500">MAIL_MAILER:</span>
|
|
<span class="font-mono text-slate-900 font-bold">{{ config('mail.default') }}</span>
|
|
</div>
|
|
<div class="flex justify-between py-1 border-b border-slate-200/60">
|
|
<span class="text-slate-500">MAIL_HOST:</span>
|
|
<span class="font-mono text-slate-900 font-bold">{{ config('mail.mailers.smtp.host') ?: '(geen)' }}</span>
|
|
</div>
|
|
<div class="flex justify-between py-1 border-b border-slate-200/60">
|
|
<span class="text-slate-500">MAIL_PORT:</span>
|
|
<span class="font-mono text-slate-900 font-bold">{{ config('mail.mailers.smtp.port') ?: '(geen)' }}</span>
|
|
</div>
|
|
<div class="flex justify-between py-1 border-b border-slate-200/60">
|
|
<span class="text-slate-500">MAIL_USERNAME:</span>
|
|
<span class="font-mono text-slate-900 font-bold">{{ config('mail.mailers.smtp.username') ?: '(geen)' }}</span>
|
|
</div>
|
|
<div class="flex justify-between py-1 border-b border-slate-200/60">
|
|
<span class="text-slate-500">MAIL_FROM_ADDRESS:</span>
|
|
<span class="font-mono text-amber-700 font-bold">{{ config('mail.from.address') }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="p-4 rounded-xl bg-slate-50 border border-slate-200/80 space-y-2">
|
|
<div class="font-bold text-slate-500 uppercase tracking-wider text-[10px]">Gmail Bezorging Checklist</div>
|
|
<ul class="space-y-1.5 text-slate-600">
|
|
<li class="flex items-start space-x-2">
|
|
<span class="text-amber-600 font-bold shrink-0">1.</span>
|
|
<span><strong>SMTP Provider:</strong> Gebruik een werkende SMTP server (bijv. Brevo, Resend, Mailgun of Versio mail).</span>
|
|
</li>
|
|
<li class="flex items-start space-x-2">
|
|
<span class="text-amber-600 font-bold shrink-0">2.</span>
|
|
<span><strong>SPF DNS Record:</strong> Google vereist een SPF TXT-record op <code class="font-mono text-amber-800">jouwdriedee.nl</code>.</span>
|
|
</li>
|
|
<li class="flex items-start space-x-2">
|
|
<span class="text-amber-600 font-bold shrink-0">3.</span>
|
|
<span><strong>DKIM & DMARC:</strong> Zonder DKIM plaatst Gmail emails van nieuwe domeinen direct in de Spammap.</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Test Email Form -->
|
|
<div class="p-4 rounded-xl bg-slate-50 border border-slate-200/80 space-y-3">
|
|
<div class="font-bold text-slate-900 text-xs flex items-center space-x-2">
|
|
<i data-lucide="send" class="w-4 h-4 text-amber-600"></i>
|
|
<span>Direct een Test E-mail Versturen</span>
|
|
</div>
|
|
<p class="text-xs text-slate-500">
|
|
Vul hier een e-mailadres in (bijv. je eigen Gmail) om direct te testen of e-mails aankomen en of de verbinding met de mailserver slaagt.
|
|
</p>
|
|
<div class="flex flex-col sm:flex-row gap-2.5 pt-1">
|
|
<input
|
|
type="email"
|
|
name="test_email"
|
|
value="{{ auth()->user()->email ?? 'info@jouwdriedee.nl' }}"
|
|
placeholder="jouw-email@gmail.com"
|
|
class="flex-1 bg-white border border-slate-200 rounded-xl px-3.5 py-2.5 text-xs text-slate-900 font-mono placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-amber-400"
|
|
>
|
|
<button
|
|
type="submit"
|
|
formaction="{{ route('admin.content.test-mail') }}"
|
|
formmethod="POST"
|
|
class="px-5 py-2.5 rounded-xl bg-amber-400 hover:bg-amber-300 text-slate-950 font-black text-xs uppercase tracking-wider transition flex items-center justify-center space-x-2 shrink-0 cursor-pointer shadow-sm"
|
|
>
|
|
<i data-lucide="send" class="w-4 h-4"></i>
|
|
<span>Verstuur Testmail</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ==================================================== -->
|
|
<!-- TAB 9: WEBSHOP OFFLINE MODUS (ONDERHOUDSMODUS) -->
|
|
<!-- ==================================================== -->
|
|
<div x-show="activeTab === 'offline'" class="space-y-6">
|
|
<div class="p-6 rounded-2xl bg-white border border-slate-200/80 shadow-xs space-y-6">
|
|
|
|
<div class="flex flex-col sm:flex-row sm:items-center justify-between pb-4 border-b border-slate-100 gap-3">
|
|
<div>
|
|
<div class="flex items-center space-x-2">
|
|
<span class="w-2.5 h-2.5 rounded-full {{ setting('shop_offline', '0') === '1' ? 'bg-rose-500 animate-ping' : 'bg-emerald-500' }}"></span>
|
|
<h3 class="font-heading font-black text-lg text-slate-900">Webshop Offline Modus (Onderhoud)</h3>
|
|
</div>
|
|
<p class="text-xs text-slate-500 mt-0.5">
|
|
Wanneer ingeschakeld, kunnen gewone bezoekers niets bestellen en zien zij direct de grote rode offline banner. Alleen ingelogde beheerders kunnen de website bekijken.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Directe 1-klik Toggle Knop -->
|
|
<button
|
|
type="submit"
|
|
formaction="{{ route('admin.toggle-offline') }}"
|
|
formmethod="POST"
|
|
class="px-5 py-2.5 rounded-xl {{ setting('shop_offline', '0') === '1' ? 'bg-emerald-600 hover:bg-emerald-500 text-white' : 'bg-rose-600 hover:bg-rose-500 text-white' }} font-black text-xs uppercase tracking-wider transition flex items-center justify-center space-x-2 shrink-0 cursor-pointer shadow-sm"
|
|
>
|
|
<i data-lucide="power" class="w-4 h-4"></i>
|
|
<span>{{ setting('shop_offline', '0') === '1' ? 'Zet Webshop Weer ONLINE' : 'Zet Webshop Nu DIRECT OFFLINE' }}</span>
|
|
</button>
|
|
</div>
|
|
|
|
<input type="hidden" name="shop_offline_submitted" value="1">
|
|
|
|
<!-- Toggle Switch -->
|
|
<div class="p-4 rounded-xl {{ setting('shop_offline', '0') === '1' ? 'bg-rose-50 border border-rose-200' : 'bg-slate-50 border border-slate-200/80' }} flex items-center justify-between">
|
|
<div>
|
|
<span class="text-xs font-bold text-slate-900 block">Status Webshop Bereikbaarheid</span>
|
|
<span class="text-[11px] text-slate-500">
|
|
{{ setting('shop_offline', '0') === '1' ? 'De webshop is momenteel OFFLINE voor gewone bezoekers.' : 'De webshop is momenteel LIVE en open voor bestellingen.' }}
|
|
</span>
|
|
</div>
|
|
|
|
<label class="relative inline-flex items-center cursor-pointer">
|
|
<input type="checkbox" name="shop_offline" value="1" {{ setting('shop_offline', '0') === '1' ? 'checked' : '' }} class="sr-only peer">
|
|
<div class="w-14 h-7 bg-slate-300 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[4px] after:bg-white after:border-slate-300 after:border after:rounded-full after:h-6 after:w-6 after:transition-all peer-checked:bg-rose-600"></div>
|
|
</label>
|
|
</div>
|
|
|
|
<!-- Teksten van de Rode Offline Banner -->
|
|
<div class="grid grid-cols-1 gap-4 pt-2">
|
|
<div class="space-y-1.5">
|
|
<label class="block text-xs font-bold text-slate-700">Titel op de Rode Offline Banner</label>
|
|
<input
|
|
type="text"
|
|
name="shop_offline_title"
|
|
value="{{ setting('shop_offline_title', 'Aan deze webshop wordt hard gewerkt! 🛠️') }}"
|
|
class="w-full bg-slate-50 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-rose-400 focus:bg-white"
|
|
>
|
|
<p class="text-[10px] text-slate-400">De grote rode hoofdtitel die bezoekers in beeld krijgen.</p>
|
|
</div>
|
|
|
|
<div class="space-y-1.5">
|
|
<label class="block text-xs font-bold text-slate-700">Toelichting / Onderhoudsbericht</label>
|
|
<textarea
|
|
name="shop_offline_message"
|
|
rows="3"
|
|
class="w-full bg-slate-50 border border-slate-200 rounded-xl px-3.5 py-2.5 text-xs text-slate-900 leading-relaxed focus:outline-none focus:ring-2 focus:ring-rose-400 focus:bg-white"
|
|
>{{ setting('shop_offline_message', 'Onze 3D printers worden momenteel opnieuw gekalibreerd en we bouwen aan nieuwe toffe prints en functies. We zijn heel snel weer online voor bestellingen!') }}</textarea>
|
|
<p class="text-[10px] text-slate-400">Uitleg over waarom de webshop tijdelijk offline staat en wanneer klanten terug kunnen komen.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Preview Box van de Offline Banner -->
|
|
<div class="pt-4 border-t border-slate-100 space-y-2">
|
|
<span class="text-xs font-bold uppercase tracking-wider text-slate-500 block">Voorvertoning van de Offline Banner:</span>
|
|
<div class="rounded-2xl bg-gradient-to-b from-rose-500 to-rose-600 text-white p-6 text-center space-y-3 shadow-md">
|
|
<span class="inline-block px-3 py-1 rounded-full bg-white/20 text-white font-bold text-[10px] uppercase tracking-wider backdrop-blur-xs">
|
|
🔴 Webshop Tijdelijk Offline
|
|
</span>
|
|
<h4 class="font-heading text-xl font-black text-white">
|
|
{{ setting('shop_offline_title', 'Aan deze webshop wordt hard gewerkt! 🛠️') }}
|
|
</h4>
|
|
<p class="text-xs text-rose-100 max-w-lg mx-auto">
|
|
{{ setting('shop_offline_message', '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>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Sticky Save Action Bar -->
|
|
<div class="sticky bottom-4 z-20 p-4 rounded-2xl bg-white/95 backdrop-blur-md border border-slate-200/80 shadow-lg flex items-center justify-between">
|
|
<div class="flex items-center space-x-2 text-xs text-slate-600 font-semibold">
|
|
<span class="w-2 h-2 rounded-full bg-emerald-500 animate-pulse"></span>
|
|
<span>Wijzigingen worden direct live opgeslagen in de database.</span>
|
|
</div>
|
|
<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 sm:text-sm transition flex items-center space-x-2 shadow-sm cursor-pointer"
|
|
>
|
|
<i data-lucide="save" class="w-4 h-4"></i>
|
|
<span>Opslaan & Direct Publiceren</span>
|
|
</button>
|
|
</div>
|
|
|
|
</form>
|
|
</div>
|
|
@endsection
|