@php
    $landingServices = $settings['landing_services'] ?? [
        ['name' => 'Deep Clean', 'price' => 'Mulai Rp35.000', 'description' => 'Treatment detail untuk upper, midsole, outsole, dan tali sepatu.'],
        ['name' => 'Unyellowing', 'price' => 'Mulai Rp45.000', 'description' => 'Bantu angkat noda kuning pada midsole dan bagian putih yang mulai kusam.'],
        ['name' => 'Suede Care', 'price' => 'Mulai Rp50.000', 'description' => 'Perawatan lebih halus untuk suede, nubuck, dan material sensitif.'],
        ['name' => 'Pickup Service', 'price' => 'By area', 'description' => 'Admin bantu jadwalkan penjemputan supaya kamu tinggal siapin sepatunya.'],
    ];
    $landingSteps = $settings['landing_steps'] ?? [
        ['title' => 'Chat atau datang', 'description' => 'Kirim foto sepatu, tanya treatment, atau langsung drop ke outlet.'],
        ['title' => 'Inspeksi awal', 'description' => 'Tim cek kondisi, foto evidence, dan konfirmasi catatan penting.'],
        ['title' => 'Proses cleaning', 'description' => 'Sepatu dicuci sesuai bahan, lalu dikeringkan dan finishing.'],
        ['title' => 'Track & ambil', 'description' => 'Progress bisa dicek online. Saat siap, tinggal ambil atau minta dikirim.'],
    ];
    $landingTrustPoints = $settings['landing_trust_points'] ?? [
        'Evidence foto sebelum proses',
        'Treatment disesuaikan bahan',
        'Progress nota bisa dicek online',
        'Admin aktif via WhatsApp',
    ];
    $landingFaqs = $settings['landing_faqs'] ?? [
        ['question' => 'Bisa pickup?', 'answer' => 'Bisa. Chat admin untuk cek area, jadwal, dan ongkir pickup/delivery.'],
        ['question' => 'Sepatu branded aman?', 'answer' => 'Kami inspeksi dulu dan pilih treatment sesuai bahan. Kondisi khusus akan dikonfirmasi sebelum proses.'],
        ['question' => 'Noda pasti hilang?', 'answer' => 'Noda ringan biasanya aman. Noda lama, luntur, atau kerusakan bahan akan diberi catatan saat inspeksi.'],
        ['question' => 'Bayarnya kapan?', 'answer' => 'Bisa DP atau lunas sesuai kebijakan outlet. Pengambilan dilakukan setelah pembayaran lunas.'],
    ];
@endphp
<x-admin-layout title="Pengaturan Aplikasi" subtitle="Nama usaha, landing page, logo, footer struk, promo pelanggan, dan retensi evidence.">
    <form method="post" action="{{ route('settings.store') }}" enctype="multipart/form-data" class="space-y-5">
        @csrf

        <section class="grid gap-5 rounded-lg bg-white p-5 shadow-sm lg:grid-cols-[1fr_320px]">
            <div class="grid gap-4 md:grid-cols-2">
                @foreach ([
                    'business_name' => 'Nama usaha',
                    'business_address' => 'Alamat usaha',
                    'receipt_footer' => 'Footer struk',
                    'evidence_retention_days' => 'Retensi evidence (hari)',
                    'customer_promo_paid_invoice_target' => 'Target promo invoice',
                    'default_whatsapp_number' => 'WhatsApp default',
                ] as $key => $label)
                    <label class="text-sm {{ in_array($key, ['business_address', 'receipt_footer'], true) ? 'md:col-span-2' : '' }}">
                        {{ $label }}
                        @if (in_array($key, ['business_address', 'receipt_footer'], true))
                            <textarea name="settings[{{ $key }}]" rows="3" class="mt-1 w-full rounded-md border px-3 py-2">{{ old("settings.{$key}", $settings[$key] ?? '') }}</textarea>
                        @else
                            <input name="settings[{{ $key }}]" value="{{ old("settings.{$key}", $settings[$key] ?? '') }}" class="mt-1 w-full rounded-md border px-3 py-2">
                        @endif
                    </label>
                @endforeach
            </div>

            <aside class="rounded-lg border bg-slate-50 p-4">
                <h2 class="font-semibold">Logo Usaha</h2>
                <div class="mt-4 grid place-items-center rounded-md border border-dashed bg-white p-6">
                    @if ($logoUrl)
                        <img src="{{ $logoUrl }}" alt="Logo usaha" class="max-h-28 max-w-full object-contain">
                    @else
                        <img src="{{ asset('landing/wash-wear-logo.svg') }}" alt="Wash&Wear" class="max-h-28 max-w-full object-contain">
                    @endif
                </div>
                <label class="mt-4 block text-sm">
                    Upload logo
                    <input name="logo" type="file" accept="image/png,image/jpeg,image/webp,image/svg+xml" class="mt-1 w-full rounded-md border bg-white px-3 py-2 text-sm">
                </label>
                <p class="mt-2 text-xs text-slate-500">Format PNG, JPG, WEBP, atau SVG. Maksimal 2 MB.</p>
            </aside>
        </section>

        <section class="rounded-lg bg-white p-5 shadow-sm">
            <div class="mb-4 flex items-center justify-between gap-3">
                <div>
                    <h2 class="font-semibold">Landing Page Publik</h2>
                    <p class="text-sm text-slate-500">Edit teks Gen Z, WhatsApp, layanan, cara order, FAQ, dan gambar landing page.</p>
                </div>
                <a href="{{ route('landing') }}" target="_blank" class="rounded-md border px-3 py-2 text-sm">Preview</a>
            </div>
            <div class="grid gap-4 md:grid-cols-2">
                @foreach ([
                    'landing_badge' => 'Badge kecil',
                    'landing_title' => 'Judul utama',
                    'landing_subtitle' => 'Subjudul',
                    'landing_whatsapp_number' => 'Nomor WhatsApp landing',
                    'landing_whatsapp_text' => 'Template pesan WhatsApp',
                    'landing_estimate_text' => 'Estimasi pengerjaan',
                    'landing_area_text' => 'Area layanan / pickup',
                    'landing_footer' => 'Footer landing',
                ] as $key => $label)
                    <label class="text-sm {{ in_array($key, ['landing_title', 'landing_subtitle', 'landing_whatsapp_text', 'landing_estimate_text', 'landing_area_text'], true) ? 'md:col-span-2' : '' }}">
                        {{ $label }}
                        @if (in_array($key, ['landing_title', 'landing_subtitle', 'landing_whatsapp_text', 'landing_estimate_text', 'landing_area_text'], true))
                            <textarea name="settings[{{ $key }}]" rows="3" class="mt-1 w-full rounded-md border px-3 py-2">{{ old("settings.{$key}", $settings[$key] ?? '') }}</textarea>
                        @else
                            <input name="settings[{{ $key }}]" value="{{ old("settings.{$key}", $settings[$key] ?? '') }}" class="mt-1 w-full rounded-md border px-3 py-2">
                        @endif
                    </label>
                @endforeach
            </div>
        </section>

        <section class="grid gap-5 rounded-lg bg-white p-5 shadow-sm lg:grid-cols-3">
            <div>
                <h2 class="font-semibold">Gambar Hero</h2>
                <img src="{{ $landingHeroUrl }}" alt="Hero landing" class="mt-3 h-44 w-full rounded-lg border object-cover">
                <label class="mt-3 block text-sm">
                    Upload gambar hero
                    <input name="landing_hero" type="file" accept="image/png,image/jpeg,image/webp" class="mt-1 w-full rounded-md border bg-white px-3 py-2 text-sm">
                </label>
            </div>
            <div>
                <h2 class="font-semibold">Gambar Layanan</h2>
                <img src="{{ $landingCareKitUrl }}" alt="Gambar layanan" class="mt-3 h-44 w-full rounded-lg border object-cover">
                <label class="mt-3 block text-sm">
                    Upload gambar layanan
                    <input name="landing_care_kit" type="file" accept="image/png,image/jpeg,image/webp" class="mt-1 w-full rounded-md border bg-white px-3 py-2 text-sm">
                </label>
            </div>
            <div>
                <h2 class="font-semibold">Gambar Before-After</h2>
                <img src="{{ $landingBeforeAfterUrl }}" alt="Before after" class="mt-3 h-44 w-full rounded-lg border object-cover">
                <label class="mt-3 block text-sm">
                    Upload gambar before-after
                    <input name="landing_before_after" type="file" accept="image/png,image/jpeg,image/webp" class="mt-1 w-full rounded-md border bg-white px-3 py-2 text-sm">
                </label>
            </div>
        </section>

        <section class="rounded-lg bg-white p-5 shadow-sm">
            <h2 class="font-semibold">Layanan & Harga</h2>
            <div class="mt-4 grid gap-4 md:grid-cols-2">
                @foreach ($landingServices as $index => $service)
                    <div class="rounded-lg border p-4">
                        <div class="grid gap-3 md:grid-cols-2">
                            <label class="text-sm">Nama layanan
                                <input name="settings[landing_services][{{ $index }}][name]" value="{{ old("settings.landing_services.{$index}.name", $service['name'] ?? '') }}" class="mt-1 w-full rounded-md border px-3 py-2">
                            </label>
                            <label class="text-sm">Harga
                                <input name="settings[landing_services][{{ $index }}][price]" value="{{ old("settings.landing_services.{$index}.price", $service['price'] ?? '') }}" class="mt-1 w-full rounded-md border px-3 py-2">
                            </label>
                        </div>
                        <label class="mt-3 block text-sm">Deskripsi
                            <textarea name="settings[landing_services][{{ $index }}][description]" rows="3" class="mt-1 w-full rounded-md border px-3 py-2">{{ old("settings.landing_services.{$index}.description", $service['description'] ?? '') }}</textarea>
                        </label>
                    </div>
                @endforeach
            </div>
        </section>

        <section class="rounded-lg bg-white p-5 shadow-sm">
            <h2 class="font-semibold">Cara Order</h2>
            <div class="mt-4 grid gap-4 md:grid-cols-2">
                @foreach ($landingSteps as $index => $step)
                    <div class="rounded-lg border p-4">
                        <label class="text-sm">Judul langkah {{ $index + 1 }}
                            <input name="settings[landing_steps][{{ $index }}][title]" value="{{ old("settings.landing_steps.{$index}.title", $step['title'] ?? '') }}" class="mt-1 w-full rounded-md border px-3 py-2">
                        </label>
                        <label class="mt-3 block text-sm">Deskripsi
                            <textarea name="settings[landing_steps][{{ $index }}][description]" rows="3" class="mt-1 w-full rounded-md border px-3 py-2">{{ old("settings.landing_steps.{$index}.description", $step['description'] ?? '') }}</textarea>
                        </label>
                    </div>
                @endforeach
            </div>
        </section>

        <section class="rounded-lg bg-white p-5 shadow-sm">
            <h2 class="font-semibold">Trust Points</h2>
            <div class="mt-4 grid gap-3 md:grid-cols-2">
                @foreach ($landingTrustPoints as $index => $point)
                    <label class="text-sm">Poin {{ $index + 1 }}
                        <input name="settings[landing_trust_points][{{ $index }}]" value="{{ old("settings.landing_trust_points.{$index}", $point) }}" class="mt-1 w-full rounded-md border px-3 py-2">
                    </label>
                @endforeach
            </div>
        </section>

        <section class="rounded-lg bg-white p-5 shadow-sm">
            <h2 class="font-semibold">FAQ Landing</h2>
            <div class="mt-4 grid gap-4 md:grid-cols-2">
                @foreach ($landingFaqs as $index => $faq)
                    <div class="rounded-lg border p-4">
                        <label class="text-sm">Pertanyaan
                            <input name="settings[landing_faqs][{{ $index }}][question]" value="{{ old("settings.landing_faqs.{$index}.question", $faq['question'] ?? '') }}" class="mt-1 w-full rounded-md border px-3 py-2">
                        </label>
                        <label class="mt-3 block text-sm">Jawaban
                            <textarea name="settings[landing_faqs][{{ $index }}][answer]" rows="3" class="mt-1 w-full rounded-md border px-3 py-2">{{ old("settings.landing_faqs.{$index}.answer", $faq['answer'] ?? '') }}</textarea>
                        </label>
                    </div>
                @endforeach
            </div>
        </section>

        <button class="rounded-md bg-slate-900 px-4 py-2 font-medium text-white">Simpan Pengaturan</button>
    </form>
</x-admin-layout>
