@props([
    'product',
    'fullWidth' => false,
    'iconClass' => 'w-5 h-5',
    'textClass' => 'text-sm font-medium',
    'buttonClass' => 'w-full bg-[#2C5530] text-white py-3 rounded-lg font-medium transition-all duration-300 hover:bg-[#2C5530]/90 transform hover:scale-[1.02] flex items-center justify-center gap-2',
    'showQuantitySelector' => false,
])

@php
    $iconClass = $iconClass ?? 'w-5 h-5';
    $textClass = $textClass ?? 'text-sm font-medium';
@endphp

<meta name="csrf-token" content="{{ csrf_token() }}">

<div class="space-y-4">
    <button
        type="button"
        id="addToCartBtn"
        class="{{ $buttonClass }}"
        onclick="handleAddToCartWithWeight({{ $product->id }}, {{ $product->is_online_orderable ? 'true' : 'false' }}, {{ $showQuantitySelector ? 'true' : 'false' }})"
    >
        <svg xmlns="http://www.w3.org/2000/svg" class="{{ $iconClass }}" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z" />
        </svg>
        <span class="{{ $textClass }}">Sepete Ekle</span>
    </button>
</div>

<script>
function handleAddToCartWithWeight(productId, isOnlineOrderable, hasQuantitySelector) {
    if (!isOnlineOrderable) {
        Swal.fire({
            title: 'Uyarı!',
            text: 'Bu ürün şu anda online siparişe kapalıdır.',
            icon: 'warning',
            confirmButtonText: 'Tamam',
            confirmButtonColor: '#3085d6'
        });
        return;
    }
    
    let quantity = 1;
    let weight = 1.0;
    
    // Get selected weight
    if (document.getElementById('selectedWeight')) {
        weight = parseFloat(document.getElementById('selectedWeight').value);
    }
    
    if (hasQuantitySelector && document.getElementById('quantityValue')) {
        quantity = parseInt(document.getElementById('quantityValue').textContent);
    }
    
    addToCartWithWeight(productId, quantity, weight);
}

function addToCartWithWeight(productId, quantity, weight) {
    const button = document.getElementById('addToCartBtn');
    const originalContent = button.innerHTML;
    const token = document.querySelector('meta[name="csrf-token"]')?.content;

    if (!token) {
        alert('CSRF token bulunamadı. Lütfen sayfayı yenileyin.');
        return;
    }

    button.disabled = true;
    button.innerHTML = `
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 animate-spin" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
        </svg>
        <span class="text-base font-medium">Ekleniyor...</span>
    `;

    fetch(`/cart/add/${productId}`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': token,
            'Accept': 'application/json'
        },
        body: JSON.stringify({ 
            quantity: quantity,
            weight: weight
        })
    })
    .then(response => {
        if (!response.ok) {
            throw new Error('Sunucu hatası oluştu');
        }
        return response.json();
    })
    .then(data => {
        if (data.error) {
            throw new Error(data.error);
        }

        // Animate cart icon
        const cartIcon = document.querySelector('#cart-icon');
        if (cartIcon) {
            cartIcon.classList.add('scale-125');
            setTimeout(() => cartIcon.classList.remove('scale-125'), 200);
        }

        // Update cart count
        const cartCount = document.querySelector('#cart-count');
        if (cartCount) {
            cartCount.textContent = data.cart_count;
            cartCount.classList.remove('hidden');
        }
        
        // GA4: Track add_to_cart event
        if (window.dataLayer) {
            window.dataLayer.push({
                event: 'add_to_cart',
                ecommerce: {
                    currency: 'TRY',
                    value: parseFloat(data.product.price) * parseFloat(weight) * parseInt(quantity),
                    items: [{
                        item_id: String(data.product.id),
                        item_name: data.product.name,
                        affiliation: 'Serap Gerebiç',
                        currency: 'TRY',
                        item_brand: 'Serap Gerebiç',
                        item_category: data.product.category || '',
                        price: parseFloat(data.product.price),
                        quantity: parseInt(quantity),
                        item_variant: weight + 'kg'
                    }]
                }
            });
        }
        
        // Show success message
        Swal.fire({
            title: 'Başarılı!',
            text: 'Ürün sepete eklendi.',
            icon: 'success',
            confirmButtonText: 'Tamam',
            confirmButtonColor: '#3085d6'
        });
    })
    .catch(error => {
        console.error('Sepete ekleme hatası:', error);
        Swal.fire({
            title: 'Hata!',
            text: error.message || 'Ürün sepete eklenirken bir hata oluştu',
            icon: 'error',
            confirmButtonText: 'Tamam',
            confirmButtonColor: '#3085d6'
        });
    })
    .finally(() => {
        button.disabled = false;
        button.innerHTML = originalContent;
    });
}
</script>