<?php include 'includes/header.php'; ?>
<div class="container content-box mt-5">
  <div class="text-center mb-4"><h1>Live Chat</h1><p class="subtext">Join the Home Time Radio chat room</p></div>
  <div class="row"><div class="col-lg-8"><div class="bg-light p-4 rounded mb-4" id="chatMessages" style="min-height:420px;max-height:420px;overflow:auto;"></div></div>
  <div class="col-lg-4"><div class="bg-light p-4 rounded"><form id="chatForm"><div class="mb-3"><label>Your name</label><input type="text" class="form-control" name="name" required></div><div class="mb-3"><label>Message</label><textarea class="form-control" name="message" rows="6" required></textarea></div><button class="btn btn-dark" type="submit">Send Message</button></form></div></div></div>
</div>
<script>
async function loadChat(){const res=await fetch('api/chat_get.php?ts='+Date.now(),{cache:'no-store'});const data=await res.json();const wrap=document.getElementById('chatMessages');wrap.innerHTML='';(data.messages||[]).forEach(row=>{const item=document.createElement('div');item.className='mb-3 border-bottom pb-2';item.innerHTML='<strong>'+(row.name||'Guest')+'</strong><br><span>'+(row.message||'')+'</span><div style="opacity:.7;font-size:.9em;">'+(row.time||'')+'</div>';wrap.appendChild(item);});wrap.scrollTop=wrap.scrollHeight;}document.getElementById('chatForm').addEventListener('submit',async function(e){e.preventDefault();const fd=new FormData(this);const res=await fetch('api/chat_post.php',{method:'POST',body:fd});const data=await res.json();if(data.ok){this.reset();loadChat();}else{alert(data.error||'Could not send message.');}});loadChat();setInterval(loadChat,15000);
</script>
<?php include 'includes/footer.php'; ?>
