<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
    <title>Settings - TyreCare 360</title>
    <link rel="stylesheet" href="{{ @ASSET_PATH }}/css/variables.css">
    <link rel="stylesheet" href="{{ @ASSET_PATH }}/css/base.css">
    <link rel="stylesheet" href="{{ @ASSET_PATH }}/css/layout.css">
    <link rel="stylesheet" href="{{ @ASSET_PATH }}/css/components.css">
    <link rel="stylesheet" href="{{ @ASSET_PATH }}/css/animations.css">
</head>
<body>
    <div class="app-container">
        <include href="super-admin/_sidebar.html" />
        
        <main class="main-content">
            <header class="header">
                <div class="header-left">
                    <button class="menu-toggle">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
                        </svg>
                    </button>
                    <h1 class="page-title">System Settings</h1>
                </div>
            </header>
            
            <div class="content-area page-transition">
                <div class="grid grid-2">
                    <div class="glass-card" style="padding: 24px;">
                        <h3 style="margin-bottom: 20px;">General Settings</h3>
                        <form id="general-settings-form">
                            <div class="form-group">
                                <label class="form-label">Site Name</label>
                                <input type="text" name="site_name" class="form-input" value="{{ @settings.site_name ? @settings.site_name : 'TyreCare 360' }}">
                            </div>
                            <div class="form-group">
                                <label class="form-label">Support Email</label>
                                <input type="email" name="support_email" class="form-input" value="{{ @settings.support_email }}">
                            </div>
                            <div class="form-group">
                                <label class="form-label">Default Reminder Days Before Service</label>
                                <input type="number" name="reminder_days" class="form-input" value="{{ @settings.reminder_days ? @settings.reminder_days : '7' }}" min="1" max="30">
                            </div>
                            <button type="submit" class="btn btn-primary">Save Settings</button>
                        </form>
                    </div>
                    
                    <div class="glass-card" style="padding: 24px;">
                        <h3 style="margin-bottom: 20px;">Notification Settings</h3>
                        <form id="notification-settings-form">
                            <div class="form-group">
                                <label class="form-check">
                                    <input type="checkbox" name="whatsapp_enabled" {{ @settings.whatsapp_enabled ? 'checked' : '' }}>
                                    <span>Enable WhatsApp Reminders</span>
                                </label>
                            </div>
                            <div class="form-group">
                                <label class="form-check">
                                    <input type="checkbox" name="sms_enabled" {{ @settings.sms_enabled ? 'checked' : '' }}>
                                    <span>Enable SMS Reminders</span>
                                </label>
                            </div>
                            <div class="form-group">
                                <label class="form-check">
                                    <input type="checkbox" name="email_enabled" {{ @settings.email_enabled ? 'checked' : '' }}>
                                    <span>Enable Email Reminders</span>
                                </label>
                            </div>
                            <button type="submit" class="btn btn-primary">Save Notifications</button>
                        </form>
                    </div>
                </div>
                
                <div class="glass-card" style="padding: 24px; margin-top: 24px;">
                    <h3 style="margin-bottom: 20px;">Subscription Plans</h3>
                    <div class="grid grid-3">
                        <div style="padding: 20px; border: 2px solid var(--glass-border); border-radius: 12px;">
                            <h4 style="color: var(--text-muted); margin-bottom: 8px;">Trial</h4>
                            <p style="font-size: 24px; font-weight: 700; color: var(--primary);">Free</p>
                            <p style="font-size: 14px; color: var(--text-muted);">14 days trial period</p>
                            <ul style="margin-top: 16px; font-size: 14px; color: var(--text-secondary);">
                                <li>Up to 50 vehicles</li>
                                <li>Basic reminders</li>
                                <li>Email support</li>
                            </ul>
                        </div>
                        <div style="padding: 20px; border: 2px solid var(--primary); border-radius: 12px; background: rgba(124, 58, 237, 0.05);">
                            <h4 style="color: var(--primary); margin-bottom: 8px;">Basic</h4>
                            <p style="font-size: 24px; font-weight: 700; color: var(--primary);">$29<span style="font-size: 14px; font-weight: 400;">/month</span></p>
                            <p style="font-size: 14px; color: var(--text-muted);">Best for small businesses</p>
                            <ul style="margin-top: 16px; font-size: 14px; color: var(--text-secondary);">
                                <li>Up to 500 vehicles</li>
                                <li>WhatsApp reminders</li>
                                <li>Priority support</li>
                            </ul>
                        </div>
                        <div style="padding: 20px; border: 2px solid #f59e0b; border-radius: 12px; background: rgba(245, 158, 11, 0.05);">
                            <h4 style="color: #f59e0b; margin-bottom: 8px;">Premium</h4>
                            <p style="font-size: 24px; font-weight: 700; color: #f59e0b;">$79<span style="font-size: 14px; font-weight: 400;">/month</span></p>
                            <p style="font-size: 14px; color: var(--text-muted);">For growing businesses</p>
                            <ul style="margin-top: 16px; font-size: 14px; color: var(--text-secondary);">
                                <li>Unlimited vehicles</li>
                                <li>All notification channels</li>
                                <li>24/7 support</li>
                                <li>Custom branding</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>
    
    <div class="toast-container"></div>
    <script src="{{ @ASSET_PATH }}/js/app.js"></script>
    <script src="{{ @ASSET_PATH }}/js/api.js"></script>
    <script src="{{ @ASSET_PATH }}/js/ui.js"></script>
    <script>
        document.getElementById('general-settings-form').addEventListener('submit', async function(e) {
            e.preventDefault();
            const formData = new FormData(this);
            const data = Object.fromEntries(formData);
            
            try {
                const response = await fetch('{{ @BASE_PATH }}/api/settings', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify(data)
                });
                const result = await response.json();
                if (result.success) {
                    showToast('Settings saved successfully', 'success');
                } else {
                    showToast(result.message || 'Failed to save settings', 'error');
                }
            } catch (error) {
                showToast('Failed to save settings', 'error');
            }
        });
        
        document.getElementById('notification-settings-form').addEventListener('submit', async function(e) {
            e.preventDefault();
            const formData = new FormData(this);
            const data = {
                whatsapp_enabled: formData.has('whatsapp_enabled'),
                sms_enabled: formData.has('sms_enabled'),
                email_enabled: formData.has('email_enabled')
            };
            
            try {
                const response = await fetch('{{ @BASE_PATH }}/api/settings/notifications', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify(data)
                });
                const result = await response.json();
                if (result.success) {
                    showToast('Notification settings saved', 'success');
                } else {
                    showToast(result.message || 'Failed to save settings', 'error');
                }
            } catch (error) {
                showToast('Failed to save settings', 'error');
            }
        });
    </script>
</body>
</html>
