<!-- Testimonials Tab -->
<div class="tab-pane fade" id="testimonials" 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-info-circle me-2"></i>Basic 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="testimonialsHeading"
                value="<%= data.testimonials?.heading || '' %>" placeholder="e.g., Student Reviews & Testimonials" />
            </div>
            <div class="col-md-6">
              <label class="form-label fw-medium">Subheading</label>
              <input type="text" class="form-control" id="testimonialsSubheading"
                value="<%= data.testimonials?.subheading || '' %>" placeholder="e.g., What Our Students Say" />
            </div>
            <div class="col-md-6">
              <label class="form-label fw-medium">Video URL</label>
              <input type="text" class="form-control" id="testimonialsVideoUrl"
                value="<%= data.testimonials?.videoUrl || '' %>" placeholder="https://www.youtube.com/watch?v=..." />
            </div>
            <div class="col-md-6">
              <label class="form-label fw-medium">Video Thumbnail</label>
              <div class="input-group mb-2">
                <input type="text" class="form-control" id="testimonialsVideoThumbnail"
                  value="<%= data.testimonials?.videoThumbnail || '' %>" />
                <button type="button" class="btn btn-outline-primary btn-upload-image"
                  data-target-input="testimonialsVideoThumbnail" data-image-type="home">
                  <i class="fas fa-upload me-1"></i>Upload
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Testimonial Items -->
    <div class="col-md-12">
      <div class="card border shadow-sm">
        <div class="card-header bg-white d-flex justify-content-between align-items-center">
          <h6 class="mb-0">
            <i class="fas fa-comments me-2"></i>Testimonials
          </h6>
          <button type="button" class="btn btn-sm btn-primary" id="addTestimonialBtn">
            <i class="fas fa-plus me-1"></i>Add Testimonial
          </button>
        </div>
        <div class="card-body" id="testimonialsItemsContainer">
          <% (data.testimonials?.items || []).forEach(function(item, index) { %>
            <div class="card mb-3 bg-light border testimonial-item" data-index="<%= index %>">
              <div class="card-header d-flex justify-content-between align-items-center bg-white">
                <h6 class="card-title fw-bold mb-0">Testimonial <span class="testimonial-label">
                    <%= index + 1 %>
                  </span></h6>
                <button type="button" class="btn btn-sm btn-outline-danger btn-remove-testimonial">
                  <i class="fas fa-trash-alt"></i>
                </button>
              </div>
              <div class="card-body">
                <div class="row g-3">
                  <div class="col-md-6">
                    <label class="form-label fw-medium">Name</label>
                    <input type="text" class="form-control" id="testimonialsName_<%= index %>"
                      value="<%= item.name || '' %>" placeholder="e.g., Sohel Tanvir" />
                  </div>
                  <div class="col-md-6">
                    <label class="form-label fw-medium">Role</label>
                    <input type="text" class="form-control" id="testimonialsRole_<%= index %>"
                      value="<%= item.role || '' %>" placeholder="e.g., Student" />
                  </div>
                  <div class="col-md-6">
                    <label class="form-label fw-medium">Country</label>
                    <input type="text" class="form-control" id="testimonialsCountry_<%= index %>"
                      value="<%= item.country || '' %>" placeholder="e.g., Canada" />
                  </div>
                  <div class="col-md-6">
                    <label class="form-label fw-medium">Rating</label>
                    <input type="number" class="form-control" id="testimonialsRating_<%= index %>"
                      value="<%= item.rating || 5 %>" min="1" max="5" />
                  </div>
                  <div class="col-md-12">
                    <label class="form-label fw-medium">Comment</label>
                    <textarea class="form-control" id="testimonialsComment_<%= index %>" rows="3"
                      placeholder="Enter testimonial comment"><%= item.comment || '' %></textarea>
                  </div>
                  <div class="col-md-12">
                    <label class="form-label fw-medium">Avatar</label>
                    <div class="input-group mb-2">
                      <input type="text" class="form-control" id="testimonialsAvatar_<%= index %>"
                        value="<%= item.avatar || '' %>" />
                      <button type="button" class="btn btn-outline-primary btn-upload-image"
                        data-target-input="testimonialsAvatar_<%= index %>" data-image-type="home">
                        <i class="fas fa-upload me-1"></i>Upload
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <% }); %>
        </div>
      </div>
    </div>
  </div>
</div>

<script>
  // Register scraper to collect Testimonials data before form submit
  window.homeScrapers = window.homeScrapers || {};
  window.homeScrapers.testimonials = () => {
    const getVal = (id) => (document.getElementById(id)?.value || "").trim();

    const items = [];
    document.querySelectorAll(".testimonial-item").forEach((el, idx) => {
      const index = el.getAttribute("data-index") || idx;

      const name = getVal(`testimonialsName_${index}`);
      const role = getVal(`testimonialsRole_${index}`);
      const country = getVal(`testimonialsCountry_${index}`);
      const ratingStr = getVal(`testimonialsRating_${index}`);
      const rating = ratingStr ? parseInt(ratingStr, 10) : 5;
      const comment = getVal(`testimonialsComment_${index}`);
      const avatar = getVal(`testimonialsAvatar_${index}`);

      if (name || role || country || comment || avatar) {
        items.push({
          name,
          role,
          country,
          rating: isNaN(rating) ? 5 : Math.min(Math.max(rating, 1), 5),
          comment,
          avatar,
        });
      }
    });

    return {
      heading: getVal("testimonialsHeading"),
      subheading: getVal("testimonialsSubheading"),
      videoUrl: getVal("testimonialsVideoUrl"),
      videoThumbnail: getVal("testimonialsVideoThumbnail"),
      items,
    };
  };

  // Client-side add/remove for testimonials
  document.addEventListener("DOMContentLoaded", function () {
    const container = document.getElementById("testimonialsItemsContainer");
    const addBtn = document.getElementById("addTestimonialBtn");

    if (!container || !addBtn) return;

    const updateLabels = () => {
      container.querySelectorAll(".testimonial-item").forEach((el, idx) => {
        el.setAttribute("data-index", String(idx));

        const label = el.querySelector(".testimonial-label");
        if (label) label.textContent = String(idx + 1);

        el.querySelectorAll("input, textarea").forEach((input) => {
          if (!input.id) return;
          const newId = input.id.replace(/testimonials\w+_\d+/, (match) => {
            const [prefix] = match.split("_");
            return `${prefix}_${idx}`;
          });
          input.id = newId;
        });
      });
    };

    addBtn.addEventListener("click", () => {
      const template = container.querySelector(".testimonial-item");
      if (!template) return;

      const clone = template.cloneNode(true);

      clone.querySelectorAll("input, textarea").forEach((input) => {
        input.value = "";
      });

      container.appendChild(clone);
      updateLabels();
    });

    container.addEventListener("click", (e) => {
      const btn = e.target.closest(".btn-remove-testimonial");
      if (!btn) return;

      const card = btn.closest(".testimonial-item");
      if (!card) return;

      const all = container.querySelectorAll(".testimonial-item");
      if (all.length <= 1) {
        return;
      }

      card.remove();
      updateLabels();
    });

    updateLabels();
  });
</script>