<?php $__env->startSection('title', 'Settings'); ?>
<?php $__env->startSection('page-title', 'Website Settings'); ?>

<?php $__env->startSection('content'); ?>
<div class="fade-in">
    <!-- Settings Form -->
    <form action="<?php echo e(route('admin.settings.update')); ?>" method="POST" enctype="multipart/form-data" id="settingsForm">
        <?php echo csrf_field(); ?>
        <?php echo method_field('PUT'); ?>
        <input type="hidden" name="tab" id="activeTab" value="<?php echo e($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 <?php echo e($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 <?php echo e($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 <?php echo e($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 <?php echo e($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 <?php echo e($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">
                <?php $__currentLoopData = ['general', 'seo', 'email', 'social', 'maintenance']; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $group): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                    <div id="tab-<?php echo e($group); ?>" class="tab-content <?php echo e($activeTab === $group ? '' : 'hidden'); ?>">
                        <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-6 capitalize"><?php echo e($group); ?> Settings</h3>
                        
                        <div class="space-y-6">
                            <?php
                                $groupSettings = $groups->get($group, collect());
                            ?>
                            
                            <?php $__empty_1 = true; $__currentLoopData = $groupSettings; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $setting): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
                                <div class="setting-field">
                                    <?php if($setting->type === 'image'): ?>
                                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                            <?php echo e($setting->label); ?>

                                            <?php if($setting->description): ?>
                                                <span class="text-xs text-gray-500 dark:text-gray-400 block font-normal mt-1"><?php echo e($setting->description); ?></span>
                                            <?php endif; ?>
                                        </label>
                                        <div class="flex items-center gap-4">
                                            <?php if($setting->value): ?>
                                                <div class="relative" id="image-preview-<?php echo e($setting->key); ?>">
                                                    <img src="<?php echo e(public_asset_url($setting->value)); ?>" alt="<?php echo e($setting->label); ?>" class="w-32 h-32 object-cover rounded-lg border border-gray-300 dark:border-gray-700">
                                                    <button type="button" onclick="removeImage('<?php echo e($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>
                                            <?php endif; ?>
                                            <div class="flex-1">
                                                <input type="file" name="<?php echo e($setting->key); ?>" id="<?php echo e($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="<?php echo e($setting->key); ?>_remove" id="<?php echo e($setting->key); ?>_remove" value="0">
                                            </div>
                                        </div>
                                    <?php 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">
                                                    <?php echo e($setting->label); ?>

                                                </label>
                                                <?php if($setting->description): ?>
                                                    <p class="text-xs text-gray-500 dark:text-gray-400"><?php echo e($setting->description); ?></p>
                                                <?php endif; ?>
                                            </div>
                                            <label class="relative inline-flex items-center cursor-pointer">
                                                <input type="checkbox" name="<?php echo e($setting->key); ?>" value="1" 
                                                       <?php echo e($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>
                                    <?php elseif($setting->type === 'textarea'): ?>
                                        <div>
                                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                                <?php echo e($setting->label); ?> (English)
                                                <?php if($setting->description): ?>
                                                    <span class="text-xs text-gray-500 dark:text-gray-400 block font-normal mt-1"><?php echo e($setting->description); ?></span>
                                                <?php endif; ?>
                                            </label>
                                            <textarea name="<?php echo e($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"><?php echo e($setting->value); ?></textarea>
                                        </div>
                                        <div class="mt-4">
                                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                                <?php echo e($setting->label); ?> (Khmer)
                                            </label>
                                            <textarea name="<?php echo e($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"><?php echo e($setting->value_km); ?></textarea>
                                        </div>
                                    <?php elseif($setting->key === 'default_language'): ?>
                                        <div>
                                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                                <?php echo e($setting->label); ?>

                                                <?php if($setting->description): ?>
                                                    <span class="text-xs text-gray-500 dark:text-gray-400 block font-normal mt-1"><?php echo e($setting->description); ?></span>
                                                <?php endif; ?>
                                            </label>
                                            <select name="<?php echo e($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" <?php echo e(($setting->value ?? 'km') === 'km' ? 'selected' : ''); ?>>Khmer</option>
                                                <option value="en" <?php echo e(($setting->value ?? 'km') === 'en' ? 'selected' : ''); ?>>English</option>
                                            </select>
                                        </div>
                                    <?php elseif($setting->key === 'currency_position'): ?>
                                        <div>
                                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                                <?php echo e($setting->label); ?>

                                                <?php if($setting->description): ?>
                                                    <span class="text-xs text-gray-500 dark:text-gray-400 block font-normal mt-1"><?php echo e($setting->description); ?></span>
                                                <?php endif; ?>
                                            </label>
                                            <select name="<?php echo e($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" <?php echo e(($setting->value ?? 'before') === 'before' ? 'selected' : ''); ?>>Before</option>
                                                <option value="after" <?php echo e(($setting->value ?? 'before') === 'after' ? 'selected' : ''); ?>>After</option>
                                            </select>
                                        </div>
                                    <?php else: ?>
                                        <div>
                                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                                <?php echo e($setting->label); ?> (English)
                                                <?php if($setting->description): ?>
                                                    <span class="text-xs text-gray-500 dark:text-gray-400 block font-normal mt-1"><?php echo e($setting->description); ?></span>
                                                <?php endif; ?>
                                            </label>
                                            <input type="<?php echo e($setting->type === 'password' ? 'password' : ($setting->type === 'number' ? 'number' : ($setting->type === 'email' ? 'email' : ($setting->type === 'url' ? 'url' : 'text')))); ?>" 
                                                   name="<?php echo e($setting->key); ?>" 
                                                   value="<?php echo e($setting->type === 'password' ? '' : $setting->value); ?>" 
                                                   placeholder="Enter <?php echo e(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>
                                        <?php 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">
                                                    <?php echo e($setting->label); ?> (Khmer)
                                                </label>
                                                <input type="<?php echo e($setting->type === 'password' ? 'password' : ($setting->type === 'number' ? 'number' : ($setting->type === 'email' ? 'email' : ($setting->type === 'url' ? 'url' : 'text')))); ?>" 
                                                       name="<?php echo e($setting->key); ?>_km" 
                                                       value="<?php echo e($setting->type === 'password' ? '' : $setting->value_km); ?>" 
                                                       placeholder="Enter <?php echo e(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>
                                        <?php endif; ?>
                                    <?php endif; ?>
                                </div>
                            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
                                <p class="text-gray-500 dark:text-gray-400 text-sm">No settings available for this section.</p>
                            <?php endif; ?>
                        </div>
                    </div>
                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
            </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>

<?php 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><?php echo e(session('success')); ?></span>
    </div>
    <script>
        setTimeout(() => {
            document.getElementById('successMessage').style.opacity = '0';
            setTimeout(() => document.getElementById('successMessage').remove(), 300);
        }, 3000);
    </script>
<?php 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>
<?php $__env->stopSection(); ?>

<?php echo $__env->make('admin.layouts.app', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH /Users/mac/Documents/360monicaAPI/resources/views/admin/settings/index.blade.php ENDPATH**/ ?>