cms.uldp.edu.vn/views/admin/home/sections/partners.ejs

<!-- Partners Tab -->
<div class="tab-pane fade" id="partners" role="tabpanel">
  <div class="row g-4">
    <!-- Visa Consultancy Awards -->
    <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-award me-2"></i>Awards & Certifications (Fixed 4 Items)
          </h6>
        </div>
        <div class="card-body">
          <small class="text-muted d-block mb-3">Award icons trên homepage hiển thị khoảng 124x124px. Khuyến nghị upload ảnh vuông hoặc logo nền trong suốt tối thiểu 248x248px.</small>
          <div id="visaConsultancyContainer">
            <% for(let i=0; i<4; i++) { 
                 const item = (data.partners?.visaConsultancy?.items && data.partners.visaConsultancy.items[i]) || {};
            %>
              <div class="card mb-3 bg-light border visa-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">Award #<%= i + 1 %></h6>
                  </div>
                  <div class="row g-3">
                    <div class="col-md-8">
                      <label class="form-label fw-medium">Award Name</label>
                      <input type="text" class="form-control visa-name" id="visaName_<%= i %>" value="<%= item.name || '' %>" placeholder="Award Name" maxlength="48" data-maxlength="48" />
                    </div>
                    <div class="col-md-4">
                      <label class="form-label fw-medium">Year</label>
                      <input type="text" class="form-control visa-year" id="visaYear_<%= i %>" value="<%= item.year || '' %>" placeholder="e.g., 2025" maxlength="8" data-maxlength="8" />
                    </div>
                    <div class="col-md-12">
                      <label class="form-label fw-medium">Icon / Logo</label>
                      <small class="text-muted d-block mb-1">Khuyến nghị ảnh vuông hoặc logo nền trong suốt 248x248px để hiển thị sắc nét.</small>
                      <div class="input-group">
                        <input type="text" class="form-control visa-icon" id="visaIcon_<%= i %>" value="<%= item.icon || '' %>" maxlength="255" data-maxlength="255" />
                        <button type="button" class="btn btn-outline-primary btn-upload-image" 
                                data-target-input="visaIcon_<%= i %>" data-image-type="home">
                          <i class="fas fa-upload me-1"></i>Upload
                        </button>
                      </div>
                      <div class="mt-2 preview-container">
                        <img src="<%= item.icon || '' %>" class="img-thumbnail <%= item.icon ? '' : 'd-none' %>" style="height: 60px; object-fit: contain;">
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            <% } %>
          </div>
        </div>
      </div>
    </div>

    <!-- Brand Logos -->
    <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-images me-2"></i>Brand Partner Logos (Slider)
          </h6>
          <button type="button" class="btn btn-sm btn-outline-primary" onclick="addBrandPartnerItem()">
            <i class="fas fa-plus me-1"></i>Add Logo
          </button>
        </div>
        <div class="card-body">
          <small class="text-muted d-block mb-3">Brand logo trong slider hiện hiển thị khoảng 159x48px. Khuyến nghị dùng SVG hoặc logo ngang nền trong suốt tối thiểu 320x96px.</small>
          <div id="brandPartnersContainer" class="row g-3">
            <% (data.partners?.brands?.items || []).forEach(function(item, index) { %>
              <div class="col-md-4 brand-partner-item">
                <div class="card border bg-light h-100">
                  <div class="card-body py-2">
                    <div class="d-flex justify-content-between align-items-center mb-2">
                      <span class="small fw-bold">Brand Logo</span>
                      <button type="button" class="btn btn-link text-danger p-0" onclick="this.closest('.brand-partner-item').remove()">
                        <i class="fas fa-times"></i>
                      </button>
                    </div>
                    <div class="input-group input-group-sm">
                      <input type="text" class="form-control brand-logo-input" id="brandLogo_<%= index %>" value="<%= item.logo || '' %>" maxlength="255" data-maxlength="255" />
                      <button type="button" class="btn btn-outline-primary btn-upload-image" 
                              data-target-input="brandLogo_<%= index %>" data-image-type="home">
                        <i class="fas fa-upload"></i>
                      </button>
                    </div>
                    <small class="text-muted d-block mt-2">Khuyến nghị SVG hoặc ảnh ngang 320x96px để logo không bị mờ trong slider.</small>
                    <div class="mt-2 text-center preview-container">
                      <img src="<%= item.logo || '' %>" class="img-thumbnail <%= item.logo ? '' : 'd-none' %>" style="height: 50px; object-fit: contain;">
                    </div>
                  </div>
                </div>
              </div>
            <% }); %>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<script>
  // Thu thập dữ liệu partners
  window.homeScrapers = window.homeScrapers || {};
  window.homeScrapers.partners = function() {
    const visaItems = [];
    document.querySelectorAll('.visa-item').forEach(el => {
      visaItems.push({
        name: el.querySelector('.visa-name').value,
        year: el.querySelector('.visa-year').value,
        icon: el.querySelector('.visa-icon').value
      });
    });

    const brandItems = [];
    document.querySelectorAll('.brand-partner-item').forEach(el => {
      const logo = el.querySelector('.brand-logo-input').value;
      if (logo) brandItems.push({ logo: logo });
    });

    return {
      visaConsultancy: { items: visaItems },
      brands: { items: brandItems }
    };
  };

  function addBrandPartnerItem() {
    const container = document.getElementById('brandPartnersContainer');
    const id = 'brandLogo_' + Date.now();
    const div = document.createElement('div');
    div.className = 'col-md-4 brand-partner-item';
    div.innerHTML = `
      <div class="card border bg-light h-100">
        <div class="card-body py-2">
          <div class="d-flex justify-content-between align-items-center mb-2">
            <span class="small fw-bold">New Brand Logo</span>
            <button type="button" class="btn btn-link text-danger p-0" onclick="this.closest('.brand-partner-item').remove()">
              <i class="fas fa-times"></i>
            </button>
          </div>
          <div class="input-group input-group-sm">
            <input type="text" class="form-control brand-logo-input" id="${id}" maxlength="255" data-maxlength="255">
            <button type="button" class="btn btn-outline-primary btn-upload-image" data-target-input="${id}" data-image-type="home">
              <i class="fas fa-upload"></i>
            </button>
          </div>
          <small class="text-muted d-block mt-2">Khuyến nghị SVG hoặc ảnh ngang 320x96px để logo không bị mờ trong slider.</small>
          <div class="mt-2 text-center preview-container">
            <img src="" class="img-thumbnail d-none" style="height: 50px; object-fit: contain;">
          </div>
        </div>
      </div>
    `;
    container.appendChild(div);
    if (typeof initHomeCharacterCounters === "function") {
      initHomeCharacterCounters(div);
    }
  }
</script>