@extends('site.layout')

@section('content')
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10">
        <div class="text-2xl font-semibold">Cart</div>

        @if ($items->count() === 0)
            <div class="mt-6 bg-white border border-gray-200 rounded-xl p-8 text-gray-600">
                Your cart is empty.
            </div>
        @else
            <div class="mt-8 grid grid-cols-1 lg:grid-cols-3 gap-6">
                <div class="lg:col-span-2 bg-white border border-gray-200 rounded-xl overflow-hidden">
                    <div class="divide-y divide-gray-200">
                        @foreach ($items as $item)
                            <div class="p-5 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
                                <div>
                                    <div class="font-semibold">{{ $item['name'] }}</div>
                                    <div class="text-sm text-gray-600 flex items-center gap-2">
                                        @if (!empty($item['compare_at_price']) && (float) $item['compare_at_price'] > (float) $item['unit_price'])
                                            <span class="line-through text-gray-400">৳{{ number_format((float) $item['compare_at_price'], 2) }}</span>
                                        @endif
                                        <span>৳{{ number_format((float) $item['unit_price'], 2) }}</span>
                                    </div>
                                </div>
                                <div class="flex items-center gap-3">
                                    <form method="POST" action="{{ route('cart.items.update', $item['service_id']) }}" class="inline-flex items-center rounded-md border border-gray-200">
                                        @csrf
                                        @method('PATCH')
                                        <button type="button" class="w-9 h-9 inline-flex items-center justify-center" onclick="this.nextElementSibling.stepDown(); this.form.submit();">-</button>
                                        <input type="number" name="quantity" min="1" max="100" value="{{ $item['quantity'] }}" class="w-16 h-9 border-x border-gray-200 text-center" />
                                        <button type="button" class="w-9 h-9 inline-flex items-center justify-center" onclick="this.previousElementSibling.stepUp(); this.form.submit();">+</button>
                                    </form>
                                    <div class="text-sm font-semibold w-28 text-right">৳{{ number_format((float) $item['line_total'], 2) }}</div>
                                    <form method="POST" action="{{ route('cart.items.destroy', $item['service_id']) }}">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="text-sm text-red-700 hover:text-red-800 font-semibold">Remove</button>
                                    </form>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>

                <div class="bg-white border border-gray-200 rounded-xl p-6">
                    <div class="text-sm font-semibold">Promo code</div>
                    <div class="mt-3">
                        @if ($coupon)
                            <div class="flex items-center justify-between gap-3">
                                <div class="text-sm text-gray-700">
                                    Applied: <span class="font-semibold">{{ $coupon['code'] }}</span>
                                </div>
                                <form method="POST" action="{{ route('cart.coupon.clear') }}">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="text-sm text-red-700 hover:text-red-800 font-semibold">Remove</button>
                                </form>
                            </div>
                        @else
                            <form method="POST" action="{{ route('cart.coupon.apply') }}" class="flex gap-2">
                                @csrf
                                <input type="text" name="code" class="w-full rounded-md border-gray-300 focus:border-red-500 focus:ring-red-500" placeholder="Enter your promo code" />
                                <button type="submit" class="rounded-md bg-red-700 px-4 py-2 text-white text-sm font-semibold hover:bg-red-800">Apply</button>
                            </form>
                        @endif
                    </div>

                    <div class="mt-6 border-t border-gray-200 pt-6 space-y-2 text-sm">
                        <div class="flex items-center justify-between">
                            <div class="text-gray-600">Sub Total:</div>
                            <div class="font-semibold">৳{{ number_format((float) $subtotal, 2) }}</div>
                        </div>
                        <div class="flex items-center justify-between">
                            <div class="text-gray-600">Discount:</div>
                            <div class="font-semibold text-red-700">- ৳{{ number_format((float) $discount, 2) }}</div>
                        </div>
                        <div class="flex items-center justify-between pt-2 border-t border-gray-200">
                            <div class="text-gray-900 font-semibold">Total price:</div>
                            <div class="text-gray-900 font-semibold">৳{{ number_format((float) $total, 2) }}</div>
                        </div>
                    </div>

                    <a href="{{ route('checkout.index') }}" class="mt-6 w-full inline-flex items-center justify-center rounded-md bg-red-700 px-4 py-3 text-white text-sm font-semibold hover:bg-red-800">Checkout</a>
                </div>
            </div>
        @endif
    </div>
@endsection