{% extends "layout/ver_baru/base_admin.html" %}
{% block title %}Data PS - CWN{% endblock %}
{% load humanize %}
{% block content %}

<main class="content" id="main-content">
  <div class="container mx-auto my-6 sm:px-6 lg:px-8">
    <h1 class="text-center text-white p-3 rounded mb-6 mt-4 bg-red-700 font-bold text-xl">
      Data Put Into Sales
    </h1>

    <!-- Form Filter -->
    <form method="GET" class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
      <!-- WOK -->
      <div>
        <label for="wok" class="block text-sm font-medium mb-1">Wilayah Operasional Kerja</label>
        {% if request.session.role == 'Team Leader' or request.session.role == 'Mitra' %}
          <select id="wok" name="wok" class="w-full border rounded px-3 py-2" disabled>
            <option value="" {% if not selected_wok %}selected{% endif %}>Pilih Wilayah</option>
            <option value="1" {% if selected_wok == '1' %}selected{% endif %}>DEMAK</option>
            <option value="2" {% if selected_wok == '2' %}selected{% endif %}>SEMARANG 2</option>
            <option value="3" {% if selected_wok == '3' %}selected{% endif %}>SURAKARTA</option>
          </select>
        {% else %}
          <select id="wok" name="wok" class="w-full border rounded px-3 py-2">
            <option value="" {% if not selected_wok %}selected{% endif %}>Pilih Wilayah</option>
            <option value="1" {% if selected_wok == '1' %}selected{% endif %}>DEMAK</option>
            <option value="2" {% if selected_wok == '2' %}selected{% endif %}>SEMARANG 2</option>
            <option value="3" {% if selected_wok == '3' %}selected{% endif %}>SURAKARTA</option>
          </select>
        {% endif %}
      </div>

      <!-- TL Name -->
      <div>
        <label for="tl_name" class="block text-sm font-medium mb-1">Nama Team Leader</label>
        {% if request.session.role == 'Team Leader' %}
          <input type="text" class="w-full border rounded px-3 py-2 bg-gray-100" value="{{ selected_tl_name|default:'' }}" disabled>
          <input type="hidden" id="tl_name" name="tl_name" value="{{ selected_tl_name|default:'' }}">
        {% else %}
          <select id="tl_name" name="tl_name" class="w-full border rounded px-3 py-2">
            <option value="">Nama TL</option>
            {% for leader in leader_list %}
              <option value="{{ leader.user_name }}" {% if request.GET.tl_name == leader.user_name %}selected{% endif %}>
                {{ leader.user_name }}
              </option>
            {% endfor %}
          </select>
        {% endif %}
      </div>

      <!-- SF Name -->
      <div>
        <label for="sf_name" class="block text-sm font-medium mb-1">Nama Sales Force</label>
        {% if request.session.role == 'Sales Force' %}
          <input type="text" class="w-full border rounded px-3 py-2 bg-gray-100" value="{{ selected_sf_name|default:'' }}" disabled>
          <input type="hidden" id="sf_name" name="sf_name" value="{{ selected_sf_name|default:'' }}">
        {% else %}
          <select id="sf_name" name="sf_name" class="w-full border rounded px-3 py-2">
            <option value="">Nama Sales Force</option>
            {% for sales in sales_list %}
              <option value="{{ sales.user_name }}" {% if request.GET.sf_name == sales.user_name %}selected{% endif %}>
                {{ sales.user_name }}
              </option>
            {% endfor %}
          </select>
        {% endif %}
      </div>

      <!-- Paket -->
      <div>
        <label for="paket_name" class="block text-sm font-medium mb-1">Nama Paket</label>
        <input type="text" id="paket_name" name="paket_name"
          class="w-full border rounded px-3 py-2"
          value="{{ selected_paket_name|default:'' }}" placeholder="Masukkan nama paket">
      </div>

      <!-- Tahun -->
      <div>
        <label for="tahun" class="block text-sm font-medium mb-1">Tahun</label>
        <select name="tahun" id="tahun" class="w-full border rounded px-3 py-2">
          <option value="" {% if not selected_tahun %}selected{% endif %}>-- Pilih Tahun --</option>
          <option value="2024" {% if selected_tahun == '2024' %}selected{% endif %}>2024</option>
          <option value="2025" {% if selected_tahun == '2025' %}selected{% endif %}>2025</option>
        </select>
      </div>

      <!-- Bulan -->
      <div>
        <label for="bulan" class="block text-sm font-medium mb-1">Bulan</label>
        <select id="bulan" name="bulan" class="w-full border rounded px-3 py-2">
          <option value="" {% if not selected_bulan %}selected{% endif %}>-- Pilih Bulan --</option>
          <option value="01" {% if selected_bulan == '01' %}selected{% endif %}>Januari</option>
          <option value="02" {% if selected_bulan == '02' %}selected{% endif %}>Februari</option>
          <option value="03" {% if selected_bulan == '03' %}selected{% endif %}>Maret</option>
          <option value="04" {% if selected_bulan == '04' %}selected{% endif %}>April</option>
          <option value="05" {% if selected_bulan == '05' %}selected{% endif %}>Mei</option>
          <option value="06" {% if selected_bulan == '06' %}selected{% endif %}>Juni</option>
          <option value="07" {% if selected_bulan == '07' %}selected{% endif %}>Juli</option>
          <option value="08" {% if selected_bulan == '08' %}selected{% endif %}>Agustus</option>
          <option value="09" {% if selected_bulan == '09' %}selected{% endif %}>September</option>
          <option value="10" {% if selected_bulan == '10' %}selected{% endif %}>Oktober</option>
          <option value="11" {% if selected_bulan == '11' %}selected{% endif %}>November</option>
          <option value="12" {% if selected_bulan == '12' %}selected{% endif %}>Desember</option>
        </select>
      </div>

      <!-- Tanggal -->
      <div>
        <label for="tanggal" class="block text-sm font-medium mb-1">Tanggal</label>
        <input type="text" id="tanggal" name="tanggal"
          class="w-full border rounded px-3 py-2"
          value="{{ selected_tanggal|default:'' }}" placeholder="01-31" maxlength="2" pattern="[0-9]{2}">
      </div>

      <!-- Button -->
      <div class="flex items-end">
        <button type="submit" class="w-full bg-red-700 hover:bg-red-800 text-white py-2 rounded">
          Filter
        </button>
      </div>
    </form>

    <!-- Download Buttons -->
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-6">
      <a href="{% url 'export-excel-bulanan' %}?tahun={{ selected_tahun }}&bulan={{ selected_bulan }}"
         class="bg-green-600 hover:bg-green-700 text-white text-center py-2 rounded shadow">
        Download Excel Bulanan
      </a>
      <a href="{% url 'export-excel' %}?tl_name={{ selected_tl_name }}&sf_name={{ selected_sf_name }}&paket_name={{ selected_paket_name }}&tahun={{ selected_tahun }}&bulan={{ selected_bulan }}&tanggal={{ selected_tanggal }}&wok={{ selected_wok }}"
         class="bg-green-600 hover:bg-green-700 text-white text-center py-2 rounded shadow">
        Download Excel Terfilter
      </a>
    </div>

    <!-- Cards -->
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 mt-8">
      <!-- TL Sales -->
      <div class="bg-white rounded shadow">
        <div class="bg-red-700 text-white px-4 py-2 rounded-t">Penjualan Team Leader</div>
        <div class="p-3 overflow-x-auto">
          <table class="w-full text-sm border">
            <thead class="bg-gray-100">
              <tr>
                <th class="border px-2 py-1">Team Leader</th>
                <th class="border px-2 py-1">Total</th>
              </tr>
            </thead>
            <tbody>
              {% for data in team_leader_sales %}
              <tr>
                <td class="border px-2 py-1">{{ data.tl__user_name }}</td>
                <td class="border px-2 py-1 text-right">{{ data.total_penjualan }}</td>
              </tr>
              {% endfor %}
            </tbody>
          </table>
        </div>
      </div>

      <!-- SF Sales -->
      <div class="bg-white rounded shadow">
        <div class="bg-red-700 text-white px-4 py-2 rounded-t">Penjualan Sales Force</div>
        <div class="p-3 overflow-x-auto">
          <table class="w-full text-sm border" id="salesForceTotalTable">
            <thead class="bg-gray-100">
              <tr>
                <th class="border px-2 py-1">Sales Force</th>
                <th class="border px-2 py-1">Total</th>
              </tr>
            </thead>
            <tbody>
              {% for data in sales_force_sales %}
              <tr {% if forloop.counter > 9 %}class="hidden extra-sales-row"{% endif %}>
                <td class="border px-2 py-1">{{ data.sf__user_name }}</td>
                <td class="border px-2 py-1 text-right">{{ data.total_penjualan }}</td>
              </tr>
              {% endfor %}
            </tbody>
          </table>
          {% if sales_force_sales|length > 5 %}
          <div class="text-center mt-2">
            <button id="showMoreSalesBtn"
              class="bg-blue-600 text-white text-xs px-3 py-1 rounded"
              onclick="toggleRows('extra-sales-row','showMoreSalesBtn')">
              Tampilkan Lebih Banyak
            </button>
          </div>
          {% endif %}
        </div>
      </div>

      <!-- Paket Sales -->
      <div class="bg-white rounded shadow">
        <div class="bg-red-700 text-white px-4 py-2 rounded-t">Paket Terjual</div>
        <div class="p-3 overflow-x-auto">
          <table class="w-full text-sm border" id="totalPaketTable">
            <thead class="bg-gray-100">
              <tr>
                <th class="border px-2 py-1">Nama Paket</th>
                <th class="border px-2 py-1">Total</th>
              </tr>
            </thead>
            <tbody>
              {% for data in total_packages_sold %}
              <tr {% if forloop.counter > 9 %}class="hidden extra-paket-row"{% endif %}>
                <td class="border px-2 py-1">{{ data.paket_name }}</td>
                <td class="border px-2 py-1 text-right">{{ data.total }}</td>
              </tr>
              {% endfor %}
            </tbody>
          </table>
          {% if total_packages_sold|length > 9 %}
          <div class="text-center mt-2">
            <button id="showMorePaketBtn"
              class="bg-blue-600 text-white text-xs px-3 py-1 rounded"
              onclick="toggleRows('extra-paket-row','showMorePaketBtn')">
              Tampilkan Lebih Banyak
            </button>
          </div>
          {% endif %}
        </div>
      </div>
    </div>

    <!-- Paket per SF -->
    <div class="bg-white rounded shadow mt-8">
      <div class="bg-red-700 text-white px-4 py-2 rounded-t">Penjualan Paket per Sales Force</div>
      <div class="p-3 overflow-x-auto">
        <table class="w-full text-sm border" id="salesForceTable">
          <thead class="bg-gray-100">
            <tr>
              <th class="border px-2 py-1">Sales Force</th>
              <th class="border px-2 py-1">Paket</th>
              <th class="border px-2 py-1">Jumlah</th>
            </tr>
          </thead>
          <tbody>
            {% for data in sales_force_package_details %}
            <tr {% if forloop.counter > 5 %}class="hidden extra-row"{% endif %}>
              <td class="border px-2 py-1">{{ data.sf__user_name }}</td>
              <td class="border px-2 py-1">{{ data.paket_name }}</td>
              <td class="border px-2 py-1 text-right">{{ data.total }}</td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
        {% if sales_force_package_details|length > 5 %}
        <div class="text-center mt-2">
          <button id="showMoreBtn"
            class="bg-blue-600 text-white text-xs px-3 py-1 rounded"
            onclick="toggleRows('extra-row','showMoreBtn')">
            Tampilkan Lebih Banyak
          </button>
        </div>
        {% endif %}
      </div>
    </div>

    <!-- Paket per WOK -->
    {% if request.session.role != 'Team Leader' %}
    <div class="bg-white rounded shadow mt-8">
      <div class="bg-red-700 text-white px-4 py-2 rounded-t">Paket Terjual per WOK</div>
      <div class="p-3 overflow-x-auto">
        <table class="w-full text-sm border" id="wokTable">
          <thead class="bg-gray-100">
            <tr>
              <th class="border px-2 py-1">WOK ID</th>
              <th class="border px-2 py-1">Nama WOK</th>
              <th class="border px-2 py-1">Nama Paket</th>
              <th class="border px-2 py-1">Total</th>
            </tr>
          </thead>
          <tbody>
            {% for data in total_packages_per_wok %}
            <tr {% if forloop.counter > 5 %}class="hidden extra-wok-row"{% endif %}>
              <td class="border px-2 py-1 text-center">{{ data.tl__wok__wok_id }}</td>
              <td class="border px-2 py-1">{{ data.tl__wok__wok_name }}</td>
              <td class="border px-2 py-1">{{ data.paket_name }}</td>
              <td class="border px-2 py-1 text-right">{{ data.total }}</td>
            </tr>
            {% empty %}
            <tr><td colspan="4" class="text-center text-gray-500">Tidak ada data</td></tr>
            {% endfor %}
          </tbody>
        </table>
        {% if total_packages_per_wok|length > 5 %}
        <div class="text-center mt-2">
          <button id="showMoreWokBtn"
            class="bg-blue-600 text-white text-xs px-3 py-1 rounded"
            onclick="toggleRows('extra-wok-row','showMoreWokBtn')">
            Tampilkan Lebih Banyak
          </button>
        </div>
        {% endif %}
      </div>
    </div>
    {% endif %}

    <!-- Data Record -->
    <div class="bg-white rounded shadow mt-8">
      <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between bg-red-700 text-white px-4 py-2 rounded-t">
        <h5 class="font-bold">Data Record Penjualan</h5>
        <input type="text" id="searchInput"
          class="px-2 py-1 rounded text-black text-sm w-full sm:w-auto"
          placeholder="Cari data...">
      </div>
      <div class="p-3 overflow-x-auto">
        <table class="min-w-full text-xs sm:text-sm border" id="dataTable">
          <thead class="bg-gray-100">
            <tr>
              <th class="border px-2 py-1">PS ID</th>
              <th class="border px-2 py-1">Sales Force</th>
              <th class="border px-2 py-1">Team Leader</th>
              <th class="border px-2 py-1">ID Transaksi</th>
              <th class="border px-2 py-1">No Internet</th>
              <th class="border px-2 py-1">Waktu PS</th>
              <th class="border px-2 py-1">Tanggal</th>
              <th class="border px-2 py-1">Nama Paket</th>
              <th class="border px-2 py-1">ARPU</th>
              <th class="border px-2 py-1">WOK</th>
            </tr>
          </thead>
          <tbody>
            {% for data in karyawan %}
            <tr>
              <td class="border px-2 py-1">{{ data.ps_id }}</td>
              <td class="border px-2 py-1">{{ data.sf.user_name }}</td>
              <td class="border px-2 py-1">{{ data.tl.user_name }}</td>
              <td class="border px-2 py-1">{{ data.track_id }}</td>
              <td class="border px-2 py-1">{{ data.no_internet }}</td>
              <td class="border px-2 py-1">{{ data.waktu_ps}}</td>
              <td class="border px-2 py-1">{{ data.tanggal_angka }}</td>
              <td class="border px-2 py-1">{{ data.paket_name }}</td>
              <td class="border px-2 py-1">Rp. {{ data.arpu|floatformat:2|intcomma }}</td>
              <td class="border px-2 py-1">{{ data.tl.wok.wok_name }}</td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>

      <!-- Pagination -->
      <div class="flex justify-center items-center py-3">
        <ul class="inline-flex items-center -space-x-px text-sm">
          
          {% if page_obj.has_previous %}
            <!-- First -->
            <li>
              <a href="?page=1{% for key, value in request.GET.items %}{% if key != 'page' %}&{{ key }}={{ value }}{% endif %}{% endfor %}"
                class="px-3 py-1 border rounded-l hover:bg-gray-200">&laquo;</a>
            </li>
            <!-- Prev -->
            <li>
              <a href="?page={{ page_obj.previous_page_number }}{% for key, value in request.GET.items %}{% if key != 'page' %}&{{ key }}={{ value }}{% endif %}{% endfor %}"
                class="px-3 py-1 border hover:bg-gray-200">&lsaquo;</a>
            </li>
          {% endif %}

          {# tampilkan maksimal 5 halaman di sekitar current #}
          {% for i in page_obj.paginator.page_range %}
            {% if i >= page_obj.number|add:'-2' and i <= page_obj.number|add:'2' %}
              {% if page_obj.number == i %}
                <li>
                  <span class="px-3 py-1 border bg-red-600 text-white">{{ i }}</span>
                </li>
              {% else %}
                <li>
                  <a href="?page={{ i }}{% for key, value in request.GET.items %}{% if key != 'page' %}&{{ key }}={{ value }}{% endif %}{% endfor %}"
                    class="px-3 py-1 border hover:bg-gray-200">{{ i }}</a>
                </li>
              {% endif %}
            {% endif %}
          {% endfor %}

          {% if page_obj.has_next %}
            <!-- Next -->
            <li>
              <a href="?page={{ page_obj.next_page_number }}{% for key, value in request.GET.items %}{% if key != 'page' %}&{{ key }}={{ value }}{% endif %}{% endfor %}"
                class="px-3 py-1 border hover:bg-gray-200">&rsaquo;</a>
            </li>
            <!-- Last -->
            <li>
              <a href="?page={{ page_obj.paginator.num_pages }}{% for key, value in request.GET.items %}{% if key != 'page' %}&{{ key }}={{ value }}{% endif %}{% endfor %}"
                class="px-3 py-1 border rounded-r hover:bg-gray-200">&raquo;</a>
            </li>
          {% endif %}
        </ul>
      </div>
    </div>
  </div>
</div>

<!-- JavaScript: Toggle Rows + Search Filter -->
<script>
  // Generalized Toggle Function
  function toggleExtraRows(rowClass, buttonId) {
    const rows = document.querySelectorAll(`.${rowClass}`);
    const button = document.getElementById(buttonId);

    rows.forEach(row => row.classList.toggle('hidden')); // pakai Tailwind "hidden"
    button.innerText = (button.innerText === 'Tampilkan Lebih Banyak')
      ? 'Tampilkan Lebih Sedikit'
      : 'Tampilkan Lebih Banyak';
  }

  // Search Filter
  document.addEventListener("DOMContentLoaded", function () {
    const searchInput = document.getElementById("searchInput");
    const tableBody = document.getElementById("dataTable").getElementsByTagName("tbody")[0];
    const rows = tableBody.getElementsByTagName("tr");

    searchInput.addEventListener("keyup", function () {
      const filter = searchInput.value.toLowerCase();
      for (let i = 0; i < rows.length; i++) {
        let rowText = rows[i].textContent.toLowerCase();
        rows[i].style.display = rowText.includes(filter) ? "" : "none";
      }
    });
  });
</script>
{% endblock %}