{% extends "layout.html" %}

{% block content %}
<div class="container">
    <h2>Company Work Policies</h2>
    <p class="description">Configure company-wide work policies and break time requirements. These settings apply to all employees and ensure compliance with local labor laws.</p>
    
    <!-- Regional Presets Section -->
    <div class="section">
        <h3>Regional Presets</h3>
        <p class="section-description">
            Apply predefined work policies based on your country's labor laws. These presets ensure compliance with local regulations.
        </p>
        
        <form method="POST" class="preset-form">
            <input type="hidden" name="action" value="apply_preset">
            
            <div class="preset-grid">
                {% for preset in regional_presets %}
                <div class="preset-card {% if work_config.region.value == preset.code %}active{% endif %}">
                    <div class="preset-header">
                        <h4>{{ preset.name }}</h4>
                        <input type="radio" name="region_preset" value="{{ preset.code }}" 
                               {% if work_config.region.value == preset.code %}checked{% endif %}>
                    </div>
                    <div class="preset-details">
                        {{ preset.description }}
                    </div>
                </div>
                {% endfor %}
            </div>
            
            <button type="submit" class="btn btn-primary">Apply Selected Preset</button>
        </form>
    </div>
    
    <!-- Manual Configuration Section -->
    <div class="section">
        <h3>Custom Configuration</h3>
        <p class="section-description">
            Manually configure work policies for custom requirements. Note: Ensure compliance with local labor laws.
        </p>
        
        <form method="POST" class="config-form">
            <div class="form-group">
                <label for="work_hours_per_day">Standard Work Hours Per Day:</label>
                <input type="number" 
                       id="standard_hours_per_day" 
                       name="standard_hours_per_day" 
                       value="{{ work_config.standard_hours_per_day }}" 
                       min="1" 
                       max="24" 
                       step="0.5" 
                       required>
                <small>Standard number of work hours per day for full-time employees</small>
            </div>
            
            <div class="form-section">
                <h4>Primary Break Requirements</h4>
                
                <div class="form-group">
                    <label for="mandatory_break_minutes">Mandatory Break Duration (minutes):</label>
                    <input type="number" 
                           id="break_duration_minutes" 
                           name="break_duration_minutes" 
                           value="{{ work_config.break_duration_minutes }}" 
                           min="0" 
                           max="240" 
                           required>
                    <small>Required break time in minutes (set to 0 to disable)</small>
                </div>
                
                <div class="form-group">
                    <label for="break_threshold_hours">Break Threshold (hours):</label>
                    <input type="number" 
                           id="break_after_hours" 
                           name="break_after_hours" 
                           value="{{ work_config.break_after_hours }}" 
                           min="0" 
                           max="24" 
                           step="0.5" 
                           required>
                    <small>Work hours after which a break becomes mandatory</small>
                </div>
            </div>
            
            <div class="form-section">
                <h4>Additional Break Requirements</h4>
                
                <div class="form-group">
                    <label for="additional_break_minutes">Additional Break Duration (minutes):</label>
                    <input type="number" 
                           id="additional_break_minutes" 
                           name="additional_break_minutes" 
                           value="{{ work_config.additional_break_minutes }}" 
                           min="0" 
                           max="240" 
                           required>
                    <small>Additional break time for extended work sessions (set to 0 to disable)</small>
                </div>
                
                <div class="form-group">
                    <label for="additional_break_threshold_hours">Additional Break Threshold (hours):</label>
                    <input type="number" 
                           id="additional_break_threshold_hours" 
                           name="additional_break_threshold_hours" 
                           value="{{ work_config.additional_break_threshold_hours }}" 
                           min="0" 
                           max="24" 
                           step="0.5" 
                           required>
                    <small>Work hours after which an additional break becomes necessary</small>
                </div>
            </div>
            
            <div class="current-config">
                <h4>Current Configuration Summary</h4>
                <div class="config-summary">
                    <strong>Region:</strong> {{ work_config.work_region.value }}<br>
                    <strong>Work Day:</strong> {{ work_config.standard_hours_per_day }} hours<br>
                    <strong>Break Policy:</strong> 
                    {% if work_config.mandatory_break_minutes > 0 %}
                        {{ work_config.break_duration_minutes }} minutes after {{ work_config.break_after_hours }} hours
                    {% else %}
                        No mandatory breaks
                    {% endif %}
                    <br>
                    <strong>Additional Break:</strong>
                    {% if work_config.additional_break_minutes > 0 %}
                        {{ work_config.additional_break_minutes }} minutes after {{ work_config.additional_break_threshold_hours }} hours
                    {% else %}
                        No additional breaks
                    {% endif %}
                </div>
            </div>
            
            <button type="submit" class="btn btn-primary">Save Custom Configuration</button>
            <a href="{{ url_for('companies.admin_company') }}" class="btn btn-secondary">Back to Company Settings</a>
        </form>
    </div>
</div>

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

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

.section {
    background: #f8f9fa;
    padding: 2rem;
    border-radius: 8px;
    margin-bottom: 2rem;
}

.section h3 {
    margin-top: 0;
    color: #333;
    border-bottom: 2px solid #007bff;
    padding-bottom: 0.5rem;
}

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

.preset-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.preset-card {
    background: white;
    border: 2px solid #e9ecef;
    border-radius: 8px;
    padding: 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.preset-card:hover {
    border-color: #007bff;
    box-shadow: 0 2px 8px rgba(0, 123, 255, 0.1);
}

.preset-card.active {
    border-color: #007bff;
    background: #e7f3ff;
}

.preset-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.preset-header h4 {
    margin: 0;
    color: #333;
}

.preset-details {
    color: #666;
    font-size: 0.9rem;
}

.form-section {
    background: white;
    padding: 1.5rem;
    border-radius: 6px;
    margin-bottom: 1.5rem;
    border-left: 4px solid #28a745;
}

.form-section h4 {
    margin-top: 0;
    color: #28a745;
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: #333;
}

.form-group input {
    width: 100%;
    padding: 0.75rem;
    border: 2px solid #e9ecef;
    border-radius: 6px;
    font-size: 1rem;
    box-sizing: border-box;
}

.form-group input:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
}

.form-group small {
    display: block;
    margin-top: 0.5rem;
    color: #666;
    font-size: 0.9rem;
}

.current-config {
    background: #fff3cd;
    padding: 1rem;
    border-radius: 6px;
    border-left: 4px solid #ffc107;
    margin-bottom: 1.5rem;
}

.current-config h4 {
    margin-top: 0;
    color: #856404;
}

.config-summary {
    font-family: monospace;
    background: white;
    padding: 1rem;
    border-radius: 4px;
    color: #495057;
}

/* Button styles now centralized in main style.css */

/* Make preset cards clickable */
.preset-card {
    position: relative;
}

.preset-card input[type="radio"] {
    width: auto;
    margin: 0;
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Make preset cards clickable
    document.querySelectorAll('.preset-card').forEach(card => {
        card.addEventListener('click', function() {
            const radio = this.querySelector('input[type="radio"]');
            radio.checked = true;
            
            // Update active state
            document.querySelectorAll('.preset-card').forEach(c => c.classList.remove('active'));
            this.classList.add('active');
        });
    });
});
</script>
{% endblock %}