{% extends "layout.html" %}

{% block content %}
<div class="config-container">
    <h1>User Preferences</h1>
    <p class="description">Configure your personal display preferences and time tracking settings.</p>

    <!-- Company Policies (Read-only) -->
    {% if company_config %}
    <div class="info-section">
        <h3>Company Work Policies <span class="read-only">(Read-only)</span></h3>
        <p class="section-description">
            These policies are set by your administrator and apply to all employees.
            {% if g.user.role == Role.ADMIN or g.user.role == Role.SYSTEM_ADMIN %}
            <a href="{{ url_for('companies.admin_company') }}">Click here to modify these settings</a>.
            {% endif %}
        </p>
        
        <div class="policy-info">
            <div class="policy-item">
                <strong>Region:</strong> {{ company_config.work_region.value }}
            </div>
            <div class="policy-item">
                <strong>Standard Work Day:</strong> {{ company_config.standard_hours_per_day }} hours
            </div>
            <div class="policy-item">
                <strong>Break Policy:</strong> 
                {% if company_config.require_breaks %}
                    {{ company_config.break_duration_minutes }} minutes after {{ company_config.break_after_hours }} hours
                {% else %}
                    No mandatory breaks
                {% endif %}
            </div>
        </div>
    </div>
    {% endif %}

    <!-- User Preferences Form -->
    <form method="POST" action="{{ url_for('config') }}" class="config-form">

        <div class="form-section">
            <h3>Display Format Settings</h3>
            <p class="section-description">
                Customize how dates and times are displayed throughout the application.
            </p>
            
            <div class="form-group">
                <label for="date_format">Date Format:</label>
                <select id="date_format" name="date_format">
                    {% for value, label, example in date_format_options %}
                    <option value="{{ value }}" {% if preferences.date_format == value %}selected{% endif %}>
                        {{ label }}
                    </option>
                    {% endfor %}
                </select>
                <small>Choose how dates are displayed</small>
            </div>
            
            <div class="form-group">
                <div class="checkbox-group">
                    <input type="checkbox" 
                           id="time_format_24h" 
                           name="time_format_24h" 
                           {% if preferences.time_format_24h %}checked{% endif %}>
                    <label for="time_format_24h">Use 24-hour time format</label>
                    <small>If unchecked, will use 12-hour format with AM/PM</small>
                </div>
            </div>
            
            <div class="format-example" id="format-example">
                <h4>Example:</h4>
                <div id="format-example-text">
                    <!-- JavaScript will populate this -->
                </div>
            </div>
        </div>

        <div class="form-section">
            <h3>Time Rounding Settings</h3>
            <p class="section-description">
                Time rounding helps standardize billing and reporting by rounding time entries to specified intervals.
            </p>
            
            <div class="form-group">
                <label for="time_rounding_minutes">Time Rounding Interval:</label>
                <select id="time_rounding_minutes" name="time_rounding_minutes">
                    {% for value, label in rounding_options %}
                    <option value="{{ value }}" {% if preferences.time_rounding_minutes == value %}selected{% endif %}>
                        {{ label }}
                    </option>
                    {% endfor %}
                </select>
                <small>Round time entries to the nearest interval</small>
            </div>
            
            <div class="form-group">
                <div class="checkbox-group">
                    <input type="checkbox" 
                           id="round_to_nearest" 
                           name="round_to_nearest" 
                           {% if preferences.round_to_nearest %}checked{% endif %}>
                    <label for="round_to_nearest">Round to nearest interval</label>
                    <small>If unchecked, will always round up</small>
                </div>
            </div>
            
            <div class="rounding-example" id="rounding-example">
                <h4>Example:</h4>
                <div id="example-text">
                    <!-- JavaScript will populate this -->
                </div>
            </div>
        </div>

        <button type="submit" class="btn btn-primary">Save Preferences</button>
    </form>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const dateFormatSelect = document.getElementById('date_format');
    const timeFormat24hCheckbox = document.getElementById('time_format_24h');
    const formatExampleDiv = document.getElementById('format-example-text');
    
    const roundingSelect = document.getElementById('time_rounding_minutes');
    const roundToNearestCheckbox = document.getElementById('round_to_nearest');
    const exampleDiv = document.getElementById('example-text');
    
    function updateFormatExample() {
        const dateFormat = dateFormatSelect.value;
        const timeFormat24h = timeFormat24hCheckbox.checked;
        
        // Create a sample date for demonstration
        const sampleDate = new Date(2024, 11, 25, 14, 30, 45); // Dec 25, 2024, 2:30:45 PM
        
        let dateExample = '';
        let timeExample = '';
        
        // Format date examples
        switch(dateFormat) {
            case 'ISO':
                dateExample = '2024-12-25';
                break;
            case 'US':
                dateExample = '12/25/2024';
                break;
            case 'EU':
            case 'UK':
                dateExample = '25/12/2024';
                break;
            case 'Readable':
                dateExample = 'Dec 25, 2024';
                break;
            case 'Full':
                dateExample = 'December 25, 2024';
                break;
        }
        
        // Format time examples
        if (timeFormat24h) {
            timeExample = '14:30:45';
        } else {
            timeExample = '2:30:45 PM';
        }
        
        formatExampleDiv.innerHTML = `
            <strong>Date:</strong> ${dateExample}<br>
            <strong>Time:</strong> ${timeExample}<br>
            <strong>Combined:</strong> ${dateExample} ${timeExample}
        `;
    }
    
    function updateRoundingExample() {
        const interval = parseInt(roundingSelect.value);
        const roundToNearest = roundToNearestCheckbox.checked;
        
        if (interval === 0) {
            exampleDiv.innerHTML = '<em>No rounding applied. Times are recorded exactly as entered.</em>';
            return;
        }
        
        const roundingType = roundToNearest ? 'nearest' : 'up';
        const examples = [];
        
        if (interval === 15) {
            if (roundToNearest) {
                examples.push('9:07 AM <i class="ti ti-arrow-right"></i> 9:00 AM');
                examples.push('9:08 AM <i class="ti ti-arrow-right"></i> 9:15 AM');
                examples.push('9:23 AM <i class="ti ti-arrow-right"></i> 9:30 AM');
            } else {
                examples.push('9:01 AM <i class="ti ti-arrow-right"></i> 9:15 AM');
                examples.push('9:16 AM <i class="ti ti-arrow-right"></i> 9:30 AM');
                examples.push('9:31 AM <i class="ti ti-arrow-right"></i> 9:45 AM');
            }
        } else if (interval === 30) {
            if (roundToNearest) {
                examples.push('9:14 AM <i class="ti ti-arrow-right"></i> 9:00 AM');
                examples.push('9:16 AM <i class="ti ti-arrow-right"></i> 9:30 AM');
                examples.push('9:45 AM <i class="ti ti-arrow-right"></i> 10:00 AM');
            } else {
                examples.push('9:01 AM <i class="ti ti-arrow-right"></i> 9:30 AM');
                examples.push('9:31 AM <i class="ti ti-arrow-right"></i> 10:00 AM');
                examples.push('10:01 AM <i class="ti ti-arrow-right"></i> 10:30 AM');
            }
        } else if (interval === 60) {
            if (roundToNearest) {
                examples.push('9:29 AM <i class="ti ti-arrow-right"></i> 9:00 AM');
                examples.push('9:31 AM <i class="ti ti-arrow-right"></i> 10:00 AM');
                examples.push('10:30 AM <i class="ti ti-arrow-right"></i> 11:00 AM');
            } else {
                examples.push('9:01 AM <i class="ti ti-arrow-right"></i> 10:00 AM');
                examples.push('10:01 AM <i class="ti ti-arrow-right"></i> 11:00 AM');
                examples.push('11:01 AM <i class="ti ti-arrow-right"></i> 12:00 PM');
            }
        }
        
        const exampleText = `Rounding ${roundingType} to ${interval} minute intervals:<br>` + 
                           examples.map(ex => `• ${ex}`).join('<br>');
        exampleDiv.innerHTML = exampleText;
    }
    
    // Update examples when settings change
    dateFormatSelect.addEventListener('change', updateFormatExample);
    timeFormat24hCheckbox.addEventListener('change', updateFormatExample);
    roundingSelect.addEventListener('change', updateRoundingExample);
    roundToNearestCheckbox.addEventListener('change', updateRoundingExample);
    
    // Initial examples
    updateFormatExample();
    updateRoundingExample();
});
</script>

<style>
.config-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem;
}

.description {
    color: #666;
    margin-bottom: 2rem;
    font-size: 1.1rem;
}

.info-section {
    background: #e8f4fd;
    padding: 1.5rem;
    border-radius: 8px;
    margin-bottom: 2rem;
    border-left: 4px solid #17a2b8;
}

.info-section h3 {
    margin-top: 0;
    color: #0c5460;
}

.read-only {
    font-size: 0.8rem;
    color: #6c757d;
    font-weight: normal;
}

.policy-info {
    background: white;
    padding: 1rem;
    border-radius: 6px;
    margin-top: 1rem;
}

.policy-item {
    margin-bottom: 0.5rem;
    color: #495057;
}

.section-description {
    color: #666;
    font-style: italic;
    margin-bottom: 1.5rem;
}

.checkbox-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.checkbox-group input[type="checkbox"] {
    width: auto;
    margin: 0;
}

.checkbox-group label {
    margin: 0;
    font-weight: normal;
}

.rounding-example {
    background: #e8f5e9;
    padding: 1rem;
    border-radius: 6px;
    margin-top: 1rem;
    border-left: 4px solid #4CAF50;
}

.rounding-example h4 {
    margin-top: 0;
    color: #2e7d32;
}

.format-example {
    background: #e3f2fd;
    padding: 1rem;
    border-radius: 6px;
    margin-top: 1rem;
    border-left: 4px solid #2196f3;
}

.format-example h4 {
    margin-top: 0;
    color: #1976d2;
}
</style>
{% endblock %}