{% extends "base.html" %}
{% block content %}

<div class="container-fluid mt-4">

    <!-- HEADER -->
    <div class="d-flex justify-content-between mb-3">
        <h4>Tenants</h4>

        <a href="{% url 'tenant_add' %}" class="btn btn-dark">
            Add Tenant
        </a>
    </div>

    <!-- ✅ MESSAGES -->
    {% if messages %}
        {% for message in messages %}
            <div class="alert alert-{{ message.tags }}">
                {{ message }}
            </div>
        {% endfor %}
    {% endif %}

    <!-- FILTERS -->
    <div class="row mb-3">

        <!-- SEARCH -->
        <div class="col-md-4">
            <form method="get">
                <input type="text" name="search" class="form-control"
                       placeholder="Search tenants...">
            </form>
        </div>

        <!-- BUILDING FILTER -->
        <div class="col-md-4">
            <form method="get">
                <select name="building" class="form-select" onchange="this.form.submit()">
                    <option value="">All Buildings</option>
                    {% for b in buildings %}
                        <option value="{{ b.id }}">{{ b.name }}</option>
                    {% endfor %}
                </select>
            </form>
        </div>

    </div>

    <!-- TABLE -->
    <div class="card shadow-sm">
        <div class="card-body">

            <table class="table table-hover">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Unit</th>
                        <th>Status</th>
                        <th>Actions</th>
                    </tr>
                </thead>

                <tbody>
                {% for item in tenant_data %}
                <tr>

                    <td>{{ item.user.get_full_name }}</td>

                    <td>
                        {% if item.profile and item.profile.unit %}
                            {{ item.profile.unit }}
                        {% else %}
                            None
                        {% endif %}
                    </td>

                    <td>
                        {% if item.rent_status == "Paid" %}
                            <span class="badge bg-success">Paid</span>
                        {% else %}
                            <span class="badge bg-danger">Unpaid</span>
                        {% endif %}
                    </td>

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

                        <a href="{% url 'tenant_detail' item.user.id %}"
                           class="btn btn-sm btn-primary">
                            View
                        </a>

                        {% if item.profile %}
                            {% if not item.profile.unit %}
                                <a href="{% url 'assign_from_tenant' item.user.id %}"
                                   class="btn btn-sm btn-success">
                                    Add to Unit
                                </a>
                            {% endif %}
                        {% else %}
                            <button class="btn btn-sm btn-secondary" disabled
                                    title="Tenant must complete onboarding first">
                                Onboarding Required
                            </button>
                        {% endif %}

                    </td>

                </tr>
                {% endfor %}
                </tbody>

            </table>

        </div>
    </div>

</div>

{% endblock %}