<!-- 💬 Chat-Layer -->
// Live Chat System <c> Volker Niederastroth  Version V1.0 22.10.2025
<div id="chat-button" onclick="toggleChat()">💬</div>

<div id="chat-box" style="display:none;">
  <div id="chat-header">
    Live Chat <span id="chat-close" onclick="toggleChat()">✖</span>
  </div>
  <div id="chat-status"></div>
  <div id="chat-messages"></div>
  <form id="chatForm">
    <input type="hidden" name="sender" value="Gast">
    <input type="hidden" name="session_id" id="session_id">
    <input type="text" name="message" id="chat-input" placeholder="Nachricht..." required>
    <button type="submit">➤</button>
  </form>
</div>

<style>
/* Chat-Button */
#chat-button {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: #25D366;
  color: white;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  font-size: 30px;
  text-align: center;
  line-height: 60px;
  cursor: pointer;
  box-shadow: 0 4px 6px rgba(0,0,0,0.3);
  z-index: 9999;
}

/* Chat-Fenster */
#chat-box {
  display: none;
  position: fixed;
  bottom: 90px;
  right: 20px;
  width: 300px;
  max-height: 400px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  overflow: hidden;
  z-index: 10000;
  font-family: Arial, sans-serif;
}

/* Kopfzeile */
#chat-header {
  background: #25D366;
  color: white;
  padding: 10px;
  font-weight: bold;
}
#chat-close {
  float: right;
  cursor: pointer;
}

/* Nachrichtenbereich */
#chat-messages {
  height: 250px;
  overflow-y: auto;
  padding: 10px;
  font-size: 14px;
  border-bottom: 1px solid #ddd;
}
#chat-status {
  padding: 5px 10px;
  font-size: 13px;
  color: gray;
}

/* Eingabebereich */
#chatForm {
  display: flex;
  padding: 10px;
  background: #f9f9f9;
}
#chat-input {
  flex: 1;
  padding: 6px;
  border: 1px solid #ccc;
  border-radius: 5px;
}
#chatForm button {
  background: #25D366;
  color: white;
  border: none;
  padding: 6px 10px;
  border-radius: 5px;
  cursor: pointer;
  margin-left: 5px;
}
</style>

<script>
let lastMsgCount = 0;

// ==== Fenster ein/aus ====
function toggleChat() {
  const box = document.getElementById('chat-box');
  const btn = document.getElementById('chat-button');
  if (box.style.display === 'none' || box.style.display === '') {
    box.style.display = 'block';
    btn.style.display = 'none';
  } else {
    box.style.display = 'none';
    btn.style.display = 'block';
  }
}

// ==== Session-ID-System ====
if (!localStorage.chatSessionID) {
  localStorage.chatSessionID = 'sess_' + Math.random().toString(36).substr(2, 9);
}
document.getElementById('session_id').value = localStorage.chatSessionID;

// ==== Chat laden (mit Auto-Open) ====
async function loadMessages() {
  try {
    const res = await fetch('livechat/chat_backend.php?action=get&session_id=' + localStorage.chatSessionID);
    const msgs = await res.json();
    let html = '';

    msgs.forEach(m => {
      const t = new Date(m.timestamp).toLocaleTimeString('de-DE', {hour:'2-digit', minute:'2-digit'});
      html += `<p><b>${m.sender}:</b> ${m.message} <small style="color:#888">${t}</small></p>`;
    });

    const chatMessages = document.getElementById('chat-messages');
    chatMessages.innerHTML = html;
    chatMessages.scrollTop = 999999;

    // === Auto-Open bei neuer Admin-Nachricht ===
    if (msgs.length > lastMsgCount && lastMsgCount !== 0) {
      const lastMsg = msgs[msgs.length - 1];
      const chatBox = document.getElementById('chat-box');
      const chatBtn = document.getElementById('chat-button');
      if (lastMsg.sender === 'Admin' && chatBox.style.display === 'none') {
        chatBox.style.display = 'block';
        chatBtn.style.display = 'none';
      }
    }

    lastMsgCount = msgs.length;
  } catch (err) {
    console.error('Chat Fehler:', err);
  }
}

// ==== Nachricht senden ====
document.getElementById('chatForm').onsubmit = async (e) => {
  e.preventDefault();
  const message = e.target.message.value.trim();
  if (message === '') return;

  const form = new FormData();
  form.append('sender', 'Gast');
  form.append('message', message);
  form.append('session_id', localStorage.chatSessionID);

  await fetch('livechat/chat_backend.php?action=send', {
    method: 'POST',
    body: form
  });

  e.target.message.value = '';
  loadMessages();
};

// ==== Online-/Offline-Status prüfen ====
async function checkStatus() {
  try {
    const res = await fetch('livechat/chat_backend.php?action=status');
    const status = (await res.text()).trim();
    const el = document.getElementById('chat-status');
    const form = document.getElementById('chatForm');
	
// Admin kann auch in anderen Namen geändert werden
    if (status === 'online') {
      el.innerHTML = '<span style="color:green;">Admin ist online</span>';
      form.style.display = 'flex';
    } else {
      el.innerHTML = '<span style="color:red;">Admin ist offline</span>';
      form.style.display = 'none';
    }
  } catch (e) {
    console.error('Status-Fehler:', e);
  }
}

// ==== Regelmäßige Aktualisierung ====
setInterval(() => {
  loadMessages();
  checkStatus();
}, 3000);

loadMessages();
checkStatus();
</script>
