{% 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 mt-6">
  <h2 class="text-center text-white bg-red-600 p-3 rounded-lg mb-6 font-bold text-xl">
    Manajemen Fee Sales
  </h2>

  <!-- Filter Form -->
  <div class="bg-white shadow rounded-lg p-6 max-w-2xl mx-auto mb-8">
    <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 rounded-lg border-gray-300 shadow-sm focus:ring-red-500 focus:border-red-500">
          <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 rounded-lg border-gray-300 shadow-sm focus:ring-red-500 focus:border-red-500">
          <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 rounded-lg border-gray-300 shadow-sm focus:ring-red-500 focus:border-red-500">
          <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 font-medium px-4 py-2 rounded-lg hover:bg-red-700 transition">
          Filter
        </button>
      </div>
    </form>
  </div>

  <!-- Fee Sales Table -->
  <div class="bg-white shadow rounded-lg overflow-hidden mb-8">
    <div class="bg-red-600 p-4 flex flex-col md:flex-row gap-2 md:gap-4 justify-between items-center">
      <h6 class="text-white font-bold">Fee Sales Force</h6>
      <!-- 🔎 Form Search & Filter TL -->
      <form method="get" class="flex flex-col md:flex-row gap-2 md:gap-4 w-full md:w-2/3">
        <!-- keep filter utama -->
        <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="hidden" name="sort" value="{{ sort_field }}">
        <input type="hidden" name="order" value="{{ order }}">

        <!-- search SF -->
        <input type="text" name="search" value="{{ search }}" placeholder="Cari SF..." 
          class="rounded-lg border-gray-300 shadow-sm focus:ring-red-500 focus:border-red-500 px-3 py-2 w-full md:w-1/2">

        <!-- filter TL -->
        <select name="tl" class="rounded-lg border-gray-300 shadow-sm focus:ring-red-500 focus:border-red-500 px-3 py-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>

        <!-- tombol -->
        <button type="submit" class="bg-white text-red-600 font-semibold px-4 py-2 rounded-lg shadow hover:bg-gray-100">
          Cari
        </button>
      </form>
    </div>
    <div class="overflow-x-auto">
      {% if page_obj %}
      <table class="w-full text-sm text-left text-gray-700" id="sfTable">
        <thead class="bg-gray-100 text-gray-800">
          <tr>
            <th class="px-4 py-2">No</th>
            <th class="px-4 py-2">Nama SF</th>
            <th class="px-4 py-2">Team Leader</th>
            <th class="px-4 py-2">
            <a href="?tahun={{ selected_year }}&bulan={{ selected_bulan }}&wok={{ selected_wok }}&search={{ search }}&tl={{ selected_tl }}&sort=ps&order={% if sort_field == 'ps' and order == 'asc' %}desc{% else %}asc{% endif %}">
              Jumlah PS
              {% if sort_field == 'ps' %}
                {% if order == 'asc' %}⇧{% else %}⇩{% endif %}
              {% else %}
                ⇧⇩
              {% endif %}
            </a>
          </th>

          <th class="px-4 py-2">
            <a href="?tahun={{ selected_year }}&bulan={{ selected_bulan }}&wok={{ selected_wok }}&search={{ search }}&tl={{ selected_tl }}&sort=total&order={% if sort_field == 'total' and order == 'asc' %}desc{% else %}asc{% endif %}">
              Total
              {% if sort_field == 'total' %}
                {% if order == 'asc' %}⇧{% else %}⇩{% endif %}
              {% else %}
                ⇧⇩
              {% endif %}
            </a>
          </th>
            <th class="px-4 py-2">Rekening</th>
          </tr>
        </thead>
        <tbody>
          {% for row in page_obj %}
          <tr class="border-b 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-potongan_lainnya="{{ row.potongan_lainnya|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 }}">
            <td class="px-4 py-2">{{ forloop.counter }}</td>
            <td class="px-4 py-2">{{ row.user_name }}</td>
            <td class="px-4 py-2">{{ row.sf_tl_nama }}</td>
            <td class="px-4 py-2">{{ row.ps }}</td>
            <td class="px-4 py-2 font-bold">Rp. {{ row.total|intcomma }}</td>
            <td class="px-4 py-2">{{ row.rekening }}</td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
      <div class="flex justify-center mt-4">
        {% 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_field }}&order={{ order }}" 
            class="px-3 py-1 mx-1 border rounded bg-white hover:bg-gray-100">«</a>
        {% endif %}

        {% for num in page_obj.paginator.page_range %}
          {% if page_obj.number == num %}
            <span class="px-3 py-1 mx-1 border rounded bg-blue-600 text-white">{{ num }}</span>
          {% elif num > page_obj.number|add:"-3" and num < page_obj.number|add:"3" %}
            <a href="?page={{ num }}&tahun={{ selected_year }}&bulan={{ selected_bulan }}&wok={{ selected_wok }}&search={{ search }}&tl={{ selected_tl }}&sort={{ sort_field }}&order={{ order }}" 
              class="px-3 py-1 mx-1 border rounded bg-white hover:bg-gray-100">{{ num }}</a>
          {% 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_field }}&order={{ order }}" 
            class="px-3 py-1 mx-1 border rounded bg-white hover:bg-gray-100">»</a>
        {% endif %}
      </div>
      {% else %}
      <div class="p-4 text-center text-gray-500">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="bg-red-600 text-white px-4 py-3 rounded-t-lg font-bold">
          WOK: {{ wok_data.wok_name }} – Total Fee: Rp{{ wok_data.total_fee|intcomma }}
        </div>
        <div class="p-4">
          {% if wok_data.team_leaders %}
          <table class="w-full text-sm text-left text-gray-700 border">
            <thead class="bg-gray-100 text-center">
              <tr>
                <th class="px-3 py-2">No</th>
                <th class="px-3 py-2">Nama Team Leader</th>
                <th class="px-3 py-2">Total Fee</th>
              </tr>
            </thead>
            <tbody>
              {% for tl in wok_data.team_leaders %}
              <tr class="border-b">
                <td class="px-3 py-2 text-center">{{ forloop.counter }}</td>
                <td class="px-3 py-2">{{ tl.tl_name }}</td>
                <td class="px-3 py-2 text-right font-bold">Rp{{ tl.total_fee|intcomma }}</td>
              </tr>
              {% endfor %}
            </tbody>
          </table>
          {% else %}
          <div class="text-yellow-600">Belum ada Team Leader dengan fee pada WOK ini.</div>
          {% endif %}
        </div>
      </div>
    {% endfor %}
  {% else %}
    <div class="text-center text-gray-500">Tidak ada data fee untuk bulan/tahun yang dipilih.</div>
  {% endif %}
</div>

<!-- SweetAlert2 -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script>
function showDetail(row) {
    const data = row.dataset;

    Swal.fire({
        title: `Edit Fee ${data.user_name} – ${data.bulan}/${data.tahun}`,
        html: `
            <form id="formEditFee" class="text-left text-sm space-y-4">
                <input type="hidden" name="tahun" value="${data.tahun}">
                <input type="hidden" name="bulan" value="${data.bulan}">

                <!-- Row 1 -->
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                        <label class="block text-gray-700 text-sm font-medium mb-1">SF ID</label>
                        <input type="text" 
                               class="w-full rounded border border-gray-400 p-1 bg-gray-100 text-gray-600 cursor-not-allowed" 
                               name="sf_id" value="${data.sf_id}" readonly>
                    </div>
                    <div>
                        <label class="block text-gray-700 text-sm font-medium mb-1">Team Leader</label>
                        <input type="text" 
                               class="w-full rounded border border-gray-400 p-1 bg-gray-100 text-gray-600 cursor-not-allowed" 
                               name="sf_tl_nama" value="${data.sf_tl_nama}" readonly>
                    </div>
                </div>

                <div>
                    <label class="block text-gray-700 text-sm font-medium mb-1">Rekening</label>
                    <input type="text" 
                           class="w-full rounded border border-gray-400 p-1 focus:ring-blue-500 focus:border-blue-500" 
                           name="rekening" value="${data.rekening}">
                </div>

                <hr class="my-2 border-gray-300">

                <!-- Row 2 -->
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                        <label class="block text-gray-700 text-sm font-medium mb-1">Jumlah PS</label>
                        <input type="number" 
                               class="w-full rounded border border-gray-400 p-1 bg-gray-100 text-gray-600 cursor-not-allowed" 
                               name="ps" value="${data.ps}" readonly>
                    </div>
                    <div>
                        <label class="block text-gray-700 text-sm font-medium mb-1">Fee PS</label>
                        <input type="text" 
                               class="w-full rounded border border-gray-400 p-1 bg-gray-100 text-gray-600 cursor-not-allowed" 
                               name="fee_ps" value="${data.fee_ps.replace(/,/g, '')}" readonly>
                    </div>
                    <div>
                        <label class="block text-gray-700 text-sm font-medium mb-1">Fee Ditahan 10%</label>
                        <input type="text" 
                               class="w-full rounded border border-gray-400 p-1 bg-gray-100 text-gray-600 cursor-not-allowed" 
                               name="fee_ditahan_10" value="${data.fee_ditahan_10.replace(/,/g, '')}" readonly>
                    </div>
                    <div>
                        <label class="block text-gray-700 text-sm font-medium mb-1">PPH 2%</label>
                        <input type="text" 
                               class="w-full rounded border border-gray-400 p-1 bg-gray-100 text-gray-600 cursor-not-allowed" 
                               name="pph_2" value="${data.pph_2.replace(/,/g, '')}" readonly>
                    </div>
                </div>

                <div>
                    <label class="block text-gray-700 text-sm font-medium mb-1">THP</label>
                    <input type="text" 
                           class="w-full rounded border border-gray-400 p-1 bg-gray-100 text-gray-600 cursor-not-allowed" 
                           name="thp_total" value="${data.thp_total.replace(/,/g, '')}" readonly>
                </div>

                <hr class="my-2 border-gray-300">

                <!-- Row 3 -->
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                        <label class="block text-gray-700 text-sm font-medium mb-1">Bill Pertama</label>
                        <input type="text" 
                               class="w-full rounded border border-gray-400 p-1 focus:ring-blue-500 focus:border-blue-500" 
                               name="billper" value="${data.billper.replace(/,/g, '')}">
                    </div>
                    <div>
                        <label class="block text-gray-700 text-sm font-medium mb-1">Bill Kedua</label>
                        <input type="text" 
                               class="w-full rounded border border-gray-400 p-1 focus:ring-blue-500 focus:border-blue-500" 
                               name="billdu" value="${data.billdu.replace(/,/g, '')}">
                    </div>
                    <div>
                        <label class="block text-gray-700 text-sm font-medium mb-1">Pengembalian 10%</label>
                        <input type="text" 
                               class="w-full rounded border border-gray-400 p-1 focus:ring-blue-500 focus:border-blue-500" 
                               name="pengembalian_10" value="${data.pengembalian_10.replace(/,/g, '')}">
                    </div>
                    <div>
                        <label class="block text-gray-700 text-sm font-medium mb-1">Pengembalian Bill Kedua</label>
                        <input type="text" 
                               class="w-full rounded border border-gray-400 p-1 focus:ring-blue-500 focus:border-blue-500" 
                               name="pengembalian_billdu" value="${data.pengembalian_billdu.replace(/,/g, '')}">
                    </div>
                    <div>
                        <label class="block text-gray-700 text-sm font-medium mb-1">Bon</label>
                        <input type="text" 
                               class="w-full rounded border border-gray-400 p-1 focus:ring-blue-500 focus:border-blue-500" 
                               name="bon" value="${data.bon.replace(/,/g, '')}">
                    </div>
                    <div>
                        <label class="block text-gray-700 text-sm font-medium mb-1">Potongan Lainnya</label>
                        <input type="text" 
                               class="w-full rounded border border-gray-400 p-1 focus:ring-blue-500 focus:border-blue-500" 
                               name="potongan_lainnya" value="${data.potongan_lainnya.replace(/,/g, '')}">
                    </div>
                </div>

                <div>
                    <label class="block text-gray-700 text-sm font-medium mb-1">Total</label>
                    <input type="text" 
                           class="w-full rounded border border-gray-400 p-1 bg-gray-100 text-gray-600 cursor-not-allowed" 
                           name="total" value="${data.total.replace(/,/g, '')}" readonly>
                </div>
            </form>
        `,
        width: 700,
        showCancelButton: true,
        confirmButtonText: 'Simpan',
        cancelButtonText: 'Batal',
        preConfirm: () => {
            const form = Swal.getPopup().querySelector('#formEditFee');
            const formData = new FormData(form);
            const result = Object.fromEntries(formData.entries());
            if (!result.rekening || !result.total) {
                Swal.showValidationMessage(`Rekening dan Total wajib diisi`);
                return false;
            }
            return result;
        }
    }).then((result) => {
        if (result.isConfirmed) {
            fetch("{% url 'update_fee' %}", {
                method: 'POST',
                headers: {
                    'X-CSRFToken': '{{ csrf_token }}',
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify(result.value)
            })
            .then(res => res.json())
            .then(data => Swal.fire('Berhasil!', 'Data telah disimpan.', 'success').then(() => location.reload()))
            .catch(err => Swal.fire('Error', err.message, 'error'));
        }
    });
}

</script>
{% endblock %}