maquette_backoffice/prestations/js/ajouter_avant_apres.js

// ===============================
// Données simulées (sera remplacée par BDD )
// ===============================
let galleryPairs = [
    {
        id: 1,
        titre: "Petit chien poils longs",
        type: "Chien",
        avant: "../../img/avant1.jpg",
        apres: "../../img/apres1.jpg"
    },
    {
        id: 2,
        titre: "Coupe ciseaux",
        type: "Chat",
        avant: "../../img/avant2.jpg",
        apres: "../../img/apres2.jpg"
    }
];

// Sélecteurs
const form = document.getElementById("addPairForm");
const titleInput = document.getElementById("pairTitle");
const typeInput = document.getElementById("pairType");
const beforeInput = document.getElementById("beforeImage");
const afterInput = document.getElementById("afterImage");

const beforePreview = document.getElementById("beforePreview");
const afterPreview = document.getElementById("afterPreview");

const successMsg = document.getElementById("successMsg");
const errorMsg = document.getElementById("errorMsg");
const errorFormat = document.getElementById("errorFormat");

// Formats autorisés
const allowedTypes = ["image/jpeg", "image/png", "image/webp"];

// ===============================
// Fonctions utilitaires
// ===============================
function hideMessages() {
    successMsg.classList.add("d-none");
    errorMsg.classList.add("d-none");
    errorFormat.classList.add("d-none");
}

function isValidFormat(file) {
    if (!file) return false;
    return allowedTypes.includes(file.type);
}

// ===============================
// Prévisualisation image AVANT
// + contrôle du format
// ===============================
beforeInput.addEventListener("change", function () {
    hideMessages();

    const file = this.files[0];

    if (!file) {
        beforePreview.style.display = "none";
        beforePreview.src = "#";
        return;
    }

    // Vérif format
    if (!isValidFormat(file)) {
        errorFormat.classList.remove("d-none");
        this.value = "";               // reset le champ
        beforePreview.style.display = "none";
        beforePreview.src = "#";
        return;
    }

    const reader = new FileReader();
    reader.onload = e => {
        beforePreview.src = e.target.result;
        beforePreview.style.display = "block";
    };
    reader.readAsDataURL(file);
});

// ===============================
// Prévisualisation image APRÈS
// + contrôle du format
// ===============================
afterInput.addEventListener("change", function () {
    hideMessages();

    const file = this.files[0];

    if (!file) {
        afterPreview.style.display = "none";
        afterPreview.src = "#";
        return;
    }

    // Vérif format
    if (!isValidFormat(file)) {
        errorFormat.classList.remove("d-none");
        this.value = "";               // reset le champ
        afterPreview.style.display = "none";
        afterPreview.src = "#";
        return;
    }

    const reader = new FileReader();
    reader.onload = e => {
        afterPreview.src = e.target.result;
        afterPreview.style.display = "block";
    };
    reader.readAsDataURL(file);
});

// ===============================
// Soumission formulaire
// ===============================
form.addEventListener("submit", function (e) {
    e.preventDefault();

    hideMessages();

    // Champs obligatoires
    if (
        !titleInput.value.trim() ||
        !typeInput.value.trim() ||
        !beforeInput.files[0] ||
        !afterInput.files[0]
    ) {
        errorMsg.classList.remove("d-none");
        return;
    }

    const beforeFile = beforeInput.files[0];
    const afterFile = afterInput.files[0];

    // Vérification format des deux images
    if (!isValidFormat(beforeFile) || !isValidFormat(afterFile)) {
        errorFormat.classList.remove("d-none");
        return;
    }

    // Nouvelle entrée (simulation)
    const newPair = {
        id: galleryPairs.length + 1,
        titre: titleInput.value.trim(),
        type: typeInput.value.trim(),
        avant: URL.createObjectURL(beforeFile),
        apres: URL.createObjectURL(afterFile)
    };

    galleryPairs.push(newPair);

    successMsg.classList.remove("d-none");

    // Redirige après 1 seconde
    setTimeout(() => {
        window.location.href = "../liste_avant_apres/liste_avant_apres.html";
    }, 1000);
});