{{-- resources/views/admin/live-chat-session.blade.php --}}
<x-app-layout>
      <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  
    <div class="py-12 bg-gray-100 dark:bg-gray-900 min-h-screen">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
            {{-- Card Utama Chat --}}
            <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-xl sm:rounded-lg">
                <div class="p-6 flex flex-col h-[calc(100vh-8rem)]">

                    {{-- ===== HEADER CHAT ===== --}}
                    <div class="flex items-center justify-between border-b border-gray-200 dark:border-gray-700 pb-4 mb-4">
                        <div class="flex items-center">
                            {{-- Ikon pengguna --}}
                            <svg class="h-8 w-8 text-blue-500 mr-3" xmlns="http://www.w3.org/2000/svg" fill="none"
                                 viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                      d="M5.121 17.804A9 9 0 1118.879 6.196 9 9 0 015.121 17.804z"/>
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                      d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
                            </svg>
                            {{-- Nama & Email --}}
                            <div>
                                <div class="text-lg font-semibold text-gray-900 dark:text-gray-100">
                                    {{ $session->user->name }}
                                </div>
                                <div class="text-sm text-gray-500 dark:text-gray-400">
                                    {{ $session->user->email }}
                                </div>
                            </div>
                        </div>
                        
                        <button onclick="window.location.href='{{ route('live-chat.admin') }}'"
                                class="text-gray-500 hover:text-gray-700 dark:hover:text-gray-300 focus:outline-none">
                            <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none"
                                 viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                      d="M6 18L18 6M6 6l12 12"/>
                            </svg>
                        </button>
                    </div>

                    {{-- AREA PESAN --}}
                    <div id="messages-container" class="flex-1 overflow-y-auto px-2 space-y-4">
                        @foreach($messages as $message)
                            @if($message->sender_id == auth()->id())
                                {{-- Pesan dari Admin (kanan) --}}
                                <div class="flex justify-end">
                                    <div class="bg-blue-500 text-white rounded-lg rounded-br-none px-4 py-2 max-w-[70%] relative shadow">
                                        <p class="text-sm break-words mb-1">{{ $message->message }}</p>
                                        <div class="text-[10px] text-blue-200 text-right">
                                            {{ $message->created_at->format('H:i') }}
                                        </div>
                                    </div>
                                </div>
                            @else
                                {{-- Pesan dari User (kiri) --}}
                                <div class="flex justify-start">
                                    <div class="bg-gray-100 dark:bg-gray-700 text-gray-900 dark:text-gray-100 rounded-lg rounded-bl-none px-4 py-2 max-w-[70%] relative shadow">
                                        <p class="text-sm break-words mb-1">{{ $message->message }}</p>
                                        <div class="text-[10px] text-gray-500 dark:text-gray-400 text-right">
                                            {{ $message->created_at->format('H:i') }}
                                        </div>
                                    </div>
                                </div>
                            @endif
                        @endforeach
                    </div>

                    {{-- INPUT + AKHIRI SESI --}}
                    <div class="mt-4 border-t border-gray-200 dark:border-gray-700 pt-4">
                        <form id="chat-form" class="flex items-center space-x-2">
                            @csrf
                           <div class="relative w-full">
                        {{-- Kotak input --}}
                        <input
                            type="text"
                            id="message"
                            class="w-full border border-gray-300 dark:border-gray-600 rounded-full px-4 py-2 pr-12 focus:outline-none focus:ring-2 focus:ring-blue-400 dark:bg-gray-700 dark:text-gray-100"
                            placeholder="Ketik pesan..."
                            autocomplete="off"
                            required
                        />

                        {{-- Tombol Kirim  --}}
                       
                          <button
                            id="send-btn"
                            type="submit"
                            class="absolute right-1 top-1/2 transform -translate-y-1/2 bg-blue-500 hover:bg-blue-600 text-white p-1 px-2 rounded-full focus:outline-none"
                            >
                    <span class="material-icons">send</span>
                  </button>
                    </div>


                        </form>

                 
                        <div class="mt-3 text-center">
                            <button onclick="endSession({{ $session->id }})"
                                    class="text-red-500 hover:text-red-700 text-sm focus:outline-none">
                                Akhiri Sesi Chat
                            </button>
                        </div>
                    </div>
                </div> 
            </div> {{-- tutup card --}}
        </div>
    </div>

    {{-- Pusher JS --}}
    <script src="https://cdn.jsdelivr.net/npm/pusher-js@7.0.3/dist/web/pusher.min.js"></script>
    <script>
        // Scroll otomatis ke pesan terakhir saat halaman dibuka
        document.addEventListener('DOMContentLoaded', () => {
            const container = document.getElementById('messages-container');
            if (container) {
                container.scrollTop = container.scrollHeight;
            }
        });

        // Inisialisasi Pusher (ganti your-app-key & cluster kalau perlu)
        const pusher = new Pusher('your-app-key', {
            cluster: 'mt1',
            encrypted: true
        });

        // Subscribe ke channel chat sesuai sessionId
        const channel = pusher.subscribe('chat.{{ $session->id }}');

        // Tangani event MessageSent
        channel.bind('MessageSent', function(data) {
            const messageContainer = document.getElementById('messages-container');
            let newDiv = document.createElement('div');

            if (data.message.sender_id == {{ auth()->id() }}) {
                // Pesan dari admin (kanan)
                newDiv.innerHTML = `
                    <div class="flex justify-end">
                        <div class="bg-blue-500 text-white rounded-lg rounded-br-none px-4 py-2 max-w-[70%] relative shadow">
                            <p class="text-sm break-words mb-1">${data.message.message}</p>
                            <div class="text-[10px] text-blue-200 text-right">
                                ${new Date(data.message.created_at).toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'})}
                            </div>
                        </div>
                    </div>
                `;
            } else {
                // Pesan dari user (kiri)
                newDiv.innerHTML = `
                    <div class="flex justify-start">
                        <div class="bg-gray-100 dark:bg-gray-700 text-gray-900 dark:text-gray-100 rounded-lg rounded-bl-none px-4 py-2 max-w-[70%] relative shadow">
                            <p class="text-sm break-words mb-1">${data.message.message}</p>
                            <div class="text-[10px] text-gray-500 dark:text-gray-400 text-right">
                                ${new Date(data.message.created_at).toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'})}
                            </div>
                        </div>
                    </div>
                `;
            }

            messageContainer.appendChild(newDiv);
            messageContainer.scrollTop = messageContainer.scrollHeight;
        });

        // AJAX: kirim pesan
        const chatForm = document.getElementById('chat-form');
        const messageInput = document.getElementById('message');
        const sendBtn = document.getElementById('send-btn');

        chatForm.addEventListener('submit', function(event) {
            event.preventDefault();
            const text = messageInput.value.trim();
            if (text === "") return;

            const formData = new FormData();
            formData.append("message", text);
            formData.append("_token", "{{ csrf_token() }}");

            fetch("{{ route('live-chat.send-message', $session->id) }}", {
                method: 'POST',
                body: formData
            })
            .then(response => response.json())
            .then(data => {
                if (data.status === 'success') {
                    messageInput.value = '';
                    const messageContainer = document.getElementById('messages-container');
                    let newDiv = document.createElement('div');
                    newDiv.innerHTML = `
                        <div class="flex justify-end">
                            <div class="bg-blue-500 text-white rounded-lg rounded-br-none px-4 py-2 max-w-[70%] relative shadow">
                                <p class="text-sm break-words mb-1">${data.message.message}</p>
                                <div class="text-[10px] text-blue-200 text-right">
                                    ${new Date(data.message.created_at).toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'})}
                                </div>
                            </div>
                        </div>
                    `;
                    messageContainer.appendChild(newDiv);
                    messageContainer.scrollTop = messageContainer.scrollHeight;
                }
            })
            .catch(error => console.error('Error:', error));
        });

        // Fungsi untuk mengakhiri sesi chat via AJAX
        function endSession(sessionId) {
            if (!confirm('Anda yakin ingin mengakhiri sesi chat ini?')) return;

            fetch(`/live-chat/${sessionId}/end`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': "{{ csrf_token() }}",
                },
                body: JSON.stringify({})
            })
            .then(response => response.json())
            .then(data => {
                if (data.status === 'success') {
                    window.location.href = "{{ route('live-chat.admin') }}";
                } else {
                    alert('Gagal mengakhiri sesi: ' + data.message);
                }
            })
            .catch(err => console.error(err));
        }
    </script>
</x-app-layout>