

<?php $__env->startSection('title', 'System Settings - Admin'); ?>
<?php $__env->startSection('page-title', 'System Settings'); ?>
<?php $__env->startSection('page-description', 'Configure platform-wide settings and preferences'); ?>

<?php $__env->startSection('content'); ?>
<div class="space-y-6">
    
    <!-- Settings Tabs -->
    <div class="glass-card rounded-2xl p-6 border border-white/10" data-aos="fade-up">
        <div class="flex flex-wrap gap-2 border-b border-white/10 pb-4">
            <button class="tab-btn active px-4 py-2 rounded-lg text-white bg-purple-600 transition" data-tab="general">
                <i class="fas fa-cog mr-2"></i>General
            </button>
            <button class="tab-btn px-4 py-2 rounded-lg text-gray-400 hover:bg-white/10 transition" data-tab="email">
                <i class="fas fa-envelope mr-2"></i>Email Settings
            </button>
            <button class="tab-btn px-4 py-2 rounded-lg text-gray-400 hover:bg-white/10 transition" data-tab="payment">
                <i class="fas fa-credit-card mr-2"></i>Payment Settings
            </button>
            <button class="tab-btn px-4 py-2 rounded-lg text-gray-400 hover:bg-white/10 transition" data-tab="appearance">
                <i class="fas fa-palette mr-2"></i>Appearance
            </button>
            <button class="tab-btn px-4 py-2 rounded-lg text-gray-400 hover:bg-white/10 transition" data-tab="security">
                <i class="fas fa-shield-alt mr-2"></i>Security
            </button>
            <button class="tab-btn px-4 py-2 rounded-lg text-gray-400 hover:bg-white/10 transition" data-tab="backup">
                <i class="fas fa-database mr-2"></i>Backup
            </button>
        </div>
        
        <!-- General Settings Tab -->
        <div id="generalTab" class="tab-content active mt-6">
            <h3 class="text-xl font-bold text-white mb-4">General Settings</h3>
            <form class="space-y-4">
                <div class="grid md:grid-cols-2 gap-6">
                    <div>
                        <label class="block text-white mb-2">Platform Name</label>
                        <input type="text" value="WedBooker" class="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg text-white focus:outline-none focus:border-purple-500">
                    </div>
                    <div>
                        <label class="block text-white mb-2">Platform URL</label>
                        <input type="url" value="https://wedbooker.com" class="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg text-white focus:outline-none focus:border-purple-500">
                    </div>
                    <div>
                        <label class="block text-white mb-2">Admin Email</label>
                        <input type="email" value="admin@wedbooker.com" class="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg text-white focus:outline-none focus:border-purple-500">
                    </div>
                    <div>
                        <label class="block text-white mb-2">Support Email</label>
                        <input type="email" value="support@wedbooker.com" class="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg text-white focus:outline-none focus:border-purple-500">
                    </div>
                    <div class="md:col-span-2">
                        <label class="block text-white mb-2">Platform Description</label>
                        <textarea rows="3" class="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg text-white focus:outline-none focus:border-purple-500">The ultimate wedding guest management platform for couples.</textarea>
                    </div>
                    <div>
                        <label class="block text-white mb-2">Time Zone</label>
                        <select class="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg text-white">
                            <option>UTC/GMT</option>
                            <option>Europe/London</option>
                            <option>America/New_York</option>
                        </select>
                    </div>
                    <div>
                        <label class="block text-white mb-2">Date Format</label>
                        <select class="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg text-white">
                            <option>DD/MM/YYYY</option>
                            <option>MM/DD/YYYY</option>
                            <option>YYYY-MM-DD</option>
                        </select>
                    </div>
                </div>
                <button class="px-6 py-2 bg-purple-600 rounded-lg text-white hover:bg-purple-700 transition mt-4">Save Changes</button>
            </form>
        </div>
        
        <!-- Email Settings Tab -->
        <div id="emailTab" class="tab-content mt-6" style="display: none;">
            <h3 class="text-xl font-bold text-white mb-4">Email Configuration</h3>
            <form class="space-y-4">
                <div class="grid md:grid-cols-2 gap-6">
                    <div>
                        <label class="block text-white mb-2">Mail Driver</label>
                        <select class="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg text-white">
                            <option>smtp</option>
                            <option>mailgun</option>
                            <option>ses</option>
                            <option>sendmail</option>
                        </select>
                    </div>
                    <div>
                        <label class="block text-white mb-2">Mail Host</label>
                        <input type="text" value="smtp.gmail.com" class="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg text-white">
                    </div>
                    <div>
                        <label class="block text-white mb-2">Mail Port</label>
                        <input type="text" value="587" class="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg text-white">
                    </div>
                    <div>
                        <label class="block text-white mb-2">Mail Username</label>
                        <input type="text" value="noreply@wedbooker.com" class="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg text-white">
                    </div>
                    <div>
                        <label class="block text-white mb-2">Mail Password</label>
                        <input type="password" value="********" class="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg text-white">
                    </div>
                    <div>
                        <label class="block text-white mb-2">Mail Encryption</label>
                        <select class="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg text-white">
                            <option>tls</option>
                            <option>ssl</option>
                        </select>
                    </div>
                    <div class="md:col-span-2">
                        <label class="block text-white mb-2">From Address</label>
                        <input type="email" value="hello@wedbooker.com" class="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg text-white">
                    </div>
                    <div class="md:col-span-2">
                        <label class="block text-white mb-2">From Name</label>
                        <input type="text" value="WedBooker Team" class="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg text-white">
                    </div>
                </div>
                <div class="flex gap-4 mt-4">
                    <button class="px-6 py-2 bg-purple-600 rounded-lg text-white hover:bg-purple-700 transition">Save Changes</button>
                    <button class="px-6 py-2 bg-green-600 rounded-lg text-white hover:bg-green-700 transition">Send Test Email</button>
                </div>
            </form>
        </div>
        
        <!-- Payment Settings Tab -->
        <div id="paymentTab" class="tab-content mt-6" style="display: none;">
            <h3 class="text-xl font-bold text-white mb-4">Payment Gateway Configuration</h3>
            <form class="space-y-4">
                <div class="grid md:grid-cols-2 gap-6">
                    <div>
                        <label class="block text-white mb-2">Default Currency</label>
                        <select class="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg text-white">
                            <option>GBP (£)</option>
                            <option>USD ($)</option>
                            <option>EUR (€)</option>
                        </select>
                    </div>
                    <div>
                        <label class="block text-white mb-2">Tax Rate (%)</label>
                        <input type="number" value="20" class="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg text-white">
                    </div>
                    <div class="md:col-span-2">
                        <div class="p-4 bg-white/5 rounded-lg">
                            <h4 class="text-white font-semibold mb-3">Stripe Configuration</h4>
                            <div class="grid md:grid-cols-2 gap-4">
                                <div>
                                    <label class="block text-white mb-2">Stripe Key (Publishable)</label>
                                    <input type="text" value="pk_test_..." class="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg text-white">
                                </div>
                                <div>
                                    <label class="block text-white mb-2">Stripe Secret</label>
                                    <input type="password" value="sk_test_..." class="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg text-white">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="md:col-span-2">
                        <div class="p-4 bg-white/5 rounded-lg">
                            <h4 class="text-white font-semibold mb-3">PayPal Configuration</h4>
                            <div class="grid md:grid-cols-2 gap-4">
                                <div>
                                    <label class="block text-white mb-2">PayPal Client ID</label>
                                    <input type="text" value="AeJ5..." class="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg text-white">
                                </div>
                                <div>
                                    <label class="block text-white mb-2">PayPal Secret</label>
                                    <input type="password" value="ELc..." class="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg text-white">
                                </div>
                                <div class="md:col-span-2">
                                    <label class="flex items-center gap-2 cursor-pointer">
                                        <input type="checkbox" class="w-4 h-4" checked>
                                        <span class="text-gray-300">Enable PayPal Sandbox Mode</span>
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <button class="px-6 py-2 bg-purple-600 rounded-lg text-white hover:bg-purple-700 transition">Save Changes</button>
            </form>
        </div>
        
        <!-- Appearance Settings Tab -->
        <div id="appearanceTab" class="tab-content mt-6" style="display: none;">
            <h3 class="text-xl font-bold text-white mb-4">Appearance Settings</h3>
            <form class="space-y-4">
                <div class="grid md:grid-cols-2 gap-6">
                    <div>
                        <label class="block text-white mb-2">Primary Color</label>
                        <input type="color" value="#8B5CF6" class="w-full h-12 px-2 py-1 bg-white/10 border border-white/20 rounded-lg cursor-pointer">
                    </div>
                    <div>
                        <label class="block text-white mb-2">Secondary Color</label>
                        <input type="color" value="#EC4899" class="w-full h-12 px-2 py-1 bg-white/10 border border-white/20 rounded-lg cursor-pointer">
                    </div>
                    <div>
                        <label class="block text-white mb-2">Accent Color</label>
                        <input type="color" value="#F59E0B" class="w-full h-12 px-2 py-1 bg-white/10 border border-white/20 rounded-lg cursor-pointer">
                    </div>
                    <div>
                        <label class="block text-white mb-2">Background Color</label>
                        <input type="color" value="#0a0a0a" class="w-full h-12 px-2 py-1 bg-white/10 border border-white/20 rounded-lg cursor-pointer">
                    </div>
                    <div>
                        <label class="block text-white mb-2">Logo URL</label>
                        <input type="url" value="/images/logo.png" class="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg text-white">
                    </div>
                    <div>
                        <label class="block text-white mb-2">Favicon URL</label>
                        <input type="url" value="/favicon.ico" class="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg text-white">
                    </div>
                </div>
                <button class="px-6 py-2 bg-purple-600 rounded-lg text-white hover:bg-purple-700 transition">Save Changes</button>
            </form>
        </div>
        
        <!-- Security Settings Tab -->
        <div id="securityTab" class="tab-content mt-6" style="display: none;">
            <h3 class="text-xl font-bold text-white mb-4">Security Settings</h3>
            <form class="space-y-4">
                <div class="space-y-4">
                    <div class="p-4 bg-white/5 rounded-lg">
                        <div class="flex justify-between items-center">
                            <div>
                                <h4 class="text-white font-semibold">Two-Factor Authentication</h4>
                                <p class="text-gray-400 text-sm">Require 2FA for admin accounts</p>
                            </div>
                            <label class="relative inline-flex items-center cursor-pointer">
                                <input type="checkbox" class="sr-only peer" checked>
                                <div class="w-11 h-6 bg-gray-600 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:bg-purple-600 after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all"></div>
                            </label>
                        </div>
                    </div>
                    <div class="p-4 bg-white/5 rounded-lg">
                        <div class="flex justify-between items-center">
                            <div>
                                <h4 class="text-white font-semibold">Session Timeout</h4>
                                <p class="text-gray-400 text-sm">Auto logout after inactivity</p>
                            </div>
                            <select class="px-3 py-1 bg-white/10 border border-white/20 rounded text-white">
                                <option>30 minutes</option>
                                <option>1 hour</option>
                                <option selected>2 hours</option>
                                <option>4 hours</option>
                            </select>
                        </div>
                    </div>
                    <div class="p-4 bg-white/5 rounded-lg">
                        <div class="flex justify-between items-center">
                            <div>
                                <h4 class="text-white font-semibold">Login Attempts</h4>
                                <p class="text-gray-400 text-sm">Max failed attempts before lockout</p>
                            </div>
                            <select class="px-3 py-1 bg-white/10 border border-white/20 rounded text-white">
                                <option>3 attempts</option>
                                <option selected>5 attempts</option>
                                <option>10 attempts</option>
                            </select>
                        </div>
                    </div>
                    <div class="p-4 bg-white/5 rounded-lg">
                        <div class="flex justify-between items-center">
                            <div>
                                <h4 class="text-white font-semibold">IP Whitelist</h4>
                                <p class="text-gray-400 text-sm">Restrict admin access to specific IPs</p>
                            </div>
                            <button class="px-3 py-1 bg-purple-600 rounded text-sm">Configure</button>
                        </div>
                    </div>
                </div>
                <button class="px-6 py-2 bg-purple-600 rounded-lg text-white hover:bg-purple-700 transition">Save Changes</button>
            </form>
        </div>
        
        <!-- Backup Settings Tab -->
        <div id="backupTab" class="tab-content mt-6" style="display: none;">
            <h3 class="text-xl font-bold text-white mb-4">Backup & Maintenance</h3>
            <div class="space-y-4">
                <div class="p-4 bg-white/5 rounded-lg">
                    <div class="flex justify-between items-center mb-4">
                        <div>
                            <h4 class="text-white font-semibold">Database Backup</h4>
                            <p class="text-gray-400 text-sm">Last backup: March 25, 2024 10:30 AM</p>
                        </div>
                        <button class="px-4 py-2 bg-green-600 rounded-lg text-white hover:bg-green-700 transition">
                            <i class="fas fa-database mr-2"></i>Backup Now
                        </button>
                    </div>
                    <div class="space-y-2">
                        <div class="flex justify-between items-center p-2 bg-white/5 rounded">
                            <span class="text-gray-300">wedbooker_backup_20240325.sql</span>
                            <button class="text-purple-400 hover:text-purple-300"><i class="fas fa-download"></i></button>
                        </div>
                        <div class="flex justify-between items-center p-2 bg-white/5 rounded">
                            <span class="text-gray-300">wedbooker_backup_20240324.sql</span>
                            <button class="text-purple-400 hover:text-purple-300"><i class="fas fa-download"></i></button>
                        </div>
                        <div class="flex justify-between items-center p-2 bg-white/5 rounded">
                            <span class="text-gray-300">wedbooker_backup_20240323.sql</span>
                            <button class="text-purple-400 hover:text-purple-300"><i class="fas fa-download"></i></button>
                        </div>
                    </div>
                </div>
                
                <div class="p-4 bg-white/5 rounded-lg">
                    <h4 class="text-white font-semibold mb-3">Automated Backup Schedule</h4>
                    <div class="grid md:grid-cols-2 gap-4">
                        <div>
                            <label class="block text-white mb-2">Backup Frequency</label>
                            <select class="w-full px-4 py-2 bg-white/10 border border-white/20 rounded text-white">
                                <option>Daily</option>
                                <option selected>Weekly</option>
                                <option>Monthly</option>
                            </select>
                        </div>
                        <div>
                            <label class="block text-white mb-2">Backup Time</label>
                            <input type="time" value="02:00" class="w-full px-4 py-2 bg-white/10 border border-white/20 rounded text-white">
                        </div>
                    </div>
                </div>
                
                <div class="p-4 bg-white/5 rounded-lg">
                    <h4 class="text-white font-semibold mb-3">System Maintenance</h4>
                    <div class="flex gap-3">
                        <button class="px-4 py-2 bg-yellow-600 rounded-lg text-white hover:bg-yellow-700 transition">
                            <i class="fas fa-eraser mr-2"></i>Clear Cache
                        </button>
                        <button class="px-4 py-2 bg-blue-600 rounded-lg text-white hover:bg-blue-700 transition">
                            <i class="fas fa-sync mr-2"></i>Optimize Database
                        </button>
                        <button class="px-4 py-2 bg-red-600 rounded-lg text-white hover:bg-red-700 transition">
                            <i class="fas fa-chart-line mr-2"></i>Check System Health
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- System Status -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6" data-aos="fade-up">
        <div class="glass-card rounded-2xl p-4 border border-white/10">
            <div class="flex items-center gap-3">
                <div class="w-10 h-10 bg-green-600/20 rounded-lg flex items-center justify-center">
                    <i class="fas fa-check-circle text-green-400"></i>
                </div>
                <div>
                    <p class="text-gray-400 text-sm">PHP Version</p>
                    <p class="text-white font-bold">8.3.29</p>
                </div>
            </div>
        </div>
        <div class="glass-card rounded-2xl p-4 border border-white/10">
            <div class="flex items-center gap-3">
                <div class="w-10 h-10 bg-purple-600/20 rounded-lg flex items-center justify-center">
                    <i class="fas fa-database text-purple-400"></i>
                </div>
                <div>
                    <p class="text-gray-400 text-sm">Database</p>
                    <p class="text-white font-bold">MySQL 8.0</p>
                </div>
            </div>
        </div>
        <div class="glass-card rounded-2xl p-4 border border-white/10">
            <div class="flex items-center gap-3">
                <div class="w-10 h-10 bg-blue-600/20 rounded-lg flex items-center justify-center">
                    <i class="fas fa-server text-blue-400"></i>
                </div>
                <div>
                    <p class="text-gray-400 text-sm">Server Status</p>
                    <p class="text-green-400 font-bold">Operational</p>
                </div>
            </div>
        </div>
    </div>
</div>
<?php $__env->stopSection(); ?>

<?php $__env->startPush('scripts'); ?>
<script>
    // Tab switching functionality
    const tabs = document.querySelectorAll('.tab-btn');
    const contents = document.querySelectorAll('.tab-content');
    
    tabs.forEach(tab => {
        tab.addEventListener('click', () => {
            const tabId = tab.getAttribute('data-tab');
            
            // Update active tab styling
            tabs.forEach(t => t.classList.remove('active', 'bg-purple-600', 'text-white'));
            tabs.forEach(t => t.classList.add('text-gray-400'));
            tab.classList.add('active', 'bg-purple-600', 'text-white');
            tab.classList.remove('text-gray-400');
            
            // Show selected content
            contents.forEach(content => content.style.display = 'none');
            document.getElementById(`${tabId}Tab`).style.display = 'block';
        });
    });
    
    // Add animation to form fields
    document.querySelectorAll('input, select, textarea').forEach(field => {
        field.addEventListener('focus', function() {
            this.parentElement.classList.add('ring-2', 'ring-purple-500/50');
        });
        field.addEventListener('blur', function() {
            this.parentElement.classList.remove('ring-2', 'ring-purple-500/50');
        });
    });
</script>
<?php $__env->stopPush(); ?>
<?php echo $__env->make('layouts.admin', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH D:\skietagency\wedding\code\resources\views/admin/system-settings.blade.php ENDPATH**/ ?>