{% extends "layout.html" %}

{% block title %}OptiWarm - Zone: {{ zone.name }}{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <h1>
        <i class="fas fa-layer-group mr-2"></i>{{ zone.name }}
    </h1>
    <div class="btn-group">
        <a href="{{ url_for('zones.edit', id=zone.zoneid) }}" class="btn btn-primary">
            <i class="fas fa-edit mr-2"></i>Edit
        </a>
        <a href="{{ url_for('insulations.new_insulation', id=zone.zoneid) }}" class="btn btn-success">
            <i class="fas fa-plus mr-2"></i>Add Insulation Data
        </a>
        <a href="{{ url_for('zones.by_location', location_id=zone.locationid.locationid) }}" class="btn btn-secondary">
            <i class="fas fa-arrow-left mr-2"></i>Back to Zones
        </a>
        <button type="button" class="btn btn-danger" data-toggle="modal" data-target="#deleteModal">
            <i class="fas fa-trash mr-2"></i>Delete
        </button>
    </div>
</div>

<!-- Delete Modal -->
<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="deleteModalLabel">Confirm Delete</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                Are you sure you want to delete the zone <strong>{{ zone.name }}</strong>?
                This action cannot be undone.
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                <form action="{{ url_for('zones.delete', id=zone.zoneid) }}" method="post">
                    <button type="submit" class="btn btn-danger">Delete</button>
                </form>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-md-6">
        <div class="card mb-4">
            <div class="card-header">
                <h5 class="mb-0">Zone Details</h5>
            </div>
            <div class="card-body">
                <table class="table table-striped">
                    <tbody>
                        <tr>
                            <th style="width: 40%">Name:</th>
                            <td>{{ zone.name }}</td>
                        </tr>
                        <tr>
                            <th>Location:</th>
                            <td>
                                <a href="{{ url_for('locations.show', id=zone.locationid.locationid) }}">
                                    {{ zone.locationid.name }}
                                </a>
                            </td>
                        </tr>
                        <tr>
                            <th>Description:</th>
                            <td>{{ zone.description or "-" }}</td>
                        </tr>
                        <tr>
                            <th>Place Type:</th>
                            <td>{{ zone.placetypeid.name }}</td>
                        </tr>
                        <tr>
                            <th>Nominal Volume:</th>
                            <td>
                                {% if zone.nominal_valume %}
                                    {{ zone.nominal_valume }} M³
                                {% else %}
                                    -
                                {% endif %}
                            </td>
                        </tr>
                        <tr>
                            <th>Status:</th>
                            <td>
                                {% if zone.active %}
                                    <span class="badge badge-success">Active</span>
                                {% else %}
                                    <span class="badge badge-secondary">Inactive</span>
                                {% endif %}
                            </td>
                        </tr>
                        <tr>
                            <th>Phone:</th>
                            <td>{{ zone.phone or "-" }}</td>
                        </tr>
                        <tr>
                            <th>CMDB ID:</th>
                            <td>{{ zone.cmdb_id or "-" }}</td>
                        </tr>
                        <tr>
                            <th>Linked Boilers:</th>
                            <td>
                                {% if zone.boilers %}
                                    <ul class="list-unstyled mb-0">
                                        {% for boiler in zone.boilers %}
                                            <li>
                                                <a href="{{ url_for('boilers.show_boiler', id=boiler.boilerid) }}">{{ boiler.name }}</a>
                                            </li>
                                        {% endfor %}
                                    </ul>
                                {% else %}
                                    -
                                {% endif %}
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    
    <div class="col-md-6">
        <div class="card mb-4">
            <div class="card-header">
                <h5 class="mb-0">Technical Configuration</h5>
            </div>
            <div class="card-body">
                <table class="table table-striped">
                    <tbody>
                        <tr>
                            <th style="width: 40%">Sensor Mode:</th>
                            <td>
                                {% if zone.sensor_average %}
                                    Use average temperature value
                                {% else %}
                                    Use closest temperature
                                {% endif %}
                            </td>
                        </tr>
                        <tr>
                            <th>Current Temperature:</th>
                            <td>
                                {% set temp = zone.get_current_temperature() %}
                                {% if temp is not none %}
                                    <span class="badge badge-info">{{ "%.1f"|format(temp[0]) }}°C</span>
                                {% else %}
                                    <span class="badge badge-secondary">No data</span>
                                {% endif %}
                            </td>
                        </tr>
                        <tr>
                            <th>Temperature Requirement:</th>
                            <td>
                                {% if current_temp_requirement %}
                                    <div>
                                        <span class="badge badge-success">{{ "%.1f"|format(current_temp_requirement.min_temp) }}°C - {{ "%.1f"|format(current_temp_requirement.max_temp) }}°C</span>
                                        <br>
                                        <small class="text-muted">
                                            <i class="fas fa-thermometer-half mr-1"></i>
                                            <strong>{{ current_temp_requirement.rule_type }}</strong>
                                            {% if current_temp_requirement.source == 'event' %}
                                                (Event: {{ current_temp_requirement.event_date }})
                                            {% elif current_temp_requirement.days %}
                                                ({{ current_temp_requirement.days }})
                                            {% endif %}
                                            <br>
                                            <i class="fas fa-clock mr-1"></i>{{ current_temp_requirement.time_range }}
                                            <i class="fas fa-sort-amount-up ml-2 mr-1"></i>Priority: {{ current_temp_requirement.rule_priority }}
                                        </small>
                                    </div>
                                {% else %}
                                    <span class="badge badge-warning">No active rule</span>
                                    <br>
                                    <small class="text-muted">No warming rule applies at this time</small>
                                {% endif %}
                            </td>
                        </tr>
                        <tr>
                            <th>Responsible Boiler:</th>
                            <td>
                                {% if responsible_boiler_info %}
                                    <div>
                                        <a href="{{ url_for('boilers.show_boiler', id=responsible_boiler_info.boiler.boilerid) }}">
                                            {{ responsible_boiler_info.boiler.name }}
                                        </a>
                                        {% if responsible_boiler_info.is_working %}
                                            <span class="badge badge-success ml-2">Working</span>
                                        {% else %}
                                            <span class="badge badge-secondary ml-2">Idle</span>
                                        {% endif %}
                                        <br>
                                        <small class="text-muted">
                                            <i class="fas fa-map-marker-alt mr-1"></i>
                                            {% if responsible_boiler_info.source == 'zone' %}
                                                Assigned to zone
                                            {% else %}
                                                From location (no zone-specific boiler)
                                            {% endif %}
                                            <br>
                                            {% if responsible_boiler_info.plan %}
                                                <i class="fas fa-calendar mr-1"></i>Planned since: {{ responsible_boiler_info.plan.time_from.strftime('%Y-%m-%d %H:%M') }}
                                                {% if responsible_boiler_info.plan.info %}
                                                    <br><i class="fas fa-info-circle mr-1"></i>{{ responsible_boiler_info.plan.info }}
                                                {% endif %}
                                            {% endif %}
                                            {% if responsible_boiler_info.working_since %}
                                                <br><i class="fas fa-play mr-1"></i>Working since: {{ responsible_boiler_info.working_since.strftime('%Y-%m-%d %H:%M') }}
                                            {% endif %}
                                        </small>
                                    </div>
                                {% else %}
                                    <span class="badge badge-warning">No responsible boiler</span>
                                    <br>
                                    <small class="text-muted">No boiler plan found for this zone</small>
                                {% endif %}
                            </td>
                        </tr>
                        <tr>
                            <th>Notification:</th>
                            <td>{{ zone.notification or "-" }}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <div class="card mb-4">
            <div class="card-header">
                <h5 class="mb-0">Linked Warming Rules</h5>
            </div>
            <div class="card-body">
                {% if warming_rules_data %}
                    <table class="table table-striped">
                        <tbody>
                            {% for rule_data in warming_rules_data %}
                                <tr>
                                    <th style="width: 60%">{{ rule_data.name }}</th>
                                    <td>
                                        <a href="{{ url_for('warming.rules', rule_type_id=rule_data.warm_ruletypeid) }}">
                                        {{ rule_data.count }} rule{{ 's' if rule_data.count != 1 else '' }}
                                        </a>
                                    </td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                {% else %}
                    <div class="alert alert-info">
                        <i class="fas fa-info-circle mr-2"></i>
                        No warming rules are linked to this zone's place type.
                    </div>
                {% endif %}
            </div>
        </div>

    </div>
</div>

<!-- Boiler Operation Plan Chart -->
{% with api_endpoint=url_for('zones.api_boiler_plan', id=zone.zoneid) %}
  {% include 'partials/boiler_plan_chart.html' %}
{% endwith %}

<!-- Include the Warm Events section -->
{% include 'zones/warm_events.html' %}

<!-- Include the Indoor Sensors section -->
{% with sensors=zone.indoor_sensors %}
  {% include 'sensors/zone_sensors.html' %}
{% endwith %}

<div class="card">
    <div class="card-header d-flex justify-content-between align-items-center">
        <h5 class="mb-0">Insulation Data</h5>
        <a href="{{ url_for('insulations.new_insulation', id=zone.zoneid) }}" class="btn btn-sm btn-primary">
            <i class="fas fa-plus mr-2"></i>Add Insulation Data
        </a>
    </div>
    <div class="card-body">
        {% if insulation_data %}
            <div class="table-responsive">
                <table class="table table-striped">
                    <thead>
                        <tr>
                            <th>Outside Temperature</th>
                            <th>Inside Temperature (From)</th>
                            <th>Inside Temperature (To)</th>
                            <th>Period (hours)</th>
                            <th>Heat Loss Rate</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for insulation in insulation_data %}
                            <tr>
                                <td>{{ "%.1f"|format(insulation.temperature_out) }}°C</td>
                                <td>{{ "%.1f"|format(insulation.temperature_in_from) }}°C</td>
                                <td>{{ "%.1f"|format(insulation.temperature_in_to) }}°C</td>
                                <td>{{ insulation.period }}</td>
                                <td>{{ "%.2f"|format(insulation.temperature_loss_rate) }}°C/h</td>
                                <td>
                                    <div class="btn-group btn-group-sm">
                                        <a href="{{ url_for('insulations.edit_insulation', zone_id=zone.zoneid, insulation_id=insulation.zone_insulationid) }}" class="btn btn-primary">
                                            <i class="fas fa-edit"></i>
                                        </a>
                                        <button type="button" class="btn btn-danger" data-toggle="modal" data-target="#deleteInsulationModal{{ insulation.zone_insulationid }}">
                                            <i class="fas fa-trash"></i>
                                        </button>
                                    </div>
                                    
                                    <!-- Delete Insulation Modal -->
                                    <div class="modal fade" id="deleteInsulationModal{{ insulation.zone_insulationid }}" tabindex="-1" role="dialog" aria-labelledby="deleteInsulationModalLabel{{ insulation.zone_insulationid }}" aria-hidden="true">
                                        <div class="modal-dialog" role="document">
                                            <div class="modal-content">
                                                <div class="modal-header">
                                                    <h5 class="modal-title" id="deleteInsulationModalLabel{{ insulation.zone_insulationid }}">Confirm Delete</h5>
                                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                        <span aria-hidden="true">&times;</span>
                                                    </button>
                                                </div>
                                                <div class="modal-body">
                                                    Are you sure you want to delete this insulation data?
                                                </div>
                                                <div class="modal-footer">
                                                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                                                    <form action="{{ url_for('insulations.delete_insulation', zone_id=zone.zoneid, insulation_id=insulation.zone_insulationid) }}" method="post">
                                                        <button type="submit" class="btn btn-danger">Delete</button>
                                                    </form>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        {% else %}
            <div class="alert alert-info">
                <i class="fas fa-info-circle mr-2"></i>
                No insulation data found for this zone. 
                <a href="{{ url_for('insulations.new_insulation', id=zone.zoneid) }}">Add insulation data</a> to improve heating efficiency calculations.
            </div>
        {% endif %}
    </div>
</div>

{% endblock %}