/**
 * mettre à jour la barre de progression 
 * pour le formulaire de modification
 */
function updateCompletionProgress() {
  const inputs = document.querySelectorAll('input[data-important]');
  let filledInputs = 0;
  let totalInputs = inputs.length;
  let missingFields = [];

  inputs.forEach(input => {
    if (input.value.trim() !== '') {
      filledInputs++;
    } else {
      // Get the field label or name for display in the popup
      let fieldName = '';
      const label = input.closest('.row')?.querySelector('.form-label, .label-translated');
      if (label) {
        fieldName = label.textContent.trim();
      } else {
        // If no label found, try to get a meaningful name from the input
        const name = input.getAttribute('name');
        if (name) {
          // Extract field name from the attribute (e.g., commerce_tag_value__contact:email -> Email)
          const parts = name.split('__');
          if (parts.length > 1) {
            fieldName = parts[1].replace('commerce_tag_value_', '').replace('contact:', '');
            // Capitalize first letter
            fieldName = fieldName.charAt(0).toUpperCase() + fieldName.slice(1);
          } else {
            fieldName = name;
          }
        }
      }
      missingFields.push(fieldName || input.getAttribute('name') || 'Champ inconnu');
    }
  });

  const completionPercentage = (filledInputs / totalInputs) * 100;
  const progressBar = document.querySelector('#completion_progress .progress-bar');
  if (progressBar) {
    progressBar.style.width = completionPercentage + '%';
    progressBar.setAttribute('aria-valuenow', completionPercentage);

    // Create the completion display with a clickable question mark
    const displayElement = document.querySelector('#completion_display');

    // Format missing fields as an HTML list for better readability
    let missingFieldsContent = '';
    if (missingFields.length > 0) {
      missingFieldsContent = '<ul class="list-unstyled mb-0">';
      // Filter out empty or undefined field names and sort them alphabetically
      missingFields
        .filter(field => field && field.trim() !== '')
        .sort()
        .forEach(field => {
          missingFieldsContent += `<li><i class="bi bi-exclamation-circle text-warning"></i> ${field}</li>`;
        });
      missingFieldsContent += '</ul>';
    } else {
      missingFieldsContent = 'Tous les champs importants sont remplis !';
    }

    displayElement.innerHTML = `Votre commerce est complété à ${Math.round(completionPercentage)}% <a href="#" class="missing-fields-info badge rounded-pill bg-warning text-dark ms-1" style="text-decoration: none; font-weight: bold;" data-bs-toggle="popover" data-bs-placement="bottom" title="Champs manquants" data-bs-html="true" data-bs-content="${missingFieldsContent.replace(/"/g, '&quot;')}">?</a>`;

    // Initialize the Bootstrap popover
    const popoverTrigger = displayElement.querySelector('.missing-fields-info');
    if (popoverTrigger) {
      // Add click handler to focus on the first missing field
      popoverTrigger.addEventListener('click', function(e) {
        e.preventDefault(); // Prevent scrolling to top

        // Find the first missing field
        const missingInput = document.querySelector('input[data-important]:not(.good_filled)');
        if (missingInput) {
          // Focus on the first missing field
          missingInput.focus();
          // Scroll to the field if needed
          missingInput.scrollIntoView({ behavior: 'smooth', block: 'center' });
        }
      });

      // Use setTimeout to ensure this runs after the current execution context
      setTimeout(() => {
        if (typeof bootstrap !== 'undefined' && bootstrap.Popover) {
          // Destroy existing popover if any
          const existingPopover = bootstrap.Popover.getInstance(popoverTrigger);
          if (existingPopover) {
            existingPopover.dispose();
          }
          // Initialize new popover
          new bootstrap.Popover(popoverTrigger, {
            html: true,
            trigger: 'click',
            container: 'body'
          });
        } else {
          console.warn('Bootstrap popover not available');
        }
      }, 0);
    }
  }
}

function parseCuisine() {
  const cuisineInput = document.querySelector('input[name="commerce_tag_value__cuisine"]');

  // Récupérer tous les checkboxes de type de cuisine
  const cuisineCheckboxes = document.querySelectorAll('input[name="cuisine_type"]');

  // Ajouter un écouteur d'événement sur chaque checkbox
  cuisineCheckboxes.forEach(checkbox => {
    checkbox.addEventListener('change', () => {
      // Récupérer toutes les checkboxes cochées
      const checkedCuisines = Array.from(document.querySelectorAll('input[name="cuisine_type"]:checked'))
        .map(input => input.value);

      // Mettre à jour l'input avec les valeurs séparées par des points-virgules
      cuisineInput.value = checkedCuisines.join(';');
    });
  });
}

window.updateCompletionProgress = updateCompletionProgress;
window.parseCuisine = parseCuisine;