@extends('layouts.app')

@section('title', 'Checkout')

@section('content')
<div class="bg-gray-50 min-h-screen py-8">
    <div class="container mx-auto px-4">
        <h1 class="text-3xl font-bold text-gray-900 mb-8">Checkout</h1>

        <form action="{{ route('checkout.process') }}" method="POST">
            @csrf
            <div class="grid lg:grid-cols-3 gap-8">
                <!-- Checkout Form -->
                <div class="lg:col-span-2 space-y-6">
                    <!-- Delivery Method -->
                    <div class="bg-white rounded-2xl shadow-sm p-6">
                        <h2 class="font-semibold text-lg mb-4">Delivery Method</h2>
                        
                        <div class="space-y-3">
                            <label class="flex items-start p-4 border rounded-xl cursor-pointer hover:border-blue-500 transition">
                                <input type="radio" name="delivery_method" value="supplier_delivery" class="mt-1 mr-3" checked>
                                <div>
                                    <span class="font-medium">Supplier Delivery</span>
                                    <p class="text-sm text-gray-500">Delivered directly by the supplier</p>
                                </div>
                            </label>
                            
                            <label class="flex items-start p-4 border rounded-xl cursor-pointer hover:border-blue-500 transition">
                                <input type="radio" name="delivery_method" value="platform_delivery" class="mt-1 mr-3">
                                <div>
                                    <span class="font-medium">Platform Delivery</span>
                                    <p class="text-sm text-gray-500">Delivered by ProcureHub logistics</p>
                                </div>
                            </label>
                            
                            <label class="flex items-start p-4 border rounded-xl cursor-pointer hover:border-blue-500 transition">
                                <input type="radio" name="delivery_method" value="collection" class="mt-1 mr-3">
                                <div>
                                    <span class="font-medium">Collection</span>
                                    <p class="text-sm text-gray-500">Collect from supplier location</p>
                                </div>
                            </label>
                        </div>
                    </div>

                    <!-- Delivery Address -->
                    <div class="bg-white rounded-2xl shadow-sm p-6" id="delivery-address-section">
                        <h2 class="font-semibold text-lg mb-4">Delivery Address</h2>
                        
                        <div class="grid md:grid-cols-2 gap-4">
                            <div class="md:col-span-2">
                                <label class="block text-sm font-medium text-gray-700 mb-1">Street Address</label>
                                <input type="text" name="delivery_address" value="{{ $company?->address }}" 
                                    class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                                    placeholder="123 Main Street">
                                @error('delivery_address')
                                    <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                                @enderror
                            </div>
                            
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">City</label>
                                <input type="text" name="delivery_city" value="{{ $company?->city }}" 
                                    class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                                    placeholder="Johannesburg">
                                @error('delivery_city')
                                    <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                                @enderror
                            </div>
                            
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">Postal Code</label>
                                <input type="text" name="delivery_postal_code" value="{{ $company?->postal_code }}" 
                                    class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                                    placeholder="2000">
                                @error('delivery_postal_code')
                                    <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <!-- Payment Method -->
                    <div class="bg-white rounded-2xl shadow-sm p-6">
                        <h2 class="font-semibold text-lg mb-4">Payment Method</h2>
                        
                        <div class="space-y-3">
                            <label class="flex items-start p-4 border rounded-xl cursor-pointer hover:border-blue-500 transition">
                                <input type="radio" name="payment_method" value="30_days" class="mt-1 mr-3" checked>
                                <div>
                                    <span class="font-medium">30 Days Payment Terms</span>
                                    <p class="text-sm text-gray-500">Pay within 30 days of order confirmation</p>
                                </div>
                            </label>
                            
                            <label class="flex items-start p-4 border rounded-xl cursor-pointer hover:border-blue-500 transition">
                                <input type="radio" name="payment_method" value="ozow" class="mt-1 mr-3">
                                <div class="flex items-center gap-2">
                                    <span class="font-medium">Pay Now with Ozow</span>
                                    <span class="bg-green-100 text-green-800 text-xs px-2 py-0.5 rounded">Instant EFT</span>
                                </div>
                                <p class="text-sm text-gray-500 mt-1">Secure instant payment via your bank</p>
                            </label>
                        </div>
                    </div>

                    <!-- Order Notes -->
                    <div class="bg-white rounded-2xl shadow-sm p-6">
                        <h2 class="font-semibold text-lg mb-4">Order Notes (Optional)</h2>
                        <textarea name="notes" rows="3" 
                            class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                            placeholder="Any special instructions for your order..."></textarea>
                    </div>
                </div>

                <!-- Order Summary -->
                <div class="lg:col-span-1">
                    <div class="bg-white rounded-2xl shadow-sm p-6 sticky top-4">
                        <h2 class="font-semibold text-lg mb-6">Order Summary</h2>

                        <!-- Cart Items -->
                        <div class="space-y-4 mb-6 max-h-64 overflow-y-auto">
                            @foreach($cartItems as $item)
                                <div class="flex gap-3">
                                    <div class="w-16 h-16 bg-gray-100 rounded-lg overflow-hidden flex-shrink-0">
                                        @if($item->product->image_url)
                                            <img src="{{ $item->product->image_url }}" alt="{{ $item->product->name }}" class="w-full h-full object-cover">
                                        @else
                                            <div class="w-full h-full flex items-center justify-center text-xl text-gray-300">📦</div>
                                        @endif
                                    </div>
                                    <div class="flex-1">
                                        <p class="font-medium text-sm line-clamp-1">{{ $item->product->name }}</p>
                                        <p class="text-sm text-gray-500">Qty: {{ $item->quantity }}</p>
                                        <p class="text-sm font-semibold">R {{ number_format($item->quantity * $item->product->price, 2) }}</p>
                                    </div>
                                </div>
                            @endforeach
                        </div>

                        <div class="border-t pt-4 space-y-3">
                            <div class="flex justify-between">
                                <span class="text-gray-600">Subtotal</span>
                                <span class="font-medium">R {{ number_format($subtotal, 2) }}</span>
                            </div>
                            <div class="flex justify-between">
                                <span class="text-gray-600">VAT (15%)</span>
                                <span class="font-medium">R {{ number_format($tax, 2) }}</span>
                            </div>
                            <div class="flex justify-between text-sm text-gray-500">
                                <span>Delivery</span>
                                <span>Calculated based on location</span>
                            </div>
                            <div class="border-t pt-3 flex justify-between">
                                <span class="font-bold text-lg">Total</span>
                                <span class="font-bold text-lg text-blue-600">R {{ number_format($total, 2) }}</span>
                            </div>
                        </div>

                        <button type="submit" class="w-full mt-6 bg-blue-600 text-white py-3 px-6 rounded-xl font-semibold hover:bg-blue-700 transition">
                            Place Order
                        </button>

                        <a href="{{ route('cart.index') }}" class="block text-center mt-4 text-blue-600 hover:underline text-sm">
                            Back to Cart
                        </a>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>

<script>
document.querySelectorAll('input[name="delivery_method"]').forEach(radio => {
    radio.addEventListener('change', function() {
        const addressSection = document.getElementById('delivery-address-section');
        if (this.value === 'collection') {
            addressSection.style.display = 'none';
        } else {
            addressSection.style.display = 'block';
        }
    });
});
</script>
@endsection