HTMLify

document.addEventListener('DOMContentLoaded', () => {
  const hamburger = document.querySelector('.hamburger');
  const navMenu = document.querySelector('.nav-menu');
  if (hamburger) {
    hamburger.addEventListener('click', () => {
      navMenu.classList.toggle('active');
    });
  }

  // Hero Slider Logic
  const heroSlides = document.querySelectorAll('.hero-slide');
  if (heroSlides.length > 0) {
    let currentSlide = 0;
    setInterval(() => {
      heroSlides[currentSlide].classList.remove('active');
      currentSlide = (currentSlide + 1) % heroSlides.length;
      heroSlides[currentSlide].classList.add('active');
    }, 4000);
  }

  const footerToggleBar = document.querySelector('.footer-toggle-bar');
  const footerPanel = document.getElementById('footerPanel');
  const footerToggleBtn = document.getElementById('footerToggleBtn');
  const footerToggleIcon = document.getElementById('footerToggleIcon');
  
  if(footerToggleBar && footerPanel) {
    const toggleFooter = () => {
      footerPanel.classList.toggle('open');
      if(footerPanel.classList.contains('open')) {
        footerToggleBtn.textContent = 'Masquer le bas de page';
        footerToggleIcon.className = 'fa-solid fa-chevron-down';
      } else {
        footerToggleBtn.textContent = 'Afficher le bas de page';
        footerToggleIcon.className = 'fa-solid fa-chevron-up';
      }
    };
    footerToggleBar.addEventListener('click', toggleFooter);
  }

  // Slide Tabs Logic
  const slideTabBtns = document.querySelectorAll('.slide-tab-btn');
  const slideTabPanes = document.querySelectorAll('.slide-tab-pane');
  if (slideTabBtns.length > 0) {
    slideTabBtns.forEach(btn => {
      btn.addEventListener('click', () => {
        slideTabBtns.forEach(b => b.classList.remove('active'));
        slideTabPanes.forEach(p => p.classList.remove('active'));
        btn.classList.add('active');
        const targetId = 'tab-' + btn.getAttribute('data-tab');
        const pane = document.getElementById(targetId);
        if(pane) {
          pane.classList.add('active');
        }
      });
    });
  }

  const filterBtns = document.querySelectorAll('.filter-btn');
  const propertyCards = document.querySelectorAll('.property-card');
  if (filterBtns.length > 0) {
    filterBtns.forEach(btn => {
      btn.addEventListener('click', () => {
        filterBtns.forEach(b => b.classList.remove('active'));
        btn.classList.add('active');
        const filter = btn.getAttribute('data-filter');
        propertyCards.forEach(card => {
          if (filter === 'all' || card.getAttribute('data-category') === filter) {
            card.style.display = 'block';
          } else {
            card.style.display = 'none';
          }
        });
      });
    });
  }

  const globalLoader = document.getElementById('globalLoader');
  const showLoaderAndSubmit = (callback) => {
    if(globalLoader) {
      globalLoader.style.display = 'flex';
      setTimeout(() => {
        globalLoader.style.display = 'none';
        callback();
      }, 1500);
    } else {
      callback();
    }
  };

  const contactForm = document.getElementById('contactForm');
  if(contactForm) {
    contactForm.addEventListener('submit', (e) => {
      e.preventDefault();
      const inputs = contactForm.querySelectorAll('input, textarea');
      const name = inputs[0].value;
      const email = inputs[1].value;
      const phone = inputs[2].value;
      const subject = inputs[3].value;
      const message = inputs[4].value;

      const mailSubject = encodeURIComponent("Contact: " + subject);
      const mailBody = encodeURIComponent("Nom: " + name + "\nEmail: " + email + "\nTéléphone: " + phone + "\n\nMessage:\n" + message);

      showLoaderAndSubmit(() => {
        window.location.href = "mailto:contact@flambeauboosterdrc.com?subject=" + mailSubject + "&body=" + mailBody;
        contactForm.reset();
      });
    });
  }

  const partenariatForm = document.getElementById('partnershipForm');
  if(partenariatForm) {
    partenariatForm.addEventListener('submit', (e) => {
      e.preventDefault();
      const inputs = partenariatForm.querySelectorAll('input, select, textarea');
      const name = inputs[0].value;
      const email = inputs[1].value;
      const phone = inputs[2].value;
      const type = inputs[3].value;
      const desc = inputs[4].value;

      const newPart = { name: name, type: type, contact: email + ' / ' + phone };
      let partners = JSON.parse(localStorage.getItem('flambeau_custom_partners') || '[]');
      partners.push(newPart);
      localStorage.setItem('flambeau_custom_partners', JSON.stringify(partners));

      const mailSubject = encodeURIComponent("Demande de Partenariat: " + type);
      const mailBody = encodeURIComponent("Nom/Entreprise: " + name + "\nEmail: " + email + "\nTéléphone: " + phone + "\nType: " + type + "\n\nDescription:\n" + desc);

      showLoaderAndSubmit(() => {
        window.location.href = "mailto:contact@flambeauboosterdrc.com?subject=" + mailSubject + "&body=" + mailBody;
        partenariatForm.reset();
      });
    });
  }

  // Social Media Connection Logic (TikTok, FB, Chaînes)
  const fbConnectForm = document.getElementById('fbConnectForm');
  if (fbConnectForm) {
    fbConnectForm.addEventListener('submit', (e) => {
      e.preventDefault();
      const advertiser = document.getElementById('fbAdvertiser').value;
      const adContent = document.getElementById('fbAdContent').value;
      const format = document.getElementById('fbFormat').value;

      const campaign = { platform: 'Facebook Ads', advertiser, adContent, detail: format };
      let campaigns = JSON.parse(localStorage.getItem('flambeau_social_campaigns') || '[]');
      campaigns.push(campaign);
      localStorage.setItem('flambeau_social_campaigns', JSON.stringify(campaigns));

      showLoaderAndSubmit(() => {
        alert('Espace Facebook Ads connecté et campagne enregistrée avec succès !');
        fbConnectForm.reset();
        loadSocialCampaigns();
      });
    });
  }

  const tiktokConnectForm = document.getElementById('tiktokConnectForm');
  if (tiktokConnectForm) {
    tiktokConnectForm.addEventListener('submit', (e) => {
      e.preventDefault();
      const advertiser = document.getElementById('tkAdvertiser').value;
      const adContent = document.getElementById('tkAdContent').value;
      const channel = document.getElementById('tkChannel').value;

      const campaign = { platform: 'TikTok & Chaînes', advertiser, adContent, detail: channel };
      let campaigns = JSON.parse(localStorage.getItem('flambeau_social_campaigns') || '[]');
      campaigns.push(campaign);
      localStorage.setItem('flambeau_social_campaigns', JSON.stringify(campaigns));

      showLoaderAndSubmit(() => {
        alert('Espace TikTok & Chaînes connecté et campagne enregistrée avec succès !');
        tiktokConnectForm.reset();
        loadSocialCampaigns();
      });
    });
  }

  function loadSocialCampaigns() {
    const listContainer = document.getElementById('socialCampaignsList');
    const countSpan = document.getElementById('socialCampaignCount');
    const noMsg = document.getElementById('noSocialMsg');
    if (listContainer) {
      let campaigns = JSON.parse(localStorage.getItem('flambeau_social_campaigns') || '[]');
      if(countSpan) countSpan.textContent = campaigns.length;
      if(campaigns.length > 0 && noMsg) noMsg.style.display = 'none';

      listContainer.innerHTML = campaigns.length === 0 ? '<p style="color:var(--gray);">Aucune campagne sociale connectée pour l\'instant.</p>' : '';
      campaigns.forEach(c => {
        const div = document.createElement('div');
        div.style.cssText = 'background:var(--white); padding:0.75rem 1rem; border-radius:6px; margin-bottom:0.75rem; border:1px solid var(--border);';
        div.innerHTML = `<strong>[${c.platform}] ${c.advertiser}</strong><br><span style="font-size:0.85rem; color:var(--gray);">Annonce : ${c.adContent} (${c.detail})</span>`;
        listContainer.appendChild(div);
      });
    }
  }
  loadSocialCampaigns();

  // Camera Capture for publier-projet.html
  const captureBtn = document.getElementById('captureBtn');
  const cameraPreviewContainer = document.getElementById('cameraPreviewContainer');
  const cameraVideo = document.getElementById('cameraVideo');
  const takeSnapshotBtn = document.getElementById('takeSnapshotBtn');
  const cameraCanvas = document.getElementById('cameraCanvas');
  const snapshotResultContainer = document.getElementById('snapshotResultContainer');
  const snapshotResultImg = document.getElementById('snapshotResultImg');
  const retakeBtn = document.getElementById('retakeBtn');
  const projImgInput = document.getElementById('projImg');
  const captureStatus = document.getElementById('captureStatus');

  let mediaStream = null;

  if (captureBtn) {
    captureBtn.addEventListener('click', async () => {
      try {
        mediaStream = await navigator.mediaDevices.getUserMedia({ video: true, audio: false });
        cameraVideo.srcObject = mediaStream;
        cameraPreviewContainer.style.display = 'block';
        captureBtn.style.display = 'none';
      } catch (err) {
        alert("Impossible d'accéder à la caméra : " + err.message);
      }
    });
  }

  if (takeSnapshotBtn) {
    takeSnapshotBtn.addEventListener('click', () => {
      if (!mediaStream) return;
      const width = cameraVideo.videoWidth || 640;
      const height = cameraVideo.videoHeight || 480;
      cameraCanvas.width = width;
      cameraCanvas.height = height;
      const ctx = cameraCanvas.getContext('2d');
      ctx.drawImage(cameraVideo, 0, 0, width, height);
      const dataUrl = cameraCanvas.toDataURL('image/png');

      projImgInput.value = dataUrl;
      snapshotResultImg.src = dataUrl;
      snapshotResultContainer.style.display = 'block';
      cameraPreviewContainer.style.display = 'none';
      captureStatus.textContent = 'Capture photo enregistrée avec succès !';
      captureStatus.style.color = 'var(--primary)';

      mediaStream.getTracks().forEach(track => track.stop());
    });
  }

  if (retakeBtn) {
    retakeBtn.addEventListener('click', async () => {
      snapshotResultContainer.style.display = 'none';
      captureBtn.style.display = 'inline-flex';
      projImgInput.value = '';
      captureStatus.textContent = 'Aucune capture effectuée';
      captureStatus.style.color = 'var(--gray)';
    });
  }

  // Camera Capture for gestion.html (Agent Photo)
  const captureAgentBtn = document.getElementById('captureAgentBtn');
  const cameraAgentPreviewContainer = document.getElementById('cameraAgentPreviewContainer');
  const cameraAgentVideo = document.getElementById('cameraAgentVideo');
  const takeAgentSnapshotBtn = document.getElementById('takeAgentSnapshotBtn');
  const cameraAgentCanvas = document.getElementById('cameraAgentCanvas');
  const agentImgInput = document.getElementById('agentImg');
  const captureAgentStatus = document.getElementById('captureAgentStatus');

  let agentMediaStream = null;

  if (captureAgentBtn) {
    captureAgentBtn.addEventListener('click', async () => {
      try {
        agentMediaStream = await navigator.mediaDevices.getUserMedia({ video: true, audio: false });
        cameraAgentVideo.srcObject = agentMediaStream;
        cameraAgentPreviewContainer.style.display = 'block';
        captureAgentBtn.style.display = 'none';
      } catch (err) {
        alert("Impossible d'accéder à la caméra : " + err.message);
      }
    });
  }

  if (takeAgentSnapshotBtn) {
    takeAgentSnapshotBtn.addEventListener('click', () => {
      if (!agentMediaStream) return;
      const width = cameraAgentVideo.videoWidth || 640;
      const height = cameraAgentVideo.videoHeight || 480;
      cameraAgentCanvas.width = width;
      cameraAgentCanvas.height = height;
      const ctx = cameraAgentCanvas.getContext('2d');
      ctx.drawImage(cameraAgentVideo, 0, 0, width, height);
      const dataUrl = cameraAgentCanvas.toDataURL('image/png');

      agentImgInput.value = dataUrl;
      cameraAgentPreviewContainer.style.display = 'none';
      captureAgentBtn.style.display = 'inline-flex';
      captureAgentStatus.textContent = 'Photo agent capturée avec succès !';
      captureAgentStatus.style.color = 'var(--primary)';

      agentMediaStream.getTracks().forEach(track => track.stop());
    });
  }

  const publierProjetForm = document.getElementById('publierProjetForm');
  if(publierProjetForm) {
    publierProjetForm.addEventListener('submit', (e) => {
      e.preventDefault();
      const projName = document.getElementById('projName').value;
      const projSecteur = document.getElementById('projSecteur').value;
      const projProvince = document.getElementById('projProvince').value;
      const projVille = document.getElementById('projVille').value;
      const projDesc = document.getElementById('projDesc').value;
      const projBesoinFinancement = document.getElementById('projBesoinFinancement').value;
      const projMontant = document.getElementById('projMontant').value;
      const projFonds = document.getElementById('projFonds').value;
      const projEmplois = document.getElementById('projEmplois').value;
      const projStade = document.getElementById('projStade').value;
      const projImg = document.getElementById('projImg').value;
      const projContact = document.getElementById('projContact').value;

      const newProject = {
        projName, projSecteur, projProvince, projVille, projDesc,
        projBesoinFinancement, projMontant, projFonds, projEmplois, projStade, projImg, projContact
      };

      let projects = JSON.parse(localStorage.getItem('flambeau_entrepreneurial_projects') || '[]');
      projects.push(newProject);
      localStorage.setItem('flambeau_entrepreneurial_projects', JSON.stringify(projects));

      const mailSubject = encodeURIComponent("Publication de Projet Entrepreneurial: " + projName);
      const mailBody = encodeURIComponent(
        "Nom du projet: " + projName + "\n" +
        "Secteur d'activité: " + projSecteur + "\n" +
        "Province: " + projProvince + "\n" +
        "Ville: " + projVille + "\n" +
        "Description: " + projDesc + "\n" +
        "Besoin de financement: " + projBesoinFinancement + "\n" +
        "Montant recherché: " + projMontant + "\n" +
        "Fonds propres disponibles: " + projFonds + "\n" +
        "Nombre d'emplois prévus: " + projEmplois + "\n" +
        "Stade du projet: " + projStade + "\n" +
        "Coordonnées: " + projContact
      );

      showLoaderAndSubmit(() => {
        alert('Projet entrepreneurial publié et enregistré avec succès !');
        window.location.href = "mailto:contact@flambeauboosterdrc.com?subject=" + mailSubject + "&body=" + mailBody;
        publierProjetForm.reset();
        snapshotResultContainer.style.display = 'none';
        captureStatus.textContent = 'Aucune capture effectuée';
      });
    });
  }

  const addAgentForm = document.getElementById('addAgentForm');
  if (addAgentForm) {
    addAgentForm.addEventListener('submit', (e) => {
      e.preventDefault();
      const name = document.getElementById('agentName').value;
      const role = document.getElementById('agentRole').value;
      const city = document.getElementById('agentCity').value;
      const phone = document.getElementById('agentPhone').value;
      const img = document.getElementById('agentImg').value;

      const newAgent = { name, role, city, phone, img };
      let agents = JSON.parse(localStorage.getItem('flambeau_custom_agents') || '[]');
      agents.push(newAgent);
      localStorage.setItem('flambeau_custom_agents', JSON.stringify(agents));

      showLoaderAndSubmit(() => {
        alert('Agent ajouté et enregistré dans la base de données avec succès !');
        addAgentForm.reset();
        captureAgentStatus.textContent = 'Aucune photo capturée';
        loadDatabaseRecords();
      });
    });
  }

  const agentsGrid = document.getElementById('agentsGrid');
  if (agentsGrid) {
    let agents = JSON.parse(localStorage.getItem('flambeau_custom_agents') || '[]');
    agents.forEach(agent => {
      const card = document.createElement('div');
      card.className = 'agent-card';
      card.innerHTML = `
        <div class="agent-img"><img src="${agent.img}" alt="Agent"></div>
        <div class="agent-info">
          <h3>${agent.name}</h3>
          <p class="agent-role"><i class="fa-solid fa-award"></i> ${agent.role}</p>
          <p class="agent-city"><i class="fa-solid fa-location-dot"></i> ${agent.city}</p>
          <p class="agent-phone"><i class="fa-solid fa-phone"></i> ${agent.phone}</p>
          <a href="https://wa.me/${agent.phone.replace(/\D/g,'')}" class="btn btn-primary" style="width:100%; margin-top:1rem; text-align:center;"><i class="fa-brands fa-whatsapp"></i> Contacter l'agent</a>
        </div>
      `;
      agentsGrid.appendChild(card);
    });
  }

  const addPartnerForm = document.getElementById('addPartnerForm');
  if (addPartnerForm) {
    addPartnerForm.addEventListener('submit', (e) => {
      e.preventDefault();
      const name = document.getElementById('partName').value;
      const type = document.getElementById('partType').value;
      const contact = document.getElementById('partContact').value;

      const newPart = { name, type, contact };
      let partners = JSON.parse(localStorage.getItem('flambeau_custom_partners') || '[]');
      partners.push(newPart);
      localStorage.setItem('flambeau_custom_partners', JSON.stringify(partners));

      showLoaderAndSubmit(() => {
        alert('Partenaire enregistré dans la base de données avec succès !');
        addPartnerForm.reset();
        loadDatabaseRecords();
      });
    });
  }

  function loadDatabaseRecords() {
    const agentsDbList = document.getElementById('agentsDbList');
    const partnersDbList = document.getElementById('partnersDbList');
    const agentCount = document.getElementById('agentCount');
    const partnerCount = document.getElementById('partnerCount');
    const noAgentDbMsg = document.getElementById('noAgentDbMsg');
    const noPartnerDbMsg = document.getElementById('noPartnerDbMsg');

    if (agentsDbList && partnersDbList) {
      let agents = JSON.parse(localStorage.getItem('flambeau_custom_agents') || '[]');
      let partners = JSON.parse(localStorage.getItem('flambeau_custom_partners') || '[]');

      if(agentCount) agentCount.textContent = agents.length;
      if(partnerCount) partnerCount.textContent = partners.length;

      if(agents.length > 0 && noAgentDbMsg) {
        noAgentDbMsg.style.display = 'none';
      }
      if(partners.length > 0 && noPartnerDbMsg) {
        noPartnerDbMsg.style.display = 'none';
      }

      agentsDbList.innerHTML = agents.length === 0 ? '<p style="color:var(--gray);">Aucun agent enregistré pour l\'instant.</p>' : '';
      agents.forEach(a => {
        const div = document.createElement('div');
        div.style.css = 'background:var(--white); padding:0.75rem; border-radius:6px; margin-bottom:0.75rem; border:1px solid var(--border);';
        div.innerHTML = `<strong>${a.name}</strong><br><span style="font-size:0.85rem; color:var(--gray);">${a.role} - ${a.city}</span><br><span style="font-size:0.85rem; color:var(--primary);">${a.phone}</span>`;
        agentsDbList.appendChild(div);
      });

      partnersDbList.innerHTML = partners.length === 0 ? '<p style="color:var(--gray);">Aucun partenaire enregistré pour l\'instant.</p>' : '';
      partners.forEach(p => {
        const div = document.createElement('div');
        div.style.css = 'background:var(--white); padding:0.75rem; border-radius:6px; margin-bottom:0.75rem; border:1px solid var(--border);';
        div.innerHTML = `<strong>${p.name}</strong><br><span style="font-size:0.85rem; color:var(--gray);">${p.type}</span><br><span style="font-size:0.85rem; color:var(--primary);">${p.contact}</span>`;
        partnersDbList.appendChild(div);
      });
    }
  }
  loadDatabaseRecords();

  const mapElement = document.getElementById('map');
  if (mapElement && typeof L !== 'undefined') {
    const map = L.map('map').setView([-11.6879, 27.4937], 13);
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      maxZoom: 19,
      attribution: '&copy; OpenStreetMap contributors'
    }).addTo(map);

    const properties = [
      { name: "Villa Moderne Golf", coords: [-11.6600, 27.4800], city: "Lubumbashi", price: "$350,000" },
      { name: "Appartement Lumineux", coords: [-11.6800, 27.5000], city: "Lubumbashi", price: "$1,200/mois" },
      { name: "Résidence Joli Site", coords: [-10.9814, 26.7333], city: "Likasi", price: "$220,000" },
      { name: "Panneau LED Centre-Ville (Publicité)", coords: [-11.6750, 27.4850], city: "Lubumbashi", price: "$350/mois" },
      { name: "Toyota Land Cruiser V8 (Auto)", coords: [-11.6700, 27.4900], city: "Lubumbashi", price: "$65,000" },
      { name: "Toyota RAV4 (Location)", coords: [-10.7100, 25.4600], city: "Kolwezi", price: "$90/jour" }
    ];

    const mapList = document.getElementById('mapList');
    properties.forEach((prop, index) => {
      const marker = L.marker(prop.coords).addTo(map);
      marker.bindPopup(`<b>${prop.name}</b><br>${prop.city}<br><b>${prop.price}</b>`);

      if(mapList) {
        const li = document.createElement('li');
        li.innerHTML = `<h4>${prop.name}</h4><p>${prop.city} - ${prop.price}</p>`;
        li.addEventListener('click', () => {
          map.setView(prop.coords, 15);
          marker.openPopup();
        });
        mapList.appendChild(li);
      }
    });
  }
});