@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/60 gap-4">
        <div>
            <span class="text-[11px] font-semibold uppercase tracking-wider text-slate-400 block mb-1">Content Management</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

        <!-- 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="activeTab = '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="activeTab = '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="activeTab = '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="activeTab = '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="activeTab = '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="activeTab = '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="activeTab = '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="activeTab = '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="activeTab = '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 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 text-slate-900">{{ 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_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">Gmail Afleverchecklist</div>
                        <ul class="space-y-1.5 text-slate-600 text-[11px]">
                            <li class="flex items-start space-x-2">
                                <span class="text-slate-900 font-semibold">1.</span>
                                <span><strong>SMTP Provider:</strong> Gebruik een geverifieerde mailserver.</span>
                            </li>
                            <li class="flex items-start space-x-2">
                                <span class="text-slate-900 font-semibold">2.</span>
                                <span><strong>SPF Record:</strong> Google vereist een SPF TXT-record op het domein.</span>
                            </li>
                            <li class="flex items-start space-x-2">
                                <span class="text-slate-900 font-semibold">3.</span>
                                <span><strong>DKIM & DMARC:</strong> Noodzakelijk om spamfilters van Gmail te passeren.</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>
                    <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