{% extends "base_admin.html" %}
{% block title %}Daily SF - CWN{% endblock %}
{% block content %}
{% load static %}

<style>
    h2 {
        color: #800000;
    }
    .card-header {
        background-color: #f8f9fc;
        border-bottom: 2px solid #800000;
    }
</style>

<!-- Judul -->
<div class="container-fluid mt-4">
    <h1 class="mb-4 text-center text-white p-3 rounded mt-2 custom-bg" style="margin-bottom: 15px;">DATA PER BULAN</h1>

<!-- Card untuk Form Filter -->
<div class="d-flex justify-content-center">
    <div class="card shadow mb-4">
        <div class="card-body">
            <!-- Centered Form -->
                <form method="GET" action="" class="form-inline" id="filterForm">
                    <div class="form-group mr-3">
                        {% if request.session.role == 'Team Leader' %}
                            <input type="text" class="form-control" value="{{ request.session.wok_id_tl }}" readonly>
                            <input type="hidden" name="wok_id" value="{{ request.session.wok_id_tl }}">
                        {% elif request.session.role == 'Mitra' %}
                            <input type="text" class="form-control" value="{{ request.session.wok_mitra }}" readonly>
                            <input type="hidden" name="wok_id" value="{{ request.session.wok_mitra }}">
                        {% else %}
                            <select name="wok_id" id="wok_id" class="form-control" onchange="this.form.submit()">
                                <option value="x" {% if not request.GET.wok_id or request.GET.wok_id == 'x' %}selected{% endif %}>-- Pilih WOK --</option>
                                <option value="1" {% if request.GET.wok_id == "1" %}selected{% endif %}>DEMAK</option>
                                <option value="2" {% if request.GET.wok_id == "2" %}selected{% endif %}>SEMARANG 2</option>
                                <option value="3" {% if request.GET.wok_id == "3" %}selected{% endif %}>SURAKARTA</option>
                            </select>
                        {% endif %}

                    </div>
                    <div class="form-group mr-3">
                        <label for="year" class="font-weight-bold h5 mr-2">Tahun</label>
                        <select name="year" id="year" class="form-control">
                            <option value="">-- Pilih Tahun --</option>
                            <option value="2020" {% if selected_year == "2020" %}selected{% endif %}>2020</option>
                            <option value="2021" {% if selected_year == "2021" %}selected{% endif %}>2021</option>
                            <option value="2022" {% if selected_year == "2022" %}selected{% endif %}>2022</option>
                            <option value="2023" {% if selected_year == "2023" %}selected{% endif %}>2023</option>
                            <option value="2024" {% if selected_year == "2024" %}selected{% endif %}>2024</option>
                            <option value="2025" {% if selected_year == "2025" %}selected{% endif %}>2025</option>
                        </select>
                    </div>
                    
                    <div class="form-group mr-3">
                        <label for="month" class="font-weight-bold h5 mr-2">Bulan</label>
                        <select name="month" id="month" class="form-control">
                            <option value="">-- Pilih Bulan --</option>
                            <option value="01" {% if selected_month == "01" %}selected{% endif %}>Januari</option>
                            <option value="02" {% if selected_month == "02" %}selected{% endif %}>Februari</option>
                            <option value="03" {% if selected_month == "03" %}selected{% endif %}>Maret</option>
                            <option value="04" {% if selected_month == "04" %}selected{% endif %}>April</option>
                            <option value="05" {% if selected_month == "05" %}selected{% endif %}>Mei</option>
                            <option value="06" {% if selected_month == "06" %}selected{% endif %}>Juni</option>
                            <option value="07" {% if selected_month == "07" %}selected{% endif %}>Juli</option>
                            <option value="08" {% if selected_month == "08" %}selected{% endif %}>Agustus</option>
                            <option value="09" {% if selected_month == "09" %}selected{% endif %}>September</option>
                            <option value="10" {% if selected_month == "10" %}selected{% endif %}>Oktober</option>
                            <option value="11" {% if selected_month == "11" %}selected{% endif %}>November</option>
                            <option value="12" {% if selected_month == "12" %}selected{% endif %}>Desember</option>
                        </select>
                    </div>

                    <button class="btn btn-danger" type="submit">
                        <i class="fas fa-filter"></i> Filter
                    </button>
                </form>
            </div>
        </div>
    </div>
    <!-- Tabel Data -->
    <div style="overflow-x: auto;" id="mom-data-container">
        <!-- Tabel WOK 1 -->
        {% if request.GET.wok_id == "1" or request.GET.wok_id == "x" or not request.GET.wok_id%}
        <div class="card shadow mb-4">
            <div class ="card-header py-3">
                <h2 class="m-0 font-weight-bold text-dark">WOK DEMAK</h2>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <input type="text" id="searchDemak" onkeyup="searchTable('searchDemak', 'tableDemak')" placeholder="Cari Nama..." class="form-control mb-3">

                    <table class="table table-bordered table-sm table-striped table-hover text-center" cellspacing="0" style="width:100%" id="tableDemak">
                        <thead class="thead-dark" style="background-color: #f0f0f0;">
                            <tr>
                                <!-- <th>ID PPB</th> -->
                                <th>SF ID</th>
                                <th>Nama</th>
                                <!-- <th>WOK</th> -->
                                <!-- <th>Tahun</th>
                                <th>Bulan</th> -->
                                <th>1</th>
                                <th>2</th>
                                <th>3</th>
                                <th>4</th>
                                <th>5</th>
                                <th>6</th>
                                <th>7</th>
                                <th>8</th>
                                <th>9</th>
                                <th>10</th>
                                <th>11</th>
                                <th>12</th>
                                <th>13</th>
                                <th>14</th>
                                <th>15</th>
                                <th>16</th>
                                <th>17</th>
                                <th>18</th>
                                <th>19</th>
                                <th>20</th>
                                <th>21</th>
                                <th>22</th>
                                <th>23</th>
                                <th>24</th>
                                <th>25</th>
                                <th>26</th>
                                <th>27</th>
                                <th>28</th>
                                <th>29</th>
                                <th>30</th>
                                <th>31</th>
                                <th>Total PSB</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for k in momkaryawan %}
                                {% if k.37 == "DEMAK" %}
                                    <tr>
                                        <!-- <td>{{ k.0 }}</td> -->
                                        <td>{{ k.1 }}</td>
                                        <td>{{ k.2 }}</td>
                                        <!-- <td>{{ k.37 }}</td>
                                        <td>{{ k.3 }}</td>
                                        <td>{{ k.4 }}</td> -->
                                        <td>{{ k.5 }}</td>
                                        <td>{{ k.6 }}</td>
                                        <td>{{ k.7 }}</td>
                                        <td>{{ k.8 }}</td>
                                        <td>{{ k.9 }}</td>
                                        <td>{{ k.10 }}</td>
                                        <td>{{ k.11 }}</td>
                                        <td>{{ k.12 }}</td>
                                        <td>{{ k.13 }}</td>
                                        <td>{{ k.14 }}</td>
                                        <td>{{ k.15 }}</td>
                                        <td>{{ k.16 }}</td>
                                        <td>{{ k.17 }}</td>
                                        <td>{{ k.18 }}</td>
                                        <td>{{ k.19 }}</td>
                                        <td>{{ k.20 }}</td>
                                        <td>{{ k.21 }}</td>
                                        <td>{{ k.22 }}</td>
                                        <td>{{ k.23 }}</td>
                                        <td>{{ k.24 }}</td>
                                        <td>{{ k.25 }}</td>
                                        <td>{{ k.26 }}</td>
                                        <td>{{ k.27 }}</td>
                                        <td>{{ k.28 }}</td>
                                        <td>{{ k.29 }}</td>
                                        <td>{{ k.30 }}</td>
                                        <td>{{ k.31 }}</td>
                                        <td>{{ k.32 }}</td>
                                        <td>{{ k.33 }}</td>
                                        <td>{{ k.34 }}</td>
                                        <td>{{ k.35 }}</td>
                                        <td>{{ k.36 }}</td>
                                    </tr>
                                {% endif %}
                            {% empty %}
                                <tr>
                                    <td colspan="36" style="text-align: center;">Tidak ada data untuk bulan dan tahun yang dipilih.</td>
                                </tr>
                            {% endfor %}
                            <tr class="table-info font-weight-bold">
                                <td colspan="2">Total Harian</td>
                                {% for t in total_demak %}
                                    <td>{{ t }}</td>
                                {% endfor %}
                                <td>{{ jumlah_total_demak }}</td>
                            </tr>                            
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        {% endif %}
        <!-- Tabel WOK 2 -->
        {% if request.GET.wok_id == "2" or request.GET.wok_id == "x" or not request.GET.wok_id%}
        <div class="card shadow mb-4">
            <div class ="card-header py-3">
                <h2 class="m-0 font-weight-bold text-dark">WOK SEMARANG 2</h2>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                        <input type="text" id="searchSemarang2" onkeyup="searchTable('searchSemarang2', 'tableSemarang2')" placeholder="Cari nama..." class="form-control mb-3">                    
                    <table id="tableSemarang2" class="table table-bordered table-sm table-striped table-hover text-center" cellspacing="0" style="width:100%">
                        <thead class="thead-dark" style="background-color: #f0f0f0;">
                            <tr>
                                <!-- <th>ID PPB</th> -->
                                <th>SF ID</th>
                                <th>Nama</th>
                                <!-- <th>WOK</th> -->
                                <!-- <th>Tahun</th>
                                <th>Bulan</th> -->
                                <th>1</th>
                                <th>2</th>
                                <th>3</th>
                                <th>4</th>
                                <th>5</th>
                                <th>6</th>
                                <th>7</th>
                                <th>8</th>
                                <th>9</th>
                                <th>10</th>
                                <th>11</th>
                                <th>12</th>
                                <th>13</th>
                                <th>14</th>
                                <th>15</th>
                                <th>16</th>
                                <th>17</th>
                                <th>18</th>
                                <th>19</th>
                                <th>20</th>
                                <th>21</th>
                                <th>22</th>
                                <th>23</th>
                                <th>24</th>
                                <th>25</th>
                                <th>26</th>
                                <th>27</th>
                                <th>28</th>
                                <th>29</th>
                                <th>30</th>
                                <th>31</th>
                                <th>Total PSB</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for k in momkaryawan %}
                                {% if k.37 == "SEMARANG 2" %}
                                    <tr>
                                        <!-- <td>{{ k.0 }}</td> -->
                                        <td>{{ k.1 }}</td>
                                        <td>{{ k.2 }}</td>
                                        <!-- <td>{{ k.37 }}</td>
                                        <td>{{ k.3 }}</td>
                                        <td>{{ k.4 }}</td> -->
                                        <td>{{ k.5 }}</td>
                                        <td>{{ k.6 }}</td>
                                        <td>{{ k.7 }}</td>
                                        <td>{{ k.8 }}</td>
                                        <td>{{ k.9 }}</td>
                                        <td>{{ k.10 }}</td>
                                        <td>{{ k.11 }}</td>
                                        <td>{{ k.12 }}</td>
                                        <td>{{ k.13 }}</td>
                                        <td>{{ k.14 }}</td>
                                        <td>{{ k.15 }}</td>
                                        <td>{{ k.16 }}</td>
                                        <td>{{ k.17 }}</td>
                                        <td>{{ k.18 }}</td>
                                        <td>{{ k.19 }}</td>
                                        <td>{{ k.20 }}</td>
                                        <td>{{ k.21 }}</td>
                                        <td>{{ k.22 }}</td>
                                        <td>{{ k.23 }}</td>
                                        <td>{{ k.24 }}</td>
                                        <td>{{ k.25 }}</td>
                                        <td>{{ k.26 }}</td>
                                        <td>{{ k.27 }}</td>
                                        <td>{{ k.28 }}</td>
                                        <td>{{ k.29 }}</td>
                                        <td>{{ k.30 }}</td>
                                        <td>{{ k.31 }}</td>
                                        <td>{{ k.32 }}</td>
                                        <td>{{ k.33 }}</td>
                                        <td>{{ k.34 }}</td>
                                        <td>{{ k.35 }}</td>
                                        <td>{{ k.36 }}</td>
                                    </tr>
                                {% endif %}
                            {% empty %}
                                <tr>
                                    <td colspan="36" style="text-align: center;">Tidak ada data untuk bulan dan tahun yang dipilih.</td>
                                </tr>
                            {% endfor %}
                            <tr class="table-info font-weight-bold">
                                <td colspan="2">Total Harian</td>
                                {% for t in total_semarang %}
                                    <td>{{ t }}</td>
                                {% endfor %}
                                <td>{{ jumlah_total_semarang }}</td>
                            </tr>                            
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        {% endif %}
        <!-- Tabel WOK 3 -->
        {% if request.GET.wok_id == "3" or request.GET.wok_id == "x" or not request.GET.wok_id %}
        <div class="card shadow mb-4">
            <div class ="card-header py-3">
                <h2 class="m-0 font-weight-bold text-dark">WOK SURAKARTA</h2>
            </div>
            <div class="card-body">
                    <input type="text" id="searchSurakarta" onkeyup="searchTable('searchSurakarta', 'tableSurakarta')" placeholder="Cari nama..." class="form-control mb-3">
                    <table id="tableSurakarta" class="table table-bordered table-sm table-striped table-hover text-center" cellspacing="0" >
                        <thead class="thead-dark" style="background-color: #f0f0f0;">
                            <tr>
                                <!-- <th>ID PPB</th> -->
                                <th>SF ID</th>
                                <th>Nama</th>
                                <!-- <th>WOK</th> -->
                                <!-- <th>Tahun</th>
                                <th>Bulan</th> -->
                                <th>1</th>
                                <th>2</th>
                                <th>3</th>
                                <th>4</th>
                                <th>5</th>
                                <th>6</th>
                                <th>7</th>
                                <th>8</th>
                                <th>9</th>
                                <th>10</th>
                                <th>11</th>
                                <th>12</th>
                                <th>13</th>
                                <th>14</th>
                                <th>15</th>
                                <th>16</th>
                                <th>17</th>
                                <th>18</th>
                                <th>19</th>
                                <th>20</th>
                                <th>21</th>
                                <th>22</th>
                                <th>23</th>
                                <th>24</th>
                                <th>25</th>
                                <th>26</th>
                                <th>27</th>
                                <th>28</th>
                                <th>29</th>
                                <th>30</th>
                                <th>31</th>
                                <th>Total PSB</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for k in momkaryawan %}
                                {% if k.37 == "SURAKARTA" %}
                                    <tr>
                                        <!-- <td>{{ k.0 }}</td> -->
                                        <td>{{ k.1 }}</td>
                                        <td>{{ k.2 }}</td>
                                        <!-- <td>{{ k.37 }}</td>
                                        <td>{{ k.3 }}</td>
                                        <td>{{ k.4 }}</td> -->
                                        <td>{{ k.5 }}</td>
                                        <td>{{ k.6 }}</td>
                                        <td>{{ k.7 }}</td>
                                        <td>{{ k.8 }}</td>
                                        <td>{{ k.9 }}</td>
                                        <td>{{ k.10 }}</td>
                                        <td>{{ k.11 }}</td>
                                        <td>{{ k.12 }}</td>
                                        <td>{{ k.13 }}</td>
                                        <td>{{ k.14 }}</td>
                                        <td>{{ k.15 }}</td>
                                        <td>{{ k.16 }}</td>
                                        <td>{{ k.17 }}</td>
                                        <td>{{ k.18 }}</td>
                                        <td>{{ k.19 }}</td>
                                        <td>{{ k.20 }}</td>
                                        <td>{{ k.21 }}</td>
                                        <td>{{ k.22 }}</td>
                                        <td>{{ k.23 }}</td>
                                        <td>{{ k.24 }}</td>
                                        <td>{{ k.25 }}</td>
                                        <td>{{ k.26 }}</td>
                                        <td>{{ k.27 }}</td>
                                        <td>{{ k.28 }}</td>
                                        <td>{{ k.29 }}</td>
                                        <td>{{ k.30 }}</td>
                                        <td>{{ k.31 }}</td>
                                        <td>{{ k.32 }}</td>
                                        <td>{{ k.33 }}</td>
                                        <td>{{ k.34 }}</td>
                                        <td>{{ k.35 }}</td>
                                        <td>{{ k.36 }}</td>
                                    </tr>
                                {% endif %}
                            {% empty %}
                                <tr>
                                    <td colspan="36" style="text-align: center;">Tidak ada data untuk bulan dan tahun yang dipilih.</td>
                                </tr>
                            {% endfor %}
                            <tr class="table-info font-weight-bold">
                                <td colspan="2">Total Harian</td>
                                {% for t in total_solo %}
                                    <td>{{ t }}</td>
                                {% endfor %}
                                <td>{{ jumlah_total_solo }}</td>
                            </tr>                            
                        </tbody>
                    </table> 
                </div>
            </div>
        </div>
        {% endif %}    
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    function searchTable(inputId, tableId) {
        var input, filter, table, tr, td, i, txtValue;
        input = document.getElementById(inputId);
        filter = input.value.toUpperCase();
        table = document.getElementById(tableId);
        tr = table.getElementsByTagName("tr");
    
        for (i = 1; i < tr.length; i++) { // mulai dari 1 untuk lewati header
            td = tr[i].getElementsByTagName("td")[1]; // kolom ke-2 = Nama
            if (td) {
                txtValue = td.textContent || td.innerText;
                tr[i].style.display = txtValue.toUpperCase().indexOf(filter) > -1 ? "" : "none";
            }
        }
    }
</script>
    
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Mendapatkan tanggal saat ini
        const today = new Date();
        
        // Mendapatkan tahun dan bulan saat ini
        const currentYear = today.getFullYear();
        const currentMonth = String(today.getMonth() + 1).padStart(2, '0'); // Bulan mulai dari 0, jadi tambahkan 1
        
        // Setel nilai default untuk select box
        const yearSelect = document.getElementById('year');
        const monthSelect = document.getElementById('month');
        
        // Jika tidak ada nilai yang dipilih (misalnya saat pertama kali memuat), pilih tahun dan bulan saat ini
        if (!yearSelect.value) {
            yearSelect.value = currentYear;
        }
        if (!monthSelect.value) {
            monthSelect.value = currentMonth;
        }

        if (wokSelect && !wokSelect.value) {
            wokSelect.value = 'x';
            // Auto-submit form (hanya jika belum dipilih sebelumnya)
            wokSelect.form.submit();
        }
    });


    window.addEventListener('DOMContentLoaded', function () {
        const urlParams = new URLSearchParams(window.location.search);
        if (!urlParams.has('wok_id')) {
            document.getElementById('filterForm').submit();
        }
    });
</script>


{% endblock %}