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

{% block title %}IP Management{% endblock %}

{% block main_area %}
  <h2 class="fw-bold pt-3 pb-2">IP 관리 대장</h2>
  {% if not request.user.is_authenticated %}
    <p class="text-danger">비로그인 익명사용자로 접근 중입니다.
      <br>로그인시 로그인 사용자가 등록한 데이터만 조회됩니다.
    </p>
  {% endif %}
  <!-- 검색 폼 -->
  <div class="row">
    <div class="col-4"></div>
    <div class="col-4"></div>
    <div class="col-4">
      <form method="get" class="mb-3">
        <div class="input-group">
          <input type="text" name="var_search" class="form-control" placeholder="Search by Author or Network Name..." value="{{ var_search }}">
          <button type="submit" class="btn btn-outline-primary">Search</button>
        </div>
      </form>
    </div>
  </div>

  <!-- IP 레코드 목록 -->
  <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">Network Name</th>
          <th scope="col">Server Name</th>
          <th scope="col">Location</th>
          <th scope="col">IP Address</th>
          <th scope="col">Remark</th>
          <th scope="col">Author</th>
          <th scope="col">Updated At</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.network_nm }}</td>
            <td>{{ record.svr_nm }}</td>
            <td>{{ record.contents }}</td>
            <td>{{ record.ip_addrs }}</td>
            <td>{{ record.remark }}</td>
            <td>{{ record.author }}</td>
            <td>{{ record.updated_at|date:"Y-m-d H:i" }}</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 IP Record
        </button>
        <button type="submit" formaction="{% url 'butler:ip_mgmt_delete' %}" class="btn btn-danger">
          <i class="bi bi-trash"></i>
          Delete Selected
        </button>
        <button type="button" id="editSelectedButton" class="btn btn-warning" disabled="disabled">
          <i class="bi bi-pencil-square"></i>
          Edit Selected
        </button>
      </div>
    {% endif %}
  </form>

  <!-- 수정 모달들 (form 중첩 제거) -->
  {% for record in records %}
    <div class="modal fade" id="editDataModal-{{ record.id }}" tabindex="-1" aria-labelledby="editDataModalLabel-{{ record.id }}" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header bg-warning text-dark">
            <h5 class="modal-title" id="editDataModalLabel-{{ record.id }}">Edit IP Record</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            <form id="editDataForm-{{ record.id }}" method="post" action="{% url 'butler:ip_mgmt_edit' record.id %}{% if var_search %}?var_search={{ var_search }}{% endif %}">
              {% csrf_token %}
              {% if var_search %}<input type="hidden" name="var_search" value="{{ var_search }}">{% endif %}
              <div class="mb-3">
                <label for="networkNm-{{ record.id }}" class="form-label">Network Name</label>
                <input type="text" class="form-control" id="networkNm-{{ record.id }}" name="network_nm" value="{{ record.network_nm }}" required="required">
              </div>
              <div class="mb-3">
                <label for="ipAddrs-{{ record.id }}" class="form-label">IP Address</label>
                <input type="text" class="form-control" id="ipAddrs-{{ record.id }}" name="ip_addrs" value="{{ record.ip_addrs }}" required="required">
              </div>
              <div class="mb-3">
                <label for="svrNm-{{ record.id }}" class="form-label">Server Name</label>
                <input type="text" class="form-control" id="svrNm-{{ record.id }}" name="svr_nm" value="{{ record.svr_nm }}" required="required">
              </div>
              <div class="mb-3">
                <label for="contents-{{ record.id }}" class="form-label">Location</label>
                <textarea class="form-control" id="contents-{{ record.id }}" name="contents">{{ record.contents }}</textarea>
              </div>
              <div class="mb-3">
                <label for="remark-{{ record.id }}" class="form-label">Remark</label>
                <textarea class="form-control" id="remark-{{ record.id }}" name="remark">{{ record.remark }}</textarea>
              </div>
              <button type="submit" class="btn btn-primary">Save Changes</button>
            </form>
          </div>
        </div>
      </div>
    </div>
  {% endfor %}

  <!-- 등록 모달 -->
  <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-title" 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 'butler:ip_mgmt_add' %}">
            {% csrf_token %}
            <div class="mb-3">
              <label for="networkNm" class="form-label">Network Name</label>
              <input type="text" class="form-control" id="networkNm" name="network_nm" required="required">
            </div>
            <div class="mb-3">
              <label for="ipAddrs" class="form-label">IP Address</label>
              <input type="text" class="form-control" id="ipAddrs" name="ip_addrs" required="required">
            </div>
            <div class="mb-3">
              <label for="svrNm" class="form-label">Server Name</label>
              <input type="text" class="form-control" id="svrNm" name="svr_nm" required="required">
            </div>
            <div class="mb-3">
              <label for="contents" class="form-label">Location</label>
              <textarea class="form-control" id="contents" name="contents"></textarea>
            </div>
            <div class="mb-3">
              <label for="remark" class="form-label">Remark</label>
              <textarea class="form-control" id="remark" name="remark"></textarea>
            </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');

      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;
        }
      });

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