{% 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 pt-2"  x-data="{{item.price}} > 0 ? purchaseButton({{item.media_id}}, {{item.price}}) : {}" 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 px-4 py-2 bg-gradient-to-r from-green-600 to-emerald-600 hover:from-green-700 hover:to-emerald-700 text-white text-sm font-medium rounded-lg transition-all duration-200 shadow-md hover:shadow-lg transform hover:-translate-y-0.5">
                        <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 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"/>
                        </svg>
                        {{lang.translate('Download')}}
                    </a>
                </div>
            {% endif %}
            
            <!-- Purchase Modal -->
            <div  
                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="processing = true; initiatePurchase({{item.media_id}}, {{item.price}}, paymentMethod, termsAccepted); processing = false;"
                                :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="closePurchaseModal()"
                                :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>
        {% 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>