<!-- Achievements Tab -->
<div class="tab-pane fade" id="achievements" role="tabpanel">
  <div class="row g-4">
    <!-- Basic Info -->
    <div class="col-md-12">
      <div class="card border shadow-sm">
        <div class="card-header bg-white">
          <h6 class="mb-0">
            <i class="fas fa-chart-pie me-2"></i>General Information
          </h6>
        </div>
        <div class="card-body">
          <div class="row g-3">
            <div class="col-md-6">
              <label class="form-label fw-medium">Heading</label>
              <input
                type="text"
                class="form-control"
                id="achievementsHeading"
                value="<%= data.achievements?.heading || '' %>"
                placeholder="e.g., Our Achievements in Numbers"
                maxlength="56"
                data-maxlength="56"
              />
            </div>
            <div class="col-md-6">
              <label class="form-label fw-medium">Subheading</label>
              <input
                type="text"
                class="form-control"
                id="achievementsSubheading"
                value="<%= data.achievements?.subheading || '' %>"
                placeholder="e.g., Did You Know"
                maxlength="32"
                data-maxlength="32"
              />
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Achievement Items -->
    <div class="col-md-12">
      <div class="card border shadow-sm">
        <div class="card-header bg-white">
          <h6 class="mb-0">
            <i class="fas fa-list-ul me-2"></i>Achievement Items (Fixed 4 Items)
          </h6>
        </div>
        <div class="card-body" id="achievementItemsContainer">
          <% for(let i=0; i<4; i++) { 
               const item = (data.achievements?.items && data.achievements.items[i]) || {};
          %>
          <div class="card mb-3 bg-light border achievement-item">
            <div class="card-body">
              <div class="d-flex justify-content-between align-items-center mb-3">
                <h6 class="card-title fw-bold mb-0">Achievement #<%= i + 1 %></h6>
              </div>
              <div class="row g-3">
                <div class="col-md-3">
                  <label class="form-label fw-medium">Value (Number)</label>
                  <input
                    type="text"
                    class="form-control achievement-value"
                    id="achievementValue_<%= i %>"
                    value="<%= item.value || '' %>"
                    placeholder="e.g., 95"
                    maxlength="6"
                    data-maxlength="6"
                  />
                </div>
                <div class="col-md-3">
                  <label class="form-label fw-medium">Suffix</label>
                  <input
                    type="text"
                    class="form-control achievement-suffix"
                    id="achievementSuffix_<%= i %>"
                    value="<%= item.suffix || '' %>"
                    placeholder="e.g., %"
                    maxlength="4"
                    data-maxlength="4"
                  />
                </div>
                <div class="col-md-6">
                  <label class="form-label fw-medium">Label</label>
                  <input
                    type="text"
                    class="form-control achievement-label"
                    id="achievementLabel_<%= i %>"
                    value="<%= item.label || '' %>"
                    placeholder="e.g., Visa Success Rate"
                    maxlength="40"
                    data-maxlength="40"
                  />
                </div>
                <div class="col-md-12">
                  <label class="form-label fw-medium">Description</label>
                  <textarea
                    class="form-control achievement-description"
                    id="achievementDescription_<%= i %>"
                    rows="2"
                    placeholder="Short description of this achievement"
                    maxlength="120"
                    data-maxlength="120"
                  ><%= item.description || '' %></textarea>
                </div>
              </div>
            </div>
          </div>
          <% } %>
        </div>
      </div>
    </div>
  </div>
</div>

<script>
  // Đăng ký scraper cho phần achievements
  window.homeScrapers = window.homeScrapers || {};
  window.homeScrapers.achievements = function() {
    const items = [];
    document.querySelectorAll('.achievement-item').forEach(el => {
      items.push({
        value: el.querySelector('.achievement-value').value,
        suffix: el.querySelector('.achievement-suffix').value,
        label: el.querySelector('.achievement-label').value,
        description: el.querySelector('.achievement-description').value
      });
    });

    return {
      heading: document.getElementById('achievementsHeading').value,
      subheading: document.getElementById('achievementsSubheading').value,
      items: items
    };
  };
</script>
