{% extends 'partials/base.html' %}
{% load humanize %}
{% block content %}

<div class="p-3 sm:p-4 lg:p-6 pb-32 overflow-y-auto h-full text-xs sm:text-sm">
    <div class="bg-white dark:bg-gray-900 min-h-screen text-gray-800 dark:text-gray-100">

    <!-- Breadcrumb -->
    <div class="max-w-7xl mx-auto px-4 pt-6 pb-2">
        <nav class="flex items-center space-x-2 text-sm">
            <a href="/marketplace" class="text-blue-600 hover:underline">Marketplace</a>
            <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
            <span>{{ log.category }}</span>
            <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
            <span class="text-blue-600 font-medium text-sm sm:text-base">
                {{ log.log }}
            </span>
        </nav>
    </div>

    <div class="max-w-4xl mx-auto px-4 pb-20">
        <!-- Purchase Message -->
        <div class="bg-green-50 dark:bg-green-900 border border-green-200 dark:border-green-800 rounded-lg p-6 mb-6">
            <div class="flex items-center space-x-4">
                <div class="w-10 h-10 bg-green-100 dark:bg-green-800 rounded-full flex items-center justify-center">
                    <svg class="w-6 h-6 text-green-600 dark:text-green-300" fill="none" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4"></path></svg>
                </div>
                <div>
                    <h2 class="text-xl font-bold text-green-700 dark:text-green-300">Purchase Successful</h2>
                    <p class="text-sm text-green-600 dark:text-green-400">Your account details are below</p>
                </div>
            </div>
        </div>

        <!-- Product Card -->
        <div class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-6 space-y-6">
            <div class="flex justify-between items-start">
                <div>
                    <div class="inline-block px-3 py-1 text-xs rounded-full bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300 mb-2">
                        {{ log.category }}
                    </div>
                    <h1 class="text-lg sm:text-xl font-semibold text-gray-900 dark:text-white">
                        {{ log.log }}
                    </h1>
                    <p class="text-sm text-gray-600 dark:text-gray-400">Premium product ready to use</p>
                </div>
                <div class="text-right">
                    <div class="text-2xl font-bold text-blue-600 dark:text-blue-400">₦{{ log.amount|floatformat:2|intcomma }}</div>
                    <p class="text-xs text-gray-500 dark:text-gray-400">Total Paid</p>
                </div>
            </div>

            
            <!-- Account Details -->
            <div class="bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-md p-4">
                <div class="flex items-center justify-between mb-2">
                    <h3 class="font-medium text-sm">Purchased Details</h3>
                    <button onclick="copyToClipboard(`{{ log.info }}`)" class="text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300 text-sm">
                        📋 Copy All
                    </button>
                </div>
                <textarea id="logs" readonly="" rows="5" class="w-full text-sm font-mono rounded-md bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 text-gray-800 dark:text-gray-100 p-3 resize-none">
                {% for i in logs %}
                    {{ i.log }}
                {% endfor %}
                </textarea>
                <p class="text-xs text-gray-500 mt-2">Click copy to quickly copy your credentials.</p>
            </div>

            <!-- Warning -->
            <div class="bg-yellow-50 dark:bg-yellow-900 border border-yellow-200 dark:border-yellow-700 rounded-md p-4 text-sm">
                <h4 class="font-semibold text-yellow-800 dark:text-yellow-300 mb-2">⚠️ Important</h4>
                <ul class="list-disc list-inside space-y-1 text-yellow-700 dark:text-yellow-200">
                    <li>Store your account details securely</li>
                    <li>Do not share with anyone</li>
                    <li>Reach out to support if any issue arises</li>
                </ul>
            </div>

            <!-- Summary -->
            <div class="border-t pt-4">
                <h3 class="font-semibold text-lg text-gray-800 dark:text-gray-100 mb-4">Order Summary</h3>
                <div class="text-sm space-y-2">
                    <div class="flex justify-between"><span>Product</span><span>{{ log.log }}</span></div>
                    <div class="flex justify-between"><span>Category</span><span>{{ log.category }}</span></div>
                    <div class="flex justify-between"><span>Quantity</span><span>{{ log.qty }}</span></div>
                    <div class="flex justify-between"><span>Purchased</span><span>{{ log.date }}</span></div>
                    <div class="flex justify-between font-bold border-t pt-3">
                        <span>Total</span>
                        <span class="text-blue-600 dark:text-blue-400">₦{{ log.amount }}</span>
                    </div>
                </div>
            </div>

            <!-- Actions -->
            <div class="flex flex-col sm:flex-row gap-3 mt-6">
                <button id="downloadLogs" class="w-full sm:w-auto inline-flex items-center justify-center px-5 py-3 text-white bg-blue-600 hover:bg-blue-700 rounded-lg font-medium">
                    Download Logs
                </button>
                
                <a href="/marketplace" class="w-full sm:w-auto inline-flex items-center justify-center px-5 py-3 text-white bg-blue-600 hover:bg-blue-700 rounded-lg font-medium">
                    🛍️ Shop More
                </a>
                <a href="#" class="w-full sm:w-auto inline-flex items-center justify-center px-5 py-3 bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-700 rounded-lg font-medium">
                    ❓ Get Help
                </a>
            </div>
            

        </div>
    </div>
    
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    
    <script>
        $(function () {
            $('#downloadLogs').on('click', function () {
                var text = $('#logs').val();
                var filename = 'logs.txt';
        
                var blob = new Blob([text], { type: 'text/plain;charset=utf-8;' });
        
                var link = document.createElement('a');
                link.href = URL.createObjectURL(blob);
                link.download = filename;
        
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);
            });
        });
    </script>

    <script>
    function copyToClipboard(text) {
        navigator.clipboard.writeText(text).then(() => {
            Swal.fire({
                toast: true,
                position: 'top-end',
                icon: 'success',
                title: 'Copied!',
                showConfirmButton: false,
                timer: 2000
            });
        }).catch(() => {
            Swal.fire('Failed to copy!', '', 'error');
        });
    }
    </script>

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

{% endblock content %}