@extends('layouts.admin')

@section('title', 'Website CMS')
@section('page-title', 'Website CMS')

@section('content')
@php
    $flat = $settings->flatten()->keyBy('key');
    $field = fn(string $key, string $default = '') => optional($flat->get($key))->value ?: $default;
    $parseJson = function(string $key, array $default = []) use ($field) {
        $v = json_decode($field($key, ''), true);
        return is_array($v) ? $v : $default;
    };
    $heroStatsList    = $parseJson('hero_stats_json',      [['label' => 'Fast Setup', 'value' => '1 Day'], ['label' => 'Multi Device', 'value' => 'Live Sync'], ['label' => 'Data Safety', 'value' => 'Backups']]);
    $featureCardsList = $parseJson('feature_cards_json',   [['title' => 'Offline-first billing', 'body' => 'Keep selling even with unstable internet and sync changes later.'], ['title' => 'Inventory intelligence', 'body' => 'Track stock, purchases, adjustments, and product performance in one place.']]);
    $pricingList      = $parseJson('pricing_json',         [['name' => 'Free', 'price' => '0', 'tagline' => '1 store, 150 products, 1 device'], ['name' => 'Growth', 'price' => '1.99', 'tagline' => '5 stores, unlimited products, 2 devices'], ['name' => 'Pro', 'price' => '3.99', 'tagline' => 'Unlimited stores & products, 4 devices']]);
    $screenshotsList  = $parseJson('screenshot_cards_json', [['title' => 'Fast checkout', 'body' => 'Ring up items, discounts, and payment methods without slowing the counter.', 'image' => ''], ['title' => 'Inventory view', 'body' => 'Monitor low stock, purchases, and stock movement from one command surface.', 'image' => ''], ['title' => 'Cloud status', 'body' => 'Track backups, sync health, and device activity across your operation.', 'image' => '']]);
    $downloadLinksList = $parseJson('download_links_json', [['label' => 'Google Play', 'url' => '#', 'caption' => 'Android phones & tablets', 'platform' => 'google_play'], ['label' => 'App Store', 'url' => '/contact', 'caption' => 'iPhone & iPad', 'platform' => 'app_store'], ['label' => 'Windows', 'url' => '#', 'caption' => 'Desktop & laptop', 'platform' => 'windows']]);
    $faqList          = $parseJson('faq_json',             [['question' => 'Does Quickro POS work offline?', 'answer' => 'Yes. The app remains usable locally and syncs later when connectivity returns.'], ['question' => 'Can I restore backups from the cloud?', 'answer' => 'Yes. Google Drive and Laravel cloud backup flows are both supported in the app.']]);
    $socialLinksList  = $parseJson('social_links_json',    [['label' => 'Facebook', 'url' => '#'], ['label' => 'Instagram', 'url' => '#'], ['label' => 'LinkedIn', 'url' => '#']]);
@endphp
<div class="space-y-6">
    <section class="rounded-3xl border border-slate-200 bg-white p-6 shadow-sm">
        <div class="flex flex-wrap items-start justify-between gap-4">
            <div>
                <h2 class="text-2xl font-bold text-slate-900">Public Website Content</h2>
                <p class="mt-1 text-sm text-slate-500">Manage hero copy, pricing summaries, contact data, and WhatsApp routing.</p>
            </div>
            <a href="{{ route('website.home') }}" target="_blank" class="rounded-2xl border border-slate-300 px-4 py-3 text-sm font-semibold text-slate-700 transition hover:border-brand-600 hover:text-brand-600">Open Website</a>
        </div>

        <script>
        document.addEventListener('alpine:init', function () {
            Alpine.data('websiteCmsForm', function () {
                return {
                    heroStats:     @json($heroStatsList),
                    featureCards:  @json($featureCardsList),
                    pricingList:   @json($pricingList),
                    screenshots:   @json($screenshotsList),
                    downloadLinks: @json($downloadLinksList),
                    faqItems:      @json($faqList),
                    socialLinks:   @json($socialLinksList),
                    uploadImageForItem: async function (event, item) {
                        const file = event.target.files[0];
                        if (!file) return;
                        const fd = new FormData();
                        fd.append('image', file);
                        fd.append('_token', document.querySelector('meta[name=csrf-token]').content);
                        const res  = await fetch('{{ route('admin.website.upload-image') }}', { method: 'POST', body: fd });
                        const data = await res.json();
                        if (data.url) item.image = data.url;
                    },
                };
            });
        });
        </script>
        <form method="POST" action="{{ route('admin.website.update') }}" class="mt-8 space-y-10"
            x-data="websiteCmsForm()">
            @csrf

            {{-- ── Branding ─────────────────────────────────────────────────── --}}
            <div class="space-y-5">
                <div>
                    <h3 class="text-lg font-bold text-slate-900">Branding</h3>
                    <p class="mt-1 text-sm text-slate-500">Upload your support logo. It appears in the website header and footer when set.</p>
                </div>
                <div class="grid gap-5 lg:grid-cols-2">
                    <div>
                        <label class="mb-2 block text-sm font-semibold text-slate-700">Support Logo</label>
                        <div class="flex flex-col gap-4">
                            {{-- Preview --}}
                            <div id="logo-preview-wrap" class="{{ $field('support_logo_url') ? '' : 'hidden' }} w-40 rounded-2xl border border-slate-200 bg-slate-50 p-3">
                                <img id="logo-preview-img" src="{{ $field('support_logo_url') }}" alt="Logo preview" class="max-h-16 w-auto object-contain">
                            </div>
                            {{-- Upload button --}}
                            <div class="flex items-center gap-3">
                                <label for="logo-file-input" class="cursor-pointer rounded-2xl border border-slate-300 px-4 py-2.5 text-sm font-semibold text-slate-700 transition hover:border-brand-600 hover:text-brand-600">
                                    Choose Image
                                </label>
                                <span id="logo-upload-status" class="text-sm text-slate-500">No file chosen</span>
                                <input type="file" id="logo-file-input" accept="image/*" class="hidden">
                            </div>
                            {{-- Hidden input that stores the URL --}}
                            <input type="hidden" name="support_logo_url" id="support-logo-url-input" value="{{ old('support_logo_url', $field('support_logo_url')) }}">
                            @if($field('support_logo_url'))
                                <button type="button" id="logo-remove-btn" class="w-fit rounded-2xl border border-rose-300 px-4 py-2 text-sm font-semibold text-rose-600 transition hover:bg-rose-50">Remove Logo</button>
                            @endif
                        </div>
                    </div>
                </div>
            </div>

            <script>
            (function () {
                const input   = document.getElementById('logo-file-input');
                const urlHidden = document.getElementById('support-logo-url-input');
                const status  = document.getElementById('logo-upload-status');
                const preview = document.getElementById('logo-preview-wrap');
                const img     = document.getElementById('logo-preview-img');
                const removeBtn = document.getElementById('logo-remove-btn');
                const uploadUrl = '{{ route('admin.website.upload-image') }}';
                const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');

                if (input) {
                    input.addEventListener('change', async function () {
                        const file = this.files[0];
                        if (!file) return;
                        status.textContent = 'Uploading…';
                        const fd = new FormData();
                        fd.append('image', file);
                        fd.append('_token', csrfToken);
                        try {
                            const res  = await fetch(uploadUrl, { method: 'POST', body: fd });
                            const data = await res.json();
                            if (data.url) {
                                urlHidden.value = data.url;
                                img.src = data.url;
                                preview.classList.remove('hidden');
                                status.textContent = 'Uploaded.';
                            } else {
                                status.textContent = 'Upload failed.';
                            }
                        } catch (e) {
                            status.textContent = 'Upload error.';
                        }
                    });
                }

                if (removeBtn) {
                    removeBtn.addEventListener('click', function () {
                        urlHidden.value = '';
                        img.src = '';
                        preview.classList.add('hidden');
                        status.textContent = 'Logo removed (save to confirm).';
                        removeBtn.classList.add('hidden');
                    });
                }
            })();
            </script>
            <div class="space-y-5">
                <div>
                    <h3 class="text-lg font-bold text-slate-900">Hero</h3>
                    <p class="mt-1 text-sm text-slate-500">Control the above-the-fold message, buttons, and quick stats.</p>
                </div>
                <div class="grid gap-5 lg:grid-cols-2">
                <div>
                    <label class="mb-2 block text-sm font-semibold text-slate-700">Hero Eyebrow</label>
                    <input type="text" name="hero_eyebrow" value="{{ old('hero_eyebrow', $field('hero_eyebrow', 'Retail operations, simplified')) }}" class="w-full rounded-2xl border border-slate-300 px-4 py-3 text-sm outline-none transition focus:border-brand-600 focus:ring-4 focus:ring-brand-600/10">
                </div>
                <div>
                    <label class="mb-2 block text-sm font-semibold text-slate-700">Hero Title</label>
                    <input type="text" name="hero_title" value="{{ old('hero_title', $field('hero_title', 'One POS platform for billing, inventory, sync, and growth.')) }}" class="w-full rounded-2xl border border-slate-300 px-4 py-3 text-sm outline-none transition focus:border-brand-600 focus:ring-4 focus:ring-brand-600/10">
                </div>
                <div class="lg:col-span-2">
                    <label class="mb-2 block text-sm font-semibold text-slate-700">Hero Description</label>
                    <textarea name="hero_description" rows="4" class="w-full rounded-3xl border border-slate-300 px-4 py-3 text-sm outline-none transition focus:border-brand-600 focus:ring-4 focus:ring-brand-600/10">{{ old('hero_description', $field('hero_description', 'Quickro POS helps growing retailers manage inventory, invoicing, customer ledgers, subscriptions, backups, and multi-device sync from one platform.')) }}</textarea>
                </div>
                <div>
                    <label class="mb-2 block text-sm font-semibold text-slate-700">Primary Button Label</label>
                    <input type="text" name="hero_primary_label" value="{{ old('hero_primary_label', $field('hero_primary_label', 'Explore Plans')) }}" class="w-full rounded-2xl border border-slate-300 px-4 py-3 text-sm outline-none transition focus:border-brand-600 focus:ring-4 focus:ring-brand-600/10">
                </div>
                <div>
                    <label class="mb-2 block text-sm font-semibold text-slate-700">Primary Button URL</label>
                    <input type="text" name="hero_primary_url" value="{{ old('hero_primary_url', $field('hero_primary_url', '#pricing')) }}" class="w-full rounded-2xl border border-slate-300 px-4 py-3 text-sm outline-none transition focus:border-brand-600 focus:ring-4 focus:ring-brand-600/10">
                </div>
                <div>
                    <label class="mb-2 block text-sm font-semibold text-slate-700">Secondary Button Label</label>
                    <input type="text" name="hero_secondary_label" value="{{ old('hero_secondary_label', $field('hero_secondary_label', 'Talk to Sales')) }}" class="w-full rounded-2xl border border-slate-300 px-4 py-3 text-sm outline-none transition focus:border-brand-600 focus:ring-4 focus:ring-brand-600/10">
                </div>
                <div>
                    <label class="mb-2 block text-sm font-semibold text-slate-700">Secondary Button URL</label>
                    <input type="text" name="hero_secondary_url" value="{{ old('hero_secondary_url', $field('hero_secondary_url', '/contact')) }}" class="w-full rounded-2xl border border-slate-300 px-4 py-3 text-sm outline-none transition focus:border-brand-600 focus:ring-4 focus:ring-brand-600/10">
                </div>
                <div class="lg:col-span-2">
                    <label class="mb-2 block text-sm font-semibold text-slate-700">Hero Stats</label>
                    <p class="mb-3 text-xs text-slate-500">Stat counters shown below the hero buttons (e.g. value "1 Day", label "Fast Setup").</p>
                    <div class="space-y-2">
                        <template x-for="(item, i) in heroStats" :key="i">
                            <div class="flex items-center gap-2 rounded-2xl border border-slate-200 bg-slate-50 p-3">
                                <input x-model="item.value" placeholder="Value (e.g. 1 Day)" class="flex-1 rounded-xl border border-slate-300 px-3 py-2 text-sm outline-none focus:border-brand-600 focus:ring-2 focus:ring-brand-600/10">
                                <input x-model="item.label" placeholder="Label (e.g. Fast Setup)" class="flex-1 rounded-xl border border-slate-300 px-3 py-2 text-sm outline-none focus:border-brand-600 focus:ring-2 focus:ring-brand-600/10">
                                <button type="button" @click="heroStats.splice(i,1)" class="flex h-8 w-8 shrink-0 items-center justify-center rounded-xl border border-rose-200 text-rose-500 transition hover:bg-rose-50">
                                    <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
                                </button>
                            </div>
                        </template>
                    </div>
                    <button type="button" @click="heroStats.push({value:'',label:''})" class="mt-2 inline-flex items-center gap-1.5 rounded-xl border border-dashed border-slate-300 px-4 py-2 text-sm font-medium text-slate-600 transition hover:border-brand-400 hover:text-brand-600">
                        <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"/></svg>
                        Add Stat
                    </button>
                </div>
                </div>{{-- /grid --}}
            </div>{{-- /space-y-5 hero --}}

            <div class="space-y-5">
                <div>
                    <h3 class="text-lg font-bold text-slate-900">Features, Pricing, Screenshots</h3>
                    <p class="mt-1 text-sm text-slate-500">Edit the core marketing sections without touching templates.</p>
                </div>
                <div class="grid gap-5 lg:grid-cols-2">
                <div>
                    <label class="mb-2 block text-sm font-semibold text-slate-700">Features Title</label>
                    <input type="text" name="features_title" value="{{ old('features_title', $field('features_title', 'Built for busy shops and distributed teams')) }}" class="w-full rounded-2xl border border-slate-300 px-4 py-3 text-sm outline-none transition focus:border-brand-600 focus:ring-4 focus:ring-brand-600/10">
                </div>
                <div>
                    <label class="mb-2 block text-sm font-semibold text-slate-700">Pricing Title</label>
                    <input type="text" name="pricing_title" value="{{ old('pricing_title', $field('pricing_title', 'Flexible plans for every stage')) }}" class="w-full rounded-2xl border border-slate-300 px-4 py-3 text-sm outline-none transition focus:border-brand-600 focus:ring-4 focus:ring-brand-600/10">
                </div>
                <div class="lg:col-span-2">
                    <label class="mb-2 block text-sm font-semibold text-slate-700">Feature Cards</label>
                    <p class="mb-3 text-xs text-slate-500">Cards shown in the Features section. Each needs a title and short body text.</p>
                    <div class="space-y-2">
                        <template x-for="(item, i) in featureCards" :key="i">
                            <div class="flex items-start gap-2 rounded-2xl border border-slate-200 bg-slate-50 p-3">
                                <div class="flex-1 space-y-2">
                                    <input x-model="item.title" placeholder="Title (e.g. Offline-first billing)" class="w-full rounded-xl border border-slate-300 px-3 py-2 text-sm outline-none focus:border-brand-600 focus:ring-2 focus:ring-brand-600/10">
                                    <textarea x-model="item.body" rows="2" placeholder="Body text" class="w-full resize-none rounded-xl border border-slate-300 px-3 py-2 text-sm outline-none focus:border-brand-600 focus:ring-2 focus:ring-brand-600/10"></textarea>
                                </div>
                                <button type="button" @click="featureCards.splice(i,1)" class="mt-1 flex h-8 w-8 shrink-0 items-center justify-center rounded-xl border border-rose-200 text-rose-500 transition hover:bg-rose-50">
                                    <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
                                </button>
                            </div>
                        </template>
                    </div>
                    <button type="button" @click="featureCards.push({title:'',body:''})" class="mt-2 inline-flex items-center gap-1.5 rounded-xl border border-dashed border-slate-300 px-4 py-2 text-sm font-medium text-slate-600 transition hover:border-brand-400 hover:text-brand-600">
                        <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"/></svg>
                        Add Feature Card
                    </button>
                </div>
                <div class="lg:col-span-2">
                    <label class="mb-2 block text-sm font-semibold text-slate-700">Pricing Plans</label>
                    <p class="mb-3 text-xs text-slate-500">Each plan needs a name, base monthly price, and a one-line tagline.</p>
                    <div class="space-y-2">
                        <template x-for="(item, i) in pricingList" :key="i">
                            <div class="flex items-center gap-2 rounded-2xl border border-slate-200 bg-slate-50 p-3">
                                <input x-model="item.name" placeholder="Name (e.g. Growth)" class="w-28 shrink-0 rounded-xl border border-slate-300 px-3 py-2 text-sm outline-none focus:border-brand-600 focus:ring-2 focus:ring-brand-600/10">
                                <input x-model="item.price" placeholder="Price (e.g. 1.99)" class="w-24 shrink-0 rounded-xl border border-slate-300 px-3 py-2 text-sm outline-none focus:border-brand-600 focus:ring-2 focus:ring-brand-600/10">
                                <input x-model="item.tagline" placeholder="Tagline (e.g. 5 stores, 2 devices)" class="flex-1 rounded-xl border border-slate-300 px-3 py-2 text-sm outline-none focus:border-brand-600 focus:ring-2 focus:ring-brand-600/10">
                                <button type="button" @click="pricingList.splice(i,1)" class="flex h-8 w-8 shrink-0 items-center justify-center rounded-xl border border-rose-200 text-rose-500 transition hover:bg-rose-50">
                                    <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
                                </button>
                            </div>
                        </template>
                    </div>
                    <button type="button" @click="pricingList.push({name:'',price:'',tagline:''})" class="mt-2 inline-flex items-center gap-1.5 rounded-xl border border-dashed border-slate-300 px-4 py-2 text-sm font-medium text-slate-600 transition hover:border-brand-400 hover:text-brand-600">
                        <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"/></svg>
                        Add Plan
                    </button>
                </div>
                <div>
                    <label class="mb-2 block text-sm font-semibold text-slate-700">Screenshots Title</label>
                    <input type="text" name="screenshots_title" value="{{ old('screenshots_title', $field('screenshots_title', 'See the operating flow before you deploy')) }}" class="w-full rounded-2xl border border-slate-300 px-4 py-3 text-sm outline-none transition focus:border-brand-600 focus:ring-4 focus:ring-brand-600/10">
                </div>
                <div>
                    <label class="mb-2 block text-sm font-semibold text-slate-700">Download Section Title</label>
                    <input type="text" name="download_title" value="{{ old('download_title', $field('download_title', 'Download Quickro POS')) }}" class="w-full rounded-2xl border border-slate-300 px-4 py-3 text-sm outline-none transition focus:border-brand-600 focus:ring-4 focus:ring-brand-600/10">
                </div>
                <div class="lg:col-span-2">
                    <label class="mb-2 block text-sm font-semibold text-slate-700">Screenshot Cards</label>
                    <p class="mb-3 text-xs text-slate-500">Cards in the Screenshots section. Upload an image per card (optional — leave blank to hide image).</p>
                    <div class="space-y-3">
                        <template x-for="(item, i) in screenshots" :key="i">
                            <div class="rounded-2xl border border-slate-200 bg-slate-50 p-4">
                                <div class="flex items-start gap-3">
                                    <div class="flex-1 space-y-2">
                                        <input x-model="item.title" placeholder="Title (e.g. Fast checkout)" class="w-full rounded-xl border border-slate-300 px-3 py-2 text-sm outline-none focus:border-brand-600 focus:ring-2 focus:ring-brand-600/10">
                                        <textarea x-model="item.body" rows="2" placeholder="Body text" class="w-full resize-none rounded-xl border border-slate-300 px-3 py-2 text-sm outline-none focus:border-brand-600 focus:ring-2 focus:ring-brand-600/10"></textarea>
                                    </div>
                                    <button type="button" @click="screenshots.splice(i,1)" class="mt-1 flex h-8 w-8 shrink-0 items-center justify-center rounded-xl border border-rose-200 text-rose-500 transition hover:bg-rose-50">
                                        <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
                                    </button>
                                </div>
                                <div class="mt-3 flex items-center gap-3">
                                    <template x-if="item.image">
                                        <img :src="item.image" class="h-16 w-24 rounded-xl object-cover border border-slate-200">
                                    </template>
                                    <label class="cursor-pointer rounded-xl border border-slate-300 px-3 py-1.5 text-xs font-semibold text-slate-600 transition hover:border-brand-500 hover:text-brand-600">
                                        <span x-text="item.image ? 'Replace Image' : 'Upload Image'"></span>
                                        <input type="file" accept="image/*" class="hidden" @change="uploadImageForItem($event, item)">
                                    </label>
                                    <template x-if="item.image">
                                        <button type="button" @click="item.image = ''" class="rounded-xl border border-rose-200 px-3 py-1.5 text-xs font-semibold text-rose-500 transition hover:bg-rose-50">Remove</button>
                                    </template>
                                </div>
                            </div>
                        </template>
                    </div>
                    <button type="button" @click="screenshots.push({title:'',body:'',image:''})" class="mt-2 inline-flex items-center gap-1.5 rounded-xl border border-dashed border-slate-300 px-4 py-2 text-sm font-medium text-slate-600 transition hover:border-brand-400 hover:text-brand-600">
                        <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"/></svg>
                        Add Screenshot
                    </button>
                </div>
                <div class="lg:col-span-2">
                    <label class="mb-2 block text-sm font-semibold text-slate-700">Download Links</label>
                    <p class="mb-3 text-xs text-slate-500">Supported <strong>platform</strong> values: <code class="rounded bg-slate-100 px-1">google_play</code>, <code class="rounded bg-slate-100 px-1">app_store</code>, <code class="rounded bg-slate-100 px-1">windows</code>. Leave blank for a generic icon.</p>
                    <div class="space-y-2">
                        <template x-for="(item, i) in downloadLinks" :key="i">
                            <div class="flex items-start gap-2 rounded-2xl border border-slate-200 bg-slate-50 p-3">
                                <div class="grid flex-1 grid-cols-2 gap-2">
                                    <input x-model="item.label" placeholder="Label (e.g. Google Play)" class="rounded-xl border border-slate-300 px-3 py-2 text-sm outline-none focus:border-brand-600 focus:ring-2 focus:ring-brand-600/10">
                                    <input x-model="item.platform" placeholder="Platform (google_play / app_store / windows)" class="rounded-xl border border-slate-300 px-3 py-2 text-sm outline-none focus:border-brand-600 focus:ring-2 focus:ring-brand-600/10">
                                    <input x-model="item.url" placeholder="URL" class="rounded-xl border border-slate-300 px-3 py-2 text-sm outline-none focus:border-brand-600 focus:ring-2 focus:ring-brand-600/10">
                                    <input x-model="item.caption" placeholder="Caption (e.g. Android phones & tablets)" class="rounded-xl border border-slate-300 px-3 py-2 text-sm outline-none focus:border-brand-600 focus:ring-2 focus:ring-brand-600/10">
                                </div>
                                <button type="button" @click="downloadLinks.splice(i,1)" class="mt-1 flex h-8 w-8 shrink-0 items-center justify-center rounded-xl border border-rose-200 text-rose-500 transition hover:bg-rose-50">
                                    <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
                                </button>
                            </div>
                        </template>
                    </div>
                    <button type="button" @click="downloadLinks.push({label:'',url:'',caption:'',platform:''})" class="mt-2 inline-flex items-center gap-1.5 rounded-xl border border-dashed border-slate-300 px-4 py-2 text-sm font-medium text-slate-600 transition hover:border-brand-400 hover:text-brand-600">
                        <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"/></svg>
                        Add Download Link
                    </button>
                </div>
                <div class="lg:col-span-2">
                    <label class="mb-2 block text-sm font-semibold text-slate-700">FAQ Items</label>
                    <p class="mb-3 text-xs text-slate-500">Accordion questions shown on the public homepage.</p>
                    <div class="space-y-2">
                        <template x-for="(item, i) in faqItems" :key="i">
                            <div class="flex items-start gap-2 rounded-2xl border border-slate-200 bg-slate-50 p-3">
                                <div class="flex-1 space-y-2">
                                    <input x-model="item.question" placeholder="Question" class="w-full rounded-xl border border-slate-300 px-3 py-2 text-sm outline-none focus:border-brand-600 focus:ring-2 focus:ring-brand-600/10">
                                    <textarea x-model="item.answer" rows="2" placeholder="Answer" class="w-full resize-none rounded-xl border border-slate-300 px-3 py-2 text-sm outline-none focus:border-brand-600 focus:ring-2 focus:ring-brand-600/10"></textarea>
                                </div>
                                <button type="button" @click="faqItems.splice(i,1)" class="mt-1 flex h-8 w-8 shrink-0 items-center justify-center rounded-xl border border-rose-200 text-rose-500 transition hover:bg-rose-50">
                                    <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
                                </button>
                            </div>
                        </template>
                    </div>
                    <button type="button" @click="faqItems.push({question:'',answer:''})" class="mt-2 inline-flex items-center gap-1.5 rounded-xl border border-dashed border-slate-300 px-4 py-2 text-sm font-medium text-slate-600 transition hover:border-brand-400 hover:text-brand-600">
                        <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"/></svg>
                        Add FAQ Item
                    </button>
                </div>
                </div>
            </div>

            <div class="space-y-5">
                <div>
                    <h3 class="text-lg font-bold text-slate-900">Contact, Footer, Legal</h3>
                    <p class="mt-1 text-sm text-slate-500">Control contact details, social links, CTA, policy copy, and WhatsApp visibility.</p>
                </div>
                <div class="grid gap-5 lg:grid-cols-2">
                <div>
                    <label class="mb-2 block text-sm font-semibold text-slate-700">Contact Email</label>
                    <input type="text" name="contact_email" value="{{ old('contact_email', $field('contact_email', 'support@quickropos.com')) }}" class="w-full rounded-2xl border border-slate-300 px-4 py-3 text-sm outline-none transition focus:border-brand-600 focus:ring-4 focus:ring-brand-600/10">
                </div>
                <div>
                    <label class="mb-2 block text-sm font-semibold text-slate-700">Contact Phone</label>
                    <input type="text" name="contact_phone" value="{{ old('contact_phone', $field('contact_phone', '+92 300 0000000')) }}" class="w-full rounded-2xl border border-slate-300 px-4 py-3 text-sm outline-none transition focus:border-brand-600 focus:ring-4 focus:ring-brand-600/10">
                </div>
                <div>
                    <label class="mb-2 block text-sm font-semibold text-slate-700">Address</label>
                    <input type="text" name="contact_address" value="{{ old('contact_address', $field('contact_address', 'Lahore, Pakistan')) }}" class="w-full rounded-2xl border border-slate-300 px-4 py-3 text-sm outline-none transition focus:border-brand-600 focus:ring-4 focus:ring-brand-600/10">
                </div>
                <div>
                    <label class="mb-2 block text-sm font-semibold text-slate-700">WhatsApp URL</label>
                    <input type="text" name="whatsapp_url" value="{{ old('whatsapp_url', $field('whatsapp_url', 'https://wa.me/923000000000')) }}" class="w-full rounded-2xl border border-slate-300 px-4 py-3 text-sm outline-none transition focus:border-brand-600 focus:ring-4 focus:ring-brand-600/10">
                </div>
                <div>
                    <label class="mb-2 block text-sm font-semibold text-slate-700">Contact Heading</label>
                    <input type="text" name="contact_heading" value="{{ old('contact_heading', $field('contact_heading', 'Reach the Quickro team')) }}" class="w-full rounded-2xl border border-slate-300 px-4 py-3 text-sm outline-none transition focus:border-brand-600 focus:ring-4 focus:ring-brand-600/10">
                </div>
                <div>
                    <label class="mb-2 block text-sm font-semibold text-slate-700">Contact Description</label>
                    <input type="text" name="contact_description" value="{{ old('contact_description', $field('contact_description', 'Discuss rollouts, pricing, migration support, or technical questions with the team.')) }}" class="w-full rounded-2xl border border-slate-300 px-4 py-3 text-sm outline-none transition focus:border-brand-600 focus:ring-4 focus:ring-brand-600/10">
                </div>
                <div>
                    <label class="mb-2 block text-sm font-semibold text-slate-700">Enable WhatsApp Button</label>
                    <select name="whatsapp_enabled" class="w-full rounded-2xl border border-slate-300 px-4 py-3 text-sm outline-none transition focus:border-brand-600 focus:ring-4 focus:ring-brand-600/10">
                        <option value="1" @selected(old('whatsapp_enabled', $field('whatsapp_enabled', '1')) == '1')>Enabled</option>
                        <option value="0" @selected(old('whatsapp_enabled', $field('whatsapp_enabled', '1')) == '0')>Disabled</option>
                    </select>
                </div>
                <div>
                    <label class="mb-2 block text-sm font-semibold text-slate-700">Footer Blurb</label>
                    <input type="text" name="footer_blurb" value="{{ old('footer_blurb', $field('footer_blurb', 'Cloud-synced billing, inventory, customer management, and analytics for fast-moving retail teams.')) }}" class="w-full rounded-2xl border border-slate-300 px-4 py-3 text-sm outline-none transition focus:border-brand-600 focus:ring-4 focus:ring-brand-600/10">
                </div>
                <div class="lg:col-span-2">
                    <label class="mb-2 block text-sm font-semibold text-slate-700">Social Links</label>
                    <p class="mb-3 text-xs text-slate-500">Links shown in the footer. Use the exact label — Facebook, Instagram, LinkedIn, Twitter, YouTube, etc. — for the icon to appear correctly.</p>
                    <div class="space-y-2">
                        <template x-for="(item, i) in socialLinks" :key="i">
                            <div class="flex items-center gap-2 rounded-2xl border border-slate-200 bg-slate-50 p-3">
                                <input x-model="item.label" placeholder="Label (e.g. Facebook)" class="flex-1 rounded-xl border border-slate-300 px-3 py-2 text-sm outline-none focus:border-brand-600 focus:ring-2 focus:ring-brand-600/10">
                                <input x-model="item.url" placeholder="URL" class="flex-1 rounded-xl border border-slate-300 px-3 py-2 text-sm outline-none focus:border-brand-600 focus:ring-2 focus:ring-brand-600/10">
                                <button type="button" @click="socialLinks.splice(i,1)" class="flex h-8 w-8 shrink-0 items-center justify-center rounded-xl border border-rose-200 text-rose-500 transition hover:bg-rose-50">
                                    <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
                                </button>
                            </div>
                        </template>
                    </div>
                    <button type="button" @click="socialLinks.push({label:'',url:''})" class="mt-2 inline-flex items-center gap-1.5 rounded-xl border border-dashed border-slate-300 px-4 py-2 text-sm font-medium text-slate-600 transition hover:border-brand-400 hover:text-brand-600">
                        <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"/></svg>
                        Add Social Link
                    </button>
                </div>
                <div>
                    <label class="mb-2 block text-sm font-semibold text-slate-700">CTA Title</label>
                    <input type="text" name="cta_title" value="{{ old('cta_title', $field('cta_title', 'Launch a cleaner retail workflow with Quickro POS.')) }}" class="w-full rounded-2xl border border-slate-300 px-4 py-3 text-sm outline-none transition focus:border-brand-600 focus:ring-4 focus:ring-brand-600/10">
                </div>
                <div>
                    <label class="mb-2 block text-sm font-semibold text-slate-700">CTA Description</label>
                    <input type="text" name="cta_description" value="{{ old('cta_description', $field('cta_description', 'Take sales, manage stock, protect data, and grow across multiple devices with one operational stack.')) }}" class="w-full rounded-2xl border border-slate-300 px-4 py-3 text-sm outline-none transition focus:border-brand-600 focus:ring-4 focus:ring-brand-600/10">
                </div>
                </div>
            </div>

            <div class="space-y-5">
                <div>
                    <h3 class="text-lg font-bold text-slate-900">Policies</h3>
                    <p class="mt-1 text-sm text-slate-500">Use double line breaks to separate paragraphs on the public legal pages.</p>
                </div>
                <div>
                <label class="mb-2 block text-sm font-semibold text-slate-700">Privacy Summary</label>
                <textarea name="privacy_summary" rows="5" class="w-full rounded-3xl border border-slate-300 px-4 py-3 text-sm outline-none transition focus:border-brand-600 focus:ring-4 focus:ring-brand-600/10">{{ old('privacy_summary', $field('privacy_summary', 'Quickro POS stores only the information required to operate billing, sync, analytics, and account management features.')) }}</textarea>
                </div>
                <div>
                    <label class="mb-2 block text-sm font-semibold text-slate-700">Privacy Body</label>
                    <textarea name="privacy_body" rows="8" class="w-full rounded-3xl border border-slate-300 px-4 py-3 text-sm outline-none transition focus:border-brand-600 focus:ring-4 focus:ring-brand-600/10">{{ old('privacy_body', $field('privacy_body', "We collect account, device, subscription, and business-operation data needed to provide billing, inventory, sync, and administrative features. We do not sell customer data.\n\nOperational logs, backups, and storage metrics may be processed to maintain uptime, debug failures, and protect business continuity. Access is restricted to authorized personnel.\n\nFor privacy questions or account deletion requests, contact support@quickropos.com.")) }}</textarea>
                </div>
                <div>
                <label class="mb-2 block text-sm font-semibold text-slate-700">Terms Summary</label>
                <textarea name="terms_summary" rows="5" class="w-full rounded-3xl border border-slate-300 px-4 py-3 text-sm outline-none transition focus:border-brand-600 focus:ring-4 focus:ring-brand-600/10">{{ old('terms_summary', $field('terms_summary', 'Use of Quickro POS is subject to active subscription terms, lawful business use, and compliance with local tax and invoicing regulations.')) }}</textarea>
                </div>
                <div>
                    <label class="mb-2 block text-sm font-semibold text-slate-700">Terms Body</label>
                    <textarea name="terms_body" rows="8" class="w-full rounded-3xl border border-slate-300 px-4 py-3 text-sm outline-none transition focus:border-brand-600 focus:ring-4 focus:ring-brand-600/10">{{ old('terms_body', $field('terms_body', "Use Quickro POS only for lawful business operations. You are responsible for the accuracy of transactions, stock records, tax treatment, and staff access on your account.\n\nSubscription features, storage allowances, and support terms may vary by plan. Abuse, fraud, or attempts to disrupt the service can result in account suspension.\n\nBy using the platform, you agree to maintain secure credentials and notify us of any unauthorized access immediately.")) }}</textarea>
                </div>
            </div>

            {{-- Hidden inputs: Alpine serialises arrays → JSON on every change --}}
            <input type="hidden" name="hero_stats_json"      x-ref="hsj"  x-effect="$refs.hsj.value  = JSON.stringify(heroStats)">
            <input type="hidden" name="feature_cards_json"   x-ref="fcj"  x-effect="$refs.fcj.value  = JSON.stringify(featureCards)">
            <input type="hidden" name="pricing_json"         x-ref="pj"   x-effect="$refs.pj.value   = JSON.stringify(pricingList)">
            <input type="hidden" name="screenshot_cards_json" x-ref="scj" x-effect="$refs.scj.value  = JSON.stringify(screenshots)">
            <input type="hidden" name="download_links_json"  x-ref="dlj"  x-effect="$refs.dlj.value  = JSON.stringify(downloadLinks)">
            <input type="hidden" name="faq_json"             x-ref="faqj" x-effect="$refs.faqj.value = JSON.stringify(faqItems)">
            <input type="hidden" name="social_links_json"    x-ref="slj"  x-effect="$refs.slj.value  = JSON.stringify(socialLinks)">

            <button type="submit" class="inline-flex rounded-2xl bg-brand-600 px-6 py-3.5 text-sm font-semibold text-white transition hover:bg-brand-700">Save Website Content</button>
        </form>
    </section>
</div>
@endsection