invoice-manager/static/preview.js

document.addEventListener("DOMContentLoaded", function () {
  // Récupérer les données du formulaire depuis l'URL
  const urlParams = new URLSearchParams(window.location.search);
  const formData = JSON.parse(decodeURIComponent(urlParams.get("data")));

  // Afficher les informations du destinataire
  const recipientInfo = document.getElementById("recipientInfo");
  recipientInfo.innerHTML = `
        <p>${formData.recipient_name}</p>
        <p>${formData.recipient_address}</p>
        <p>${formData.recipient_postal_code} ${formData.recipient_town}</p>
        <p>${formData.recipient_country}</p>
        ${
          formData.recipient_vat_number
            ? `<p>TVA: ${formData.recipient_vat_number}</p>`
            : ""
        }
    `;

  // Afficher les détails de la facture
  const invoiceDetails = document.getElementById("invoiceDetails");

  // Créer le contenu de base des détails
  let detailsHTML = `
    <div class="grid grid-cols-2 gap-4 mb-6">
        <div>
            <p class="text-gray-600">Numéro de facture</p>
            <p class="font-semibold">${formData.invoice_number}</p>
        </div>
        <div>
            <p class="text-gray-600">Date</p>
            <p class="font-semibold">${new Date().toLocaleDateString()}</p>
        </div>
        <div>
            <p class="text-gray-600">Langue</p>
            <p class="font-semibold">${formData.language}</p>
        </div>
        <div>
            <p class="text-gray-600">Montant Total</p>
            <p class="font-semibold">${formData.amount} ${formData.currency}</p>
        </div>
    </div>
  `;

  // Ajouter le tableau des lignes de facturation si présentes
  if (formData.items && formData.items.length > 0) {
    detailsHTML += `
      <div class="mt-6">
        <h3 class="font-semibold text-lg mb-3">Lignes de facturation</h3>
        <table class="min-w-full bg-white border">
          <thead>
            <tr>
              <th class="py-2 px-4 border-b text-left">Description</th>
              <th class="py-2 px-4 border-b text-right">Montant (${formData.currency})</th>
            </tr>
          </thead>
          <tbody>
    `;

    // Ajouter chaque ligne
    formData.items.forEach((item) => {
      detailsHTML += `
        <tr>
          <td class="py-2 px-4 border-b">${item.description}</td>
          <td class="py-2 px-4 border-b text-right">${item.amount}</td>
        </tr>
      `;
    });

    detailsHTML += `
          </tbody>
          <tfoot>
            <tr class="bg-gray-50">
              <td class="py-2 px-4 border-b font-semibold">Total</td>
              <td class="py-2 px-4 border-b text-right font-semibold">${formData.amount}</td>
            </tr>
          </tfoot>
        </table>
      </div>
    `;
  }

  invoiceDetails.innerHTML = detailsHTML;

  // Mettre à jour les informations de paiement en fonction de la devise
  const paymentInfoDiv = document.querySelector(
    ".mt-8.border-t.pt-8 .space-y-2"
  );
  if (paymentInfoDiv) {
    if (formData.currency === "CHF") {
      paymentInfoDiv.innerHTML = `
        <p>Banque: Wise Payments Limited, London, United Kingdom</p>
        <p>IBAN: GB51 TRWI 2308 0140 8766 98</p>
        <p>BIC/SWIFT: TRWIGB2LXXX</p>
        <p>Titulaire: Robin Szymczak</p>
      `;
    } else {
      paymentInfoDiv.innerHTML = `
        <p>Banque: Wise, Bruxelles, Belgique</p>
        <p>IBAN: BE22905094540247</p>
        <p>BIC/SWIFT: TRWIBEB1XXX</p>
        <p>Titulaire: Robin Szymczak</p>
      `;
    }
  }

  // Gérer le bouton "Retour"
  document.getElementById("backToForm").addEventListener("click", function () {
    // Sauvegarder les données du formulaire dans localStorage
    localStorage.setItem("invoiceData", JSON.stringify(formData));
    // Rediriger vers la page du générateur
    window.location.href = "/generator";
  });

  // Gérer la validation de la facture
  document
    .getElementById("validateInvoice")
    .addEventListener("click", async function () {
      try {
        console.log("Envoi des données à l'API:", formData);

        const response = await fetch("/api/invoices", {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify(formData),
        });

        console.log("Réponse reçue:", response.status);

        if (response.ok) {
          const result = await response.json();
          console.log("Facture créée avec succès:", result);
          alert("Facture créée avec succès !");

          // Effacer les données du formulaire du localStorage après validation réussie
          localStorage.removeItem("invoiceData");

          // Supprimer également de l'historique des factures récentes
          removeFromRecentInvoices(formData.recipient_name);

          window.location.href = "/dashboard";
        } else {
          const error = await response.json();
          console.error("Erreur API:", error);
          alert(
            "Erreur lors de la création de la facture : " +
              (error.error || "Erreur inconnue")
          );
        }
      } catch (error) {
        console.error("Erreur lors de la requête:", error);
        alert("Erreur lors de la création de la facture : " + error.message);
      }
    });

  // Fonction pour supprimer une facture de l'historique récent
  function removeFromRecentInvoices(recipientName) {
    if (!recipientName) return;

    try {
      let recentInvoices = JSON.parse(
        localStorage.getItem("recentInvoices") || "[]"
      );

      // Filtrer pour supprimer la facture avec le même destinataire
      recentInvoices = recentInvoices.filter(
        (invoice) => invoice.recipient_name !== recipientName
      );

      localStorage.setItem("recentInvoices", JSON.stringify(recentInvoices));
    } catch (error) {
      console.error("Erreur lors de la suppression de l'historique:", error);
    }
  }
});