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

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

{% if messages %}
  {% for message in messages %}
    <script>
      Swal.fire({
        icon: '{{ message.tags }}' === 'error' ? 'error' : 'success',
        title: '{{ message.tags|capfirst }}',
        text: '{{ message }}'
      });
    </script>
  {% endfor %}
{% endif %}

<div class="mt-6 px-6">
  <h2 class="text-center text-white p-3 rounded mb-6 mt-4 bg-red-700 font-bold text-xl">Manajemen Data PS</h2>

  <!-- Toolbar -->
  <div class="flex justify-between mb-3">
    <button class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-lg shadow"
            onclick="document.getElementById('modalAdd').classList.remove('hidden')">
      <i class="fas fa-plus"></i>Tambah Data
    </button>
    <form method="get" class="flex space-x-2">
      <input type="text" name="search" class="border px-3 py-2 rounded-lg w-64 focus:outline-none focus:ring focus:border-red-500"
             placeholder="Cari PS ID / Paket..." value="{{search_query}}">
      <button type="submit" class="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded-lg">Cari</button>
    </form>
  </div>

  <!-- Table -->
  <div class="overflow-x-auto shadow rounded-lg border">
    <table class="min-w-full text-sm text-left border-collapse">
      <thead class="bg-gray-700 text-white">
        <tr>
          <th class="px-3 py-2 border">PS ID</th>
          <th class="px-3 py-2 border">Sales Force</th>
          <th class="px-3 py-2 border">Team Leader</th>
          <th class="px-3 py-2 border">Track ID</th>
          <th class="px-3 py-2 border">No Internet</th>
          <th class="px-3 py-2 border">Waktu PS</th>
          <th class="px-3 py-2 border">Paket</th>
          <th class="px-3 py-2 border">ARPU</th>
          <th class="px-3 py-2 border">Aksi</th>
        </tr>
      </thead>
      <tbody>
        {% for row in data_list %}
        <tr class="even:bg-gray-50">
          <td class="px-3 py-2 border">{{ row.ps_id }}</td>
          <td class="px-3 py-2 border">{{ row.sf_id }}</td>
          <td class="px-3 py-2 border">{{ row.tl_id }}</td>
          <td class="px-3 py-2 border">{{ row.track_id }}</td>
          <td class="px-3 py-2 border">{{ row.no_internet }}</td>
          <td class="px-3 py-2 border">{{ row.waktu_ps }}</td>
          <td class="px-3 py-2 border">{{ row.paket_name }}</td>
          <td class="px-3 py-2 border">{{ row.arpu }}</td>
          <td class="px-3 py-2 border flex space-x-2">
            <button class="bg-blue-600 hover:bg-blue-700 text-white px-2 py-1 rounded"
                    onclick="openEditModal('{{ row.ps_id }}','{{ row.sf_id }}','{{ row.tl_id }}','{{ row.track_id }}','{{ row.no_internet }}','{{ row.waktu_ps }}','{{ row.paket_name }}','{{ row.arpu }}')">
              Edit
            </button>
            <button class="bg-red-600 hover:bg-red-700 text-white px-2 py-1 rounded"
                    onclick="openDeleteModal('{{ row.ps_id }}')">
              Hapus
            </button>
          </td>
        </tr>
        {% empty %}
        <tr>
          <td colspan="9" class="text-center py-4">Belum ada data</td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>

  <!-- Pagination -->
  {% if page_obj.has_other_pages %}
  <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 %}
        <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>
        <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 %}

      {% 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 %}
        <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>
        <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>
  {% endif %}
</div>

<!-- Modal Add -->
<div id="modalAdd" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
  <div class="bg-white rounded-lg shadow-lg w-full max-w-3xl">
    <div class="flex justify-between items-center bg-green-600 text-white p-3 rounded-t">
      <h5 class="text-lg font-semibold">Tambah Data PS</h5>
      <button onclick="document.getElementById('modalAdd').classList.add('hidden')" class="text-white"><i class="fas fa-times"></i></button>
    </div>
    <div class="p-4">

      <!-- Tabs -->
      <div class="border-b mb-4 flex space-x-4" id="addTabs">
        <button id="tabManualBtn" class="px-4 py-2 font-semibold text-green-700 border-b-2 border-green-600" onclick="showAddTab('manual')">Manual</button>
        <button id="tabExcelBtn" class="px-4 py-2 font-semibold text-gray-600 hover:text-green-700" onclick="showAddTab('excel')">Upload Excel</button>
      </div>

      <!-- Tab Content -->
      <div id="tabManual" class="space-y-3">
        <form method="POST" action="{% url 'input_data_ps' %}" class="space-y-3">
          {% csrf_token %}
          <input type="text" name="id_sf" placeholder="ID Sales Force" class="border p-2 rounded w-full" required>
          <input type="text" name="id_tl" placeholder="ID Team Leader" class="border p-2 rounded w-full" required>
          <input type="text" name="track_id" placeholder="Track ID" class="border p-2 rounded w-full" required>
          <input type="text" name="no_internet" placeholder="No Internet" class="border p-2 rounded w-full" required>
          <input type="datetime-local" name="waktu_ps" class="border p-2 rounded w-full" required>
          <input type="text" name="paket_name" placeholder="Nama Paket" class="border p-2 rounded w-full" required>
          <input type="number" step="0.01" name="arpu" placeholder="ARPU" class="border p-2 rounded w-full" required>
          <div class="flex justify-end space-x-2 pt-2">
            <button type="button" onclick="document.getElementById('modalAdd').classList.add('hidden')" class="bg-gray-400 text-white px-4 py-2 rounded">Batal</button>
            <button type="submit" class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded">Simpan</button>
          </div>
        </form>
      </div>

      <div id="tabExcel" class="hidden space-y-3">
        <form method="POST" action="{% url 'upload_excel_ps' %}" enctype="multipart/form-data" class="space-y-3">
          {% csrf_token %}
          <div>
            <label class="block font-medium mb-1">Pilih File Excel (.xlsx)</label>
            <input type="file" name="file_excel" accept=".xlsx" class="border p-2 rounded w-full" required>
          </div>
          <div class="bg-blue-50 border-l-4 border-blue-400 p-3 text-sm text-blue-700">
            Pastikan format kolom sesuai template:  
            <code>ps_id, sf_id, tl_id, track_id, no_internet, waktu_ps, paket_name, arpu</code>
          </div>
          <div class="flex justify-between items-center pt-2">
            <a href="https://docs.google.com/spreadsheets/d/1vFht73MFbugziOAXDeBTaKxfZ36E9aXUz351zHWe_18/edit?usp=sharing" target="_blank" class="text-green-700 underline">Download Template</a>
            <div class="space-x-2">
              <button type="button" onclick="document.getElementById('modalAdd').classList.add('hidden')" class="bg-gray-400 text-white px-4 py-2 rounded">Batal</button>
              <button type="submit" class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded">Upload</button>
            </div>
          </div>
        </form>
      </div>

    </div>
  </div>
</div>

<!-- Modal Edit -->
<div id="modalEdit" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center">
  <div class="bg-white rounded-lg shadow-lg w-full max-w-2xl">
    <div class="flex justify-between items-center bg-blue-600 text-white p-3 rounded-t">
      <h5 class="text-lg font-semibold">Edit Data PS</h5>
      <button onclick="document.getElementById('modalEdit').classList.add('hidden')" class="text-white"><i class="fas fa-times"></i></button>
    </div>
    <div class="p-4">

      <form method="POST" action="{% url 'update_data_ps' %}" class="space-y-3">
        {% csrf_token %}
        <input type="hidden" name="ps_id" id="edit-ps-id">
        <input type="text" name="sf_id" id="edit-sf" class="border p-2 rounded w-full">
        <input type="text" name="tl_id" id="edit-tl" class="border p-2 rounded w-full">
        <input type="text" name="track_id" id="edit-track" class="border p-2 rounded w-full">
        <input type="text" name="no_internet" id="edit-internet" class="border p-2 rounded w-full">
        <label for="waktu_ps" class="block text-sm font-semibold text-red-700 mt-4 mb-1">
          ⚠ Mohon pastikan isi ulang tanggal ketika mengedit PS!
        </label>
        <input type="datetime-local" name="waktu_ps" id="edit-waktu" class="border p-2 rounded w-full">
        <input type="text" name="paket_name" id="edit-paket" class="border p-2 rounded w-full">
        <input type="number" step="0.01" name="arpu" id="edit-arpu" class="border p-2 rounded w-full">
        <div class="flex justify-end space-x-2 pt-2">
          <button type="button" onclick="document.getElementById('modalEdit').classList.add('hidden')" class="bg-gray-400 text-white px-4 py-2 rounded">Batal</button>
          <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded">Update</button>
        </div>
      </form>
    </div>
  </div>
</div>

<!-- Modal Delete -->
<div id="modalDelete" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center">
  <div class="bg-white rounded-lg shadow-lg w-full max-w-md">
    <div class="flex justify-between items-center bg-red-600 text-white p-3 rounded-t">
      <h5 class="text-lg font-semibold">Hapus Data</h5>
      <button onclick="document.getElementById('modalDelete').classList.add('hidden')" class="text-white"><i class="fas fa-times"></i></button>
    </div>
    <div class="p-4">
      <form method="POST" action="{% url 'delete_data_ps' %}" class="space-y-3">
        {% csrf_token %}
        <input type="hidden" name="ps_id" id="delete-ps-id">
        <p>Apakah Anda yakin ingin menghapus data <strong id="delete-ps-text"></strong> ?</p>
        <div class="flex justify-end space-x-2 pt-2">
          <button type="button" onclick="document.getElementById('modalDelete').classList.add('hidden')" class="bg-gray-400 text-white px-4 py-2 rounded">Batal</button>
          <button type="submit" class="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded">Hapus</button>
        </div>
      </form>
    </div>
  </div>
</div>

<script>
function openEditModal(id,sf,tl,track,internet,waktu,paket,arpu){
  document.getElementById('edit-ps-id').value = id
  document.getElementById('edit-sf').value = sf
  document.getElementById('edit-tl').value = tl
  document.getElementById('edit-track').value = track
  document.getElementById('edit-internet').value = internet
  // Convert DB time "YYYY-MM-DD HH:MM:SS" → "YYYY-MM-DDTHH:MM"
  if (waktu && waktu !== "") {
    // replace spasi dengan T, hapus detik
    let waktu_local = waktu.replace(' ', 'T').substring(0,16)
    document.getElementById('edit-waktu').value = waktu_local
  } else {
    document.getElementById('edit-waktu').value = ""
  }
  document.getElementById('edit-paket').value = paket
  document.getElementById('edit-arpu').value = arpu
  document.getElementById('modalEdit').classList.remove('hidden')
}
function openDeleteModal(id){
  document.getElementById('delete-ps-id').value = id
  document.getElementById('delete-ps-text').innerText = id
  document.getElementById('modalDelete').classList.remove('hidden')
}
function showAddTab(tab) {
  const manual = document.getElementById('tabManual')
  const excel = document.getElementById('tabExcel')
  const btnManual = document.getElementById('tabManualBtn')
  const btnExcel = document.getElementById('tabExcelBtn')

  if (tab === 'manual') {
    manual.classList.remove('hidden')
    excel.classList.add('hidden')
    btnManual.classList.add('text-green-700','border-b-2','border-green-600')
    btnExcel.classList.remove('text-green-700','border-b-2','border-green-600')
    btnExcel.classList.add('text-gray-600')
  } else {
    manual.classList.add('hidden')
    excel.classList.remove('hidden')
    btnExcel.classList.add('text-green-700','border-b-2','border-green-600')
    btnManual.classList.remove('text-green-700','border-b-2','border-green-600')
    btnManual.classList.add('text-gray-600')
  }
}
</script>

{% endblock %}