<%- 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">Manage Api</h4>
            </div>
          </div>
        </div>
      </div>
<div class="card shadow-sm border-0">
  <div class="card-body">

    <% const items = [
      { key: "geminiApi", label: "Gemini AI API" },
      { key: "openAi", label: "OpenAI API" },
    ]; %>

    <% items.forEach(item => { %>
      <div class="row mb-3 align-items-center">
        
        <!-- Label Column -->
        <div class="col-md-2">
          <label class="fw-semibold text-dark"><%= item.label %></label>
        </div>

        <!-- Controls Column -->
        <div class="col-md-10">
          <div class="input-group">
            
            <!-- Checkbox (Inside Input Group) -->
            <div class="input-group-text bg-light">
              <input class="form-check-input mt-0 leadCheck" 
                     type="checkbox" 
                     data-key="<%= item.key %>"
                     <%= setting[item.key]?.enabled ? "checked" : "" %>
                     aria-label="Enable option">
              <span class="ms-2 small">Enable</span>
            </div>

            <% if(item.key === "manualData") { %>
              <!-- BUTTON for Manual Data (Redirect) -->
              <!-- Replace href below with your actual redirect link -->
              <a href="/uploadleads" 
                 class="btn btn-outline-primary flex-grow-1 text-start">
                 <i class="bi bi-box-arrow-up-right me-1"></i> Import Lead Data
              </a>

            <% } else { %>
              <!-- INPUT for API Keys -->
              <input type="text" 
                     class="form-control apiKeyInput" 
                     data-key="<%= item.key %>"
                     placeholder="Enter <%= item.label %> Key"
                     value="<%= setting[item.key]?.apiKey || "" %>">
            <% } %>

          </div>
        </div>
      </div>
    <% }) %>

    <div class="d-flex justify-content-end mt-4">
      <button id="saveBtn" class="btn btn-primary px-4">
        Save Changes
      </button>
    </div>

  </div>
</div>


  </div>
</div>  

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