@extends('layouts.store')
@section('title', __('app.cart') . ' - ' . __('app.site_name'))

@section('content')
<div class="max-w-4xl mx-auto px-4 py-10">
    <h1 class="text-3xl font-display font-bold text-brand-900 mb-8">{{ __('app.cart') }}</h1>

    @if($items->count())
        <div class="bg-white rounded-3xl shadow-sm border border-brand-100/50 overflow-hidden">
            <div class="divide-y divide-brand-100/50">
                @foreach($items as $id => $item)
                <div class="flex items-center gap-4 p-5 md:p-6 hover:bg-brand-50/30 transition-colors">
                    <div class="w-20 h-20 rounded-2xl overflow-hidden bg-gradient-to-br from-brand-50 to-cream-100 shrink-0 border border-brand-100/50">
                        @if($item['image'])
                            <img src="{{ asset('storage/' . $item['image']) }}" class="w-full h-full object-cover" alt="">
                        @else
                            <div class="w-full h-full flex items-center justify-center">
                                <svg class="w-8 h-8 text-aloe-200" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C12 2 8 8 8 14c0 2.2 1.8 4 4 4s4-1.8 4-4C16 8 12 2 12 2z"/></svg>
                            </div>
                        @endif
                    </div>
                    <div class="flex-1 min-w-0">
                        <h3 class="font-bold text-brand-800 truncate">
                            @php $name = $item['name']; @endphp
                            {{ is_array($name) ? ($name['en'] ?? '') : $name }}
                        </h3>
                        <p class="text-brand-600 font-bold mt-0.5">{{ number_format($item['price'], 2) }} {{ __('app.jod') }}</p>
                    </div>
                    <form action="{{ route('cart.update', $id) }}" method="POST" class="flex items-center">
                        @csrf @method('PATCH')
                        <input type="number" name="quantity" value="{{ $item['quantity'] }}" min="1" max="99" class="w-16 border-brand-200 bg-brand-50 rounded-lg text-center text-sm font-bold text-brand-800 focus:ring-brand-400 focus:border-brand-400" onchange="this.form.submit()">
                    </form>
                    <span class="font-extrabold text-brand-800 w-24 text-right tabular-nums">{{ number_format($item['price'] * $item['quantity'], 2) }}</span>
                    <form action="{{ route('cart.remove', $id) }}" method="POST">
                        @csrf @method('DELETE')
                        <button class="p-2 rounded-full text-brand-300 hover:text-red-500 hover:bg-red-50 transition-all">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
                        </button>
                    </form>
                </div>
                @endforeach
            </div>

            <div class="border-t border-brand-100 bg-gradient-warm p-6 md:p-8">
                <div class="flex items-center justify-between mb-6">
                    <span class="text-lg font-bold text-brand-800">{{ __('app.total') }}</span>
                    <span class="text-3xl font-extrabold text-brand-700">{{ number_format($total, 2) }} <span class="text-lg text-brand-400">{{ __('app.jod') }}</span></span>
                </div>
                <div class="flex gap-4">
                    <a href="{{ route('shop') }}" class="btn-outline flex-1 text-center !rounded-xl">{{ __('app.continue_shopping') }}</a>
                    <a href="{{ route('checkout') }}" class="btn-primary flex-1 text-center !rounded-xl">{{ __('app.checkout') }}</a>
                </div>
            </div>
        </div>
    @else
        <div class="text-center py-28">
            <div class="w-28 h-28 mx-auto bg-brand-50 rounded-full flex items-center justify-center mb-6">
                <svg class="w-14 h-14 text-aloe-200" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C12 2 8 8 8 14c0 2.2 1.8 4 4 4s4-1.8 4-4C16 8 12 2 12 2zm0 14c-1.1 0-2-.9-2-2 0-2.4 1.2-5.5 2-7.4.8 1.9 2 5 2 7.4 0 1.1-.9 2-2 2z"/></svg>
            </div>
            <p class="text-xl font-bold text-brand-400 mb-6">{{ __('app.cart_empty') }}</p>
            <a href="{{ route('shop') }}" class="btn-primary">{{ __('app.shop_now') }}</a>
        </div>
    @endif
</div>
@endsection