{% extends "base.html" %}

{% block page_title %}Settings{% endblock %}

{% block content %}
<div class="settings-container" style="max-width: 1200px; margin: 0 auto;">
    
    <!-- System Settings -->
    <div class="settings-section">
        <div class="settings-sidebar">
            <h3>System Settings</h3>
            <p>Manage core recognition parameters and camera configuration.</p>
        </div>
        <div class="settings-content">
            <div class="setting-item">
                <div class="setting-label">
                    <label>Camera Device</label>
                    <div class="form-hint">Select which camera to use for face recognition</div>
                </div>
                <div class="setting-control">
                    <select class="form-select">
                        <option>Camera 0 (Default)</option>
                        <option>Camera 1</option>
                        <option>Camera 2</option>
                    </select>
                </div>
            </div>

            <div class="setting-item">
                <div class="setting-label">
                    <label>Recognition Confidence</label>
                    <div class="form-hint">Higher values are more strict (0.0 - 1.0)</div>
                </div>
                <div class="setting-control">
                    <input type="range" min="0" max="1" step="0.05" value="0.5" class="form-range" id="confidenceRange" oninput="document.getElementById('confValue').innerText = this.value">
                    <span class="range-value-display" id="confValue">0.5</span>
                </div>
            </div>

            <div class="setting-item">
                <div class="setting-label">
                    <label>Frame Processing Rate</label>
                    <div class="form-hint">Process every N frames (higher = better performance)</div>
                </div>
                <div class="setting-control">
                    <select class="form-select">
                        <option>Every frame (slowest)</option>
                        <option selected>Every 5 frames (balanced)</option>
                        <option>Every 10 frames (fastest)</option>
                    </select>
                </div>
            </div>
            
            <div style="margin-top: 1.5rem; text-align: right;">
                <button class="btn btn-primary" onclick="saveSystemSettings()">Save System Settings</button>
            </div>
        </div>
    </div>

    <!-- Attendance Settings -->
    <div class="settings-section">
        <div class="settings-sidebar">
            <h3>Attendance Policies</h3>
            <p>Configure automated behaviors, notifications, and alerts.</p>
        </div>
        <div class="settings-content">
            <div class="setting-item">
                <div class="setting-label">
                    <label>Enable Notifications</label>
                    <div class="form-hint">Show on-screen alerts for unrecognized faces</div>
                </div>
                <div class="setting-control">
                    <label class="toggle-switch">
                        <input type="checkbox" checked>
                        <span class="toggle-slider"></span>
                    </label>
                </div>
            </div>

            <div class="setting-item">
                <div class="setting-label">
                    <label>Enable Sound Alerts</label>
                    <div class="form-hint">Play sound when attendance is marked</div>
                </div>
                <div class="setting-control">
                    <label class="toggle-switch">
                        <input type="checkbox" checked>
                        <span class="toggle-slider"></span>
                    </label>
                </div>
            </div>

            <div class="setting-item">
                <div class="setting-label">
                    <label>Auto Backup</label>
                    <div class="form-hint">Automatically backup database daily</div>
                </div>
                <div class="setting-control">
                    <label class="toggle-switch">
                        <input type="checkbox" checked>
                        <span class="toggle-slider"></span>
                    </label>
                </div>
            </div>
        </div>
    </div>

    <!-- Email Notifications -->
    <div class="settings-section">
        <div class="settings-sidebar">
            <h3>Email Reports</h3>
            <p>Set up automated email reporting for administrators.</p>
        </div>
        <div class="settings-content">
            <div class="setting-item">
                <div class="setting-label">
                    <label>Enable Email Reports</label>
                    <div class="form-hint">Send periodic email reports and critical alerts</div>
                </div>
                <div class="setting-control">
                    <label class="toggle-switch">
                        <input type="checkbox">
                        <span class="toggle-slider"></span>
                    </label>
                </div>
            </div>

            <div class="setting-item">
                <div class="setting-label">
                    <label>Email Address</label>
                    <div class="form-hint">Where to send notifications</div>
                </div>
                <div class="setting-control">
                    <input type="email" class="form-input" placeholder="admin@example.com">
                </div>
            </div>

            <div class="setting-item">
                <div class="setting-label">
                    <label>Report Frequency</label>
                    <div class="form-hint">How often to send reports</div>
                </div>
                <div class="setting-control">
                    <select class="form-select">
                        <option>Daily</option>
                        <option>Weekly</option>
                        <option>Monthly</option>
                    </select>
                </div>
            </div>

            <div style="margin-top: 1.5rem; display: flex; justify-content: flex-end; gap: 1rem;">
                <button class="btn btn-secondary" onclick="testEmail()">Test Email</button>
                <button class="btn btn-primary" onclick="showToast('Email settings saved', 'success')">Save Email Settings</button>
            </div>
        </div>
    </div>

    <!-- Data Management -->
    <div class="settings-section">
        <div class="settings-sidebar">
            <h3>Data Management</h3>
            <p>Backup, export, and maintain your database.</p>
        </div>
        <div class="settings-content">
            <div class="alert alert-info" style="margin-top: 0;">
                <span class="alert-icon">ℹ️</span>
                <span><strong>Recommendation:</strong> Create regular backups before running database rebuilds.</span>
            </div>

            <div class="button-group" style="margin-top: 1.5rem;">
                <button class="btn btn-secondary" onclick="backupData()">
                    <span>💾</span> Backup Data
                </button>
                <button class="btn btn-secondary" onclick="exportSettings()">
                    <span>📥</span> Export Config
                </button>
                <button class="btn btn-secondary" onclick="importSettings()">
                    <span>📤</span> Import Config
                </button>
                <div style="flex: 1;"></div>
                <button class="btn btn-danger" onclick="rebuildDatabase()">
                    <span>🔧</span> Rebuild Database
                </button>
            </div>
        </div>
    </div>

</div>

<script>
    function saveSystemSettings() {
        showToast('System settings saved successfully', 'success');
    }

    function saveAttendanceSettings() {
        showToast('Attendance settings saved successfully', 'success');
    }

    function testEmail() {
        showToast('Test email sent to your inbox', 'info');
    }

    function backupData() {
        showToast('Backup started in background...', 'info');
        setTimeout(() => {
            showToast('Backup completed successfully', 'success');
        }, 2000);
    }

    function exportSettings() {
        showToast('Configuration exported', 'success');
    }

    function importSettings() {
        showToast('Select a configuration file to import', 'info');
    }

    function rebuildDatabase() {
        if (confirm('Rebuild database? This may take a few minutes and requires a restart.')) {
            showToast('Database rebuild started...', 'info');
        }
    }
</script>
{% endblock %}