@extends('admin.layouts.app')

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

@section('content')
<div class="fade-in">
    <!-- Settings Form -->
    <form action="{{ route('admin.settings.update') }}" method="POST" enctype="multipart/form-data" id="settingsForm">
        @csrf
        @method('PUT')
        <input type="hidden" name="tab" id="activeTab" value="{{ $activeTab }}">
        
        <!-- Tabs Navigation -->
        <div class="bg-white dark:bg-gray-950 border border-gray-200 dark:border-gray-800 rounded-lg mb-6">
            <div class="border-b border-gray-200 dark:border-gray-800">
                <nav class="flex flex-wrap -mb-px px-4 md:px-6" aria-label="Tabs">
                    <button type="button" onclick="switchTab('general')" 
                            class="tab-button px-4 py-3 text-sm font-medium border-b-2 transition-colors {{ $activeTab === 'general' ? 'border-blue-600 text-blue-600 dark:text-blue-400' : 'border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 hover:border-gray-300 dark:hover:border-gray-600' }}">
                        <i class="fas fa-cog mr-2"></i>General
                    </button>
                    <button type="button" onclick="switchTab('seo')" 
                            class="tab-button px-4 py-3 text-sm font-medium border-b-2 transition-colors {{ $activeTab === 'seo' ? 'border-blue-600 text-blue-600 dark:text-blue-400' : 'border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 hover:border-gray-300 dark:hover:border-gray-600' }}">
                        <i class="fas fa-search mr-2"></i>SEO
                    </button>
                    <button type="button" onclick="switchTab('email')" 
                            class="tab-button px-4 py-3 text-sm font-medium border-b-2 transition-colors {{ $activeTab === 'email' ? 'border-blue-600 text-blue-600 dark:text-blue-400' : 'border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 hover:border-gray-300 dark:hover:border-gray-600' }}">
                        <i class="fas fa-envelope mr-2"></i>Email
                    </button>
                    <button type="button" onclick="switchTab('social')" 
                            class="tab-button px-4 py-3 text-sm font-medium border-b-2 transition-colors {{ $activeTab === 'social' ? 'border-blue-600 text-blue-600 dark:text-blue-400' : 'border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 hover:border-gray-300 dark:hover:border-gray-600' }}">
                        <i class="fas fa-share-alt mr-2"></i>Social Media
                    </button>
                    <button type="button" onclick="switchTab('maintenance')" 
                            class="tab-button px-4 py-3 text-sm font-medium border-b-2 transition-colors {{ $activeTab === 'maintenance' ? 'border-blue-600 text-blue-600 dark:text-blue-400' : 'border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 hover:border-gray-300 dark:hover:border-gray-600' }}">
                        <i class="fas fa-tools mr-2"></i>Maintenance
                    </button>
                </nav>
            </div>
        </div>

        <!-- Tab Content -->
        <div class="bg-white dark:bg-gray-950 border border-gray-200 dark:border-gray-800 rounded-lg overflow-hidden">
            <div class="p-6">
                @foreach(['general', 'seo', 'email', 'social', 'maintenance'] as $group)
                    <div id="tab-{{ $group }}" class="tab-content {{ $activeTab === $group ? '' : 'hidden' }}">
                        <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-6 capitalize">{{ $group }} Settings</h3>
                        
                        <div class="space-y-6">
                            @php
                                $groupSettings = $groups->get($group, collect());
                            @endphp
                            
                            @forelse($groupSettings as $setting)
                                <div class="setting-field">
                                    @if($setting->type === 'image')
                                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                            {{ $setting->label }}
                                            @if($setting->description)
                                                <span class="text-xs text-gray-500 dark:text-gray-400 block font-normal mt-1">{{ $setting->description }}</span>
                                            @endif
                                        </label>
                                        <div class="flex items-center gap-4">
                                            @if($setting->value)
                                                <div class="relative" id="image-preview-{{ $setting->key }}">
                                                    <img src="{{ public_asset_url($setting->value) }}" alt="{{ $setting->label }}" class="w-32 h-32 object-cover rounded-lg border border-gray-300 dark:border-gray-700">
                                                    <button type="button" onclick="removeImage('{{ $setting->key }}')" class="absolute -top-2 -right-2 bg-red-500 text-white rounded-full w-6 h-6 flex items-center justify-center text-xs hover:bg-red-600">
                                                        <i class="fas fa-times"></i>
                                                    </button>
                                                </div>
                                            @endif
                                            <div class="flex-1">
                                                <input type="file" name="{{ $setting->key }}" id="{{ $setting->key }}" accept="image/*" 
                                                       class="w-full py-2.5 px-4 bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 rounded-lg text-sm text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:border-transparent">
                                                <input type="hidden" name="{{ $setting->key }}_remove" id="{{ $setting->key }}_remove" value="0">
                                            </div>
                                        </div>
                                    @elseif($setting->type === 'boolean')
                                        <div class="flex items-center justify-between">
                                            <div>
                                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                                                    {{ $setting->label }}
                                                </label>
                                                @if($setting->description)
                                                    <p class="text-xs text-gray-500 dark:text-gray-400">{{ $setting->description }}</p>
                                                @endif
                                            </div>
                                            <label class="relative inline-flex items-center cursor-pointer">
                                                <input type="checkbox" name="{{ $setting->key }}" value="1" 
                                                       {{ $setting->value == '1' ? 'checked' : '' }}
                                                       class="sr-only peer">
                                                <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 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 dark:border-gray-600 peer-checked:bg-blue-600"></div>
                                            </label>
                                        </div>
                                    @elseif($setting->type === 'textarea')
                                        <div>
                                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                                {{ $setting->label }} (English)
                                                @if($setting->description)
                                                    <span class="text-xs text-gray-500 dark:text-gray-400 block font-normal mt-1">{{ $setting->description }}</span>
                                                @endif
                                            </label>
                                            <textarea name="{{ $setting->key }}" rows="3" 
                                                      class="w-full py-2.5 px-4 bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 rounded-lg text-sm text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:border-transparent">{{ $setting->value }}</textarea>
                                        </div>
                                        <div class="mt-4">
                                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                                {{ $setting->label }} (Khmer)
                                            </label>
                                            <textarea name="{{ $setting->key }}_km" rows="3" 
                                                      class="w-full py-2.5 px-4 bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 rounded-lg text-sm text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:border-transparent">{{ $setting->value_km }}</textarea>
                                        </div>
                                    @elseif($setting->key === 'default_language')
                                        <div>
                                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                                {{ $setting->label }}
                                                @if($setting->description)
                                                    <span class="text-xs text-gray-500 dark:text-gray-400 block font-normal mt-1">{{ $setting->description }}</span>
                                                @endif
                                            </label>
                                            <select name="{{ $setting->key }}" 
                                                    class="w-full py-2.5 px-4 bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 rounded-lg text-sm text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:border-transparent">
                                                <option value="km" {{ ($setting->value ?? 'km') === 'km' ? 'selected' : '' }}>Khmer</option>
                                                <option value="en" {{ ($setting->value ?? 'km') === 'en' ? 'selected' : '' }}>English</option>
                                            </select>
                                        </div>
                                    @elseif($setting->key === 'currency_position')
                                        <div>
                                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                                {{ $setting->label }}
                                                @if($setting->description)
                                                    <span class="text-xs text-gray-500 dark:text-gray-400 block font-normal mt-1">{{ $setting->description }}</span>
                                                @endif
                                            </label>
                                            <select name="{{ $setting->key }}" 
                                                    class="w-full py-2.5 px-4 bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 rounded-lg text-sm text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:border-transparent">
                                                <option value="before" {{ ($setting->value ?? 'before') === 'before' ? 'selected' : '' }}>Before</option>
                                                <option value="after" {{ ($setting->value ?? 'before') === 'after' ? 'selected' : '' }}>After</option>
                                            </select>
                                        </div>
                                    @else
                                        <div>
                                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                                {{ $setting->label }} (English)
                                                @if($setting->description)
                                                    <span class="text-xs text-gray-500 dark:text-gray-400 block font-normal mt-1">{{ $setting->description }}</span>
                                                @endif
                                            </label>
                                            <input type="{{ $setting->type === 'password' ? 'password' : ($setting->type === 'number' ? 'number' : ($setting->type === 'email' ? 'email' : ($setting->type === 'url' ? 'url' : 'text'))) }}" 
                                                   name="{{ $setting->key }}" 
                                                   value="{{ $setting->type === 'password' ? '' : $setting->value }}" 
                                                   placeholder="Enter {{ strtolower($setting->label) }}"
                                                   class="w-full py-2.5 px-4 bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 rounded-lg text-sm text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:border-transparent">
                                        </div>
                                        @if($setting->key !== 'smtp_password' && $setting->key !== 'default_language' && $setting->key !== 'timezone' && $setting->key !== 'currency' && $setting->key !== 'currency_position' && $setting->key !== 'smtp_encryption')
                                            <div class="mt-4">
                                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                                    {{ $setting->label }} (Khmer)
                                                </label>
                                                <input type="{{ $setting->type === 'password' ? 'password' : ($setting->type === 'number' ? 'number' : ($setting->type === 'email' ? 'email' : ($setting->type === 'url' ? 'url' : 'text'))) }}" 
                                                       name="{{ $setting->key }}_km" 
                                                       value="{{ $setting->type === 'password' ? '' : $setting->value_km }}" 
                                                       placeholder="Enter {{ strtolower($setting->label) }} (Khmer)"
                                                       class="w-full py-2.5 px-4 bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 rounded-lg text-sm text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:border-transparent">
                                            </div>
                                        @endif
                                    @endif
                                </div>
                            @empty
                                <p class="text-gray-500 dark:text-gray-400 text-sm">No settings available for this section.</p>
                            @endforelse
                        </div>
                    </div>
                @endforeach
            </div>
            
            <!-- Form Actions -->
            <div class="px-6 py-4 bg-gray-50 dark:bg-gray-900 border-t border-gray-200 dark:border-gray-800 flex items-center justify-end gap-3">
                <button type="button" onclick="window.location.reload()" 
                        class="px-6 py-2.5 bg-white dark:bg-gray-800 text-gray-900 dark:text-white font-medium rounded-lg border border-gray-300 dark:border-gray-700 shadow-sm hover:shadow-md transition-all duration-200">
                    Cancel
                </button>
                <button type="submit" 
                        class="px-6 py-2.5 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg shadow-sm hover:shadow-md transition-all duration-200">
                    <i class="fas fa-save mr-2"></i>Save Settings
                </button>
            </div>
        </div>
    </form>
</div>

@if(session('success'))
    <div id="successMessage" class="fixed top-4 right-4 bg-green-500 text-white px-6 py-3 rounded-lg shadow-lg z-50 flex items-center gap-2">
        <i class="fas fa-check-circle"></i>
        <span>{{ session('success') }}</span>
    </div>
    <script>
        setTimeout(() => {
            document.getElementById('successMessage').style.opacity = '0';
            setTimeout(() => document.getElementById('successMessage').remove(), 300);
        }, 3000);
    </script>
@endif

<script>
    function switchTab(tab) {
        // Hide all tab contents
        document.querySelectorAll('.tab-content').forEach(content => {
            content.classList.add('hidden');
        });
        
        // Show selected tab content
        document.getElementById('tab-' + tab).classList.remove('hidden');
        
        // Update active tab indicator
        document.querySelectorAll('.tab-button').forEach(button => {
            button.classList.remove('border-blue-600', 'text-blue-600', 'dark:text-blue-400');
            button.classList.add('border-transparent', 'text-gray-500', 'dark:text-gray-400');
        });
        
        event.target.closest('.tab-button').classList.remove('border-transparent', 'text-gray-500', 'dark:text-gray-400');
        event.target.closest('.tab-button').classList.add('border-blue-600', 'text-blue-600', 'dark:text-blue-400');
        
        // Update hidden input
        document.getElementById('activeTab').value = tab;
    }
    
    function removeImage(key) {
        if (confirm('Are you sure you want to remove this image?')) {
            document.getElementById(key + '_remove').value = '1';
            document.getElementById(key).value = '';
            const preview = document.getElementById('image-preview-' + key);
            if (preview) {
                preview.style.display = 'none';
            }
        }
    }
    
    function removeHomepageImage(section) {
        if (confirm('Are you sure you want to remove this image?')) {
            document.getElementById('home_page_' + section + '_remove_image').value = '1';
            document.getElementById('home_page_' + section + '_image').value = '';
            const preview = document.getElementById('image-preview-' + section);
            if (preview) {
                preview.style.display = 'none';
            }
        }
    }
</script>

<style>
    .tab-content {
        animation: fadeIn 0.3s ease-in;
    }
    
    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(10px); }
        to { opacity: 1; transform: translateY(0); }
    }
</style>
@endsection