{% extends "components/base.html" %}

{% block igw_name %}IP Management{% endblock %}

{% block main_area %}
<h2 class="fw-bold pt-3 pb-2">Igw 관리 대장</h2>
{% if not request.user.is_authenticated %}
<p class="text-danger">비로그인 익명사용자로 접근 중입니다.
  {% endif %}
<form id="recordForm" method="post" action="">
  {% csrf_token %}
  <table class="table table-striped table-hover table-bordered">
    <thead class="table-dark">
      <tr>
        <th scope="col">Select</th>
        <th scope="col">Igw Name</th>
        <th scope="col">Igw ID</th>
        <th scope="col">routing_table</th>
      </tr>
    </thead>
    <tbody>
      {% for record in records %}
        <tr data-record-id="{{ record.id }}">
          <td class="text-center">
            <input type="checkbox" name="selected_records" value="{{ record.id }}" class="form-check-input record-checkbox">
          </td>
          <td>{{ record.igw_name }}</td>
          <td>{{ record.igw_id }}</td>
          <td>{{ record.routing_table }}</td>
        </tr>

        {% empty %}
        <tr>
          <td colspan="9" class="text-center">No records found.</td>
        </tr>
      {% endfor %}
    </tbody>
  </table>

  {% if request.user.is_authenticated %}
  <!-- 버튼 컨테이너 -->
  <div class="d-flex justify-content-between align-items-center mb-3">
    <!-- 데이터 등록 버튼 -->
    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addDataModal">
      <i class="bi bi-plus-lg"></i>
      Add New Igw Record
    </button>

    <!-- 전체 삭제 버튼 -->
    <button type="submit" formaction="{% url 'nhnc_mgmt:igw_delete' %}" class="btn btn-danger">
      <i class="bi bi-trash"></i>
      Delete Selected
    </button>
  </div>
  {% endif %}
</form>

<!-- 데이터 등록 모달 -->
<div class="modal fade" id="addDataModal" tabindex="-1" aria-labelledby="addDataModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header bg-success text-white">
        <h5 class="modal-igw_name" id="addDataModalLabel">Add New IP Record</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <!-- 데이터 등록 폼 -->
        <form id="addDataForm" method="post" action="{% url 'nhnc_mgmt:igw_add' %}">
          {% csrf_token %}
          <div class="mb-3">
            <label for="igw_name" class="form-label">Igw Name</label>
            <input type="text" class="form-control" id="igw_name" name="igw_name" required="required">
          </div>
          <div class="mb-3">
            <label for="routing_table" class="form-label">routing_table</label>
            <input type="text" class="form-control" id="routing_table" name="routing_table" required="required">
          </div>
          <div class="mb-3">
            <label for="igw_id" class="form-label">igw_id</label>
            <input type="text" class="form-control" id="igw_id" name="igw_id" required="required">
          </div>
          <button type="submit" class="btn btn-primary">Submit</button>
        </form>
      </div>
    </div>
  </div>
</div>

<script>
  document.addEventListener('DOMContentLoaded', function () {
    const editButton = document.getElementById('editSelectedButton');
    const checkboxes = document.querySelectorAll('.record-checkbox');

    // Event listener to enable/disable the edit button
    document.addEventListener('change', function () {
      const selected = [...checkboxes].filter(checkbox => checkbox.checked);
      if (selected.length === 1) {
        editButton.disabled = false;
        editButton.dataset.recordId = selected[0].value;
      } else {
        editButton.disabled = true;
        delete editButton.dataset.recordId;
      }
    });

    // Event listener to open the edit modal
    editButton.addEventListener('click', function () {
      const recordId = editButton.dataset.recordId;
      if (recordId) {
        const modal = new bootstrap.Modal(document.getElementById(`editDataModal-${recordId}`));
        modal.show();
      }
    });
  });
</script>
{% endblock %}