@extends('layouts.app')

@section('content')
<div class="w-full max-w-2xl xl:w-1/2 mx-auto my-8 p-4 sm:p-6 border-2 border-cyan-300 rounded-xl bg-white shadow-lg min-w-[220px]">
    <h1 class="text-3xl font-bold mb-8 text-gray-800">Checkout</h1>
    @if($items->count() === 0)
        <p class="text-gray-500">Your cart is empty.</p>
    @else
        <div class="bg-gray-100 rounded-lg shadow p-4 mb-6">
            <h2 class="text-xl font-semibold mb-4 text-gray-800">Order Summary</h2>
            <ul class="divide-y divide-gray-200">
                @foreach($items as $item)
                    <li class="py-3 flex justify-between items-center gap-4">
                        @if($item['adjustable'])
                            <div class="flex items-center gap-3 min-w-0">
                                <span class="text-gray-900 truncate">{{ $item['name'] }}</span>
                                <div class="flex items-center gap-1 shrink-0">
                                    <form method="POST" action="{{ route('cart.update', $item['id']) }}">
                                        @csrf
                                        @method('PATCH')
                                        <input type="hidden" name="quantity" value="{{ max(1, $item['qty'] - 1) }}">
                                        <button type="submit"
                                            @if($item['qty'] <= 1) disabled @endif
                                            class="w-7 h-7 flex items-center justify-center rounded border border-gray-300 text-gray-600 bg-white hover:bg-gray-100 disabled:opacity-40 disabled:cursor-not-allowed text-base leading-none">
                                            &minus;
                                        </button>
                                    </form>
                                    <span class="w-8 text-center font-medium text-gray-900">{{ $item['qty'] }}</span>
                                    <form method="POST" action="{{ route('cart.update', $item['id']) }}">
                                        @csrf
                                        @method('PATCH')
                                        <input type="hidden" name="quantity" value="{{ $item['qty'] + 1 }}">
                                        <button type="submit"
                                            class="w-7 h-7 flex items-center justify-center rounded border border-gray-300 text-gray-600 bg-white hover:bg-gray-100 text-base leading-none">
                                            +
                                        </button>
                                    </form>
                                </div>
                            </div>
                        @else
                            <span class="text-gray-900">{{ $item['name'] }} <span class="text-gray-500">x{{ $item['qty'] }}</span></span>
                        @endif
                        <span class="font-semibold shrink-0">${{ number_format($item['total'], 2) }} <span class="text-xs text-gray-500">/month</span></span>
                    </li>
                @endforeach
            </ul>
            <div class="flex justify-between items-center mt-6 text-xl font-bold text-gray-800">
                <span>Monthly Total</span>
                <span>${{ number_format($total, 2) }}</span>
            </div>
            <div class="flex justify-between items-center mt-2 text-lg font-medium text-gray-700">
                <span>Yearly Total <span class="text-green-700">(Save ${{ number_format($items->sum(fn($i) => $i['price'] * 2 * $i['qty']), 2) }})</span></span>
                <span>${{ number_format($items->sum(fn($i) => $i['price'] * 10 * $i['qty']), 2) }}</span>
            </div>
        </div>
        <a href="{{ route('payment.form') }}" class="block w-full text-center bg-green-600 hover:bg-green-700 text-white font-bold py-3 px-8 rounded-lg shadow transition text-lg mt-4">Proceed to Payment</a>
    @endif
</div>
@endsection