{% extends "layout.html" %}
{% load static %}

{% block layout_script %}
<script>
document.addEventListener("DOMContentLoaded", function() {
  const deleteModal = document.getElementById("confirmDeleteModal");
  const deleteBtn = document.getElementById("deleteConfirmBtn");
  const categoryName = document.getElementById("deleteCategoryName");

  $('#confirmDeleteModal').on('show.bs.modal', function (event) {
    const button = $(event.relatedTarget); // Tombol yang diklik
    const url = button.data('url');        // URL hapus
    const name = button.data('name');      // Nama kategori

    deleteBtn.setAttribute('href', url);
    categoryName.textContent = name;
  });
});
</script>

<script>
(unknown => {
	$table = $('#catetree');

	$table.find('tr').each(function() {
		$(this).find('[data-delete]').on('click',event => {
			var message = `Anda Yakin Hapus Kategori "${this.dataset.fieldText}" ?`;

			if (! window.confirm(message)) event.preventDefault();
		});
	});
})();
</script>
{% endblock %}

{% block layout_style %}
<style>
	#catetree [data-tree] {
		--catetree-deep: 0;
	}
	#catetree [data-tree]:before {
		content: '│';
		position: absolute;
		transform: rotate(90deg);
		margin-left: -1.50em;

	}
	#catetree [data-tree] {
		padding-left: calc(2em * var(--catetree-deep));
	}

	#catetree [data-tree][data-deep="0"]:before {
		content: '';
	}

	#catetree .test { background-color: var(--gray); }
	.aksine-tbl { width: 15%; }
</style>
{% endblock %}

{% block layout_content %}
<div class="card mt-3">
	<div class="card-body">
		<h5 class="card-title d-flex">
			<span>List Kategori</span>

			<a href="{% url 'catetree_create' %}" class="btn ml-auto btn-accent shadow px-lg-4 py-2 text-uppercase" style="box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;">
				<i class="fa fa-plus"></i> tambah
			</a>
		</h5>

		{% include 'extra/base_messages.html' %}
		
		<table id="catetree" class="table table-striped table-hover" style="box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;">
			<thead class="text-white" style="background-color: rgb(33, 112, 202) !important;">
				<tr>
					<th>Kategori</th>
					<th class="text-center aksine-tbl">Aksi</th>
				</tr>
			</thead>
			<tbody>
				{% for i in categories %}
					{% include "catetree/list_subs.html" with sups=i %}
				{% endfor %}

				{% if categories|length == 0 %}
					<tr>
						<td class="text-muted text-center" colspan="99">(kosong)</td>
					</tr>
				{% endif %}

				{% if debug %}
					<!-- <tr class="test"><td><span data-tree data-deep="0" style="--catetree-deep:0;">lorem ipsum</span></td></tr>
					<tr class="test"><td><span data-tree data-deep="1" style="--catetree-deep:1;">lorem ipsum</span></td></tr>
					<tr class="test"><td><span data-tree data-deep="2" style="--catetree-deep:2;">lorem ipsum</span></td></tr>
					<tr class="test"><td><span data-tree data-deep="3" style="--catetree-deep:3;">lorem ipsum</span></td></tr>
					<tr class="test"><td><span data-tree data-deep="1" style="--catetree-deep:1;">lorem ipsum</span></td></tr>
					<tr class="test"><td><span data-tree data-deep="2" style="--catetree-deep:2;">lorem ipsum</span></td></tr>
					<tr class="test"><td><span data-tree data-deep="3" style="--catetree-deep:3;">lorem ipsum</span></td></tr> -->
				{% endif %}
			</tbody>
		</table>
	</div>
</div>

<!-- Modal Konfirmasi Hapus -->
<div class="modal fade" id="confirmDeleteModal" tabindex="-1" aria-labelledby="confirmDeleteLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content shadow">
      <div class="modal-header">
        <h5 class="modal-title" id="confirmDeleteLabel">Konfirmasi Hapus</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Tutup">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        Apakah Anda yakin ingin menghapus kategori <strong id="deleteCategoryName"></strong>?
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Batal</button>
        <a href="#" id="deleteConfirmBtn" class="btn btn-danger">Hapus</a>
      </div>
    </div>
  </div>
</div>

{% endblock %}