@extends('layouts.app')

@section('title', 'TemTechnik | ' . __('general.page_title_checkout'))

@section('content')
<div class="min-h-screen bg-gradient-to-br from-indigo-100 via-white to-indigo-200 dark:from-gray-900 dark:via-gray-800 dark:to-gray-900 py-16">
    <div class="container mx-auto px-4 py-12">
        <h1 class="text-4xl font-extrabold mb-12 text-center text-primary drop-shadow-lg tracking-tight">{{ __('general.checkout_title') }}</h1>
        @if ($errors->any())
            <div class="mb-6 text-red-600">
                <ul>
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif
        @php
            $currency = session('currency', 'AZN');
        @endphp
        <div class="grid grid-cols-1 md:grid-cols-2 gap-14">
            <div class="bg-white/90 dark:bg-gray-800/90 rounded-3xl shadow-2xl p-10 border border-primary/10 flex flex-col justify-between min-h-[400px]">
                <h2 class="text-2xl font-bold mb-8 text-primary border-b border-gray-200 dark:border-gray-700 pb-4">{{ __('general.order_summary') }}</h2>
                <div class="space-y-8 flex-1">
                    @foreach($cartItems as $item)
                    <div class="flex items-center justify-between gap-8 border-b border-gray-100 dark:border-gray-700 pb-6 mb-6">
                        <div class="flex items-center gap-7">
                            <img src="{{ $item['product']->cart_image_url ?? $item['product']->getCartImageUrlAttribute() }}" alt="{{ $item['product']->name }}" class="w-24 h-24 object-contain rounded-xl border shadow-sm bg-white dark:bg-gray-900">
                            <div>
                                <h3 class="font-semibold text-lg text-gray-900 dark:text-white">{{ $item['product']->name }}</h3>
                                <p class="text-gray-600 dark:text-gray-300 text-sm">{{ __('general.quantity') }}: <span class="font-semibold">{{ $item['quantity'] }}</span></p>
                                <p class="text-gray-500 dark:text-gray-400 text-xs">{{ __('general.base_price') }}: <span class="font-medium">{{ $item['product']->getCurrencySymbol($currency) }}{{ number_format($item['product']->getPriceInCurrency($currency), 2) }}</span></p>
                                @if($item['product']->isDiscounted())
                                    <span class="inline-block bg-green-100 text-green-800 text-xs px-2 py-1 rounded mt-1 font-semibold">
                                        {{ __('general.discount') }}: 
                                        @if($item['product']->discount_type === 'percent')
                                            {{ $item['product']->discount_value }}%
                                        @else
                                            {{ $item['product']->getCurrencySymbol($currency) }}{{ number_format($item['product']->getDiscountValueInCurrency($currency), 2) }}
                                        @endif
                                    </span>
                                    <p class="text-xs text-orange-600 font-semibold">{{ __('general.final_price') }}: {{ $item['product']->getCurrencySymbol($currency) }}{{ number_format($item['product']->getFinalPriceInCurrency($currency), 2) }}</p>
                                @else
                                    <p class="text-xs text-gray-400">{{ __('general.no_discount') }}</p>
                                @endif
                            </div>
                        </div>
                        <p class="font-bold text-xl text-primary">{{ $item['product']->getCurrencySymbol($currency) }}{{ number_format($item['subtotal'], 2) }}</p>
                    </div>
                    @endforeach
                </div>
                <p class="text-base text-white font-medium mb-2">
                    {{ __('general.delivery_baku_note') }}
                </p>
                <div class="border-t border-gray-200 dark:border-gray-700 pt-8 mt-6">
                    <div class="flex justify-between items-center font-extrabold text-lg">
                        <span class="font-bold text-black dark:text-white">{{ __('general.total') }}</span>
                        <span class="text-2xl text-primary">{{ get_currency_symbol($currency) }}{{ number_format($total, 2) }}</span>
                    </div>
                </div>
            </div>
            <div class="bg-white/90 dark:bg-gray-800/90 rounded-3xl shadow-2xl p-10 border border-primary/10">
                <h2 class="text-2xl font-bold mb-8 text-primary border-b border-gray-200 dark:border-gray-700 pb-4">{{ __('general.shipping_information') }}</h2>
                <form action="{{ route('checkout.process') }}" method="POST" id="checkout-form" class="space-y-10">
                    @csrf
                    <div>
                        <h3 class="font-semibold mb-4 text-lg text-gray-800 dark:text-white">{{ __('general.shipping_address') }}</h3>
                        <div class="grid grid-cols-2 gap-6">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">{{ __('general.first_name') }}</label>
                                <input type="text" name="shipping_address[first_name]" required class="mt-2 block w-full rounded-lg border-gray-300 dark:border-gray-600 shadow-sm focus:border-primary focus:ring-primary dark:bg-gray-900 dark:text-white py-3 px-4">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">{{ __('general.last_name') }}</label>
                                <input type="text" name="shipping_address[last_name]" required class="mt-2 block w-full rounded-lg border-gray-300 dark:border-gray-600 shadow-sm focus:border-primary focus:ring-primary dark:bg-gray-900 dark:text-white py-3 px-4">
                            </div>
                            <div class="col-span-2">
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">{{ __('general.address') }}</label>
                                <input type="text" name="shipping_address[address]" required placeholder="{{ __('general.address') }}" class="mt-2 block w-full rounded-lg border-gray-300 dark:border-gray-600 shadow-sm focus:border-primary focus:ring-primary dark:bg-gray-900 dark:text-white py-3 px-4">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">{{ __('general.city') }}</label>
                                <input type="text" name="shipping_address[city]" value="{{ __('general.baku') }}" readonly required class="mt-2 block w-full rounded-lg border-gray-300 dark:border-gray-600 shadow-sm focus:border-primary focus:ring-primary dark:bg-gray-900 dark:text-white py-3 px-4">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">{{ __('general.postal_code') }}</label>
                                <input type="text" name="shipping_address[postal_code]" required class="mt-2 block w-full rounded-lg border-gray-300 dark:border-gray-600 shadow-sm focus:border-primary focus:ring-primary dark:bg-gray-900 dark:text-white py-3 px-4">
                            </div>
                            <div class="col-span-2">
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">{{ __('general.country') }}</label>
                                <input type="text" name="shipping_address[country]" value="{{ __('general.azerbaijan') }}" readonly required class="mt-2 block w-full rounded-lg border-gray-300 dark:border-gray-600 shadow-sm focus:border-primary focus:ring-primary dark:bg-gray-900 dark:text-white py-3 px-4">
                            </div>
                        </div>
                    </div>
                    <div>
                        <h3 class="font-semibold mb-4 text-lg text-gray-800 dark:text-white">{{ __('general.contact_information') }}</h3>
                        <div class="grid grid-cols-2 gap-6">
                            <div class="col-span-2">
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">{{ __('general.email') }}</label>
                                <input type="email" name="contact_email" value="{{ old('contact_email', auth()->user()->email ?? '') }}" required class="mt-2 block w-full rounded-lg border-gray-300 dark:border-gray-600 shadow-sm focus:border-primary focus:ring-primary dark:bg-gray-900 dark:text-white py-3 px-4">
                            </div>
                            <div class="col-span-2">
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">{{ __('general.phone') }}</label>
                                <input type="text" name="contact_phone" value="{{ old('contact_phone', auth()->user()->phone ?? '') }}" required class="mt-2 block w-full rounded-lg border-gray-300 dark:border-gray-600 shadow-sm focus:border-primary focus:ring-primary dark:bg-gray-900 dark:text-white py-3 px-4">
                            </div>
                        </div>
                    </div>
                    <input type="hidden" name="payment_method" value="cod">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">{{ __('general.order_notes_optional') }}</label>
                        <textarea name="notes" rows="3" class="mt-2 block w-full rounded-lg border-gray-300 dark:border-gray-600 shadow-sm focus:border-primary focus:ring-primary dark:bg-gray-900 dark:text-white py-3 px-4"></textarea>
                    </div>
                    <button type="submit" class="w-full bg-primary text-white py-4 px-4 rounded-xl hover:bg-orange-600 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 text-lg font-bold shadow-lg transition-all duration-200 mt-2">
                        {{ __('general.place_order') }}
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection