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

{% block pageName %}
Out Of Unit Emp Table
{% endblock pageName %}


{% block content %}
<div class="container">
    <div class="row">
        <div class="col-md-offset-1 col-md-12">
            <!-- Search Form -->
            <div class="d-flex justify-content-end">
                <form method="GET" class="d-flex mb-3 input-group">
                    <select name="status" class="form-select" id="">
                        <option value="">All</option>
                        <option {% if status_query == 'True' %} selected {% endif %} value=True>Active</option>
                        <option {% if status_query == 'False' %} selected {% endif %} value=False>Inactive</option>
                    </select>
                    <input type="text" name="search" class="form-control " placeholder="Army or Name or Mobile or true or Rank" value="{{ search_query }}">
                    <button type="submit" class="btn btn-primary">Search</button>
                    <a class=" btn btn-success" target="_blank" href="{% url "read_out_of_unit_emp_pdf" props %}?search={{search_query}}&status={{status_query}}"><i class="bi bi-printer"></i> PDF</a>
                </form>
            </div>
            <div class="panel">
                <div class="panel-heading">
                    
                    <div class="row">
                        <div class="col-sm-12 col-xs-12 d-flex justify-content-between">
                            {% for module in user_modules %}
                            {% if module.name == 'create_out_of_unit_emp_admin' or module.name == 'create_out_of_unit_emp_battalion' or module.name == 'create_out_of_unit_emp_company' %}
                            <button type="button" data-bs-toggle="modal" data-bs-target="#exampleModal-add" class="btn  btn-primary pull-left block"><i class="bi bi-plus-circle"></i> Out Of Unit Emp Entry</button>
                            {% endif %}
                            {% endfor %}
                        </div>
                    </div>
                </div>

                
                <!-- Modal -->
                <div class="modal fade" id="exampleModal-add" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
                    <div class="modal-dialog modal-xl">
                    <div class="modal-content">
                        <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">Out Of Unit Emp Entry</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                        {% include "absent_details/add_out_of_unit_emp.html" %}
                        </div>
                    </div>
                    </div>
                </div>
  
                <div class="panel-body table-responsive">
                    <table class="table">
                        <thead>
                            <tr>
                                <th>Action</th> 
                                <th>#</th>
                                <th>Army No</th>
                                <th>Rank</th>
                                <th>Name</th>
                                <th>Type</th>
                                <th>Unit/Org</th>
                                <th>Start Date</th>
                                <th>End Date</th>
                                <th>Sub Unit</th>
                                <th>Unit</th>
                                <th>Rmks</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for item in out_of_unit_emp %}
                            <!-- 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">Rank</span> :{{ item.member.rank.name}}</div>
                                    <div><span class="fw-bold">Name</span> :{{item.member.name}}</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">Type</span> :{{ item.get_type_name_display}}</div>
                                    <div><span class="fw-bold">Unit/Org</span> :{{ item.unit}}</div>
                                    <div><span class="fw-bold">Sub Unit</span> :{{ item.member.company.name}}</div>
                                    <div><span class="fw-bold">Unit</span> :{{ item.member.company.battalion.name}}</div>
                                </div>
                                <h2 class="text-center mt-3 text-decoration-underline">Rmks</h2>
                                <p>{{item.reason}}</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> 
                    <!-- Modal -->
                <div class="modal fade" id="exampleModal-remove-{{item.id}}" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
                    <div class="modal-dialog modal-xl">
                    <div class="modal-content">
                        <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">Remove Out Of Unit Emp</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                        {% include "absent_details/remove_out_of_unit_emp.html" %}
                        </div>
                    </div>
                    </div>
                </div>
                            <tr>
                                <td class="action">
                                    <div class="d-flex">
                                        {% for module in user_modules %}
                                        {% if module.name == 'remove_out_of_unit_emp_admin' or module.name == 'remove_out_of_unit_emp_battalion' or module.name == 'remove_out_of_unit_emp_company' %}
                                            {% if item.status %}
                                            <a data-bs-toggle="modal" data-bs-target="#exampleModal-remove-{{item.id}}" class="btn btn-sm btn-success mx-1"><i class="bi bi-check2-circle"></i></a>
                                            {% endif %}
                                        {% endif %}
                                        {% endfor %}
                                        <a href="{% url "member_profile" item.member.id %}" class="btn btn-sm btn-info mx-1"><i class="bi bi-person-circle"></i></a>
                                    </div>
                                </td>
                                <td>{{forloop.counter}}</td>
                                <td>{{item.member.army_no}}</td>
                                <td>{{item.member.rank.name}}</td>
                                <td>{{item.member.name}}</td>
                                <td>{{item.get_type_name_display}}</td>
                                <td>{{item.unit}}</td>
                                <td>{{item.start_date}}</td>
                                <td>{{item.end_date}}</td>
                                <td>{{item.member.company.name}}</td>
                                <td>{{item.member.company.battalion.name}}</td>
                                <td><a data-bs-toggle="modal" data-bs-target="#exampleModal-{{item.id}}" class="btn btn-info  mx-1"><i class="bi bi-info-circle"></i></a></td>
                            </tr>
                            {% endfor %}
                            
                        </tbody>
                    </table>
                </div>
                <!-- Pagination -->
                {% include "components/pagination.html" with page_obj=out_of_unit_emp %}
            </div>
        </div>
    </div>
</div>

{% endblock content %}