@extends('layouts.app')

@section('content')
    <section class="fdb-block mt-2 pt-2 mb-3 pb-0 bg-white">
        <div class="container">
            <div class="row justify-content-center">
                <div id="iklanBayar" class="carousel slide" data-ride="carousel">
                    <ol class="carousel-indicators">
                        @foreach($iklans as $key => $iklan)
                            <li data-target="#iklanBayar" data-slide-to="{{ $key }}" class="{{ $key == 0 ? 'active' : '' }}"></li>
                        @endforeach
                    </ol>
                    <div class="carousel-inner">
                        @foreach($iklans as $key => $iklan)
                            <div class="carousel-item {{ $key == 0 ? 'active' : '' }}">
                                <img src="{{ asset($iklan->path) }}" class="d-block w-100" alt="Iklan {{ $iklan->alt }}">
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
            <br>
            <br>
            <div class="row">
                <div class="col-md-12 text-center">
                    <h1 class="head1"><span style="text-decoration: underline;"> MARAe</span>ps</h1>
                    <h1 class="head2">PERKHIDMATAN</h1>
                    <h3 class="sub-head">Bayaran atas talian melalui MARAeps</h3>
                </div>
            </div>
            <div class="row justify-content-center">
                <div class="col-md-6 col-md-offset-3">
                    @include('layouts.alerts')
                </div>
            </div>
        </div>
    </section>
    <section class="pt-md-1 pt-4 pb-md-5">
        <div class="container">
            <div class="row mb-5 pt-md-3 pt-3">
                <div class="col-md-12">
                    <div class="slide-box slide1 text-center">
                        <h3 class="head3"> AKAUN <strong>ANDA</strong></h3>
                        <div class="slide-details">
                            <div class="slide-shade"></div> <img src="{{ asset('img/documents.png') }}" alt="img"
                                class="img-fluid" width="120" />
                            <p> Bayaran fasiliti pembiayaan pelajaran, perniagaan, sewa atau staf</p>
                            <div>
                                <a href="{{ url('akaun') }}">Akaun Anda <i class="fa fa-angle-double-right"></i></a>
                                <br>
                                {{-- @if (auth()->user()->is_mara) --}}
                                @if (auth()->user()->pinjaman()->exists())
                                <a href="{{ url('pinjaman') }}">Akaun Pinjaman Staf <i
                                        class="fa fa-angle-double-right"></i></a>
                                        <br />
                                @endif
                                
                                @if (auth()->user()->spim()->exists())
                                    <a href="{{ url('spimPredist') }}">Akaun SPIM <i
                                            class="fa fa-angle-double-right"></i></a>
                                            <br />
                                @endif

                                @if (auth()->user()->is_penjamin)
                                    <a href="{{ url('dijamin') }}">Akaun Dijamin / Penjaga<i
                                            class="fa fa-angle-double-right"></i></a>
                                            <br>
                                @endif

                                @if (auth()->user()->skipma()->exists() )
                                    <a href="{{ url('skipma') }}">Akaun SKIPMA <i
                                        class="fa fa-angle-double-right"></i></a>
                                    <br />
                                @endif

                            </div>
                        </div>
                    </div>
                    <div class="slide-box slide2 text-center">
                        <h3 class="head3">YURAN <strong>& FI</strong></h3>
                        <div class="slide-details">
                            <img src="{{ asset('img/stationary.png') }}" alt="img" class="img-fluid" width="120" />
                            <p></p>
                            <div>
                                <a href="{{ action('ProgramController@index') }}">Program Usahawan <i
                                        class="fa fa-angle-double-right"></i></a><br>
                                <a href="{{ action('MrsmController@index') }}">MRSM <i
                                        class="fa fa-angle-double-right"></i></a><br>
                                <a href="{{ action('CourseController@index') }}">KM/KPM(Setuju Terima & Daftar Sem)<i
                                        class="fa fa-angle-double-right"></i></a><br>
                                @if (auth()->user()->pelajarkanan()->exists())
                                <a href="{{ action('CourseController@bllindex') }}">KM/KPM(Lain-lain bayaran)<i
                                        class="fa fa-angle-double-right"></i></a><br>
                                @endif
                                <a href="{{ action('OpenPaymentController@index') }}">KKTM/MJII/IKM <i
                                        class="fa fa-angle-double-right"></i></a><br>
                                <a href="{{ action('AcaraController@index') }}">Acara MARA <i
                                        class="fa fa-angle-double-right"></i></a><br>
                                <a href="{{ action('ProsesanController@index') }}">Bayaran Prosesan <i
                                        class="fa fa-angle-double-right"></i></a><br>
                                <a href="{{ action('TenderController@index') }}">Tender/Sebutharga <i
                                        class="fa fa-angle-double-right"></i></a><br>
                                <a href="{{ action('UbahsuaiPremisController@show') }}">Ubah Suai Premis <i
                                        class="fa fa-angle-double-right"></i></a><br>
                                <a href="{{ action('KompaunKenderaanController@index') }}">Kompaun Kenderaan <i
                                        class="fa fa-angle-double-right"></i></a><br>
                                <a href="{{ action('TawarruqController@index') }}">Brokage Fee Tawarruq<i
                                        class="fa fa-angle-double-right"></i></a><br>
                                @if (auth()->user()->is_mara)
                                    <a href="{{ action('RumahRehatController@index') }}">Rumah Rehat <i
                                            class="fa fa-angle-double-right"></i> </a> <br />
                                    <a href="{{ action('SumbanganSendiriController@index') }}">Bahagian Sumber Manusia
                                        (Sumbangan Sendiri) <i class="fa fa-angle-double-right"></i> </a> <br />
                                        <a href="{{ action('KadController@index') }}">Kad Akses MARA (Staff)
                                            <i class="fa fa-angle-double-right"></i> </a> <br />
                                            <a href="{{ action('StaffParkirController@index') }}">Parkir MARA (Staff)
                                                <i class="fa fa-angle-double-right"></i> </a> <br />
                                    <a href="{{ action('EmolumenController@index') }}">Emolumen Terlebih Bayar
                                        <i class="fa fa-angle-double-right"></i> </a> <br />
                                @endif
                                @if (auth()->user()->penyewaPakir()->exists())
                                    <a href="{{ action('PakirController@show') }}">Sewa Pakir <i
                                            class="fa fa-angle-double-right"></i> </a> <br />
                                @endif
                                <a href="{{ action('PelupusanController@index') }}">Jualan Pelupusan Kenderaan/Alat <i
                                        class="fa fa-angle-double-right"></i></a><br>
                                @if (auth()->user()->is_graduan == 1)
                                    <a href="{{ action('KonvoKpmController@show') }}">Yuran Konvokesyen <i
                                            class="fa fa-angle-double-right"></i> </a> <br />
                                @endif
                                 @if (auth()->user()->aura()->exists())
                                    <a href="{{ action('AuraController@index') }}">Anugerah Usahawan MARA (AURA) <i
                                            class="fa fa-angle-double-right"></i> </a> <br />
                                @endif
                                {{-- <a href="{{ action('YuranMuafakatController@index') }}">Yuran Muafakat <i
                                    class="fa fa-angle-double-right"></i></a><br>
                                    <a href="{{ action('YuranKoperasiController@index') }}">Yuran Koperasi <i
                                        class="fa fa-angle-double-right"></i></a><br> --}}
                            </div>
                        </div>
                    </div>
                    <div class="slide-box slide1 text-center">
                        <h3 class="head3">TRANSAKSI <strong>& RESIT</strong></h3>
                        <div class="slide-details">
                            <img src="{{ asset('img/bills.png') }}" alt="img" class="img-fluid" width="120" />
                            <p>Semak dan cetak transaksi anda di MARAeps</p>
                            <a href="{{ action('TransactionController@index') }}">Bayaran one-off <i
                                    class="fa fa-angle-double-right"></i> </a> <br />
                            <a href="{{ action('EmandateController@index') }}">Direct debit (eMandate) <i
                                    class="fa fa-angle-double-right"></i> </a> <br />
                        </div>
                    </div>
                    <div class="slide-box slide2 text-center">
                        <h3 class="head3">BUTIRAN <strong>ANDA</strong></h3>
                        <div class="slide-details">
                            <img src="{{ asset('img/files.png') }}" alt="img" class="img-fluid" width="120" />
                            <p>Semak dan sunting butiran pengguna anda</p>
                            <a href="{{ action('UserController@edit') }}">Semak <i class="fa fa-angle-double-right"></i>
                            </a> <br />
                            <a href="{{ action('UserController@userResetPassword') }}">Tukar Katalaluan <i
                                    class="fa fa-angle-double-right"></i> </a> <br />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- Kerjasama Logo -->
    <div class="footer-powered">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-7">
                    <h4 style=" padding-top: 20px;">Dengan Kerjasama</h4>
                    <img src="{{ asset('img/fpx.png') }}" width="20%" class="img-fluid">
                    <img src="{{ asset('img/paynet.png') }}" width="20%" class="img-fluid">
                    <img src="{{ asset('img/rhb.png') }}" width="20%" class="img-fluid">
                    <img src="{{ asset('img/vm.png') }}" width="20%" class="img-fluid">
                </div>
            </div>
        </div>
    </div>
    
    <!-- Chatbot Widget -->
    <div class="chatbot-widget">
        <div class="chatbot-window" id="chatbotWindow">
            <div class="chatbot-header">
                <h4>🧕 MAYA</h4>
                <button class="chatbot-close" onclick="toggleChatbot()">×</button>
            </div>
            <div class="chatbot-messages" id="chatbotMessages">
                <div class="message bot">
                    <div class="message-content">
                        👋 Hello! I'm MAYA, your MARAeps assistant. I can help you with:
                        <br><br>
                        • Account questions
                        • Payment methods
                        • Service information
                        • Transaction inquiries
                        • General support
                        <br><br>
                        How can I help you today?
                    </div>
                </div>
            </div>
            <div class="chatbot-input">
                <form id="chatbotForm">
                    <input type="text" id="chatbotInput" placeholder="Type your message..." autocomplete="off">
                    <button type="submit">
                        <svg width="16" height="16" fill="currentColor" viewBox="0 0 24 24">
                            <path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/>
                        </svg>
                    </button>
                </form>
                <button id="liveAgentButton" class="live-agent-btn" onclick="connectToLiveAgent()" style="background: linear-gradient(135deg, #10b981 0%, #059669 100%); color: white; padding: 0.75rem 1rem; border-radius: 0.75rem; border: none; cursor: pointer; transition: all 0.3s ease; font-size: 0.875rem; font-weight: 600; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); width: 100%; margin-top: 0.5rem;">
                    <svg width="18" height="18" fill="currentColor" viewBox="0 0 24 24" style="margin-right: 0.5rem;">
                        <path d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"/>
                    </svg>
                    💬 Talk to Live Agent
                </button>
            </div>
        </div>
        <button class="chatbot-toggle" onclick="openChatbotWindow()">
            <svg width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
                <path d="M12 2C6.48 2 2 6.48 2 12c0 1.54.36 2.98.97 4.29L1 23l6.71-1.97C9.02 21.64 10.46 22 12 22c5.52 0 10-4.48 10-10S17.52 2 12 2zm-1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/>
            </svg>
        </button>
    </div>
    
    <style>
        .chatbot-widget {
            position: fixed;
            bottom: 20px;
            right: 20px;
            z-index: 1000;
        }
        
        .chatbot-toggle {
            background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
            color: white;
            border: none;
            border-radius: 50%;
            width: 60px;
            height: 60px;
            cursor: pointer;
            box-shadow: 0 4px 16px rgba(59, 130, 246, 0.3);
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
        }
        
        .chatbot-toggle:hover {
            transform: scale(1.1);
            box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
        }
        
        .chatbot-window {
            position: absolute;
            bottom: 80px;
            right: 0;
            width: 350px;
            height: 500px;
            background: white;
            border-radius: 12px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
            display: none;
            flex-direction: column;
            overflow: hidden;
        }
        
        .chatbot-header {
            background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
            color: white;
            padding: 16px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        
        .chatbot-header h4 {
            margin: 0;
            font-size: 16px;
            font-weight: 600;
        }
        
        .chatbot-close {
            background: none;
            border: none;
            color: white;
            cursor: pointer;
            font-size: 20px;
            padding: 0;
            width: 24px;
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .chatbot-messages {
            flex: 1;
            padding: 16px;
            overflow-y: auto;
            background: #f8fafc;
            scroll-behavior: smooth;
            scrollbar-width: thin;
            scrollbar-color: #cbd5e1 #f1f5f9;
        }
        
        .chatbot-messages::-webkit-scrollbar {
            width: 6px;
        }
        
        .chatbot-messages::-webkit-scrollbar-track {
            background: #f1f5f9;
            border-radius: 3px;
        }
        
        .chatbot-messages::-webkit-scrollbar-thumb {
            background: #cbd5e1;
            border-radius: 3px;
        }
        
        .chatbot-messages::-webkit-scrollbar-thumb:hover {
            background: #94a3b8;
        }
        
        .message {
            margin-bottom: 12px;
            display: flex;
            align-items: flex-start;
        }
        
        .message.user {
            justify-content: flex-end;
        }
        
        .message-content {
            max-width: 80%;
            padding: 8px 12px;
            border-radius: 12px;
            font-size: 14px;
            line-height: 1.4;
        }
        
        .message.bot .message-content {
            background: white;
            color: #374151;
            border: 1px solid #e5e7eb;
        }
        
        .message.user .message-content {
            background: #3b82f6;
            color: white;
        }
        
        .message.agent .message-content {
            background: #10b981;
            color: white;
        }
        
        .message.system .message-content {
            background: #f59e0b;
            color: white;
            font-style: italic;
        }
        
        .chatbot-input {
            padding: 16px;
            border-top: 1px solid #e5e7eb;
            background: white;
        }
        
        .chatbot-input form {
            display: flex;
            gap: 8px;
        }
        
        .chatbot-input input {
            flex: 1;
            padding: 8px 12px;
            border: 1px solid #d1d5db;
            border-radius: 20px;
            outline: none;
            font-size: 14px;
        }
        
        .chatbot-input input:focus {
            border-color: #3b82f6;
        }
        
        .chatbot-input button {
            background: #3b82f6;
            color: white;
            border: none;
            border-radius: 50%;
            width: 36px;
            height: 36px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .chatbot-input button:hover {
            background: #1d4ed8;
        }
        
        .typing-indicator {
            display: flex;
            align-items: center;
            gap: 4px;
            padding: 8px 12px;
            background: white;
            border: 1px solid #e5e7eb;
            border-radius: 12px;
            max-width: 80px;
        }
        
        .typing-dot {
            width: 6px;
            height: 6px;
            background: #9ca3af;
            border-radius: 50%;
            animation: typing 1.4s infinite ease-in-out;
        }
        
        .typing-dot:nth-child(2) {
            animation-delay: 0.2s;
        }
        
        .typing-dot:nth-child(3) {
            animation-delay: 0.4s;
        }
        
        @keyframes typing {
            0%, 60%, 100% {
                transform: translateY(0);
            }
            30% {
                transform: translateY(-10px);
            }
        }
        
        .connection-status {
            position: absolute;
            top: 8px;
            right: 8px;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #ef4444;
        }
        
        .connection-status.connected {
            background: #10b981;
        }
        
        .live-agent-btn {
            width: 100%;
            margin-top: 8px;
            padding: 8px 12px;
            background: #10b981;
            color: white;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-size: 14px;
            font-weight: 500;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            transition: all 0.3s ease;
        }
        
        .live-agent-btn:hover {
            background: #059669;
            transform: translateY(-1px);
        }
        
        .live-agent-btn:disabled {
            background: #9ca3af;
            cursor: not-allowed;
            transform: none;
        }
    </style>
    
    <script>
        document.addEventListener("DOMContentLoaded", function () {
            // Initialize chatbot
            initChatbot();
        });
        
        // Chatbot functionality
        let ws = null;
        let isConnected = false;
        
        function initChatbot() {
            const form = document.getElementById('chatbotForm');
            const input = document.getElementById('chatbotInput');
            
            if (form && input) {
                form.addEventListener('submit', handleSubmit);
                input.addEventListener('keypress', function(e) {
                    if (e.key === 'Enter') {
                        handleSubmit(e);
                    }
                });
                
                // Connect to WebSocket
                connectWebSocket();
            }
        }
        
        function toggleChatbot() {
            const window = document.getElementById('chatbotWindow');
            if (window) {
                window.style.display = window.style.display === 'flex' ? 'none' : 'flex';
            }
        }
        
        function openChatbotWindow() {
            // Try to open as a popup window
            let chatbotWindow = window.open(
                '/chatbot-window',
                'ChatbotWindow',
                'width=420,height=700,resizable=yes,scrollbars=no,toolbar=no,menubar=no,location=no,status=no,left=100,top=100'
            );
            
            // If popup was blocked, try alternative approach
            if (!chatbotWindow || chatbotWindow.closed || typeof chatbotWindow.closed == 'undefined') {
                // Try with minimal features
                chatbotWindow = window.open('/chatbot-window', 'ChatbotWindow', 'popup=yes,width=420,height=700');
                
                if (!chatbotWindow || chatbotWindow.closed || typeof chatbotWindow.closed == 'undefined') {
                    alert('Popup blocked. Please allow popups for this site to open the chatbot window.');
                    // Fallback: open in same window
                    // window.location.href = '/chatbot-window';
                }
            }
            
            // Focus the popup window
            if (chatbotWindow) {
                chatbotWindow.focus();
            }
        }
        
        function connectWebSocket() {
            try {
                ws = new WebSocket('ws://127.0.0.1:8000/ws/chatbot/');
                
                ws.onopen = function() {
                    console.log('Chatbot WebSocket connected');
                    isConnected = true;
                };
                
                ws.onmessage = function(event) {
                    const data = JSON.parse(event.data);
                    addMessage('bot', data.message);
                };
                
                ws.onclose = function() {
                    console.log('Chatbot WebSocket disconnected');
                    isConnected = false;
                };
                
                ws.onerror = function(error) {
                    console.error('Chatbot WebSocket error:', error);
                    isConnected = false;
                };
            } catch (error) {
                console.error('Failed to connect to chatbot WebSocket:', error);
            }
        }
        
        function handleSubmit(e) {
            e.preventDefault();
            const input = document.getElementById('chatbotInput');
            const message = input.value.trim();
            
            if (!message) return;
            
            // Add user message
            addMessage('user', message);
            
            // Send to WebSocket if connected
            if (ws && ws.readyState === WebSocket.OPEN) {
                ws.send(JSON.stringify({
                    type: 'chat_message',
                    message: message
                }));
            } else {
                // Fallback response if WebSocket is not connected
                setTimeout(() => {
                    addMessage('bot', 'I apologize, but I\'m having trouble connecting right now. Please try again later or contact our support team at 03-2638 1111.');
                }, 1000);
            }
            
            // Clear input
            input.value = '';
        }
        
        function addMessage(sender, text) {
            const messagesContainer = document.getElementById('chatbotMessages');
            if (!messagesContainer) return;
            
            const messageDiv = document.createElement('div');
            messageDiv.className = `message ${sender}`;
            
            const contentDiv = document.createElement('div');
            contentDiv.className = 'message-content';
            contentDiv.textContent = text;
            
            messageDiv.appendChild(contentDiv);
            messagesContainer.appendChild(messageDiv);
            
            // Scroll to bottom
            messagesContainer.scrollTop = messagesContainer.scrollHeight;
        }
        
        async function connectToLiveAgent() {
            const button = document.getElementById('liveAgentButton');
            if (!button) return;
            
            // Disable button and show loading
            button.disabled = true;
            button.innerHTML = '<svg width="16" height="16" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg> Connecting...';
            
            try {
                // For unauthenticated users, we'll connect without a token
                let jwtToken = null;
                
                // Try to get JWT token if user is authenticated
                try {
                    const tokenResponse = await fetch('/django-token', {
                        method: 'GET',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                        }
                    });
                    
                    if (tokenResponse.ok) {
                        const tokenData = await tokenResponse.json();
                        jwtToken = tokenData.access;
                    }
                } catch (tokenError) {
                    console.log('No authentication token available, proceeding as unauthenticated user');
                }
                
                // Create chat session
                const sessionResponse = await fetch('http://127.0.0.1:8001/api/v1/chat/initiate/', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        email: 'user@example.com',
                        subject: 'Live Agent Request',
                        message: 'User requested to connect with a live agent'
                    })
                });
                
                if (!sessionResponse.ok) {
                    throw new Error('Failed to create chat session');
                }
                
                const sessionData = await sessionResponse.json();
                const sessionId = sessionData.id;
                
                // Add success message
                addMessage('system', '✅ Successfully connected to live agent! An agent will be with you shortly.');
                
                // Close WebSocket connection to chatbot
                if (ws) {
                    ws.close();
                }
                
                // Connect to chat session WebSocket
                connectToChatSession(sessionId, jwtToken);
                
            } catch (error) {
                console.error('Error connecting to live agent:', error);
                addMessage('system', '❌ Sorry, I couldn\'t connect you to a live agent right now. Please try again later or contact our support team at 03-2638 1111.');
                
                // Re-enable button
                button.disabled = false;
                button.innerHTML = '<svg width="16" height="16" fill="currentColor" viewBox="0 0 24 24"><path d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"/></svg> Talk to Live Agent';
            }
        }
        
        function connectToChatSession(sessionId, token) {
            try {
                // Close existing WebSocket
                if (ws) {
                    ws.close();
                }
                
                // For unauthenticated users, connect without token
                const wsUrl = token ? 
                    `ws://127.0.0.1:8000/ws/chat-sessions/${sessionId}/?token=${token}` :
                    `ws://127.0.0.1:8000/ws/chat-sessions/${sessionId}/`;
                ws = new WebSocket(wsUrl);
                
                ws.onopen = function() {
                    console.log('Connected to chat session:', sessionId);
                    isConnected = true;
                };
                
                ws.onmessage = function(event) {
                    const data = JSON.parse(event.data);
                    if (data.type === 'chat_message') {
                        addMessage('agent', data.message);
                    }
                };
                
                ws.onclose = function() {
                    console.log('Chat session WebSocket disconnected');
                    isConnected = false;
                };
                
                ws.onerror = function(error) {
                    console.error('Chat session WebSocket error:', error);
                    isConnected = false;
                };
                
            } catch (error) {
                console.error('Failed to connect to chat session:', error);
            }
        }
    </script>
@endsection