{% extends "layout/ver_baru/base_admin.html" %}
{% block title %}Daily TL - CWN{% endblock %}
{% block content %}
{% load static %}

<div class="container mx-auto p-6">
  <!-- Judul -->
  <h1 class="text-center text-white p-3 rounded mb-6 mt-4 bg-red-700 font-bold text-xl">
    DATA PER BULAN
  </h1>

  <!-- Card Filter -->
  <div class="flex justify-center mt-6">
    <div class="bg-white shadow-md rounded-lg w-full max-w-3xl p-6">
      <form method="GET" action="" id="filterForm" class="flex flex-wrap gap-4 items-end justify-between">
        
        <!-- Pilihan WOK -->
        <div class="flex flex-col flex-1 min-w-[150px]">
          {% if request.session.role == 'Team Leader' %}
            <input type="text" class="border border-gray-300 rounded-md p-2 bg-gray-100" 
                  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="border border-gray-300 rounded-md p-2 bg-gray-100" 
                  value="{{ request.session.wok_mitra }}" readonly>
            <input type="hidden" name="wok_id" value="{{ request.session.wok_mitra }}">
          {% else %}
            <label for="wok_id" class="font-semibold mb-1">Wilayah Operasional</label>
            <select name="wok_id" id="wok_id" class="border border-gray-300 rounded-md p-2"
                    onchange="this.form.submit()">
              <option value="x" {% if selected_wok == 'x' %}selected{% endif %}>-- Pilih WOK --</option>
              {% for wok in woks %}
                <option value="{{ wok.wok_id }}" {% if selected_wok == wok.wok_id|stringformat:"s" %}selected{% endif %}>
                  {{ wok.wok_name }}
                </option>
              {% endfor %}
            </select>
          {% endif %}
        </div>

        <!-- Tahun -->
        <div class="flex flex-col flex-1 min-w-[120px]">
          <label for="year" class="font-semibold mb-1">Tahun</label>
          <select name="year" id="year" class="border border-gray-300 rounded-md p-2">
            <option value="">-- Pilih Tahun --</option>
            {% for y in years %}
              <option value="{{ y }}" {% if selected_year == y|stringformat:"s" %}selected{% endif %}>{{ y }}</option>
            {% endfor %}
          </select>
        </div>

        <!-- Bulan -->
        <div class="flex flex-col flex-1 min-w-[150px]">
          <label for="month" class="font-semibold mb-1">Bulan</label>
          <select name="month" id="month" class="border border-gray-300 rounded-md p-2">
            <option value="">-- Pilih Bulan --</option>
            {% for m in months %}
              <option value="{{ m.value }}" {% if selected_month == m.value %}selected{% endif %}>
                {{ m.label }}
              </option>
            {% endfor %}
          </select>
        </div>

        <!-- Tombol -->
        <div class="flex-shrink-0">
          <button type="submit"
                  class="bg-red-700 text-white px-4 py-2 rounded-md hover:bg-red-800 flex items-center gap-2">
            <i class="fas fa-filter"></i> Filter
          </button>
        </div>
      </form>
    </div>
  </div>

  <!-- Tabel Data -->
  <div class="overflow-x-auto mt-6 space-y-6" id="mom-data-container">

    <!-- ================= DEMAK ================= -->
    {% if request.GET.wok_id == "1" or request.GET.wok_id == "x" or not request.GET.wok_id %}
    <div class="bg-white shadow-md rounded-lg">
      <div class="border-b-2 border-red-700 px-4 py-2">
        <h2 class="font-bold text-lg text-gray-800">WOK DEMAK</h2>
      </div>
      <div class="p-4">
        <input type="text" id="search-demak"
               onkeyup="searchTable('search-demak','table-demak')"
               placeholder="Cari Nama..."
               class="border border-gray-300 rounded-md p-2 mb-4 w-full">

        <div class="w-full overflow-x-auto">
          <div class="max-w-[1000px]">
            <table class="min-w-full border border-gray-300 text-center text-xs" id="table-demak">
              <thead class="bg-gray-100 text-gray-700">
                <tr>
                  <th class="border px-2 py-1">TL ID</th>
                  <th class="border px-2 py-1">Nama</th>
                  <th class="border px-2 py-1">1</th>
                  <th class="border px-2 py-1">2</th>
                  <th class="border px-2 py-1">3</th>
                  <th class="border px-2 py-1">4</th>
                  <th class="border px-2 py-1">5</th>
                  <th class="border px-2 py-1">6</th>
                  <th class="border px-2 py-1">7</th>
                  <th class="border px-2 py-1">8</th>
                  <th class="border px-2 py-1">9</th>
                  <th class="border px-2 py-1">10</th>
                  <th class="border px-2 py-1">11</th>
                  <th class="border px-2 py-1">12</th>
                  <th class="border px-2 py-1">13</th>
                  <th class="border px-2 py-1">14</th>
                  <th class="border px-2 py-1">15</th>
                  <th class="border px-2 py-1">16</th>
                  <th class="border px-2 py-1">17</th>
                  <th class="border px-2 py-1">18</th>
                  <th class="border px-2 py-1">19</th>
                  <th class="border px-2 py-1">20</th>
                  <th class="border px-2 py-1">21</th>
                  <th class="border px-2 py-1">22</th>
                  <th class="border px-2 py-1">23</th>
                  <th class="border px-2 py-1">24</th>
                  <th class="border px-2 py-1">25</th>
                  <th class="border px-2 py-1">26</th>
                  <th class="border px-2 py-1">27</th>
                  <th class="border px-2 py-1">28</th>
                  <th class="border px-2 py-1">29</th>
                  <th class="border px-2 py-1">30</th>
                  <th class="border px-2 py-1">31</th>
                  <th class="border px-2 py-1">Total PSB</th>
                </tr>
              </thead>
              <tbody>
                {% for k in momkaryawan %}
                  {% if k.tl.wok.wok_name == "DEMAK" %}
                  <tr class="hover:bg-gray-50">
                    <td class="border px-2 py-1">{{ k.tl.tl_id }}</td>
                    <td class="border px-2 py-1">{{ k.tl.user_name }}</td>
                    <td class="border px-2 py-1">{{ k.day_1 }}</td>
                    <td class="border px-2 py-1">{{ k.day_2 }}</td>
                    <td class="border px-2 py-1">{{ k.day_3 }}</td>
                    <td class="border px-2 py-1">{{ k.day_4 }}</td>
                    <td class="border px-2 py-1">{{ k.day_5 }}</td>
                    <td class="border px-2 py-1">{{ k.day_6 }}</td>
                    <td class="border px-2 py-1">{{ k.day_7 }}</td>
                    <td class="border px-2 py-1">{{ k.day_8 }}</td>
                    <td class="border px-2 py-1">{{ k.day_9 }}</td>
                    <td class="border px-2 py-1">{{ k.day_10 }}</td>
                    <td class="border px-2 py-1">{{ k.day_11 }}</td>
                    <td class="border px-2 py-1">{{ k.day_12 }}</td>
                    <td class="border px-2 py-1">{{ k.day_13 }}</td>
                    <td class="border px-2 py-1">{{ k.day_14 }}</td>
                    <td class="border px-2 py-1">{{ k.day_15 }}</td>
                    <td class="border px-2 py-1">{{ k.day_16 }}</td>
                    <td class="border px-2 py-1">{{ k.day_17 }}</td>
                    <td class="border px-2 py-1">{{ k.day_18 }}</td>
                    <td class="border px-2 py-1">{{ k.day_19 }}</td>
                    <td class="border px-2 py-1">{{ k.day_20 }}</td>
                    <td class="border px-2 py-1">{{ k.day_21 }}</td>
                    <td class="border px-2 py-1">{{ k.day_22 }}</td>
                    <td class="border px-2 py-1">{{ k.day_23 }}</td>
                    <td class="border px-2 py-1">{{ k.day_24 }}</td>
                    <td class="border px-2 py-1">{{ k.day_25 }}</td>
                    <td class="border px-2 py-1">{{ k.day_26 }}</td>
                    <td class="border px-2 py-1">{{ k.day_27 }}</td>
                    <td class="border px-2 py-1">{{ k.day_28 }}</td>
                    <td class="border px-2 py-1">{{ k.day_29 }}</td>
                    <td class="border px-2 py-1">{{ k.day_30 }}</td>
                    <td class="border px-2 py-1">{{ k.day_31 }}</td>
                    <td class="border px-2 py-1">{{ k.total_psb }}</td>
                  </tr>
                  {% endif %}
                {% empty %}
                  <tr>
                    <td colspan="33" class="text-center py-3">Tidak ada data untuk bulan dan tahun yang dipilih.</td>
                  </tr>
                {% endfor %}
                <tr class="bg-red-50 font-semibold">
                  <td colspan="2" class="border px-2 py-1">Total Harian</td>
                  {% for t in total_demak %}
                  <td class="border px-2 py-1">{{ t }}</td>
                  {% endfor %}
                  <td class="border px-2 py-1">{{ jumlah_total_demak }}</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
    {% endif %}

    <!-- ================= SEMARANG 2 ================= -->
    <!-- ... blok sama persis, ganti "WOK SEMARANG 2", total_semarang, jumlah_total_semarang ... -->

    {% if request.GET.wok_id == "2" or request.GET.wok_id == "x" or not request.GET.wok_id %}
    <div class="bg-white shadow-md rounded-lg">
      <div class="border-b-2 border-red-700 px-4 py-2">
        <h2 class="font-bold text-lg text-gray-800">WOK SEMARANG 2</h2>
      </div>
      <div class="p-4">
        <input type="text" id="search-semarang"
               onkeyup="searchTable('search-semarang','table-semarang')"
               placeholder="Cari Nama..."
               class="border border-gray-300 rounded-md p-2 mb-4 w-full">

        <div class="w-full overflow-x-auto">
          <div class="max-w-[1000px]">
            <table class="min-w-full border border-gray-300 text-center text-xs" id="table-semarang">
              <thead class="bg-gray-100 text-gray-700">
                <tr>
                  <th class="border px-2 py-1">TL ID</th>
                  <th class="border px-2 py-1">Nama</th>
                  <th class="border px-2 py-1">1</th>
                  <th class="border px-2 py-1">2</th>
                  <th class="border px-2 py-1">3</th>
                  <th class="border px-2 py-1">4</th>
                  <th class="border px-2 py-1">5</th>
                  <th class="border px-2 py-1">6</th>
                  <th class="border px-2 py-1">7</th>
                  <th class="border px-2 py-1">8</th>
                  <th class="border px-2 py-1">9</th>
                  <th class="border px-2 py-1">10</th>
                  <th class="border px-2 py-1">11</th>
                  <th class="border px-2 py-1">12</th>
                  <th class="border px-2 py-1">13</th>
                  <th class="border px-2 py-1">14</th>
                  <th class="border px-2 py-1">15</th>
                  <th class="border px-2 py-1">16</th>
                  <th class="border px-2 py-1">17</th>
                  <th class="border px-2 py-1">18</th>
                  <th class="border px-2 py-1">19</th>
                  <th class="border px-2 py-1">20</th>
                  <th class="border px-2 py-1">21</th>
                  <th class="border px-2 py-1">22</th>
                  <th class="border px-2 py-1">23</th>
                  <th class="border px-2 py-1">24</th>
                  <th class="border px-2 py-1">25</th>
                  <th class="border px-2 py-1">26</th>
                  <th class="border px-2 py-1">27</th>
                  <th class="border px-2 py-1">28</th>
                  <th class="border px-2 py-1">29</th>
                  <th class="border px-2 py-1">30</th>
                  <th class="border px-2 py-1">31</th>
                  <th class="border px-2 py-1">Total PSB</th>
                </tr>
              </thead>
              <tbody>
                {% for k in momkaryawan %}
                  {% if k.tl.wok.wok_name == "SEMARANG 2" %}
                  <tr class="hover:bg-gray-50">
                    <td class="border px-2 py-1">{{ k.tl.tl_id }}</td>
                    <td class="border px-2 py-1">{{ k.tl.user_name }}</td>
                    <td class="border px-2 py-1">{{ k.day_1 }}</td>
                    <td class="border px-2 py-1">{{ k.day_2 }}</td>
                    <td class="border px-2 py-1">{{ k.day_3 }}</td>
                    <td class="border px-2 py-1">{{ k.day_4 }}</td>
                    <td class="border px-2 py-1">{{ k.day_5 }}</td>
                    <td class="border px-2 py-1">{{ k.day_6 }}</td>
                    <td class="border px-2 py-1">{{ k.day_7 }}</td>
                    <td class="border px-2 py-1">{{ k.day_8 }}</td>
                    <td class="border px-2 py-1">{{ k.day_9 }}</td>
                    <td class="border px-2 py-1">{{ k.day_10 }}</td>
                    <td class="border px-2 py-1">{{ k.day_11 }}</td>
                    <td class="border px-2 py-1">{{ k.day_12 }}</td>
                    <td class="border px-2 py-1">{{ k.day_13 }}</td>
                    <td class="border px-2 py-1">{{ k.day_14 }}</td>
                    <td class="border px-2 py-1">{{ k.day_15 }}</td>
                    <td class="border px-2 py-1">{{ k.day_16 }}</td>
                    <td class="border px-2 py-1">{{ k.day_17 }}</td>
                    <td class="border px-2 py-1">{{ k.day_18 }}</td>
                    <td class="border px-2 py-1">{{ k.day_19 }}</td>
                    <td class="border px-2 py-1">{{ k.day_20 }}</td>
                    <td class="border px-2 py-1">{{ k.day_21 }}</td>
                    <td class="border px-2 py-1">{{ k.day_22 }}</td>
                    <td class="border px-2 py-1">{{ k.day_23 }}</td>
                    <td class="border px-2 py-1">{{ k.day_24 }}</td>
                    <td class="border px-2 py-1">{{ k.day_25 }}</td>
                    <td class="border px-2 py-1">{{ k.day_26 }}</td>
                    <td class="border px-2 py-1">{{ k.day_27 }}</td>
                    <td class="border px-2 py-1">{{ k.day_28 }}</td>
                    <td class="border px-2 py-1">{{ k.day_29 }}</td>
                    <td class="border px-2 py-1">{{ k.day_30 }}</td>
                    <td class="border px-2 py-1">{{ k.day_31 }}</td>
                    <td class="border px-2 py-1">{{ k.total_psb }}</td>
                  </tr>
                  {% endif %}
                {% empty %}
                  <tr>
                    <td colspan="33" class="text-center py-3">Tidak ada data untuk bulan dan tahun yang dipilih.</td>
                  </tr>
                {% endfor %}
                <tr class="bg-red-50 font-semibold">
                  <td colspan="2" class="border px-2 py-1">Total Harian</td>
                  {% for t in total_semarang %}
                  <td class="border px-2 py-1">{{ t }}</td>
                  {% endfor %}
                  <td class="border px-2 py-1">{{ jumlah_total_semarang }}</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
    {% endif %}

    <!-- ================= SURAKARTA ================= -->
    <!-- ... blok sama persis, ganti "WOK SURAKARTA", total_solo, jumlah_total_solo ... -->

    {% if request.GET.wok_id == "3" or request.GET.wok_id == "x" or not request.GET.wok_id %}
    <div class="bg-white shadow-md rounded-lg">
      <div class="border-b-2 border-red-700 px-4 py-2">
        <h2 class="font-bold text-lg text-gray-800">WOK SURAKARTA</h2>
      </div>
      <div class="p-4 overflow-x-auto w-full">
        <input type="text" id="search-solo"
               onkeyup="searchTable('search-solo','table-solo')"
               placeholder="Cari Nama..."
               class="border border-gray-300 rounded-md p-2 mb-4 w-full">

        <div class="overflow-x-auto">
          <div class="max-w-[1000px]">
            <table class="min-w-full border border-gray-300 text-center text-xs" id="table-solo">
              <thead class="bg-gray-100 text-gray-700">
                <tr>
                  <th class="border px-2 py-1">TL ID</th>
                  <th class="border px-2 py-1">Nama</th>
                  <th class="border px-2 py-1">1</th>
                  <th class="border px-2 py-1">2</th>
                  <th class="border px-2 py-1">3</th>
                  <th class="border px-2 py-1">4</th>
                  <th class="border px-2 py-1">5</th>
                  <th class="border px-2 py-1">6</th>
                  <th class="border px-2 py-1">7</th>
                  <th class="border px-2 py-1">8</th>
                  <th class="border px-2 py-1">9</th>
                  <th class="border px-2 py-1">10</th>
                  <th class="border px-2 py-1">11</th>
                  <th class="border px-2 py-1">12</th>
                  <th class="border px-2 py-1">13</th>
                  <th class="border px-2 py-1">14</th>
                  <th class="border px-2 py-1">15</th>
                  <th class="border px-2 py-1">16</th>
                  <th class="border px-2 py-1">17</th>
                  <th class="border px-2 py-1">18</th>
                  <th class="border px-2 py-1">19</th>
                  <th class="border px-2 py-1">20</th>
                  <th class="border px-2 py-1">21</th>
                  <th class="border px-2 py-1">22</th>
                  <th class="border px-2 py-1">23</th>
                  <th class="border px-2 py-1">24</th>
                  <th class="border px-2 py-1">25</th>
                  <th class="border px-2 py-1">26</th>
                  <th class="border px-2 py-1">27</th>
                  <th class="border px-2 py-1">28</th>
                  <th class="border px-2 py-1">29</th>
                  <th class="border px-2 py-1">30</th>
                  <th class="border px-2 py-1">31</th>
                  <th class="border px-2 py-1">Total PSB</th>
                </tr>
              </thead>
              <tbody>
                {% for k in momkaryawan %}
                  {% if k.tl.wok.wok_name == "SURAKARTA" %}
                  <tr class="hover:bg-gray-50">
                    <td class="border px-2 py-1">{{ k.tl.tl_id }}</td>
                    <td class="border px-2 py-1">{{ k.tl.user_name }}</td>
                    <td class="border px-2 py-1">{{ k.day_1 }}</td>
                    <td class="border px-2 py-1">{{ k.day_2 }}</td>
                    <td class="border px-2 py-1">{{ k.day_3 }}</td>
                    <td class="border px-2 py-1">{{ k.day_4 }}</td>
                    <td class="border px-2 py-1">{{ k.day_5 }}</td>
                    <td class="border px-2 py-1">{{ k.day_6 }}</td>
                    <td class="border px-2 py-1">{{ k.day_7 }}</td>
                    <td class="border px-2 py-1">{{ k.day_8 }}</td>
                    <td class="border px-2 py-1">{{ k.day_9 }}</td>
                    <td class="border px-2 py-1">{{ k.day_10 }}</td>
                    <td class="border px-2 py-1">{{ k.day_11 }}</td>
                    <td class="border px-2 py-1">{{ k.day_12 }}</td>
                    <td class="border px-2 py-1">{{ k.day_13 }}</td>
                    <td class="border px-2 py-1">{{ k.day_14 }}</td>
                    <td class="border px-2 py-1">{{ k.day_15 }}</td>
                    <td class="border px-2 py-1">{{ k.day_16 }}</td>
                    <td class="border px-2 py-1">{{ k.day_17 }}</td>
                    <td class="border px-2 py-1">{{ k.day_18 }}</td>
                    <td class="border px-2 py-1">{{ k.day_19 }}</td>
                    <td class="border px-2 py-1">{{ k.day_20 }}</td>
                    <td class="border px-2 py-1">{{ k.day_21 }}</td>
                    <td class="border px-2 py-1">{{ k.day_22 }}</td>
                    <td class="border px-2 py-1">{{ k.day_23 }}</td>
                    <td class="border px-2 py-1">{{ k.day_24 }}</td>
                    <td class="border px-2 py-1">{{ k.day_25 }}</td>
                    <td class="border px-2 py-1">{{ k.day_26 }}</td>
                    <td class="border px-2 py-1">{{ k.day_27 }}</td>
                    <td class="border px-2 py-1">{{ k.day_28 }}</td>
                    <td class="border px-2 py-1">{{ k.day_29 }}</td>
                    <td class="border px-2 py-1">{{ k.day_30 }}</td>
                    <td class="border px-2 py-1">{{ k.day_31 }}</td>
                    <td class="border px-2 py-1">{{ k.total_psb }}</td>
                  </tr>
                  {% endif %}
                {% empty %}
                  <tr>
                    <td colspan="33" class="text-center py-3">Tidak ada data untuk bulan dan tahun yang dipilih.</td>
                  </tr>
                {% endfor %}
                <tr class="bg-red-50 font-semibold">
                  <td colspan="2" class="border px-2 py-1">Total Harian</td>
                  {% for t in total_solo %}
                  <td class="border px-2 py-1">{{ t }}</td>
                  {% endfor %}
                  <td class="border px-2 py-1">{{ jumlah_total_solo }}</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
    {% endif %}

  </div>
</div>

{% endblock %}