{% extends "basic/base_template.html" %}

{% block pageName %}
Attendance Report
{% endblock pageName %}

{% block content %}

<!-- Date Filter Form -->
<!-- Search Form -->
<div class="d-flex justify-content-end">
    <form method="GET" class="d-flex mb-3 input-group">
        <input type="text" name="search" class="form-control " placeholder="Army or Name or Mobile"
            value="{{ search_query }}">  
        <button type="submit" class="btn btn-primary">Search</button>
    </form>
</div>
{% if attendance_records %}
<div class="table-responsive">
    <h5 class="text-end fw-bold">{{date}}</h5>
    {% if company_name %}
    <h3 class="text-center fw-bold">{{company_name}}</h3>
    {% endif %}
    <table class="table table-hover table-bordered">
        <thead>
            <tr>
                <th>#</th>
                <th>BA No</th>
                <th>Rank</th>
                <th>Name</th>
                <th>Status</th>
                <th>Lve Type</th>
                <th>Ops Depl</th>
                <th>Unit</th>
                <th>Sub Unit</th>
                <th>Reason</th>
            </tr>
        </thead>
        <tbody>
            {% for record in attendance_records %}
            <tr class="clickable-row cursor-pointer" {% if record.member %} data-href="{% url 'member_profile' record.member.id %}" {% endif %}>
                <td>{{ forloop.counter }}</td>
                <td>{{ record.member.army_no }}</td>
                <td>{{ record.member.rank.name }}</td>
                <td>{{ record.member.name }}</td>
                <td>{% if record.status %} Present {% elif record.status == False %} Absent {% else %} N/A {% endif %}</td>
                <td>
                    {% if not record.status %}
                        {% for leave in leave_records %}
                            {% if leave.member.id == record.member.id %}
                                {{ leave.leave_type.showName }}
                            {% endif %}
                        {% empty %}
                            N/A
                        {% endfor %}
                    {% else %}
                        N/A
                    {% endif %}
                </td>
                <td>{{ record.ops_depl|default:"N/A" }}</td>
                <td>{{ record.member.company|default:"N/A" }}</td>
                <td>{{ record.member.company.battalion|default:"N/A" }}</td>
                <td>{{ record.reason.text|default:"N/A"|truncatewords:7 }}</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>

{% else %}

<h4 class="text-center mt-5">No attendance records found for today.</h4>
{% endif %}

<script>
    document.addEventListener("DOMContentLoaded", function () {
        document.querySelectorAll(".clickable-row").forEach(row => {
            row.addEventListener("click", function () {
                window.location.href = this.dataset.href;
            });
        });
    });
</script>

{% endblock content %}