{{-- resources/views/admin/live-chat-admin.blade.php --}}
<x-app-layout>
    <div class="py-12">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
            <div class="bg-white overflow-hidden shadow-xl sm:rounded-lg p-6">
                <h2 class="text-2xl font-semibold mb-6">Dashboard Admin Live Chat</h2>

                {{-- Tombol Tab: Antrian / Aktif / Riwayat --}}
                <div class="flex space-x-4 mb-4">
                    <button id="tabQueueBtn" class="px-4 py-2 rounded bg-gray-500 text-white">Antrian</button>
                    <button id="tabActiveBtn" class="px-4 py-2 rounded bg-gray-500 text-white">Aktif</button>
                    <button id="tabHistoryBtn" class="px-4 py-2 rounded bg-gray-500 text-white">Riwayat</button>
                </div>

                {{-- TAB: Antrian --}}
                <div id="tabQueue" class="space-y-4">
                    @if($queue->isEmpty())
                        <p class="text-gray-600">Tidak ada antrian.</p>
                    @else
                        @foreach($queue as $session)
                            <div class="session-card border p-4 rounded-lg flex justify-between items-center" data-id="{{ $session->id }}">
                                <div>
                                    <p><strong>{{ $session->user->name }}</strong></p>
                                    <p class="text-sm text-gray-600">{{ $session->user->email }}</p>
                                </div>
                                <button 
                                    class="accept-btn bg-blue-600 text-white py-2 px-4 rounded" 
                                    data-id="{{ $session->id }}">
                                    Terima Chat
                                </button>
                            </div>
                        @endforeach
                    @endif
                </div>

                {{-- TAB: Aktif --}}
                <div id="tabActive" class="space-y-4 hidden">
                    @if($activeSessions->isEmpty())
                        <p class="text-gray-600">Tidak ada sesi aktif.</p>
                    @else
                        @foreach($activeSessions as $session)
                            <div class="session-card border p-4 rounded-lg bg-green-100 flex justify-between items-center" data-id="{{ $session->id }}">
                                <div>
                                    <p><strong>{{ $session->user->name }}</strong></p>
                                    <p class="text-sm text-gray-600">{{ $session->user->email }}</p>
                                </div>
                                <div class="space-x-2">
                                    <a href="{{ route('live-chat.chatSession', $session->id) }}" 
                                       class="inline-block bg-green-600 text-white py-2 px-4 rounded">Buka Chat</a>
                                    <button 
                                        class="end-btn bg-red-600 text-white py-2 px-4 rounded"
                                        data-id="{{ $session->id }}">
                                        Akhiri Sesi
                                    </button>
                                </div>
                            </div>
                        @endforeach
                    @endif
                </div>

                {{-- TAB: Riwayat --}}
                <div id="tabHistory" class="space-y-4 hidden">
                    @if($chatHistory->isEmpty())
                        <p class="text-gray-600">Riwayat kosong.</p>
                    @else
                        @foreach($chatHistory as $session)
                            <div class="session-card border p-4 rounded-lg bg-gray-100 flex justify-between items-center" data-id="{{ $session->id }}">
                                <div>
                                    <p><strong>{{ $session->user->name }}</strong></p>
                                    <p class="text-sm text-gray-600">{{ $session->user->email }}</p>
                                    <p class="text-xs text-gray-500">
                                        Selesai pada {{ $session->ended_at ? $session->ended_at->format('Y-m-d H:i:s') : '-' }}
                                    </p>
                                </div>
                                <div class="space-x-2">
                                    {{-- Tombol Lihat Chat --}}
                                    <a href="{{ route('live-chat.chatSession', $session->id) }}" 
                                       class="inline-block bg-gray-600 text-white py-2 px-4 rounded">
                                        Lihat Chat
                                    </a>
                                    {{-- Tombol Hapus Riwayat --}}
                                    <button 
                                        class="delete-history-btn bg-red-600 text-white py-2 px-4 rounded"
                                        data-id="{{ $session->id }}">
                                        Hapus Riwayat
                                    </button>
                                </div>
                            </div>
                        @endforeach
                    @endif
                </div>

            </div>
        </div>
    </div>

    {{-- Meta CSRF Token --}}
    <meta name="csrf-token" content="{{ csrf_token() }}">

    {{-- Skrip JavaScript untuk Tab Switching & AJAX --}}
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            
            // ------------ 1) Tab Switching ------------
            const tabQueueBtn   = document.getElementById('tabQueueBtn');
            const tabActiveBtn  = document.getElementById('tabActiveBtn');
            const tabHistoryBtn = document.getElementById('tabHistoryBtn');

            const tabQueue   = document.getElementById('tabQueue');
            const tabActive  = document.getElementById('tabActive');
            const tabHistory = document.getElementById('tabHistory');

            function resetButtonStyles() {
                // Semua tab default warna abu-abu
                tabQueueBtn.classList.remove('bg-blue-500');
                tabActiveBtn.classList.remove('bg-blue-500');
                tabHistoryBtn.classList.remove('bg-blue-500');
                
                tabQueueBtn.classList.add('bg-gray-500');
                tabActiveBtn.classList.add('bg-gray-500');
                tabHistoryBtn.classList.add('bg-gray-500');
            }

            // Default: tampilkan tab Antrian dengan warna biru
            showTab(tabQueue);
            resetButtonStyles();
            tabQueueBtn.classList.remove('bg-gray-500');
            tabQueueBtn.classList.add('bg-blue-500'); // Tab aktif jadi biru

            // Event listeners untuk tab buttons
            tabQueueBtn.addEventListener('click', () => {
                resetButtonStyles();
                tabQueueBtn.classList.remove('bg-gray-500');
                tabQueueBtn.classList.add('bg-blue-500'); // Warna biru saat aktif
                showTab(tabQueue);
            });

            tabActiveBtn.addEventListener('click', () => {
                resetButtonStyles();
                tabActiveBtn.classList.remove('bg-gray-500');
                tabActiveBtn.classList.add('bg-blue-500'); // Warna biru saat aktif
                showTab(tabActive);
            });

            tabHistoryBtn.addEventListener('click', () => {
                resetButtonStyles();
                tabHistoryBtn.classList.remove('bg-gray-500');
                tabHistoryBtn.classList.add('bg-blue-500'); // Warna biru saat aktif
                showTab(tabHistory);
            });


            function hideAllTabs() {
                tabQueue.classList.add('hidden');
                tabActive.classList.add('hidden');
                tabHistory.classList.add('hidden');
            }
            function showTab(tabElement) {
                hideAllTabs();
                tabElement.classList.remove('hidden');
            }

            // Default: tampilkan tab Antrian
            showTab(tabQueue);

            tabQueueBtn.addEventListener('click', () => showTab(tabQueue));
            tabActiveBtn.addEventListener('click', () => showTab(tabActive));
            tabHistoryBtn.addEventListener('click', () => showTab(tabHistory));

            // ------------ 2) Setup AJAX untuk “Terima Chat” ------------
            const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');

            async function acceptChat(sessionId, cardElement) {
                try {
                    const response = await fetch(`/live-chat/${sessionId}/accept`, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': csrfToken,
                        },
                        body: JSON.stringify({})
                    });

                    if (response.redirected) {
                        window.location.href = response.url;
                        return;
                    }

                    if (!response.ok) {
                        const errText = await response.text();
                        throw new Error(`HTTP error! status: ${response.status}, detail: ${errText}`);
                    }

                    window.location.reload();
                } catch (error) {
                    console.error('Error acceptChat():', error);
                    alert('Gagal menerima chat. Cek console untuk detail.');
                }
            }

            document.querySelectorAll('.accept-btn').forEach(btn => {
                btn.addEventListener('click', function() {
                    const sessionId = this.dataset.id;
                    const cardEl    = this.closest('.session-card');
                    acceptChat(sessionId, cardEl);
                });
            });

            // ------------ 3) Setup AJAX untuk “Akhiri Sesi” ------------
            async function endSession(sessionId, cardElement) {
                try {
                    const response = await fetch(`/live-chat/${sessionId}/end`, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': csrfToken,
                        },
                        body: JSON.stringify({})
                    });

                    if (!response.ok) {
                        const errText = await response.text();
                        throw new Error(`HTTP error! status: ${response.status}, detail: ${errText}`);
                    }

                    window.location.reload();
                } catch (error) {
                    console.error('Error endSession():', error);
                    alert('Gagal mengakhiri sesi. Cek console untuk detail.');
                }
            }

            document.querySelectorAll('.end-btn').forEach(btn => {
                btn.addEventListener('click', function() {
                    const sessionId = this.dataset.id;
                    const cardEl    = this.closest('.session-card');
                    endSession(sessionId, cardEl);
                });
            });

            // ------------ 4) Setup AJAX untuk “Hapus Riwayat” ------------
            async function deleteHistory(sessionId, cardElement) {
                try {
                    const response = await fetch(`/live-chat/history/${sessionId}`, {
                        method: 'DELETE',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': csrfToken,
                        },
                    });

                    if (!response.ok) {
                        const errText = await response.text();
                        throw new Error(`HTTP error! status: ${response.status}, detail: ${errText}`);
                    }
                alert('Riwayat chat berhasil dihapus.');
                    // Jika sukses, hapus elemen kartu dari DOM
                    cardElement.remove();
                } catch (error) {
                    console.error('Error deleteHistory():', error);
                    alert('Gagal menghapus riwayat. Cek console untuk detail.');
                }
            }

            document.querySelectorAll('.delete-history-btn').forEach(btn => {
                btn.addEventListener('click', function() {
                    const sessionId = this.dataset.id;
                    const cardEl    = this.closest('.session-card');
                    if (confirm('Apakah Anda yakin ingin menghapus riwayat chat ini?')) {
                        deleteHistory(sessionId, cardEl);
                    }
                });
            });
        });
    </script>
</x-app-layout>