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

  <div class="body-wrapper">
    <div class="container-fluid">
      <!-- Header Section -->
      <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 How it work</h4>
            </div>

            <div class="col-md-4 col-sm-5 text-md-end text-sm-start mt-3 mt-md-0">
              <button id="addHowItWorkBtn" class="btn btn-primary px-4">
                <i class="fa-solid fa-plus me-2"></i> Add How it work
              </button>
            </div>
          </div>
        </div>
      </div>
      <div class="card shadow-sm">
        <div class="card-body">

          <h4 class="mb-4">Update How it work</h4>
          <form id="sectionForm"
            data-existing-labels='<%= section && section.labels ? JSON.stringify(section.labels) : "[]" %>'>

            <!-- TYPE -->
            <input type="hidden" name="type" value="<%= section ? section.type : 'howitwork' %>">

            <!-- LABEL + TITLE (ONE LINE) -->
            <div class="row mb-3">
              <div class="col-md-6">
                <label class="form-label fw-semibold">Section Label</label>
                <input type="text" class="form-control" name="badge" value="<%= section ? section.badge : '' %>"
                  placeholder="How It Work Section Label">
              </div>
              <div class="col-md-6">
                <label class="form-label fw-semibold">Title</label>
                <input type="text" class="form-control" name="title" value="<%= section ? section.title : '' %>"
                  placeholder="Custom Title for Every Requirement">
                <small class="text-muted">
                  Highlight any word using <code>&lt;span&gt;word&lt;/span&gt;</code>
                </small>
              </div>
            </div>

            <!-- SHORT DESCRIPTION -->
            <div class="mb-4">
              <label class="form-label fw-semibold">Short Description</label>
              <textarea class="form-control" name="shortDescription" rows="3"
                placeholder="Write short description here..."><%= section ? section.shortDescription : '' %></textarea>
            </div>

            <!-- FEATURES / LABELS -->
            <div class="mb-4">
              <div class="d-flex justify-content-between align-items-center mb-2">
                <label class="form-label fw-semibold mb-0">
                  Features
                </label>

                <button type="button" id="addSectionFeatureBtn" class="btn btn-sm btn-outline-primary">
                  <i class="fa fa-plus"></i> Add Feature
                </button>
              </div>

              <div id="sectionFeatureContainer"></div>
            </div>

            <!-- BUTTON -->
            <button type="submit" class="btn btn-primary px-4">
              Update Section
            </button>

          </form>

        </div>
      </div>
      <!-- Table Section -->
      <div class="datatables">
        <div class="card">
          <div class="card-body">
            <div class="table-responsive">
              <table id="howItWorkTable" class="table table-striped table-bordered align-middle">
                <thead>
                  <tr>
                    <th>Image</th>
                    <th>Icon</th>
                    <th>Title</th>
                    <th>Description</th>
                    <th class="action-col">Action</th>
                  </tr>
                </thead>
              </table>
            </div>
          </div>
        </div>

        <!-- MODAL -->
        <div class="modal fade" id="howItWorkModal" tabindex="-1">
          <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content">

              <form id="howItWorkForm" enctype="multipart/form-data">
                <div class="modal-header">
                  <h5 class="modal-title" id="howitworktitle">How It Works</h5>
                  <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>

                <div class="modal-body">
                  <input type="hidden" name="id" id="howItWorkId">

                  <!-- ICON -->
                  <div class="mb-3">
                    <label class="form-label">Icon Name <span class="text-danger">*</span></label>
                    <input type="text" name="iconName" 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>

                  <!-- TITLE -->
                  <div class="mb-3">
                    <label class="form-label">Title <span class="text-danger">*</span></label>
                    <input type="text" name="title" id="title" class="form-control" required>
                  </div>

                  <!-- DESCRIPTION + AI -->
                  <div class="mb-3">
                    <label class="form-label d-flex justify-content-between">
                      <span>Description <span class="text-danger">*</span></span>
                      <button type="button" class="btn btn-sm btn-outline-secondary" id="generateHowItWorkAI">
                        Generate AI
                      </button>
                    </label>
                    <textarea name="description" id="description" class="form-control" rows="3" required></textarea>
                  </div>

                  <!-- FEATURES -->
                  <div class="mb-3">
                    <div class="d-flex justify-content-between align-items-center mb-2">
                      <label class="form-label mb-0">
                        Features <span class="text-danger">*</span>
                      </label>

                      <button type="button" id="addFeatureBtn" class="btn btn-sm btn-outline-primary">
                        <i class="fa fa-plus"></i> Add Feature
                      </button>
                    </div>

                    <!-- Feature inputs will come here -->
                    <div id="featureContainer" class="mt-2"></div>
                  </div>



                  <!-- IMAGE -->
                  <div class="mb-3">
                    <label class="form-label">Image <span class="text-danger">*</span></label>
                    <input type="file" name="image" id="imageInput" class="form-control">
                    <img id="previewImg" class="mt-2 rounded" style="max-width:120px; display:none;">
                    <small class="text-muted d-block mt-1">
                      <i class="fa-solid fa-circle-info text-primary"></i>
                      Recommended Size: <strong>550px x 370px</strong>,Formats: <strong>/jpeg|jpg|png|webp/</strong>
                    </small>
                  </div>
                </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>

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