<x-admin-layout>
    <x-slot name="header">
        <h2 class="font-bold text-2xl text-gray-900 dark:text-white leading-tight">Pengaturan Footer</h2>
    </x-slot>

    <div class="max-w-5xl space-y-6">

        <form action="{{ route('admin.settings.footer.store') }}" method="POST" class="space-y-6">
            @csrf
            @method('PUT')

            {{-- SECTION 1: Identitas Toko --}}
            <div class="bg-white dark:bg-slate-800 rounded-2xl shadow-sm border border-gray-100 dark:border-slate-700 overflow-hidden">
                <div class="px-8 py-5 border-b border-gray-100 dark:border-slate-700">
                    <h3 class="font-bold text-base text-gray-900 dark:text-white">Section 1 — Identitas Toko</h3>
                    <p class="text-xs text-gray-500 dark:text-gray-400 mt-0.5">Nama, tagline singkat, dan deskripsi panjang toko Anda.</p>
                </div>
                <div class="p-8 space-y-5">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2">Nama Toko <span class="text-red-500">*</span></label>
                        <input type="text" name="store_name" value="{{ old('store_name', $settings['store_name'] ?? '') }}"
                            class="block w-full rounded-lg border-gray-300 dark:border-slate-600 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 py-2.5 px-3 border dark:bg-slate-700 dark:text-white"
                            placeholder="DigiShop">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2">Deskripsi Singkat <span class="text-gray-400 font-normal">(Tagline)</span></label>
                        <input type="text" name="store_description" value="{{ old('store_description', $settings['store_description'] ?? '') }}"
                            class="block w-full rounded-lg border-gray-300 dark:border-slate-600 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 py-2.5 px-3 border dark:bg-slate-700 dark:text-white"
                            placeholder="Marketplace produk digital terpercaya.">
                        <p class="mt-1.5 text-xs text-gray-500 dark:text-gray-400">Muncul juga di header halaman utama & meta description.</p>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2">Tentang Toko <span class="text-gray-400 font-normal">(Deskripsi Panjang Footer)</span></label>
                        <textarea name="store_about" rows="4"
                            class="block w-full rounded-lg border-gray-300 dark:border-slate-600 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 py-2.5 px-3 border dark:bg-slate-700 dark:text-white"
                            placeholder="Ceritakan lebih lanjut tentang bisnis atau misi toko Anda...">{{ old('store_about', $settings['store_about'] ?? '') }}</textarea>
                        <p class="mt-1.5 text-xs text-gray-500 dark:text-gray-400">Paragraf penjelas yang lebih panjang, tampil di kolom pertama footer.</p>
                    </div>
                </div>
            </div>

            {{-- SECTION 2: Link Menu --}}
            <div class="bg-white dark:bg-slate-800 rounded-2xl shadow-sm border border-gray-100 dark:border-slate-700 overflow-hidden">
                <div class="px-8 py-5 border-b border-gray-100 dark:border-slate-700">
                    <h3 class="font-bold text-base text-gray-900 dark:text-white">Section 2 — Link Menu Footer</h3>
                    <p class="text-xs text-gray-500 dark:text-gray-400 mt-0.5">Link yang akan ditampilkan pada kolom "Menu" di footer. Hanya link yang diisi di sini dan halaman dengan opsi <strong>"Tampilkan di Footer"</strong> yang akan muncul.</p>
                </div>
                <div class="p-8 space-y-4">
                    @foreach([1,2,3,4,5,6] as $n)
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                        <div>
                            <label class="block text-xs font-semibold text-gray-600 dark:text-gray-400 mb-1.5">Label Link {{ $n }}</label>
                            <input type="text" name="footer_link{{ $n }}_label" value="{{ old('footer_link'.$n.'_label', $settings['footer_link'.$n.'_label'] ?? '') }}"
                                class="block w-full rounded-lg border-gray-300 dark:border-slate-600 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 py-2.5 px-3 border dark:bg-slate-700 dark:text-white text-sm"
                                placeholder="Contoh: Syarat & Ketentuan">
                        </div>
                        <div>
                            <label class="block text-xs font-semibold text-gray-600 dark:text-gray-400 mb-1.5">URL Link {{ $n }}</label>
                            <input type="text" name="footer_link{{ $n }}_url" value="{{ old('footer_link'.$n.'_url', $settings['footer_link'.$n.'_url'] ?? '') }}"
                                class="block w-full rounded-lg border-gray-300 dark:border-slate-600 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 py-2.5 px-3 border dark:bg-slate-700 dark:text-white text-sm"
                                placeholder="/syarat-ketentuan">
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>

            {{-- SECTION 3: Tautan Eksternal --}}
            <div class="bg-white dark:bg-slate-800 rounded-2xl shadow-sm border border-gray-100 dark:border-slate-700 overflow-hidden">
                <div class="px-8 py-5 border-b border-gray-100 dark:border-slate-700">
                    <h3 class="font-bold text-base text-gray-900 dark:text-white">Section 3 — Tautan Eksternal</h3>
                    <p class="text-xs text-gray-500 dark:text-gray-400 mt-0.5">Link menuju situs eksternal (portofolio, blog, marketplace lain, dll). Akan terbuka di tab baru.</p>
                </div>
                <div class="p-8 space-y-4">
                    @foreach([1,2,3,4,5,6] as $n)
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                        <div>
                            <label class="block text-xs font-semibold text-gray-600 dark:text-gray-400 mb-1.5">Label Tautan Eksternal {{ $n }}</label>
                            <input type="text" name="footer_ext_label{{ $n }}" value="{{ old('footer_ext_label'.$n, $settings['footer_ext_label'.$n] ?? '') }}"
                                class="block w-full rounded-lg border-gray-300 dark:border-slate-600 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 py-2.5 px-3 border dark:bg-slate-700 dark:text-white text-sm"
                                placeholder="Contoh: Portofolio kami">
                        </div>
                        <div>
                            <label class="block text-xs font-semibold text-gray-600 dark:text-gray-400 mb-1.5">URL Eksternal {{ $n }}</label>
                            <input type="text" name="footer_ext_url{{ $n }}" value="{{ old('footer_ext_url'.$n, $settings['footer_ext_url'.$n] ?? '') }}"
                                class="block w-full rounded-lg border-gray-300 dark:border-slate-600 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 py-2.5 px-3 border dark:bg-slate-700 dark:text-white text-sm"
                                placeholder="https://example.com">
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>

            {{-- SECTION 4: Kontak & Sosial Media --}}
            <div class="bg-white dark:bg-slate-800 rounded-2xl shadow-sm border border-gray-100 dark:border-slate-700 overflow-hidden">
                <div class="px-8 py-5 border-b border-gray-100 dark:border-slate-700">
                    <h3 class="font-bold text-base text-gray-900 dark:text-white">Section 4 — Kontak & Sosial Media</h3>
                    <p class="text-xs text-gray-500 dark:text-gray-400 mt-0.5">Alamat, telepon, WhatsApp, dan ikon media sosial toko.</p>
                </div>
                <div class="p-8 space-y-5">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2">Alamat Toko</label>
                        <textarea name="store_address" rows="2"
                            class="block w-full rounded-lg border-gray-300 dark:border-slate-600 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 py-2.5 px-3 border dark:bg-slate-700 dark:text-white"
                            placeholder="Jl. Sudirman No. 1, Jakarta Pusat">{{ old('store_address', $settings['store_address'] ?? '') }}</textarea>
                    </div>
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-5">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2">Nomor Telepon</label>
                            <div class="relative">
                                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"><x-heroicon-o-phone class="w-4 h-4 text-gray-400" /></div>
                                <input type="text" name="store_phone" value="{{ old('store_phone', $settings['store_phone'] ?? '') }}"
                                    class="block w-full pl-9 rounded-lg border-gray-300 dark:border-slate-600 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 py-2.5 px-3 border dark:bg-slate-700 dark:text-white"
                                    placeholder="021-12345678">
                            </div>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2">Nomor WhatsApp</label>
                            <div class="relative">
                                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"><span class="text-xs text-gray-400 font-mono">wa.me/</span></div>
                                <input type="text" name="whatsapp_number" value="{{ old('whatsapp_number', $settings['whatsapp_number'] ?? '') }}"
                                    class="block w-full pl-14 rounded-lg border-gray-300 dark:border-slate-600 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 py-2.5 px-3 border dark:bg-slate-700 dark:text-white"
                                    placeholder="6281234567890">
                            </div>
                            <p class="mt-1.5 text-xs text-gray-500 dark:text-gray-400">Awali dengan kode negara (62), tanpa tanda +</p>
                        </div>
                    </div>

                    <div class="pt-2 border-t border-gray-100 dark:border-slate-700">
                        <p class="text-sm font-semibold text-gray-700 dark:text-gray-200 mb-4">Akun Media Sosial <span class="text-xs text-gray-400 font-normal">(URL lengkap)</span></p>
                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                            <div>
                                <label class="block text-xs font-semibold text-gray-600 dark:text-gray-400 mb-1.5">Instagram</label>
                                <input type="url" name="social_instagram" value="{{ old('social_instagram', $settings['social_instagram'] ?? '') }}"
                                    class="block w-full rounded-lg border-gray-300 dark:border-slate-600 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 py-2.5 px-3 border dark:bg-slate-700 dark:text-white text-sm"
                                    placeholder="https://instagram.com/...">
                            </div>
                            <div>
                                <label class="block text-xs font-semibold text-gray-600 dark:text-gray-400 mb-1.5">Facebook</label>
                                <input type="url" name="social_facebook" value="{{ old('social_facebook', $settings['social_facebook'] ?? '') }}"
                                    class="block w-full rounded-lg border-gray-300 dark:border-slate-600 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 py-2.5 px-3 border dark:bg-slate-700 dark:text-white text-sm"
                                    placeholder="https://facebook.com/...">
                            </div>
                            <div>
                                <label class="block text-xs font-semibold text-gray-600 dark:text-gray-400 mb-1.5">TikTok</label>
                                <input type="url" name="social_tiktok" value="{{ old('social_tiktok', $settings['social_tiktok'] ?? '') }}"
                                    class="block w-full rounded-lg border-gray-300 dark:border-slate-600 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 py-2.5 px-3 border dark:bg-slate-700 dark:text-white text-sm"
                                    placeholder="https://tiktok.com/@...">
                            </div>
                            <div>
                                <label class="block text-xs font-semibold text-gray-600 dark:text-gray-400 mb-1.5">YouTube</label>
                                <input type="url" name="social_youtube" value="{{ old('social_youtube', $settings['social_youtube'] ?? '') }}"
                                    class="block w-full rounded-lg border-gray-300 dark:border-slate-600 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 py-2.5 px-3 border dark:bg-slate-700 dark:text-white text-sm"
                                    placeholder="https://youtube.com/@...">
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Submit Button --}}
            <div class="flex justify-end">
                <button type="submit" class="inline-flex items-center gap-2 px-6 py-3 bg-indigo-600 hover:bg-indigo-700 text-white text-sm font-bold rounded-xl shadow-sm transition-colors focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                    <x-heroicon-s-check class="w-4 h-4" /> Simpan Semua Pengaturan Footer
                </button>
            </div>

        </form>
    </div>
</x-admin-layout>
