@extends('layouts.app')

@section('title', 'Shopping Cart - ECA Networks')

@section('content')
<div class="max-w-7xl mx-auto px-4 py-8">
    <!-- Breadcrumb -->
    <nav class="text-sm text-gray-500 mb-6 flex items-center gap-2">
        <a href="{{ route('home') }}" class="hover:text-electric-blue">Home</a>
        <i class="fas fa-chevron-right text-xs"></i>
        <span class="text-navy font-medium">Shopping Cart</span>
    </nav>

    <h1 class="text-2xl font-bold text-navy mb-6">Shopping Cart
        <span class="text-gray-400 text-base font-normal">({{ array_sum(array_column($cart, 'quantity')) }} items)</span>
    </h1>

    @if(empty($cart))
    <!-- Empty Cart -->
    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-16 text-center">
        <i class="fas fa-shopping-cart text-8xl text-gray-200 mb-6"></i>
        <h2 class="text-2xl font-semibold text-gray-600 mb-3">Your cart is empty</h2>
        <p class="text-gray-400 mb-8">Looks like you haven't added anything to your cart yet.</p>
        <a href="{{ route('products.index') }}" class="bg-electric-blue text-white px-8 py-3.5 rounded-xl font-semibold hover:bg-blue-dark transition-colors shadow-lg">
            <i class="fas fa-shopping-bag mr-2"></i> Start Shopping
        </a>
    </div>
    @else
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
        <!-- Cart Items -->
        <div class="lg:col-span-2">
            <div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">
                <!-- Table Header -->
                <div class="hidden md:grid grid-cols-12 gap-4 px-6 py-3 bg-gray-50 border-b border-gray-100 text-xs font-semibold text-gray-500 uppercase tracking-wider">
                    <div class="col-span-6">Product</div>
                    <div class="col-span-2 text-center">Price</div>
                    <div class="col-span-2 text-center">Quantity</div>
                    <div class="col-span-1 text-center">Subtotal</div>
                    <div class="col-span-1 text-center">Remove</div>
                </div>

                <div class="divide-y divide-gray-100">
                    @foreach($cart as $item)
                    <div class="p-4 md:p-6">
                        <div class="flex gap-4 md:grid md:grid-cols-12 md:gap-4 md:items-center">
                            <!-- Product Info -->
                            <div class="flex items-center gap-3 flex-1 md:col-span-6">
                                <a href="{{ route('products.show', $item['slug']) }}" class="w-16 h-16 md:w-20 md:h-20 bg-gray-50 rounded-xl overflow-hidden shrink-0 border border-gray-100">
                                    @if($item['image'])
                                    <img src="{{ Storage::url($item['image']) }}" alt="{{ $item['name'] }}" class="w-full h-full object-contain p-1">
                                    @else
                                    <div class="w-full h-full flex items-center justify-center"><i class="fas fa-image text-gray-300"></i></div>
                                    @endif
                                </a>
                                <div>
                                    <a href="{{ route('products.show', $item['slug']) }}" class="font-semibold text-navy hover:text-electric-blue transition-colors text-sm line-clamp-2">{{ $item['name'] }}</a>
                                    <p class="text-electric-blue font-bold mt-1 md:hidden">KES {{ number_format($item['price']) }}</p>
                                </div>
                            </div>

                            <!-- Price (desktop) -->
                            <div class="hidden md:block md:col-span-2 text-center">
                                <span class="text-gray-700 font-medium">KES {{ number_format($item['price']) }}</span>
                            </div>

                            <!-- Quantity -->
                            <div class="md:col-span-2 flex items-center justify-center">
                                <form action="{{ route('cart.update') }}" method="POST" class="flex items-center border border-gray-200 rounded-lg overflow-hidden">
                                    @csrf
                                    <input type="hidden" name="product_id" value="{{ $item['product_id'] }}">
                                    <button type="button" onclick="const i=this.nextElementSibling; if(i.value>1){i.value--; i.form.submit();}" class="px-3 py-2 hover:bg-gray-100 transition-colors text-navy font-bold text-sm">−</button>
                                    <input type="number" name="quantity" value="{{ $item['quantity'] }}" min="1" max="100"
                                        class="w-12 text-center border-x border-gray-200 py-2 text-sm font-semibold focus:outline-none"
                                        onchange="this.form.submit()">
                                    <button type="button" onclick="const i=this.previousElementSibling; i.value++; i.form.submit();" class="px-3 py-2 hover:bg-gray-100 transition-colors text-navy font-bold text-sm">+</button>
                                </form>
                            </div>

                            <!-- Subtotal -->
                            <div class="hidden md:block md:col-span-1 text-center">
                                <span class="font-bold text-navy">KES {{ number_format($item['price'] * $item['quantity']) }}</span>
                            </div>

                            <!-- Remove -->
                            <div class="md:col-span-1 flex justify-end md:justify-center">
                                <form action="{{ route('cart.remove') }}" method="POST">
                                    @csrf
                                    <input type="hidden" name="product_id" value="{{ $item['product_id'] }}">
                                    <button type="submit" class="w-9 h-9 rounded-full hover:bg-red-50 flex items-center justify-center text-gray-400 hover:text-red-500 transition-colors" title="Remove">
                                        <i class="fas fa-trash-alt text-sm"></i>
                                    </button>
                                </form>
                            </div>
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>

            <!-- Actions -->
            <div class="flex items-center justify-between mt-4">
                <a href="{{ route('products.index') }}" class="flex items-center gap-2 text-navy font-medium hover:text-electric-blue transition-colors">
                    <i class="fas fa-arrow-left"></i> Continue Shopping
                </a>
            </div>
        </div>

        <!-- Order Summary -->
        <div>
            <!-- Coupon -->
            <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-5 mb-4">
                <h3 class="font-semibold text-navy mb-3 flex items-center gap-2">
                    <i class="fas fa-tag text-electric-blue"></i> Coupon Code
                </h3>
                <form class="flex gap-2" onsubmit="event.preventDefault(); alert('Coupon feature coming soon!')">
                    <input type="text" placeholder="Enter coupon code" class="flex-1 border border-gray-200 rounded-xl px-4 py-2.5 text-sm focus:outline-none focus:border-electric-blue">
                    <button type="submit" class="bg-navy text-white px-5 py-2.5 rounded-xl text-sm font-semibold hover:bg-electric-blue transition-colors">Apply</button>
                </form>
            </div>

            <!-- Summary -->
            <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-5 sticky top-24">
                <h3 class="font-semibold text-navy mb-5 text-lg">Order Summary</h3>

                <div class="space-y-3 mb-5">
                    <div class="flex justify-between text-sm">
                        <span class="text-gray-600">Subtotal</span>
                        <span class="font-medium">KES {{ number_format($total) }}</span>
                    </div>
                    <div class="flex justify-between text-sm">
                        <span class="text-gray-600">Shipping</span>
                        @if($total >= 5000)
                        <span class="text-green-600 font-medium">Free</span>
                        @else
                        <span class="font-medium">KES 300</span>
                        @endif
                    </div>
                    <div class="flex justify-between text-sm">
                        <span class="text-gray-600">Tax (0%)</span>
                        <span class="font-medium">KES 0</span>
                    </div>
                    <div class="border-t border-gray-100 pt-3 flex justify-between font-bold text-lg">
                        <span>Total</span>
                        <span class="text-electric-blue">KES {{ number_format($total + ($total >= 5000 ? 0 : 300)) }}</span>
                    </div>
                </div>

                @if($total < 5000)
                <div class="bg-blue-50 rounded-xl p-3 mb-4 text-xs text-electric-blue flex items-center gap-2">
                    <i class="fas fa-info-circle"></i>
                    Add KES {{ number_format(5000 - $total) }} more for free delivery!
                </div>
                @endif

                <a href="{{ route('checkout.index') }}" class="block text-center bg-electric-blue text-white py-3.5 rounded-xl font-bold hover:bg-blue-dark transition-colors shadow-lg">
                    Proceed to Checkout <i class="fas fa-arrow-right ml-2"></i>
                </a>

                <div class="mt-4 flex items-center justify-center gap-2 text-xs text-gray-400">
                    <i class="fas fa-lock"></i>
                    <span>Secure checkout guaranteed</span>
                </div>
            </div>
        </div>
    </div>
    @endif
</div>
@endsection