<div class="main-content">
    <div class="general-container">
        <h1>Delete Records by Company</h1>
      
        <div class="general-form-group">
          <label for="company-select">Select Company:</label>
          <select id="company-select"></select>
        </div>
      
        <div class="general-form-group">
          <label for="collections-list">Select Collections:</label>
          <div class="general-button-group">
            <button id="select-all-btn">Select All</button>
            <button id="deselect-all-btn">Deselect All</button>
          </div>
          <div id="collections-list" class="general-collections-list">

            <!-- Checkboxes will be populated dynamically from the backend -->
          </div>
        </div>
      
        <div class="general-form-group">
          <button id="delete-btn">Delete Selected Collections</button>
        </div>
      
        <div id="message-div"></div>
      </div>
      

  <script>
    document.addEventListener('DOMContentLoaded', function() {
      const collectionsList = document.getElementById('collections-list');
      const selectAllBtn = document.getElementById('select-all-btn');
      const deselectAllBtn = document.getElementById('deselect-all-btn');
      const companySelect = document.getElementById('company-select');
      const deleteBtn = document.getElementById('delete-btn');
      const messageDiv = document.getElementById('message-div');

      // Fetch and populate the company list
      fetch('/api/companies')  // Adjust this route as needed
        .then(response => response.json())
        .then(data => {
          data.forEach(company => {
            const option = document.createElement('option');
            option.value = company._id;
            option.textContent = company.name;
            companySelect.appendChild(option);
          });
        })
        .catch(error => console.error('Error fetching companies:', error));

      // Fetch and populate collections
      fetch('/api/collections')
        .then(response => response.json())
        .then(data => {
          data.forEach(collection => {
            const div = document.createElement('div');
            div.classList.add('checkbox-item');
            div.innerHTML = `
              <input type="checkbox" id="${collection}" value="${collection}">
              <label for="${collection}">${collection}</label>
            `;
            collectionsList.appendChild(div);
          });
        })
        .catch(error => console.error('Error fetching collections:', error));

      // Select all checkboxes
      selectAllBtn.addEventListener('click', () => {
        collectionsList.querySelectorAll('input[type="checkbox"]').forEach(checkbox => {
          checkbox.checked = true;
        });
      });

      // Deselect all checkboxes
      deselectAllBtn.addEventListener('click', () => {
        collectionsList.querySelectorAll('input[type="checkbox"]').forEach(checkbox => {
          checkbox.checked = false;
        });
      });

      // Delete selected collections
      deleteBtn.addEventListener('click', function() {
        const selectedCollections = [];
        collectionsList.querySelectorAll('input[type="checkbox"]:checked').forEach(checkbox => {
          selectedCollections.push(checkbox.value);
        });

        const companyId = companySelect.value;

        if (selectedCollections.length === 0) {
          alert('Please select at least one collection to delete.');
          return;
        }

        if (confirm('Are you sure you want to delete records from the selected collections for this company?')) {
          fetch('/api/collections/delete-collections', {
            method: 'POST',
            headers: {
              'Content-Type': 'application/json',
            },
            body: JSON.stringify({ collections: selectedCollections, companyId: companyId }),
          })
            .then(response => response.json())
            .then(data => {
              messageDiv.innerHTML = `<div class="alert alert-success">${data.message}</div>`;
            })
            .catch(error => {
              console.error('Error deleting collections:', error);
              messageDiv.innerHTML = '<div class="alert alert-danger">Error deleting collections. Please try again.</div>';
            });
        }
      });
    });
  </script>

</body>
</html>
