rezepte-app/public/js/edit.js

const urlParams = new URLSearchParams(window.location.search);
const recipeId = urlParams.get('id');
let currentRecipe = null;

if (recipeId) {
  document.getElementById('pageTitle').textContent = 'Rezept bearbeiten';
  document.getElementById('deleteBtn').style.display = 'inline-block';
  document.getElementById('viewRecipeBtn').style.display = 'inline-block';
  loadRecipe();
}

async function loadRecipe() {
  try {
    const response = await fetch(`/api/recipes/${recipeId}`);
    if (!response.ok) throw new Error('Rezept nicht gefunden');
    
    currentRecipe = await response.json();
    populateForm(currentRecipe);
    loadImages();
  } catch (error) {
    console.error('Fehler:', error);
    alert('Fehler beim Laden des Rezepts');
  }
}

function populateForm(recipe) {
  document.getElementById('recipeId').value = recipe._id;
  document.getElementById('rezeptnummer').value = recipe.rezeptnummer;
  document.getElementById('bezeichnung').value = recipe.bezeichnung || '';
  document.getElementById('beschreibung').value = recipe.beschreibung || '';
  document.getElementById('kategorie').value = recipe.kategorie || '';
  document.getElementById('vorbereitung').value = recipe.vorbereitung || '';
  document.getElementById('anzahl').value = recipe.anzahl || 2;
  document.getElementById('zutaten').value = recipe.zutaten || '';
  
  const zubereitungText = recipe.zubereitung 
    ? recipe.zubereitung.map(z => z.text).join('\n')
    : '';
  document.getElementById('zubereitung').value = zubereitungText;
  document.getElementById('kommentar').value = recipe.kommentar || '';
}

async function loadImages() {
  if (!recipeId) return;
  
  try {
    const response = await fetch(`/api/images/recipe/${recipeId}`);
    if (!response.ok) return;
    
    const images = await response.json();
    displayImages(images);
  } catch (error) {
    console.error('Fehler beim Laden der Bilder:', error);
  }
}

function displayImages(images) {
  const container = document.getElementById('bildvorschau');
  container.innerHTML = images.map(img => `
    <div class="bild-vorschau">
      <img src="/${img.dateiPfad}" alt="Vorschau" onclick="openLightbox('/${img.dateiPfad}')">
      <button class="bild-loeschen" onclick="deleteImage('${img._id}')">×</button>
    </div>
  `).join('');
}

document.getElementById('recipeForm').addEventListener('submit', async (e) => {
  e.preventDefault();
  
  const formData = {
    rezeptnummer: document.getElementById('rezeptnummer').value,
    bezeichnung: document.getElementById('bezeichnung').value,
    beschreibung: document.getElementById('beschreibung').value,
    kategorie: document.getElementById('kategorie').value,
    vorbereitung: document.getElementById('vorbereitung').value,
    anzahl: document.getElementById('anzahl').value,
    zutaten: document.getElementById('zutaten').value,
    zubereitung: document.getElementById('zubereitung').value,
    kommentar: document.getElementById('kommentar').value
  };
  
  try {
    let response;
    if (recipeId) {
      response = await fetch(`/api/recipes/${recipeId}`, {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(formData)
      });
    } else {
      response = await fetch('/api/recipes', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(formData)
      });
    }
    
    if (!response.ok) {
      const error = await response.json();
      throw new Error(error.error || 'Fehler beim Speichern');
    }
    
    alert('Rezept erfolgreich gespeichert');
    window.location.href = '/index.html';
  } catch (error) {
    console.error('Fehler:', error);
    alert('Fehler beim Speichern: ' + error.message);
  }
});

document.getElementById('uploadImageBtn').addEventListener('click', async () => {
  const fileInput = document.getElementById('fileInput');
  const file = fileInput.files[0];
  
  if (!file) {
    alert('Bitte wähle zuerst ein Bild aus');
    return;
  }
  
  if (!recipeId) {
    alert('Bitte speichere zuerst das Rezept, bevor du Bilder hochlädst');
    return;
  }
  
  const formData = new FormData();
  formData.append('bild', file);
  formData.append('rezeptnummer', document.getElementById('rezeptnummer').value);
  
  try {
    const response = await fetch(`/api/images/${recipeId}`, {
      method: 'POST',
      body: formData
    });
    
    if (!response.ok) throw new Error('Upload fehlgeschlagen');
    
    fileInput.value = '';
    loadImages();
  } catch (error) {
    console.error('Fehler:', error);
    alert('Fehler beim Hochladen des Bildes');
  }
});

async function deleteImage(imageId) {
  if (!confirm('Möchtest du dieses Bild wirklich löschen?')) return;
  
  try {
    const response = await fetch(`/api/images/${imageId}`, {
      method: 'DELETE'
    });
    
    if (!response.ok) throw new Error('Löschen fehlgeschlagen');
    
    loadImages();
  } catch (error) {
    console.error('Fehler:', error);
    alert('Fehler beim Löschen des Bildes');
  }
}

document.getElementById('deleteBtn').addEventListener('click', async () => {
  if (!confirm('Möchtest du dieses Rezept wirklich löschen?')) return;
  
  try {
    const response = await fetch(`/api/recipes/${recipeId}`, {
      method: 'DELETE'
    });
    
    if (!response.ok) throw new Error('Löschen fehlgeschlagen');
    
    alert('Rezept gelöscht');
    window.location.href = '/index.html';
  } catch (error) {
    console.error('Fehler:', error);
    alert('Fehler beim Löschen des Rezepts');
  }
});

document.getElementById('viewRecipeBtn').addEventListener('click', () => {
  window.location.href = `/recipe.html?id=${recipeId}`;
});

function openLightbox(src) {
  document.getElementById('lightbox').style.display = 'block';
  document.getElementById('lightbox-img').src = src;
}

function closeLightbox() {
  document.getElementById('lightbox').style.display = 'none';
}