{% 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" 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">
                    <div class="inline-flex items-center px-3 py-1 bg-green-100 text-gray-600 rounded-full text-sm ">
                        <svg class="w-3 h-3 mr-1" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
                        </svg>
                        {{lang.translate('Owned')}}
                    </div>
                </div>
            {% else %}
                <!-- Purchase Button -->
                <div x-data="purchaseButton()" class="purchase-section relative z-10">
                    <button 
                        @click="showPurchaseModal = true"
                        class="inline-flex items-center px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800"
                    >
                        <svg class="w-4 h-4 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>
                        {{lang.translate('Buy Now')}} - {{currencyCode}}{{itemPrice}}
                    </button>

                    <!-- Purchase Modal -->
                    <div x-show="showPurchaseModal" 
                         x-cloak
                         class="fixed inset-0 z-50 overflow-y-auto"
                         @click.away="showPurchaseModal = false">
                        <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
                            <!-- Background overlay -->
                            <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" @click="showPurchaseModal = false"></div>

                            <!-- Modal -->
                            <div class="inline-block align-bottom bg-white dark:bg-gray-800 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
                                <div class="bg-white dark:bg-gray-800 px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                                    <div class="sm:flex sm:items-start">
                                        <div class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 dark:bg-blue-900 sm:mx-0 sm:h-10 sm:w-10">
                                            <svg class="h-6 w-6 text-blue-600 dark:text-blue-400" 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>
                                        </div>
                                        <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full">
                                            <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">
                                                {{lang.translate('Purchase Media')}}
                                            </h3>
                                            <div class="mt-4">
                                                <!-- Media Info -->
                                                <div class="flex items-center space-x-3 mb-4">
                                                    <div>
                                                        <h4 class="font-medium text-gray-900 dark:text-gray-100">{{item.name}}</h4>
                                                        <p class="text-sm text-gray-500 dark:text-gray-400">
                                                            {{lang.translate('By')}} {{item.artist.name ?? item.customer.name}}
                                                        </p>
                                                    </div>
                                                </div>

                                                <!-- Price Info -->
                                                <div class="bg-gray-50 dark:bg-gray-700 rounded-lg p-4 mb-4">
                                                    <div class="flex justify-between items-center">
                                                        <span class="text-sm text-gray-600 dark:text-gray-300">{{lang.translate('Price')}}</span>
                                                        <span class="text-lg font-semibold text-gray-900 dark:text-gray-100">{{currencyCode}}{{itemPrice}}</span>
                                                    </div>
                                                </div>

                                                <!-- Payment Methods -->
                                                <div class="mb-4">
                                                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                                        {{lang.translate('Payment Method')}}
                                                    </label>
                                                    <div class="space-y-2">
                                                        <label class="flex items-center">
                                                            <input type="radio" name="payment_method" value="paypal" x-model="paymentMethod" class="h-4 w-4 text-blue-600" checked>
                                                            <span class="ml-2 flex items-center">
                                                                <img src="/uploads/img/payment_methods/paypal.png" class="w-6 h-6 mr-2" />
                                                                PayPal
                                                            </span>
                                                        </label>
                                                    </div>
                                                </div>

                                                <!-- Terms -->
                                                <div class="mb-4">
                                                    <label class="flex items-start">
                                                        <input type="checkbox" x-model="termsAccepted" class="h-4 w-4 text-blue-600 mt-1">
                                                        <span class="ml-2 text-sm text-gray-600 dark:text-gray-300">
                                                            {{lang.translate('I agree to the')}} 
                                                            <a href="/page/terms" class="text-blue-600 hover:text-blue-500" target="_blank">{{lang.translate('Terms of Service')}}</a> 
                                                            {{lang.translate('and')}} 
                                                            <a href="/page/privacy" class="text-blue-600 hover:text-blue-500" target="_blank">{{lang.translate('Privacy Policy')}}</a>
                                                        </span>
                                                    </label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="bg-gray-50 dark:bg-gray-700 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
                                    <button 
                                        @click="processPurchase()"
                                        :disabled="!termsAccepted || processing"
                                        :class="{'opacity-50 cursor-not-allowed': !termsAccepted || processing}"
                                        class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm disabled:opacity-50 disabled:cursor-not-allowed"
                                    >
                                        <span x-show="!processing">{{lang.translate('Purchase Now')}}</span>
                                        <span x-show="processing" class="flex items-center">
                                            <svg class="animate-spin -ml-1 mr-2 h-4 w-4 text-white" fill="none" viewBox="0 0 24 24">
                                                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                                                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                                            </svg>
                                            {{lang.translate('Processing...')}}
                                        </span>
                                    </button>
                                    <button 
                                        @click="showPurchaseModal = false"
                                        :disabled="processing"
                                        class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 dark:border-gray-600 shadow-sm px-4 py-2 bg-white dark:bg-gray-800 text-base font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
                                    >
                                        {{lang.translate('Cancel')}}
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            {% endif %}
        {% else %}
            <!-- Not logged in - Show login prompt -->
            <div class="inline-flex items-center px-4 py-2 bg-gray-100 text-gray-700 rounded-lg dark:bg-gray-700 dark:text-gray-300">
                <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
                </svg>
                <a href="/customer/login" class="ajax-load">{{lang.translate('Login to Purchase')}} - {{currencyCode}}{{itemPrice}}</a>
            </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>