<%- include("../partials/_user_header") %>

<style>
  main {
    display: flex;
    flex-direction: column;
    align-items: start;
    text-align: start;
    font-family: "Source Sans 3", sans-serif;
    justify-content: start;
    min-height: calc(90vh - 65px);
    /* height: 100vh; */
    padding: 25px 65px;
    height: auto;
  }
</style>
<link rel="stylesheet" href="/css/dashboard.css" />
<main>
  <div class="container-fluid p-0 mb-3 mt-3">
    <h3>Super Admin</h3>

    <button
      type="button"
      class="btn btn-primary"
      data-bs-toggle="modal"
      data-bs-target="#add-category"
    >
      Add New Category
    </button>

    <!-- Modal -->
    <div
      class="modal modal-backdrop-bg fade"
      id="add-category"
      tabindex="-1"
      aria-labelledby="exampleModalLabel"
      aria-hidden="true"
      style="color: black"
    >
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Add Category</h5>
            <button
              type="button"
              class="btn-close"
              data-bs-dismiss="modal"
              aria-label="Close"
            ></button>
          </div>
          <div class="modal-body">
            <form id="categoryForm">
              <div class="mb-3">
                <label for="title" class="form-label">Title</label>
                <input
                  type="text"
                  name="title"
                  class="form-control"
                  id="title"
                />
              </div>
              <div class="mb-3">
                <label for="description" class="form-label">Description</label>
                <input
                  type="text"
                  class="form-control"
                  id="description"
                  name="description"
                />
              </div>
              <div class="mb-3">
                <div
                  style="display: none"
                  class="error error-message"
                  id="errorMessage"
                ></div>
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button
              type="button"
              class="btn btn-secondary"
              data-bs-dismiss="modal"
            >
              Close
            </button>
            <button
              id="submitCategoryBtn"
              type="button"
              class="btn btn-primary"
            >
              Add Category
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>

  <h3>Categories</h3>
  <table class="table table-dark table-striped">
    <thead>
      <tr>
        <th scope="col">Title</th>
        <th scope="col">Description</th>
        <th scope="col">isVisible</th>
        <th scope="col">Edit/Delete</th>
      </tr>
    </thead>
    <tbody>
      <% categories.forEach(function(category, index) { %>
      <tr>
        <th scope="row"><%=category.title%></th>
        <td><%=category.description%></td>
        <td>
          <%if(category.isVisible){%> Is published <%}else{%>Is Not published
          <%}%>
        </td>
        <td>
          <div style="display: flex">
            <button
              type="button"
              data-bs-toggle="modal"
              data-bs-target="#editModal<%=index%>"
              class="btn btn-primary btn-sm"
              style="margin-right: 8px"
            >
              Edit
            </button>
            <button type="button" class="btn btn-danger btn-sm">Delete</button>
          </div>
        </td>
      </tr>

      <!-- Edit Modal -->
      <div
        class="modal fade"
        id="editModal<%=index%>"
        tabindex="-1"
        aria-labelledby="editModalLabel"
        aria-hidden="true"
        style="color: black"
      >
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="editModalLabel">
                Edit <%=category.title%>
              </h5>
              <button
                type="button"
                class="btn-close"
                data-bs-dismiss="modal"
                aria-label="Close"
              ></button>
            </div>
            <div class="modal-body">
              <form id="edit-category-form">
                <div class="mb-3">
                  <label for="editTitle" class="form-label">Title</label>
                  <input
                    type="text"
                    class="form-control"
                    id="editTitle"
                    value="<%=category.title%>"
                  />
                </div>
                <div class="mb-3">
                  <label for="editDescription" class="form-label"
                    >Description</label
                  >
                  <input
                    type="hidden"
                    id="categoryID"
                    value="<%=category._id %>"
                  />
                  <input
                    type="text"
                    class="form-control"
                    id="editDescription"
                    value="<%=category.description%>"
                  />
                </div>
                <div class="form-check form-switch">
                  <input class="form-check-input" type="checkbox"
                  id="flexSwitchCheckChecked" <%= category.isVisible ? "checked"
                  : "" %>
                </div>
              </form>
            </div>
            <div class="modal-footer">
              <button
                type="button"
                class="btn btn-secondary"
                data-bs-dismiss="modal"
              >
                Close
              </button>
              <button type="button" class="btn btn-primary">
                Save changes
              </button>
            </div>
          </div>
        </div>
      </div>

      <% }) %>
    </tbody>
  </table>
</main>

<script
  src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
  integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
  crossorigin="anonymous"
></script>

<script src="/js/adminHandler.js"></script>
