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

{% block customCSS %}
<style>
    * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }
    .custom-table{
        min-width: 960px;
        font-size: 12px;
        {% comment %} border: 2px solid black; {% endcomment %}
    }
    th.vertical-text {
        writing-mode: vertical-lr; /* Rotate text */
        text-align: center;
        white-space: nowrap;
        vertical-align: middle;
        transform: rotate(180deg); /* Flip text */
        height: 70px; /* Adjust height */
    }
    td{
        text-align: center;
        font-size:14px;
    }
    td.fw-bold{
        font-weight: bold;
        text-align: left;
    }
</style>
{% endblock customCSS %}



{% block pageName %}
Attendance Table
{% endblock pageName %}



{% block content %}

{% if records %}
<div class="mt-3">
    <h4 class="text-center fw-bold">JCO Parade State <br>
    {{battalion_name}}
    </h4>
    <a href="{% url 'parade_state_jco_pdf_battalion' date|date:'Y-m-d' %}" class="btn btn-info" target="_blank">PDF</a>
    <h4 class="text-end fw-bold">{{date}}</h4>
        <!-- Auth Section -->
        <h4 class="text-uppercase text-decoration-underline text-center fw-bold">auth</h4>
        <div class="table-responsive">
            <table class="table table-bordered custom-table">
                <thead>
                    <tr>
                        <th class="align-middle">{{battalion_name}}</th>
                        {% include "components/_jco_types.html" %}
                        <th class="vertical-text">TOTAL</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td class="fw-bold">TO&amp;E</td>
                        <td class="">{{totals.toe_mwo_auth}}</td>
                        <td class="">{{totals.toe_smo_auth}}</td>
                        <td class="">{{totals.toe_wo_auth}}</td>
                        <td class="">{{totals.toe_jco_auth}}</td>
                    </tr>
                    <tr>
                        <td class="fw-bold">ERE</td>
                        <td class="">{{totals.ere_mwo_auth}}</td>
                        <td class="">{{totals.ere_smo_auth}}</td>
                        <td class="">{{totals.ere_wo_auth}}</td>
                        <td class="">{{totals.ere_jco_auth}}</td>
                    </tr>
                    <tr>
                        <td class="fw-bold">Total</td>
                        <td class="">{{totals.mwo_auth}}</td>
                        <td class="">{{totals.smo_auth}}</td>
                        <td class="">{{totals.wo_auth}}</td>
                        <td class="">{{totals.jco_auth}}</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <!-- Posted Section -->
        <h4 class="text-uppercase text-decoration-underline text-center fw-bold">posted</h4>
        <div class="table-responsive">
            <table class="table table-bordered custom-table" border="1">
                <thead>
                    <tr>
                        <th class="align-middle">{{battalion_name}}</th>
                        {% include "components/_jco_types.html" %}
                        <th class="vertical-text">Total</th>
                    </tr>
                </thead>
                <tbody>
                    {% for record in records %}
                    <tr>
                        <td class="fw-bold">{{ record.company.name }}</td>
                        <td class="">{{record.mwo_posted}}</td>
                        <td class="">{{record.smo_posted}}</td>
                        <td class="">{{record.wo_posted}}</td>
                        <td class="">{{record.jco_posted}}</td>
                    </tr>
                    {% endfor %}
                    <tr>
                        <td class="fw-bold">Total</td>
                        <td class="">{{totals.mwo_posted}}</td>
                        <td class="">{{totals.smo_posted}}</td>
                        <td class="">{{totals.wo_posted}}</td>
                        <td class="">{{totals.jco_posted}}</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <!-- def Section -->
        <h4 class="text-uppercase text-decoration-underline text-center fw-bold">def</h4>
        <div class="table-responsive">
            <table class="table table-bordered custom-table" border="1">
                <thead>
                    <tr>
                        <th class="align-middle">{{battalion_name}}</th>
                        {% include "components/_jco_types.html" %}
                        <th class="vertical-text">TOTAL</th>
                    </tr>
                </thead>
                <tbody>
                    {% for record in records %}
                    <tr>
                        <td class="fw-bold">{{ record.company.name }}</td>
                        <td class="">{{record.mwo_def}}</td>
                        <td class="">{{record.smo_def}}</td>
                        <td class="">{{record.wo_def}}</td>
                        <td class="">{{record.jco_def}}</td>
                    </tr>
                    {% endfor %}
                    <tr>
                        <td class="fw-bold">Total</td>
                        <td class="">{{totals.mwo_def}}</td>
                        <td class="">{{totals.smo_def}}</td>
                        <td class="">{{totals.wo_def}}</td>
                        <td class="">{{totals.jco_def}}</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <!-- out of unit emp Section -->
        <h4 class="text-uppercase text-decoration-underline text-center fw-bold">out of unit emp</h4>
        <div class="table-responsive">
            <table class="table table-bordered custom-table" border="1">
                <thead>
                    <tr>
                        <th class="align-middle">{{battalion_name}}</th>
                        {% include "components/_jco_types.html" %}
                        <th class="vertical-text">TOTAL</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td class="fw-bold">ERE</td>
                        <td class="">{{totals.ere_mwo}}</td>
                        <td class="">{{totals.ere_smo}}</td>
                        <td class="">{{totals.ere_wo}}</td>
                        <td class="">{{totals.ere_jco}}</td>
                    </tr>
                    <tr>
                        <td class="fw-bold">ATT</td>
                        <td class="">{{totals.att_mwo}}</td>
                        <td class="">{{totals.att_smo}}</td>
                        <td class="">{{totals.att_wo}}</td>
                        <td class="">{{totals.att_jco}}</td>
                    </tr>
                    <tr>
                        <td class="fw-bold">T Duty</td>
                        <td class="">{{totals.t_duty_mwo}}</td>
                        <td class="">{{totals.t_duty_smo}}</td>
                        <td class="">{{totals.t_duty_wo}}</td>
                        <td class="">{{totals.t_duty_jco}}</td>
                    </tr>
                    <tr>
                        <td class="fw-bold">MSN</td>
                        <td class="">{{totals.msn_mwo}}</td>
                        <td class="">{{totals.msn_smo}}</td>
                        <td class="">{{totals.msn_wo}}</td>
                        <td class="">{{totals.msn_jco}}</td>
                    </tr>
                    <tr>
                        <td class="fw-bold">OKP</td>
                        <td class="">{{totals.okp_mwo}}</td>
                        <td class="">{{totals.okp_smo}}</td>
                        <td class="">{{totals.okp_wo}}</td>
                        <td class="">{{totals.okp_jco}}</td>
                    </tr>
                    <tr>
                        <td class="fw-bold">Demov</td>
                        <td class="">{{totals.demov_mwo}}</td>
                        <td class="">{{totals.demov_smo}}</td>
                        <td class="">{{totals.demov_wo}}</td>
                        <td class="">{{totals.demov_jco}}</td>
                    </tr>
                    <tr>
                        <td class="fw-bold">Total</td>
                        <td class="">{{totals.out_of_unit_emp_mwo}}</td>
                        <td class="">{{totals.out_of_unit_emp_smo}}</td>
                        <td class="">{{totals.out_of_unit_emp_wo}}</td>
                        <td class="">{{totals.out_of_unit_emp_jco}}</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <!-- Held Section -->
        <h4 class="text-uppercase text-decoration-underline text-center fw-bold">held</h4>
        <div class="table-responsive">
            <table class="table table-bordered custom-table">
                <thead>
                    <tr>
                        <th class="align-middle">{{ battalion_name }}</th>
                        {% include "components/_jco_types.html" %}
                        <th class="vertical-text">TOTAL</th>
                    </tr>
                </thead>
                <tbody>
                    {% for record in records %}
                    <tr>
                        <td class="fw-bold">{{ record.company.name }}</td>
                        <td class="">{{record.mwo_held}}</td>
                        <td class="">{{record.smo_held}}</td>
                        <td class="">{{record.wo_held}}</td>
                        <td class="">{{record.jco_held}}</td>
                    </tr>
                    {% endfor %}
                    <tr>
                        <td class="fw-bold">Total</td>
                        <td class="">{{totals.mwo_held}}</td>
                        <td class="">{{totals.smo_held}}</td>
                        <td class="">{{totals.wo_held}}</td>
                        <td class="">{{totals.jco_held}}</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <!-- Absent Section -->
        <h4 class="text-uppercase text-decoration-underline text-center fw-bold">detail of absent</h4>
        <div class="table-responsive">
            <table class="table table-bordered custom-table">
                <thead>
                    <tr>
                        <th class="align-middle">{{ battalion_name }}</th>
                        {% include "components/_jco_types.html" %}
                        <th class="vertical-text">TOTAL</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td class="fw-bold">P/Lve</td>
                        <td class="">{{totals.p_leave_mwo}}</td>
                        <td class="">{{totals.p_leave_smo}}</td>
                        <td class="">{{totals.p_leave_wo}}</td>
                        <td class="">{{totals.p_leave_jco}}</td>
                    </tr>
                    <tr>
                        <td class="fw-bold">C/Lve</td>
                        <td class="">{{totals.c_leave_mwo}}</td>
                        <td class="">{{totals.c_leave_smo}}</td>
                        <td class="">{{totals.c_leave_wo}}</td>
                        <td class="">{{totals.c_leave_jco}}</td>
                    </tr>                    
                    <tr>
                        <td class="fw-bold">R/Lve</td>
                        <td class="">{{totals.r_leave_mwo}}</td>
                        <td class="">{{totals.r_leave_smo}}</td>
                        <td class="">{{totals.r_leave_wo}}</td>
                        <td class="">{{totals.r_leave_jco}}</td>
                    </tr>                    
                    <tr>
                        <td class="fw-bold">M/Lve</td>
                        <td class="">{{totals.m_leave_mwo}}</td>
                        <td class="">{{totals.m_leave_smo}}</td>
                        <td class="">{{totals.m_leave_wo}}</td>
                        <td class="">{{totals.m_leave_jco}}</td>
                    </tr>                    
                    <tr>
                        <td class="fw-bold">J/LVE</td>
                        <td class="">{{totals.j_leave_mwo}}</td>
                        <td class="">{{totals.j_leave_smo}}</td>
                        <td class="">{{totals.j_leave_wo}}</td>
                        <td class="">{{totals.j_leave_jco}}</td>
                    </tr>                    
                    <tr>
                        <td class="fw-bold">W/Lve</td>
                        <td class="">{{totals.w_leave_mwo}}</td>
                        <td class="">{{totals.w_leave_smo}}</td>
                        <td class="">{{totals.w_leave_wo}}</td>
                        <td class="">{{totals.w_leave_jco}}</td>
                    </tr>                    
                    <tr>
                        <td class="fw-bold">OSL</td>
                        <td class="">{{totals.osl_mwo}}</td>
                        <td class="">{{totals.osl_smo}}</td>
                        <td class="">{{totals.osl_wo}}</td>
                        <td class="">{{totals.osl_jco}}</td>
                    </tr>                    
                    <tr>
                        <td class="fw-bold">AWOL</td>
                        <td class="">{{totals.awol_mwo}}</td>
                        <td class="">{{totals.awol_smo}}</td>
                        <td class="">{{totals.awol_wo}}</td>
                        <td class="">{{totals.awol_jco}}</td>
                    </tr>                    
                    <tr>
                        <td class="fw-bold">Course</td>
                        <td class="">{{totals.course_mwo}}</td>
                        <td class="">{{totals.course_smo}}</td>
                        <td class="">{{totals.course_wo}}</td>
                        <td class="">{{totals.course_jco}}</td>
                    </tr>                    
                    <tr>
                        <td class="fw-bold">Trg</td>
                        <td class="">{{totals.trg_mwo}}</td>
                        <td class="">{{totals.trg_smo}}</td>
                        <td class="">{{totals.trg_wo}}</td>
                        <td class="">{{totals.trg_jco}}</td>
                    </tr>                    
                    <tr>
                        <td class="fw-bold">Cdr</td>
                        <td class="">{{totals.cdr_mwo}}</td>
                        <td class="">{{totals.cdr_smo}}</td>
                        <td class="">{{totals.cdr_wo}}</td>
                        <td class="">{{totals.cdr_jco}}</td>
                    </tr>                    
                    <tr>
                        <td class="fw-bold">CMH</td>
                        <td class="">{{totals.cmh_mwo}}</td>
                        <td class="">{{totals.cmh_smo}}</td>
                        <td class="">{{totals.cmh_wo}}</td>
                        <td class="">{{totals.cmh_jco}}</td>
                    </tr>                    
                    <tr>
                        <td class="fw-bold">STMK</td>
                        <td class="">{{totals.stmk_mwo}}</td>
                        <td class="">{{totals.stmk_smo}}</td>
                        <td class="">{{totals.stmk_wo}}</td>
                        <td class="">{{totals.stmk_jco}}</td>
                    </tr>                    
                    <tr>
                        <td class="fw-bold">Line Sick</td>
                        <td class="">{{totals.line_sick_mwo}}</td>
                        <td class="">{{totals.line_sick_smo}}</td>
                        <td class="">{{totals.line_sick_wo}}</td>
                        <td class="">{{totals.line_sick_jco}}</td>
                    </tr>                    
                    <tr>
                        <td class="fw-bold">MISC</td>
                        <td class="">{{totals.misc_mwo}}</td>
                        <td class="">{{totals.misc_smo}}</td>
                        <td class="">{{totals.misc_wo}}</td>
                        <td class="">{{totals.misc_jco}}</td>
                    </tr>                    
                    <tr>
                        <td class="fw-bold">Total</td>
                        <td class="">{{totals.total_leave_mwo}}</td>
                        <td class="">{{totals.total_leave_smo}}</td>
                        <td class="">{{totals.total_leave_wo}}</td>
                        <td class="">{{totals.total_leave_jco}}</td>
                    </tr>
                    <tr>
                        <td class="fw-bold">Ration Out</td>
                        <td class="">{{totals.ration_out_mwo}}</td>
                        <td class="">{{totals.ration_out_smo}}</td>
                        <td class="">{{totals.ration_out_wo}}</td>
                        <td class="">{{totals.ration_out_jco}}</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <!-- Absent Section -->
        <h4 class="text-uppercase text-decoration-underline text-center fw-bold">absent</h4>
        <div class="table-responsive">
            <table class="table table-bordered custom-table">
                <thead>
                    <tr>
                        <th class="align-middle">{{ battalion_name }}</th>
                        {% include "components/_jco_types.html" %}
                        <th class="vertical-text">TOTAL</th>
                    </tr>
                </thead>
                <tbody>
                    {% for record in records %}
                    <tr>
                        <td class="fw-bold">{{ record.company.name }}</td>
                        <td class="">{{record.mwo_absent}}</td>
                        <td class="">{{record.smo_absent}}</td>
                        <td class="">{{record.wo_absent}}</td>
                        <td class="">{{record.jco_absent}}</td>
                    </tr>
                    {% endfor %}
                    <tr>
                        <td class="fw-bold">Total</td>
                        <td class="">{{totals.mwo_absent}}</td>
                        <td class="">{{totals.smo_absent}}</td>
                        <td class="">{{totals.wo_absent}}</td>
                        <td class="">{{totals.jco_absent}}</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <!-- Present Section -->
        <h4 class="text-uppercase text-decoration-underline text-center fw-bold">total present</h4>
        <div class="table-responsive">
            <table class="table table-bordered custom-table">
                <thead>
                    <tr>
                        <th class="align-middle">{{ battalion_name }}</th>
                        {% include "components/_jco_types.html" %}
                        <th class="vertical-text">TOTAL</th>
                    </tr>
                </thead>
                <tbody>
                    {% for record in records %}
                    <tr>
                        <td class="fw-bold">{{ record.company.name }}</td>
                        <td class="">{{record.mwo_present}}</td>
                        <td class="">{{record.smo_present}}</td>
                        <td class="">{{record.wo_present}}</td>
                        <td class="">{{record.jco_present}}</td>
                    </tr>
                    {% endfor %}
                    <tr>
                        <td class="fw-bold">Total</td>
                        <td class="">{{totals.mwo_present}}</td>
                        <td class="">{{totals.smo_present}}</td>
                        <td class="">{{totals.wo_present}}</td>
                        <td class="">{{totals.jco_present}}</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <!-- Present Section -->
        <h4 class="text-uppercase text-decoration-underline text-center fw-bold">Ops Depl</h4>
        <div class="table-responsive">
            <table class="table table-bordered custom-table">
                <thead>
                    <tr>
                        <th class="align-middle">{{ battalion_name }}</th>
                        {% include "components/_jco_types.html" %}
                        <th class="vertical-text">TOTAL</th>
                    </tr>
                </thead>
                <tbody>
                    {% for record in records %}
                    <tr>
                        <td class="fw-bold">{{ record.company.name }}</td>
                        <td class="">{{record.ops_depl_mwo_present}}</td>
                        <td class="">{{record.ops_depl_smo_present}}</td>
                        <td class="">{{record.ops_depl_wo_present}}</td>
                        <td class="">{{record.ops_depl_jco_present}}</td>
                    </tr>
                    {% endfor %}
                    <tr>
                        <td class="fw-bold">Total</td>
                        <td class="">{{totals.ops_depl_mwo_present}}</td>
                        <td class="">{{totals.ops_depl_smo_present}}</td>
                        <td class="">{{totals.ops_depl_wo_present}}</td>
                        <td class="">{{totals.ops_depl_jco_present}}</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <!-- Rear Section -->
        <h4 class="text-uppercase text-decoration-underline text-center fw-bold">Rear</h4>
        <div class="table-responsive">
            <table class="table table-bordered custom-table">
                <thead>
                    <tr>
                        <th class="align-middle">{{ battalion_name }}</th>
                        {% include "components/_jco_types.html" %}
                        <th class="vertical-text">TOTAL</th>
                    </tr>
                </thead>
                <tbody>
                    {% for record in records %}
                    <tr>
                        <td class="fw-bold">{{ record.company.name }}</td>
                        <td class="">{{record.rear_mwo_present}}</td>
                        <td class="">{{record.rear_smo_present}}</td>
                        <td class="">{{record.rear_wo_present}}</td>
                        <td class="">{{record.rear_jco_present}}</td>
                    </tr>
                    {% endfor %}
                    <tr>
                        <td class="fw-bold">Total</td>
                        <td class="">{{totals.rear_mwo_present}}</td>
                        <td class="">{{totals.rear_smo_present}}</td>
                        <td class="">{{totals.rear_wo_present}}</td>
                        <td class="">{{totals.rear_jco_present}}</td>
                    </tr>
                </tbody>
            </table>
        </div>
</div>
{% if cart_id %}
<div class="d-flex justify-content-between row mt-1">
    <div class="col-4 col-md-6">
        <form action="{% url 'submitBattalionAttendance' cart_id %}" method="post">
            {% csrf_token %}
            <button class="btn btn-primary" type="submit">Accept</button>
        </form>
    </div>
    <div class="col-8 col-md-6">
        <form action="{% url "rejectCompanyAttendance" %}" method="post" class="d-flex row justify-content-end">
            {% csrf_token %}
            <div class="col-6">
                <select name="company_id" id="" class="form-control">
                    <option disabled>choose company</option>
                    {% for c in company %}
                    <option value={{c.id}}>{{c.name}}</option>
                    {% endfor %}
                </select>
            </div>

            <div class="col-6">
                <button class="btn btn-danger w-100" type="submit">Reject</button>
            </div>
        </form>
    </div>
</div>
{% endif %}
{% else %}
<div class="text-center mt-5 py-5" >
    <h1>No Record Found</h1>
</div>
{% 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 %}