@extends('layouts.app')

@section('title', 'Checkout - Memorycloset Media')

@section('content')
<div class="container mx-auto px-4 py-8 md:py-12">
    <h1 class="text-3xl md:text-4xl font-serif font-bold text-[#524438] mb-6 md:mb-8">Checkout</h1>

    <form action="{{ route('orders.store') }}" method="POST" class="grid grid-cols-1 lg:grid-cols-3 gap-6 md:gap-8">
        @csrf

        <!-- Customer Information -->
        <div class="lg:col-span-2 space-y-6">
            <div class="bg-white rounded-2xl shadow-md border border-[#e8ddd0] p-6 md:p-8">
                <h2 class="text-2xl font-serif font-bold text-[#524438] mb-6">Customer Information</h2>
                
                <div class="space-y-4">
                    <div>
                        <label for="customer_name" class="block text-sm font-semibold text-[#524438] mb-2">Full Name *</label>
                        <input type="text" 
                               id="customer_name" 
                               name="customer_name" 
                               value="{{ old('customer_name') }}" 
                               required
                               class="w-full px-4 py-3 border-2 border-[#e8ddd0] rounded-xl focus:ring-2 focus:ring-[#9d8566] focus:border-[#9d8566] transition-all outline-none text-[#524438]">
                        @error('customer_name')
                            <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label for="customer_email" class="block text-sm font-semibold text-[#524438] mb-2">Email *</label>
                        <input type="email" 
                               id="customer_email" 
                               name="customer_email" 
                               value="{{ old('customer_email') }}" 
                               required
                               class="w-full px-4 py-3 border-2 border-[#e8ddd0] rounded-xl focus:ring-2 focus:ring-[#9d8566] focus:border-[#9d8566] transition-all outline-none text-[#524438]">
                        @error('customer_email')
                            <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label for="customer_phone" class="block text-sm font-semibold text-[#524438] mb-2">Phone Number *</label>
                        <input type="tel" 
                               id="customer_phone" 
                               name="customer_phone" 
                               value="{{ old('customer_phone') }}" 
                               required
                               class="w-full px-4 py-3 border-2 border-[#e8ddd0] rounded-xl focus:ring-2 focus:ring-[#9d8566] focus:border-[#9d8566] transition-all outline-none text-[#524438]">
                        @error('customer_phone')
                            <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label for="customer_address" class="block text-sm font-semibold text-[#524438] mb-2">Delivery Address</label>
                        <textarea id="customer_address" 
                                  name="customer_address" 
                                  rows="3"
                                  class="w-full px-4 py-3 border-2 border-[#e8ddd0] rounded-xl focus:ring-2 focus:ring-[#9d8566] focus:border-[#9d8566] transition-all outline-none text-[#524438]">{{ old('customer_address') }}</textarea>
                        @error('customer_address')
                            <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label for="notes" class="block text-sm font-semibold text-[#524438] mb-2">Special Instructions or Notes</label>
                        <textarea id="notes" 
                                  name="notes" 
                                  rows="4"
                                  placeholder="Any special requests or delivery instructions..."
                                  class="w-full px-4 py-3 border-2 border-[#e8ddd0] rounded-xl focus:ring-2 focus:ring-[#9d8566] focus:border-[#9d8566] transition-all outline-none text-[#524438]">{{ old('notes') }}</textarea>
                        @error('notes')
                            <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
                        @enderror
                    </div>
                </div>
            </div>

            <div class="bg-[#fef3c7] border-2 border-[#fde68a] rounded-xl p-4">
                <div class="flex items-start gap-3">
                    <svg class="w-6 h-6 text-[#92400e] flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                    </svg>
                    <div class="text-sm text-[#92400e]">
                        <p class="font-semibold mb-1">No Payment Required</p>
                        <p>We'll contact you via phone or email to confirm your order and arrange payment/delivery details.</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Order Summary -->
        <div class="lg:col-span-1">
            <div class="bg-white rounded-2xl shadow-md border border-[#e8ddd0] p-6 sticky top-24">
                <h2 class="text-2xl font-serif font-bold text-[#524438] mb-6">Order Summary</h2>
                
                <div class="space-y-4 mb-6">
                    <div class="space-y-3 mb-4 max-h-64 overflow-y-auto pr-2">
                        @foreach($cartItems as $item)
                            <div class="flex justify-between items-start pb-3 border-b border-[#e8ddd0] last:border-0">
                                <div class="flex-1 pr-2">
                                    <p class="text-sm font-semibold text-[#524438]">{{ $item['product']->name }}</p>
                                    <p class="text-xs text-[#645443]">Qty: {{ $item['quantity'] }} × R{{ number_format($item['price'], 2) }}</p>
                                </div>
                                <p class="text-sm font-bold text-[#7d6a52] whitespace-nowrap">R{{ number_format($item['subtotal'], 2) }}</p>
                            </div>
                        @endforeach
                    </div>

                    <div class="pt-4 space-y-3 border-t-2 border-[#e8ddd0]">
                        <div class="flex justify-between items-center py-2">
                            <span class="text-[#645443] font-medium">Subtotal</span>
                            <span class="font-semibold text-[#524438] text-lg">R{{ number_format($subtotal, 2) }}</span>
                        </div>
                        <div class="pt-2 border-t border-[#e8ddd0]">
                            <div class="flex justify-between items-center bg-gradient-to-r from-[#f5f0e8] to-[#e8ddd0] p-4 rounded-xl">
                                <span class="text-xl font-bold text-[#524438]">Total</span>
                                <span class="text-2xl font-bold text-[#7d6a52]">R{{ number_format($total, 2) }}</span>
                            </div>
                        </div>
                    </div>
                </div>

                <button type="submit" class="w-full bg-[#7d6a52] text-white px-6 py-3 rounded-full font-semibold hover:bg-[#9d8566] transition-all shadow-lg hover:shadow-xl mb-4">
                    Place Order
                </button>

                <a href="{{ route('cart.index') }}" class="block text-center text-[#7d6a52] hover:text-[#9d8566] transition-colors font-medium text-sm">
                    ← Back to Cart
                </a>
            </div>
        </div>
    </form>
</div>
@endsection

