{% 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{
        text-align: left;
    }
</style>
{% endblock customCSS %}



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



{% block content %}


{% if record %}
<div class="mt-3">
    <h4 class="text-center fw-bold">JCO Parade State <br>
    {{record.company.name}}
    </h4>
    <a href="{% url 'parade_state_jco_pdf_company' record.date|date:'Y-m-d' %}" class="btn btn-info" target="_blank">PDF</a>
    <h4 class="text-end fw-bold">{{date|date:'d-M-Y'}}</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">{{record.company.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="">{{record.toe_mwo_auth}}</td>
                        <td class="">{{record.toe_smo_auth}}</td>
                        <td class="">{{record.toe_wo_auth}}</td>
                        <td class="">{{record.toe_jco_auth}}</td>
                    </tr>
                    <tr>
                        <td class="fw-bold">ERE</td>
                        <td class="">{{record.ere_mwo_auth}}</td>
                        <td class="">{{record.ere_smo_auth}}</td>
                        <td class="">{{record.ere_wo_auth}}</td>
                        <td class="">{{record.ere_jco_auth}}</td>
                    </tr>
                    <tr>
                        <td class="fw-bold">Total</td>
                        <td class="">{{record.mwo_auth}}</td>
                        <td class="">{{record.smo_auth}}</td>
                        <td class="">{{record.wo_auth}}</td>
                        <td class="">{{record.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">{{record.company.name}}</th>
                        {% include "components/_jco_types.html" %}
                        <th class="vertical-text">Total</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td class="fw-bold">Total</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>
                </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">{{record.company.name}}</th>
                        {% include "components/_jco_types.html" %}
                        <th class="vertical-text">Total</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td class="fw-bold">Total</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>
                </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">{{record.company.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="">{{record.ere_mwo}}</td>
                        <td class="">{{record.ere_smo}}</td>
                        <td class="">{{record.ere_wo}}</td>
                        <td class="">{{record.ere_jco}}</td>
                    </tr>
                    <tr>
                        <td class="fw-bold">ATT</td>
                        <td class="">{{record.att_mwo}}</td>
                        <td class="">{{record.att_smo}}</td>
                        <td class="">{{record.att_wo}}</td>
                        <td class="">{{record.att_jco}}</td>
                    </tr>
                    <tr>
                        <td class="fw-bold">T Duty</td>
                        <td class="">{{record.t_duty_mwo}}</td>
                        <td class="">{{record.t_duty_smo}}</td>
                        <td class="">{{record.t_duty_wo}}</td>
                        <td class="">{{record.t_duty_jco}}</td>
                    </tr>
                    <tr>
                        <td class="fw-bold">MSN</td>
                        <td class="">{{record.msn_mwo}}</td>
                        <td class="">{{record.msn_smo}}</td>
                        <td class="">{{record.msn_wo}}</td>
                        <td class="">{{record.msn_jco}}</td>
                    </tr>
                    <tr>
                        <td class="fw-bold">OKP</td>
                        <td class="">{{record.okp_mwo}}</td>
                        <td class="">{{record.okp_smo}}</td>
                        <td class="">{{record.okp_wo}}</td>
                        <td class="">{{record.okp_jco}}</td>
                    </tr>
                    <tr>
                        <td class="fw-bold">Demov</td>
                        <td class="">{{record.demov_mwo}}</td>
                        <td class="">{{record.demov_smo}}</td>
                        <td class="">{{record.demov_wo}}</td>
                        <td class="">{{record.demov_jco}}</td>
                    </tr>
                    <tr>
                        <td class="fw-bold">Total</td>
                        <td class="">{{record.out_of_unit_emp_mwo}}</td>
                        <td class="">{{record.out_of_unit_emp_smo}}</td>
                        <td class="">{{record.out_of_unit_emp_wo}}</td>
                        <td class="">{{record.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">{{record.company.name}}</th>
                        {% include "components/_jco_types.html" %}
                        <th class="vertical-text">Total</th>
                    </tr>
                </thead>
                <tbody>
                    <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>
                </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">{{record.company.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="">{{record.p_leave_mwo}}</td>
                        <td class="">{{record.p_leave_smo}}</td>
                        <td class="">{{record.p_leave_wo}}</td>
                        <td class="">{{record.p_leave_jco}}</td>
                    </tr>
                    <tr>
                        <td class="fw-bold">C/Lve</td>
                        <td class="">{{record.c_leave_mwo}}</td>
                        <td class="">{{record.c_leave_smo}}</td>
                        <td class="">{{record.c_leave_wo}}</td>
                        <td class="">{{record.c_leave_jco}}</td>
                    </tr>                    
                    <tr>
                        <td class="fw-bold">R/Lve</td>
                        <td class="">{{record.r_leave_mwo}}</td>
                        <td class="">{{record.r_leave_smo}}</td>
                        <td class="">{{record.r_leave_wo}}</td>
                        <td class="">{{record.r_leave_jco}}</td>
                    </tr>                    
                    <tr>
                        <td class="fw-bold">M/Lve</td>
                        <td class="">{{record.m_leave_mwo}}</td>
                        <td class="">{{record.m_leave_smo}}</td>
                        <td class="">{{record.m_leave_wo}}</td>
                        <td class="">{{record.m_leave_jco}}</td>
                    </tr>                    
                    <tr>
                        <td class="fw-bold">J/LVE</td>
                        <td class="">{{record.j_leave_mwo}}</td>
                        <td class="">{{record.j_leave_smo}}</td>
                        <td class="">{{record.j_leave_wo}}</td>
                        <td class="">{{record.j_leave_jco}}</td>
                    </tr>                    
                    <tr>
                        <td class="fw-bold">W/Lve</td>
                        <td class="">{{record.w_leave_mwo}}</td>
                        <td class="">{{record.w_leave_smo}}</td>
                        <td class="">{{record.w_leave_wo}}</td>
                        <td class="">{{record.w_leave_jco}}</td>
                    </tr>                    
                    <tr>
                        <td class="fw-bold">OSL</td>
                        <td class="">{{record.osl_mwo}}</td>
                        <td class="">{{record.osl_smo}}</td>
                        <td class="">{{record.osl_wo}}</td>
                        <td class="">{{record.osl_jco}}</td>
                    </tr>                    
                    <tr>
                        <td class="fw-bold">AWOL</td>
                        <td class="">{{record.awol_mwo}}</td>
                        <td class="">{{record.awol_smo}}</td>
                        <td class="">{{record.awol_wo}}</td>
                        <td class="">{{record.awol_jco}}</td>
                    </tr>                    
                    <tr>
                        <td class="fw-bold">Course</td>
                        <td class="">{{record.course_mwo}}</td>
                        <td class="">{{record.course_smo}}</td>
                        <td class="">{{record.course_wo}}</td>
                        <td class="">{{record.course_jco}}</td>
                    </tr>                    
                    <tr>
                        <td class="fw-bold">Trg</td>
                        <td class="">{{record.trg_mwo}}</td>
                        <td class="">{{record.trg_smo}}</td>
                        <td class="">{{record.trg_wo}}</td>
                        <td class="">{{record.trg_jco}}</td>
                    </tr>                    
                    <tr>
                        <td class="fw-bold">Cdr</td>
                        <td class="">{{record.cdr_mwo}}</td>
                        <td class="">{{record.cdr_smo}}</td>
                        <td class="">{{record.cdr_wo}}</td>
                        <td class="">{{record.cdr_jco}}</td>
                    </tr>                    
                    <tr>
                        <td class="fw-bold">CMH</td>
                        <td class="">{{record.cmh_mwo}}</td>
                        <td class="">{{record.cmh_smo}}</td>
                        <td class="">{{record.cmh_wo}}</td>
                        <td class="">{{record.cmh_jco}}</td>
                    </tr>                    
                    <tr>
                        <td class="fw-bold">STMK</td>
                        <td class="">{{record.stmk_mwo}}</td>
                        <td class="">{{record.stmk_smo}}</td>
                        <td class="">{{record.stmk_wo}}</td>
                        <td class="">{{record.stmk_jco}}</td>
                    </tr>                    
                    <tr>
                        <td class="fw-bold">Line Sick</td>
                        <td class="">{{record.line_sick_mwo}}</td>
                        <td class="">{{record.line_sick_smo}}</td>
                        <td class="">{{record.line_sick_wo}}</td>
                        <td class="">{{record.line_sick_jco}}</td>
                    </tr>                    
                    <tr>
                        <td class="fw-bold">MISC</td>
                        <td class="">{{record.misc_mwo}}</td>
                        <td class="">{{record.misc_smo}}</td>
                        <td class="">{{record.misc_wo}}</td>
                        <td class="">{{record.misc_jco}}</td>
                    </tr>                    
                    <tr>
                        <td class="fw-bold">Total</td>
                        <td class="">{{record.total_leave_mwo}}</td>
                        <td class="">{{record.total_leave_smo}}</td>
                        <td class="">{{record.total_leave_wo}}</td>
                        <td class="">{{record.total_leave_jco}}</td>
                    </tr>
                    <tr>
                        <td class="fw-bold">Ration Out</td>
                        <td class="">{{record.ration_out_mwo}}</td>
                        <td class="">{{record.ration_out_smo}}</td>
                        <td class="">{{record.ration_out_wo}}</td>
                        <td class="">{{record.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">{{ record.company.name }}</th>
                        {% include "components/_jco_types.html" %}
                        <th class="vertical-text">Total</th>
                    </tr>
                </thead>
                <tbody>
                    <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>
                </tbody>
            </table>
        </div>
        <!-- Present Section -->
        <h4 class="text-uppercase text-decoration-underline text-center fw-bold">present</h4>
        <div class="table-responsive">
            <table class="table table-bordered custom-table">
                <thead>
                    <tr>
                        <th class="align-middle">{{ record.company.name }}</th>
                        {% include "components/_jco_types.html" %}
                        <th class="vertical-text">Total</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td class="fw-bold">Total</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>
                    <tr>
                        <td class="fw-bold">Ops Depl</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>
                    <tr>
                        <td class="fw-bold">Rear</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>
                </tbody>
            </table>
        </div>
</div>

{% else %}
<div class="text-center mt-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 %}