<!DOCTYPE html>
<html lang="id">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?php echo $__env->yieldContent('title'); ?> - Mega Mart</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>

<body class="bg-gray-50 text-gray-800 flex flex-col min-h-screen relative">

    <nav class="bg-white border-b border-gray-200 sticky top-0 z-50 shadow-sm">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between h-16">

                <div class="flex items-center">
                    <a href="<?php echo e(route('katalog')); ?>" class="flex items-center">
                        <span class="text-2xl font-black text-blue-600 tracking-wider">MEGA MART</span>
                    </a>
                </div>

                <div class="hidden md:flex items-center space-x-8 font-medium text-gray-600">
                    <a href="<?php echo e(route('katalog')); ?>" class="<?php echo e(Request::is('katalog') ? 'text-blue-600 font-bold' : 'hover:text-blue-600'); ?> transition">Katalog Sembako</a>
                    <a href="<?php echo e(route('lacak.paket')); ?>" class="<?php echo e(Request::is('lacak-paket') ? 'text-blue-600 font-bold' : 'hover:text-blue-600'); ?> transition">Status Pesanan</a>
                    <a href="<?php echo e(route('keluhan.index')); ?>" class="<?php echo e(Request::is('keluhan') ? 'text-blue-600 font-bold' : 'hover:text-blue-600'); ?> transition">Form Keluhan</a>
                </div>

                <div class="flex items-center space-x-4">
                    <?php if(session()->has('pelanggan_logged')): ?>

                    <a href="<?php echo e(route('keranjang.index')); ?>" class="p-2 text-gray-600 hover:text-blue-600 hover:bg-gray-100 rounded-full transition relative group" title="Lihat Keranjang Belanja">
                        <i class="fa-solid fa-cart-shopping text-lg"></i>

                        <?php if(session()->has('keranjang') && count(session('keranjang')) > 0): ?>
                        <span class="absolute -top-1 -right-1 bg-red-500 text-white text-[10px] w-4 h-4 rounded-full flex items-center justify-center font-bold animate-bounce">
                            <?php echo e(count(session('keranjang'))); ?>

                        </span>
                        <?php endif; ?>
                    </a>

                    <div class="relative inline-block text-left">
                        <div>
                            <button type="button" onclick="toggleDropdownProfil()" class="text-sm font-semibold text-gray-700 bg-gray-100 px-3 py-1.5 rounded-lg border border-gray-200 hover:bg-gray-200 transition flex items-center gap-1.5 focus:outline-none">
                                <span>👤 <?php echo e(session('pelanggan_nama')); ?></span>
                                <i class="fa-solid fa-chevron-down text-[10px] text-gray-500"></i>
                            </button>
                        </div>

                        <div id="dropdownProfil" class="hidden absolute right-0 mt-2 w-48 bg-white border border-gray-200 rounded-xl shadow-lg z-50 overflow-hidden">
                            <div class="px-4 py-2 border-b border-gray-100 bg-gray-50">
                                <p class="text-xs text-gray-400 font-medium">Status Akun</p>
                                <p class="text-xs font-bold text-emerald-600">Member Premium</p>
                            </div>
                            <div class="py-1">
                                <a href="<?php echo e(route('profil.index')); ?>" class="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 transition gap-2">
                                    <i class="fa-solid fa-user-gear text-gray-400 text-xs"></i> Update Profil
                                </a>
                            </div>
                            <div class="border-t border-gray-100 py-1 bg-red-50/50">
                                <form action="<?php echo e(route('pelanggan.logout')); ?>" method="POST" class="w-full">
                                    <?php echo csrf_field(); ?>
                                    <button type="submit" class="w-full text-left px-4 py-2 text-sm text-red-600 hover:bg-red-50 transition flex items-center gap-2 font-medium">
                                        <i class="fa-solid fa-arrow-right-from-bracket text-xs"></i> Logout
                                    </button>
                                </form>
                            </div>
                        </div>
                    </div>

                    <?php else: ?>
                    <a href="<?php echo e(route('login')); ?>" class="text-gray-600 hover:text-gray-900 font-medium text-sm">Login</a>
                    <a href="<?php echo e(route('register')); ?>" class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition font-medium text-sm shadow-sm">Daftar Member</a>
                    <?php endif; ?>
                </div>

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

    <main class="flex-grow max-w-7xl w-full mx-auto px-4 sm:px-6 lg:px-8 py-8">
        <?php echo $__env->yieldContent('content'); ?>
    </main>

    <?php if(session()->has('pelanggan_logged')): ?>
    <?php
    $chats = DB::table('chats')
    ->where('pelanggan_id', session('pelanggan_id'))
    ->orderBy('created_at', 'asc')
    ->get();
    ?>

    <div class="fixed bottom-6 left-6 z-50">
        <button onclick="toggleChatPopup()" id="chatButton" class="bg-blue-600 text-white w-14 h-14 rounded-full shadow-xl hover:bg-blue-700 transition flex items-center justify-center text-xl focus:outline-none relative">
            <i class="fa-regular fa-comments"></i>
            <span class="absolute top-0 right-0 w-3 h-3 bg-red-500 rounded-full border-2 border-white animate-pulse"></span>
        </button>

        <div id="chatPopup" class="hidden absolute bottom-16 left-0 bg-white border border-gray-200 rounded-2xl shadow-2xl flex flex-col w-[350px] h-[450px] overflow-hidden transition-all">

            <div class="px-4 py-3 bg-blue-600 text-white font-bold text-sm flex justify-between items-center shadow-sm">
                <div class="flex items-center space-x-2">
                    <span class="w-2 h-2 bg-emerald-400 rounded-full animate-pulse"></span>
                    <span>Customer Service Mega Mart</span>
                </div>
                <button onclick="toggleChatPopup()" class="hover:text-gray-200 text-base font-bold">&times;</button>
            </div>

            <div class="flex-1 p-4 bg-slate-50 overflow-y-auto space-y-3 text-xs" id="chatContent">
                <div class="flex justify-start">
                    <div class="max-w-[85%] bg-white border border-gray-200 text-gray-700 px-3 py-2 rounded-xl rounded-tl-none shadow-sm">
                        Halo <?php echo e(session('pelanggan_nama')); ?>! Ada yang bisa kami bantu seputar pesanan sembako Anda hari ini?
                    </div>
                </div>

                <?php $__currentLoopData = $chats; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $chat): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                <?php if($chat->pengirim == 'pelanggan'): ?>
                <div class="flex justify-end">
                    <div class="max-w-[85%] bg-blue-600 text-white px-3 py-2 rounded-xl rounded-tr-none shadow-sm font-medium">
                        <?php echo e($chat->pesan); ?>

                    </div>
                </div>
                <?php else: ?>
                <div class="flex justify-start">
                    <div class="max-w-[85%] bg-white border border-gray-200 text-gray-700 px-3 py-2 rounded-xl rounded-tl-none shadow-sm">
                        <span class="block text-[9px] text-blue-600 font-bold mb-0.5">🧑‍💻 CS Admin</span>
                        <?php echo e($chat->pesan); ?>

                    </div>
                </div>
                <?php endif; ?>
                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
            </div>

            <form id="formChatCRM" class="p-2.5 border-t border-gray-200 bg-white flex gap-2">
                <?php echo csrf_field(); ?>
                <input type="text" id="inputPesanCRM" name="pesan" required autocomplete="off" placeholder="Tulis pesan..." class="flex-1 px-3 py-2 border border-gray-300 rounded-lg outline-none text-xs focus:ring-1 focus:ring-blue-600 font-medium">
                <button type="submit" class="bg-blue-600 text-white px-3 py-2 rounded-lg text-xs font-bold hover:bg-blue-700 transition">Kirim</button>
            </form>
        </div>
    </div>
    <?php endif; ?>

    <script>
        function toggleDropdownProfil() {
            const dropdown = document.getElementById('dropdownProfil');
            dropdown.classList.toggle('hidden');
        }

        function toggleChatPopup() {
            const popup = document.getElementById('chatPopup');
            popup.classList.toggle('hidden');

            if (popup.classList.contains('hidden')) {
                localStorage.setItem('chat_popup_open', 'false');
            } else {
                localStorage.setItem('chat_popup_open', 'true');
                scrollChatToBottom();
            }
        }

        function scrollChatToBottom() {
            const chatContent = document.getElementById('chatContent');
            if (chatContent) {
                chatContent.scrollTop = chatContent.scrollHeight;
            }
        }

        document.addEventListener("DOMContentLoaded", function() {
            const popup = document.getElementById('chatPopup');
            const isOpen = localStorage.getItem('chat_popup_open');

            if (isOpen === 'true') {
                if (popup) popup.classList.remove('hidden');
                scrollChatToBottom();
            }

            // PROSES SUBMIT CHAT VIA AJAX JETSTREAM (URL STRING HARCODED)
            const formChat = document.getElementById('formChatCRM');
            if (formChat) {
                formChat.addEventListener('submit', function(e) {
                    e.preventDefault();

                    const inputPesan = document.getElementById('inputPesanCRM');
                    const pesanTeks = inputPesan.value;
                    const token = document.querySelector('input[name="_token"]').value;

                    if (!pesanTeks.trim()) return;

                    // 1. Gambar gelembung di interface langsung
                    const chatContent = document.getElementById('chatContent');
                    const bubbleBaru = `
                        <div class="flex justify-end">
                            <div class="max-w-[85%] bg-blue-600 text-white px-3 py-2 rounded-xl rounded-tr-none shadow-sm font-medium">
                                ${pesanTeks}
                            </div>
                        </div>
                    `;
                    chatContent.insertAdjacentHTML('beforeend', bubbleBaru);
                    scrollChatToBottom();
                    inputPesan.value = '';

                    // 2. Tembak langsung menggunakan URL String Fisik penembus Cache Rute
                    fetch("/kirim-chat-crm", {
                            method: "POST",
                            headers: {
                                "Content-Type": "application/json",
                                "X-CSRF-TOKEN": token,
                                "X-Requested-With": "XMLHttpRequest"
                            },
                            body: JSON.stringify({
                                pesan: pesanTeks
                            })
                        })
                        .then(response => response.json())
                        .then(data => {
                            if (!data.success) {
                                console.error('Database menolak menyimpan:', data.message);
                            }
                        })
                        .catch(error => console.error('Gagal memproses request AJAX:', error));
                });
            }

            window.addEventListener('click', function(e) {
                const dropdown = document.getElementById('dropdownProfil');
                if (dropdown && !e.target.closest('#dropdownProfil') && !e.target.closest('button[onclick="toggleDropdownProfil()"]')) {
                    dropdown.classList.add('hidden');
                }
            });
        });
    </script>

    <footer class="bg-white border-t border-gray-200 py-6 text-center text-sm text-gray-500">
        &copy; <?php echo e(date('Y')); ?> Minimarket Mega Mart. Sistem Layanan CRM.
    </footer>

</body>

</html><?php /**PATH D:\JOKI\2026\della\megamart-crm\resources\views/layouts/frontend.blade.php ENDPATH**/ ?>