{% extends 'base.html' %}
{% block title %}Repairs{% endblock %}

{% block content %}
<div class="container mt-3">

    <div class="d-flex justify-content-between mb-3">
        <h4><i class="bi bi-tools"></i> Repair Requests</h4>

        {% if user.role == 'tenant' %}
        <a href="{% url 'repair' %}" class="btn btn-dark">
            <i class="bi bi-plus-lg"></i> New Request
        </a>
        {% endif %}
    </div>

    <div class="card shadow-sm">
        <div class="table-responsive">

            <table class="table table-hover align-middle mb-0">
                <thead class="table-dark">
                    <tr>
                        <th>Tenant</th>
                        <th>Unit</th> <!-- ✅ NEW -->
                        <th>Issue</th>
                        <th>Status</th>
                        <th>Cost</th>
                        <th>Date</th>
                        <th>Actions</th>
                    </tr>
                </thead>

                <tbody>
                    {% for repair in repairs %}
                    <tr>
                        <td>{{ repair.tenant.username }}</td>
                        <td>{{ repair.unit.name }}</td> <!-- ✅ NEW -->
                        <td>{{ repair.issue|truncatechars:40 }}</td>

                        <td>
                            <span class="badge 
                                {% if repair.status == 'pending' %}bg-warning
                                {% elif repair.status == 'approved' %}bg-primary
                                {% elif repair.status == 'completed' %}bg-success
                                {% else %}bg-danger{% endif %}">
                                {{ repair.status|title }}
                            </span>
                        </td>

                        <td>
                            {% if repair.cost %}
                                KES {{ repair.cost }}
                            {% else %}
                                -
                            {% endif %}
                        </td>

                        <td>{{ repair.created_at|date:"M d, Y" }}</td>

                        <td>
                            <div class="d-flex gap-2 flex-wrap">

                                {% if user.role == 'caretaker' and repair.status == 'pending' %}
                                    <a href="{% url 'approve_repair' repair.id %}" class="btn btn-sm btn-success">Approve</a>
                                    <a href="{% url 'reject_repair' repair.id %}" class="btn btn-sm btn-danger">Reject</a>
                                {% endif %}

                                {% if user.role == 'landlord' and repair.status == 'approved' %}
                                    <a href="{% url 'add_repair_cost' repair.id %}" class="btn btn-sm btn-dark">Add Cost</a>
                                {% endif %}

                            </div>
                        </td>

                    </tr>
                    {% empty %}
                    <tr>
                        <td colspan="7" class="text-center">No repair requests found</td>
                    </tr>
                    {% endfor %}
                </tbody>

            </table>

        </div>
    </div>

</div>
{% endblock %}