{% set customer = app.customer_auth %}

<!-- Buy Button Component -->
{% set itemPrice = item.price|number_format(2) %}
{% set currencyCode = item.currency_code ?? 'USD' %}

<div class="buy-button-container "  x-data="{{item.price}} > 0 ? purchaseButton() : {}" data-media-id="{{item.media_id}}">
    {% if item.price > 0 and item.is_premium %}
        
        {% if customer %}
            <!-- Check if already purchased -->
            {% set hasPurchased = app.checkMediaAccess(item.media_id) %}
            
            {% if hasPurchased %}
                <!-- Already Purchased - Show Access Button -->
                <div class="flex items-center gap-2">
                    <a href="/studio/customer-purchases" 
                       class="ajax-load inline-flex items-center p-0 ">
                        <svg class="w-8 h-8 mr-2" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
                        </svg>
                        <span class="tooltiptext  text-xs">{{lang.translate('Access Purchased Content')}}</span>
                    </a>
                </div>
            {% else %}
                <!-- Purchase Button -->
                <div class="purchase-section relative z-10">
                    <button 
                        @click="loadModal('/purchase/modal/{{item.media_id}}')"
                        class="inline-flex items-center p-0 text-gray-500 dark:text-white font-medium rounded-lg transition-colors duration-200 outline-none "
                    >
                        <svg class="w-6 h-6 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"></path>
                        </svg>
                        <span class="tooltiptext  text-xs">{{lang.translate('Buy Now')}}  {{itemPrice}}</span>
                    </button>
                </div>
            {% endif %}
        {% else %}
            <!-- Not logged in - Show login prompt -->
            <div class="purchase-section relative z-10">
                <span  x-on:click="jQuery('#login-popup').removeClass('hidden')" class="cursor-pointer text-gray-600 dark:text-gray-300  inline-flex items-center p-2 rounded-lg transition-colors duration-200">
                    <svg class="w-6 h-6 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"></path>
                    </svg>
                    <span class="tooltiptext  text-xs">{{lang.translate('Buy Now')}}  {{itemPrice}}</span>
                </span>
            </div>
        {% endif %}
            
    {% else %}
        <!-- Free Content -->
        <div class="inline-flex items-center px-4 py-2 bg-green-100 text-green-800 rounded-lg dark:bg-green-800 dark:text-green-100">
            <svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
            </svg>
            {{lang.translate('Free')}}
        </div>
    {% endif %}
</div>

<script>
function purchaseButton() {
    return {
        showPurchaseModal: false,
        paymentMethod: 'paypal',
        termsAccepted: false,
        processing: false,
        
        async processPurchase() {
            if (!this.termsAccepted) {
                alert('{{lang.translate("Please accept the terms and conditions")}}');
                return;
            }
            
            this.processing = true;
            
            try {
                // Create purchase order
                const response = await fetch('/api/purchases/create-order', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({
                        media_id: {{item.media_id}},
                        amount: {{item.price}},
                        currency_code: '{{currencyCode}}',
                        payment_method: this.paymentMethod,
                        return_url: window.location.origin + '/payment/success',
                        cancel_url: window.location.origin + '/payment/cancel'
                    })
                });
                
                const result = await response.json();
                
                if (result.success) {
                    if (result.approval_url) {
                        // Redirect to PayPal for approval
                        window.location.href = result.approval_url;
                    } else if (result.invoice_code) {
                        // Redirect to invoice page
                        window.location.href = '/purchase-invoice/' + result.invoice_code;
                    } else {
                        alert('{{lang.translate("Purchase order created successfully")}}');
                        this.showPurchaseModal = false;
                        window.location.reload();
                    }
                } else {
                    alert(result.error || '{{lang.translate("Failed to create purchase order")}}');
                }
            } catch (error) {
                console.error('Purchase error:', error);
                alert('{{lang.translate("An error occurred while processing your purchase")}}');
            } finally {
                this.processing = false;
            }
        }
    }
}
</script>

<style>
[x-cloak] {
    display: none !important;
}
</style>