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

{% block pageName %}
Check Lve
{% endblock pageName %}

{% block content %}

<div class="row d-flex justify-content-center">
    <div class="col-4 text-center card">
        <div>read</div>
        <div>{{read}}</div>
    </div>
    <div class="col-4 text-center card">
        <div>unread</div>
        <div>{{unread}}</div>
    </div>
</div>
{% if applyLeaves %}
<div class="table-responsive mt-3">
    <table class="table table-bordered">
        <tr>
            <th>Action</th>
            <th>Army No</th>
            <th>Name</th>
            <th>Rank</th>
            <th>Leave Type</th>
            <th>Start Date</th>
            <th>End date</th>
            <th>Days</th>
            <th>Apply By</th>
            <th>Status</th>
        </tr>
        {% for item in applyLeaves %}
        <!-- Modal -->
        <div class="modal fade" id="exampleModal-{{item.id}}" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-fullscreen">
            <div class="modal-content">
                <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">INFO</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="d-flex justify-content-around bg-secondary text-white p-2">
                        <div><span class="fw-bold">Army No</span> :{{ item.member.army_no}}</div>
                        <div><span class="fw-bold">Name</span> :{{item.member.name}}</div>
                        <div><span class="fw-bold">Rank</span> :{{ item.member.rank}}</div>
                        <div><span class="fw-bold">Start Date</span> :{{ item.start_date}}</div>
                        <div><span class="fw-bold">End Date</span> :{{ item.end_date}}</div>
                        <div><span class="fw-bold">Apply By</span> :{{ item.apply_by}}</div>
                        <div><span class="fw-bold">Days</span> :{{ item.days}}</div>
                        <div><span class="fw-bold">Leave Type</span> :{{ item.leave_type.showName}}</div>
                    </div>
                    <h2 class="text-center mt-3 text-decoration-underline">Reason</h2>
                    <p><b>{{item.reason.text}}</b></p>
                    <p>{{item.reason_des.text}}</p>
                </div>
                <div class="d-flex justify-content-end p-2">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" aria-label="Close">Close</button>
                </div>
            </div>
            </div>
        </div>
        <tr>
            <td>
                <div class="d-flex justify-content-around">
                    <a href="{% url 'leave_approve_cc_company' item.id %}" class="btn btn-primary mx-1"><i class="bi bi-check-circle"></i></a>
                    <a href="{% url 'leave_reject_cc_company' item.id %}" class="btn btn-danger mx-1"><i class="bi bi-x-circle"></i></a>
                    <a href="{% url 'member_profile' item.member.id %}" class="btn btn-secondary mx-1"><i class="bi bi-person-circle"></i></a>
                    <a type="button" data-bs-toggle="modal" data-bs-target="#exampleModal-{{item.id}}" class="btn btn-info  mx-1"><i class="bi bi-info-circle"></i></a>
                </div>
            </td>
            <td>{{item.member.army_no}}</td>
            <td>{{item.member.name}}</td>
            <td>{{item.member.rank.name}}</td>
            <td>{{item.leave_type.showName}}</td>
            <td>{{item.start_date}}</td>
            <td>{{item.end_date}}</td>
            <td>{{item.days}}</td>
            <td>{{item.apply_by}}</td>
            <td class="text-white {% if item.csm_status == 'pending' %}bg-primary{% elif item.csm_status == 'approved' %}bg-success{% elif item.csm_status == 'rejected' %}bg-danger{% else %}{% endif %}">{{ item.csm_status }}</td>
        </tr>
        {% endfor %}

    </table>
</div>

{% endif %}
{% if leavesHistory %}

<h2 class="mt-3 text-center">Leave History</h2>
<div class="table-responsive mt-3">
    <table class="table table-bordered">
        <tr>
            <th>Army No</th>
            <th>Name</th>
            <th>Rank</th>
            <th>Leave Type</th>
            <th>Start Date</th>
            <th>End Date</th>
            <th>Days</th>
            <th>Apply By</th>
            <th>status</th>
            <th>reason</th>
        </tr>
        {% for item in leavesHistory %}
        <!-- Modal -->
        <div class="modal fade" id="exampleModal2-{{item.id}}" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-fullscreen">
            <div class="modal-content">
                <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">INFO</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="d-flex justify-content-around bg-secondary text-white p-2">
                        <div><span class="fw-bold">Army No</span> :{{ item.member.army_no}}</div>
                        <div><span class="fw-bold">Name</span> :{{item.member.name}}</div>
                        <div><span class="fw-bold">Rank</span> :{{ item.member.rank}}</div>
                        <div><span class="fw-bold">Start Date</span> :{{ item.start_date}}</div>
                        <div><span class="fw-bold">End Date</span> :{{ item.end_date}}</div>
                        <div><span class="fw-bold">Apply By</span> :{{ item.apply_by}}</div>
                        <div><span class="fw-bold">Days</span> :{{ item.days}}</div>
                        <div><span class="fw-bold">Leave Type</span> :{{ item.leave_type.showName}}</div>
                    </div>
                    <h2 class="text-center mt-3 text-decoration-underline">Reason</h2>
                    <p><b>{{item.reason.text}}</b></p>
                    <p>{{item.reason_des.text}}</p>
                </div>
                <div class="d-flex justify-content-end p-2">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" aria-label="Close">Close</button>
                </div>
            </div>
            </div>
        </div>
        <tr>
            <td>{{item.member.army_no}}</td>
            <td>{{item.member.name}}</td>
            <td>{{item.member.rank}}</td>
            <td>{{item.leave_type.showName}}</td>
            <td>{{item.start_date}}</td>
            <td>{{item.end_date}}</td>
            <td>{{item.days}}</td>
            <td>{{item.apply_by}}</td>
            <td class="text-white {% if item.company_commander_status == 'pending' %}bg-primary{% elif item.company_commander_status == 'approved' %}bg-success{% elif item.company_commander_status == 'rejected' %}bg-danger{% else %}{% endif %}">{{ item.company_commander_status }}</td>
            <td class="d-flex">
                <a href="{% url 'member_profile' item.member.id %}" class="btn btn-secondary mx-1"><i class="bi bi-person-circle"></i></a>
                <a type="button" data-bs-toggle="modal" data-bs-target="#exampleModal2-{{item.id}}" class="btn btn-info  mx-1"><i class="bi bi-info-circle"></i></a>
            </td>
        </tr>
        {% endfor %}

    </table>
</div>
<div class="panel-footer">
    <!-- Pagination -->
    <nav aria-label="Page navigation">
        <ul class="pagination d-flex flex-wrap justify-content-center">
            <!-- Previous Button -->
            <li class="page-item mb-1 {% if not leavesHistory.has_previous %}disabled{% endif %}">
                {% if leavesHistory.has_previous %}
                    <a class="page-link" href="?page={{ leavesHistory.previous_page_number }}">Previous</a>
                {% else %}
                    <a class="page-link" href="?page=1">Previous</a>
                {% endif %}
            </li>

                    <!-- Page Numbers with Ellipsis -->
            <!-- First Few Pages (1, 2, 3) -->
                {% for num in leavesHistory.paginator.page_range %}
                {% if num <= 3 %}
                    <li class="page-item mb-1 {% if leavesHistory.number == num %}active{% endif %}">
                        <a class="page-link" href="?page={{ num }}">{{ num }}</a>
                    </li>
                {% endif %}
                {% endfor %}

                <!-- Ellipsis (...) -->
                {% if leavesHistory.number >= 3 %}
                <li class="page-item mb-1 disabled">
                    <span class="page-link">...</span>
                </li>
                {% endif %}

                <!-- Middle Pages (Around Current Page) -->
                {% for num in leavesHistory.paginator.page_range %}
                {% if num >= leavesHistory.number|add:'-2' and num <= leavesHistory.number|add:'2' and num > 3 and num < leavesHistory.paginator.num_pages|add:'-2' %}
                    <li class="page-item mb-1 {% if leavesHistory.number == num %}active{% endif %}">
                        <a class="page-link" href="?page={{ num }}">{{ num }}</a>
                    </li>
                {% endif %}
                {% endfor %}

                <!-- Ellipsis (...) -->
                {% if leavesHistory.number < leavesHistory.paginator.num_pages|add:'-4' %}
                <li class="page-item mb-1 disabled">
                    <span class="page-link">...</span>
                </li>
                {% endif %}

                <!-- Last Few Pages (97, 98, 99) -->
                {% if leavesHistory.paginator.num_pages > 3 %}
                {% for num in leavesHistory.paginator.page_range %}
                {% if num >= leavesHistory.paginator.num_pages|add:'-2' %}
                    <li class="page-item mb-1 {% if leavesHistory.number == num %}active{% endif %}">
                        <a class="page-link" href="?page={{ num }}">{{ num }}</a>
                    </li>
                {% endif %}
                {% endfor %}
                {% endif %}

            <!-- Next Button -->
            <li class="page-item mb-1 {% if not leavesHistory.has_next %}disabled{% endif %}">
                {% if leavesHistory.has_next %}
                    <a class="page-link" href="?page={{ leavesHistory.next_page_number }}">Next</a>
                {% else %}
                    <a class="page-link" href="?page={{ leavesHistory.paginator.num_pages }}">Next</a>
                {% endif %}
            </li>
        </ul>
    </nav>
</div>

{% endif %}
{% endblock content %}