script.js

const groupedCocktails = [];
const API_BASE = 'https://www.thecocktaildb.com/api/json/v1/1/search.php?s=';
const API_LOOKUP = 'https://www.thecocktaildb.com/api/json/v1/1/lookup.php?i=';

document.addEventListener('DOMContentLoaded', () => {
  const form = document.getElementById('search-form');
  const input = document.getElementById('search-input');

  // Initial load
  renderCocktails('margarita');

  // Handle search form
  form.addEventListener('submit', (e) => {
    e.preventDefault();
    const query = input.value.trim();
    renderCocktails(query || 'margarita');
  });
});

async function renderCocktails(query) {
  const container = document.getElementById('cocktail-container');
  showMessage(container, 'Loading cocktails...');

  const data = await fetchCocktails(`${API_BASE}${encodeURIComponent(query)}`);
  if (data.error) {
    showMessage(container, 'Failed to load cocktails. Please try again later.');
    return;
  }

  const drinks = data.drinks;
  if (!drinks || drinks.length === 0) {
    showMessage(container, `No results found for "${query}".`);
    return;
  }

  const row = document.createElement('div');
  row.className = 'row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3';

  drinks.forEach(drink => {
    const col = document.createElement('div');
    col.className = 'col';
    col.innerHTML = createCocktailCard(drink);
    row.appendChild(col);
  });

  container.innerHTML = '';
  container.appendChild(row);
}

async function fetchCocktails(url) {
  try {
    const res = await fetch(url);
    return await res.json();
  } catch (error) {
    console.error('Error fetching data:', error);
    return { error };
  }
}

function showMessage(container, message) {
  container.innerHTML = `
    <div class="text-center py-5">
      <h4 class="text-muted">${message}</h4>
    </div>
  `;
}

function createCocktailCard(drink) {
  const isGrouped = groupedCocktails.some(item => item.id === drink.idDrink);
  return `
    <div class="card shadow-sm">
      <img src="${drink.strDrinkThumb}" class="bd-placeholder-img card-img-top" width="180" height="225" style="object-fit: cover;" alt="${drink.strDrink}">
      <div class="card-body">
        <h5>${drink.strDrink}</h5>
        <p class="card-text text-muted">${drink.strCategory || 'N/A'}</p>
        <p class="card-text">${(drink.strInstructions || '').slice(0, 15)}...</p>
        <div class="d-flex justify-content-between align-items-center">
          <div class="btn-group">
            <button type="button" class="btn btn-sm btn-outline-secondary details-btn" data-id="${drink.idDrink}">Details</button>
            <button
              type="button"
              class="btn btn-sm ${isGrouped ? 'btn-success' : 'btn-outline-secondary'} add-group-btn"
              data-id="${drink.idDrink}"
              data-name="${drink.strDrink}"
              ${isGrouped ? 'disabled' : ''}
            >
              ${isGrouped ? 'Added' : 'Add to group'}
            </button>
          </div>
          <small class="text-body-secondary">ID: ${drink.idDrink}</small>
        </div>
      </div>
    </div>
  `;
}

document.addEventListener('click', async (e) => {
  // details button
  if (e.target.classList.contains('details-btn')) {
    const button = e.target;
    const drinkId = button.getAttribute('data-id');

    const originalHTML = button.innerHTML;
    button.innerHTML = `<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Loading...`;
    button.disabled = true;

    try {
      const data = await fetchCocktails(`${API_LOOKUP}${encodeURIComponent(drinkId)}`);
      const drink = data.drinks ? data.drinks[0] : null;
      if (drink) {
        populateModal(drink);
        const modal = new bootstrap.Modal(document.getElementById('cocktailModal'));
        modal.show();
      } else {
        alert('Drink not found.');
      }
    } catch (error) {
      alert('Failed to load cocktail details.');
      console.error(error);
    } finally {
      button.innerHTML = originalHTML;
      button.disabled = false;
    }
  }
  // Add to group button
  if (e.target.classList.contains('add-group-btn')) {
    const button = e.target;
    const drinkId = button.getAttribute('data-id');
    const drinkName = button.getAttribute('data-name');

    if (groupedCocktails.some(drink => drink.id === drinkId)) {
      alert(`"${drinkName}" is already in the group.`);
      return;
    }

    if (groupedCocktails.length >= 7) {
      alert('You cannot add more than 7 cocktails to the group.');
      return;
    }

    groupedCocktails.push({ id: drinkId, name: drinkName });

    button.textContent = 'Added';
    button.classList.remove('btn-outline-secondary');
    button.classList.add('btn-success');
    button.disabled = true;

    updateGroupDrawer();

    const drawer = bootstrap.Offcanvas.getOrCreateInstance(document.getElementById('groupDrawer'));
    drawer.show();
  }
  // Remove from group button
  document.addEventListener('click', (e) => {
    if (e.target.classList.contains('remove-group-btn')) {
      const idToRemove = e.target.getAttribute('data-id');

      const index = groupedCocktails.findIndex(drink => drink.id === idToRemove);
      if (index !== -1) {
        groupedCocktails.splice(index, 1);
        updateGroupDrawer();

        const cardButton = document.querySelector(`.add-group-btn[data-id="${idToRemove}"]`);
        if (cardButton) {
          cardButton.textContent = 'Add to group';
          cardButton.disabled = false;
          cardButton.classList.remove('btn-success');
          cardButton.classList.add('btn-outline-secondary');
        }
      }
    }
  });

});

function updateGroupDrawer() {
  const container = document.getElementById('group-list');
  const drawerButton = document.getElementById('open-group-drawer');
  const drawerLabel = document.getElementById('groupDrawerLabel');

  const count = groupedCocktails.length;

  // Update count
  drawerButton.textContent = `View Group (${count})`;
  drawerLabel.textContent = `Grouped Cocktails (${count})`;

  if (count === 0) {
    showMessage(container, 'No cocktails added yet.');
    return;
  }

  container.innerHTML = `
    <ul class="list-group">
      ${groupedCocktails.map(drink => `
        <li class="list-group-item d-flex justify-content-between align-items-center">
          ${drink.name}
          <button class="btn btn-sm btn-danger remove-group-btn" data-id="${drink.id}">Remove</button>
        </li>
      `).join('')}
    </ul>
  `;
}

function populateModal(drink) {
  const modalContent = document.getElementById('modal-content');
  modalContent.innerHTML = `
    <div class="modal-header">
      <h5 class="modal-title" id="cocktailModalLabel">${drink.strDrink}</h5>
      <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
    </div>
    <div class="modal-body row">
      <div class="col-md-5">
        <img src="${drink.strDrinkThumb}" width="300" height="300" class="img-fluid rounded" alt="${drink.strDrink}">
      </div>
      <div class="col-md-7">
        <p><strong>Category:</strong> ${drink.strCategory}</p>
        <p><strong>Alcoholic:</strong> ${drink.strAlcoholic}</p>
        <p><strong>Glass:</strong> ${drink.strGlass}</p>
        <p><strong>Instructions:</strong> ${drink.strInstructions}</p>
        <p><strong>Ingredients:</strong><br>${getIngredientsList(drink)}</p>
      </div>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
    </div>
  `;
}

function getIngredientsList(drink) {
  let ingredients = '';
  for (let i = 1; i <= 15; i++) {
    const ing = drink[`strIngredient${i}`];
    const measure = drink[`strMeasure${i}`];
    if (ing) {
      ingredients += `• ${measure ? measure : ''} ${ing}<br>`;
    }
  }
  return ingredients || 'No ingredients listed.';
}