{% extends "layout/ver_baru/base_admin.html" %}
{% load humanize %}
{% block title %}Fee Sales - CWN{% endblock %}

{% block content %}
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
  <h2 class="text-center text-white p-3 rounded mb-6 mt-4 bg-red-700 text-xl font-bold">Estimasi Fee Sales</h2>

  <!-- Filter Form -->
  <div class="bg-white shadow rounded-lg mb-6 w-full md:w-1/2 mx-auto">
    <div class="p-6">
      <form method="get" class="grid grid-cols-1 md:grid-cols-3 gap-4">
        <div>
          <label for="tahun" class="block text-sm font-medium text-gray-700 mb-1">Tahun</label>
          <select name="tahun" id="tahun" class="w-full border rounded-lg p-2">
            <option value="">-</option>
            <option value="2025" {% if selected_year == "2025" %}selected{% endif %}>2025</option>
            <option value="2024" {% if selected_year == "2024" %}selected{% endif %}>2024</option>
          </select>
        </div>
        <div>
          <label for="bulan" class="block text-sm font-medium text-gray-700 mb-1">Bulan</label>
          <select name="bulan" id="bulan" class="w-full border rounded-lg p-2">
            <option value="">-</option>
            {% for b in bulan_options %}
              <option value="{{ b.num }}" {% if selected_bulan == b.num %}selected{% endif %}>{{ b.name }}</option>
            {% endfor %}
          </select>
        </div>
        <div>
          <label for="wok" class="block text-sm font-medium text-gray-700 mb-1">WOK</label>
          <select name="wok" id="wok" class="w-full border rounded-lg p-2">
            <option value="">Pilih WOK</option>
            {% for wok in woks %}
              <option value="{{ wok.wok_id }}" {% if wok.wok_id == selected_wok %}selected{% endif %}>{{ wok.wok_name }}</option>
            {% endfor %}
          </select>
        </div>
        <div class="md:col-span-3">
          <button type="submit" class="w-full bg-red-600 text-white py-2 px-4 rounded-lg hover:bg-red-700">Filter</button>
        </div>
      </form>
    </div>
  </div>

  <!-- Fee Sales Table -->
  <div class="bg-white shadow rounded-lg mb-6">
    <div class="px-6 py-4 bg-red-700 rounded-t-lg flex flex-col md:flex-row md:items-center md:justify-between gap-3">
      <h6 class="text-white font-bold">Fee Sales Force </h6>
      <form method="get" class="flex flex-col md:flex-row gap-2 w-full md:w-2/3">
        <input type="hidden" name="tahun" value="{{ selected_year }}">
        <input type="hidden" name="bulan" value="{{ selected_bulan }}">
        <input type="hidden" name="wok" value="{{ selected_wok }}">
        <input type="text" name="search" value="{{ search }}" class="border rounded-lg p-2 w-full md:w-1/2" placeholder="Cari SF...">
        <select name="tl" class="border rounded-lg p-2 w-full md:w-1/2">
          <option value="">Semua TL</option>
          {% for tl in tl_options %}
            <option value="{{ tl.user_name }}" {% if selected_tl == tl.user_name %}selected{% endif %}>{{ tl.user_name }}</option>
          {% endfor %}
        </select>
        <button type="submit" class="bg-white text-red-700 border px-3 py-1 rounded">Cari</button>
      </form>
    </div>
    <div class="p-4">
      {% if hasil_fee_sales %}
      <div class="overflow-x-auto">
        <table class="min-w-full text-sm border border-gray-200" id="sfTable">
          <thead class="bg-gray-100 text-gray-700">
            <tr>
              <th class="px-3 py-2 border">No</th>
              <th class="px-3 py-2 border">Nama SF</th>
              <th class="px-3 py-2 border">Team Leader</th>
              <th class="px-3 py-2 border">
                <a href="?tahun={{ selected_year }}&bulan={{ selected_bulan }}&wok={{ selected_wok }}&search={{ search }}&tl={{ selected_tl }}&sort=ps&order={% if sort == 'ps' and order == 'asc' %}desc{% else %}asc{% endif %}">
                  Jumlah PS {% if sort == "ps" %}{% if order == "asc" %}⇧{% else %}⇩{% endif %}{% endif %}
              </a>
              </th>
              <th class="px-3 py-2 border">
                <a href="?tahun={{ selected_year }}&bulan={{ selected_bulan }}&wok={{ selected_wok }}&search={{ search }}&tl={{ selected_tl }}&sort=total&order={% if sort == 'total' and order == 'asc' %}desc{% else %}asc{% endif %}">
                  Total {% if sort == "total" %}{% if order == "asc" %}⇧{% else %}⇩{% endif %}{% endif %}
                </a>
              </th>
              <th class="px-3 py-2 border">Rekening</th>
            </tr>
          </thead>
          <tbody>
            {% for row in hasil_fee_sales %}
            <tr class="hover:bg-gray-50 cursor-pointer" data-filtered="true"
              onclick="showDetail(this)"
              data-sf_id="{{ row.sf_id }}"
              data-user_name="{{ row.user_name }}"
              data-rekening="{{ row.rekening }}"
              data-sf_tl_nama="{{ row.sf_tl_nama }}"
              data-ps="{{ row.ps }}"
              data-fee_ps="{{ row.fee_ps|intcomma }}"
              data-fee_ditahan_10="{{ row.fee_ditahan_10|intcomma }}"
              data-pph_2="{{ row.pph_2|intcomma }}"
              data-thp_total="{{ row.thp_total|intcomma }}"
              data-bon="{{ row.bon|intcomma }}"
              data-total="{{ row.total|intcomma }}"
              data-tahun="{{ row.tahun }}"
              data-bulan="{{ row.bulan }}"
              data-pengembalian_10="{{ row.pengembalian_10|default_if_none:0|intcomma }}"
              data-billper="{{ row.billper|default_if_none:0|intcomma }}"
              data-billdu="{{ row.billdu|default_if_none:0|intcomma }}"
              data-pengembalian_billdu="{{ row.pengembalian_billdu|default_if_none:0|intcomma }}"
              data-potongan_lainnya="{{ row.potongan_lainnya|default_if_none:0|intcomma }}">
              <td class="px-3 py-2 border text-center">{{ forloop.counter }}</td>
              <td class="px-3 py-2 border">{{ row.user_name }}</td>
              <td class="px-3 py-2 border">{{ row.sf_tl_nama }}</td>
              <td class="px-3 py-2 border text-center">{{ row.ps }}</td>
              <td class="px-3 py-2 border text-right font-bold">{{ row.total|intcomma }}</td>
              <td class="px-3 py-2 border">{{ row.rekening }}</td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
        <div class="flex justify-center mt-4 space-x-2">
          {% if page_obj.has_previous %}
            <a href="?page={{ page_obj.previous_page_number }}&tahun={{ selected_year }}&bulan={{ selected_bulan }}&wok={{ selected_wok }}&search={{ search }}&tl={{ selected_tl }}&sort={{ sort }}&order={{ order }}"
              class="px-3 py-1 border rounded hover:bg-gray-200">«</a>
          {% endif %}

          {% for i in page_obj.paginator.page_range %}
            {% if i >= page_obj.number|add:'-2' and i <= page_obj.number|add:'2' %}
              {% if i == page_obj.number %}
                <span class="px-3 py-1 bg-red-600 text-white rounded">{{ i }}</span>
              {% else %}
                <a href="?page={{ i }}&tahun={{ selected_year }}&bulan={{ selected_bulan }}&wok={{ selected_wok }}&search={{ search }}&tl={{ selected_tl }}&sort={{ sort }}&order={{ order }}"
                  class="px-3 py-1 border rounded hover:bg-gray-200">{{ i }}</a>
              {% endif %}
            {% endif %}
          {% endfor %}

          {% if page_obj.has_next %}
            <a href="?page={{ page_obj.next_page_number }}&tahun={{ selected_year }}&bulan={{ selected_bulan }}&wok={{ selected_wok }}&search={{ search }}&tl={{ selected_tl }}&sort={{ sort }}&order={{ order }}"
              class="px-3 py-1 border rounded hover:bg-gray-200">»</a>
          {% endif %}
        </div>
      </div>
      {% else %}
      <div class="p-4 bg-blue-100 text-blue-700 rounded">Silakan pilih Tahun, Bulan, dan WOK untuk menampilkan data.</div>
      {% endif %}
    </div>
  </div>

  <!-- Summary per WOK -->
  {% if summary_by_wok %}
    {% for wok_data in summary_by_wok %}
      <div class="bg-white shadow rounded-lg mb-6">
        <div class="px-6 py-3 bg-red-700 text-white font-bold rounded-t-lg">
          WOK: {{ wok_data.wok_name }} – Total Fee: Rp{{ wok_data.total_fee|intcomma }}
        </div>
        <div class="p-4">
          {% if wok_data.team_leaders %}
          <div class="overflow-x-auto">
            <table class="min-w-full text-sm border border-gray-200">
              <thead class="bg-gray-100 text-gray-700">
                <tr>
                  <th class="px-3 py-2 border">No</th>
                  <th class="px-3 py-2 border">Nama Team Leader</th>
                  <th class="px-3 py-2 border">Total Fee</th>
                </tr>
              </thead>
              <tbody>
                {% for tl in wok_data.team_leaders %}
                <tr class="hover:bg-gray-50">
                  <td class="px-3 py-2 border text-center">{{ forloop.counter }}</td>
                  <td class="px-3 py-2 border">{{ tl.tl_name }}</td>
                  <td class="px-3 py-2 border text-right font-bold">Rp{{ tl.total_fee|intcomma }}</td>
                </tr>
                {% endfor %}
              </tbody>
            </table>
          </div>
          {% else %}
          <div class="p-3 bg-yellow-100 text-yellow-700 rounded">Belum ada Team Leader dengan fee pada WOK ini.</div>
          {% endif %}
        </div>
      </div>
    {% endfor %}
  {% else %}
  <div class="p-4 bg-blue-100 text-blue-700 rounded text-center">Tidak ada data fee untuk bulan/tahun yang dipilih.</div>
  {% endif %}
</div>

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
function showDetail(row) {
    const data = row.dataset;

    Swal.fire({
        title: `Detail Fee ${data.user_name} – ${data.bulan}/${data.tahun}`,
        html: `
            <div style="text-align:left; font-size:14px; line-height:1.6">
                
                SF ID: ${data.sf_id}<br>
                Rekening: ${data.rekening}<br>
                Team Leader: ${data.sf_tl_nama}
                <hr>
                <strong>Fee dan Potongan</strong><br>
                Jumlah PS: ${data.ps}<br>
                Fee PS: Rp ${data.fee_ps}<br>
                Fee Ditahan 10%: Rp ${data.fee_ditahan_10}<br>
                PPH 2%: Rp ${data.pph_2}<br>
                THP: Rp ${data.thp_total}<br>
                Bon: Rp ${data.bon}<br>
                Potongan Lainnya: Rp ${data.potongan_lainnya}
                <hr>
                <strong>Billing dan Pengembalian</strong><br>
                Bill Pertama: Rp ${data.billper}<br>
                Bill Kedua: Rp ${data.billdu}<br>
                Pengembalian 10%: Rp ${data.pengembalian_10}<br>
                Pengembalian Bill Kedua: Rp ${data.pengembalian_billdu}
                <hr>
                <strong style="font-size: 15px;">Total Penerimaan: Rp ${data.total}</strong>
            </div>
        `,
        icon: 'info',
        confirmButtonText: 'Tutup',
        width: 600
    });

}
</script>
{% endblock %}