@extends('layouts.admin')

@section('page-title', 'Process Payment - Order #' . $order->order_number)

@section('content')
<div class="max-w-4xl mx-auto">
    <div class="mb-6 flex items-center justify-between">
        <a href="{{ route('admin.orders.show', $order) }}" class="text-sm text-gray-600 hover:text-gray-900 flex items-center gap-1">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/></svg>
            Back to Order
        </a>
        <span class="px-3 py-1 rounded-full text-xs font-semibold bg-blue-100 text-blue-800">Processing Payment</span>
    </div>

    <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
        {{-- Order Summary --}}
        <div class="p-6 border-b border-gray-200">
            <h2 class="text-lg font-semibold mb-4">Order #{{ $order->order_number }}</h2>
            <div class="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm">
                <div>
                    <p class="text-gray-500">Customer</p>
                    <p class="font-medium">{{ $order->customer?->name ?? 'Walk-in' }}</p>
                </div>
                <div>
                    <p class="text-gray-500">Status</p>
                    <p class="font-medium capitalize">{{ $order->status }}</p>
                </div>
                <div>
                    <p class="text-gray-500">Payment</p>
                    <p class="font-medium capitalize text-red-600">{{ $order->payment_status }}</p>
                </div>
                <div>
                    <p class="text-gray-500">Total</p>
                    <p class="font-bold text-lg">{{ $currencySymbol }}{{ number_format($order->total, 2) }}</p>
                </div>
            </div>
        </div>

        {{-- Order Items --}}
        <div class="p-6 border-b border-gray-200">
            <h3 class="text-sm font-semibold mb-3">Order Items ({{ $order->items->count() }})</h3>
            <div class="space-y-2">
                @foreach($order->items as $item)
                <div class="flex items-center justify-between py-2 border-b border-gray-100 last:border-0">
                    <div class="flex items-center gap-3">
                        @if($item->product?->primaryImage)
                            <img src="{{ asset('storage/' . $item->product->primaryImage->path) }}" class="w-10 h-10 rounded object-cover">
                        @else
                            <div class="w-10 h-10 rounded bg-gray-100 flex items-center justify-center text-gray-400">
                                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"/></svg>
                            </div>
                        @endif
                        <div>
                            <p class="font-medium text-sm">{{ $item->product_name ?? ($item->product?->name ?? 'Deleted') }}</p>
                            <p class="text-xs text-gray-500">Qty: {{ $item->quantity }} × {{ $currencySymbol }}{{ number_format($item->price, 2) }}</p>
                        </div>
                    </div>
                    <span class="font-semibold text-sm">{{ $currencySymbol }}{{ number_format($item->subtotal, 2) }}</span>
                </div>
                @endforeach
            </div>
        </div>

        {{-- Payment Section --}}
        <div class="p-6">
            <h3 class="text-sm font-semibold mb-4">Select Payment Method</h3>
            <div class="grid grid-cols-2 md:grid-cols-3 gap-3 mb-6">
                <button onclick="selectPayment('cash')" id="pay-cash" class="payment-btn border-2 border-gray-200 rounded-lg p-4 text-center hover:border-emerald-500 hover:bg-emerald-50 transition">
                    <svg class="w-8 h-8 mx-auto mb-2 text-emerald-600" 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="text-sm font-medium">Cash</span>
                </button>
                <button onclick="selectPayment('card')" id="pay-card" class="payment-btn border-2 border-gray-200 rounded-lg p-4 text-center hover:border-indigo-500 hover:bg-indigo-50 transition">
                    <svg class="w-8 h-8 mx-auto mb-2 text-indigo-600" 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="text-sm font-medium">Card</span>
                </button>
                <button onclick="selectPayment('mtn_momo')" id="pay-mtn_momo" class="payment-btn border-2 border-gray-200 rounded-lg p-4 text-center hover:border-yellow-500 hover:bg-yellow-50 transition">
                    <div class="w-8 h-8 mx-auto mb-2 bg-yellow-400 rounded flex items-center justify-center">
                        <span class="text-xs font-bold text-white">MTN</span>
                    </div>
                    <span class="text-sm font-medium">MTN MoMo</span>
                </button>
                <button onclick="selectPayment('telecash')" id="pay-telecash" class="payment-btn border-2 border-gray-200 rounded-lg p-4 text-center hover:border-red-500 hover:bg-red-50 transition">
                    <div class="w-8 h-8 mx-auto mb-2 bg-red-600 rounded flex items-center justify-center">
                        <span class="text-xs font-bold text-white">Telecel</span>
                    </div>
                    <span class="text-sm font-medium">Telecel</span>
                </button>
                <button onclick="selectPayment('paystack')" id="pay-paystack" class="payment-btn border-2 border-gray-200 rounded-lg p-4 text-center hover:border-green-500 hover:bg-green-50 transition">
                    <svg class="w-8 h-8 mx-auto mb-2 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
                    <span class="text-sm font-medium">Paystack</span>
                </button>
                <button onclick="selectPayment('flutterwave')" id="pay-flutterwave" class="payment-btn border-2 border-gray-200 rounded-lg p-4 text-center hover:border-orange-500 hover:bg-orange-50 transition">
                    <svg class="w-8 h-8 mx-auto mb-2 text-orange-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
                    <span class="text-sm font-medium">Flutterwave</span>
                </button>
            </div>

            {{-- Cash Fields --}}
            <div id="cash-fields" class="hidden mb-6">
                <label class="block text-sm font-medium text-gray-700 mb-2">Amount Tendered</label>
                <input type="number" id="amount-tendered" step="0.01" min="0" class="w-full px-4 py-3 border-2 border-gray-300 rounded-lg text-lg font-semibold text-center focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500 outline-none" placeholder="0.00">
                <div class="bg-emerald-50 rounded-lg p-4 mt-3">
                    <div class="flex items-center justify-between">
                        <span class="text-sm font-medium text-gray-600">Change</span>
                        <span id="change-amount" class="text-2xl font-bold text-emerald-600">{{ $currencySymbol }}0.00</span>
                    </div>
                </div>
            </div>

            {{-- Mobile Money Fields --}}
            <div id="momo-fields" class="hidden mb-6">
                <label class="block text-sm font-medium text-gray-700 mb-2">Customer Phone Number</label>
                <input type="text" id="momo-phone" class="w-full px-4 py-3 border-2 border-gray-300 rounded-lg text-center focus:ring-2 focus:ring-yellow-500 focus:border-yellow-500 outline-none" placeholder="+233 XX XXX XXXX" value="{{ $order->shipping_address['phone'] ?? ($order->customer?->phone ?? '') }}">
            </div>

            <button onclick="confirmPayment()" id="confirm-btn" class="w-full py-3 bg-emerald-600 hover:bg-emerald-700 text-white text-sm font-semibold rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-emerald-600" disabled>
                Confirm Payment - {{ $currencySymbol }}{{ number_format($order->total, 2) }}
            </button>
        </div>
    </div>
</div>

{{-- Success Modal --}}
<div id="success-modal" class="hidden fixed inset-0 bg-black/50 flex items-center justify-center z-50">
    <div class="bg-white rounded-xl shadow-xl w-full max-w-sm p-6 text-center">
        <div class="w-16 h-16 mx-auto mb-4 rounded-full bg-green-100 flex items-center justify-center">
            <svg class="w-8 h-8 text-green-600" 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>
        </div>
        <h3 class="text-lg font-bold text-gray-900 mb-2">Payment Complete!</h3>
        <p id="success-order-number" class="text-sm text-gray-500 mb-2"></p>
        <p id="success-change" class="text-sm text-green-600 font-medium mb-4 hidden"></p>
        <div class="flex gap-2">
            <a href="{{ route('admin.orders.index') }}" class="flex-1 py-3 bg-gray-100 hover:bg-gray-200 text-gray-700 text-sm font-semibold rounded-lg transition-colors text-center">
                View Orders
            </a>
            <button onclick="window.location.reload()" class="flex-1 py-3 bg-indigo-600 hover:bg-indigo-700 text-white text-sm font-semibold rounded-lg transition-colors">
                New Payment
            </button>
        </div>
    </div>
</div>

<script>
let selectedPaymentMethod = '';
const orderTotal = {{ $order->total }};
const currencySymbol = '{{ $currencySymbol }}';
const orderId = {{ $order->id }};
const csrfToken = '{{ csrf_token() }}';

function selectPayment(method) {
    selectedPaymentMethod = method;
    
    document.querySelectorAll('.payment-btn').forEach(btn => {
        btn.classList.remove('border-emerald-500', 'border-indigo-500', 'border-yellow-500', 'border-red-500', 'border-green-500', 'border-orange-500', 'bg-emerald-50', 'bg-indigo-50', 'bg-yellow-50', 'bg-red-50', 'bg-green-50', 'bg-orange-50');
        btn.classList.add('border-gray-200');
    });
    
    const btn = document.getElementById('pay-' + method);
    btn.classList.remove('border-gray-200');
    
    const colorMap = {
        cash: 'emerald',
        card: 'indigo',
        mtn_momo: 'yellow',
        telecash: 'red',
        paystack: 'green',
        flutterwave: 'orange'
    };
    const color = colorMap[method];
    btn.classList.add('border-' + color + '-500', 'bg-' + color + '-50');
    
    document.getElementById('cash-fields').classList.add('hidden');
    document.getElementById('momo-fields').classList.add('hidden');
    
    if (method === 'cash') {
        document.getElementById('cash-fields').classList.remove('hidden');
        document.getElementById('amount-tendered').value = '';
        document.getElementById('change-amount').textContent = currencySymbol + '0.00';
        document.getElementById('confirm-btn').disabled = true;
    } else if (method === 'mtn_momo' || method === 'telecash') {
        document.getElementById('momo-fields').classList.remove('hidden');
        document.getElementById('confirm-btn').disabled = false;
    } else {
        document.getElementById('confirm-btn').disabled = false;
    }
}

document.getElementById('amount-tendered').addEventListener('input', function() {
    const tendered = parseFloat(this.value) || 0;
    const change = Math.max(0, tendered - orderTotal);
    document.getElementById('change-amount').textContent = currencySymbol + change.toFixed(2);
    document.getElementById('confirm-btn').disabled = tendered < orderTotal;
});

async function confirmPayment() {
    const btn = document.getElementById('confirm-btn');
    btn.disabled = true;
    btn.textContent = 'Processing...';
    
    let payload = {
        _token: csrfToken,
        payment_method: selectedPaymentMethod,
    };
    
    if (selectedPaymentMethod === 'cash') {
        payload.amount_tendered = parseFloat(document.getElementById('amount-tendered').value) || orderTotal;
    } else if (selectedPaymentMethod === 'mtn_momo' || selectedPaymentMethod === 'telecash') {
        payload.customer_phone = document.getElementById('momo-phone').value;
    }
    
    try {
        const response = await fetch('{{ route('admin.pos.process-payment', $order) }}', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },
            body: JSON.stringify(payload),
        });
        const data = await response.json();
        
        if (data.success) {
            document.getElementById('success-modal').classList.remove('hidden');
            document.getElementById('success-order-number').textContent = 'Order: ' + data.order.order_number;
            
            const changeEl = document.getElementById('success-change');
            if (selectedPaymentMethod === 'cash' && data.payment.change > 0) {
                changeEl.textContent = 'Change: ' + currencySymbol + data.payment.change.toFixed(2);
                changeEl.classList.remove('hidden');
            } else {
                changeEl.classList.add('hidden');
            }
        } else {
            alert(data.message || 'Payment failed');
            btn.disabled = false;
            btn.textContent = 'Confirm Payment - ' + currencySymbol + orderTotal.toFixed(2);
        }
    } catch (error) {
        alert('Network error. Please try again.');
        btn.disabled = false;
        btn.textContent = 'Confirm Payment - ' + currencySymbol + orderTotal.toFixed(2);
    }
}
</script>
@endsection