<div class="card-body">
  <div class="row">

      <!-- English seo Name Input -->
    <div class="col-sm-6 col-md-6">
      <div class="form-group mb-3">
        <label class="form-label" for="seo_en">
          <%= trans.cruds.SEO.fields.title_en %> <span class="text-danger">*</span>
        </label>
        <input
          class="form-control"
          type="text"
          id="seo_en"
          name="title_en"
          value="<%= seo?.title?.en || '' %>"
          placeholder="<%= trans.global.enter_your %> <%= trans.cruds.SEO.fields.title_en %>"
        />
      </div>
    </div>

    <!-- Arabic seo Name Input -->
    <div class="col-sm-6 col-md-6">
      <div class="form-group mb-3">
        <label class="form-label" for="seo_ar">
          <%= trans.cruds.SEO.fields.title_ar %> <span class="text-danger">*</span>
        </label>
        <input
          class="form-control"
          type="text"
          id="seo_ar"
          name="title_ar"
          value="<%= seo?.title?.ar || '' %>"
          placeholder="<%= trans.global.enter_your %> <%= trans.cruds.SEO.fields.title_ar %>"
        />
      </div>
    </div>

      <!-- Select Page Type -->
      <div class="col-md-6 mt-3">
        <label class="form-label"><%= trans.cruds.SEO.fields.viewType %></label>
        <select name="viewType" class="form-select select2" required>
          <% Object.values(SEO_PAGE_TYPES).forEach(item => { %>
            <option value="<%= item.value %>" 
              <%= seo?.viewType == item.value ? "selected" : "" %>>
              <%= item.label[lang] %>
            </option>
              <%= item.label[lang] %>
            </option>
          <% }) %>
        </select>
      </div>

      <!-- Keywords -->
      <div class="col-md-6 mt-3">
          <label class="form-label"><%= trans.cruds.SEO.fields.keyword %></label>

          <div class="d-flex gap-2">
            <input 
              type="text" 
              id="keywordInput"
              class="form-control"
              placeholder="Enter keyword and press Add"
            />
            <button type="button" class="btn btn-primary" onclick="addKeyword()" disabled>
              Add
            </button>
          </div>
          <div id="keywordList" class="mt-2"></div>
         <input type="hidden" name="keywords" id="keywordsHidden">
        </div>

       <!-- Description English -->
      <div class="col-md-12 mt-3">
        <div class="form-group mb-3">
        <label class="form-label"><%= trans.cruds.SEO.fields.decription_en %></label>
        <textarea name= "description_en" class="form-control" rows="4"><%= seo?.description?.en || '' %></textarea>
      </div>
    </div>
      <!-- Description Arabic -->
      <div class="col-md-12 mt-3">
        <div class="form-group mb-3">
        <label class="form-label"><%= trans.cruds.SEO.fields.decription_ar %>Description (Arabic)</label>
        <textarea name= "description_ar" class="form-control" rows="4"><%= seo?.description?.ar || '' %></textarea>
      </div>
     </div>  
  

   <!-- English Banner -->
    <div class="col-sm-6 col-md-6">
      <div class="d-flex gap-3 align-items-center">
        <div class="flex-grow-1">
          <div class="form-group mb-3">
            <label class="form-label" for="seo_banner_en">
              <%= trans.cruds.SEO.fields.banner +' ('+ trans.global.english +')' %>
            </label>
            <input
              class="form-control"
              id="seo_banner_en"
              type="file"
              name="banner_en"
              accept="image/jpeg, image/jpg, image/png, image/gif"
              onchange="previewImage(this, 'banner_preview_en')"
            />
          </div>
        </div>
        <!-- SINGLE CHECKBOX TO SHOW/HIDE ARABIC BANNER -->
        <div class="copy-image-upload checkmark-box copy-btn" title="Same image for Arabic">
          <input 
            class="form-check-input primary" 
            id="sameAsClone" 
            name="sameAsClone" 
            type="checkbox" 
            data-type="checkboximage" 
            checked
            onclick="toggleArabicBanner(this)"
          >
        </div>
        <img 
          class="img-100 image-preview-item" 
          id="banner_preview_en" 
          alt="English Banner" 
         src="<%= isFileExists(`${seo?.seo_banner_en?.file_path}`) && seo?.seo_banner_en?.file_path 
            ? '/' + seo.seo_banner_en.file_path.replace('public/', '') 
            : '/backend/images/dummy-image.jpg' %>"
        />
      </div>
    </div>

    <!-- Arabic Banner (Initially Hidden) -->
    <div class="col-sm-6 col-md-6" id="arabic_banner_section" style="display:none;">
      <div class="d-flex gap-5 align-items-center">
        <div class="flex-grow-1">
          <div class="form-group mb-3">
            <label class="form-label" for="seo_banner_ar">
              <%= trans.cruds.SEO.fields.banner +' ('+ trans.global.arabic +')' %>
            </label>
            <input
              class="form-control"
              id="seo_banner_ar"
              type="file"
              name="banner_ar"
              accept="image/jpeg, image/jpg, image/png, image/gif"
              onchange="previewImage(this, 'banner_preview_ar')"
            />
          </div>
        </div>
        <img 
          class="img-100 image-preview-item" 
          id="banner_preview_ar" 
          alt="Arabic Banner" 
          src="<%= isFileExists(`${seo?.seo_banner_ar?.file_path}`) && seo?.seo_banner_ar?.file_path ? '/' + seo.seo_banner_ar.file_path.replace('public/', '') : '/backend/images/dummy-image.jpg' %>"
        />
      </div>
    </div>


</div>
</div>

<script>
    let keywords = <%- JSON.stringify(seo?.keywords || []) %>;
    const addButton = document.querySelector('button[onclick="addKeyword()"]');
    const input = document.getElementById("keywordInput");

    function addKeyword() {
        const keyword = input.value.trim();

        if (!keyword) {
            return;
        }
        if (keywords.includes(keyword)) {
            addButton.disabled = true;
            return;
        }

        keywords.push(keyword);
        input.value = "";
        addButton.disabled = false;
        renderKeywords();
    }

    function removeKeyword(index) {
        keywords.splice(index, 1);
        renderKeywords();
        addButton.disabled = false;
    }

    function renderKeywords() {
        const container = document.getElementById("keywordList");
        container.innerHTML = "";

        keywords.forEach((keyword, index) => {
            const tag = document.createElement("span");
            tag.className = "badge bg-success me-2 mb-2 p-2";
            tag.style.fontSize = "16px";
            tag.innerHTML = `
                ${keyword}
                <span style="cursor:pointer; font-weight:bold; margin-left:8px;" onclick="removeKeyword(${index})">×</span>
            `;
            container.appendChild(tag);
        });

        document.getElementById("keywordsHidden").value = keywords.join(",");
    }

    input.addEventListener('input', () => {
        const currentValue = input.value.trim();
        addButton.disabled = keywords.includes(currentValue) && currentValue.length > 0;
    });

    renderKeywords();
</script>
