

<?php $__env->startSection('title', 'Customer Service Live Chat'); ?>
<?php $__env->startSection('page_heading', 'CRM Komunikasi: Pusat Obrolan Pelanggan Interaktif'); ?>

<?php $__env->startSection('content'); ?>
<div class="bg-white border border-gray-200 rounded-xl shadow-sm overflow-hidden flex h-[calc(100vh-12rem)]">

    <!-- SISI KIRI: DAFTAR ROOM CHAT PELANGGAN -->
    <div class="w-80 border-r border-gray-200 flex flex-col bg-slate-50 flex-shrink-0">
        <div class="p-4 border-b border-gray-200 bg-white">
            <h3 class="font-bold text-gray-800 text-xs uppercase tracking-wider">Antrean Pesan Masuk</h3>
        </div>
        <div class="flex-1 overflow-y-auto divide-y divide-gray-100">
            <?php $__empty_1 = true; $__currentLoopData = $daftarChat; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $item): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
            <?php
            // Mengambil data pesan terakhir dari room ini
            $lastChat = \App\Models\Chat::find($item->max_id);
            $pelanggan = \App\Models\Pelanggan::find($item->pelanggan_id);
            $isActive = request('room') == $item->pelanggan_id;
            ?>
            <?php if($pelanggan): ?>
            <a href="<?php echo e(url('/admin/live-chat?room=' . $item->pelanggan_id)); ?>"
                class="block p-4 transition <?php echo e($isActive ? 'bg-blue-50/80 border-l-4 border-blue-600' : 'hover:bg-gray-100/70'); ?>">
                <div class="flex justify-between items-start">
                    <span class="font-bold text-xs text-gray-900 block truncate max-w-[120px]"><?php echo e($pelanggan->nama); ?></span>
                    <span class="text-[9px] text-gray-400 font-mono"><?php echo e($lastChat->created_at->format('H:i')); ?></span>
                </div>
                <p class="text-[11px] text-gray-500 truncate mt-1">
                    <?php echo e($lastChat->pengirim == 'admin' ? '➡️ Anda: ' : '📥 '); ?><?php echo e($lastChat->pesan); ?>

                </p>
            </a>
            <?php endif; ?>
            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
            <div class="p-8 text-center text-gray-400 font-medium text-xs">
                📭 Belum ada riwayat chat dari pelanggan.
            </div>
            <?php endif; ?>
        </div>
    </div>

    <!-- SISI KANAN: JENDELA PERCAKAPAN AKTIF -->
    <div class="flex-1 flex flex-col bg-gray-50 relative">
        <?php if($pelangganAktif): ?>
        <!-- Header Nama Pelanggan di Room Aktif -->
        <div class="h-14 bg-white border-b border-gray-200 flex items-center px-6 justify-between flex-shrink-0">
            <div>
                <span class="font-black text-xs text-gray-900 block">💬 <?php echo e($pelangganAktif->nama); ?></span>
                <span class="text-[10px] text-emerald-600 font-semibold block">Member Terdaftar</span>
            </div>
            <span class="text-[10px] font-mono text-gray-400 bg-slate-100 px-2 py-0.5 rounded">ID: #MBR-<?php echo e($pelangganAktif->id); ?></span>
        </div>

        <!-- Area Teks Bubble Balon Chat Stream -->
        <div class="flex-1 overflow-y-auto p-6 space-y-4" id="chat-box">
            <?php $__currentLoopData = $chatMessages; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $msg): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
            <?php if($msg->pengirim == 'admin'): ?>
            <!-- Balon Chat Sisi Admin (Kanan - Biru) -->
            <div class="flex justify-end">
                <div class="bg-blue-600 text-white max-w-md rounded-2xl rounded-tr-none px-4 py-2.5 shadow-sm">
                    <p class="text-xs font-medium leading-relaxed"><?php echo e($msg->pesan); ?></p>
                    <span class="text-[8px] text-blue-200 font-mono block text-right mt-1"><?php echo e($msg->created_at->format('H:i')); ?></span>
                </div>
            </div>
            <?php else: ?>
            <!-- Balon Chat Sisi Pelanggan (Kiri - Putih) -->
            <div class="flex justify-start">
                <div class="bg-white border border-gray-200 text-gray-950 max-w-md rounded-2xl rounded-tl-none px-4 py-2.5 shadow-sm">
                    <p class="text-xs font-medium leading-relaxed"><?php echo e($msg->pesan); ?></p>
                    <span class="text-[8px] text-gray-400 font-mono block mt-1"><?php echo e($msg->created_at->format('H:i')); ?></span>
                </div>
            </div>
            <?php endif; ?>
            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
        </div>

        <!-- Form Input Kirim Balasan Pesan -->
        <div class="p-4 bg-white border-t border-gray-200 flex-shrink-0">
            <form action="<?php echo e(route('admin.chat.kirim', $pelangganAktif->id)); ?>" method="POST" class="flex gap-2">
                <?php echo csrf_field(); ?>
                <input type="text" name="pesan" autocomplete="off" placeholder="Ketik balasan pesan CRM resmi di sini..." required
                    class="flex-1 px-4 py-2 border border-gray-300 rounded-xl text-xs outline-none focus:ring-2 focus:ring-blue-500 font-medium">
                <button type="submit" class="bg-blue-600 text-white font-black text-xs px-5 py-2 rounded-xl hover:bg-blue-700 transition shadow-sm">
                    🚀 Kirim
                </button>
            </form>
        </div>
        <?php else: ?>
        <!-- Kondisi Layar Kosong Sebelum Room Dipilih -->
        <div class="flex-1 flex flex-col items-center justify-center p-8 text-center text-gray-400 space-y-2">
            <span class="text-4xl block">💬</span>
            <p class="text-xs font-bold text-gray-700">Pusat Hub Kendali Obrolan CS</p>
            <p class="text-[11px] text-gray-400 max-w-[280px]">Silakan pilih salah satu antrean chat pelanggan di sisi kiri untuk mulai membalas pesan.</p>
        </div>
        <?php endif; ?>
    </div>

</div>

<!-- Auto Scroll ke Pesan Terbawah -->
<script>
    const chatBox = document.getElementById('chat-box');
    if (chatBox) {
        chatBox.scrollTop = chatBox.scrollHeight;
    }
</script>
<?php $__env->stopSection(); ?>
<?php echo $__env->make('layouts.backend', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH D:\JOKI\2026\della\megamart-crm\resources\views/admin/live_chat.blade.php ENDPATH**/ ?>