@extends('website.layouts.app')

@section('content')

    @include('website.layouts.title_section')

    <section class="products-section py-5 bg-light">
        <div class="container my-md-4">

            <!-- Fancy Care Sections -->
            @foreach ($items as $category => $products)
            <section class="feed-cow-section mb-5">
                <div class="heading text-center mb-5">
                    <div class="heading text-uppercase animate__animated animate__fadeInDown text-center mb-4">{{ str_replace('_', ' ', $category) }}</div>
                </div>
                <div class="row g-4">
                    @foreach ($products as $item)
                    <div class="col-lg-4 col-md-6">
                        <div class="product-item h-100 card h-100 border-0 ">
                            <img src="{{ $item->image }}" alt="{{ $item->title }}" class="card-img-top rounded-top img-fluid" style="height: 250px; object-fit: cover;">
                            <div class="card-body d-flex flex-column justify-content-between">
                                <div>
                                    <h5 class="product-title fw-bold text-capitalize mb-2">{{ $item->title }}</h5>
                                    <p class="product-description text-muted fs-14 mb-3">{!! $item->description !!}</p>
                                </div>
                                <div>
                                    <div class="d-flex justify-content-between align-items-center mb-3">
                                        <div class="product-price">
                                            <span class="text-success fs-5 fw-bold">${{ number_format($item->price, 2) }}</span><br>
                                            <small class="text-muted">{{ $item->unit }}</small>
                                        </div>
                                        <div class="quantity-box d-flex align-items-center gap-2">
                                            <button type="button" class="quantity-button btn btn-outline-secondary btn-sm px-2" onclick="changeQuantity(this, -1)">
                                                <i class="bi bi-dash-lg"></i>
                                            </button>
                                            <input type="text" class="quantity-input" id="quantity" value="1" min="1">
                                            <button type="button" class="quantity-button btn btn-outline-secondary btn-sm px-2" onclick="changeQuantity(this, 1)">
                                                <i class="bi bi-plus-lg"></i>
                                            </button>
                                        </div>
                                    </div>
                                    <button 
                                        type="button" 
                                        class="btn btn-theme1 btn-md rounded-pill w-100 add-to-cart-btn shadow"
                                        data-product-id="{{ $item->id }}">
                                        <i class="bi bi-cart-plus me-1"></i> Add to Cart
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                    @endforeach
                </div>
            </section>
            @endforeach

        </div>
    </section>

    <script>
        function changeQuantity(button, amount) {
            const parent = button.closest('.quantity-box');
            const input = parent.querySelector('.quantity-input');
            let currentValue = parseInt(input.value);

            if (isNaN(currentValue)) currentValue = 1;

            currentValue += amount;
            if (currentValue < 1) currentValue = 1;

            input.value = currentValue;

            // Optional: disable minus button at 1
            const minusBtn = parent.querySelectorAll('.quantity-button')[0];
            minusBtn.disabled = currentValue <= 1;
        }

        document.addEventListener('DOMContentLoaded', function () {
            document.querySelectorAll('.quantity-input').forEach(input => {
                input.addEventListener('input', function () {
                    let value = parseInt(this.value);
                    if (isNaN(value) || value < 1) {
                        this.value = 1;
                    }

                    const minusBtn = this.closest('.quantity-box').querySelectorAll('.quantity-button')[0];
                    minusBtn.disabled = this.value <= 1;
                });

                // Initial check
                const minusBtn = input.closest('.quantity-box').querySelectorAll('.quantity-button')[0];
                minusBtn.disabled = parseInt(input.value) <= 1;
            });
        });
    </script>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            document.querySelectorAll('.add-to-cart-btn').forEach(btn => {
                btn.addEventListener('click', function () {
                    const productId = this.getAttribute('data-product-id');
                    const quantityInput = this.closest('.product-info')?.querySelector('.quantity-input');
                    const quantity = quantityInput ? parseInt(quantityInput.value) : 1;

                    if (!productId || quantity < 1) {
                        alert('Invalid product or quantity.');
                        return;
                    }

                    fetch("{{ route('cart.add') }}", {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': '{{ csrf_token() }}',
                        },
                        body: JSON.stringify({
                            product_id: productId,
                            quantity: quantity,
                        }),
                    })
                    .then(res => res.json())
                    .then(data => {
                        if (data.status == 0) {
                            alert(data.message);
                        } else {
                            // Update cart count display
                            const cartCountEl = document.getElementById('itemCount');
                            if (cartCountEl) {
                                cartCountEl.textContent = '( ' + data.cartCount + ' )';
                            }
                            alert(data.message);
                        }
                    })
                    .catch(err => {
                        console.error(err);
                        alert('Failed to add to cart.');
                    });
                });
            });
        });
    </script>

@endsection

@push('scripts')

@endpush