comelifacciamo/public/favourites.js

// favourites.js — Gestione cuori preferiti (frontend pubblico)
// Richiesto da search.php, search-map.php, salon.php
// I cuori nell'HTML devono essere: <button class="js-fav" data-id="SHOP_ID">...</button>
// e contenere un'icona <i class="fa-heart ..."></i>.

(function () {
    "use strict";

    // Delego l'evento sul document: funziona anche per cuori aggiunti
    // dinamicamente (es. card generate via JS nella mappa) senza riagganciare.
    document.addEventListener("click", function (e) {
        var btn = e.target.closest(".js-fav");
        if (!btn) return;

        e.preventDefault();

        var shopId = btn.getAttribute("data-id");
        if (!shopId) return;

        // Evita doppi click mentre la richiesta è in volo
        if (btn.dataset.loading === "1") return;
        btn.dataset.loading = "1";

        var body = new URLSearchParams();
        body.append("shop_id", shopId);

        fetch("favourite_toggle.php", {
            method: "POST",
            headers: { "Content-Type": "application/x-www-form-urlencoded" },
            body: body.toString(),
        })
            .then(function (r) {
                return r.json();
            })
            .then(function (data) {
                if (data.need_login) {
                    openFavLoginModal();
                    return;
                }
                if (!data.ok) {
                    console.error("Preferiti:", data.error);
                    return;
                }
                // Aggiorna l'aspetto del cuore in base allo stato restituito dal server
                setFavState(btn, data.favorite);
            })
            .catch(function (err) {
                console.error("Preferiti: richiesta fallita", err);
            })
            .finally(function () {
                btn.dataset.loading = "0";
            });
    });

    // Applica lo stato "attivo/inattivo" al cuore.
    // fa-solid = cuore pieno (preferito), fa-regular = cuore vuoto.
    function setFavState(btn, isFav) {
        btn.classList.toggle("is-active", isFav);
        var icon = btn.querySelector("i");
        if (icon) {
            icon.classList.toggle("fa-solid", isFav);
            icon.classList.toggle("fa-regular", !isFav);
        }
        btn.setAttribute("aria-pressed", isFav ? "true" : "false");
    }

    // --- Modale "Accedi per salvare i preferiti" ---
    // La creo una sola volta e la riuso. Niente dipendenze: HTML+CSS inline,
    // così funziona su tutte le pagine anche senza il JS del template Vuexy/Triptes.
    function openFavLoginModal() {
        var existing = document.getElementById("favLoginModal");
        if (existing) {
            existing.style.display = "flex";
            return;
        }

        var overlay = document.createElement("div");
        overlay.id = "favLoginModal";
        overlay.style.cssText =
            "position:fixed;inset:0;z-index:9999;display:flex;align-items:center;" +
            "justify-content:center;background:rgba(15,23,42,.55);backdrop-filter:blur(2px);";

        overlay.innerHTML =
            '<div style="background:#fff;max-width:420px;width:90%;border-radius:16px;' +
            "padding:32px 28px;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.25);" +
            'font-family:inherit;">' +
            '<div style="width:64px;height:64px;margin:0 auto 18px;border-radius:50%;' +
            "display:flex;align-items:center;justify-content:center;" +
            'background:#ffe4ec;color:#e11d6b;font-size:28px;">' +
            '<i class="fa-solid fa-heart"></i>' +
            "</div>" +
            '<h4 style="margin:0 0 8px;font-size:20px;font-weight:700;color:#0f172a;">' +
            "Salva i tuoi saloni preferiti" +
            "</h4>" +
            '<p style="margin:0 0 24px;color:#64748b;font-size:15px;line-height:1.5;">' +
            "Accedi o registrati per aggiungere questo salone ai preferiti " +
            "e ritrovarlo con un click." +
            "</p>" +
            '<div style="display:flex;gap:10px;justify-content:center;flex-wrap:wrap;">' +
            '<a href="userarea/login.php" ' +
            'style="background:#e11d6b;color:#fff;padding:11px 22px;border-radius:10px;' +
            'text-decoration:none;font-weight:600;">Accedi</a>' +
            '<a href="userarea/register.php" ' +
            'style="background:#f1f5f9;color:#0f172a;padding:11px 22px;border-radius:10px;' +
            'text-decoration:none;font-weight:600;">Registrati</a>' +
            "</div>" +
            '<button type="button" id="favLoginClose" ' +
            'style="margin-top:18px;background:none;border:none;color:#94a3b8;' +
            'cursor:pointer;font-size:14px;">Chiudi</button>' +
            "</div>";

        document.body.appendChild(overlay);

        // Chiusura: bottone, click sullo sfondo, tasto Esc
        overlay
            .querySelector("#favLoginClose")
            .addEventListener("click", closeFavLoginModal);
        overlay.addEventListener("click", function (ev) {
            if (ev.target === overlay) closeFavLoginModal();
        });
        document.addEventListener("keydown", function (ev) {
            if (ev.key === "Escape") closeFavLoginModal();
        });
    }

    function closeFavLoginModal() {
        var m = document.getElementById("favLoginModal");
        if (m) m.style.display = "none";
    }
})();