main.js

/**
 * ARTAFRICA - Script Principal
 * Gestion du Panier (localStorage), Recherche en direct, Modal Aperçu Rapide, Notifications
 */

document.addEventListener('DOMContentLoaded', () => {
  initCart();
  initQuickViewModal();
  initLiveSearch();
  initCartPage();
  initPaymentButtons();
});

// --- GESTION DU PANIER (LOCALSTORAGE) ---
function getCart() {
  const cart = localStorage.getItem('artafrica_cart');
  if (cart) {
    try {
      return JSON.parse(cart);
    } catch (e) {
      console.error('Erreur lecture panier:', e);
    }
  }
  // Panier par défaut si vide
  return [
    {
      id: 'decor9',
      title: 'Parure Géométrique Premium',
      price: 12000,
      img: 'images/decorations/decoration9.jpg',
      qty: 1
    },
    {
      id: 'textile2',
      title: 'Tissu Léopard Safari',
      price: 4000,
      img: 'images/textilles/tetille2.jpg',
      qty: 1
    },
    {
      id: 'bijoux2',
      title: 'Collier Royal Filigrane Or',
      price: 15000,
      img: 'images/accessoires/bijoux2.jpg',
      qty: 2
    }
  ];
}

function saveCart(cart) {
  localStorage.setItem('artafrica_cart', JSON.stringify(cart));
  updateCartCount();
}

function updateCartCount() {
  const cart = getCart();
  const totalCount = cart.reduce((sum, item) => sum + Number(item.qty), 0);
  const badges = document.querySelectorAll('.cart-badge');
  badges.forEach(badge => {
    badge.textContent = totalCount;
    if (totalCount > 0) {
      badge.style.display = 'inline-flex';
    } else {
      badge.style.display = 'none';
    }
  });
}

function initCart() {
  updateCartCount();

  // Écouteur global pour les boutons "AJOUTER"
  document.addEventListener('click', (e) => {
    const btn = e.target.closest('.btn-ajouter, .ajouter');
    if (btn) {
      e.preventDefault();
      const card = btn.closest('.carte, .card');
      if (card) {
        const title = card.querySelector('.product-title, .card-title')?.textContent?.trim() || 'Produit Artisanal';
        const priceText = card.querySelector('.valeur')?.textContent?.replace(/[^0-9]/g, '') || '5000';
        const price = parseInt(priceText, 10) || 5000;
        const img = card.querySelector('img')?.getAttribute('src') || 'images/slogan-logo/logo3.png';
        const id = title.toLowerCase().replace(/\s+/g, '-');

        addToCart({ id, title, price, img, qty: 1 });
      }
    }
  });
}

function addToCart(product) {
  const cart = getCart();
  const existing = cart.find(item => item.id === product.id || item.title === product.title);
  if (existing) {
    existing.qty += 1;
  } else {
    cart.push(product);
  }
  saveCart(cart);
  showToast(`"${product.title}" a été ajouté au panier !`);
}

// --- TOAST NOTIFICATION ---
function showToast(message) {
  let toastContainer = document.getElementById('toast-container');
  if (!toastContainer) {
    toastContainer = document.createElement('div');
    toastContainer.id = 'toast-container';
    toastContainer.style.position = 'fixed';
    toastContainer.style.bottom = '25px';
    toastContainer.style.right = '25px';
    toastContainer.style.zIndex = '9999';
    document.body.appendChild(toastContainer);
  }

  const toast = document.createElement('div');
  toast.className = 'custom-toast';
  toast.innerHTML = `
    <div class="d-flex align-items-center gap-2">
      <i class="bi bi-check-circle-fill text-gold fs-5"></i>
      <span>${message}</span>
    </div>
  `;
  toastContainer.appendChild(toast);

  setTimeout(() => {
    toast.classList.add('show');
  }, 10);

  setTimeout(() => {
    toast.classList.remove('show');
    setTimeout(() => toast.remove(), 400);
  }, 3000);
}

// --- MODAL APERÇU RAPIDE (QUICK VIEW) ---
function initQuickViewModal() {
  document.addEventListener('click', (e) => {
    const btn = e.target.closest('.btn-voir, .voir');
    if (btn) {
      e.preventDefault();
      const card = btn.closest('.carte, .card');
      if (!card) return;

      const title = card.querySelector('.product-title, .card-title')?.textContent?.trim() || 'Détails du Produit';
      const price = card.querySelector('.valeur')?.textContent?.trim() || 'Prix sur demande';
      const img = card.querySelector('img')?.getAttribute('src') || '';
      const flag = card.querySelector('.flag')?.getAttribute('src') || '';
      
      // Extraction de la description (depuis data-bs-content ou texte)
      let desc = btn.getAttribute('data-bs-content') || card.querySelector('.catalogue-text, .card-text')?.textContent?.trim() || '';
      if (!desc || desc.length < 5) {
        desc = "Cette pièce artisanale unique est réalisée à la main par des maîtres artisans africains en utilisant des techniques traditionnelles transmises de génération en génération.";
      }

      openProductModal({ title, price, img, flag, desc });
    }
  });
}

function openProductModal(data) {
  let modalEl = document.getElementById('productQuickViewModal');
  if (!modalEl) {
    modalEl = document.createElement('div');
    modalEl.id = 'productQuickViewModal';
    modalEl.className = 'modal fade';
    modalEl.tabIndex = -1;
    modalEl.innerHTML = `
      <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content glass-modal">
          <div class="modal-header border-bottom-gold">
            <h5 class="modal-title font-serif text-gold" id="modalProductTitle"></h5>
            <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Fermer"></button>
          </div>
          <div class="modal-body">
            <div class="row g-4 align-items-center">
              <div class="col-md-6 text-center">
                <img id="modalProductImg" src="" class="img-fluid rounded-4 shadow-lg border-gold-subtle" alt="Produit">
              </div>
              <div class="col-md-6">
                <div class="d-flex align-items-center justify-content-between mb-3">
                  <span class="badge bg-gold-subtle text-gold px-3 py-2 fs-6 rounded-pill">Artisanat Authentique</span>
                  <div id="modalProductOrigin" class="d-flex align-items-center gap-2 text-muted fs-6"></div>
                </div>
                <h4 id="modalProductPrice" class="text-gold fw-bold mb-3 fs-3"></h4>
                <p id="modalProductDesc" class="text-parchment leading-relaxed mb-4 fs-6"></p>
                <div class="d-flex gap-3">
                  <button type="button" id="modalAddToCartBtn" class="btn btn-gold flex-grow-1 py-2 fw-bold">
                    <i class="bi bi-bag-plus-fill me-2"></i> Ajouter au Panier
                  </button>
                  <button type="button" class="btn btn-outline-gold" data-bs-dismiss="modal">Fermer</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    `;
    document.body.appendChild(modalEl);
  }

  document.getElementById('modalProductTitle').textContent = data.title;
  document.getElementById('modalProductPrice').textContent = data.price;
  document.getElementById('modalProductImg').src = data.img;
  document.getElementById('modalProductDesc').textContent = data.desc;

  const originEl = document.getElementById('modalProductOrigin');
  if (data.flag) {
    originEl.innerHTML = `<span>Origine :</span> <img src="${data.flag}" class="flag" alt="Origine">`;
  } else {
    originEl.innerHTML = `<span>Origine : Afrique</span>`;
  }

  const addToCartBtn = document.getElementById('modalAddToCartBtn');
  addToCartBtn.onclick = () => {
    const priceNum = parseInt(data.price.replace(/[^0-9]/g, ''), 10) || 5000;
    const id = data.title.toLowerCase().replace(/\s+/g, '-');
    addToCart({ id, title: data.title, price: priceNum, img: data.img, qty: 1 });
    const bsModal = bootstrap.Modal.getInstance(modalEl);
    if (bsModal) bsModal.hide();
  };

  const modal = new bootstrap.Modal(modalEl);
  modal.show();
}

// --- RECHERCHE EN DIRECT (LIVE SEARCH) ---
function initLiveSearch() {
  const searchInputs = document.querySelectorAll('.search-bar, input[type="search"]');
  searchInputs.forEach(input => {
    input.addEventListener('input', (e) => {
      const term = e.target.value.toLowerCase().trim();
      const productCards = document.querySelectorAll('.carte, .card');
      
      productCards.forEach(card => {
        const title = card.querySelector('.card-title, .product-title, .catalogue-title')?.textContent?.toLowerCase() || '';
        const desc = card.querySelector('.card-text, .catalogue-text, p')?.textContent?.toLowerCase() || '';
        
        if (title.includes(term) || desc.includes(term)) {
          card.parentElement.style.display = '';
        } else {
          card.parentElement.style.display = 'none';
        }
      });
    });

    const form = input.closest('form');
    if (form) {
      form.addEventListener('submit', (e) => e.preventDefault());
    }
  });
}

// --- PAGE PANIER DYNAMIQUE ---
function initCartPage() {
  const cartTableBody = document.querySelector('.cart-table tbody');
  if (!cartTableBody) return; // Pas sur la page panier

  renderCartTable();
}

function renderCartTable() {
  const cartTableBody = document.querySelector('.cart-table tbody');
  if (!cartTableBody) return;

  const cart = getCart();
  const cartTitle = document.querySelector('.cart-title');
  if (cartTitle) {
    const totalCount = cart.reduce((sum, item) => sum + Number(item.qty), 0);
    cartTitle.textContent = `Votre panier (${totalCount})`;
  }

  if (cart.length === 0) {
    cartTableBody.innerHTML = `
      <tr>
        <td colspan="4" class="text-center py-5">
          <i class="bi bi-cart-x text-gold fs-1 d-block mb-3"></i>
          <h4 class="text-light font-serif">Votre panier est vide</h4>
          <p >Explorez nos merveilleuses collections artisanales.</p>
          <a href="index.html" class="btn btn-gold mt-3 px-4 py-2">Découvrir nos produits</a>
        </td>
      </tr>
    `;
    updateTotals(0);
    return;
  }

  cartTableBody.innerHTML = '';
  let subtotal = 0;

  cart.forEach((item, index) => {
    const itemTotal = item.price * item.qty;
    subtotal += itemTotal;

    const tr = document.createElement('tr');
    tr.innerHTML = `
      <td>
        <div class="product-cell">
          <img src="${item.img}" alt="${item.title}" class="rounded-3 shadow-sm" style="width:60px; height:60px; object-fit:cover;">
          <span><strong>${item.title}</strong></span>
        </div>
      </td>
      <td>${formatPrice(item.price)} FCFA</td>
      <td>
        <input type="number" class="qty-input" value="${item.qty}" min="1" data-index="${index}">
      </td>
      <td>
        <span class="fw-bold text-gold">${formatPrice(itemTotal)} FCFA</span>
        <button class="delete-btn ms-2" data-index="${index}" title="Supprimer">🗑️</button>
      </td>
    `;
    cartTableBody.appendChild(tr);
  });

  updateTotals(subtotal);

  // Écouteurs pour changement de quantité et suppression
  cartTableBody.querySelectorAll('.qty-input').forEach(input => {
    input.addEventListener('change', (e) => {
      const index = parseInt(e.target.getAttribute('data-index'), 10);
      const newQty = parseInt(e.target.value, 10);
      if (newQty > 0) {
        const cart = getCart();
        cart[index].qty = newQty;
        saveCart(cart);
        renderCartTable();
      }
    });
  });

  cartTableBody.querySelectorAll('.delete-btn').forEach(btn => {
    btn.addEventListener('click', (e) => {
      const index = parseInt(e.target.getAttribute('data-index'), 10);
      const cart = getCart();
      const removed = cart.splice(index, 1);
      saveCart(cart);
      renderCartTable();
      if (removed.length) {
        showToast(`"${removed[0].title}" supprimé du panier.`);
      }
    });
  });

  // Bouton "Passer la commande"
  const checkoutBtn = document.querySelector('.btn-checkout');
  if (checkoutBtn) {
    checkoutBtn.onclick = () => {
      showCheckoutModal();
    };
  }
}

function updateTotals(subtotal) {
  const shipping = subtotal > 0 ? 5000 : 0;
  const total = subtotal + shipping;

  const rows = document.querySelectorAll('.totals-row');
  rows.forEach(row => {
    const label = row.children[0]?.textContent?.trim() || '';
    if (label.includes('Sous-total')) {
      row.children[1].textContent = `${formatPrice(subtotal)} FCFA`;
    } else if (label.includes('Livraison')) {
      row.children[1].textContent = `${formatPrice(shipping)} FCFA`;
    } else if (row.classList.contains('final') || label.includes('Total')) {
      row.children[1].textContent = `${formatPrice(total)} FCFA`;
    }
  });
}

function formatPrice(num) {
  return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, " ");
}

// --- OPTIONS DE PAIEMENT ---
function initPaymentButtons() {
  const paymentButtons = document.querySelectorAll('.payment-btn');
  paymentButtons.forEach(btn => {
    btn.addEventListener('click', () => {
      paymentButtons.forEach(b => b.classList.remove('active'));
      btn.classList.add('active');
    });
  });
}

// --- MODAL DE COMMANDE ---
function showCheckoutModal() {
  const cart = getCart();
  if (cart.length === 0) {
    showToast('Votre panier est vide !');
    return;
  }

  let modalEl = document.getElementById('checkoutModal');
  if (!modalEl) {
    modalEl = document.createElement('div');
    modalEl.id = 'checkoutModal';
    modalEl.className = 'modal fade';
    modalEl.tabIndex = -1;
    modalEl.innerHTML = `
      <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content glass-modal text-light">
          <div class="modal-header border-bottom-gold">
            <h5 class="modal-title font-serif text-gold"><i class="bi bi-bag-check-fill me-2"></i> Finaliser la commande</h5>
            <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Fermer"></button>
          </div>
          <div class="modal-body">
            <form id="checkoutForm">
              <div class="mb-3">
                <label class="form-label text-parchment">Nom & Prénom</label>
                <input type="text" class="form-control input-art" placeholder="Ex: Aminata Diallo" required>
              </div>
              <div class="mb-3">
                <label class="form-label text-parchment">Téléphone / WhatsApp</label>
                <input type="tel" class="form-control input-art" placeholder="Ex: +221 77 123 45 67" required>
              </div>
              <div class="mb-3">
                <label class="form-label text-parchment">Adresse de Livraison</label>
                <input type="text" class="form-control input-art" placeholder="Ville, Quartier, Rue" required>
              </div>
              <button type="submit" class="btn btn-gold w-100 py-3 font-serif fw-bold text-uppercase fs-6 mt-3">
                Confirmer la Commande
              </button>
            </form>
          </div>
        </div>
      </div>
    `;
    document.body.appendChild(modalEl);

    document.getElementById('checkoutForm').onsubmit = (e) => {
      e.preventDefault();
      localStorage.setItem('artafrica_cart', JSON.stringify([]));
      updateCartCount();
      const bsModal = bootstrap.Modal.getInstance(modalEl);
      if (bsModal) bsModal.hide();
      
      showToast('Merci ! Votre commande a été enregistrée avec succès.');
      setTimeout(() => {
        window.location.href = 'index.html';
      }, 1800);
    };
  }

  const modal = new bootstrap.Modal(modalEl);
  modal.show();
}