<!-- Video Gallery Tab -->
<div class="tab-pane fade" id="videogallery" role="tabpanel">
  <div class="row g-4">
    <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-video me-2"></i>Video Gallery
          </h6>
        </div>
        <div class="card-body">
          <div class="row g-3">
            <div class="col-md-12">
              <label class="form-label fw-medium">Heading</label>
              <input type="text" class="form-control" id="videoGalleryHeading"
                value="<%= data.videoGallery?.heading || '' %>" placeholder="e.g., VIDEO PLAY GALLERY" />
            </div>
            <div class="col-md-12">
              <label class="form-label fw-medium">Video URL</label>
              <input type="text" class="form-control" id="videoGalleryVideoUrl"
                value="<%= data.videoGallery?.videoUrl || '' %>" placeholder="https://example.com/video.mp4" />
            </div>
            <div class="col-md-12">
              <label class="form-label fw-medium">Thumbnail Image</label>
              <div class="input-group mb-2">
                <input type="text" class="form-control" id="videoGalleryThumbnail"
                  value="<%= data.videoGallery?.thumbnail || '' %>" />
                <button type="button" class="btn btn-outline-primary btn-upload-image"
                  data-target-input="videoGalleryThumbnail" data-image-type="home">
                  <i class="fas fa-upload me-1"></i>Upload
                </button>
              </div>
              <% if (data.videoGallery?.thumbnail) { %>
                <div class="mt-2">
                  <img src="<%= data.videoGallery.thumbnail %>" class="img-thumbnail"
                    style="height: 200px; width: 100%; object-fit: cover;" alt="Thumbnail preview" />
                </div>
                <% } %>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

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

    return {
      heading: getVal("videoGalleryHeading"),
      videoUrl: getVal("videoGalleryVideoUrl"),
      thumbnail: getVal("videoGalleryThumbnail"),
    };
  };
</script>