@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">{{ __('checkout') }}</h1>

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

        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
            <div class="lg:col-span-2">
                <form method="POST" action="{{ localized_route('checkout.store') }}" class="bg-[#231e1b] rounded-xl p-6 space-y-5">
                    @csrf

                    <h2 class="text-xl font-light text-white mb-4">{{ __('your_details') }}</h2>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                        <div>
                            <label class="block text-sm text-white/60 mb-1">{{ __('first_name') }} *</label>
                            <input type="text" name="first_name" required value="{{ old('first_name') }}" class="w-full bg-white/5 border border-white/10 rounded px-4 py-3 text-white focus:border-[#c77d4a] focus:outline-none">
                        </div>
                        <div>
                            <label class="block text-sm text-white/60 mb-1">{{ __('last_name') }} *</label>
                            <input type="text" name="last_name" required value="{{ old('last_name') }}" class="w-full bg-white/5 border border-white/10 rounded px-4 py-3 text-white focus:border-[#c77d4a] focus:outline-none">
                        </div>
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                        <div>
                            <label class="block text-sm text-white/60 mb-1">{{ __('phone') }} *</label>
                            <input type="tel" name="phone" required value="{{ old('phone') }}" class="w-full bg-white/5 border border-white/10 rounded px-4 py-3 text-white focus:border-[#c77d4a] focus:outline-none">
                        </div>
                        <div>
                            <label class="block text-sm text-white/60 mb-1">{{ __('email') }}</label>
                            <input type="email" name="email" value="{{ old('email') }}" class="w-full bg-white/5 border border-white/10 rounded px-4 py-3 text-white focus:border-[#c77d4a] focus:outline-none">
                        </div>
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                        <div>
                            <label class="block text-sm text-white/60 mb-1">{{ __('city') }}</label>
                            <input type="text" name="city" value="{{ old('city') }}" class="w-full bg-white/5 border border-white/10 rounded px-4 py-3 text-white focus:border-[#c77d4a] focus:outline-none">
                        </div>
                        <div>
                            <label class="block text-sm text-white/60 mb-1">{{ __('address') }} *</label>
                            <input type="text" name="address" required value="{{ old('address') }}" class="w-full bg-white/5 border border-white/10 rounded px-4 py-3 text-white focus:border-[#c77d4a] focus:outline-none">
                        </div>
                    </div>

                    <div>
                        <label class="block text-sm text-white/60 mb-1">{{ __('customer_note') }}</label>
                        <textarea name="customer_note" rows="3" class="w-full bg-white/5 border border-white/10 rounded px-4 py-3 text-white focus:border-[#c77d4a] focus:outline-none">{{ old('customer_note') }}</textarea>
                    </div>

                    <div>
                        <label class="block text-sm text-white/60 mb-2">{{ __('payment_type') }} *</label>
                        <div class="flex flex-wrap gap-4">
                            @foreach(['cash' => __('cash'), 'card' => __('card'), 'transfer' => __('transfer')] as $key => $label)
                                <label class="flex items-center gap-2 text-white/80 cursor-pointer">
                                    <input type="radio" name="payment_type" value="{{ $key }}" {{ old('payment_type', 'cash') === $key ? 'checked' : '' }} required class="accent-[#c77d4a]">
                                    <span>{{ $label }}</span>
                                </label>
                            @endforeach
                        </div>
                    </div>

                    <button type="submit" class="w-full bg-[#c77d4a] hover:bg-[#b06b3d] text-white px-6 py-4 rounded text-sm font-medium uppercase transition">{{ __('complete_order') }}</button>
                </form>
            </div>

            <div class="bg-[#231e1b] rounded-xl p-6 h-fit">
                <h2 class="text-xl font-light text-white mb-6">{{ __('order_summary') }}</h2>
                <div class="space-y-3 text-sm border-b border-white/10 pb-4 mb-4">
                    @foreach($cart as $item)
                        <div class="flex justify-between text-white/70">
                            <span>{{ $item['name'] }} x{{ $item['qty'] }}</span>
                            <span>{{ number_format($item['price'] * $item['qty'], 2, ',', ' ') }} AZN</span>
                        </div>
                    @endforeach
                </div>
                <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">
                    <span>{{ __('total') }}</span>
                    <span>{{ number_format($finalTotal, 2, ',', ' ') }} AZN</span>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection