@extends("layouts.app")

@section('title', 'Order History')

@section("main")
    <div class="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50 to-indigo-50 dark:from-gray-900 dark:via-slate-900 dark:to-gray-900 py-12">
        <div class="mx-auto px-4 lg:px-16">
            <!-- Page Header -->
            <div class="text-center mb-12">
                <div class="flex items-center justify-center mb-6">
                    <div class="w-12 h-12 bg-gradient-to-r from-blue-500 to-purple-600 rounded-2xl flex items-center justify-center mr-4">
                        <i class="fas fa-history text-white text-2xl"></i>
                    </div>
                    <h1 class="text-2xl md:text-5xl font-bold bg-gradient-to-r from-blue-600 via-purple-600 to-indigo-600 bg-clip-text text-transparent">
                        Tools Order History
                    </h1>
                </div>
                <p class="text-lg text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">
                    Track and manage all your service orders in one place
                </p>
            </div>

            <!-- Stats Cards -->
            <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
                <div class="bg-white/80 dark:bg-gray-800/80 backdrop-blur-lg rounded-2xl shadow-xl border border-white/20 dark:border-gray-700/50 p-6">
                    <div class="flex items-center">
                        <div class="w-12 h-12 bg-gradient-to-r from-blue-400 to-blue-500 rounded-xl flex items-center justify-center mr-4">
                            <i class="fas fa-shopping-cart text-white"></i>
                        </div>
                        <div>
                            <p class="text-sm text-gray-600 dark:text-gray-400">Total Orders</p>
                            <p class="text-2xl font-bold text-gray-900 dark:text-white">{{ $orders->total() }}</p>
                        </div>
                    </div>
                </div>
                <div class="bg-white/80 dark:bg-gray-800/80 backdrop-blur-lg rounded-2xl shadow-xl border border-white/20 dark:border-gray-700/50 p-6">
                    <div class="flex items-center">
                        <div class="w-12 h-12 bg-gradient-to-r from-green-400 to-green-500 rounded-xl flex items-center justify-center mr-4">
                            <i class="fas fa-check-circle text-white"></i>
                        </div>
                        <div>
                            <p class="text-sm text-gray-600 dark:text-gray-400">Active</p>
                            <p class="text-2xl font-bold text-gray-900 dark:text-white">{{ $orders->where('service_status', 'Active')->count() }}</p>
                        </div>
                    </div>
                </div>
                <div class="bg-white/80 dark:bg-gray-800/80 backdrop-blur-lg rounded-2xl shadow-xl border border-white/20 dark:border-gray-700/50 p-6">
                    <div class="flex items-center">
                        <div class="w-12 h-12 bg-gradient-to-r from-yellow-400 to-yellow-500 rounded-xl flex items-center justify-center mr-4">
                            <i class="fas fa-clock text-white"></i>
                        </div>
                        <div>
                            <p class="text-sm text-gray-600 dark:text-gray-400">Expired</p>
                            <p class="text-2xl font-bold text-gray-900 dark:text-white">{{ $orders->where('service_status', 'Expired')->count() }}</p>
                        </div>
                    </div>
                </div>
                <div class="bg-white/80 dark:bg-gray-800/80 backdrop-blur-lg rounded-2xl shadow-xl border border-white/20 dark:border-gray-700/50 p-6">
                    <div class="flex items-center">
                        <div class="w-12 h-12 bg-gradient-to-r from-purple-400 to-purple-500 rounded-xl flex items-center justify-center mr-4">
                            <i class="fas fa-dollar-sign text-white"></i>
                        </div>
                        <div>
                            <p class="text-sm text-gray-600 dark:text-gray-400">Total Spent</p>
                            <p class="text-2xl font-bold text-gray-900 dark:text-white">{{ $currency->icon }}{{ $orders->sum('service_price') * $currency->rate }}</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Filters -->
            <div class="bg-white/80 dark:bg-gray-800/80 backdrop-blur-lg rounded-2xl shadow-xl border border-white/20 dark:border-gray-700/50 p-6 mb-8">
                <div class="flex flex-col md:flex-row gap-4">
                    <div class="flex-1">
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Search Orders</label>
                        <div class="relative">
                            <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
                                <i class="fas fa-search text-gray-400"></i>
                            </div>
                            <input type="text" id="searchOrders" class="block w-full pl-12 pr-4 py-3 bg-gray-50/80 dark:bg-gray-700/80 backdrop-blur-sm border border-gray-200 dark:border-gray-600 rounded-xl text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-300" placeholder="Search by service name...">
                        </div>
                    </div>
                    <div class="md:w-48">
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Filter by Status</label>
                        <select id="statusFilter" class="block w-full pl-4 pr-10 py-3 bg-gray-50/80 dark:bg-gray-700/80 backdrop-blur-sm border border-gray-200 dark:border-gray-600 rounded-xl text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-300 appearance-none">
                            <option value="">All Status</option>
                            <option value="Active">Active</option>
                            <option value="Expired">Expired</option>
                        </select>
                    </div>
                </div>
            </div>

            <!-- Orders Table -->
            <div class="bg-white/80 dark:bg-gray-800/80 backdrop-blur-lg rounded-2xl shadow-xl border border-white/20 dark:border-gray-700/50 overflow-hidden">
                <div class="overflow-x-auto">
                    <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
                        <thead class="bg-gradient-to-r from-gray-50 to-blue-50 dark:from-gray-700 dark:to-gray-600">
                            <tr>
                                <th scope="col" class="px-6 py-4 text-left text-xs font-semibold text-gray-600 dark:text-gray-300 uppercase tracking-wider">
                                    <div class="flex items-center">
                                        <i class="fas fa-cog mr-2"></i>
                                        Service
                                    </div>
                                </th>
                                <th scope="col" class="px-6 py-4 text-left text-xs font-semibold text-gray-600 dark:text-gray-300 uppercase tracking-wider">
                                    <div class="flex items-center">
                                        <i class="fas fa-sort-numeric-up mr-2"></i>
                                        Quantity
                                    </div>
                                </th>
                                <th scope="col" class="px-6 py-4 text-left text-xs font-semibold text-gray-600 dark:text-gray-300 uppercase tracking-wider">
                                    <div class="flex items-center">
                                        <i class="fas fa-dollar-sign mr-2"></i>
                                        Price
                                    </div>
                                </th>
                                <th scope="col" class="px-6 py-4 text-left text-xs font-semibold text-gray-600 dark:text-gray-300 uppercase tracking-wider">
                                    <div class="flex items-center">
                                        <i class="fas fa-info-circle mr-2"></i>
                                        Status
                                    </div>
                                </th>
                                <th scope="col" class="px-6 py-4 text-left text-xs font-semibold text-gray-600 dark:text-gray-300 uppercase tracking-wider">
                                    <div class="flex items-center">
                                        <i class="fas fa-calendar mr-2"></i>
                                        Purchase Date
                                    </div>
                                </th>
                                <th scope="col" class="px-6 py-4 text-left text-xs font-semibold text-gray-600 dark:text-gray-300 uppercase tracking-wider">
                                    <div class="flex items-center">
                                        <i class="fas fa-calendar mr-2"></i>
                                        Expiry Date
                                    </div>
                                </th>
                                <th scope="col" class="px-6 py-4 text-left text-xs font-semibold text-gray-600 dark:text-gray-300 uppercase tracking-wider">
                                    <div class="flex items-center">
                                        <i class="fas fa-code mr-2"></i>
                                        Code
                                    </div>
                                </th>
                            </tr>
                        </thead>
                        <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700" id="ordersTableBody">
                            @forelse ($orders as $order)
                                <tr class="order-row hover:bg-gradient-to-r hover:from-blue-50/50 hover:to-purple-50/50 dark:hover:from-blue-900/20 dark:hover:to-purple-900/20 transition-all duration-300" data-status="{{ $order->service_status }}">
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <div class="flex items-center">
                                            <div class="w-10 h-10 bg-gradient-to-r from-blue-400 to-purple-500 rounded-lg flex items-center justify-center mr-3">
                                                <i class="fas fa-mobile-alt text-white text-sm"></i>
                                            </div>
                                            <div>
                                                @php
                                                    $order_created = $order->created_at->format('d M Y H:i A')
                                                @endphp
                                                <div class="text-sm font-medium text-blue-600 dark:text-blue-400 service-name cursor-pointer hover:underline" onclick="showOrderDetails('{{ addslashes($order->service_title) }}', '{{ strtotime($order->expired_at) * 1000 }}', '{{ $order->service_status }}', '{{ $order_created }}', '{{ $currency->icon }}{{ $order->service_price * $currency->rate }}', '{{ $order->service_qnt }}', '{{ $order->username }}', '{{ $order->password }}', '{!! addslashes($order->service_comments) !!}')">{{ $order->service_title }}</div>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600 dark:text-gray-300">
                                        <div class="flex items-center">
                                            <span class="w-8 h-8 bg-gray-100 dark:bg-gray-700 rounded-lg flex items-center justify-center mr-2">
                                                {{ $order->service_qnt }}
                                            </span>
                                            <span>items</span>
                                        </div>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <div class="text-sm font-semibold text-green-600 dark:text-green-400">
                                            {{ $currency->icon }}{{ number_format($order->service_price * $currency->rate, 2) }}
                                        </div>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        @php
                                            $statusConfig = [
                                                'Active'  => ['bg' => 'bg-green-100 dark:bg-green-900/30', 'text' => 'text-green-800 dark:text-green-300', 'icon' => 'fas fa-check-circle'],
                                                'Expired' => ['bg' => 'bg-red-100 dark:bg-red-900/30', 'text' => 'text-red-800 dark:text-red-300', 'icon' => 'fas fa-times-circle'],
                                            ];
                                            $config = $statusConfig[$order->service_status] ?? ['bg' => 'bg-gray-100 dark:bg-gray-700', 'text' => 'text-gray-800 dark:text-gray-300', 'icon' => 'fas fa-question-circle'];
                                        @endphp
                                        <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold {{ $config['bg'] }} {{ $config['text'] }}">
                                            <i class="{{ $config['icon'] }} mr-1"></i>
                                            {{ $order->service_status }}
                                        </span>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600 dark:text-gray-300">
                                        <div class="flex items-center">
                                            <i class="fas fa-calendar-alt text-gray-400 mr-2"></i>
                                            {{ $order->created_at->format('d M Y') }}
                                        </div>
                                        <div class="text-xs text-gray-500 dark:text-gray-400">
                                            {{ $order->created_at->format('H:i A') }}
                                        </div>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600 dark:text-gray-300">
                                        <div class="flex items-center">
                                            <i class="fas fa-calendar-alt text-gray-400 mr-2"></i>
                                            {{ $order->expired_at->format('d M Y') }}
                                        </div>
                                        <div class="text-xs text-gray-500 dark:text-gray-400">
                                            {{ $order->expired_at->format('H:i A') }}
                                        </div>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <div class="text-sm text-gray-600 dark:text-gray-300 max-w-xs">
                                            <div class="bg-gray-50 dark:bg-gray-700 rounded-lg p-2 text-xs font-mono">
                                                {!! $order->service_comments !!}
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                            @empty
                                <tr id="noOrdersRow">
                                    <td colspan="7" class="px-6 py-16 text-center">
                                        <div class="flex flex-col items-center">
                                            <div class="w-24 h-24 bg-gradient-to-r from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-600 rounded-full flex items-center justify-center mb-6">
                                                <i class="fas fa-shopping-cart text-gray-400 text-3xl"></i>
                                            </div>
                                            <h3 class="text-xl font-semibold text-gray-600 dark:text-gray-400 mb-2">No Orders Found</h3>
                                            <p class="text-gray-500 dark:text-gray-500 mb-6">You haven't placed any orders yet.</p>
                                            <a href="{{ route('category.imei') }}" class="inline-flex items-center px-6 py-3 bg-gradient-to-r from-blue-500 to-purple-600 text-white rounded-xl hover:from-blue-600 hover:to-purple-700 transition-all duration-300">
                                                <i class="fas fa-plus mr-2"></i>
                                                Place Your First Order
                                            </a>
                                        </div>
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>

            <!-- Enhanced Pagination -->
            @if($orders->hasPages())
                <div class="mt-8">
                    <div class="bg-white/80 dark:bg-gray-800/80 backdrop-blur-lg rounded-2xl shadow-xl border border-white/20 dark:border-gray-700/50 p-6">
                        {{ $orders->links() }}
                    </div>
                </div>
            @endif
        </div>
    </div>

    <!-- Order Details -->
    <div id="orderDetailsModal" class="fixed inset-0 bg-black bg-opacity-50 backdrop-blur-sm z-50 hidden flex items-center justify-center p-4">
        <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-2xl max-w-2xl w-full max-h-[90vh] overflow-y-auto">
            <div class="flex items-center justify-between p-6 border-b border-gray-200 dark:border-gray-700">
                <div class="flex items-center">
                    <div class="w-12 h-12 bg-gradient-to-r from-blue-500 to-purple-600 rounded-xl flex items-center justify-center mr-4">
                        <i class="fas fa-info-circle text-white text-lg"></i>
                    </div>
                    <h2 class="text-2xl font-bold text-gray-900 dark:text-white">Order Details</h2>
                </div>
                <button onclick="closeOrderDetails()" class="p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors duration-200">
                    <i class="fas fa-times text-gray-500 dark:text-gray-400 text-lg"></i>
                </button>
            </div>

            <div class="p-6" id="orderDetailsContent">
            </div>

            <div class="flex items-center justify-between p-6 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-700/50">
                <button onclick="takeScreenshot()" class="flex items-center px-4 py-2 bg-gradient-to-r from-green-500 to-emerald-600 hover:from-green-600 hover:to-emerald-700 text-white rounded-lg transition-all duration-300 transform hover:scale-105 shadow-lg">
                    <i class="fas fa-camera mr-2"></i>
                    Take Screenshot
                </button>
                <button onclick="closeOrderDetails()" class="px-4 py-2 bg-gray-500 hover:bg-gray-600 text-white rounded-lg transition-colors duration-200">
                    Close
                </button>
            </div>
        </div>
    </div>
@endsection

@push('script')
    <script>
        function showOrderDetails(serviceName, expiryTimestamp, status, date, price, quantity, username, password, comments) {
            const modal = document.getElementById('orderDetailsModal');
            const content = document.getElementById('orderDetailsContent');
            
            content.innerHTML = `
                <div class="space-y-6">
                    <!-- Order Header -->
                    <div class="bg-gradient-to-r from-blue-50 to-purple-50 dark:from-blue-900/20 dark:to-purple-900/20 rounded-xl p-6">
                        <div class="flex items-center justify-between mb-4">
                            <h3 class="text-xl font-bold text-gray-900 dark:text-white">${serviceName}</h3>
                        </div>
                        <div class="grid grid-cols-2 gap-4">
                            <div>
                                <p class="text-sm text-gray-600 dark:text-gray-400">Expires In</p>
                                <p id="expiresInTimer" class="font-semibold text-gray-900 dark:text-white">Loading...</p>
                            </div>
                            <div>
                                <p class="text-sm text-gray-600 dark:text-gray-400">Status</p>
                                <p class="font-semibold text-gray-900 dark:text-white">${status}</p>
                            </div>
                        </div>
                    </div>

                    <!-- Order Details -->
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                        <div class="bg-green-50 dark:bg-green-900/20 rounded-xl p-4" x-data="{ showPrice: false }">
                            <div class="flex items-center mb-2">
                                <i class="fas fa-dollar-sign text-green-600 dark:text-green-400 mr-2"></i>
                                <span class="text-sm text-gray-600 dark:text-gray-400">Total Price</span>
                                <button @click="showPrice = !showPrice" class="ml-auto text-green-600 dark:text-green-400 focus:outline-none">
                                    <i :class="showPrice ? 'fas fa-eye-slash' : 'fas fa-eye'"></i>
                                </button>
                            </div>
                            <p class="text-2xl font-bold text-green-600 dark:text-green-400">
                                <span x-show="showPrice" x-transition>${price}</span>
                                <span x-show="!showPrice" x-transition>****</span>
                            </p>
                        </div>
                        <div class="bg-blue-50 dark:bg-blue-900/20 rounded-xl p-4">
                            <div class="flex items-center mb-2">
                                <i class="fas fa-sort-numeric-up text-blue-600 dark:text-blue-400 mr-2"></i>
                                <span class="text-sm text-gray-600 dark:text-gray-400">Quantity</span>
                            </div>
                            <p class="text-2xl font-bold text-blue-600 dark:text-blue-400">${quantity}</p>
                        </div>
                        <div class="bg-purple-50 dark:bg-purple-900/20 rounded-xl p-4">
                            <div class="flex items-center mb-2">
                                <i class="fas fa-calendar text-purple-600 dark:text-purple-400 mr-2"></i>
                                <span class="text-sm text-gray-600 dark:text-gray-400">Order Date</span>
                            </div>
                            <p class="text-sm font-bold text-purple-600 dark:text-purple-400">${date}</p>
                        </div>
                    </div>

                    <div class="bg-gray-50 dark:bg-gray-700/50 rounded-xl p-6">
                        <div class="bg-white dark:bg-gray-800 rounded-lg p-4 border border-gray-200 dark:border-gray-600">
                            <p>Username: <span id="tool-username">${username}</span></p>
                            <p>Password: <span id="tool-password">${password}</span></p>
                        </div>
                    </div>

                    <!-- Service Comments/Code -->
                    <div class="bg-gray-50 dark:bg-gray-700/50 rounded-xl p-6">
                        <div class="flex items-center mb-4">
                            <i class="fas fa-code text-gray-600 dark:text-gray-400 mr-2"></i>
                            <h4 class="text-lg font-semibold text-gray-900 dark:text-white">Service Details</h4>
                        </div>
                        <div class="bg-white dark:bg-gray-800 rounded-lg p-4 border border-gray-200 dark:border-gray-600">
                            <pre class="text-sm text-gray-700 dark:text-gray-300 whitespace-pre-wrap font-mono">${comments}</pre>
                        </div>
                    </div>
                </div>
            `;
            
            modal.classList.remove('hidden');
            document.body.style.overflow = 'hidden';

            // Countdown timer logic
            const expiresInTimer = document.getElementById('expiresInTimer');

            function updateTimer() {
                const now = new Date().getTime();
                const distance = expiryTimestamp - now;

                if (distance < 0) {
                    expiresInTimer.textContent = "Expired";
                    clearInterval(timerInterval);
                    return;
                }

                const days = Math.floor(distance / (1000 * 60 * 60 * 24));
                const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
                const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
                const seconds = Math.floor((distance % (1000 * 60)) / 1000);

                expiresInTimer.textContent = 
                    `${days}d ${hours}h ${minutes}m ${seconds}s`;
            }

            updateTimer(); // initial call
            const timerInterval = setInterval(updateTimer, 1000);
        }

        function closeOrderDetails() {
            const modal = document.getElementById('orderDetailsModal');
            modal.classList.add('hidden');
            document.body.style.overflow = 'auto';
        }

        function takeScreenshot() {
            const modal = document.getElementById('orderDetailsModal');
            const content = modal.querySelector('.bg-white');
            
            // Use html2canvas library for screenshot
            if (typeof html2canvas !== 'undefined') {
                html2canvas(content, {
                    backgroundColor: '#ffffff',
                    scale: 2,
                    useCORS: true
                }).then(canvas => {
                    // Create download link
                    const link = document.createElement('a');
                    link.download = `order-details-${Date.now()}.png`;
                    link.href = canvas.toDataURL();
                    link.click();
                });
            } else {
                // Fallback: Simple screenshot using browser API
                if (navigator.mediaDevices && navigator.mediaDevices.getDisplayMedia) {
                    navigator.mediaDevices.getDisplayMedia({ video: true })
                        .then(stream => {
                            const video = document.createElement('video');
                            video.srcObject = stream;
                            video.play();
                            
                            video.addEventListener('loadedmetadata', () => {
                                const canvas = document.createElement('canvas');
                                canvas.width = video.videoWidth;
                                canvas.height = video.videoHeight;
                                const ctx = canvas.getContext('2d');
                                ctx.drawImage(video, 0, 0);
                                
                                const link = document.createElement('a');
                                link.download = `order-details-${Date.now()}.png`;
                                link.href = canvas.toDataURL();
                                link.click();
                                
                                stream.getTracks().forEach(track => track.stop());
                            });
                        })
                        .catch(err => {
                            alert('Screenshot functionality requires screen capture permission or html2canvas library.');
                        });
                } else {
                    alert('Screenshot functionality is not supported in this browser.');
                }
            }
        }

        // Close modal when clicking outside
        document.getElementById('orderDetailsModal').addEventListener('click', function(e) {
            if (e.target === this) {
                closeOrderDetails();
            }
        });

        // Close modal with Escape key
        document.addEventListener('keydown', function(e) {
            if (e.key === 'Escape') {
                closeOrderDetails();
            }
        });

        document.addEventListener('DOMContentLoaded', function() {
            const searchInput = document.getElementById('searchOrders');
            const statusFilter = document.getElementById('statusFilter');
            const orderRows = document.querySelectorAll('.order-row');
            const noOrdersRow = document.getElementById('noOrdersRow');

            function filterOrders() {
                const searchTerm = searchInput.value.toLowerCase();
                const selectedStatus = statusFilter.value;
                let visibleCount = 0;

                orderRows.forEach(row => {
                    const serviceName = row.querySelector('.service-name').textContent.toLowerCase();
                    const orderStatus = row.getAttribute('data-status');
                    
                    const matchesSearch = serviceName.includes(searchTerm);
                    const matchesStatus = selectedStatus === '' || orderStatus === selectedStatus;

                    if (matchesSearch && matchesStatus) {
                        row.style.display = 'table-row';
                        row.style.animation = 'fadeIn 0.3s ease-in-out';
                        visibleCount++;
                    } else {
                        row.style.display = 'none';
                    }
                });

                // Show/hide no results message
                if (noOrdersRow) {
                    noOrdersRow.style.display = visibleCount === 0 ? 'table-row' : 'none';
                }
            }

            searchInput.addEventListener('input', filterOrders);
            statusFilter.addEventListener('change', filterOrders);

            // Add fade-in animation
            const style = document.createElement('style');
            style.textContent = `
                @keyframes fadeIn {
                    from { opacity: 0; transform: translateY(10px); }
                    to { opacity: 1; transform: translateY(0); }
                }
            `;
            document.head.appendChild(style);
        });
    </script>

    <script>
    $(document).ready(function () {
        function fallbackCopyTextToClipboard(text, callback) {
        const textArea = document.createElement("textarea");
        textArea.value = text;
        // Avoid scrolling to bottom
        textArea.style.position = "fixed";
        textArea.style.top = "-9999px";
        document.body.appendChild(textArea);
        textArea.focus();
        textArea.select();

        try {
            const successful = document.execCommand('copy');
            document.body.removeChild(textArea);
            callback(successful);
        } catch (err) {
            document.body.removeChild(textArea);
            callback(false);
        }
        }

        function copyText(text, callback) {
        if (navigator.clipboard && navigator.clipboard.writeText) {
            navigator.clipboard.writeText(text).then(() => callback(true), () => callback(false));
        } else {
            fallbackCopyTextToClipboard(text, callback);
        }
        }

        // Delegated click handler
        $(document).on('click', '#tool-username, #tool-password', function () {
        const $el = $(this);
        const text = $.trim($el.text());

        copyText(text, function (success) {
            if (success) {
            $el.siblings('.copy-msg').remove();
            const $msg = $('<span class="copy-msg text-green-600 text-xs ml-2">Copied!</span>');
            $el.after($msg);
            setTimeout(() => $msg.remove(), 1500);
            } else {
            alert('Failed to copy. Please copy manually.');
            }
        });
        });

        // Set pointer cursor and tooltip
        $(document).on('mouseenter', '#tool-username, #tool-password', function () {
        $(this).css('cursor', 'pointer').attr('title', 'Click to copy');
        });
    });
    </script>

@endpush