<%- include('includes/header', {username: admin[0].name,email: admin[0].email } ) %>

  <div class="body-wrapper">
    <div class="container-fluid">
      <div class="card bg-info-subtle shadow-none position-relative overflow-hidden mb-4">
        <div class="card-body px-4 py-3">
          <div class="row align-items-center">
            <div class="col-md-8 col-sm-7">
              <h4 class="fw-semibold mb-1">Business Type </h4>

            </div>

            <div class="col-md-4 col-sm-5 text-md-end text-sm-start mt-3 mt-md-0">
              <!-- Add Category Button -->
              <button id="addCategoryBtn" class="btn btn-primary px-4">
                <i class="fa-solid fa-plus me-2"></i> Add Business Type
              </button>

            </div>
          </div>

        </div>
      </div>
      <div class="datatables">


        <div class="card">
          <div class="card-body">
            <div class="table-responsive">
              <table id="zero_config" class="table table-striped table-bordered text-nowrap align-middle">
                <thead>
                  <tr>
                    <th>Type</th>
                    <th>Icon</th>
                    <th>Short Description</th>
                    <th>Status</th>
                    <th class="action-col">Action</th>
                  </tr>
                </thead>

                <tbody>

                </tbody>
              </table>
            </div>
          </div>
        </div>

        <!-- Category Modal -->
        <div class="modal fade" id="categoryModal" tabindex="-1" aria-hidden="true">
          <div class="modal-dialog modal-md modal-dialog-top">
            <div class="modal-content border-0 shadow-lg rounded-3">

              <div class="modal-header bg-light-subtle text-white">
                <h5 class="modal-title fw-semibold" id="categoryModalLabel">Add BusinessType </h5>
                <button type="button" class="btn-close btn-close-dark" data-bs-dismiss="modal"></button>
              </div>

              <div class="modal-body p-4">
                <form id="categoryForm">
                  <input type="hidden" id="categoryId" />

                  <div class="mb-3">
                    <label class="form-label">Business Type <span class="text-danger">*</span></label>
                    <input type="text" id="type" class="form-control" required />
                  </div>

                  <div class="mb-3">
                    <label class="form-label">Icon Name <span class="text-danger">*</span></label>
                    <input type="text" id="iconName" class="form-control" required />
                    <small class="text-muted d-block mt-1">
                      <strong>Note:</strong> Please copy the <strong>Component Name</strong> of
                      the icon
                      from
                      <a href="https://lucide.dev/icons" target="_blank">
                        https://lucide.dev/icons
                      </a>
                    </small>
                  </div>

                  <div class="mb-3">
                    <label class="form-label">Short Description <span class="text-danger">*</span></label>
                    <textarea id="shortDescription" class="form-control" rows="3" required></textarea>
                  </div>

                  <div class="form-check form-switch mb-3">
                    <input class="form-check-input" type="checkbox" id="categoryStatus" checked />
                    <label class="form-check-label">Enable BusinessType</label>
                  </div>

                  <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">Save</button>
                  </div>
                </form>

              </div>



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


      </div>



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

  <%- include('includes/allscripts') %>
    <script src="/js/view/category.js"></script>