@extends('layouts.admin-panel')

@section('title', 'Pengaturan ' . ucfirst(str_replace('_', ' ', $group)))
@section('header', 'Pengaturan Toko')
@section('subheader', 'Kelola konfigurasi sistem dan tampilan toko Anda.')

@section('content')
<div class="flex flex-col lg:flex-row gap-8">
    
    <!-- Sidebar Navigasi Pengaturan -->
    <aside class="w-full lg:w-64 flex-shrink-0">
        <nav class="space-y-1">
            @php
                $menus = [
                    ['id' => 'store', 'label' => 'Informasi Toko', 'icon' => 'M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4'],
                    ['id' => 'theme', 'label' => 'Tema & Tampilan', 'icon' => 'M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z'],
                    ['id' => 'landing_page', 'label' => 'Landing Page', 'icon' => 'M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4'],
                    ['id' => 'payment', 'label' => 'Pembayaran', 'icon' => 'M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z'],
                    ['id' => 'shipping', 'label' => 'Pengiriman', 'icon' => 'M9 17a2 2 0 11-4 0 2 2 0 014 0zM19 17a2 2 0 11-4 0 2 2 0 014 0zM13 5H4a1 1 0 00-1 1v11h2m14 0h2a1 1 0 001-1v-4.5a4.5 4.5 0 00-4.5-4.5H13V5z'],
                    ['id' => 'seo', 'label' => 'SEO & Meta', 'icon' => 'M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z'],
                ];
            @endphp

            @foreach($menus as $menu)
                <a href="{{ route('panel.settings.edit', $menu['id']) }}" 
                   class="flex items-center gap-3 px-4 py-3 rounded-xl text-sm font-semibold transition-all {{ $group === $menu['id'] ? 'bg-purple-600 text-white shadow-lg shadow-purple-200' : 'text-slate-600 hover:bg-white hover:text-purple-600' }}">
                    <svg class="w-5 h-5 {{ $group === $menu['id'] ? 'text-white' : 'text-slate-400' }}" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="{{ $menu['icon'] }}"/>
                    </svg>
                    {{ $menu['label'] }}
                </a>
            @endforeach
        </nav>
    </aside>

    <!-- Area Form Pengaturan -->
    <div class="flex-1">
        <div class="bg-white rounded-[2rem] border border-slate-100 shadow-xl shadow-slate-200/40 overflow-hidden">
            <form action="{{ route('panel.settings.update', $group) }}" method="POST" enctype="multipart/form-data">
                @csrf
                @method('PUT')

                <div class="p-10 space-y-10">
                    <div class="pb-6 border-b border-slate-50">
                        <h2 class="text-2xl font-bold text-slate-900 capitalize">{{ str_replace('_', ' ', $group) }} Settings</h2>
                        <p class="text-sm text-slate-500 mt-1 font-medium">Konfigurasikan detail {{ str_replace('_', ' ', $group) }} untuk operasional toko Anda.</p>
                    </div>

                    @if($group === 'store')
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                            <div class="space-y-6">
                                <div>
                                    <label class="block text-sm font-bold text-slate-700 mb-2 ml-1">Nama Toko <span class="text-red-500">*</span></label>
                                    <input type="text" name="store_name" value="{{ setting('store_name') }}" required
                                           class="w-full rounded-2xl border-slate-200 focus:border-purple-500 focus:ring-purple-500 px-5 py-4 bg-slate-50/50 text-sm font-semibold shadow-sm transition-all">
                                </div>
                                <div>
                                    <label class="block text-sm font-bold text-slate-700 mb-2 ml-1">Tagline Toko</label>
                                    <input type="text" name="store_tagline" value="{{ setting('store_tagline') }}" 
                                           class="w-full rounded-2xl border-slate-200 focus:border-purple-500 focus:ring-purple-500 px-5 py-4 bg-slate-50/50 text-sm font-semibold shadow-sm transition-all">
                                </div>
                            </div>
                            <div>
                                <label class="block text-sm font-bold text-slate-700 mb-3 ml-1">Logo Toko</label>
                                <div class="flex items-center gap-6 p-6 border-2 border-dashed border-slate-100 rounded-3xl bg-slate-50/30">
                                    <div class="w-24 h-24 rounded-2xl bg-white shadow-md border border-slate-50 flex items-center justify-center overflow-hidden flex-shrink-0">
                                        @if(setting('store_logo'))
                                            <img src="{{ asset('storage/' . setting('store_logo')) }}" class="w-full h-full object-contain">
                                        @else
                                            <svg class="w-10 h-10 text-slate-200" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
                                        @endif
                                    </div>
                                    <div class="flex-1">
                                        <input type="file" name="store_logo" class="text-xs text-slate-500 file:mr-4 file:py-2.5 file:px-5 file:rounded-xl file:border-0 file:text-xs file:font-bold file:bg-purple-600 file:text-white hover:file:bg-purple-700 cursor-pointer">
                                        <p class="text-[10px] text-slate-400 mt-2">Format: PNG, JPG (Max 2MB)</p>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                            <div>
                                <label class="block text-sm font-bold text-slate-700 mb-2 ml-1">Email Kontak</label>
                                <input type="email" name="store_email" value="{{ setting('store_email') }}" 
                                       class="w-full rounded-2xl border-slate-200 focus:border-purple-500 focus:ring-purple-500 px-5 py-4 bg-slate-50/50 text-sm font-semibold shadow-sm transition-all">
                            </div>
                            <div>
                                <label class="block text-sm font-bold text-slate-700 mb-2 ml-1">WhatsApp CS</label>
                                <input type="text" name="store_phone" value="{{ setting('store_phone') }}" 
                                       class="w-full rounded-2xl border-slate-200 focus:border-purple-500 focus:ring-purple-500 px-5 py-4 bg-slate-50/50 text-sm font-semibold shadow-sm transition-all" placeholder="628123456789">
                            </div>
                        </div>

                        <div>
                            <label class="block text-sm font-bold text-slate-700 mb-2 ml-1">Alamat Lengkap</label>
                            <textarea name="store_address" rows="4" 
                                      class="w-full rounded-2xl border-slate-200 focus:border-purple-500 focus:ring-purple-500 px-5 py-4 bg-slate-50/50 text-sm font-semibold shadow-sm transition-all">{{ setting('store_address') }}</textarea>
                        </div>

                    @elseif($group === 'theme')
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-10">
                            <div>
                                <label class="block text-sm font-bold text-slate-700 mb-4 ml-1">Warna Identitas (Primary Color)</label>
                                <div class="flex items-center gap-6 p-6 bg-slate-50/50 rounded-3xl border border-slate-50">
                                    <input type="color" name="theme_primary_color" value="{{ setting('theme_primary_color', '#9333ea') }}" 
                                           class="w-16 h-16 rounded-2xl cursor-pointer border-4 border-white shadow-lg p-0 overflow-hidden">
                                    <div class="flex-1">
                                        <input type="text" value="{{ setting('theme_primary_color', '#9333ea') }}" readonly 
                                               class="w-full bg-white border-slate-100 rounded-xl text-sm font-mono px-4 py-2.5 text-slate-500 shadow-sm">
                                    </div>
                                </div>
                            </div>
                            <div>
                                <label class="block text-sm font-bold text-slate-700 mb-4 ml-1">Pilihan Tema</label>
                                <select name="theme_active" class="w-full rounded-2xl border-slate-200 focus:border-purple-500 focus:ring-purple-500 px-5 py-4 bg-slate-50/50 text-sm font-bold shadow-sm transition-all appearance-none">
                                    <option value="minimalist" {{ setting('theme_active') === 'minimalist' ? 'selected' : '' }}>✨ Minimalist (Default)</option>
                                    <option value="modern" {{ setting('theme_active') === 'modern' ? 'selected' : '' }}>💎 Modern Shop</option>
                                    <option value="artisanal" {{ setting('theme_active') === 'artisanal' ? 'selected' : '' }}>🎨 Artisanal</option>
                                </select>
                            </div>
                        </div>

                    @elseif($group === 'landing_page')
                        <div class="space-y-8">
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                                <div>
                                    <label class="block text-sm font-bold text-slate-700 mb-2 ml-1">Hero Title (Headline)</label>
                                    <input type="text" name="landing_hero_title" value="{{ setting('landing_hero_title') }}" 
                                           class="w-full rounded-2xl border-slate-200 focus:border-purple-500 focus:ring-purple-500 px-5 py-4 bg-slate-50/50 text-sm font-semibold shadow-sm transition-all">
                                </div>
                                <div>
                                    <label class="block text-sm font-bold text-slate-700 mb-2 ml-1">Hero Sub-title (Small Text Above)</label>
                                    <input type="text" name="landing_hero_subtitle" value="{{ setting('landing_hero_subtitle') }}" 
                                           class="w-full rounded-2xl border-slate-200 focus:border-purple-500 focus:ring-purple-500 px-5 py-4 bg-slate-50/50 text-sm font-semibold shadow-sm transition-all">
                                </div>
                            </div>
                            <div>
                                <label class="block text-sm font-bold text-slate-700 mb-2 ml-1">Hero Description</label>
                                <textarea name="landing_hero_description" rows="3" 
                                          class="w-full rounded-2xl border-slate-200 focus:border-purple-500 focus:ring-purple-500 px-5 py-4 bg-slate-50/50 text-sm font-semibold shadow-sm transition-all">{{ setting('landing_hero_description') }}</textarea>
                            </div>
                            <div>
                                <label class="block text-sm font-bold text-slate-700 mb-3 ml-1">Hero Image (Background)</label>
                                <div class="flex items-center gap-6 p-6 border-2 border-dashed border-slate-100 rounded-3xl bg-slate-50/30">
                                    <div class="w-32 h-20 rounded-2xl bg-white shadow-md border border-slate-50 flex items-center justify-center overflow-hidden flex-shrink-0">
                                        @if(setting('landing_hero_image'))
                                            <img src="{{ asset('storage/' . setting('landing_hero_image')) }}" class="w-full h-full object-cover">
                                        @else
                                            <svg class="w-8 h-8 text-slate-200" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
                                        @endif
                                    </div>
                                    <div class="flex-1">
                                        <input type="file" name="landing_hero_image" class="text-xs text-slate-500 file:mr-4 file:py-2.5 file:px-5 file:rounded-xl file:border-0 file:text-xs file:font-bold file:bg-purple-600 file:text-white hover:file:bg-purple-700 cursor-pointer">
                                        <p class="text-[10px] text-slate-400 mt-2">Format: PNG, JPG (Recommended: 1920x1080)</p>
                                    </div>
                                </div>
                            </div>

                            <hr class="border-slate-100">

                            <!-- Stats Section -->
                            <div>
                                <h4 class="text-xs font-black uppercase tracking-widest text-slate-400 mb-6 flex items-center gap-3">
                                    <span class="w-8 h-px bg-slate-200"></span>
                                    Statistik Toko (Hero)
                                </h4>
                                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                                    @for($i=1; $i<=3; $i++)
                                        <div class="p-5 bg-slate-50/50 rounded-2xl border border-slate-100 space-y-4">
                                            <div>
                                                <label class="block text-[10px] font-black uppercase tracking-widest text-slate-400 mb-2">Value {{ $i }} (e.g. 10k+)</label>
                                                <input type="text" name="landing_stats_{{ $i }}_value" value="{{ setting('landing_stats_' . $i . '_value') }}" class="w-full rounded-xl border-slate-200 text-sm font-bold">
                                            </div>
                                            <div>
                                                <label class="block text-[10px] font-black uppercase tracking-widest text-slate-400 mb-2">Label {{ $i }} (e.g. Customers)</label>
                                                <input type="text" name="landing_stats_{{ $i }}_label" value="{{ setting('landing_stats_' . $i . '_label') }}" class="w-full rounded-xl border-slate-200 text-sm font-bold">
                                            </div>
                                        </div>
                                    @endfor
                                </div>
                            </div>

                            <hr class="border-slate-100">

                            <!-- Features Section -->
                            <div>
                                <h4 class="text-xs font-black uppercase tracking-widest text-slate-400 mb-6 flex items-center gap-3">
                                    <span class="w-8 h-px bg-slate-200"></span>
                                    Keunggulan / Fitur
                                </h4>
                                <div class="space-y-6">
                                    @for($i=1; $i<=3; $i++)
                                        <div class="p-6 bg-slate-50/50 rounded-2xl border border-slate-100 grid grid-cols-1 md:grid-cols-2 gap-6">
                                            <div>
                                                <label class="block text-[10px] font-black uppercase tracking-widest text-slate-400 mb-2">Judul Keunggulan {{ $i }}</label>
                                                <input type="text" name="landing_feature_{{ $i }}_title" value="{{ setting('landing_feature_' . $i . '_title') }}" class="w-full rounded-xl border-slate-200 text-sm font-bold">
                                            </div>
                                            <div>
                                                <label class="block text-[10px] font-black uppercase tracking-widest text-slate-400 mb-2">Deskripsi Singkat {{ $i }}</label>
                                                <input type="text" name="landing_feature_{{ $i }}_desc" value="{{ setting('landing_feature_' . $i . '_desc') }}" class="w-full rounded-xl border-slate-200 text-sm font-bold">
                                            </div>
                                        </div>
                                    @endfor
                                </div>
                            </div>

                            <hr class="border-slate-100">

                            <!-- About Us Section -->
                            <div class="space-y-6">
                                <h4 class="text-xs font-black uppercase tracking-widest text-slate-400 mb-6 flex items-center gap-3">
                                    <span class="w-8 h-px bg-slate-200"></span>
                                    Tentang Toko (Section Bawah)
                                </h4>
                                <div>
                                    <label class="block text-sm font-bold text-slate-700 mb-2 ml-1">Judul "Tentang Kami"</label>
                                    <input type="text" name="landing_about_title" value="{{ setting('landing_about_title') }}" 
                                           class="w-full rounded-2xl border-slate-200 focus:border-purple-500 focus:ring-purple-500 px-5 py-4 bg-slate-50/50 text-sm font-semibold shadow-sm transition-all">
                                </div>
                                <div>
                                    <label class="block text-sm font-bold text-slate-700 mb-2 ml-1">Isi "Tentang Kami"</label>
                                    <textarea name="landing_about_content" rows="4" 
                                              class="w-full rounded-2xl border-slate-200 focus:border-purple-500 focus:ring-purple-500 px-5 py-4 bg-slate-50/50 text-sm font-semibold shadow-sm transition-all">{{ setting('landing_about_content') }}</textarea>
                                </div>
                                <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                                    <div>
                                        <label class="block text-sm font-bold text-slate-700 mb-3 ml-1">Gambar Dekorasi 1 (Tentang Kami)</label>
                                        <div class="flex items-center gap-6 p-4 border-2 border-dashed border-slate-100 rounded-3xl bg-slate-50/30">
                                            <div class="w-20 h-20 rounded-2xl bg-white shadow-md border border-slate-50 flex items-center justify-center overflow-hidden flex-shrink-0">
                                                @if(setting('landing_about_image_1'))
                                                    <img src="{{ asset('storage/' . setting('landing_about_image_1')) }}" class="w-full h-full object-cover">
                                                @else
                                                    <svg class="w-6 h-6 text-slate-200" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
                                                @endif
                                            </div>
                                            <input type="file" name="landing_about_image_1" class="text-[10px] text-slate-500 file:mr-3 file:py-1.5 file:px-3 file:rounded-lg file:border-0 file:bg-purple-600 file:text-white cursor-pointer">
                                        </div>
                                    </div>
                                    <div>
                                        <label class="block text-sm font-bold text-slate-700 mb-3 ml-1">Gambar Dekorasi 2 (Tentang Kami)</label>
                                        <div class="flex items-center gap-6 p-4 border-2 border-dashed border-slate-100 rounded-3xl bg-slate-50/30">
                                            <div class="w-20 h-20 rounded-2xl bg-white shadow-md border border-slate-50 flex items-center justify-center overflow-hidden flex-shrink-0">
                                                @if(setting('landing_about_image_2'))
                                                    <img src="{{ asset('storage/' . setting('landing_about_image_2')) }}" class="w-full h-full object-cover">
                                                @else
                                                    <svg class="w-6 h-6 text-slate-200" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
                                                @endif
                                            </div>
                                            <input type="file" name="landing_about_image_2" class="text-[10px] text-slate-500 file:mr-3 file:py-1.5 file:px-3 file:rounded-lg file:border-0 file:bg-purple-600 file:text-white cursor-pointer">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                    @elseif($group === 'payment')
                        <div class="space-y-10">
                            <!-- Payment Gateway Section -->
                            <div class="p-8 bg-slate-50/50 rounded-[2rem] border border-slate-100 space-y-6">
                                <div class="flex items-center justify-between">
                                    <div class="flex items-center gap-4">
                                        <div class="w-12 h-12 bg-white rounded-2xl shadow-sm flex items-center justify-center text-purple-600">
                                            <svg class="w-7 h-7" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
                                        </div>
                                        <div>
                                            <h4 class="text-base font-bold text-slate-900">Payment Gateway (Duitku)</h4>
                                            <p class="text-xs text-slate-500">Otomatis via VA, E-Wallet, Retail, dll.</p>
                                        </div>
                                    </div>
                                    <label class="relative inline-flex items-center cursor-pointer">
                                        <input type="checkbox" name="payment_gateway" value="1" class="sr-only peer" {{ setting('payment_gateway') ? 'checked' : '' }}>
                                        <div class="w-11 h-6 bg-slate-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-purple-300 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-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-purple-600"></div>
                                    </label>
                                </div>

                                <div class="grid grid-cols-1 md:grid-cols-2 gap-6 pt-4 border-t border-slate-100">
                                    <div>
                                        <label class="block text-[10px] font-black uppercase tracking-widest text-slate-400 mb-2 ml-1">Merchant Code</label>
                                        <input type="text" name="payment_duitku_merchant_code" value="{{ setting('payment_duitku_merchant_code') }}" 
                                               class="w-full rounded-2xl border-slate-200 focus:border-purple-500 focus:ring-purple-500 px-5 py-4 bg-white text-sm font-semibold shadow-sm transition-all">
                                    </div>
                                    <div>
                                        <label class="block text-[10px] font-black uppercase tracking-widest text-slate-400 mb-2 ml-1">API Key</label>
                                        <input type="password" name="payment_duitku_api_key" value="{{ setting('payment_duitku_api_key') }}" 
                                               class="w-full rounded-2xl border-slate-200 focus:border-purple-500 focus:ring-purple-500 px-5 py-4 bg-white text-sm font-semibold shadow-sm transition-all">
                                    </div>
                                </div>
                            </div>

                            <!-- Manual Transfer Section -->
                            <div class="p-8 bg-slate-50/50 rounded-[2rem] border border-slate-100 space-y-6">
                                <div class="flex items-center justify-between">
                                    <div class="flex items-center gap-4">
                                        <div class="w-12 h-12 bg-white rounded-2xl shadow-sm flex items-center justify-center text-blue-600">
                                            <svg class="w-7 h-7" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/></svg>
                                        </div>
                                        <div>
                                            <h4 class="text-base font-bold text-slate-900">Transfer Bank Manual</h4>
                                            <p class="text-xs text-slate-500">Pelanggan upload bukti transfer.</p>
                                        </div>
                                    </div>
                                    <label class="relative inline-flex items-center cursor-pointer">
                                        <input type="checkbox" name="payment_manual_transfer" value="1" class="sr-only peer" {{ setting('payment_manual_transfer') ? 'checked' : '' }}>
                                        <div class="w-11 h-6 bg-slate-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 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-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
                                    </label>
                                </div>

                                <div class="grid grid-cols-1 md:grid-cols-3 gap-6 pt-4 border-t border-slate-100">
                                    <div>
                                        <label class="block text-[10px] font-black uppercase tracking-widest text-slate-400 mb-2 ml-1">Nama Bank (e.g. BCA)</label>
                                        <input type="text" name="payment_bank_name" value="{{ setting('payment_bank_name') }}" 
                                               class="w-full rounded-2xl border-slate-200 focus:border-purple-500 focus:ring-purple-500 px-5 py-4 bg-white text-sm font-semibold shadow-sm transition-all">
                                    </div>
                                    <div>
                                        <label class="block text-[10px] font-black uppercase tracking-widest text-slate-400 mb-2 ml-1">Nomor Rekening</label>
                                        <input type="text" name="payment_bank_number" value="{{ setting('payment_bank_number') }}" 
                                               class="w-full rounded-2xl border-slate-200 focus:border-purple-500 focus:ring-purple-500 px-5 py-4 bg-white text-sm font-semibold shadow-sm transition-all">
                                    </div>
                                    <div>
                                        <label class="block text-[10px] font-black uppercase tracking-widest text-slate-400 mb-2 ml-1">Nama Pemilik (A/N)</label>
                                        <input type="text" name="payment_bank_holder" value="{{ setting('payment_bank_holder') }}" 
                                               class="w-full rounded-2xl border-slate-200 focus:border-purple-500 focus:ring-purple-500 px-5 py-4 bg-white text-sm font-semibold shadow-sm transition-all">
                                    </div>
                                </div>

                                <div class="pt-4 border-t border-slate-100">
                                    <label class="block text-[10px] font-black uppercase tracking-widest text-slate-400 mb-2 ml-1">Instruksi Tambahan (Opsional)</label>
                                    <textarea name="payment_manual_instructions" rows="2" 
                                              class="w-full rounded-2xl border-slate-200 focus:border-purple-500 focus:ring-purple-500 px-5 py-4 bg-white text-sm font-semibold shadow-sm transition-all"
                                              placeholder="Contoh: Harap lampirkan berita acara 'Bayar Pesanan #OrderID'">{{ setting('payment_manual_instructions') }}</textarea>
                                </div>
                            </div>

                            <!-- QRIS Section -->
                            <div class="p-8 bg-slate-50/50 rounded-[2rem] border border-slate-100 space-y-6">
                                <div class="flex items-center justify-between">
                                    <div class="flex items-center gap-4">
                                        <div class="w-12 h-12 bg-white rounded-2xl shadow-sm flex items-center justify-center text-purple-600">
                                            <svg class="w-7 h-7" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v1m6 11h2m-6 0h-2v4m0-11v3m0 0h.01M12 12h4.01M16 20h4M4 12h4m12 0h.01M5 8h2a1 1 0 001-1V5a1 1 0 00-1-1H5a1 1 0 00-1 1v2a1 1 0 001 1zm12 0h2a1 1 0 001-1V5a1 1 0 00-1-1h-2a1 1 0 00-1 1v2a1 1 0 001 1zM5 20h2a1 1 0 001-1v-2a1 1 0 00-1-1H5a1 1 0 00-1 1v2a1 1 0 001 1z"/></svg>
                                        </div>
                                        <div>
                                            <h4 class="text-base font-bold text-slate-900">QRIS Manual</h4>
                                            <p class="text-xs text-slate-500">Upload QRIS statis toko Anda.</p>
                                        </div>
                                    </div>
                                    <label class="relative inline-flex items-center cursor-pointer">
                                        <input type="checkbox" name="payment_manual_qris" value="1" class="sr-only peer" {{ setting('payment_manual_qris') ? 'checked' : '' }}>
                                        <div class="w-11 h-6 bg-slate-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-purple-300 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-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-purple-600"></div>
                                    </label>
                                </div>

                                <div class="grid grid-cols-1 md:grid-cols-2 gap-8 pt-4 border-t border-slate-100">
                                    <div class="flex items-center gap-6 p-4 bg-white rounded-2xl border border-slate-100">
                                        <div class="w-16 h-16 bg-slate-50 rounded-xl overflow-hidden border border-slate-100 flex-shrink-0">
                                            @if(setting('payment_qris_image'))
                                                <img src="{{ asset('storage/' . setting('payment_qris_image')) }}" class="w-full h-full object-cover">
                                            @else
                                                <div class="w-full h-full flex items-center justify-center text-slate-200"><svg class="w-8 h-8" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v1m6 11h2m-6 0h-2v4m0-11v3m0 0h.01M12 12h4.01M16 20h4M4 12h4m12 0h.01M5 8h2a1 1 0 001-1V5a1 1 0 00-1-1H5a1 1 0 00-1 1v2a1 1 0 001 1zm12 0h2a1 1 0 001-1V5a1 1 0 00-1-1h-2a1 1 0 00-1 1v2a1 1 0 001 1zM5 20h2a1 1 0 001-1v-2a1 1 0 00-1-1H5a1 1 0 00-1 1v2a1 1 0 001 1z"/></svg></div>
                                            @endif
                                        </div>
                                        <div class="flex-1">
                                            <label class="block text-[10px] font-black uppercase tracking-widest text-slate-400 mb-2">Upload Gambar QRIS</label>
                                            <input type="file" name="payment_qris_image" class="text-[10px] text-slate-500 file:mr-3 file:py-1.5 file:px-3 file:rounded-lg file:border-0 file:bg-purple-600 file:text-white cursor-pointer">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                    @elseif($group === 'shipping')
                        <div class="space-y-8">
                            <div class="bg-blue-50/50 p-6 rounded-3xl border border-blue-100 flex items-start gap-4">
                                <div class="w-10 h-10 bg-white rounded-xl shadow-sm flex items-center justify-center flex-shrink-0">
                                    <svg class="w-6 h-6 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                                </div>
                                <div>
                                    <h4 class="text-sm font-bold text-slate-900">BiteShip Logistics Integration</h4>
                                    <p class="text-xs text-slate-500 mt-1">Integrasikan kurir JNE, J&T, SiCepat secara otomatis dengan BiteShip API.</p>
                                </div>
                            </div>

                            <div>
                                <label class="block text-sm font-bold text-slate-700 mb-2 ml-1">BiteShip API Token</label>
                                <input type="password" name="shipping_biteship_token" value="{{ setting('shipping_biteship_token') }}" 
                                       class="w-full rounded-2xl border-slate-200 focus:border-purple-500 focus:ring-purple-500 px-5 py-4 bg-slate-50/50 text-sm font-semibold shadow-sm transition-all">
                            </div>

                            <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                                <div>
                                    <label class="block text-sm font-bold text-slate-700 mb-2 ml-1">Origin Area ID (BiteShip)</label>
                                    <input type="text" name="shipping_origin_area_id" value="{{ setting('shipping_origin_area_id') }}" 
                                           class="w-full rounded-2xl border-slate-200 focus:border-purple-500 focus:ring-purple-500 px-5 py-4 bg-slate-50/50 text-sm font-semibold shadow-sm transition-all" placeholder="ID-JKT-123">
                                </div>
                                <div>
                                    <label class="block text-sm font-bold text-slate-700 mb-2 ml-1">Origin Postal Code</label>
                                    <input type="text" name="shipping_origin_postal_code" value="{{ setting('shipping_origin_postal_code') }}" 
                                           class="w-full rounded-2xl border-slate-200 focus:border-purple-500 focus:ring-purple-500 px-5 py-4 bg-slate-50/50 text-sm font-semibold shadow-sm transition-all" placeholder="12345">
                                </div>
                            </div>
                        </div>

                    @elseif($group === 'seo')
                        <div class="space-y-8">
                            <div class="grid grid-cols-1 gap-8">
                                <div>
                                    <label class="block text-sm font-bold text-slate-700 mb-2 ml-1">Meta Title (Home)</label>
                                    <input type="text" name="seo_meta_title" value="{{ setting('seo_meta_title') }}" 
                                           class="w-full rounded-2xl border-slate-200 focus:border-purple-500 focus:ring-purple-500 px-5 py-4 bg-slate-50/50 text-sm font-semibold shadow-sm transition-all">
                                </div>
                                <div>
                                    <label class="block text-sm font-bold text-slate-700 mb-2 ml-1">Meta Keywords</label>
                                    <input type="text" name="seo_meta_keywords" value="{{ setting('seo_meta_keywords') }}" 
                                           class="w-full rounded-2xl border-slate-200 focus:border-purple-500 focus:ring-purple-500 px-5 py-4 bg-slate-50/50 text-sm font-semibold shadow-sm transition-all" placeholder="toko online, belanja, murah">
                                </div>
                                <div>
                                    <label class="block text-sm font-bold text-slate-700 mb-2 ml-1">Meta Description (Home)</label>
                                    <textarea name="seo_meta_description" rows="4" 
                                              class="w-full rounded-2xl border-slate-200 focus:border-purple-500 focus:ring-purple-500 px-5 py-4 bg-slate-50/50 text-sm font-semibold shadow-sm transition-all">{{ setting('seo_meta_description') }}</textarea>
                                </div>
                                <div>
                                    <label class="block text-sm font-bold text-slate-700 mb-2 ml-1">Google Analytics ID</label>
                                    <input type="text" name="seo_google_analytics_id" value="{{ setting('seo_google_analytics_id') }}" 
                                           class="w-full rounded-2xl border-slate-200 focus:border-purple-500 focus:ring-purple-500 px-5 py-4 bg-slate-50/50 text-sm font-semibold shadow-sm transition-all" placeholder="UA-XXXXX-X or G-XXXXXX">
                                </div>
                            </div>
                        </div>

                    @else
                        <div class="py-20 text-center bg-slate-50/50 rounded-[2.5rem] border-2 border-dashed border-slate-100">
                            <div class="w-20 h-20 bg-white rounded-3xl shadow-xl shadow-slate-200/50 mx-auto mb-6 flex items-center justify-center">
                                <svg class="w-10 h-10 text-purple-200" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"/></svg>
                            </div>
                            <h3 class="text-xl font-bold text-slate-900">Modul Sedang Disiapkan</h3>
                            <p class="text-slate-500 mt-2 max-w-sm mx-auto font-medium">Halaman pengaturan untuk "{{ str_replace('_', ' ', $group) }}" akan segera tersedia.</p>
                        </div>
                    @endif
                </div>

                <div class="bg-slate-50/80 backdrop-blur-md px-10 py-8 flex items-center justify-between border-t border-slate-100">
                    <div class="flex items-center gap-3">
                        <div class="w-2 h-2 rounded-full bg-green-500 animate-pulse"></div>
                        <p class="text-xs text-slate-500 font-bold">Status: Siap untuk disimpan</p>
                    </div>
                    <button type="submit" class="inline-flex items-center gap-3 px-10 py-4 bg-purple-600 text-white rounded-2xl font-bold text-base shadow-2xl shadow-purple-600/30 hover:bg-purple-700 hover:scale-[1.02] active:scale-[0.98] transition-all">
                        <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
                        Simpan Perubahan
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection