function cleanWordEncoding(text) {

    if (!text) return '';

  

    return text

      .replace(/•|•|\u2022/g, '*')  // bullet symbols

      .replace(/–|—|–|—/g, '-')       // dashes

      .replace(/’|‘|’|‘/g, "'")        // single quotes

      .replace(/“|”|“|”/g, '"')        // double quotes

      .replace(/[^\x00-\x7F]/g, '');      // remove other weird characters if needed

  }

(function () {

    function getUserId() {

      let userId = localStorage.getItem('opulent_user_id');

      if (!userId) {

        userId = 'user_' + Date.now() + '_' + Math.floor(Math.random() * 10000);

        localStorage.setItem('opulent_user_id', userId);

      }

      return userId;

    }

  

    function validateEmail(email) {

      const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

      return re.test(email);

    }

  

    function validatePhone(phone) {

      const re = /^[0-9]{10,15}$/;

      return re.test(phone);

    }

  

    function appendMessage(role, htmlContent) {

      const chatBody = document.getElementById("chat-body");

      const bubble = document.createElement("div");

    

      bubble.style.margin = "10px 0";

      bubble.style.padding = "12px 16px";

      bubble.style.maxWidth = "80%";

      bubble.style.borderRadius = "12px";

      bubble.style.lineHeight = "1.5";

      bubble.style.wordWrap = "break-word";

      bubble.style.backgroundColor = role === "user" ? "#e0f7ff" : "#f0f0f0";

      bubble.style.alignSelf = role === "user" ? "flex-end" : "flex-start";

      bubble.style.color = "#111";

      bubble.style.fontSize = "14px";

      bubble.style.marginLeft = role === "user" ? "auto" : "0";

      bubble.innerHTML = htmlContent;

    

      chatBody.appendChild(bubble);

    

      // Instead of scrolling to bottom, scroll to the new message if it's from bot

      if (role === "bot") {

        bubble.scrollIntoView({ behavior: "smooth", block: "start" });

      }

    }

    

    

    function formatBotResponse(text) {

      if (text.includes('* ')) {

        let paragraphs = text.split(/\n\n|\r\n\r\n/);

        let formattedText = '';

        

        paragraphs.forEach((paragraph, index) => {

          if (!paragraph.trim()) return;

          

          if (!paragraph.trim().startsWith('*') && index === 0) {

            formattedText += `<p class="chat-header">${paragraph}</p>`;

          }

          else if (cleanWordEncoding(paragraph).includes('* ')) {

            let cleanedParagraph = cleanWordEncoding(paragraph);

            let lines = cleanedParagraph.split(/\n|\r\n/);

          

            formattedText += '<ul class="chat-bullets">';

            lines.forEach(line => {

              if (line.trim().startsWith('*')) {

                let content = line.trim().substring(1).trim();

                content = content.replace(/\*\*\*([^*]+)\*\*\*/g, '<strong>$1</strong>');

                content = content.replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>');

                content = content.replace(/\*([^*]+)\*/g, '<em>$1</em>');

                formattedText += `<li>${content}</li>`;

              } else if (line.trim()) {

                formattedText += `<p>${line}</p>`;

              }

            });

            formattedText += '</ul>';

          }

          

          else {

            formattedText += `<p>${paragraph}</p>`;

          }

        });

         

        return formattedText;

      }

      

      if (text.includes('•') || text.includes('<li>')) {

        return text;

      }

      

      let paragraphs = text.split(/\n\n|\r\n\r\n/);

      let formattedText = '';

      

      paragraphs.forEach((paragraph, index) => {

        if (!paragraph.trim()) return;

        

        if (paragraph.length < 80 && !paragraph.endsWith('.') && paragraphs.length > 1) {

          formattedText += `<p class="chat-header">${paragraph}</p>`;

        } 

        else if (paragraph.length < 40) {

          formattedText += `<p>${paragraph}</p>`;

        }

        else {

          let sentences = paragraph.split(/(?<=\.|\?|\!) (?=[A-Z])/);

          

          if (sentences.length > 1) {

            formattedText += '<ul class="chat-bullets">';

            sentences.forEach(sentence => {

              if (sentence.trim()) {

                formattedText += `<li>${sentence.trim()}</li>`;

              }

            });

            formattedText += '</ul>';

          } else {

            formattedText += `<p>${paragraph}</p>`;

          }

        }

      });

      

      return formattedText;

    }





    

 

    

    function sendChatMessage(message) {

     const userId = getUserId(); // Retrieve the user ID from localStorage

      const clientId = localStorage.getItem('client_id'); // Retrieve the client ID from localStorage (or wherever it's stored)

      const chatBody = document.getElementById("chat-body");

    

      appendMessage("user", message);

    

      appendMessage("bot", `

      <style>

              @keyframes blink {

        0%, 80%, 100% {

          transform: scale(0.8);

          opacity: 0.5;

        }

        40% {

          transform: scale(1.2);

          opacity: 1;

        }

      }

      </style>

  <div style="display: flex; align-items: center; gap: 8px; background: #f1f1f1; padding: 8px 14px; border-radius: 18px; max-width: fit-content;">

    <div style="display: flex; gap: 4px;">

      <div style="width: 6px; height: 6px; background-color: #888; border-radius: 50%; animation: blink 1.4s infinite;"></div>

      <div style="width: 6px; height: 6px; background-color: #888; border-radius: 50%; animation: blink 1.4s infinite 0.2s;"></div>

      <div style="width: 6px; height: 6px; background-color: #888; border-radius: 50%; animation: blink 1.4s infinite 0.4s;"></div>

    </div>

    <span style="font-style: italic; color: #666; margin-left: 6px;">Typing...</span>

  </div>

`);

            
          fetch("https://chat.pyot.co.in/api/askdocsopulent/", {
            method: "POST",
            headers: {
              "Content-Type": "application/json",
              "Accept": "application/json"
            },
            body: JSON.stringify({
              query: message,
              user_id: userId,
              client_id: clientId
            })
          })
          .then(response => {
            if (!response.ok) throw new Error("Network response was not ok");
            return response.json();
          })
          .then(data => {
            console.log("Success:", data);

            chatBody.removeChild(chatBody.lastChild);

            <!-- const formattedAnswer = formatBotResponse(data.answer || "<i>No response found.</i>"); -->
             <!-- // ✅ If response already contains HTML (buttons, links, paragraphs) — skip formatting -->
              const isHtmlResponse = data.answer && (
                  data.answer.includes('<button') ||
                  data.answer.includes('<a href') ||
                  data.answer.includes('<p>') ||
                  data.answer.includes('<strong>')
              );

              const formattedAnswer = isHtmlResponse
                  ? data.answer
                  : formatBotResponse(data.answer || "<i>No response found.</i>");
            appendMessage("bot", formattedAnswer);
            saveToDatabase(userId, clientId, message, data.answer);

            document.getElementById("chat-input").value = '';
          })
         
      .catch(error => {

        chatBody.removeChild(chatBody.lastChild);

        appendMessage("bot", "<i>Error connecting to server.</i>");

        console.error("[Chat Widget Error]", error);

      });

    }



    function saveToDatabase(userId, clientId, question, answer) {



      fetch("https://opulent-foundation.com/chatbot/api/bot-chat-save", {

        method: "POST",

        headers: {

          "Content-Type": "application/json",

          "accept": "application/json"

        },

        body: JSON.stringify({

          user_id: userId,    

          client_id: clientId,

          question: question,

          answer: answer,

    

        })

      })

      .then(response => response.json())

      .then(data => {

        console.log("Data saved to database:", data);

      })

      .catch(error => {

        console.error("[Database Save Error]", error);

      });

    }

    

    

    function initChatWidget() {

      const widgetHTML = `

        <style>

          #chat-toggle-button-bot {

            position: fixed;

            bottom: 20px;

            right: 20px;

            width: 60px;

            height: 60px;

            border-radius: 50%;

            background-color: #2563eb !important;

            color: #fff;

            font-size: 30px;

            text-align: center;

            line-height: 60px;

            box-shadow: 0 4px 10px rgba(0,0,0,0.3);

            cursor: pointer;

            z-index: 9999;

            transition: all 0.3s ease;

          }

          

          #chat-toggle-button-bot:hover {

            transform: scale(1.05);

            box-shadow: 0 6px 15px rgba(0,0,0,0.4);

          }

  

          #chat-widget-box {

            display: none;

            flex-direction: column;

            position: fixed;

            bottom: 90px;

            right: 20px;

            width: 420px;

            height: 550px;

            max-width: 95vw;

            max-height: 75vh;

            background: #ffffff;

            border: 1px solid #ccc;

            border-radius: 16px;

            box-shadow: 0 8px 30px rgba(0,0,0,0.2);

            overflow: hidden;

            z-index: 9998;

            font-family: 'Segoe UI', sans-serif;

            transition: all 0.3s ease;

          }

  

          #chat-header {

            background: linear-gradient(135deg, #1e293b, #334155);

            color: #ffffff;

            padding: 16px 20px;

            font-weight: bold;

            font-size: 16px;

            border-bottom: 1px solid #333;

          }

  

          #chat-body {

            flex: 1;

            padding: 18px;

            overflow-y: auto;

            background: #f8fafc;

            font-size: 14px;

            color: #333;

            scroll-behavior: smooth;

          }

  

          #chat-body a {

            background: #2563eb;

            color: #fff !important;

            padding: 10px 16px;

            border-radius: 8px;

            text-decoration: none;

            display: inline-block;

            margin-top: 12px;

            font-weight: 500;

            transition: all 0.2s ease;

            box-shadow: 0 2px 5px rgba(37, 99, 235, 0.3);

          }

          

          #chat-body a:hover {

            background: #1d4ed8;

            transform: translateY(-2px);

            box-shadow: 0 4px 8px rgba(37, 99, 235, 0.4);

          }

  

          #chat-body img {

            max-width: 100%;

            border-radius: 8px;

            margin-top: 10px;

          }

          

          #chat-body p {

            margin: 8px 0;

          }

          

          #chat-body .chat-header {

            font-weight: 600;

            font-size: 15px; 

            color: #1e293b;

            margin-bottom: 10px;

          }

          

          #chat-body .chat-bullets {

            margin: 5px 0 10px 0;

            padding-left: 20px;

          }

          

          #chat-body .chat-bullets li {

            margin-bottom: 8px;

            position: relative;

            list-style-type: none;

            padding-left: 15px;

          }

          

          #chat-body .chat-bullets li:before {

            // content: "•";

            color: #2563eb;

            font-weight: bold;

            font-size: 20px;

            position: absolute;

            left: 0;

            top: 0;

          }

          

          #chat-body .chat-bullets li strong,

          #chat-body .chat-bullets li em {

            display: inline-block;

          }

          

          #chat-body .chat-bullets li strong {

            color: #1e293b;

            font-weight: 600;

          }

  

          #chat-footer {

            display: flex;

            border-top: 1px solid #e2e8f0;

            background: #f1f5f9;

          }

  

          #chat-input {

            flex: 1;

            padding: 14px;

            border: none;

            outline: none;

            font-size: 14px;

            background: transparent;

          }

  

          #chat-send-button {

            padding: 12px 22px;

            background: linear-gradient(to right, #2563eb, #3b82f6);

            color: #ffffff;

            font-weight: 500;

            border: none;

            cursor: pointer;

            transition: all 0.2s ease;

          }

          

          #chat-send-button:hover {

            background: linear-gradient(to right, #1d4ed8, #2563eb);

          }

  

          /* Login form styles */

          #login-form {

            padding: 20px;

            background: white;

            border-radius: 8px;

            box-shadow: 0 4px 6px rgba(0,0,0,0.1);

          }

          

          .form-group {

            margin-bottom: 15px;

          }

          

          .form-group label {

            display: block;

            margin-bottom: 5px;

            font-weight: 500;

            color: #333;

          }

          

          .form-control {

            width: 100%;

            padding: 10px;

            border: 1px solid #ddd;

            border-radius: 4px;

            font-size: 14px;

          }

          

          .btn-primary {

            background-color: #2563eb;

            color: white;

            border: none;

            padding: 10px 15px;

            border-radius: 4px;

            cursor: pointer;

            width: 100%;

            font-weight: 500;

          }

          

          .btn-primary:hover {

            background-color: #1d4ed8;

          }

          

          .error-message {

            color: #dc2626;

            font-size: 12px;

            margin-top: 5px;

            display: none;

          }

  

          @media (max-width: 500px) {

            #chat-widget-box {

              width: 95vw;

              right: 2.5vw;

              height: 80vh;

            }

          }


       #chat-toggle-button-bot::before {
        margin-top: 17px;
        content: "";
        display: inline-block;
        width: 30px;
        height: 30px;
        background-image: url("https://opulent-foundation.com/chatbot/chatimage.png");
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
      }

      #chat-toggle-button-bot.open::before {
        margin-top: 17px;
        background-image: url("https://opulent-foundation.com/chatbot/cross.png");
      }





          .phone-row {

            display: flex;

            gap: 10px;

            margin-top: 5px;

          }



          .country-code {

            width: 100px;

            padding: 8px;

          }



          .phone-input {

            flex: 1;

            padding: 8px;

          }



          .error-message {

            color: red;

            font-size: 0.9em;

            margin-top: 5px;

          }



          .form-group {

            margin-bottom: 15px;

          }

        </style>

  

<div id="chat-toggle-button-bot">

</div>

  

        <div id="chat-widget-box">

          <div id="chat-header">Opulent Fountain Group</div>

          <div id="chat-body">

            <div id="login-form-container">

              <form id="login-form">

                <div class="form-group">

                  <label for="userName">Name</label>

                  <input type="text" class="form-control" id="userName" name="name" placeholder="Enter your name" required>

                  <div class="error-message" id="name-error">Please enter your name</div>

                </div>

                <div class="form-group">

                  <label for="userEmail">Email</label>

                  <input type="email" class="form-control" id="userEmail" name="email" placeholder="Enter your email" required>

                  <div class="error-message" id="email-error">Please enter a valid email</div>

                </div>

                <div class="form-group">

                  <label for="userPhone">Phone</label>

                  <div class="phone-row">

                    <select class="country-code" id="countryCode" name="countryCode" required>

                      <option value="">Country Code</option>

                      <option value="+1">+1 (USA, Canada, etc.)</option>

                      <option value="+44">+44 (United Kingdom)</option>

                      <option value="+91">+91 (India)</option>

                      <option value="+61">+61 (Australia)</option>

                      <option value="+49">+49 (Germany)</option>

                      <option value="+33">+33 (France)</option>

                      <option value="+81">+81 (Japan)</option>

                      <option value="+82">+82 (South Korea)</option>

                      <option value="+86">+86 (China)</option>

                      <option value="+55">+55 (Brazil)</option>

                      <option value="+34">+34 (Spain)</option>

                      <option value="+39">+39 (Italy)</option>

                      <option value="+7">+7 (Russia, Kazakhstan)</option>

                      <option value="+52">+52 (Mexico)</option>

                      <option value="+27">+27 (South Africa)</option>

                      <option value="+91">+91 (India)</option>

                      <option value="+20">+20 (Egypt)</option>

                      <option value="+971">+971 (United Arab Emirates)</option>

                      <option value="+966">+966 (Saudi Arabia)</option>

                      <option value="+971">+971 (United Arab Emirates)</option>

                    </select>

                    <input type="text" class="phone-input" id="userPhone" name="phone" placeholder="Enter your phone" required>

                  </div>

                  <div class="error-message" id="phone-error">Please enter a valid phone number (10-15 digits)</div>

                </div>

                

                 

                <button type="submit" class="btn-primary">Start Chat</button>

              </form>

            </div>

            <div id="chat-response" style="display: none;">

              <p class="chat-header">Hello! <span id="WelcomeUserName"></span> to Opulent Fountain Group</p>

              <ul class="chat-bullets">

                <p>Welcome!</p>

                <p>We’re glad you’re here. The Opulent Fountain Group (TOFG) is a faith-based organization helping individuals and families through legal, financial, administrative, and spiritual challenges. We’ve supported thousands nationwide with strategic guidance and practical solutions that bring peace and progress. </p>

                <p>What’s on your mind?</p>

              </ul>

              <!-- <a href="https://calendly.com/opulentgroup/30min" target="_blank">Schedule a 30-Min Meeting</a> -->

            </div>

          </div>

          <div id="chat-footer" style="display: none;">

            <input type="text" id="chat-input" placeholder="Ask about our services..." />

            <button id="chat-send-button">Send</button>

          </div>

        </div>

      `;

  

      document.body.insertAdjacentHTML("beforeend", widgetHTML);

  

      const toggleButton = document.getElementById("chat-toggle-button-bot");

      const chatBox = document.getElementById("chat-widget-box");

      const loginForm = document.getElementById("login-form");

      const chatResponse = document.getElementById("chat-response");

      const chatFooter = document.getElementById("chat-footer");

      const loginFormContainer = document.getElementById("login-form-container");

  
        const toggleIcon = document.getElementById("toggle-icon");

     toggleButton.addEventListener("click", function () {
        const isHidden = window.getComputedStyle(chatBox).display === "none";
        chatBox.style.display = isHidden ? "flex" : "none";

        // Toggle class that controls which icon is shown
        toggleButton.classList.toggle("open", isHidden);
      });

  

      loginForm.addEventListener("submit", function(e) {

        e.preventDefault();

        

        document.querySelectorAll('.error-message').forEach(el => el.style.display = 'none');

      

        const name = document.getElementById("userName").value.trim();

        const email = document.getElementById("userEmail").value.trim();

        const phone = document.getElementById("userPhone").value.trim();

        const countryCode = document.getElementById('countryCode'); 



      

        let isValid = true;

      

        if (!name) {

          document.getElementById("name-error").style.display = 'block';

          isValid = false;

        }

      

        if (!validateEmail(email)) {

          document.getElementById("email-error").style.display = 'block';

          isValid = false;

        }

      

        if (!validatePhone(phone)) {

          document.getElementById("phone-error").style.display = 'block';

          isValid = false;

        }

      

       

      

        if (isValid) {

          localStorage.setItem('opulent_user_name', name);

          localStorage.setItem('opulent_user_email', email);

          localStorage.setItem('opulent_user_phone', phone);

          localStorage.setItem('opulent_user_countryCode', countryCode);





         // $username = localStorage.getItem('opulent_user_name');

          //$("#WelcomeUserName").text($username);



          const userName = localStorage.getItem('opulent_user_name');

          if (userName) {

            document.getElementById("WelcomeUserName").textContent = userName;

          }





          const formData = new FormData();

          formData.append('name', name);

          formData.append('email', email);

          formData.append('phone', phone);

          formData.append('countryCode', document.getElementById('countryCode').value);





      

          fetch('https://opulent-foundation.com/chatbot/api/bot-save-data', {

            method: 'POST',

            body: formData

          })

          .then(response => response.json())

          .then(data => {

            if (data.user) {

              localStorage.setItem('opulent_user_id', data.user.id);

              localStorage.setItem('opulent_user_name', data.user.name); 

            }

            console.log('Saved successfully:', data);

            loginFormContainer.style.display = 'none';

            chatResponse.style.display = 'block';

            chatFooter.style.display = 'flex';

          })

          .catch(error => {

            console.error('Error:', error);

            alert('Something went wrong while saving your data.');

          });

        }

      });

      function validateEmail(email) {

        const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

        return re.test(email);

      }

      

      function validatePhone(phone) {

        const re = /^[0-9]{10,15}$/;

        return re.test(phone);

      }

      

  

      document.getElementById("chat-send-button").addEventListener("click", function () {

        const input = document.getElementById("chat-input");

        const message = input.value.trim();

        if (message) {

          sendChatMessage(message);

          input.value = ""; // Clear input immediately after sending

        }

      });

      

      document.getElementById("chat-input").addEventListener("keypress", function(event) {

        if (event.key === "Enter") {

          const message = this.value.trim();

          if (message) {

            sendChatMessage(message);

            this.value = ""; // Clear input on Enter

          }

        }

      });

    }

  

    window.addEventListener("load", initChatWidget);

  })();