@extends('layout')

@section('styles')
<style>
  * {
    box-sizing: border-box;
  }

  /* Socialvibe Chat UI */
  .chat-wrapper {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    background: #f8f8f8 url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400"><filter id="a"><feTurbulence type="fractalNoise" baseFrequency=".9" numOctaves="4"/></filter><rect width="400" height="400" filter="url(%23a)" opacity=".03"/></svg>');
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    width: 100%;
    max-width: 100vw;
  }

  .chat-header {
    padding: 1rem;
    background: linear-gradient(135deg, #2E0249 0%, #570A57 100%);
    flex-shrink: 0;
    box-shadow: 0 2px 10px rgba(46, 2, 73, 0.3);
  }

  .chat-header h5 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: white;
  }

  .chat-header small {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.9);
  }

  .status-badge {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #F1C40F;
    margin-left: 0.5rem;
  }

  .chat-container {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
    min-height: 0;
  }

  .chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 0.75rem;
    padding-bottom: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    -webkit-overflow-scrolling: touch;
    min-height: 0;
  }

  .chat-messages::-webkit-scrollbar {
    width: 8px;
  }

  .chat-messages::-webkit-scrollbar-track {
    background: transparent;
  }

  .chat-messages::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
  }

  /* Date separator */
  .message-date-separator {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 1rem 0;
    gap: 0.75rem;
  }

  .message-date-separator::before,
  .message-date-separator::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(0, 0, 0, 0.1);
  }

  .message-date-separator span {
    font-size: 0.75rem;
    color: #570A57;
    background: #f8f8f8;
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
  }

  /* Message group */
  .message-group {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    animation: slideIn 0.3s ease;
  }

  @keyframes slideIn {
    from {
      opacity: 0;
      transform: translateY(10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .message-group.own {
    align-items: flex-end;
  }

  .message-group.other {
    align-items: flex-start;
  }

  /* Sender name for other messages */
  .message-sender-name {
    font-size: 0.75rem;
    font-weight: 600;
    color: #570A57;
    padding: 0 0.5rem;
    margin-bottom: 0.1rem;
  }

  .message-bubble {
    max-width: 85%;
    padding: 0.75rem 1rem;
    border-radius: 18px;
    word-wrap: break-word;
    font-size: 0.95rem;
    line-height: 1.4;
    position: relative;
  }

  .message-group.other .message-bubble {
    background: white;
    color: #000;
    border-bottom-left-radius: 4px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
  }

  .message-group.own .message-bubble {
    background: #F1C40F;
    color: #2E0249;
    border-bottom-right-radius: 4px;
    font-weight: 500;
  }

  /* Message content with image */
  .message-content {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .message-image {
    max-width: 100%;
    max-height: 300px;
    border-radius: 12px;
    cursor: pointer;
    display: block;
    margin: 0;
  }

  .message-text {
    word-wrap: break-word;
  }

  /* Location message */
  .message-location {
    padding: 0.75rem 1rem;
    background: #F1C40F;
    border-radius: 18px;
    border-bottom-right-radius: 4px;
    font-size: 0.9rem;
    max-width: 100%;
    color: #2E0249;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
  }

  .message-group.other .message-location {
    background: white;
    border-bottom-left-radius: 4px;
    color: #000;
  }

  .message-location a {
    color: #2E0249;
    text-decoration: none;
    font-weight: 600;
  }

  .message-location a:active {
    opacity: 0.7;
  }

  /* Message time and status */
  .message-footer {
    font-size: 0.7rem;
    color: #666;
    padding: 0 0.5rem;
    margin-top: 0.15rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
  }

  .message-time {
    white-space: nowrap;
  }

  .read-receipt {
    font-size: 0.8rem;
  }

  /* Input area - WhatsApp style */
  .chat-input-area {
    padding: 0.5rem 1rem;
    background: white;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    border-top: 1px solid #e0e0e0;
    margin-bottom: env(safe-area-inset-bottom);
    width: 100%;
    overflow: visible;
  }

  .preview-box {
    display: none;
    padding: 0.75rem;
    background: #f0f0f0;
    border-radius: 8px;
    margin-bottom: 0.5rem;
    position: relative;
  }

  .preview-image {
    max-width: 100%;
    max-height: 120px;
    border-radius: 6px;
  }

  .preview-location {
    padding: 0.75rem;
    background: #e3f2fd;
    border-radius: 6px;
    font-size: 0.85rem;
    line-height: 1.4;
  }

  .preview-close {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    cursor: pointer;
    color: #ff5252;
    font-weight: bold;
    background: white;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
  }

  .input-controls {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.5rem;
    align-items: center;
    width: 100%;
    min-height: 44px;
    overflow: visible;
  }

  .chat-input-area input {
    flex: 1 1 auto;
    flex-shrink: 1;
    border: 1px solid #ddd;
    border-radius: 24px;
    padding: 0.6rem 1rem;
    font-size: 0.95rem;
    font-family: inherit;
    resize: none;
    height: 38px;
    line-height: 1;
    min-width: 100px;
  }

  .chat-input-area input:focus {
    outline: none;
    border-color: #F1C40F;
    box-shadow: 0 0 0 2px rgba(241, 196, 15, 0.2);
  }

  .input-action-btn,
  .send-btn {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    min-width: 38px;
    min-height: 38px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.2rem;
    transition: all 0.2s;
  }

  .input-action-btn {
    background: transparent;
    color: #570A57;
  }

  .input-action-btn:hover {
    background: rgba(241, 196, 15, 0.1);
  }

  .input-action-btn:active {
    background: rgba(241, 196, 15, 0.2);
    transform: scale(0.95);
  }

  .input-action-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .send-btn {
    background: linear-gradient(135deg, #F1C40F 0%, #F39C12 100%);
    color: #2E0249;
    border: none;
  }

  .send-btn:hover {
    background: linear-gradient(135deg, #F39C12 0%, #F1C40F 100%);
    color: #2E0249;
  }

  .send-btn:active {
    background: linear-gradient(135deg, #F39C12 0%, #F1C40F 100%);
    transform: scale(0.95);
    color: #2E0249;
  }

  .send-btn:disabled {
    background: #ccc;
    cursor: not-allowed;
  }

  /* Mobile specific fixes */
  @media (max-width: 767px) {
    .chat-wrapper {
      overflow: hidden !important;
    }

    .chat-container {
      overflow: hidden !important;
    }

    .chat-messages {
      overflow-y: auto !important;
    }

    .input-controls {
      width: 100%;
      display: flex !important;
      flex-wrap: nowrap !important;
      gap: 0.5rem !important;
      align-items: center !important;
      overflow: visible !important;
    }

    .chat-input-area input {
      height: 38px !important;
      min-height: 38px !important;
    }

    .send-btn,
    .input-action-btn {
      flex-shrink: 0 !important;
      width: 38px !important;
      height: 38px !important;
      min-width: 38px !important;
      min-height: 38px !important;
      display: flex !important;
      visibility: visible !important;
    }
  }

  /* Desktop responsiveness */
  @media (min-width: 768px) {
    .chat-wrapper {
      position: relative;
      height: auto;
      min-height: 600px;
      max-width: 900px;
      margin: 2rem auto;
      border-radius: 8px;
      border: 1px solid #ddd;
      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
    }

    .chat-container {
      height: 600px;
    }

    .chat-messages {
      padding: 1.5rem;
    }

    .message-bubble {
      max-width: 70%;
    }

    .message-image {
      max-width: 70%;
    }

    .message-location {
      max-width: 70%;
    }

    .chat-input-area {
      padding: 1rem;
    }
  }

  /* Larger screens */
  @media (min-width: 1024px) {
    .chat-container {
      height: 700px;
    }
  }

  /* Loading indicator */
  .loading-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid #f3f3f3;
    border-top: 2px solid #F1C40F;
    border-radius: 50%;
    animation: spin 1s linear infinite;
  }

  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }

  /* Empty state */
  .empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #999;
    text-align: center;
  }

  .empty-state-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.5;
  }
</style>
@endsection

@section('content')
<div class="chat-wrapper">
  <div class="chat-header">
    <h5>Chat Mulai Sesi #{{ $booking->id }}</h5>
    @if($otherUser)
      <small>
        {{ $otherUser->name }}
        <span class="status-badge" title="Online"></span>
      </small>
    @endif
  </div>

  <div class="chat-container">
    <div class="chat-messages" id="messagesContainer">
      <div class="empty-state">
        <div class="empty-state-icon">💬</div>
        <div>Memuat pesan...</div>
      </div>
    </div>

    <div class="chat-input-area">
      <div class="preview-box" id="previewBox">
        <div id="previewContent"></div>
        <span class="preview-close" onclick="clearPreview()">✕</span>
      </div>

      <div class="input-controls">
        <input 
          type="text" 
          id="messageInput" 
          placeholder="Aa" 
          maxlength="500"
          autocomplete="off"
          title="Ketik pesan"
        >
        <input type="file" id="photoInput" accept="image/*" style="display: none;" />
        <button id="photoBtn" class="input-action-btn" title="Kirim Foto" onclick="document.getElementById('photoInput').click()">
          📎
        </button>
        <button id="locationBtn" class="input-action-btn" title="Bagikan Lokasi">
          📍
        </button>
        <button id="sendBtn" class="send-btn" title="Kirim">
          ➤
        </button>
      </div>
    </div>
  </div>
</div>

<script src="https://js.pusher.com/7.2/pusher.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
  const bookingId = {{ $booking->id }};
  const userId = {{ auth()->id() }};
  const messagesContainer = document.getElementById('messagesContainer');
  const messageInput = document.getElementById('messageInput');
  const sendBtn = document.getElementById('sendBtn');
  const photoBtn = document.getElementById('photoBtn');
  const locationBtn = document.getElementById('locationBtn');
  const photoInput = document.getElementById('photoInput');
  const previewBox = document.getElementById('previewBox');
  const previewContent = document.getElementById('previewContent');
  const chatWrapper = document.querySelector('.chat-wrapper');
  const inputArea = document.querySelector('.chat-input-area');

  let lastMessageCount = 0;
  let pollingInterval;
  let selectedPhoto = null;
  let selectedLocation = null;
  let lastDate = null;

  // Make sure input area is visible
  if (inputArea) {
    inputArea.style.display = 'flex';
    inputArea.style.visibility = 'visible';
  }

  // Mobile keyboard handling
  function handleMobileKeyboard() {
    if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) {
      messageInput.addEventListener('focus', function() {
        setTimeout(() => {
          messagesContainer.scrollTop = messagesContainer.scrollHeight;
          if (inputArea) {
            inputArea.scrollIntoView(false);
          }
        }, 300);
      });
    }
  }

  handleMobileKeyboard();

  // Initialize Pusher (optional - fallback to polling if not available)
  let pusher = null;
  let channel = null;
  try {
    pusher = new Pusher('{{ env('MIX_PUSHER_APP_KEY') }}', {
      cluster: '{{ env('MIX_PUSHER_APP_CLUSTER') }}',
      forceTLS: true,
      authEndpoint: '/broadcasting/auth',
      auth: {
        headers: {
          'X-CSRF-TOKEN': '{{ csrf_token() }}'
        }
      }
    });
    channel = pusher.subscribe('private-booking.' + bookingId);
    channel.bind('message.sent', function(data) {
      appendMessage(data);
      scrollToBottom();
    });
  } catch (e) {
    // Pusher tidak tersedia, gunakan polling
  }

  // Format date for display
  function formatMessageDate(dateStr) {
    try {
      // Handle both ISO and other date formats
      const date = new Date(dateStr);
      
      // Validate date
      if (isNaN(date.getTime())) {
        return 'Tanggal tidak valid';
      }
      
      const today = new Date();
      const yesterday = new Date(today);
      yesterday.setDate(yesterday.getDate() - 1);

      const dateToCheck = new Date(date.getFullYear(), date.getMonth(), date.getDate());
      const todayCheck = new Date(today.getFullYear(), today.getMonth(), today.getDate());
      const yesterdayCheck = new Date(yesterday.getFullYear(), yesterday.getMonth(), yesterday.getDate());

      if (dateToCheck.getTime() === todayCheck.getTime()) {
        return 'Hari ini';
      } else if (dateToCheck.getTime() === yesterdayCheck.getTime()) {
        return 'Kemarin';
      } else {
        return date.toLocaleDateString('id-ID', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' });
      }
    } catch (e) {
      console.error('Error formatting date:', e, dateStr);
      return 'Tanggal tidak valid';
    }
  }

  // Format time for display
  function formatMessageTime(dateStr) {
    try {
      const date = new Date(dateStr);
      
      if (isNaN(date.getTime())) {
        return '--:--';
      }
      
      return date.toLocaleTimeString('id-ID', { hour: '2-digit', minute: '2-digit' });
    } catch (e) {
      console.error('Error formatting time:', e, dateStr);
      return '--:--';
    }
  }

  // Get date from datetime
  function getDateOnly(dateStr) {
    try {
      const date = new Date(dateStr);
      if (isNaN(date.getTime())) {
        return 'invalid';
      }
      return date.toDateString();
    } catch (e) {
      console.error('Error getting date:', e, dateStr);
      return 'invalid';
    }
  }

  // Function to append message to DOM
  function appendMessage(msg) {

    const isOwn = msg.sender_id === userId;
    const currentDate = getDateOnly(msg.created_at);

    // Add date separator if needed
    if (lastDate !== currentDate) {
      lastDate = currentDate;
      const separator = document.createElement('div');
      separator.className = 'message-date-separator';
      separator.innerHTML = `<span>${formatMessageDate(msg.created_at)}</span>`;
      messagesContainer.appendChild(separator);
    }

    const messageGroup = document.createElement('div');
    messageGroup.className = `message-group ${isOwn ? 'own' : 'other'}`;
    
    let contentHtml = '';

    // Add sender name only for other user messages
    if (!isOwn) {
      contentHtml = `<div class="message-sender-name">${msg.sender_name}</div>`;
    }
    
    if (msg.message_type === 'photo' && msg.photo_path) {
      contentHtml += `
        <div class="message-bubble">
          <div class="message-content">
            <img src="${msg.photo_path}" class="message-image" alt="Foto" onclick="window.open('${msg.photo_path}', '_blank')" onerror="console.error('Image load failed:', this.src)">
            ${msg.message ? `<div class="message-text">${escapeHtml(msg.message)}</div>` : ''}
          </div>
        </div>
      `;
    } else if (msg.message_type === 'location' && msg.latitude && msg.longitude) {
      const lat = parseFloat(msg.latitude);
      const lon = parseFloat(msg.longitude);
      contentHtml += `
        <div class="message-location">
          <strong>📍 Lokasi</strong><br>
          Lat: ${lat.toFixed(6)}, Lon: ${lon.toFixed(6)}<br>
          <a href="https://maps.google.com/?q=${lat},${lon}" target="_blank">🗺️ Buka di Maps</a>
          ${msg.message ? `<div style="margin-top: 0.5rem;">${escapeHtml(msg.message)}</div>` : ''}
        </div>
      `;
    } else {
      contentHtml += `<div class="message-bubble"><div class="message-text">${escapeHtml(msg.message || '')}</div></div>`;
    }
    
    contentHtml += `
      <div class="message-footer">
        <span class="message-time">${formatMessageTime(msg.created_at)}</span>
        <span class="read-receipt">✓✓</span>
      </div>
    `;
    
    messageGroup.innerHTML = contentHtml;
    messagesContainer.appendChild(messageGroup);
  }

  // Function to escape HTML
  function escapeHtml(text) {
    const map = {
      '&': '&amp;',
      '<': '&lt;',
      '>': '&gt;',
      '"': '&quot;',
      "'": '&#039;'
    };
    return text.replace(/[&<>"']/g, m => map[m]);
  }

  // Function to scroll to bottom
  function scrollToBottom() {
    setTimeout(() => {
      messagesContainer.scrollTop = messagesContainer.scrollHeight;
    }, 50);
  }

  // Load initial messages
  function loadMessages() {
    fetch(`/booking/${bookingId}/messages`, {
      credentials: 'include',
      headers: {
        'Accept': 'application/json',
        'X-CSRF-TOKEN': '{{ csrf_token() }}'
      }
    })
    .then(r => {
      if (!r.ok) {
        throw new Error(`HTTP ${r.status}: ${r.statusText}`);
      }
      return r.json();
    })
    .then(data => {
      
      if (data.messages && data.messages.length > 0) {
        // Only reload if message count changed
        if (data.messages.length !== lastMessageCount) {
          lastMessageCount = data.messages.length;
          messagesContainer.innerHTML = '';
          lastDate = null;
          data.messages.forEach(msg => {
            appendMessage(msg);
          });
          scrollToBottom();
        }
      } else if (lastMessageCount === 0) {
        messagesContainer.innerHTML = '<div class="empty-state"><div class="empty-state-icon">💬</div><div>Belum ada pesan</div></div>';
      }
    })
    .catch(err => {
      console.error('Error loading messages:', err);
      if (messagesContainer.innerHTML.includes('alert') === false) {
        messagesContainer.innerHTML = '<div style="padding: 1rem; color: #d32f2f; text-align: center;">Gagal memuat pesan: ' + err.message + '</div>';
      }
    });
  }

  // Send message with photo/location
  function sendMessage() {
    const text = messageInput.value.trim();
    
    if (!text && !selectedPhoto && !selectedLocation) {
      return;
    }

    sendBtn.disabled = true;
    photoBtn.disabled = true;
    locationBtn.disabled = true;
    
    const formData = new FormData();
    formData.append('message', text);
    
    if (selectedPhoto) {
      formData.append('photo', selectedPhoto);
    }
    
    if (selectedLocation) {
      formData.append('latitude', selectedLocation.latitude);
      formData.append('longitude', selectedLocation.longitude);
    }
    
    fetch(`/booking/${bookingId}/messages`, {
      method: 'POST',
      credentials: 'include',
      headers: {
        'X-CSRF-TOKEN': '{{ csrf_token() }}'
      },
      body: formData
    })
    .then(r => {
      return r.json().then(data => ({
        ok: r.ok,
        status: r.status,
        data: data
      }));
    })
    .then(response => {
      if (!response.ok) {
        console.error('Response error:', response.data);
        const errorMsg = response.data.message || response.data.error || `HTTP ${response.status}: Error sending message`;
        throw new Error(errorMsg);
      }
      
      if (response.data.success) {
        messageInput.value = '';
        messageInput.focus();
        clearPreview();
        selectedPhoto = null;
        selectedLocation = null;
        // Reload messages immediately after send
        setTimeout(loadMessages, 300);
      } else {
        const errorMsg = response.data.message || 'Gagal mengirim pesan';
        console.error('Send failed:', errorMsg);
        throw new Error(errorMsg);
      }
    })
    .catch(err => {
      console.error('Error sending message:', err);
      alert('Gagal mengirim pesan: ' + err.message);
    })
    .finally(() => {
      sendBtn.disabled = false;
      photoBtn.disabled = false;
      locationBtn.disabled = false;
    });
  }

  // Handle photo selection
  photoInput.addEventListener('change', function(e) {
    const file = e.target.files[0];
    if (file) {
      // Validate file size (5MB max)
      if (file.size > 5120 * 1024) {
        alert('Ukuran foto terlalu besar (max 5MB)');
        photoInput.value = '';
        return;
      }
      
      // Validate file type
      if (!['image/jpeg', 'image/png', 'image/gif'].includes(file.type)) {
        alert('Tipe file tidak didukung. Gunakan JPEG, PNG, atau GIF');
        photoInput.value = '';
        return;
      }
      
      const reader = new FileReader();
      reader.onload = function(event) {
        selectedPhoto = file;
        previewContent.innerHTML = `
          <img src="${event.target.result}" class="preview-image" alt="Preview">
          <p style="margin: 0.5rem 0; font-size: 0.85rem;">Foto: ${file.name} (${(file.size / 1024).toFixed(2)} KB)</p>
        `;
        previewBox.style.display = 'block';
      };
      reader.readAsDataURL(file);
    }
  });

  // Handle location button
  locationBtn.addEventListener('click', function() {
    if (!navigator.geolocation) {
      alert('❌ Browser Anda tidak mendukung geolocation');
      return;
    }
    
    locationBtn.disabled = true;
    locationBtn.innerHTML = '⏳';
    
    navigator.geolocation.getCurrentPosition(
      function(position) {
        const lat = position.coords.latitude;
        const lon = position.coords.longitude;

        selectedLocation = { latitude: lat, longitude: lon };
        
        previewContent.innerHTML = `
          <div class="preview-location">
            <strong>📍 Lokasi</strong><br>
            Lat: ${lat.toFixed(6)}, Lon: ${lon.toFixed(6)}<br>
            <a href="https://maps.google.com/?q=${lat},${lon}" target="_blank">🗺️ Buka di Maps</a>
          </div>
        `;
        previewBox.style.display = 'block';
        locationBtn.innerHTML = '📍';
        locationBtn.disabled = false;
      },
      function(error) {
        let errorMsg = '';
        switch(error.code) {
          case error.PERMISSION_DENIED:
            errorMsg = 'Izin geolokasi ditolak. Silakan aktifkan izin lokasi di browser.';
            break;
          case error.POSITION_UNAVAILABLE:
            errorMsg = 'Informasi lokasi tidak tersedia.';
            break;
          case error.TIMEOUT:
            errorMsg = 'Permintaan geolokasi timeout. Coba lagi.';
            break;
          default:
            errorMsg = error.message || 'Gagal mendapatkan lokasi';
        }
        console.error('❌ Error geolocation:', errorMsg);
        alert('❌ ' + errorMsg);
        locationBtn.innerHTML = '📍';
        locationBtn.disabled = false;
      },
      {
        enableHighAccuracy: false,
        timeout: 10000,
        maximumAge: 300000
      }
    );
  });

  // Clear preview
  window.clearPreview = function() {
    previewBox.style.display = 'none';
    previewContent.innerHTML = '';
    selectedPhoto = null;
    selectedLocation = null;
    photoInput.value = '';
  };

  // Event listeners
  sendBtn.addEventListener('click', sendMessage);
  messageInput.addEventListener('keypress', function(e) {
    if (e.key === 'Enter' && !e.shiftKey) {
      e.preventDefault();
      sendMessage();
    }
  });

  // Load messages on page load
  loadMessages();

  // Start polling for new messages every 2 seconds (fallback if Pusher not available)
  pollingInterval = setInterval(function() {
    loadMessages();
  }, 2000);

  // Cleanup on page unload
  window.addEventListener('beforeunload', function() {
    clearInterval(pollingInterval);
    if (pusher) {
      pusher.disconnect();
    }
  });
});
</script>
@endsection