ECOMMERCE/resources/views/components/shop/add-to-cart.blade.php

@props([
    'quantity' => 1,
    'item_reference_id' => null,
    'locationId' => session('location_id', 22),
    'buttonText' => 'Add to cart',
    'buttonClass' => 'btn-dark',
])

<div class="d-flex gap-3 pb-3 pb-lg-4 mb-3">
    <div class="count-input flex-shrink-0">
        <button type="button" class="btn btn-icon btn-lg" data-decrement aria-label="Decrement quantity"
            onclick="decrementQuantity(this)">
            <i class="ci-minus"></i>
        </button>
        <input type="number" class="form-control form-control-lg" min="1" value="{{ $quantity }}" readonly>
        <button type="button" class="btn btn-icon btn-lg" data-increment aria-label="Increment quantity"
            onclick="incrementQuantity(this)">
            <i class="ci-plus"></i>
        </button>
    </div>
    <button type="button" class="btn btn-lg {{ $buttonClass }} w-100" onclick="addToCartItem(this)"
        data-item-reference-id="{{ $item_reference_id }}" data-location-id="{{ $locationId }}"
        data-quantity="{{ $quantity }}">
        <span class="button-text">{{ $buttonText }}</span>
        <span class="loading-text" style="display: none;">
            <i class="ci-loading animate-spin"></i> Adding...
        </span>
    </button>
</div>

<script>
    function incrementQuantity(button) {
        const input = button.parentElement.querySelector('input[type="number"]');
        input.value = parseInt(input.value);
        updateAddToCartButton(button);
    }

    function decrementQuantity(button) {
        const input = button.parentElement.querySelector('input[type="number"]');
        const currentValue = parseInt(input.value);
        if (currentValue > 1) {
            input.value = currentValue;
        }
        updateAddToCartButton(button);
    }

    function updateAddToCartButton(button) {
        const container = button.closest('.d-flex');
        const addToCartBtn = container.querySelector('button[onclick="addToCartItem(this)"]');
        const input = container.querySelector('input[type="number"]');

        if (addToCartBtn && input) {
            addToCartBtn.dataset.quantity = input.value;
        }
    }

    async function addToCartItem(button) {
        const itemReferenceId = button.dataset.itemReferenceId;
        const locationId = button.dataset.locationId;
        const quantity = button.dataset.quantity || button.parentElement.querySelector('input[type="number"]')
        .value;

        if (!itemReferenceId) {
            console.error('Item Reference ID is required');
            return;
        }

        const buttonText = button.querySelector('.button-text');
        const loadingText = button.querySelector('.loading-text');

        // Show loading state
        button.disabled = true;
        if (buttonText) buttonText.style.display = 'none';
        if (loadingText) loadingText.style.display = 'inline';

        try {
            const token = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
            const response = await fetch('{{ route('cart.add') }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': token,
                    'Accept': 'application/json'
                },
                body: JSON.stringify({
                    item_reference_id: itemReferenceId,
                    location_id: locationId,
                    qty: quantity
                })
            });

            if (response.ok) {
                const result = await response.json();
                if (result.success) {
                    // Update cart count in header
                    updateCartCount();
                    
                    // Redirect to cart page on success
                    window.location.href = '{{ route('cart.index') }}';
                }
            } else {
                const error = await response.json();
                console.error('Error adding to cart:', error);
                // You could show an error message here
            }
        } catch (error) {
            console.error('Network error:', error);
            // You could show an error message here
        } finally {
            // Restore button state
            button.disabled = false;
            if (buttonText) buttonText.style.display = 'inline';
            if (loadingText) loadingText.style.display = 'none';
        }
    }
    
    // Function to update cart count in header
    async function updateCartCount() {
        try {
            const response = await fetch('{{ route('cart.count') }}', {
                method: 'GET',
                headers: {
                    'Content-Type': 'application/json',
                    'Accept': 'application/json'
                }
            });
            
            if (response.ok) {
                const result = await response.json();
                const cartCountElements = document.querySelectorAll('.cart-count');
                cartCountElements.forEach(element => {
                    element.textContent = result.count;
                });
            }
        } catch (error) {
            console.error('Error updating cart count:', error);
        }
    }
</script>