848 lines
55 KiB
PHP
848 lines
55 KiB
PHP
@extends('layouts.admin')
|
|
|
|
@section('title', 'Layout & Teksten Aanpassen | Jouwdriedee Beheer')
|
|
|
|
@section('content')
|
|
<div class="space-y-6" x-data="{
|
|
activeTab: '{{ request('tab', session('tab', 'hero')) }}',
|
|
init() {
|
|
const urlParams = new URLSearchParams(window.location.search);
|
|
const urlTab = urlParams.get('tab');
|
|
const hash = window.location.hash ? window.location.hash.replace('#', '') : null;
|
|
const validTabs = ['hero', 'usp', 'sections', 'calculator', 'announcement', 'footer', 'brand', 'email', 'offline'];
|
|
|
|
if (urlTab && validTabs.includes(urlTab)) {
|
|
this.activeTab = urlTab;
|
|
} else if (hash && validTabs.includes(hash)) {
|
|
this.activeTab = hash;
|
|
}
|
|
},
|
|
switchTab(tab) {
|
|
this.activeTab = tab;
|
|
if (window.history.replaceState) {
|
|
const url = new URL(window.location.href);
|
|
url.searchParams.set('tab', tab);
|
|
window.history.replaceState(null, '', url.toString());
|
|
}
|
|
}
|
|
}">
|
|
|
|
<!-- Header Section -->
|
|
<div class="flex flex-col sm:flex-row sm:items-center justify-between pb-6 border-b border-slate-200/60 gap-4">
|
|
<div>
|
|
<span class="text-[11px] font-semibold uppercase tracking-wider text-slate-400 block mb-1">Shop Content & Stijl CMS</span>
|
|
<h1 class="font-heading text-2xl sm:text-3xl font-bold text-slate-900 tracking-tight">Layout & Teksten</h1>
|
|
<p class="text-xs sm:text-sm text-slate-500 mt-1">
|
|
Pas teksten, titels, USP's, kostprijstarieven en instellingen van de webshop aan.
|
|
</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-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="eye" class="w-3.5 h-3.5 text-slate-400"></i>
|
|
<span>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 standaardinstellingen?')">
|
|
@csrf
|
|
<button type="submit" class="px-3 py-2 rounded-lg bg-slate-50 hover:bg-rose-50 text-slate-600 hover:text-rose-600 text-xs font-medium transition border border-slate-200/60 cursor-pointer">
|
|
Herstel Fabrieksinstellingen
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Main Form -->
|
|
<form action="{{ route('admin.content.update') }}" method="POST" class="space-y-6">
|
|
@csrf
|
|
<input type="hidden" name="active_tab" :value="activeTab">
|
|
|
|
<!-- Tabs Navigation (Sleek Segmented Strip) -->
|
|
<div class="flex items-center space-x-1 p-1 bg-slate-100/80 rounded-xl overflow-x-auto text-xs font-medium w-full max-w-full">
|
|
<button
|
|
type="button"
|
|
@click="switchTab('hero')"
|
|
:class="activeTab === 'hero' ? '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 whitespace-nowrap cursor-pointer"
|
|
>
|
|
1. Hero
|
|
</button>
|
|
|
|
<button
|
|
type="button"
|
|
@click="switchTab('usp')"
|
|
:class="activeTab === 'usp' ? '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 whitespace-nowrap cursor-pointer"
|
|
>
|
|
2. USP's
|
|
</button>
|
|
|
|
<button
|
|
type="button"
|
|
@click="switchTab('sections')"
|
|
:class="activeTab === 'sections' ? '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 whitespace-nowrap cursor-pointer"
|
|
>
|
|
3. Collecties
|
|
</button>
|
|
|
|
<button
|
|
type="button"
|
|
@click="switchTab('calculator')"
|
|
:class="activeTab === 'calculator' ? '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 whitespace-nowrap cursor-pointer"
|
|
>
|
|
4. Calculator Tarieven
|
|
</button>
|
|
|
|
<button
|
|
type="button"
|
|
@click="switchTab('announcement')"
|
|
:class="activeTab === 'announcement' ? '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 whitespace-nowrap cursor-pointer"
|
|
>
|
|
5. Topbar
|
|
</button>
|
|
|
|
<button
|
|
type="button"
|
|
@click="switchTab('footer')"
|
|
:class="activeTab === 'footer' ? '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 whitespace-nowrap cursor-pointer"
|
|
>
|
|
6. Footer
|
|
</button>
|
|
|
|
<button
|
|
type="button"
|
|
@click="switchTab('brand')"
|
|
:class="activeTab === 'brand' ? '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 whitespace-nowrap cursor-pointer"
|
|
>
|
|
7. Thema
|
|
</button>
|
|
|
|
<button
|
|
type="button"
|
|
@click="switchTab('email')"
|
|
:class="activeTab === 'email' ? '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 whitespace-nowrap cursor-pointer"
|
|
>
|
|
8. E-mail / SMTP
|
|
</button>
|
|
|
|
<button
|
|
type="button"
|
|
@click="switchTab('offline')"
|
|
:class="activeTab === 'offline' ? 'bg-rose-500 text-white font-semibold shadow-2xs' : 'text-rose-600 hover:bg-rose-50'"
|
|
class="px-3 py-1.5 rounded-lg transition whitespace-nowrap cursor-pointer flex items-center space-x-1.5"
|
|
>
|
|
<span class="w-1.5 h-1.5 rounded-full {{ setting('shop_offline', '0') === '1' ? 'bg-white animate-pulse' : '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/60 shadow-2xs space-y-5">
|
|
<div class="border-b border-slate-100 pb-3">
|
|
<h3 class="font-heading font-bold text-base text-slate-900">Homepage Hero</h3>
|
|
<p class="text-xs text-slate-500">De bovenste sectie van 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-medium 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/70 border border-slate-200 rounded-lg px-3 py-2 text-xs text-slate-900 focus:outline-none focus:ring-1 focus:ring-slate-400 focus:bg-white transition"
|
|
>
|
|
</div>
|
|
|
|
<div class="space-y-1.5">
|
|
<label class="block text-xs font-medium 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/70 border border-slate-200 rounded-lg px-3 py-2 text-xs text-slate-900 focus:outline-none focus:ring-1 focus:ring-slate-400 focus:bg-white transition"
|
|
>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="space-y-1.5">
|
|
<label class="block text-xs font-medium text-slate-700">Hero Hoofdtitel</label>
|
|
<input
|
|
type="text"
|
|
name="hero_title"
|
|
value="{{ setting('hero_title', 'Kleurrijke 3D prints, fidget toys & collectibles.') }}"
|
|
class="w-full bg-slate-50/70 border border-slate-200 rounded-lg px-3 py-2 text-sm font-semibold text-slate-900 focus:outline-none focus:ring-1 focus:ring-slate-400 focus:bg-white transition"
|
|
>
|
|
</div>
|
|
|
|
<div class="space-y-1.5">
|
|
<label class="block text-xs font-medium text-slate-700">Hero Subtitel / Introductie</label>
|
|
<textarea
|
|
name="hero_subtitle"
|
|
rows="3"
|
|
class="w-full bg-slate-50/70 border border-slate-200 rounded-lg px-3 py-2 text-xs text-slate-900 focus:outline-none focus:ring-1 focus:ring-slate-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-3 border-t border-slate-100">
|
|
<div class="space-y-2 p-3.5 rounded-xl bg-slate-50/70 border border-slate-200/60">
|
|
<span class="text-xs font-semibold text-slate-800 block">Primaire Actieknop</span>
|
|
<div class="space-y-1">
|
|
<label class="text-[11px] text-slate-500 font-medium 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-lg px-2.5 py-1.5 text-xs text-slate-900">
|
|
</div>
|
|
<div class="space-y-1">
|
|
<label class="text-[11px] text-slate-500 font-medium 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-lg px-2.5 py-1.5 text-xs text-slate-900">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="space-y-2 p-3.5 rounded-xl bg-slate-50/70 border border-slate-200/60">
|
|
<span class="text-xs font-semibold text-slate-800 block">Secundaire Actieknop</span>
|
|
<div class="space-y-1">
|
|
<label class="text-[11px] text-slate-500 font-medium 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-lg px-2.5 py-1.5 text-xs text-slate-900">
|
|
</div>
|
|
<div class="space-y-1">
|
|
<label class="text-[11px] text-slate-500 font-medium 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-lg px-2.5 py-1.5 text-xs text-slate-900">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 3 Statistieken / Kwaliteitsbadges -->
|
|
<div class="pt-3 border-t border-slate-100">
|
|
<span class="text-xs font-semibold text-slate-800 block mb-3">3 Specificaties onder de knoppen</span>
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-3">
|
|
<div class="p-3 bg-slate-50/70 border border-slate-200/60 rounded-xl space-y-1.5">
|
|
<label class="text-[10px] uppercase font-semibold text-slate-400 block">Stat 1</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-semibold">
|
|
<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/70 border border-slate-200/60 rounded-xl space-y-1.5">
|
|
<label class="text-[10px] uppercase font-semibold text-slate-400 block">Stat 2</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-semibold">
|
|
<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/70 border border-slate-200/60 rounded-xl space-y-1.5">
|
|
<label class="text-[10px] uppercase font-semibold text-slate-400 block">Stat 3</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-semibold">
|
|
<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/60 shadow-2xs space-y-5">
|
|
<div class="border-b border-slate-100 pb-3">
|
|
<h3 class="font-heading font-bold text-base text-slate-900">Voordelen & USP's</h3>
|
|
<p class="text-xs text-slate-500">De 4 informatieblokken op de website.</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-medium text-slate-700">Sectie Tag</label>
|
|
<input type="text" name="usp_tag" value="{{ setting('usp_tag', 'Waarom Jouwdriedee.nl?') }}" class="w-full bg-slate-50/70 border border-slate-200 rounded-lg px-3 py-2 text-xs text-slate-900">
|
|
</div>
|
|
<div class="space-y-1.5">
|
|
<label class="block text-xs font-medium 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/70 border border-slate-200 rounded-lg px-3 py-2 text-xs text-slate-900 font-semibold">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="space-y-1.5">
|
|
<label class="block text-xs font-medium text-slate-700">Sectie Subtitel</label>
|
|
<textarea name="usp_subtitle" rows="2" class="w-full bg-slate-50/70 border border-slate-200 rounded-lg px-3 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-3 border-t border-slate-100">
|
|
<div class="p-4 rounded-xl bg-slate-50/70 border border-slate-200/60 space-y-2">
|
|
<span class="text-xs font-semibold text-slate-800 block">Voordeel 1</span>
|
|
<input type="text" name="usp_1_title" value="{{ setting('usp_1_title', 'Bambu Lab Precisie') }}" class="w-full bg-white border border-slate-200 rounded-lg px-2.5 py-1.5 text-xs text-slate-900 font-medium">
|
|
<textarea name="usp_1_desc" rows="2" class="w-full bg-white border border-slate-200 rounded-lg px-2.5 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>
|
|
|
|
<div class="p-4 rounded-xl bg-slate-50/70 border border-slate-200/60 space-y-2">
|
|
<span class="text-xs font-semibold text-slate-800 block">Voordeel 2</span>
|
|
<input type="text" name="usp_2_title" value="{{ setting('usp_2_title', '16+ Kleurvariaties') }}" class="w-full bg-white border border-slate-200 rounded-lg px-2.5 py-1.5 text-xs text-slate-900 font-medium">
|
|
<textarea name="usp_2_desc" rows="2" class="w-full bg-white border border-slate-200 rounded-lg px-2.5 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>
|
|
|
|
<div class="p-4 rounded-xl bg-slate-50/70 border border-slate-200/60 space-y-2">
|
|
<span class="text-xs font-semibold text-slate-800 block">Voordeel 3</span>
|
|
<input type="text" name="usp_3_title" value="{{ setting('usp_3_title', 'Veilig & Duurzaam PLA+') }}" class="w-full bg-white border border-slate-200 rounded-lg px-2.5 py-1.5 text-xs text-slate-900 font-medium">
|
|
<textarea name="usp_3_desc" rows="2" class="w-full bg-white border border-slate-200 rounded-lg px-2.5 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>
|
|
|
|
<div class="p-4 rounded-xl bg-slate-50/70 border border-slate-200/60 space-y-2">
|
|
<span class="text-xs font-semibold text-slate-800 block">Voordeel 4</span>
|
|
<input type="text" name="usp_4_title" value="{{ setting('usp_4_title', 'Snelle Verzending') }}" class="w-full bg-white border border-slate-200 rounded-lg px-2.5 py-1.5 text-xs text-slate-900 font-medium">
|
|
<textarea name="usp_4_desc" rows="2" class="w-full bg-white border border-slate-200 rounded-lg px-2.5 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-medium 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/70 border border-slate-200 rounded-lg px-3 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/60 shadow-2xs space-y-5">
|
|
<div class="border-b border-slate-100 pb-3">
|
|
<h3 class="font-heading font-bold text-base text-slate-900">Categorieën Sectie</h3>
|
|
<p class="text-xs text-slate-500">Koppen boven de categoriekaartjes.</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-medium text-slate-700">Categorieën Tag</label>
|
|
<input type="text" name="categories_tag" value="{{ setting('categories_tag', 'Collecties') }}" class="w-full bg-slate-50/70 border border-slate-200 rounded-lg px-3 py-2 text-xs text-slate-900">
|
|
</div>
|
|
<div class="space-y-1.5">
|
|
<label class="block text-xs font-medium 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/70 border border-slate-200 rounded-lg px-3 py-2 text-xs text-slate-900 font-semibold">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="space-y-1.5">
|
|
<label class="block text-xs font-medium 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/70 border border-slate-200 rounded-lg px-3 py-2 text-xs text-slate-900">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="p-6 rounded-2xl bg-white border border-slate-200/60 shadow-2xs space-y-5">
|
|
<div class="border-b border-slate-100 pb-3">
|
|
<h3 class="font-heading font-bold text-base text-slate-900">Populaire Modellen (Showcase)</h3>
|
|
<p class="text-xs text-slate-500">Titels van het productoverzicht 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-medium text-slate-700">Showcase Tag</label>
|
|
<input type="text" name="featured_tag" value="{{ setting('featured_tag', 'Selectie') }}" class="w-full bg-slate-50/70 border border-slate-200 rounded-lg px-3 py-2 text-xs text-slate-900">
|
|
</div>
|
|
<div class="space-y-1.5">
|
|
<label class="block text-xs font-medium text-slate-700">Showcase Hoofdtitel</label>
|
|
<input type="text" name="featured_title" value="{{ setting('featured_title', 'Populaire modellen') }}" class="w-full bg-slate-50/70 border border-slate-200 rounded-lg px-3 py-2 text-xs text-slate-900 font-semibold">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="space-y-1.5">
|
|
<label class="block text-xs font-medium 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/70 border border-slate-200 rounded-lg px-3 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/60 shadow-2xs space-y-5">
|
|
<div class="border-b border-slate-100 pb-3">
|
|
<h3 class="font-heading font-bold text-base text-slate-900">3D Print Kostprijs Tarieven & Formules</h3>
|
|
<p class="text-xs text-slate-500">
|
|
Deze tarieven worden gebruikt in de berekening van de adviesprijs (conform 3dprintingcostcalculator.com).
|
|
</p>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
|
<div class="p-3.5 rounded-xl bg-slate-50/70 border border-slate-200/60 space-y-1.5">
|
|
<label class="block text-xs font-medium 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">€</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-lg pl-7 pr-3 py-1.5 text-xs text-slate-900 font-semibold focus:ring-1 focus:ring-slate-400"
|
|
>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="p-3.5 rounded-xl bg-slate-50/70 border border-slate-200/60 space-y-1.5">
|
|
<label class="block text-xs font-medium 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">€</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-lg pl-7 pr-3 py-1.5 text-xs text-slate-900 font-semibold focus:ring-1 focus:ring-slate-400"
|
|
>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="p-3.5 rounded-xl bg-slate-50/70 border border-slate-200/60 space-y-1.5">
|
|
<label class="block text-xs font-medium 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-lg px-3 py-1.5 text-xs text-slate-900 font-semibold focus:ring-1 focus:ring-slate-400"
|
|
>
|
|
<span class="absolute right-3 top-1/2 -translate-y-1/2 text-xs text-slate-400">W</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="p-3.5 rounded-xl bg-slate-50/70 border border-slate-200/60 space-y-1.5">
|
|
<label class="block text-xs font-medium 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">€</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-lg pl-7 pr-3 py-1.5 text-xs text-slate-900 font-semibold focus:ring-1 focus:ring-slate-400"
|
|
>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="p-3.5 rounded-xl bg-slate-50/70 border border-slate-200/60 space-y-1.5">
|
|
<label class="block text-xs font-medium 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">€</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-lg pl-7 pr-3 py-1.5 text-xs text-slate-900 font-semibold focus:ring-1 focus:ring-slate-400"
|
|
>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="p-3.5 rounded-xl bg-slate-50/70 border border-slate-200/60 space-y-1.5">
|
|
<label class="block text-xs font-medium 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-lg px-3 py-1.5 text-xs text-slate-900 font-semibold focus:ring-1 focus:ring-slate-400"
|
|
>
|
|
<span class="absolute right-3 top-1/2 -translate-y-1/2 text-xs text-slate-400">%</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="p-3.5 rounded-xl bg-slate-50/70 border border-slate-200/60 space-y-1.5">
|
|
<label class="block text-xs font-medium 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-lg px-3 py-1.5 text-xs text-slate-900 font-semibold focus:ring-1 focus:ring-slate-400"
|
|
>
|
|
<span class="absolute right-3 top-1/2 -translate-y-1/2 text-xs text-slate-400">%</span>
|
|
</div>
|
|
</div>
|
|
</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/60 shadow-2xs space-y-5">
|
|
<div class="border-b border-slate-100 pb-3">
|
|
<h3 class="font-heading font-bold text-base text-slate-900">Bovenbalk (Meldingen)</h3>
|
|
<p class="text-xs text-slate-500">De dunne balk bovenaan de website.</p>
|
|
</div>
|
|
|
|
<div class="flex items-center space-x-2.5 p-3 rounded-lg bg-slate-50/70 border border-slate-200/60">
|
|
<input
|
|
type="checkbox"
|
|
name="announcement_enabled"
|
|
id="announcement_enabled"
|
|
value="1"
|
|
{{ setting('announcement_enabled', '1') == '1' ? 'checked' : '' }}
|
|
class="w-4 h-4 rounded text-slate-900 border-slate-300"
|
|
>
|
|
<label for="announcement_enabled" class="text-xs font-medium text-slate-800 cursor-pointer">
|
|
Bovenbalk tonen op de website
|
|
</label>
|
|
</div>
|
|
|
|
<div class="space-y-1.5">
|
|
<label class="block text-xs font-medium text-slate-700">Hoofdmededeling</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/70 border border-slate-200 rounded-lg px-3 py-2 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-medium text-slate-700">Badge 1</label>
|
|
<input
|
|
type="text"
|
|
name="announcement_badge_1"
|
|
value="{{ setting('announcement_badge_1', 'Gratis verzending vanaf € 50,-') }}"
|
|
class="w-full bg-slate-50/70 border border-slate-200 rounded-lg px-3 py-2 text-xs text-slate-900"
|
|
>
|
|
</div>
|
|
|
|
<div class="space-y-1.5">
|
|
<label class="block text-xs font-medium text-slate-700">Badge 2</label>
|
|
<input
|
|
type="text"
|
|
name="announcement_badge_2"
|
|
value="{{ setting('announcement_badge_2', 'Verzending binnen 2-3 werkdagen') }}"
|
|
class="w-full bg-slate-50/70 border border-slate-200 rounded-lg px-3 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/60 shadow-2xs space-y-5">
|
|
<div class="border-b border-slate-100 pb-3">
|
|
<h3 class="font-heading font-bold text-base text-slate-900">Voettekst & Contact</h3>
|
|
<p class="text-xs text-slate-500">Informatie onderaan alle pagina's.</p>
|
|
</div>
|
|
|
|
<div class="space-y-1.5">
|
|
<label class="block text-xs font-medium text-slate-700">Bedrijfsomschrijving</label>
|
|
<textarea
|
|
name="footer_description"
|
|
rows="3"
|
|
class="w-full bg-slate-50/70 border border-slate-200 rounded-lg px-3 py-2 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-medium 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/70 border border-slate-200 rounded-lg px-3 py-2 text-xs text-slate-900"
|
|
>
|
|
</div>
|
|
|
|
<div class="space-y-1.5">
|
|
<label class="block text-xs font-medium 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/70 border border-slate-200 rounded-lg px-3 py-2 text-xs text-slate-900"
|
|
>
|
|
</div>
|
|
|
|
<div class="space-y-1.5">
|
|
<label class="block text-xs font-medium text-slate-700">Verzendmethode</label>
|
|
<input
|
|
type="text"
|
|
name="footer_shipping_text"
|
|
value="{{ setting('footer_shipping_text', 'Snelle verzending via PostNL') }}"
|
|
class="w-full bg-slate-50/70 border border-slate-200 rounded-lg px-3 py-2 text-xs text-slate-900"
|
|
>
|
|
</div>
|
|
|
|
<div class="space-y-1.5">
|
|
<label class="block text-xs font-medium text-slate-700">Betaalmethoden Tekst</label>
|
|
<input
|
|
type="text"
|
|
name="footer_payment_text"
|
|
value="{{ setting('footer_payment_text', 'iDEAL & Bancontact • PostNL Track & Trace') }}"
|
|
class="w-full bg-slate-50/70 border border-slate-200 rounded-lg px-3 py-2 text-xs text-slate-900"
|
|
>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="space-y-1.5">
|
|
<label class="block text-xs font-medium text-slate-700">Copyright Tekst</label>
|
|
<input
|
|
type="text"
|
|
name="footer_copyright"
|
|
value="{{ setting('footer_copyright', 'Alle 3D prints worden op bestelling vervaardigd.') }}"
|
|
class="w-full bg-slate-50/70 border border-slate-200 rounded-lg px-3 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/60 shadow-2xs space-y-5">
|
|
<div class="border-b border-slate-100 pb-3">
|
|
<h3 class="font-heading font-bold text-base text-slate-900">Branding & SEO</h3>
|
|
<p class="text-xs text-slate-500">Shopnaam en zoekmachine omschrijving.</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-medium text-slate-700">Webshop Naam</label>
|
|
<input
|
|
type="text"
|
|
name="site_name"
|
|
value="{{ setting('site_name', 'Jouwdriedee.nl') }}"
|
|
class="w-full bg-slate-50/70 border border-slate-200 rounded-lg px-3 py-2 text-xs text-slate-900"
|
|
>
|
|
</div>
|
|
|
|
<div class="space-y-1.5">
|
|
<label class="block text-xs font-medium text-slate-700">Shop Slogan</label>
|
|
<input
|
|
type="text"
|
|
name="site_tagline"
|
|
value="{{ setting('site_tagline', '3D Prints, Fidgets & Collectibles') }}"
|
|
class="w-full bg-slate-50/70 border border-slate-200 rounded-lg px-3 py-2 text-xs text-slate-900"
|
|
>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="space-y-1.5">
|
|
<label class="block text-xs font-medium text-slate-700">SEO Meta Omschrijving</label>
|
|
<textarea
|
|
name="meta_description"
|
|
rows="2"
|
|
class="w-full bg-slate-50/70 border border-slate-200 rounded-lg px-3 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>
|
|
</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/60 shadow-2xs space-y-6">
|
|
<div class="border-b border-slate-100 pb-3 flex items-center justify-between">
|
|
<div>
|
|
<h3 class="font-heading font-bold text-base text-slate-900">E-mail & SMTP Status</h3>
|
|
<p class="text-xs text-slate-500">Controleer uitgaande mailservers.</p>
|
|
</div>
|
|
@php
|
|
$activeMailer = config('mail.default');
|
|
@endphp
|
|
<span class="px-2.5 py-0.5 rounded-full text-[11px] font-semibold {{ $activeMailer === 'log' ? 'bg-amber-100 text-amber-800' : 'bg-emerald-100 text-emerald-800' }}">
|
|
Driver: {{ strtoupper($activeMailer) }}
|
|
</span>
|
|
</div>
|
|
|
|
@if($activeMailer === 'log')
|
|
<div class="p-3.5 rounded-xl bg-amber-50/80 border border-amber-200/60 text-amber-900 text-xs space-y-1.5">
|
|
<div class="font-semibold text-xs flex items-center space-x-2">
|
|
<i data-lucide="alert-triangle" class="w-4 h-4 text-amber-600"></i>
|
|
<span>MAIL_MAILER staat op 'log'</span>
|
|
</div>
|
|
<p class="text-[11px] leading-relaxed text-amber-800">
|
|
Uitgaande e-mails worden opgeslagen in de serverlogs en niet over internet verzonden. Stel <code class="bg-white border px-1 py-0.2 rounded font-mono">MAIL_MAILER=smtp</code> in op de host om echte mails te verzenden.
|
|
</p>
|
|
</div>
|
|
@endif
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-xs">
|
|
<div class="p-4 rounded-xl bg-slate-50/70 border border-slate-200/60 space-y-2">
|
|
<div class="font-semibold text-slate-500 text-[11px] uppercase tracking-wider">Huidige Mail & SMTP Instellingen</div>
|
|
<div class="flex justify-between py-1 border-b border-slate-200/50">
|
|
<span class="text-slate-500">MAIL_MAILER:</span>
|
|
<span class="font-mono font-semibold {{ config('mail.default') === 'log' ? 'text-amber-600' : 'text-emerald-700' }}">{{ config('mail.default') }}</span>
|
|
</div>
|
|
<div class="flex justify-between py-1 border-b border-slate-200/50">
|
|
<span class="text-slate-500">MAIL_HOST:</span>
|
|
<span class="font-mono text-slate-900">{{ config('mail.mailers.smtp.host') ?: '(geen)' }}</span>
|
|
</div>
|
|
<div class="flex justify-between py-1 border-b border-slate-200/50">
|
|
<span class="text-slate-500">MAIL_PORT:</span>
|
|
<span class="font-mono text-slate-900">{{ config('mail.mailers.smtp.port') ?: '(geen)' }}</span>
|
|
</div>
|
|
<div class="flex justify-between py-1 border-b border-slate-200/50">
|
|
<span class="text-slate-500">MAIL_ENCRYPTION:</span>
|
|
<span class="font-mono text-slate-900">{{ config('mail.mailers.smtp.encryption') ?: (config('mail.mailers.smtp.scheme') ?: '(automatisch)') }}</span>
|
|
</div>
|
|
<div class="flex justify-between py-1 border-b border-slate-200/50">
|
|
<span class="text-slate-500">MAIL_USERNAME:</span>
|
|
<span class="font-mono text-slate-900">{{ config('mail.mailers.smtp.username') ?: '(geen)' }}</span>
|
|
</div>
|
|
<div class="flex justify-between py-1 border-b border-slate-200/50">
|
|
<span class="text-slate-500">MAIL_FROM:</span>
|
|
<span class="font-mono text-slate-900">{{ config('mail.from.address') }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="p-4 rounded-xl bg-slate-50/70 border border-slate-200/60 space-y-2">
|
|
<div class="font-semibold text-slate-500 text-[11px] uppercase tracking-wider">Waarom komt mail niet aan op Gmail?</div>
|
|
<p class="text-[11px] text-slate-600 leading-relaxed">
|
|
Als je wel een groene bevestiging krijgt maar niks ontvangt in Gmail, dan accepteert de SMTP-server de mail, maar weigert of filtert Google de bezorging door <strong>ontbrekende of foutieve DNS-records</strong>:
|
|
</p>
|
|
<ul class="space-y-1.5 text-slate-600 text-[11px] pt-1">
|
|
<li class="flex items-start space-x-2">
|
|
<span class="text-rose-600 font-semibold shrink-0">⚠️ SPF Error:</span>
|
|
<span>In je DNS staat <code class="bg-white border px-1 rounded font-mono text-[10px]">include:_spf.jouwdriedee.nl</code>, maar dit subdomein bestaat niet! Dit veroorzaakt een fatale <em>SPF PermError</em> bij Google.</span>
|
|
</li>
|
|
<li class="flex items-start space-x-2">
|
|
<span class="text-slate-900 font-semibold shrink-0">1. Oplossing SPF:</span>
|
|
<span>Zet in je Versio DNS het TXT record voor <code class="bg-white border px-1 rounded font-mono text-[10px]">@</code> op:<br>
|
|
<code class="bg-white border px-1 py-0.5 rounded font-mono text-[10px] text-slate-900 block mt-1 select-all">v=spf1 a mx ip4:185.182.56.214 include:spf.versio.nl ~all</code></span>
|
|
</li>
|
|
<li class="flex items-start space-x-2">
|
|
<span class="text-slate-900 font-semibold shrink-0">2. DMARC toevoegen:</span>
|
|
<span>Maak een TXT record met naam <code class="bg-white border px-1 rounded font-mono text-[10px]">_dmarc</code> en waarde:<br>
|
|
<code class="bg-white border px-1 py-0.5 rounded font-mono text-[10px] text-slate-900 block mt-1 select-all">v=DMARC1; p=none; rua=mailto:info@jouwdriedee.nl</code></span>
|
|
</li>
|
|
<li class="flex items-start space-x-2">
|
|
<span class="text-slate-900 font-semibold shrink-0">3. Spamfolder:</span>
|
|
<span>Controleer altijd ook je Gmail Spam/Ongewenst map.</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Test Email Form -->
|
|
<div class="p-4 rounded-xl bg-slate-50/70 border border-slate-200/60 space-y-2">
|
|
<span class="font-semibold text-slate-900 text-xs block">Test E-mail Verzenden</span>
|
|
<p class="text-[11px] text-slate-500">Verzend een directe testmail om de verbinding en aflevering te verifiëren. Na verzending blijft deze pagina netjes op tabblad 8 geopend.</p>
|
|
<div class="flex flex-col sm:flex-row gap-2 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-lg px-3 py-1.5 text-xs text-slate-900 font-mono placeholder-slate-400 focus:outline-none focus:ring-1 focus:ring-slate-400"
|
|
>
|
|
<button
|
|
type="submit"
|
|
formaction="{{ route('admin.content.test-mail') }}"
|
|
formmethod="POST"
|
|
class="px-4 py-1.5 rounded-lg bg-slate-900 hover:bg-slate-800 text-white font-medium text-xs transition flex items-center justify-center space-x-1.5 cursor-pointer"
|
|
>
|
|
<i data-lucide="send" class="w-3.5 h-3.5"></i>
|
|
<span>Verstuur Test</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ==================================================== -->
|
|
<!-- TAB 9: WEBSHOP OFFLINE MODUS -->
|
|
<!-- ==================================================== -->
|
|
<div x-show="activeTab === 'offline'" class="space-y-6">
|
|
<div class="p-6 rounded-2xl bg-white border border-slate-200/60 shadow-2xs 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>
|
|
<h3 class="font-heading font-bold text-base text-slate-900">Webshop Offline Modus (Onderhoud)</h3>
|
|
<p class="text-xs text-slate-500 mt-0.5">
|
|
Wanneer ingeschakeld zien bezoekers een onderhoudsbanner. Beheerders kunnen de website gewoon bekijken.
|
|
</p>
|
|
</div>
|
|
|
|
<button
|
|
type="submit"
|
|
formaction="{{ route('admin.toggle-offline') }}"
|
|
formmethod="POST"
|
|
class="px-4 py-2 rounded-lg {{ setting('shop_offline', '0') === '1' ? 'bg-emerald-600 hover:bg-emerald-500' : 'bg-rose-600 hover:bg-rose-500' }} text-white font-medium text-xs transition flex items-center justify-center space-x-1.5 cursor-pointer shadow-2xs"
|
|
>
|
|
<i data-lucide="power" class="w-3.5 h-3.5"></i>
|
|
<span>{{ setting('shop_offline', '0') === '1' ? 'Zet Webshop ONLINE' : 'Zet Webshop DIRECT OFFLINE' }}</span>
|
|
</button>
|
|
</div>
|
|
|
|
<input type="hidden" name="shop_offline_submitted" value="1">
|
|
|
|
<div class="p-3.5 rounded-xl {{ setting('shop_offline', '0') === '1' ? 'bg-rose-50 border border-rose-200' : 'bg-slate-50 border border-slate-200/60' }} flex items-center justify-between">
|
|
<div>
|
|
<span class="text-xs font-semibold text-slate-900 block">Status Bereikbaarheid</span>
|
|
<span class="text-[11px] text-slate-500">
|
|
{{ setting('shop_offline', '0') === '1' ? 'De webshop staat momenteel OFFLINE voor gewone bezoekers.' : 'De webshop is 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-11 h-6 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-[2px] after:bg-white after:border-slate-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-rose-600"></div>
|
|
</label>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 gap-4 pt-1">
|
|
<div class="space-y-1.5">
|
|
<label class="block text-xs font-medium text-slate-700">Titel op 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/70 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-rose-400"
|
|
>
|
|
</div>
|
|
|
|
<div class="space-y-1.5">
|
|
<label class="block text-xs font-medium text-slate-700">Onderhoudsbericht</label>
|
|
<textarea
|
|
name="shop_offline_message"
|
|
rows="3"
|
|
class="w-full bg-slate-50/70 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-rose-400"
|
|
>{{ 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>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Sticky Save Action Bar -->
|
|
<div class="sticky bottom-4 z-20 p-3.5 rounded-xl bg-white/90 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-500 font-normal">
|
|
<span class="w-2 h-2 rounded-full bg-emerald-500"></span>
|
|
<span>Wijzigingen worden direct live opgeslagen in de database.</span>
|
|
</div>
|
|
<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-3.5 h-3.5"></i>
|
|
<span>Opslaan & Publiceren</span>
|
|
</button>
|
|
</div>
|
|
|
|
</form>
|
|
</div>
|
|
@endsection
|