@extends('layouts.store')

@section('title', 'Cart — Meatworx')

@section('content')
<section class="mw-inner-hero">
    <div class="container mw-inner-hero-inner">
        <div class="mw-inner-hero-copy">
            <h1>Cart</h1>
            <p class="mw-inner-hero-script">Fresh, Safe, Vacumm Packed</p>
        </div>
        <span class="mw-inner-hero-meat" aria-hidden="true">Meat</span>
    </div>
</section>

<section class="mw-cart-page">
    <div class="container">
        @if(count($items))
            <div class="mw-cart-layout">
                <div class="mw-cart-main">
                    <form action="{{ route('cart.update') }}" method="POST" id="cart-update-form">
                        @csrf
                        <div class="mw-cart-table-wrap">
                            <table class="mw-cart-table">
                                <thead>
                                    <tr>
                                        <th>Product</th>
                                        <th>Price</th>
                                        <th>Quantity</th>
                                        <th>Subtotal</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($items as $item)
                                        <tr>
                                            <td class="mw-cart-product">
                                                <button type="button" class="mw-cart-remove" data-id="{{ $item['product_id'] }}" aria-label="Remove">×</button>
                                                <img src="{{ $item['image'] }}" alt=""
                                                     onerror="this.src='{{ asset('images/placeholder-product.svg') }}'">
                                                <div>
                                                    <a href="{{ route('product.show', $item['slug']) }}">{{ $item['name'] }}</a>
                                                    <span class="mw-cart-points">Points: {{ (int) $item['qty'] * 100 }}</span>
                                                </div>
                                            </td>
                                            <td>₹{{ number_format($item['price'], 2) }}</td>
                                            <td>
                                                <input class="mw-cart-qty" type="number"
                                                       name="qty[{{ $item['product_id'] }}]"
                                                       value="{{ $item['qty'] }}" min="0" max="50">
                                            </td>
                                            <td class="mw-cart-line">₹{{ number_format($item['price'] * $item['qty'], 2) }}</td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                            <div class="mw-cart-actions">
                                <button class="mw-btn mw-btn-soft" type="submit">Update Cart</button>
                            </div>
                        </div>
                    </form>

                    <div class="mw-coupon-box">
                        @if($coupon)
                            <p class="mw-coupon-applied">{{ $coupon->code }} applied — {{ $coupon->label() }}. You save ₹{{ number_format($discount, 2) }}.</p>
                            <form action="{{ route('cart.coupon.remove') }}" method="POST">
                                @csrf @method('DELETE')
                                <button class="mw-btn mw-btn-soft" type="submit">Remove Coupon</button>
                            </form>
                        @else
                            @if(!empty($couponNotice))
                                <p class="mw-form-error">{{ $couponNotice }}</p>
                            @endif
                            <form action="{{ route('cart.coupon') }}" method="POST">
                                @csrf
                                <input type="text" name="code" value="{{ old('code') }}" placeholder="Coupon code" required maxlength="40">
                                <button class="mw-btn" type="submit">Apply Coupon</button>
                            </form>
                        @endif
                    </div>
                </div>

                <aside class="mw-cart-totals">
                    <h3>Cart Totals</h3>
                    <div class="mw-cart-total-row">
                        <span>Subtotal</span>
                        <strong>₹{{ number_format($subtotal, 2) }}</strong>
                    </div>
                    @if($discount > 0)
                        <div class="mw-cart-total-row">
                            <span>Discount{{ $coupon ? ' ('.$coupon->code.')' : '' }}</span>
                            <strong>−₹{{ number_format($discount, 2) }}</strong>
                        </div>
                    @endif
                    <div class="mw-cart-ship">
                        <span class="mw-cart-ship-label">Shipment</span>
                        <p>Enter your address to view shipping options.</p>
                        <a href="#">Calculate shipping</a>
                    </div>
                    <div class="mw-cart-total-row mw-cart-grand">
                        <span>Total</span>
                        <strong>₹{{ number_format($total, 2) }}</strong>
                    </div>
                    <a class="mw-btn mw-btn-block" href="{{ route('checkout.index') }}">Proceed to Checkout</a>
                </aside>
            </div>

            @foreach($items as $item)
                <form id="remove-{{ $item['product_id'] }}" action="{{ route('cart.remove', $item['product_id']) }}" method="POST" hidden>
                    @csrf @method('DELETE')
                </form>
            @endforeach
            <script>
                document.querySelectorAll('.mw-cart-remove').forEach((btn) => {
                    btn.addEventListener('click', () => document.getElementById('remove-' + btn.dataset.id)?.submit());
                });
            </script>
        @else
            <div class="mw-cart-empty">
                <p>Your cart is currently empty.</p>
                <a class="mw-btn" href="{{ route('shop') }}">Return to Shop</a>
            </div>
        @endif
    </div>
</section>
@endsection