@extends('layouts.app')

@section('content')
<section class="py-16 md:py-24 bg-[#1a1614]">
    <div class="max-w-[1400px] mx-auto px-4 sm:px-6 lg:px-8">
        <h1 class="text-3xl md:text-4xl font-light text-white mb-10">{{ __('cart') }}</h1>

        @if(session('success'))
            <div class="mb-6 p-4 rounded bg-green-500/10 text-green-400 text-sm">{{ session('success') }}</div>
        @endif
        @if(session('error'))
            <div class="mb-6 p-4 rounded bg-red-500/10 text-red-400 text-sm">{{ session('error') }}</div>
        @endif

        @if(empty($cart))
            <div class="text-center py-20 bg-[#231e1b] rounded-xl">
                <p class="text-white/60 mb-6">{{ __('cart_empty') }}</p>
                <a href="{{ localized_route('products.index') }}" class="inline-flex items-center justify-center bg-[#c77d4a] hover:bg-[#b06b3d] text-white px-8 py-3 rounded text-sm font-medium uppercase transition">{{ __('continue_shopping') }}</a>
            </div>
        @else
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
                <div class="lg:col-span-2 space-y-4">
                    @foreach($cart as $key => $item)
                        <div class="flex gap-4 bg-[#231e1b] rounded-xl p-4 items-center">
                            <img src="{{ asset('images/' . $item['image']) }}" alt="{{ $item['name'] }}" class="w-20 h-20 object-contain rounded bg-white/5">
                            <div class="flex-1">
                                <a href="{{ localized_route('products.show', $item['slug']) }}" class="text-white font-medium hover:text-[#c77d4a] transition">{{ $item['name'] }}</a>
                                @if($item['variant_info'])
                                    <p class="text-white/50 text-xs mt-1">{{ $item['variant_info'] }}</p>
                                @endif
                                <p class="text-[#c77d4a] text-sm mt-1">{{ number_format($item['price'], 0, ',', ' ') }} AZN</p>
                            </div>
                            <form method="POST" action="{{ localized_route('cart.update') }}" class="flex items-center gap-2">
                                @csrf
                                <input type="hidden" name="key" value="{{ $key }}">
                                <input type="number" name="qty" value="{{ $item['qty'] }}" min="1" class="w-16 bg-white/5 border border-white/10 rounded px-2 py-1 text-white text-center">
                                <button type="submit" class="text-white/50 hover:text-white transition text-sm">{{ __('update') }}</button>
                            </form>
                            <p class="text-white font-medium w-24 text-right">{{ number_format($item['price'] * $item['qty'], 0, ',', ' ') }} AZN</p>
                            <form method="POST" action="{{ localized_route('cart.remove') }}">
                                @csrf
                                <input type="hidden" name="key" value="{{ $key }}">
                                <button type="submit" class="text-white/40 hover:text-red-400 transition" aria-label="{{ __('delete') }}">
                                    <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/>
                                    </svg>
                                </button>
                            </form>
                        </div>
                    @endforeach

                    <div class="flex justify-between items-center pt-4">
                        <form method="POST" action="{{ localized_route('cart.clear') }}">
                            @csrf
                            <button type="submit" class="text-sm text-white/50 hover:text-white transition">{{ __('clear_cart') }}</button>
                        </form>
                        <a href="{{ localized_route('products.index') }}" class="text-sm text-[#c77d4a] hover:text-white transition">{{ __('continue_shopping') }}</a>
                    </div>
                </div>

                <div class="bg-[#231e1b] rounded-xl p-6 h-fit">
                    <h2 class="text-xl font-light text-white mb-6">{{ __('order_summary') }}</h2>

                    <form method="POST" action="{{ localized_route('cart.promocode') }}" class="flex gap-2 mb-6">
                        @csrf
                        <input type="text" name="promocode" value="{{ $promocode['code'] ?? '' }}" placeholder="{{ __('promocode') }}" class="flex-1 bg-white/5 border border-white/10 rounded px-4 py-2 text-white placeholder-white/30 focus:border-[#c77d4a] focus:outline-none uppercase">
                        <button type="submit" class="bg-white/10 hover:bg-white/20 text-white px-4 py-2 rounded text-sm transition">{{ __('apply') }}</button>
                    </form>

                    <div class="space-y-3 text-sm border-b border-white/10 pb-4 mb-4">
                        <div class="flex justify-between text-white/60">
                            <span>{{ __('subtotal') }}</span>
                            <span>{{ number_format($total, 2, ',', ' ') }} AZN</span>
                        </div>
                        @if($discount > 0)
                            <div class="flex justify-between text-green-400">
                                <span>{{ __('discount') }}</span>
                                <span>-{{ number_format($discount, 2, ',', ' ') }} AZN</span>
                            </div>
                        @endif
                        <div class="flex justify-between text-white/60">
                            <span>{{ __('shipping') }}</span>
                            <span>{{ $shipping > 0 ? number_format($shipping, 2, ',', ' ') . ' AZN' : __('free') }}</span>
                        </div>
                    </div>
                    <div class="flex justify-between text-white text-lg font-medium mb-6">
                        <span>{{ __('total') }}</span>
                        <span>{{ number_format($finalTotal, 2, ',', ' ') }} AZN</span>
                    </div>

                    <a href="{{ localized_route('checkout.index') }}" class="block w-full text-center bg-[#c77d4a] hover:bg-[#b06b3d] text-white px-6 py-4 rounded text-sm font-medium uppercase transition">{{ __('proceed_to_checkout') }}</a>
                </div>
            </div>
        @endif
    </div>
</section>
@endsection