{% extends "base.html" %}
{% block title %}{{ _('Settings') }}{% endblock %}

{% block content %}
<div class="container mx-auto px-4 py-8 max-w-4xl">
    <div class="mb-8">
        <h1 class="text-3xl font-bold text-gray-900 dark:text-white">{{ _('Settings') }}</h1>
        <p class="text-gray-600 dark:text-gray-400 mt-2">{{ _('Manage your account settings and preferences') }}</p>
    </div>

    <form method="POST" class="space-y-8">
        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
        
        <!-- Profile Information -->
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
            <h2 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">
                <i class="fas fa-user mr-2"></i>{{ _('Profile Information') }}
            </h2>
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        {{ _('Username') }}
                    </label>
                    <input type="text" value="{{ user.username }}" disabled
                           class="w-full px-3 py-2 border border-gray-300 rounded-md bg-gray-100 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-300 cursor-not-allowed">
                    <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">{{ _('Username cannot be changed') }}</p>
                </div>
                
                <div>
                    <label for="full_name" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        {{ _('Full Name') }}
                    </label>
                    <input type="text" id="full_name" name="full_name" value="{{ user.full_name or '' }}"
                           class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
                </div>
                
                <div class="md:col-span-2">
                    <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        {{ _('Email Address') }}
                    </label>
                    <input type="email" id="email" name="email" value="{{ user.email or '' }}"
                           class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white"
                           placeholder="your.email@example.com">
                    <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">{{ _('Required for email notifications') }}</p>
                </div>
            </div>
        </div>

        <!-- Notification Preferences -->
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
            <h2 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">
                <i class="fas fa-bell mr-2"></i>{{ _('Notification Preferences') }}
            </h2>
            
            <div class="space-y-4">
                <div class="flex items-center">
                    <input type="checkbox" id="email_notifications" name="email_notifications" 
                           {% if user.email_notifications %}checked{% endif %}
                           class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
                    <label for="email_notifications" class="ml-3 block text-sm text-gray-700 dark:text-gray-300">
                        <span class="font-medium">{{ _('Enable Email Notifications') }}</span>
                        <p class="text-xs text-gray-500 dark:text-gray-400">{{ _('Master switch for all email notifications') }}</p>
                    </label>
                </div>
                
                <div class="ml-8 space-y-3 border-l-2 border-gray-200 dark:border-gray-700 pl-4">
                    <div class="flex items-center">
                        <input type="checkbox" id="notification_overdue_invoices" name="notification_overdue_invoices"
                               {% if user.notification_overdue_invoices %}checked{% endif %}
                               class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
                        <label for="notification_overdue_invoices" class="ml-3 block text-sm text-gray-700 dark:text-gray-300">
                            {{ _('Overdue Invoice Notifications') }}
                        </label>
                    </div>
                    
                    <div class="flex items-center">
                        <input type="checkbox" id="notification_task_assigned" name="notification_task_assigned"
                               {% if user.notification_task_assigned %}checked{% endif %}
                               class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
                        <label for="notification_task_assigned" class="ml-3 block text-sm text-gray-700 dark:text-gray-300">
                            {{ _('Task Assignment Notifications') }}
                        </label>
                    </div>
                    
                    <div class="flex items-center">
                        <input type="checkbox" id="notification_task_comments" name="notification_task_comments"
                               {% if user.notification_task_comments %}checked{% endif %}
                               class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
                        <label for="notification_task_comments" class="ml-3 block text-sm text-gray-700 dark:text-gray-300">
                            {{ _('Comment & Mention Notifications') }}
                        </label>
                    </div>
                    
                    <div class="flex items-center">
                        <input type="checkbox" id="notification_weekly_summary" name="notification_weekly_summary"
                               {% if user.notification_weekly_summary %}checked{% endif %}
                               class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
                        <label for="notification_weekly_summary" class="ml-3 block text-sm text-gray-700 dark:text-gray-300">
                            {{ _('Weekly Time Summary Email') }}
                        </label>
                    </div>
                </div>
            </div>
        </div>

        <!-- Display Preferences -->
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
            <h2 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">
                <i class="fas fa-palette mr-2"></i>{{ _('Display Preferences') }}
            </h2>
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                    <label for="theme_preference" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        {{ _('Theme') }}
                    </label>
                    <select id="theme_preference" name="theme_preference"
                            class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
                        <option value="">{{ _('System Default') }}</option>
                        <option value="light" {% if user.theme_preference == 'light' %}selected{% endif %}>☀️ {{ _('Light') }}</option>
                        <option value="dark" {% if user.theme_preference == 'dark' %}selected{% endif %}>🌙 {{ _('Dark') }}</option>
                    </select>
                </div>
                
                <div>
                    <label for="preferred_language" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        {{ _('Language') }}
                    </label>
                    <select id="preferred_language" name="preferred_language"
                            class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
                        <option value="">{{ _('System Default') }}</option>
                        {% for code, name in languages.items() %}
                        <option value="{{ code }}" {% if current_language_code == code %}selected{% endif %}>{{ name }}</option>
                        {% endfor %}
                    </select>
                </div>
            </div>
        </div>

        <!-- Time Rounding Preferences -->
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
            <h2 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">
                <i class="fas fa-clock mr-2"></i>{{ _('Time Rounding Preferences') }}
            </h2>
            <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
                {{ _('Configure how your time entries are rounded. This affects how durations are calculated when you stop timers.') }}
            </p>
            
            <div class="space-y-4">
                <div class="flex items-center">
                    <input type="checkbox" id="time_rounding_enabled" name="time_rounding_enabled" 
                           {% if user.time_rounding_enabled %}checked{% endif %}
                           class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
                           onchange="toggleRoundingOptions()">
                    <label for="time_rounding_enabled" class="ml-3 block text-sm text-gray-700 dark:text-gray-300">
                        <span class="font-medium">{{ _('Enable Time Rounding') }}</span>
                        <p class="text-xs text-gray-500 dark:text-gray-400">{{ _('Round time entries to configured intervals') }}</p>
                    </label>
                </div>
                
                <div id="rounding-options" class="ml-8 space-y-4 border-l-2 border-gray-200 dark:border-gray-700 pl-4">
                    <div>
                        <label for="time_rounding_minutes" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                            {{ _('Rounding Interval') }}
                        </label>
                        <select id="time_rounding_minutes" name="time_rounding_minutes"
                                class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
                            {% for minutes, label in rounding_intervals %}
                            <option value="{{ minutes }}" {% if user.time_rounding_minutes == minutes %}selected{% endif %}>{{ label }}</option>
                            {% endfor %}
                        </select>
                        <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">{{ _('Time entries will be rounded to this interval') }}</p>
                    </div>
                    
                    <div>
                        <label for="time_rounding_method" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                            {{ _('Rounding Method') }}
                        </label>
                        <select id="time_rounding_method" name="time_rounding_method"
                                class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white"
                                onchange="updateRoundingMethodDescription()">
                            {% for method, label, description in rounding_methods %}
                            <option value="{{ method }}" data-description="{{ description }}" {% if user.time_rounding_method == method %}selected{% endif %}>{{ label }}</option>
                            {% endfor %}
                        </select>
                        <p id="rounding-method-description" class="text-xs text-gray-500 dark:text-gray-400 mt-1"></p>
                    </div>
                    
                    <!-- Example visualization -->
                    <div class="bg-blue-50 dark:bg-blue-900/20 p-4 rounded-md">
                        <p class="text-sm font-medium text-blue-900 dark:text-blue-100 mb-2">
                            <i class="fas fa-info-circle mr-1"></i>{{ _('Example') }}
                        </p>
                        <div id="rounding-example" class="text-xs text-blue-800 dark:text-blue-200 space-y-1">
                            <!-- Will be populated by JavaScript -->
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Overtime Settings -->
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
            <h2 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">
                <i class="fas fa-business-time mr-2"></i>{{ _('Overtime Settings') }}
            </h2>
            <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
                {{ _('Set your standard working hours per day. Any time worked beyond this will be counted as overtime.') }}
            </p>
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                    <label for="standard_hours_per_day" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        {{ _('Standard Hours Per Day') }}
                    </label>
                    <div class="relative">
                        <input type="number" id="standard_hours_per_day" name="standard_hours_per_day" 
                               value="{{ user.standard_hours_per_day }}"
                               min="0.5" max="24" step="0.5"
                               class="w-full px-3 py-2 pr-16 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none">
                        <span class="absolute right-3 top-2.5 text-sm text-gray-500 dark:text-gray-400 pointer-events-none">{{ _('hours') }}</span>
                    </div>
                    <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">{{ _('Typically 8 hours for a full-time job') }}</p>
                </div>
                
                <div class="flex items-center bg-blue-50 dark:bg-blue-900/20 p-4 rounded-md">
                    <div>
                        <p class="text-sm font-medium text-blue-900 dark:text-blue-100 mb-1">
                            <i class="fas fa-info-circle mr-1"></i>{{ _('How it works') }}
                        </p>
                        <p class="text-xs text-blue-800 dark:text-blue-200">
                            {{ _('If you work more than your standard hours in a day, the extra time will be tracked as overtime in reports and analytics.') }}
                        </p>
                    </div>
                </div>
            </div>
        </div>

        <!-- UI Customization -->
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
            <h2 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">
                <i class="fas fa-sliders-h mr-2"></i>{{ _('UI Customization') }}
            </h2>
            <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
                {{ _('Customize which features are visible in your navigation menu. Hide features you don\'t use to simplify your interface. Core features like Dashboard, Log Time, Projects, Tasks, Invoices, Expenses, and Clients are always visible. Some options may be disabled system-wide by an administrator.') }}
            </p>
            
            <div class="space-y-6">
                <!-- Calendar Section -->
                <div>
                    <div class="flex items-center mb-3">
                        {% if not settings or settings.ui_allow_calendar %}
                        <input type="checkbox" id="ui_show_calendar" name="ui_show_calendar" 
                               {% if user.ui_show_calendar %}checked{% endif %}
                               class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
                        <label for="ui_show_calendar" class="ml-3 block text-sm font-medium text-gray-700 dark:text-gray-300">
                            {{ _('Show Calendar') }}
                        </label>
                        {% else %}
                        <p class="text-xs text-text-muted-light dark:text-text-muted-dark">
                            {{ _('Calendar is disabled system-wide by an administrator.') }}
                        </p>
                        {% endif %}
                    </div>
                </div>
                
                <!-- Time Tracking Section -->
                <div class="border-l-2 border-gray-200 dark:border-gray-700 pl-4">
                    <p class="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-3">{{ _('Time Tracking') }}</p>
                    <div class="space-y-3">
                        {% if not settings or settings.ui_allow_project_templates %}
                        <div class="flex items-center">
                            <input type="checkbox" id="ui_show_project_templates" name="ui_show_project_templates"
                                   {% if user.ui_show_project_templates %}checked{% endif %}
                                   class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
                            <label for="ui_show_project_templates" class="ml-3 block text-sm text-gray-700 dark:text-gray-300">
                                {{ _('Project Templates') }}
                            </label>
                        </div>
                        {% endif %}
                        {% if not settings or settings.ui_allow_gantt_chart %}
                        <div class="flex items-center">
                            <input type="checkbox" id="ui_show_gantt_chart" name="ui_show_gantt_chart"
                                   {% if user.ui_show_gantt_chart %}checked{% endif %}
                                   class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
                            <label for="ui_show_gantt_chart" class="ml-3 block text-sm text-gray-700 dark:text-gray-300">
                                {{ _('Gantt Chart') }}
                            </label>
                        </div>
                        {% endif %}
                        {% if not settings or settings.ui_allow_kanban_board %}
                        <div class="flex items-center">
                            <input type="checkbox" id="ui_show_kanban_board" name="ui_show_kanban_board"
                                   {% if user.ui_show_kanban_board %}checked{% endif %}
                                   class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
                            <label for="ui_show_kanban_board" class="ml-3 block text-sm text-gray-700 dark:text-gray-300">
                                {{ _('Kanban Board') }}
                            </label>
                        </div>
                        {% endif %}
                        {% if not settings or settings.ui_allow_weekly_goals %}
                        <div class="flex items-center">
                            <input type="checkbox" id="ui_show_weekly_goals" name="ui_show_weekly_goals"
                                   {% if user.ui_show_weekly_goals %}checked{% endif %}
                                   class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
                            <label for="ui_show_weekly_goals" class="ml-3 block text-sm text-gray-700 dark:text-gray-300">
                                {{ _('Weekly Goals') }}
                            </label>
                        </div>
                        {% if settings.ui_allow_issues %}
                        <div class="flex items-center">
                            <input type="checkbox" id="ui_show_issues" name="ui_show_issues"
                                   {% if user.ui_show_issues %}checked{% endif %}
                                   class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
                            <label for="ui_show_issues" class="ml-3 block text-sm text-gray-700 dark:text-gray-300">
                                {{ _('Issues') }}
                            </label>
                        </div>
                        {% endif %}
                        {% endif %}
                    </div>
                </div>
                
                <!-- CRM Section -->
                <div class="border-l-2 border-gray-200 dark:border-gray-700 pl-4">
                    <p class="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-3">{{ _('CRM') }}</p>
                    {% if not settings or settings.ui_allow_quotes %}
                    <div class="flex items-center">
                        <input type="checkbox" id="ui_show_quotes" name="ui_show_quotes"
                               {% if user.ui_show_quotes %}checked{% endif %}
                               class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
                        <label for="ui_show_quotes" class="ml-3 block text-sm text-gray-700 dark:text-gray-300">
                            {{ _('Quotes') }}
                        </label>
                    </div>
                    {% endif %}
                </div>
                
                <!-- Finance & Expenses Section -->
                <div class="border-l-2 border-gray-200 dark:border-gray-700 pl-4">
                    <p class="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-3">{{ _('Finance & Expenses') }}</p>
                    <div class="space-y-3">
                        {% if not settings or settings.ui_allow_reports %}
                        <div class="flex items-center">
                            <input type="checkbox" id="ui_show_reports" name="ui_show_reports"
                                   {% if user.ui_show_reports %}checked{% endif %}
                                   class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
                            <label for="ui_show_reports" class="ml-3 block text-sm text-gray-700 dark:text-gray-300">
                                {{ _('Reports') }}
                            </label>
                        </div>
                        {% endif %}
                        {% if not settings or settings.ui_allow_report_builder %}
                        <div class="flex items-center">
                            <input type="checkbox" id="ui_show_report_builder" name="ui_show_report_builder"
                                   {% if user.ui_show_report_builder %}checked{% endif %}
                                   class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
                            <label for="ui_show_report_builder" class="ml-3 block text-sm text-gray-700 dark:text-gray-300">
                                {{ _('Report Builder') }}
                            </label>
                        </div>
                        {% endif %}
                        {% if not settings or settings.ui_allow_scheduled_reports %}
                        <div class="flex items-center">
                            <input type="checkbox" id="ui_show_scheduled_reports" name="ui_show_scheduled_reports"
                                   {% if user.ui_show_scheduled_reports %}checked{% endif %}
                                   class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
                            <label for="ui_show_scheduled_reports" class="ml-3 block text-sm text-gray-700 dark:text-gray-300">
                                {{ _('Scheduled Reports') }}
                            </label>
                        </div>
                        {% endif %}
                        {% if not settings or settings.ui_allow_invoice_approvals %}
                        <div class="flex items-center">
                            <input type="checkbox" id="ui_show_invoice_approvals" name="ui_show_invoice_approvals"
                                   {% if user.ui_show_invoice_approvals %}checked{% endif %}
                                   class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
                            <label for="ui_show_invoice_approvals" class="ml-3 block text-sm text-gray-700 dark:text-gray-300">
                                {{ _('Invoice Approvals') }}
                            </label>
                        </div>
                        {% endif %}
                        {% if not settings or settings.ui_allow_payment_gateways %}
                        <div class="flex items-center">
                            <input type="checkbox" id="ui_show_payment_gateways" name="ui_show_payment_gateways"
                                   {% if user.ui_show_payment_gateways %}checked{% endif %}
                                   class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
                            <label for="ui_show_payment_gateways" class="ml-3 block text-sm text-gray-700 dark:text-gray-300">
                                {{ _('Payment Gateways') }}
                            </label>
                        </div>
                        {% endif %}
                        {% if not settings or settings.ui_allow_recurring_invoices %}
                        <div class="flex items-center">
                            <input type="checkbox" id="ui_show_recurring_invoices" name="ui_show_recurring_invoices"
                                   {% if user.ui_show_recurring_invoices %}checked{% endif %}
                                   class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
                            <label for="ui_show_recurring_invoices" class="ml-3 block text-sm text-gray-700 dark:text-gray-300">
                                {{ _('Recurring Invoices') }}
                            </label>
                        </div>
                        {% endif %}
                        {% if not settings or settings.ui_allow_payments %}
                        <div class="flex items-center">
                            <input type="checkbox" id="ui_show_payments" name="ui_show_payments"
                                   {% if user.ui_show_payments %}checked{% endif %}
                                   class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
                            <label for="ui_show_payments" class="ml-3 block text-sm text-gray-700 dark:text-gray-300">
                                {{ _('Payments') }}
                            </label>
                        </div>
                        {% endif %}
                        {% if not settings or settings.ui_allow_mileage %}
                        <div class="flex items-center">
                            <input type="checkbox" id="ui_show_mileage" name="ui_show_mileage"
                                   {% if user.ui_show_mileage %}checked{% endif %}
                                   class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
                            <label for="ui_show_mileage" class="ml-3 block text-sm text-gray-700 dark:text-gray-300">
                                {{ _('Mileage') }}
                            </label>
                        </div>
                        {% endif %}
                        {% if not settings or settings.ui_allow_per_diem %}
                        <div class="flex items-center">
                            <input type="checkbox" id="ui_show_per_diem" name="ui_show_per_diem"
                                   {% if user.ui_show_per_diem %}checked{% endif %}
                                   class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
                            <label for="ui_show_per_diem" class="ml-3 block text-sm text-gray-700 dark:text-gray-300">
                                {{ _('Per Diem') }}
                            </label>
                        </div>
                        {% endif %}
                        {% if not settings or settings.ui_allow_budget_alerts %}
                        <div class="flex items-center">
                            <input type="checkbox" id="ui_show_budget_alerts" name="ui_show_budget_alerts"
                                   {% if user.ui_show_budget_alerts %}checked{% endif %}
                                   class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
                            <label for="ui_show_budget_alerts" class="ml-3 block text-sm text-gray-700 dark:text-gray-300">
                                {{ _('Budget Alerts') }}
                            </label>
                        </div>
                        {% endif %}
                    </div>
                </div>
                
                <!-- Inventory Section -->
                <div class="border-l-2 border-gray-200 dark:border-gray-700 pl-4">
                    <p class="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-3">{{ _('Inventory') }}</p>
                    {% if not settings or settings.ui_allow_inventory %}
                    <div class="flex items-center">
                        <input type="checkbox" id="ui_show_inventory" name="ui_show_inventory" 
                               {% if user.ui_show_inventory %}checked{% endif %}
                               class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
                        <label for="ui_show_inventory" class="ml-3 block text-sm text-gray-700 dark:text-gray-300">
                            {{ _('Show Inventory Section') }}
                        </label>
                    </div>
                    {% else %}
                    <p class="text-xs text-text-muted-light dark:text-text-muted-dark">
                        {{ _('Inventory is disabled system-wide by an administrator.') }}
                    </p>
                    {% endif %}
                </div>
                
                <!-- Analytics Section -->
                <div class="border-l-2 border-gray-200 dark:border-gray-700 pl-4">
                    <p class="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-3">{{ _('Analytics') }}</p>
                    {% if not settings or settings.ui_allow_analytics %}
                    <div class="flex items-center">
                        <input type="checkbox" id="ui_show_analytics" name="ui_show_analytics"
                               {% if user.ui_show_analytics %}checked{% endif %}
                               class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
                        <label for="ui_show_analytics" class="ml-3 block text-sm text-gray-700 dark:text-gray-300">
                            {{ _('Show Analytics') }}
                        </label>
                    </div>
                    {% endif %}
                </div>
                
                <!-- Tools & Data Section -->
                <div class="border-l-2 border-gray-200 dark:border-gray-700 pl-4">
                    <p class="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-3">{{ _('Tools & Data') }}</p>
                    {% if not settings or settings.ui_allow_tools %}
                    <div class="flex items-center">
                        <input type="checkbox" id="ui_show_tools" name="ui_show_tools"
                               {% if user.ui_show_tools %}checked{% endif %}
                               class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
                        <label for="ui_show_tools" class="ml-3 block text-sm text-gray-700 dark:text-gray-300">
                            {{ _('Show Tools & Data Section') }}
                        </label>
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>

        <!-- Regional Settings -->
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
            <h2 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">
                <i class="fas fa-globe mr-2"></i>{{ _('Regional Settings') }}
            </h2>
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                    <label for="timezone" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        {{ _('Timezone') }}
                    </label>
                    <select id="timezone" name="timezone"
                            class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
                        <option value="">{{ _('System Default') }}</option>
                        {% for tz in timezones %}
                        <option value="{{ tz }}" {% if user.timezone == tz %}selected{% endif %}>{{ tz }}</option>
                        {% endfor %}
                    </select>
                </div>
                
                <div>
                    <label for="date_format" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        {{ _('Date Format') }}
                    </label>
                    <select id="date_format" name="date_format"
                            class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
                        <option value="YYYY-MM-DD" {% if user.date_format == 'YYYY-MM-DD' %}selected{% endif %}>YYYY-MM-DD (2025-01-22)</option>
                        <option value="MM/DD/YYYY" {% if user.date_format == 'MM/DD/YYYY' %}selected{% endif %}>MM/DD/YYYY (01/22/2025)</option>
                        <option value="DD/MM/YYYY" {% if user.date_format == 'DD/MM/YYYY' %}selected{% endif %}>DD/MM/YYYY (22/01/2025)</option>
                        <option value="DD.MM.YYYY" {% if user.date_format == 'DD.MM.YYYY' %}selected{% endif %}>DD.MM.YYYY (22.01.2025)</option>
                    </select>
                </div>
                
                <div>
                    <label for="time_format" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        {{ _('Time Format') }}
                    </label>
                    <select id="time_format" name="time_format"
                            class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
                        <option value="24h" {% if user.time_format == '24h' %}selected{% endif %}>24-hour (14:30)</option>
                        <option value="12h" {% if user.time_format == '12h' %}selected{% endif %}>12-hour (2:30 PM)</option>
                    </select>
                </div>
                
                <div>
                    <label for="week_start_day" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        {{ _('Week Starts On') }}
                    </label>
                    <select id="week_start_day" name="week_start_day"
                            class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
                        <option value="0" {% if user.week_start_day == 0 %}selected{% endif %}>{{ _('Sunday') }}</option>
                        <option value="1" {% if user.week_start_day == 1 %}selected{% endif %}>{{ _('Monday') }}</option>
                        <option value="6" {% if user.week_start_day == 6 %}selected{% endif %}>{{ _('Saturday') }}</option>
                    </select>
                </div>
            </div>
        </div>

        <!-- Save Button -->
        <div class="flex justify-end space-x-4">
            <a href="{{ url_for('main.dashboard') }}" class="px-6 py-2 border border-gray-300 rounded-md text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 transition">
                {{ _('Cancel') }}
            </a>
            <button type="submit" class="px-6 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-md transition">
                <i class="fas fa-save mr-2"></i>{{ _('Save Settings') }}
            </button>
        </div>
    </form>
</div>

<script>
// Live theme preview
document.getElementById('theme_preference').addEventListener('change', function() {
    const theme = this.value;
    if (theme === 'dark') {
        document.documentElement.classList.add('dark');
    } else if (theme === 'light') {
        document.documentElement.classList.remove('dark');
    } else {
        // System default
        if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
            document.documentElement.classList.add('dark');
        } else {
            document.documentElement.classList.remove('dark');
        }
    }
});

// Show warning if email notifications are enabled but no email is provided
document.getElementById('email_notifications').addEventListener('change', function() {
    const emailField = document.getElementById('email');
    if (this.checked && !emailField.value) {
        emailField.classList.add('border-yellow-500');
        emailField.focus();
    } else {
        emailField.classList.remove('border-yellow-500');
    }
});

// Toggle rounding options visibility
function toggleRoundingOptions() {
    const enabled = document.getElementById('time_rounding_enabled').checked;
    const options = document.getElementById('rounding-options');
    
    if (enabled) {
        options.style.opacity = '1';
        options.querySelectorAll('select').forEach(select => select.disabled = false);
    } else {
        options.style.opacity = '0.5';
        options.querySelectorAll('select').forEach(select => select.disabled = true);
    }
    updateRoundingExample();
}

// Update rounding method description
function updateRoundingMethodDescription() {
    const select = document.getElementById('time_rounding_method');
    const description = select.options[select.selectedIndex].getAttribute('data-description');
    document.getElementById('rounding-method-description').textContent = description;
    updateRoundingExample();
}

// Update rounding example visualization
function updateRoundingExample() {
    const enabled = document.getElementById('time_rounding_enabled').checked;
    const minutes = parseInt(document.getElementById('time_rounding_minutes').value);
    const method = document.getElementById('time_rounding_method').value;
    const exampleDiv = document.getElementById('rounding-example');
    
    if (!enabled) {
        exampleDiv.innerHTML = '<p>{{ _("Time rounding is disabled. All times will be recorded exactly as tracked.") }}</p>';
        return;
    }
    
    if (minutes === 1) {
        exampleDiv.innerHTML = '<p>{{ _("No rounding - times will be recorded exactly as tracked.") }}</p>';
        return;
    }
    
    // Calculate examples
    const testDuration = 62; // 62 minutes = 1h 2min
    let rounded;
    
    if (method === 'up') {
        rounded = Math.ceil(testDuration / minutes) * minutes;
    } else if (method === 'down') {
        rounded = Math.floor(testDuration / minutes) * minutes;
    } else {
        rounded = Math.round(testDuration / minutes) * minutes;
    }
    
    const formatTime = (mins) => {
        const hours = Math.floor(mins / 60);
        const remainingMins = mins % 60;
        if (hours > 0) {
            return remainingMins > 0 ? `${hours}h ${remainingMins}m` : `${hours}h`;
        }
        return `${remainingMins}m`;
    };
    
    exampleDiv.innerHTML = `
        <p><strong>{{ _("Actual time:") }}</strong> ${formatTime(testDuration)} → <strong>{{ _("Rounded:") }}</strong> ${formatTime(rounded)}</p>
        <p class="text-xs opacity-75">{{ _("With ") }}${minutes}{{ _(" minute intervals") }}</p>
    `;
}

// Initialize on page load
document.addEventListener('DOMContentLoaded', function() {
    toggleRoundingOptions();
    updateRoundingMethodDescription();
    
    // Update example when settings change
    document.getElementById('time_rounding_enabled').addEventListener('change', updateRoundingExample);
    document.getElementById('time_rounding_minutes').addEventListener('change', updateRoundingExample);
});
</script>
{% endblock %}