{% extends 'cleaning/base.html' %}

{% block title %}Детали заказа{% endblock %}

{% block content %}
{# card — Bootstrap-компонент для группировки информации #}
<div class="card">
    <div class="card-header"><h4>Заказ №{{ order.pk }}</h4></div>
    <div class="card-body">
        <p><strong>Клиент:</strong> <a href="{% url 'cleaning:client_detail' order.client.pk %}">{{ order.client }}</a></p>
        <p><strong>Бригада:</strong> <a href="{% url 'cleaning:brigade_detail' order.brigade.pk %}">{{ order.brigade }}</a></p>
        <p><strong>Дата:</strong> {{ order.date }}</p>
        <p><strong>Время:</strong> {{ order.start_time }} — {{ order.end_time }}</p>
    </div>
</div>

<h5 class="mt-4">Выполненные работы</h5> {# mt-4 — отступ сверху #}
<table class="table table-striped">
    <thead>
        <tr><th>Услуга</th><th>Площадь, м²</th><th>Стоимость, руб.</th></tr>
    </thead>
    <tbody>
        {% for work in order.completedwork_set.all %}
        <tr>
            <td>{{ work.service.name }}</td>
            <td>{{ work.area }}</td>
            <td>{{ work.cost }}</td>
        </tr>
        {% endfor %}
    </tbody>
    {# tfoot с table-group-divider — отделяет итоговую строку чертой #}
    <tfoot class="table-group-divider">
        <tr><td colspan="2"><strong>Итого</strong></td><td><strong>{{ order.total_cost }} руб.</strong></td></tr>
    </tfoot>
</table>
{% endblock %}