@extends('layouts.admin')

@section('title', 'Settings')

@section('content')
<div class="flex justify-between items-center mb-6">
    <h1 class="text-2xl font-bold">Settings</h1>
</div>

<div class="bg-white rounded-lg shadow">
    <form action="/admin/settings/update" method="POST" enctype="multipart/form-data">
        @csrf
        
        <!-- Tabs Navigation -->
        <div class="border-b border-gray-200">
            <nav class="flex -mb-px">
                <button type="button" onclick="showTab('general')" class="tab-btn active px-6 py-3 text-sm font-medium border-b-2 border-[#00b8ff] text-[#00b8ff]" id="tab-general-btn">General</button>
                <button type="button" onclick="showTab('contact')" class="tab-btn px-6 py-3 text-sm font-medium text-gray-500 hover:text-gray-700 border-b-2 border-transparent" id="tab-contact-btn">Contact & Social</button>
                <button type="button" onclick="showTab('seo')" class="tab-btn px-6 py-3 text-sm font-medium text-gray-500 hover:text-gray-700 border-b-2 border-transparent" id="tab-seo-btn">SEO</button>
            </nav>
        </div>
        
        <!-- Tab Content -->
        <div class="p-6">
            <!-- General Tab -->
            <div id="tab-general" class="tab-content">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label class="block mb-2 text-sm font-medium">Site Name</label>
                        <input type="text" name="site_name" value="{{ $settings->site_name }}" class="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-[#00b8ff] focus:border-transparent">
                    </div>
                    
                    <div>
                        <label class="block mb-2 text-sm font-medium">Currency</label>
                        <input type="text" name="currency" value="{{ $settings->currency ?? 'IDR' }}" class="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-[#00b8ff] focus:border-transparent">
                    </div>
                    
                    <div>
                        <label class="block mb-2 text-sm font-medium">Cashback Percentage</label>
                        <input type="number" name="cashback_percent" value="{{ $settings->cashback_percent ?? 0 }}" class="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-[#00b8ff] focus:border-transparent">
                    </div>
                    
                    <div class="col-span-2">
                        <label class="block mb-2 text-sm font-medium">Address</label>
                        <textarea name="address" rows="3" class="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-[#00b8ff] focus:border-transparent">{{ $settings->address }}</textarea>
                    </div>
                    
                    <div class="col-span-2">
                        <label class="block mb-2 text-sm font-medium">Operational Hours</label>
                        <input type="text" name="operational_hours" value="{{ $settings->operational_hours }}" placeholder="e.g. Mon-Fri: 09:00-18:00" class="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-[#00b8ff] focus:border-transparent">
                    </div>
                    
                    <div>
                        <label class="block mb-2 text-sm font-medium">Logo</label>
                        <input type="file" name="logo" accept="image/*" class="w-full px-3 py-2 border rounded-lg">
                        @if($settings->logo)
                        <div class="mt-2">
                            <img src="{{ asset($settings->logo) }}" class="h-12 object-contain">
                        </div>
                        @endif
                    </div>
                    
                    <div>
                        <label class="block mb-2 text-sm font-medium">Favicon</label>
                        <input type="file" name="favicon" accept="image/*" class="w-full px-3 py-2 border rounded-lg">
                        @if($settings->favicon)
                        <div class="mt-2">
                            <img src="{{ asset($settings->favicon) }}" class="h-8 w-8 object-contain">
                        </div>
                        @endif
                    </div>
                </div>
            </div>
            
            <!-- Contact & Social Tab -->
            <div id="tab-contact" class="tab-content hidden">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label class="block mb-2 text-sm font-medium">Support Email</label>
                        <input type="email" name="support_email" value="{{ $settings->support_email }}" class="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-[#00b8ff] focus:border-transparent">
                    </div>
                    
                    <div>
                        <label class="block mb-2 text-sm font-medium">Phone Number</label>
                        <input type="text" name="phone" value="{{ $settings->phone }}" class="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-[#00b8ff] focus:border-transparent">
                    </div>
                    
                    <div>
                        <label class="block mb-2 text-sm font-medium">WhatsApp</label>
                        <input type="text" name="whatsapp" value="{{ $settings->whatsapp }}" placeholder="e.g. 628123456789" class="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-[#00b8ff] focus:border-transparent">
                    </div>
                    
                    <div class="col-span-2 border-t border-gray-200 pt-4 mt-2">
                        <h3 class="text-lg font-medium mb-4">Social Media</h3>
                    </div>
                    
                    <div>
                        <label class="block mb-2 text-sm font-medium">Facebook</label>
                        <input type="url" name="facebook" value="{{ $settings->facebook }}" placeholder="https://facebook.com/..." class="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-[#00b8ff] focus:border-transparent">
                    </div>
                    
                    <div>
                        <label class="block mb-2 text-sm font-medium">Instagram</label>
                        <input type="url" name="instagram" value="{{ $settings->instagram }}" placeholder="https://instagram.com/..." class="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-[#00b8ff] focus:border-transparent">
                    </div>
                    
                    <div>
                        <label class="block mb-2 text-sm font-medium">Twitter / X</label>
                        <input type="url" name="twitter" value="{{ $settings->twitter }}" placeholder="https://twitter.com/..." class="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-[#00b8ff] focus:border-transparent">
                    </div>
                    
                    <div>
                        <label class="block mb-2 text-sm font-medium">YouTube</label>
                        <input type="url" name="youtube" value="{{ $settings->youtube }}" placeholder="https://youtube.com/..." class="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-[#00b8ff] focus:border-transparent">
                    </div>
                    
                    <div>
                        <label class="block mb-2 text-sm font-medium">TikTok</label>
                        <input type="url" name="tiktok" value="{{ $settings->tiktok }}" placeholder="https://tiktok.com/..." class="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-[#00b8ff] focus:border-transparent">
                    </div>
                    
                    <div>
                        <label class="block mb-2 text-sm font-medium">Discord</label>
                        <input type="text" name="discord" value="{{ $settings->discord }}" placeholder="Invite link or server name" class="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-[#00b8ff] focus:border-transparent">
                    </div>
                    
                    <div>
                        <label class="block mb-2 text-sm font-medium">Telegram</label>
                        <input type="text" name="telegram" value="{{ $settings->telegram }}" placeholder="Username or group link" class="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-[#00b8ff] focus:border-transparent">
                    </div>
                </div>
            </div>
            
            <!-- SEO Tab -->
            <div id="tab-seo" class="tab-content hidden">
                <div class="grid grid-cols-1 gap-6">
                    <div>
                        <label class="block mb-2 text-sm font-medium">Meta Description</label>
                        <textarea name="meta_description" rows="4" class="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-[#00b8ff] focus:border-transparent">{{ $settings->meta_description }}</textarea>
                        <p class="text-xs text-gray-500 mt-1">Recommended: 150-160 characters</p>
                    </div>
                    
                    <div>
                        <label class="block mb-2 text-sm font-medium">Meta Keywords</label>
                        <textarea name="meta_keywords" rows="3" class="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-[#00b8ff] focus:border-transparent">{{ $settings->meta_keywords }}</textarea>
                        <p class="text-xs text-gray-500 mt-1">Separate with commas</p>
                    </div>
                </div>
            </div>
            
            <!-- Submit Button -->
            <div class="mt-6 pt-6 border-t border-gray-200">
                <button type="submit" class="bg-[#00b8ff] hover:bg-[#009bd6] text-white px-6 py-2 rounded-lg transition">
                    Save Settings
                </button>
            </div>
        </div>
    </form>
</div>

<script>
function showTab(tabName) {
    // Hide all tabs
    document.querySelectorAll('.tab-content').forEach(tab => {
        tab.classList.add('hidden');
    });
    
    // Remove active class from all buttons
    document.querySelectorAll('.tab-btn').forEach(btn => {
        btn.classList.remove('active', 'border-[#00b8ff]', 'text-[#00b8ff]');
        btn.classList.add('text-gray-500', 'border-transparent');
    });
    
    // Show selected tab
    document.getElementById('tab-' + tabName).classList.remove('hidden');
    
    // Activate button
    const activeBtn = document.getElementById('tab-' + tabName + '-btn');
    activeBtn.classList.add('active', 'border-[#00b8ff]', 'text-[#00b8ff]');
    activeBtn.classList.remove('text-gray-500', 'border-transparent');
}
</script>
@endsection