@extends('layouts.app')

@section('title', 'Shopping Cart')

@section('content')
<div class="max-w-7xl mx-auto px-4 py-8">
    <h1 class="text-2xl font-bold text-gray-800 mb-6">Shopping Cart</h1>

    @if($cartItems->count() > 0)
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">

        {{-- Cart Items --}}
        <div class="lg:col-span-2 space-y-4">
            @foreach($cartItems as $item)
            <div class="bg-white rounded-xl shadow-sm p-4 flex gap-4">
                <img src="{{ $item->product->thumbnail_url }}" alt="{{ $item->product->name }}" class="w-24 h-24 object-cover rounded-lg flex-shrink-0">
                <div class="flex-1">
                    <a href="{{ route('shop.product', $item->product->slug) }}" class="font-medium text-gray-800 hover:text-red-600">{{ $item->product->name }}</a>
                    <p class="text-sm text-gray-500">by {{ $item->product->vendor->shop_name }}</p>
                    <p class="text-red-600 font-bold mt-1">${{ number_format($item->product->current_price, 2) }}</p>
                </div>
                <div class="flex flex-col items-end gap-2">
                    <form action="{{ route('cart.update', $item->id) }}" method="POST" class="flex items-center gap-2">
                        @csrf @method('PATCH')
                        <input type="number" name="quantity" value="{{ $item->quantity }}" min="1" max="{{ $item->product->stock_quantity }}"
                            class="w-16 border border-gray-300 rounded px-2 py-1 text-center text-sm">
                        <button type="submit" class="text-xs text-blue-600 hover:text-blue-800">Update</button>
                    </form>
                    <p class="font-bold text-gray-800">${{ number_format($item->subtotal, 2) }}</p>
                    <form action="{{ route('cart.remove', $item->id) }}" method="POST">
                        @csrf @method('DELETE')
                        <button type="submit" class="text-xs text-red-500 hover:text-red-700">Remove</button>
                    </form>
                </div>
            </div>
            @endforeach
        </div>

        {{-- Order Summary --}}
        <div class="bg-white rounded-xl shadow-sm p-6 h-fit sticky top-24">
            <h2 class="font-bold text-gray-800 mb-4">Order Summary</h2>

            {{-- Coupon --}}
            @if($coupon)
            <div class="bg-green-50 border border-green-200 rounded-lg p-3 mb-4 flex justify-between items-center">
                <span class="text-green-700 text-sm font-medium">Coupon: {{ $coupon }}</span>
                <form action="{{ route('cart.coupon.remove') }}" method="POST">
                    @csrf @method('DELETE')
                    <button type="submit" class="text-xs text-red-500">Remove</button>
                </form>
            </div>
            @else
            <form action="{{ route('cart.coupon') }}" method="POST" class="flex gap-2 mb-4">
                @csrf
                <input type="text" name="code" placeholder="Coupon code" class="flex-1 border border-gray-300 rounded px-3 py-2 text-sm">
                <button type="submit" class="bg-gray-800 text-white px-4 py-2 rounded text-sm hover:bg-gray-700">Apply</button>
            </form>
            @endif

            <div class="space-y-2 text-sm mb-4">
                <div class="flex justify-between"><span class="text-gray-600">Subtotal</span><span>${{ number_format($subtotal, 2) }}</span></div>
                @if($discount > 0)
                <div class="flex justify-between text-green-600"><span>Discount</span><span>-${{ number_format($discount, 2) }}</span></div>
                @endif
                <div class="flex justify-between"><span class="text-gray-600">Shipping</span><span class="text-green-600">Calculated at checkout</span></div>
                <div class="border-t pt-2 flex justify-between font-bold text-base">
                    <span>Total</span>
                    <span class="text-red-600">${{ number_format($total, 2) }}</span>
                </div>
            </div>

            @auth
            <a href="{{ route('checkout.index') }}" class="block w-full bg-red-600 text-white text-center py-3 rounded-lg hover:bg-red-700 font-semibold">
                Proceed to Checkout
            </a>
            @else
            <a href="{{ route('login') }}" class="block w-full bg-red-600 text-white text-center py-3 rounded-lg hover:bg-red-700 font-semibold">
                Login to Checkout
            </a>
            @endauth
            <a href="{{ route('shop.index') }}" class="block text-center text-sm text-gray-500 mt-3 hover:text-red-600">Continue Shopping</a>
        </div>
    </div>

    @else
    <div class="text-center py-20 bg-white rounded-xl shadow-sm">
        <svg class="w-20 h-20 mx-auto mb-4 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"/></svg>
        <h2 class="text-xl font-semibold text-gray-600 mb-2">Your cart is empty</h2>
        <p class="text-gray-400 mb-6">Add some parts to get started</p>
        <a href="{{ route('shop.index') }}" class="bg-red-600 text-white px-8 py-3 rounded-lg hover:bg-red-700 font-semibold">Shop Now</a>
    </div>
    @endif
</div>
@endsection