{% extends "layout.html" %}

{% block title %}OptiWarm - {% if is_new %}New Warming Rule{% else %}Edit Rule{% endif %}{% endblock %}

{% block head %}
<!-- Time picker CSS -->
<link rel="stylesheet" href="/static/css/flatpickr.min.css">
<style>
    .day-checkbox {
        margin-right: 1.5rem;
    }
    
    .temperature-slider {
        width: 100%;
    }
    
    .temperature-value {
        font-size: 1.2rem;
        font-weight: bold;
    }
    
    .temp-cold {
        color: #007bff;
    }
    
    .temp-warm {
        color: #fd7e14;
    }
    
    .temp-hot {
        color: #dc3545;
    }
</style>
{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <h1>
        <i class="fas fa-thermometer-half mr-2"></i>{% if is_new %}New Warming Rule{% else %}Edit Rule{% endif %}
    </h1>
    <div class="btn-group">
        <a href="{{ url_for('warming.rules', rule_type_id=rule_type.warm_ruletypeid) }}" class="btn btn-secondary">
            <i class="fas fa-arrow-left mr-2"></i>Back to Rules
        </a>
    </div>
</div>

<div class="card">
    <div class="card-header bg-primary text-white">
        <h5 class="mb-0">Rule for {{ rule_type.name }}</h5>
    </div>
    <div class="card-body">
        <form method="post">
            {{ form.csrf_token }}
            {{ form.warm_ruletypeid() }}
            
            <div class="form-row">
                <div class="form-group col-md-6">
                    <label for="priority">Priority</label>
                    {{ form.priority(class="form-control", type="number", min=0, max=100) }}
                    {% if form.priority.errors %}
                        <div class="text-danger">
                            {% for error in form.priority.errors %}
                                {{ error }}
                            {% endfor %}
                        </div>
                    {% endif %}
                    <small class="form-text text-muted">{{ form.priority.description }}</small>
                </div>
            </div>
            
            <div class="form-row">
                <div class="form-group col-md-6">
                    <label for="min">Minimum Temperature (°C)</label>
                    {{ form.min(class="form-control temperature-slider", type="range", min=5, max=30, step=0.1, oninput="updateMinTemp(this.value)") }}
                    <div class="text-center">
                        <span id="minTempValue" class="temperature-value temp-cold">{{ "%.1f"|format(form.min.data) }}°C</span>
                    </div>
                    {% if form.min.errors %}
                        <div class="text-danger">
                            {% for error in form.min.errors %}
                                {{ error }}
                            {% endfor %}
                        </div>
                    {% endif %}
                </div>
                
                <div class="form-group col-md-6">
                    <label for="max">Maximum Temperature (°C)</label>
                    {{ form.max(class="form-control temperature-slider", type="range", min=10, max=50, step=0.1, oninput="updateMaxTemp(this.value)") }}
                    <div class="text-center">
                        <span id="maxTempValue" class="temperature-value temp-hot">{{ "%.1f"|format(form.max.data) }}°C</span>
                    </div>
                    {% if form.max.errors %}
                        <div class="text-danger">
                            {% for error in form.max.errors %}
                                {{ error }}
                            {% endfor %}
                        </div>
                    {% endif %}
                </div>
            </div>
            
            <div class="form-row">
                <div class="form-group col-md-6">
                    <label for="time_from">Start Time</label>
                    {{ form.time_from(class="form-control time-picker") }}
                    {% if form.time_from.errors %}
                        <div class="text-danger">
                            {% for error in form.time_from.errors %}
                                {{ error }}
                            {% endfor %}
                        </div>
                    {% endif %}
                    <small class="form-text text-muted">{{ form.time_from.description }}</small>
                </div>
                
                <div class="form-group col-md-6">
                    <label for="time_to">End Time</label>
                    {{ form.time_to(class="form-control time-picker") }}
                    {% if form.time_to.errors %}
                        <div class="text-danger">
                            {% for error in form.time_to.errors %}
                                {{ error }}
                            {% endfor %}
                        </div>
                    {% endif %}
                    <small class="form-text text-muted">{{ form.time_to.description }}</small>
                </div>
            </div>
            
            <div class="form-group">
                <label>Days of Week</label>
                <div class="d-flex flex-wrap">
                    <div class="custom-control custom-checkbox day-checkbox">
                        {{ form.d1(class="custom-control-input", id="d1") }}
                        <label class="custom-control-label" for="d1">Monday</label>
                    </div>
                    <div class="custom-control custom-checkbox day-checkbox">
                        {{ form.d2(class="custom-control-input", id="d2") }}
                        <label class="custom-control-label" for="d2">Tuesday</label>
                    </div>
                    <div class="custom-control custom-checkbox day-checkbox">
                        {{ form.d3(class="custom-control-input", id="d3") }}
                        <label class="custom-control-label" for="d3">Wednesday</label>
                    </div>
                    <div class="custom-control custom-checkbox day-checkbox">
                        {{ form.d4(class="custom-control-input", id="d4") }}
                        <label class="custom-control-label" for="d4">Thursday</label>
                    </div>
                    <div class="custom-control custom-checkbox day-checkbox">
                        {{ form.d5(class="custom-control-input", id="d5") }}
                        <label class="custom-control-label" for="d5">Friday</label>
                    </div>
                    <div class="custom-control custom-checkbox day-checkbox">
                        {{ form.d6(class="custom-control-input", id="d6") }}
                        <label class="custom-control-label" for="d6">Saturday</label>
                    </div>
                    <div class="custom-control custom-checkbox day-checkbox">
                        {{ form.d7(class="custom-control-input", id="d7") }}
                        <label class="custom-control-label" for="d7">Sunday</label>
                    </div>
                </div>
                <div class="mt-2">
                    <button type="button" class="btn btn-sm btn-outline-secondary mr-1" onclick="selectWeekdays()">Weekdays</button>
                    <button type="button" class="btn btn-sm btn-outline-secondary mr-1" onclick="selectWeekends()">Weekends</button>
                    <button type="button" class="btn btn-sm btn-outline-secondary mr-1" onclick="selectAllDays()">All Days</button>
                    <button type="button" class="btn btn-sm btn-outline-secondary" onclick="clearDays()">Clear</button>
                </div>
            </div>
            
            <div class="form-group mt-4">
                <button type="submit" class="btn btn-primary">
                    <i class="fas fa-save mr-2"></i>{% if is_new %}Create Rule{% else %}Update Rule{% endif %}
                </button>
                <a href="{{ url_for('warming.rules', rule_type_id=rule_type.warm_ruletypeid) }}" class="btn btn-secondary">
                    Cancel
                </a>
            </div>
        </form>
    </div>
</div>
{% endblock %}

{% block scripts %}
<!-- Time picker JS -->
<script src="/static/js/flatpickr.js"></script>
<script>
    // Initialize time pickers
    document.addEventListener('DOMContentLoaded', function() {
        flatpickr(".time-picker", {
            enableTime: true,
            noCalendar: true,
            dateFormat: "H:i",
            time_24hr: true
        });
        
        // Initialize temperature displays
        updateMinTemp(document.getElementById('min').value);
        updateMaxTemp(document.getElementById('max').value);
    });
    
    // Helper functions for day selection
    function selectWeekdays() {
        document.getElementById('d1').checked = true;
        document.getElementById('d2').checked = true;
        document.getElementById('d3').checked = true;
        document.getElementById('d4').checked = true;
        document.getElementById('d5').checked = true;
        document.getElementById('d6').checked = false;
        document.getElementById('d7').checked = false;
    }
    
    function selectWeekends() {
        document.getElementById('d1').checked = false;
        document.getElementById('d2').checked = false;
        document.getElementById('d3').checked = false;
        document.getElementById('d4').checked = false;
        document.getElementById('d5').checked = false;
        document.getElementById('d6').checked = true;
        document.getElementById('d7').checked = true;
    }
    
    function selectAllDays() {
        document.getElementById('d1').checked = true;
        document.getElementById('d2').checked = true;
        document.getElementById('d3').checked = true;
        document.getElementById('d4').checked = true;
        document.getElementById('d5').checked = true;
        document.getElementById('d6').checked = true;
        document.getElementById('d7').checked = true;
    }
    
    function clearDays() {
        document.getElementById('d1').checked = false;
        document.getElementById('d2').checked = false;
        document.getElementById('d3').checked = false;
        document.getElementById('d4').checked = false;
        document.getElementById('d5').checked = false;
        document.getElementById('d6').checked = false;
        document.getElementById('d7').checked = false;
    }
    
    // Temperature display update functions
    function updateMinTemp(value) {
        const minTempElement = document.getElementById('minTempValue');
        // Format with one decimal place
        minTempElement.textContent = parseFloat(value).toFixed(1) + '°C';
        
        // Update color based on temperature
        minTempElement.className = 'temperature-value';
        if (value < 15) {
            minTempElement.classList.add('temp-cold');
        } else if (value < 22) {
            minTempElement.classList.add('temp-warm');
        } else {
            minTempElement.classList.add('temp-hot');
        }
    }
    
    function updateMaxTemp(value) {
        const maxTempElement = document.getElementById('maxTempValue');
        // Format with one decimal place
        maxTempElement.textContent = parseFloat(value).toFixed(1) + '°C';
        
        // Update color based on temperature
        maxTempElement.className = 'temperature-value';
        if (value < 15) {
            maxTempElement.classList.add('temp-cold');
        } else if (value < 22) {
            maxTempElement.classList.add('temp-warm');
        } else {
            maxTempElement.classList.add('temp-hot');
        }
    }
</script>
{% endblock %}