@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" data-cart-row data-unit-price="{{ $item['price'] }}">
                            <picture class="w-20 h-20 shrink-0 rounded bg-white/5">
                                @if(image_has_webp($item['image']))
                                    <source type="image/webp" srcset="{{ image_webp_url($item['image']) }}">
                                @endif
                                <img src="{{ asset('images/' . $item['image']) }}" alt="{{ $item['name'] }}" loading="lazy" decoding="async" class="w-20 h-20 object-contain rounded bg-white/5">
                            </picture>
                            <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" data-cart-update-form>
                                @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" data-cart-qty>
                                <button type="submit" class="sr-only">{{ __('update') }}</button>
                            </form>
                            <p class="text-white font-medium w-24 text-right"><span data-cart-line-total>{{ number_format($item['price'] * $item['qty'], 0, ',', ' ') }}</span> 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>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        var forms = document.querySelectorAll('[data-cart-update-form]');
        var formatter = new Intl.NumberFormat('az-AZ', {
            minimumFractionDigits: 0,
            maximumFractionDigits: 0
        });

        forms.forEach(function (form) {
            var input = form.querySelector('[data-cart-qty]');
            var row = form.closest('[data-cart-row]');
            var lineTotal = row ? row.querySelector('[data-cart-line-total]') : null;
            var timer = null;
            var lastValue = input ? input.value : null;

            if (!input) return;

            function updateLineTotal() {
                if (!row || !lineTotal) return;

                var unitPrice = parseFloat(row.dataset.unitPrice || '0');
                var qty = Math.max(1, parseInt(input.value || '1', 10));
                lineTotal.textContent = formatter.format(unitPrice * qty);
            }

            function submitSoon() {
                if (input.value === lastValue) return;

                lastValue = input.value;
                updateLineTotal();

                clearTimeout(timer);
                timer = setTimeout(function () {
                    if (typeof form.requestSubmit === 'function') {
                        form.requestSubmit();
                    } else {
                        form.submit();
                    }
                }, 450);
            }

            input.addEventListener('input', submitSoon);
            input.addEventListener('change', submitSoon);
        });
    });
</script>
@endsection