@extends('layout')

@section('content')
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<div id="cart-pg-wrapper">
    <div class="cart-pg-container">

        <div class="cart-pg-main-card">

            <div class="cart-pg-header">
                <span>PRODUCT</span>
                <span>PRICE</span>
                <span>QUANTITY</span>
                <span>SUBTOTAL</span>
            </div>

            @foreach([1,2,3,4] as $i)
            <div class="cart-pg-item-card {{ $i==4 ? 'active' : '' }}">
                <div class="cart-pg-product-info">
                    <img src="{{ asset('assets/boonthi.png') }}">
                    <div class="cart-pg-details">
                        <h3>Kaara Boonthi Mixture</h3>
                        <p>500 Grams</p>
                    </div>
                </div>

                <div class="cart-pg-price">₹100.00</div>

                <div class="cart-pg-qty-box">
                    <button class="cart-pg-qty-btn" onclick="updateCartQty(this,-1)">−</button>
                    <span class="cart-pg-qty-val">2</span>
                    <button class="cart-pg-qty-btn" onclick="updateCartQty(this,1)">+</button>
                </div>

                <div class="cart-pg-subtotal">₹200.00</div>

                <div class="cart-pg-remove">×</div>
            </div>
            @endforeach

        </div>

        <div class="cart-pg-summary-card">
            <h2>Cart Total</h2>

            <div class="cart-pg-summary-row">
                <span>Subtotal:</span>
                <span>₹2000.00</span>
            </div>

            <div class="cart-pg-summary-row">
                <span>Discount:</span>
                <span class="discount">-1000</span>
            </div>

            <div class="cart-pg-summary-row total">
                <span>Total:</span>
                <span>₹1000.00</span>
            </div>

            <button class="cart-pg-checkout-btn">Proceed to checkout</button>
        </div>

    </div>
</div>

<script>
function updateQty(btn, change) {
    let val = btn.parentElement.querySelector('.qty-val');
    let qty = Math.max(1, parseInt(val.innerText) + change);
    val.innerText = qty;
}
</script>
@endsection