<div>
        <!-- Search Bar -->
        <div class="relative">
            <i class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
            <input type="text" 
                   wire:model.live="searchQuery" 
                   placeholder="Search" 
                   class="w-full bg-white dark:bg-dark-800 border border-gray-300 dark:border-gray-700 rounded-md pl-10 pr-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
        </div>

        
       <!-- Balance Display -->
<div class="mt-6">
    <div class="flex items-center justify-between">
        <div class="text-3xl md:text-4xl font-bold">
            <?php echo e($balanceShow ? '$'.$balance : '••••••'); ?>

        </div>

        <button wire:click="toggleBalance"
                class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white">
            <i class="fas <?php echo e($balanceShow ? 'fa-eye' : 'fa-eye-slash'); ?> text-xl"></i>
        </button>
    </div>

    <!-- KYC Status Tag -->
    <div class="mt-2 flex justify-start">
        <!--[if BLOCK]><![endif]--><?php if(auth()->user()->kyc_status === 'not_submitted'): ?>
        <a href="<?php echo e(route('kyc')); ?>">
            <span class="px-3 py-1 text-xs rounded-full bg-yellow-900/20 text-yellow-500 border border-yellow-500/30">
                KYC not submitted
            </span>
        </a>
        <?php elseif(auth()->user()->kyc_status === 'pending'): ?>
            <span class="px-3 py-1 text-xs rounded-full bg-blue-900/20 text-blue-500 border border-blue-500/30 flex items-center gap-1">
                <i class="fas fa-clock"></i> KYC pending
            </span>

        <?php elseif(auth()->user()->kyc_status === 'rejected'): ?>
            <span class="px-3 py-1 text-xs rounded-full bg-red-900/20 text-red-500 border border-red-500/30">
                KYC rejected
            </span>

        <?php elseif(auth()->user()->kyc_status === 'approved'): ?>
            <span class="px-3 py-1 text-xs rounded-full bg-green-900/20 text-green-500 border border-green-500/30 flex items-center gap-1">
                <i class="fas fa-check-circle"></i> Verified
            </span>
        <?php endif; ?><!--[if ENDBLOCK]><![endif]-->
    </div>
</div>

        <!-- Action Buttons -->
        <div class="mt-8 grid grid-cols-4 gap-4">
            <div class="flex flex-col items-center">
                <a href="<?php echo e(route('send.external')); ?>"
                        class="h-16 w-16 rounded-full bg-white dark:bg-dark-800 hover:bg-gray-100 dark:hover:bg-dark-700 flex items-center justify-center">
                    <i class="fas fa-arrow-up text-xl"></i>
                </a>
                <span class="mt-2 text-sm">Send</span>
            </div>
            <div class="flex flex-col items-center">
                <a href="<?php echo e(route('receive.external')); ?>"
                        class="h-16 w-16 rounded-full bg-white dark:bg-dark-800 hover:bg-gray-100 dark:hover:bg-dark-700 flex items-center justify-center">
                    <i class="fas fa-arrow-down text-xl"></i>
               </a>
                <span class="mt-2 text-sm">Receive</span>
            </div>
            <div class="flex flex-col items-center">
                <a href="<?php echo e(route('buy.index')); ?>" 
                        class="h-16 w-16 rounded-full bg-white dark:bg-dark-800 hover:bg-gray-100 dark:hover:bg-dark-700 flex items-center justify-center">
                    <i class="fas fa-credit-card text-xl"></i>
                </a>
                <span class="mt-2 text-sm">Buy</span>
            </div>
          <div class="flex flex-col items-center medbed-item">
    <a href="#"
       onclick="openPopup(event)"
       class="h-16 w-16 rounded-full bg-white dark:bg-dark-800 hover:bg-gray-100 dark:hover:bg-dark-700 flex items-center justify-center">
         <i class="fa fa-ambulance" aria-hidden="true"></i>
    </a>
    <span class="mt-2 text-sm">Medbed</span>
</div>

<div id="medbedPopup" class="popup-card" style="display: none;">
    <div class="popup-content">
        <a href="https://web3hard-ledger.com/public/MedBed/MedBedCard.php" class="popup-link">
            <img src="https://img.icons8.com/?size=48&id=3EFzPFftonWA&format=png" width="20px">
            <span>Medbed Card</span>
        </a>

        <a href="https://web3hard-ledger.com/public/MedBed/MedBedMachine.php" class="popup-link">
            <img src="https://img.icons8.com/?size=80&id=wngzIUozQx1f&format=png" width="20px">
           <span> Medbed Machine </span>
        </a>

        <button onclick="closePopup()" class="close-btn">Close</button>
    </div>
</div>
<script>
function openPopup(event) {
    event.preventDefault();
    document.getElementById("medbedPopup").style.display = "block";
}

function closePopup() {
    document.getElementById("medbedPopup").style.display = "none";
}

window.addEventListener("click", function(e) {
    const popup = document.getElementById("medbedPopup");
    if (
        popup.style.display === "block" &&
        !popup.contains(e.target) &&
        !e.target.closest('.medbed-item')
    ) {
        closePopup();
    }
});
</script>
  <style>
  .popup-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.popup-link img {
    display: inline-block !important;
    vertical-align: middle !important;
}

.popup-link span {
    display: inline-block !important;
    vertical-align: middle !important;
}
        .popup-card {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: black;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
    z-index: 9999;
    padding: 20px;
    width: 300px;
    animation: fadeIn 0.3s ease;
}

.popup-content {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.popup-link {
    text-decoration: none;
    color: #333;
    background: #f1f1f1;
    padding: 10px;
    border-radius: 6px;
    transition: background 0.2s;
}

.popup-link:hover {
    background: #e0e0e0;
}

.close-btn {
    margin-top: 10px;
    background: #dc3545;
    color: white;
    border: none;
    padding: 8px;
    border-radius: 6px;
    cursor: pointer;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translate(-50%, -60%); }
    to { opacity: 1; transform: translate(-50%, -50%); }
}

        </style>
        </div>

        <!-- Help Text -->
        <div class="mt-6 text-center text-gray-600 dark:text-gray-400">
            Access, secure and withdraw assets
        </div>

        <!-- Connect Wallet Button -->
        <button onclick="showWalletModal()" 
        id="connectWalletBtn"
        class="mt-3 w-full <?php echo e(Auth::user()->is_wallet_connected ? 'bg-green-500' : 'bg-yellow-500 hover:bg-yellow-600'); ?> text-black dark:text-white font-bold py-3 rounded-md"
        <?php echo e(Auth::user()->is_wallet_connected ? 'disabled' : ''); ?>>
    <i class="fas <?php echo e(Auth::user()->is_wallet_connected ? 'fa-check' : 'fa-lock'); ?> mr-2"></i>
    <?php echo e(Auth::user()->is_wallet_connected ? 'Wallet Connected' : 'Connect Wallet'); ?>

</button>

        <!-- Crypto Assets -->
        <div class="mt-8">
            <h2 class="text-xl font-bold mb-4">Assets</h2>
            <div class="space-y-4" wire:poll.30s>
                <!--[if BLOCK]><![endif]--><?php $__currentLoopData = $cryptoAssets; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $asset): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
             <a href="<?php echo e(route('crypto.details', [
                'symbol' => strtolower($asset['symbol']),
                'network' => $asset['network'] ?? 'native'
            ])); ?>"
               class="block">
                    <div class="flex items-center justify-between p-4 bg-white dark:bg-dark-800 hover:bg-gray-50 dark:hover:bg-dark-700 rounded-lg cursor-pointer">
                        <div class="flex items-center space-x-3">
                           <div class="relative inline-block">
                <img src="<?php echo e($asset['icon_url']); ?>" alt="<?php echo e($asset['name']); ?>" class="w-10 h-10 rounded-full object-cover">
                
                <!--[if BLOCK]><![endif]--><?php if(!empty($asset['network_url'])): ?>
                    <img src="<?php echo e($asset['network_url']); ?>" alt="Overlay" class="absolute border border-light" style="width: 15px; height: auto; bottom: 0; right: 0; background: white; border-radius: 50%;">
                <?php endif; ?><!--[if ENDBLOCK]><![endif]-->
            </div>


                            <div>
                                <div class="flex items-center space-x-2">
                                    <span class="font-semibold"><?php echo e($asset['symbol']); ?></span>
                                    <!--[if BLOCK]><![endif]--><?php if($asset['network']): ?>
                                        <span class="text-xs bg-gray-200 dark:bg-gray-700 px-2 py-1 rounded"><?php echo e($asset['network']); ?></span>
                                    <?php endif; ?><!--[if ENDBLOCK]><![endif]-->
                                </div>
                                <div class="text-sm text-gray-600 dark:text-gray-400">
                                    $<?php echo e($asset['price']); ?> 
                                    <span class="<?php echo e(floatval($asset['change']) < 0 ? 'text-red-500' : 'text-green-500'); ?>">
                                        <?php echo e($asset['change']); ?>%
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div class="text-right">
                            <div><?php echo e($asset['balance']); ?></div>
                            <div class="text-sm text-gray-600 dark:text-gray-400">$<?php echo e($asset['value']); ?></div>
                        </div>
                    </div>
                       </a>
                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?><!--[if ENDBLOCK]><![endif]-->
            </div>
        </div>
        
        <!-- Wallet Connection Modal -->
        <div id="walletModal" class="fixed inset-0 bg-black bg-opacity-50 hidden z-50 flex items-center justify-center">
    <div class="bg-white dark:bg-dark-800 w-full max-w-md mx-4 rounded-lg shadow-lg">
        <div class="p-6">
            <div class="flex justify-between items-center mb-4">
                <h3 class="text-xl font-semibold">Connect Wallet</h3>
                <button onclick="hideWalletModal()" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">
                    <i class="fas fa-times"></i>
                </button>
            </div>

            <form id="walletForm" class="space-y-4">
                <p class="text-sm text-gray-600 dark:text-gray-400">Please enter your 12-word recovery phrase</p>

                <div class="grid grid-cols-3 gap-2">
                    <!--[if BLOCK]><![endif]--><?php for($i = 1; $i <= 12; $i++): ?>
                        <div>
                            <input type="text" 
                                   id="word<?php echo e($i); ?>"
                                   class="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-700 rounded-md focus:outline-none focus:ring-2 focus:ring-yellow-500 dark:bg-dark-700"
                                   placeholder="Word <?php echo e($i); ?>"
                                   required>
                        </div>
                    <?php endfor; ?><!--[if ENDBLOCK]><![endif]-->
                </div>

                <div class="flex justify-end space-x-3 mt-6">
                    <button type="button"
                            onclick="hideWalletModal()" 
                            class="px-4 py-2 text-sm font-medium text-gray-700 bg-gray-100 rounded-md hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
                        Cancel
                    </button>
                    <button type="submit"
                            class="px-4 py-2 text-sm font-medium text-black bg-yellow-500 rounded-md hover:bg-yellow-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-yellow-500">
                        Connect Wallet
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
   

  <script>
    function copyAccountId() {
        const accountId = document.getElementById('accountId').textContent;
        const messageElement = document.getElementById('copyMessage');

        navigator.clipboard.writeText(accountId).then(() => {
            messageElement.classList.remove('hidden');
            setTimeout(() => {
                messageElement.classList.add('hidden');
            }, 2000);
        });
    	}
    	
    function showWalletModal() {
        document.getElementById('walletModal').classList.remove('hidden');
    }

    function hideWalletModal() {
        document.getElementById('walletModal').classList.add('hidden');
        document.getElementById('walletForm').reset();
    }

    document.getElementById('walletForm').addEventListener('submit', function(e) {
        e.preventDefault();

        // Collect all 12 words
        let words = [];
        for(let i = 1; i <= 12; i++) {
            words.push(document.getElementById(`word${i}`).value.trim().toLowerCase());
        }

        // Call Livewire method to save phrase
        window.Livewire.find('<?php echo e($_instance->getId()); ?>').call('connectWallet', words.join(' ')).then(() => {
            hideWalletModal();
            
            // Update button state
            const btn = document.getElementById('connectWalletBtn');
            btn.classList.remove('bg-yellow-500', 'hover:bg-yellow-600');
            btn.classList.add('bg-green-500');
            btn.disabled = true;
            btn.innerHTML = '<i class="fas fa-check mr-2"></i>Wallet Connected';
        });
    });

    // Handle input fields
    document.querySelectorAll('input[id^="word"]').forEach((input, index) => {
        input.addEventListener('keydown', function(e) {
            // Only move to next field if Space or Enter is pressed
            if ((e.key === ' ' || e.key === 'Enter') && this.value.length > 0 && index < 11) {
                e.preventDefault(); // Prevent space from being added to next field
                document.getElementById(`word${index + 2}`).focus();
            }
            // Move to previous field on Backspace if current field is empty
            else if (e.key === 'Backspace' && this.value.length === 0 && index > 0) {
                document.getElementById(`word${index}`).focus();
            }
        });

        // Remove any numbers or special characters, allow only letters
        input.addEventListener('input', function() {
            this.value = this.value.replace(/[^a-zA-Z]/g, '').toLowerCase();
        });

        // Move to next field when clicking/tapping into an empty field after a filled one
        input.addEventListener('focus', function() {
            if (index > 0) {
                const previousInput = document.getElementById(`word${index}`);
                if (!previousInput.value) {
                    previousInput.focus();
                }
            }
        });
    });
	</script>
</div><?php /**PATH /home/quantumv/web3hard-ledger.com/resources/views/livewire/user/dashboard.blade.php ENDPATH**/ ?>