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

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

    <form action="{{ route('checkout.store') }}" method="POST">
        @csrf
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
            <div class="lg:col-span-2 space-y-6">
                <div class="bg-white rounded-2xl shadow-sm border border-brand-100/50 p-6 md:p-8">
                    <h2 class="text-xl font-bold text-brand-800 mb-6 flex items-center gap-2">
                        <div class="w-8 h-8 bg-brand-100 rounded-lg flex items-center justify-center"><span class="text-brand-600 font-bold text-sm">1</span></div>
                        {{ __('app.customer_info') }}
                    </h2>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div>
                            <label class="block text-sm font-semibold text-brand-700 mb-1.5">{{ __('app.customer_name') }} *</label>
                            <input type="text" name="customer_name" value="{{ old('customer_name', auth()->user()?->name) }}" required class="input-luxury">
                            @error('customer_name') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                        </div>
                        <div>
                            <label class="block text-sm font-semibold text-brand-700 mb-1.5">{{ __('app.customer_phone') }} *</label>
                            <input type="text" name="customer_phone" value="{{ old('customer_phone') }}" required class="input-luxury">
                            @error('customer_phone') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                        </div>
                        <div>
                            <label class="block text-sm font-semibold text-brand-700 mb-1.5">{{ __('app.customer_email') }}</label>
                            <input type="email" name="customer_email" value="{{ old('customer_email', auth()->user()?->email) }}" class="input-luxury">
                        </div>
                        <div>
                            <label class="block text-sm font-semibold text-brand-700 mb-1.5">{{ __('app.city') }}</label>
                            <input type="text" name="city" value="{{ old('city') }}" class="input-luxury">
                        </div>
                    </div>
                    <div class="mt-4">
                        <label class="block text-sm font-semibold text-brand-700 mb-1.5">{{ __('app.shipping_address') }} *</label>
                        <textarea name="shipping_address" rows="3" required class="input-luxury">{{ old('shipping_address') }}</textarea>
                        @error('shipping_address') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                    </div>
                    <div class="mt-4">
                        <label class="block text-sm font-semibold text-brand-700 mb-1.5">{{ __('app.notes') }}</label>
                        <textarea name="notes" rows="2" class="input-luxury">{{ old('notes') }}</textarea>
                    </div>
                </div>

                <div class="bg-white rounded-2xl shadow-sm border border-brand-100/50 p-6 md:p-8">
                    <h2 class="text-xl font-bold text-brand-800 mb-6 flex items-center gap-2">
                        <div class="w-8 h-8 bg-brand-100 rounded-lg flex items-center justify-center"><span class="text-brand-600 font-bold text-sm">2</span></div>
                        {{ __('app.payment_method') }}
                    </h2>
                    <div class="flex items-center gap-4 p-5 border-2 border-brand-300 rounded-2xl bg-brand-50/50">
                        <input type="radio" name="payment_method" value="cod" checked class="text-brand-500 focus:ring-brand-500 w-5 h-5">
                        <div>
                            <p class="font-bold text-brand-800">{{ __('app.cod') }}</p>
                            <p class="text-sm text-brand-500 mt-0.5">{{ __('app.payment_on_delivery') }}</p>
                        </div>
                        <svg class="w-8 h-8 text-brand-300 ms-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg>
                    </div>
                </div>
            </div>

            <div>
                <div class="bg-white rounded-2xl shadow-sm border border-brand-100/50 p-6 sticky top-28">
                    <h2 class="text-xl font-bold text-brand-800 mb-4">{{ __('app.order_details') }}</h2>
                    <div class="divide-y divide-brand-100/50">
                        @foreach($items as $item)
                        <div class="py-3 flex justify-between gap-2">
                            <div class="min-w-0">
                                <p class="text-sm text-brand-800 font-medium truncate">
                                    @php $name = $item['name']; @endphp
                                    {{ is_array($name) ? ($name['en'] ?? '') : $name }}
                                </p>
                                <p class="text-xs text-brand-400">x{{ $item['quantity'] }}</p>
                            </div>
                            <span class="text-sm font-bold text-brand-700 shrink-0">{{ number_format($item['price'] * $item['quantity'], 2) }}</span>
                        </div>
                        @endforeach
                    </div>
                    <div class="border-t-2 border-brand-100 pt-4 mt-4">
                        <div class="flex justify-between text-xl font-extrabold text-brand-900">
                            <span>{{ __('app.total') }}</span>
                            <span class="text-brand-700">{{ number_format($total, 2) }} {{ __('app.jod') }}</span>
                        </div>
                    </div>
                    <button type="submit" class="btn-primary w-full mt-6 !rounded-xl !text-lg !py-4">{{ __('app.place_order') }}</button>
                </div>
            </div>
        </div>
    </form>
</div>
@endsection