Embed

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Text Consultation</title>
  <style>
    body { font-family: Arial, sans-serif; }
    #consultation-widget {
      width: 400px;
      margin: 50px auto;
      border: 2px solid #444;
      border-radius: 12px;
      padding: 24px;
      box-shadow: 0 5px 30px #aaa;
      background: #fff;
    }
    .headline { font-size: 2em; font-weight: bold; margin-bottom: 15px; text-align: center; color: #2d2d2d; }
    .hidden { display: none; }
    .center { text-align: center; }
    .timer { font-weight: bold; color: #c00; }
    .rating-stars { font-size: 2em; color: #ddd; cursor: pointer; }
    .rating-stars.active { color: #fa0; }
    .btn { padding: 8px 18px; font-size: 1em; border-radius: 6px; border: none; background: #28a745; color: #fff; cursor: pointer;}
    .btn:disabled { background: #ccc; }
    input[type="email"], input[type="password"] { width:90%;padding:8px;margin:10px 0;}
    #tawkto-frame { width:100%; height:400px; border:none; }
    #tawkto-permission { margin: 12px 0; padding: 10px; border: 1px dashed #888; background: #f9f9f9; }
  </style>
</head>
<body>
  <div id="consultation-widget">
    <div id="welcome-box">
      <div class="headline">Text Consultation</div>
      <div class="center">
        <button class="btn" id="start-login-btn">Login to Start</button>
      </div>
    </div>

    <div id="login-box" class="hidden">
      <div class="center"><b>Login to continue</b></div>
      <form id="login-form" autocomplete="on">
        <div>
          <input type="email" id="user-email" placeholder="Enter your Email" required autocomplete="email">
        </div>
        <div>
          <input type="password" id="user-pass" placeholder="Password" required autocomplete="current-password">
        </div>
        <div class="center">
          <button type="submit" class="btn">Login</button>
        </div>
      </form>
      <div id="login-error" class="error center"></div>
    </div>

    <div id="payment-box" class="hidden center">
      <div style="margin-bottom:15px;">Text consultation for 3 minutes at Rs. 99/-<br>(PayU payment required)</div>
      <form id="payu-payment-form">
        <input type="hidden" name="key" value="zfXu9B">
        <input type="hidden" name="txnid" id="payu-txnid" value="">
        <input type="hidden" name="amount" value="99">
        <input type="hidden" name="productinfo" value="Text Consultation">
        <input type="hidden" name="firstname" id="payu-firstname" value="">
        <input type="hidden" name="email" id="payu-email" value="">
        <input type="hidden" name="merchantid" value="13141837">
        <input type="hidden" name="service_provider" value="payu_paisa">
        <input type="hidden" name="hash" id="payu-hash" value="">
        <button type="button" class="btn" id="pay-btn">Pay Rs. 99/- via PayU</button>
      </form>
      <div id="payment-status" class="center"></div>
    </div>

    <div id="permission-box" class="hidden center">
      <div style="font-size:1.1em; margin-bottom:15px;">
        Your payment is successful.<br>
        Click below to join the consultation chat.
      </div>
      <button class="btn" id="join-chat-btn">Join Chat Room</button>
    </div>

    <div id="chat-box" class="hidden">
      <div class="center">
        <b>Welcome! Please use the chat below for your consultation.</b>
      </div>
      <div id="tawkto-container" style="margin: 16px 0 8px 0; min-height:420px;">
        
      </div>
      <div id="tawkto-permission" class="center">
        <span style="font-size: 1.35em; font-weight: bold;">👋 Say Hi to Get Started!</span>
        <br>
        <button class="btn" id="grant-permission-btn" style="margin-top:10px;">Grant Permission (Admin Only)</button>
      </div>
      <div class="center" style="margin-top:8px;">
        <span class="timer" id="timer">03:00</span>
      </div>
    </div>

    <div id="rating-box" class="hidden center">
      <div style="font-size:1.2em;">Please rate your experience:</div>
      <div id="stars">
        <span class="rating-stars" data-star="1">&#9733;</span>
        <span class="rating-stars" data-star="2">&#9733;</span>
        <span class="rating-stars" data-star="3">&#9733;</span>
        <span class="rating-stars" data-star="4">&#9733;</span>
        <span class="rating-stars" data-star="5">&#9733;</span>
      </div>
      <div style="margin-top:10px;">
        <a href="https://g.page/r/CQxFy1X1Q2PjEAI/review" target="_blank" class="btn">Write a Google Review</a>
      </div>
      <div id="rating-result" style="margin-top:10px;"></div>
    </div>
  </div>

  <script>
    // Auto-fill email from localStorage
    function autoFillEmail() {
      const savedEmail = localStorage.getItem('userEmail');
      if(savedEmail && document.getElementById('user-email')) {
        document.getElementById('user-email').value = savedEmail;
      }
    }
    document.addEventListener("DOMContentLoaded", autoFillEmail);

    // Show login form
    document.getElementById('start-login-btn').onclick = function() {
      document.getElementById('welcome-box').classList.add('hidden');
      document.getElementById('login-box').classList.remove('hidden');
      autoFillEmail();
    };

    // Login logic
    document.getElementById('login-form').onsubmit = function(e) {
      e.preventDefault();
      let email = document.getElementById('user-email').value;
      let pass = document.getElementById('user-pass').value;
      if(email && pass) {
        localStorage.setItem('userEmail', email);
        document.getElementById('login-box').classList.add('hidden');
        document.getElementById('payment-box').classList.remove('hidden');
        document.getElementById('payu-email').value = email;
        document.getElementById('payu-firstname').value = email.split('@')[0];
        document.getElementById('payu-txnid').value = "TXN" + Math.floor(Math.random()*100000000);
      } else {
        document.getElementById('login-error').textContent = "Please enter valid credentials!";
      }
    };

    // Payment button
    document.getElementById('pay-btn').onclick = function() {
      document.getElementById('payment-status').innerHTML = "Processing payment...";
      setTimeout(function() {
        document.getElementById('payment-box').classList.add('hidden');
        document.getElementById('permission-box').classList.remove('hidden');
      }, 1200);
    };

    // Join Chat button
    document.getElementById('join-chat-btn').onclick = function() {
      document.getElementById('permission-box').classList.add('hidden');
      document.getElementById('chat-box').classList.remove('hidden');
      loadTawkToIframe();
      document.getElementById('tawkto-permission').style.display = '';
      document.getElementById('timer').textContent = '03:00';
    };

    // Grant Permission button
    document.getElementById('grant-permission-btn').onclick = function() {
      document.getElementById('tawkto-permission').style.display = 'none';
      startTimer(3); // 3 minutes
    };

    // Load Tawk.to iframe
    function loadTawkToIframe() {
      const container = document.getElementById('tawkto-container');
      container.innerHTML = '';
      const iframe = document.createElement('iframe');
      iframe.id = "tawkto-frame";
      iframe.src = "https://tawk.to/chat/68656e66eaceef190d658242/1iv63egnm";
      iframe.allow = "autoplay; microphone; clipboard-write";
      iframe.setAttribute('aria-label', 'Live chat');
      container.appendChild(iframe);
    }

    // Timer logic
    let timerInterval;
    function startTimer(minutes) {
      let seconds = minutes * 60;
      timerInterval = setInterval(function(){
        let m = Math.floor(seconds / 60);
        let s = seconds % 60;
        document.getElementById('timer').textContent =
          (m<10?'0':'')+m+":"+(s<10?'0':'')+s;
        if(seconds <= 0) {
          clearInterval(timerInterval);
          closeChat();
        }
        seconds--;
      }, 1000);
    }

    function closeChat() {
      document.getElementById('tawkto-container').innerHTML = "<div style='color:#c00; font-weight:bold; text-align:center;'>Chat session ended (3 min over)</div>";
      setTimeout(() => {
        document.getElementById('chat-box').classList.add('hidden');
        document.getElementById('rating-box').classList.remove('hidden');
      }, 1600);
    }

    // Rating logic
    let stars = document.querySelectorAll('.rating-stars');
    stars.forEach(star => {
      star.onclick = function() {
        let rating = parseInt(this.getAttribute('data-star'));
        stars.forEach((s,i) => {
          s.classList.toggle('active', i < rating);
        });
        document.getElementById('rating-result').innerHTML = "Thank you for rating: <b>" + rating + " star(s)</b>!";
      }
    });
  </script>
</body>
</html>