{% extends "layout.html" %}

{% block title %}
    {% if is_new %}
        OptiWarm - Add Warming Event for {{ zone.name }}
    {% else %}
        OptiWarm - Edit Warming Event for {{ zone.name }}
    {% endif %}
{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <h1>
        {% if is_new %}
            <i class="fas fa-calendar-plus mr-2"></i>Add Warming Event
        {% else %}
            <i class="fas fa-calendar-alt mr-2"></i>Edit Warming Event
        {% endif %}
    </h1>
    <a href="{{ url_for('zones.show', id=zone.zoneid) }}" class="btn btn-secondary">
        <i class="fas fa-arrow-left mr-2"></i>Back to Zone
    </a>
</div>

<div class="card">
    <div class="card-header">
        <h5 class="mb-0">
            {% if is_new %}
                New Warming Event for {{ zone.name }}
            {% else %}
                Edit Warming Event for {{ zone.name }}
            {% endif %}
        </h5>
    </div>
    <div class="card-body">
        <form method="post" action="" novalidate>
            {{ form.csrf_token }}
            <!-- Use raw HTML input for zoneid to avoid validation issues -->
            <input type="hidden" name="zoneid" value="{{ zone.zoneid }}" id="zoneid" />
            
            <div class="row">
                <div class="col-md-6">
                    <div class="form-group">
                        {{ form.warm_ruletypeid.label }}
                        {{ form.warm_ruletypeid(class="form-control") }}
                        {% if form.warm_ruletypeid.errors %}
                            <div class="alert alert-danger mt-1">
                                {% for error in form.warm_ruletypeid.errors %}
                                    {{ error }}
                                {% endfor %}
                            </div>
                        {% endif %}
                        <small class="form-text text-muted">{{ form.warm_ruletypeid.description }}</small>
                    </div>
                </div>
                
                <div class="col-md-6">
                    <div class="form-group">
                        {{ form.day_exec.label }}
                        {{ form.day_exec(class="form-control", id="day_exec_input") }}
                        {% if form.day_exec.errors %}
                            <div class="alert alert-danger mt-1">
                                {% for error in form.day_exec.errors %}
                                    {{ error }}
                                {% endfor %}
                            </div>
                        {% endif %}
                        <small class="form-text text-muted">{{ form.day_exec.description }}</small>
                    </div>
                </div>
            </div>
            
            <div class="row">
                <div class="col-md-6">
                    <div class="form-group">
                        {{ form.time_from.label }}
                        {{ form.time_from(class="form-control", id="time_from_input") }}
                        {% if form.time_from.errors %}
                            <div class="alert alert-danger mt-1">
                                {% for error in form.time_from.errors %}
                                    {{ error }}
                                {% endfor %}
                            </div>
                        {% endif %}
                        <small class="form-text text-muted">{{ form.time_from.description }} (HH:MM 24-hour format)</small>
                    </div>
                </div>
                
                <div class="col-md-6">
                    <div class="form-group">
                        {{ form.time_to.label }}
                        {{ form.time_to(class="form-control", id="time_to_input") }}
                        {% if form.time_to.errors %}
                            <div class="alert alert-danger mt-1">
                                {% for error in form.time_to.errors %}
                                    {{ error }}
                                {% endfor %}
                            </div>
                        {% endif %}
                        <small class="form-text text-muted">{{ form.time_to.description }} (HH:MM 24-hour format)</small>
                    </div>
                </div>
            </div>
            
            <div class="form-group">
                <div class="custom-control custom-switch">
                    {{ form.active(class="custom-control-input") }}
                    {{ form.active.label(class="custom-control-label") }}
                    {% if form.active.errors %}
                        <div class="alert alert-danger mt-1">
                            {% for error in form.active.errors %}
                                {{ error }}
                            {% endfor %}
                        </div>
                    {% endif %}
                    <small class="form-text text-muted">{{ form.active.description }}</small>
                </div>
            </div>
            
            <div class="form-group mt-4">
                <button type="submit" class="btn btn-primary">
                    {% if is_new %}
                        <i class="fas fa-save mr-2"></i>Create Warming Event
                    {% else %}
                        <i class="fas fa-save mr-2"></i>Update Warming Event
                    {% endif %}
                </button>
                <a href="{{ url_for('zones.show', id=zone.zoneid) }}" class="btn btn-secondary">
                    <i class="fas fa-times mr-2"></i>Cancel
                </a>
            </div>
        </form>
    </div>
</div>

{% endblock %}

{% block scripts %}
<script>
    $(document).ready(function() {
        // Use HTML5 native date input (more compatible)
        var dayExecInput = $('#day_exec_input');
        
        // Format date as yyyy-mm-dd for HTML input
        var formatDateForInput = function(dateStr) {
            if (!dateStr) return '';
            
            // Try to parse various formats
            var date;
            if (dateStr.includes('/')) {
                // Format dd/mm/yyyy
                var parts = dateStr.split('/');
                date = new Date(parts[2], parts[1] - 1, parts[0]);
            } else if (dateStr.includes('-')) {
                // Format yyyy-mm-dd
                date = new Date(dateStr);
            } else {
                return dateStr; // Return as is if we can't parse
            }
            
            // Format as yyyy-mm-dd
            var year = date.getFullYear();
            var month = (date.getMonth() + 1).toString().padStart(2, '0');
            var day = date.getDate().toString().padStart(2, '0');
            return year + '-' + month + '-' + day;
        };
        
        // Set the type attribute directly in JavaScript
        dayExecInput.attr('type', 'date');
        
        // Ensure format is correct for the current value
        var currentDate = dayExecInput.val();
        if (currentDate) {
            dayExecInput.val(formatDateForInput(currentDate));
        }
        
        // Set the type for time inputs
        $('#time_from_input, #time_to_input').attr('type', 'time');
    });
</script>
{% endblock %}