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

<div class="container mt-4">

    <!-- ================= PROFILE ================= -->
    <div class="card shadow-lg p-4 mb-4">
        <div class="row">

            <div class="col-md-8">

                <h4>{{ tenant.get_full_name|default:tenant.username }}</h4>

                <p><strong>ID:</strong> {{ profile.id_number|default:"Not Provided" }}</p>

                <p>
                    <strong>Phone:</strong>
                    {% if tenant.phone_number %}
                        <a href="tel:{{ tenant.phone_number }}">
                            {{ tenant.phone_number }}
                        </a>
                    {% else %}
                        Not Provided
                    {% endif %}
                </p>

                <p><strong>Unit:</strong>
                    {% if profile and profile.unit %}
                        {{ profile.unit }}
                    {% else %}
                        Not Assigned
                    {% endif %}
                </p>

                <p>
                    <strong>Rent Status:</strong>
                    {% if rent_status == "Paid" %}
                        <span class="badge bg-success">Paid</span>
                    {% else %}
                        <span class="badge bg-danger">Unpaid</span>
                    {% endif %}
                </p>

            </div>

            <div class="col-md-4 text-center">
                {% if profile and profile.id_image %}
                    <img src="{{ profile.id_image.url }}"
                         class="img-fluid rounded shadow-sm"
                         style="max-height:200px;">
                {% else %}
                    <p class="text-muted">No ID Image</p>
                {% endif %}
            </div>

        </div>
    </div>

    <!-- ================= PAYMENTS ================= -->
    <div class="card shadow-sm mb-4 p-3">
        <h5>Payment History</h5>

        {% if payments %}
        <table class="table table-sm">
            <thead>
                <tr>
                    <th>Date</th>
                    <th>Amount</th>
                </tr>
            </thead>

            <tbody>
                {% for p in payments|slice:":3" %}
                <tr>
                    <td>{{ p.created_at }}</td>
                    <td>KES {{ p.amount }}</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>

        {% if payments|length > 3 %}
            <button class="btn btn-sm btn-outline-dark" onclick="toggleSection('payments')">
                View More
            </button>

            <div id="payments" style="display:none;">
                <table class="table table-sm mt-2">
                    {% for p in payments|slice:"3:" %}
                    <tr>
                        <td>{{ p.created_at }}</td>
                        <td>KES {{ p.amount }}</td>
                    </tr>
                    {% endfor %}
                </table>
            </div>
        {% endif %}

        {% else %}
            <p class="text-muted">No payments found.</p>
        {% endif %}
    </div>

    <!-- ================= COMPLAINTS ================= -->
    <div class="card shadow-sm mb-4 p-3">
        <h5>Complaints</h5>

        {% if complaints %}
        <table class="table table-sm">
            <thead>
                <tr>
                    <th>Date</th>
                    <th>Description</th>
                    <th>Status</th>
                </tr>
            </thead>

            <tbody>
                {% for c in complaints|slice:":3" %}
                <tr>
                    <td>{{ c.created_at }}</td>
                    <td>{{ c.description }}</td>
                    <td>{{ c.status }}</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>

        {% if complaints|length > 3 %}
            <button class="btn btn-sm btn-outline-dark" onclick="toggleSection('complaints')">
                View More
            </button>

            <div id="complaints" style="display:none;">
                <table class="table table-sm mt-2">
                    {% for c in complaints|slice:"3:" %}
                    <tr>
                        <td>{{ c.created_at }}</td>
                        <td>{{ c.description }}</td>
                        <td>{{ c.status }}</td>
                    </tr>
                    {% endfor %}
                </table>
            </div>
        {% endif %}

        {% else %}
            <p class="text-muted">No complaints found.</p>
        {% endif %}
    </div>

    <!-- ================= REPAIRS ================= -->
    <div class="card shadow-sm p-3">
        <h5>Repairs / Damages</h5>

        {% if repairs %}
        <table class="table table-sm">
            <thead>
                <tr>
                    <th>Date</th>
                    <th>Description</th>
                    <th>Status</th>
                </tr>
            </thead>

            <tbody>
                {% for r in repairs|slice:":3" %}
                <tr>
                    <td>{{ r.created_at }}</td>
                    <td>{{ r.description }}</td>
                    <td>{{ r.status }}</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>

        {% if repairs|length > 3 %}
            <button class="btn btn-sm btn-outline-dark" onclick="toggleSection('repairs')">
                View More
            </button>

            <div id="repairs" style="display:none;">
                <table class="table table-sm mt-2">
                    {% for r in repairs|slice:"3:" %}
                    <tr>
                        <td>{{ r.created_at }}</td>
                        <td>{{ r.description }}</td>
                        <td>{{ r.status }}</td>
                    </tr>
                    {% endfor %}
                </table>
            </div>
        {% endif %}

        {% else %}
            <p class="text-muted">No repairs found.</p>
        {% endif %}
    </div>

</div>

<div class="card p-3 mt-3">

    <h5>Tenant Actions</h5>

    {% if user.role == "landlord" or user.role == "caretaker" %}
        <a href="{% url 'evict_tenant' tenant.id %}" class="btn btn-danger btn-sm">
            Evict Tenant
        </a>

        <a href="{% url 'vacate_tenant' tenant.id %}" class="btn btn-warning btn-sm">
            Force Vacate
        </a>
    {% endif %}

    {% if user.role == "tenant" %}
        <a href="{% url 'tenant_vacate_self' %}" class="btn btn-outline-warning btn-sm">
            Vacate Unit
        </a>
    {% endif %}

</div>

<script>
function toggleSection(id){
    let el = document.getElementById(id);
    el.style.display = (el.style.display === "none") ? "block" : "none";
}
</script>

{% endblock %}