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

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

    <div class="col-sm-6 col-md-6">
      <div class="form-group mb-3">
        <label class="form-label" for="range-date"><%= trans.cruds.ADVERTISEMENT.fields.choose_date %></label>
        <div class="input-group flatpicker-calender">
          <input type="text" name="date-format" class="form-control flatpickr-input" id="range-date" value="<%= advertisement.dateRange || '' %>" readonly="readonly">
        </div>
      </div>
    </div>

    <div class="col-sm-6 col-md-6">
      <div class="form-group mb-3">
        <label class="form-label" for="advertisement_url">
          <%= trans.cruds.ADVERTISEMENT.fields.url || "URL" %>
        </label>
        <input
          class="form-control"
          type="url"
          id="advertisement_url"
          name="url"
          value="<%= advertisement?.url || '' %>"
          placeholder="<%= trans.global.enter_your %> <%= trans.cruds.ADVERTISEMENT.fields.url || 'URL' %>"
        />
      </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="advertisement_banner_en">
              <%= trans.cruds.ADVERTISEMENT.fields.banner +' ('+ trans.global.english +')' %>
            </label>
            <input
              class="form-control"
              id="advertisement_banner_en"
              type="file"
              name="banner_en"
              accept="image/jpeg, image/jpg, image/png, image/gif"
              onchange="previewImage(this, 'banner_preview_en')"
            />
          </div>
        </div>

        <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
          >
        </div>

        <img 
          class="img-100 image-preview-item" 
          id="banner_preview_en" 
          alt="English Banner" 
          src="<%= isFileExists(`${advertisement?.advertisement_banner_en?.file_path}`) && advertisement?.advertisement_banner_en?.file_path 
            ? '/' + advertisement.advertisement_banner_en.file_path.replace('public/', '') 
            : '/backend/images/dummy-image.jpg' %>"
        />
      </div>
    </div>

    <!-- Arabic Banner -->
    <div class="col-sm-6 col-md-6" id="arabic_banner_section">
      <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="advertisement_banner_ar">
              <%= trans.cruds.ADVERTISEMENT.fields.banner +' ('+ trans.global.arabic +')' %>
            </label>
            <input
              class="form-control"
              id="advertisement_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(`${advertisement?.advertisement_banner_ar?.file_path}`) && advertisement?.advertisement_banner_ar?.file_path ? '/' + advertisement.advertisement_banner_ar.file_path.replace('public/', '') : '/backend/images/dummy-image.jpg' %>"
        />
      </div>
    </div>

    <!-- Description (English) -->
    <div class="col-md-12">
      <div class="form-group mb-3">
        <label class="form-label" for="description_en">
          <%= trans.cruds.ADVERTISEMENT.fields.description_en %>
        </label>
        <div class="input-group">
          <div class="description_editor richtexteditor" id="description_en">
            <%- advertisement?.description?.en || '' %>
          </div>
        </div>
      </div>
    </div>

    <!-- Description (Arabic) -->
    <div class="col-md-12">
      <div class="form-group mb-3">
        <label class="form-label" for="description_ar">
          <%= trans.cruds.ADVERTISEMENT.fields.description_ar %>
        </label>
        <div class="input-group">
          <div class="description_editor1 richtexteditor" id="description_ar">
            <%- advertisement?.description?.ar || '' %>
          </div>
        </div>
      </div>
    </div>

    <% 
      let adData = advertisement && advertisement.advertisement ? advertisement.advertisement : { displayAll: false, placement: [], images: [] };
      let selectedPlacements = Array.isArray(adData.placement) ? adData.placement.map(p => p.key) : [];
    %>

    
    <div class="advertisement-card display-card mt-3">
      <div class="advertisement-body">
        <h6 class="display-title">Display positions <span class="text-muted">(select all that apply)</span></h6>

        <!-- Display All -->
        <div class="form-check mb-3">
          <input class="form-check-input" type="checkbox" id="displayEverywhere"
                name="displayAll" value="on"
                <%= adData.displayAll ? 'checked' : '' %> />
          <label class="form-check-label" for="displayEverywhere">
            <%= trans.cruds.ADVERTISEMENT.ADVERTISEMENT_SYSTEM.display_on_all_page %>
          </label>
        </div>

        <!-- Grid for pages -->
        <div id="pageSelection" class="row-pageselection-main">
          <div class="row-pageselection-inner row g-4">
            <!-- HOME column -->
            <div class="col-md-6">
              <h6 class="group-title">Home</h6>
  
              <div class="form-check mb-2">
                <input class="form-check-input" type="checkbox" id="home" name="placement[]"
                      value="home" <%= selectedPlacements.includes('home') ? 'checked' : '' %> />
                <label class="form-check-label" for="home">
                  <%= trans.cruds.ADVERTISEMENT.ADVERTISEMENT_SYSTEM.home %>
                </label>
              </div>
  
              <div id="homeCollapse" class="home-nested">
                <div class="form-check">
                  <input class="form-check-input" type="checkbox" id="mainBanner" name="placement[]"
                        value="home.mainBanner"
                        <%= selectedPlacements.includes('home.mainBanner') ? 'checked' : '' %> />
                  <label class="form-check-label" for="mainBanner">
                    <%= trans.cruds.ADVERTISEMENT.ADVERTISEMENT_SYSTEM.home_main_banner %>
                  </label>
                </div>
  
                <div class="form-check">
                  <input class="form-check-input" type="checkbox" id="mediumPageLarge" name="placement[]"
                        value="home.mediumPageLarge"
                        <%= selectedPlacements.includes('home.mediumPageLarge') ? 'checked' : '' %> />
                  <label class="form-check-label" for="mediumPageLarge">
                    <%= trans.cruds.ADVERTISEMENT.ADVERTISEMENT_SYSTEM.home_medium_page_large %>
                  </label>
                </div>
  
                <div class="form-check">
                  <input class="form-check-input" type="checkbox" id="mediumPageTop" name="placement[]"
                        value="home.mediumPageTop"
                        <%= selectedPlacements.includes('home.mediumPageTop') ? 'checked' : '' %> />
                  <label class="form-check-label" for="mediumPageTop">
                    <%= trans.cruds.ADVERTISEMENT.ADVERTISEMENT_SYSTEM.home_medium_page_top %>
                  </label>
                </div>
  
                <div class="form-check">
                  <input class="form-check-input" type="checkbox" id="mediumPageBottom" name="placement[]"
                        value="home.mediumPageBottom"
                        <%= selectedPlacements.includes('home.mediumPageBottom') ? 'checked' : '' %> />
                  <label class="form-check-label" for="mediumPageBottom">
                    <%= trans.cruds.ADVERTISEMENT.ADVERTISEMENT_SYSTEM.home_medium_page_bottom %>
                  </label>
                </div>
  
                <div class="form-check">
                  <input class="form-check-input" type="checkbox" id="footer" name="placement[]"
                        value="home.footer"
                        <%= selectedPlacements.includes('home.footer') ? 'checked' : '' %> />
                  <label class="form-check-label" for="footer">
                    <%= trans.cruds.ADVERTISEMENT.ADVERTISEMENT_SYSTEM.home_footer %>
                  </label>
                </div>
              </div>
            </div>
  
            <!-- Right column -->
            <div class="col-md-6">
              <div class="ms-4">
                <h6 class="group-title">
                  <%= trans.cruds.ADVERTISEMENT.ADVERTISEMENT_SYSTEM.fresh_recommendation_page %>
                </h6>
  
                <div class="form-check mb-2">
                  <input class="form-check-input" type="checkbox" id="freshRecommendation" name="placement[]"
                        value="freshRecommendation"
                        <%= selectedPlacements.includes('freshRecommendation') ? 'checked' : '' %> />
                  <label class="form-check-label" for="freshRecommendation">
                    <%= trans.cruds.ADVERTISEMENT.ADVERTISEMENT_SYSTEM.fresh_recommendation_page %>
                  </label>
                </div>
    
                <div class="form-check mb-2">
                  <input class="form-check-input" type="checkbox" id="filterPage" name="placement[]"
                        value="filterPage"
                        <%= selectedPlacements.includes('filterPage') ? 'checked' : '' %> />
                  <label class="form-check-label" for="filterPage">
                    <%= trans.cruds.ADVERTISEMENT.ADVERTISEMENT_SYSTEM.filter_page %>
                  </label>
                </div>
    
                <div class="form-check mb-2">
                  <input class="form-check-input" type="checkbox" id="singlePostPage" name="placement[]"
                        value="singlePostPage"
                        <%= selectedPlacements.includes('singlePostPage') ? 'checked' : '' %> />
                  <label class="form-check-label" for="singlePostPage">
                    <%= trans.cruds.ADVERTISEMENT.ADVERTISEMENT_SYSTEM.single_post_page %>
                  </label>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>


  </div>
</div>
<!-- <script>
  (function () {
    function setAllCheckboxes(checked) {
      document.querySelectorAll('#pageSelection input[type="checkbox"]').forEach(cb => cb.checked = checked);
    }

    const displayAll = document.getElementById('displayEverywhere');
    if (displayAll) {
      displayAll.addEventListener('change', function () {
        setAllCheckboxes(this.checked);
      });
    }

    // If all children checked -> set displayAll to checked
    const allPageCheckboxes = document.querySelectorAll('#pageSelection input[type="checkbox"]');
    allPageCheckboxes.forEach(cb => {
      cb.addEventListener('change', function () {
        const allChecked = Array.from(allPageCheckboxes).every(c => c.checked);
        if (displayAll) displayAll.checked = allChecked;
      });
    });

    // Home parent toggles children in collapse
    const homeCheckbox = document.getElementById('home');
    const homeCollapse = document.getElementById('homeCollapse');
    if (homeCheckbox) {
      homeCheckbox.addEventListener('change', function () {
        // toggle children checkboxes inside homeCollapse
        if (homeCollapse) {
          homeCollapse.querySelectorAll('input[type="checkbox"]').forEach(c => c.checked = homeCheckbox.checked);
        }
      });
    }
  })();
</script> -->
<script>
$(document).ready(function() {
  $('#displayEverywhere').change(function() {
    if ($(this).prop('checked')) {
      $('input[type="checkbox"]').prop('checked', true);
    } else {
      $('input[type="checkbox"]').prop('checked', false);
    }
  });

  $('#home').change(function() {
    if ($(this).prop('checked')) {
      $('#homeCollapse input[type="checkbox"]').prop('checked', true);
    } else {
      $('#homeCollapse input[type="checkbox"]').prop('checked', false);
    }
  });

  $('input[type="checkbox"]').change(function() {
    if (!$('#home').prop('checked') || !$('#freshRecommendation').prop('checked') || !$('#filterPage').prop('checked') || !$('#singlePostPage').prop('checked') || !$('#mainBanner').prop('checked') || !$('#mediumPageLarge').prop('checked') || !$('#mediumPageTop').prop('checked') || !$('#mediumPageBottom').prop('checked') || !$('#footer').prop('checked')) {
      $('#displayEverywhere').prop('checked', false);
    }
  });
});

</script>