@extends('layouts.app')

@section('title', 'Place Order - ' . $product->name)

@section('content')
<div class="max-w-4xl mx-auto">
    <!-- Breadcrumb -->
    <nav class="mb-6" aria-label="Breadcrumb">
        <ol class="flex items-center space-x-2 text-sm">
            <li>
                <a href="{{ route('marketplace.index') }}" class="text-gray-500 hover:text-gray-700">Marketplace</a>
            </li>
            <li>
                <svg class="h-5 w-5 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
                    <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"/>
                </svg>
            </li>
            <li>
                <a href="{{ route('marketplace.show', $product) }}" class="text-gray-500 hover:text-gray-700">{{ Str::limit($product->name, 20) }}</a>
            </li>
            <li>
                <svg class="h-5 w-5 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
                    <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"/>
                </svg>
            </li>
            <li>
                <span class="text-gray-700">Place Order</span>
            </li>
        </ol>
    </nav>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
        <!-- Order Form -->
        <div class="lg:col-span-2">
            <div class="bg-white shadow rounded-lg">
                <div class="px-6 py-4 border-b border-gray-200">
                    <h2 class="text-lg font-medium text-gray-900">Order Information</h2>
                </div>
                <div class="p-6">
                    <form action="{{ route('orders.store', $product) }}" method="POST" id="orderForm">
                        @csrf

                        <!-- Product Summary -->
                        <div class="mb-6 p-4 bg-gray-50 rounded-lg">
                            <div class="flex items-center space-x-4">
                                <img src="{{ $product->getFirstImageUrl() }}" 
                                     alt="{{ $product->name }}"
                                     class="w-16 h-16 object-cover rounded">
                                <div class="flex-1">
                                    <h3 class="font-medium text-gray-900">{{ $product->name }}</h3>
                                    <p class="text-sm text-gray-600">Seller: {{ $product->user->company_name ?? $product->user->name }}</p>
                                    <p class="text-lg font-bold text-green-600">${{ number_format($product->price, 2) }}/unit</p>
                                </div>
                            </div>
                        </div>

                        <!-- Quantity -->
                        <div class="mb-6">
                            <label for="quantity" class="block text-sm font-medium text-gray-700 mb-2">
                                Quantity *
                            </label>
                            <div class="flex items-center space-x-4">
                                <input type="number" 
                                       name="quantity" 
                                       id="quantity"
                                       min="1" 
                                       max="{{ $product->quantity }}"
                                       value="1"
                                       required
                                       class="w-32 px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-green-500 focus:border-green-500"
                                       onchange="updateTotal()">
                                <span class="text-sm text-gray-500">
                                    Maximum: {{ $product->quantity }} units available
                                </span>
                            </div>
                            @error('quantity')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Payment Method -->
                        <div class="mb-6">
                            <label class="block text-sm font-medium text-gray-700 mb-4">
                                Payment Method *
                            </label>
                            <div class="grid grid-cols-1 md:grid-cols-3 gap-4" id="payment-methods">
                                <!-- Bank Transfer -->
                                <div class="payment-option relative">
                                    <input type="radio" name="payment_method" id="bank_transfer" value="bank_transfer" class="sr-only" required>
                                    <label for="bank_transfer" class="flex flex-col p-4 border-2 border-gray-200 rounded-lg cursor-pointer hover:border-green-500 transition-colors duration-200">
                                        <div class="flex items-center mb-2">
                                            <div class="w-6 h-6 border-2 border-gray-300 rounded-full flex items-center justify-center mr-3">
                                                <div class="w-3 h-3 bg-green-500 rounded-full hidden"></div>
                                            </div>
                                            <svg class="w-8 h-8 text-blue-600 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/>
                                            </svg>
                                            <span class="font-medium text-gray-900">Bank Transfer</span>
                                        </div>
                                        <p class="text-sm text-gray-600 ml-9">Direct bank transfer</p>
                                    </label>
                                </div>

                                <!-- M-Pesa -->
                                <div class="payment-option relative">
                                    <input type="radio" name="payment_method" id="mpesa" value="mpesa" class="sr-only" required>
                                    <label for="mpesa" class="flex flex-col p-4 border-2 border-gray-200 rounded-lg cursor-pointer hover:border-green-500 transition-colors duration-200">
                                        <div class="flex items-center mb-2">
                                            <div class="w-6 h-6 border-2 border-gray-300 rounded-full flex items-center justify-center mr-3">
                                                <div class="w-3 h-3 bg-green-500 rounded-full hidden"></div>
                                            </div>
                                            <svg class="w-8 h-8 text-green-600 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z"/>
                                            </svg>
                                            <span class="font-medium text-gray-900">M-Pesa</span>
                                        </div>
                                        <p class="text-sm text-gray-600 ml-9">Mobile money payment</p>
                                    </label>
                                </div>

                                <!-- Wire Transfer -->
                                <div class="payment-option relative">
                                    <input type="radio" name="payment_method" id="wire_transfer" value="wire_transfer" class="sr-only" required>
                                    <label for="wire_transfer" class="flex flex-col p-4 border-2 border-gray-200 rounded-lg cursor-pointer hover:border-green-500 transition-colors duration-200">
                                        <div class="flex items-center mb-2">
                                            <div class="w-6 h-6 border-2 border-gray-300 rounded-full flex items-center justify-center mr-3">
                                                <div class="w-3 h-3 bg-green-500 rounded-full hidden"></div>
                                            </div>
                                            <svg class="w-8 h-8 text-purple-600 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 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>
                                            <span class="font-medium text-gray-900">Wire Transfer</span>
                                        </div>
                                        <p class="text-sm text-gray-600 ml-9">International wire transfer</p>
                                    </label>
                                </div>
                            </div>
                            @error('payment_method')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Payment Instructions -->
                        <div id="payment-instructions" class="mb-6 hidden">
                            <div class="bg-blue-50 border border-blue-200 rounded-lg p-4">
                                <h4 class="text-sm font-medium text-blue-800 mb-2" id="instruction-title">Payment Instructions</h4>
                                <div id="instruction-content">
                                    <!-- Instructions will be dynamically inserted here -->
                                </div>
                            </div>
                        </div>

                        <!-- Shipping Address -->
                        <div class="mb-6">
                            <label for="shipping_address" class="block text-sm font-medium text-gray-700 mb-2">
                                Shipping Address *
                            </label>
                            <textarea name="shipping_address" 
                                      id="shipping_address" 
                                      rows="4"
                                      required
                                      placeholder="Enter your complete shipping address including street, city, state, and zip code"
                                      class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-green-500 focus:border-green-500">{{ old('shipping_address', auth()->user()->shipping_address ?? '') }}</textarea>
                            @error('shipping_address')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Notes -->
                        <div class="mb-6">
                            <label for="notes" class="block text-sm font-medium text-gray-700 mb-2">
                                Order Notes (Optional)
                            </label>
                            <textarea name="notes" 
                                      id="notes" 
                                      rows="3"
                                      placeholder="Any special instructions or requirements for this order..."
                                      class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-green-500 focus:border-green-500">{{ old('notes') }}</textarea>
                            @error('notes')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Submit Button -->
                        <div class="flex items-center justify-between pt-6 border-t border-gray-200">
                            <a href="{{ route('marketplace.show', $product) }}" 
                               class="bg-gray-600 hover:bg-gray-700 text-white px-6 py-2 rounded-md text-sm font-medium transition-colors">
                                Cancel
                            </a>
                            <button type="submit" 
                                    class="bg-green-600 hover:bg-green-700 text-white px-8 py-2 rounded-md text-sm font-medium flex items-center transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
                                    id="submit-btn">
                                <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                                </svg>
                                Place Order
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- Order Summary -->
        <div class="lg:col-span-1">
            <div class="bg-white shadow rounded-lg sticky top-4">
                <div class="px-6 py-4 border-b border-gray-200">
                    <h2 class="text-lg font-medium text-gray-900">Order Summary</h2>
                </div>
                <div class="p-6">
                    <!-- Product Details -->
                    <div class="mb-4">
                        <div class="flex justify-between text-sm text-gray-600 mb-2">
                            <span>Product Price</span>
                            <span>$<span id="unit-price">{{ number_format($product->price, 2) }}</span></span>
                        </div>
                        <div class="flex justify-between text-sm text-gray-600 mb-2">
                            <span>Quantity</span>
                            <span id="quantity-display">1</span>
                        </div>
                        <div class="flex justify-between text-sm text-gray-600 mb-4">
                            <span>Shipping</span>
                            <span class="text-green-600">Calculated later</span>
                        </div>
                    </div>

                    <!-- Total -->
                    <div class="border-t border-gray-200 pt-4 mb-4">
                        <div class="flex justify-between items-center">
                            <span class="text-base font-medium text-gray-900">Total Amount</span>
                            <span class="text-xl font-bold text-green-600">$<span id="total-amount">{{ number_format($product->price, 2) }}</span></span>
                        </div>
                    </div>

                    <!-- Payment Notice -->
                    <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-4 mb-4">
                        <div class="flex">
                            <svg class="h-5 w-5 text-yellow-400 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z"/>
                            </svg>
                            <div class="text-sm text-yellow-700">
                                <p class="font-medium">Payment Required</p>
                                <p class="mt-1">Your order will be processed after payment confirmation by our team.</p>
                            </div>
                        </div>
                    </div>

                    <!-- Order Details -->
                    <div class="text-xs text-gray-500 space-y-1">
                        <p>• Order will be confirmed after payment verification</p>
                        <p>• Shipping costs will be calculated separately</p>
                        <p>• You will receive payment instructions after order placement</p>
                        <p>• You can chat with the seller for any questions</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
// Payment method instructions
const paymentInstructions = {
    bank_transfer: {
        title: 'Bank Transfer Instructions',
        content: `
            <p class="text-sm text-blue-700 mb-2">Please transfer the amount to our bank account:</p>
            <div class="text-sm space-y-1">
                <p><strong>Bank:</strong> Kenya Commercial Bank</p>
                <p><strong>Account Name:</strong> AMAC Mazao Platform</p>
                <p><strong>Account Number:</strong> 1234567890</p>
                <p><strong>Branch:</strong> Nairobi Main Branch</p>
                <p><strong>Swift Code:</strong> KCBLKENX</p>
            </div>
            <p class="text-sm text-blue-700 mt-3">Include your order number as the payment reference.</p>
        `
    },
    mpesa: {
        title: 'M-Pesa Payment Instructions',
        content: `
            <p class="text-sm text-green-700 mb-2">Please use the following steps to complete your payment:</p>
            <div class="text-sm space-y-2">
                <p>1. Go to M-Pesa on your phone</p>
                <p>2. Select "Lipa Na M-Pesa"</p>
                <p>3. Select "Pay Bill"</p>
                <p>4. Enter Business Number: <strong>123456</strong></p>
                <p>5. Enter Account Number: <strong>Your Order Number</strong></p>
                <p>6. Enter the amount: <strong>$<span id="mpesa-amount">${document.getElementById('total-amount').textContent}</span></strong></p>
                <p>7. Enter your M-Pesa PIN and confirm</p>
            </div>
            <p class="text-sm text-green-700 mt-3">You will receive a confirmation message from M-Pesa.</p>
        `
    },
    wire_transfer: {
        title: 'Wire Transfer Instructions',
        content: `
            <p class="text-sm text-purple-700 mb-2">For international wire transfers, please use:</p>
            <div class="text-sm space-y-1">
                <p><strong>Beneficiary Bank:</strong> Kenya Commercial Bank</p>
                <p><strong>SWIFT/BIC:</strong> KCBLKENX</p>
                <p><strong>Account Name:</strong> AMAC Mazao Platform</p>
                <p><strong>Account Number:</strong> 1234567890</p>
                <p><strong>Bank Address:</strong> Kenyatta Avenue, Nairobi, Kenya</p>
                <p><strong>Intermediary Bank:</strong> Standard Chartered Bank, New York</p>
                <p><strong>Intermediary SWIFT:</strong> SCBLUS33</p>
            </div>
            <p class="text-sm text-purple-700 mt-3">Include your order number in the transfer details.</p>
        `
    }
};

function updateTotal() {
    const quantity = parseInt(document.getElementById('quantity').value) || 1;
    const unitPrice = parseFloat({{ $product->price }});
    const totalAmount = quantity * unitPrice;
    
    document.getElementById('quantity-display').textContent = quantity;
    document.getElementById('total-amount').textContent = totalAmount.toFixed(2);
    
    // Update M-Pesa amount if visible
    const mpesaAmount = document.getElementById('mpesa-amount');
    if (mpesaAmount) {
        mpesaAmount.textContent = totalAmount.toFixed(2);
    }
}

// Payment method selection
document.addEventListener('DOMContentLoaded', function() {
    const paymentOptions = document.querySelectorAll('.payment-option input[type="radio"]');
    const paymentInstructionsDiv = document.getElementById('payment-instructions');
    const instructionTitle = document.getElementById('instruction-title');
    const instructionContent = document.getElementById('instruction-content');
    const submitBtn = document.getElementById('submit-btn');
    
    // Initialize payment method selection
    paymentOptions.forEach(option => {
        option.addEventListener('change', function() {
            // Update visual selection
            document.querySelectorAll('.payment-option').forEach(opt => {
                const label = opt.querySelector('label');
                const check = opt.querySelector('.w-3.h-3');
                label.classList.remove('border-green-500', 'bg-green-50');
                if (check) check.classList.add('hidden');
            });
            
            const selectedOption = this.closest('.payment-option');
            const selectedLabel = selectedOption.querySelector('label');
            const selectedCheck = selectedOption.querySelector('.w-3.h-3');
            
            selectedLabel.classList.add('border-green-500', 'bg-green-50');
            if (selectedCheck) selectedCheck.classList.remove('hidden');
            
            // Show payment instructions
            const method = this.value;
            if (paymentInstructions[method]) {
                instructionTitle.textContent = paymentInstructions[method].title;
                instructionContent.innerHTML = paymentInstructions[method].content;
                paymentInstructionsDiv.classList.remove('hidden');
                
                // Update M-Pesa amount if needed
                if (method === 'mpesa') {
                    const mpesaAmount = document.getElementById('mpesa-amount');
                    if (mpesaAmount) {
                        mpesaAmount.textContent = document.getElementById('total-amount').textContent;
                    }
                }
            } else {
                paymentInstructionsDiv.classList.add('hidden');
            }
            
            // Enable submit button
            submitBtn.disabled = false;
        });
    });
    
    // Form validation
    const orderForm = document.getElementById('orderForm');
    orderForm.addEventListener('submit', function(e) {
        const selectedPayment = document.querySelector('input[name="payment_method"]:checked');
        if (!selectedPayment) {
            e.preventDefault();
            alert('Please select a payment method.');
            return;
        }
        
        // Additional validation can be added here
        const quantity = parseInt(document.getElementById('quantity').value);
        if (quantity < 1 || quantity > {{ $product->quantity }}) {
            e.preventDefault();
            alert('Please enter a valid quantity.');
            return;
        }
    });
    
    // Initialize on page load
    updateTotal();
    
    // Disable submit button until payment method is selected
    submitBtn.disabled = true;
});

// Update M-Pesa amount when quantity changes
document.getElementById('quantity').addEventListener('input', function() {
    updateTotal();
});
</script>

<style>
.payment-option input[type="radio"]:checked + label {
    border-color: #10B981;
    background-color: #ECFDF5;
}

.payment-option input[type="radio"]:checked + label .w-3.h-3 {
    display: block;
}
</style>
@endsection