@extends('layouts.app')
@section('title', 'Shopping Cart')

@section('content')
<div class="container py-5">
    <h2 class="section-title">Shopping Cart</h2>

    @if($cartItems->count() > 0)
    <div class="row g-4">
        <div class="col-lg-8">
            <div class="card border-0 shadow-sm">
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table align-middle mb-0">
                            <thead style="background:#f8f9fa">
                                <tr>
                                    <th class="px-4 py-3">Product</th>
                                    <th class="py-3">Price</th>
                                    <th class="py-3">Qty</th>
                                    <th class="py-3">Subtotal</th>
                                    <th class="py-3"></th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($cartItems as $item)
                                @php
                                    $price = $item->product->current_price + ($item->variation?->price_adjustment ?? 0);
                                    $sub   = $price * $item->quantity;
                                @endphp
                                <tr>
                                    <td class="px-4 py-3">
                                        <div class="d-flex align-items-center gap-3">
                                            <img src="{{ $item->product->thumbnail_url }}" style="width:60px;height:60px;object-fit:cover;border-radius:8px" alt="">
                                            <div>
                                                <a href="{{ route('product.show', $item->product->slug) }}" class="fw-semibold text-decoration-none" style="color:var(--dark)">{{ $item->product->name }}</a>
                                                @if($item->variation)
                                                <div class="text-muted" style="font-size:12px">{{ $item->variation->label }}</div>
                                                @endif
                                            </div>
                                        </div>
                                    </td>
                                    <td class="py-3">৳{{ number_format($price, 0) }}</td>
                                    <td class="py-3">
                                        <form action="{{ route('cart.update', $item) }}" method="POST" class="d-flex align-items-center gap-1">
                                            @csrf @method('PATCH')
                                            <input type="number" name="quantity" value="{{ $item->quantity }}" min="1" class="form-control form-control-sm text-center" style="width:60px">
                                            <button type="submit" class="btn btn-sm btn-outline-secondary"><i class="bi bi-arrow-repeat"></i></button>
                                        </form>
                                    </td>
                                    <td class="py-3 fw-bold" style="color:var(--primary)">৳{{ number_format($sub, 0) }}</td>
                                    <td class="py-3">
                                        <form action="{{ route('cart.remove', $item) }}" method="POST">
                                            @csrf @method('DELETE')
                                            <button type="submit" class="btn btn-sm btn-outline-danger" onclick="return confirm('Remove this item?')">
                                                <i class="bi bi-trash"></i>
                                            </button>
                                        </form>
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="mt-3">
                <a href="{{ route('shop') }}" class="btn btn-outline-secondary">
                    <i class="bi bi-arrow-left me-1"></i>Continue Shopping
                </a>
            </div>
        </div>

        <div class="col-lg-4">
            <div class="card border-0 shadow-sm">
                <div class="card-body p-4">
                    <h5 class="fw-bold mb-4" style="color:var(--dark)">Order Summary</h5>
                    <div class="d-flex justify-content-between mb-2">
                        <span class="text-muted">Subtotal</span>
                        <span class="fw-semibold">৳{{ number_format($total, 0) }}</span>
                    </div>
                    <div class="d-flex justify-content-between mb-2">
                        <span class="text-muted">Delivery</span>
                        <span class="text-success fw-semibold">Free</span>
                    </div>
                    <hr>
                    <div class="d-flex justify-content-between mb-4">
                        <span class="fw-bold fs-5">Total</span>
                        <span class="fw-bold fs-5" style="color:var(--primary)">৳{{ number_format($total, 0) }}</span>
                    </div>
                    <a href="{{ route('checkout') }}" class="btn btn-danger w-100 py-2 fw-semibold">
                        Proceed to Checkout <i class="bi bi-arrow-right ms-1"></i>
                    </a>
                </div>
            </div>
        </div>
    </div>
    @else
    <div class="text-center py-5">
        <i class="bi bi-cart-x" style="font-size:80px;color:#ddd"></i>
        <h4 class="mt-3 text-muted">Your cart is empty</h4>
        <a href="{{ route('shop') }}" class="btn btn-danger mt-3 px-5">Start Shopping</a>
    </div>
    @endif
</div>
@endsection