@extends('admin.layout')

@section('content')
<div class="max-w-4xl">
    <div class="mb-6">
        <h1 class="text-3xl font-bold text-gray-900">Receive Payment</h1>
        <p class="mt-1 text-sm text-gray-500">Record payment received from customers</p>
    </div>

    <div class="bg-white shadow-sm rounded-lg border border-gray-200 p-6">
        <form action="{{ route('admin.payments.store') }}" method="POST" id="paymentForm">
            @csrf
            
            <div class="space-y-6">
                <!-- Order Selection -->
                <div>
                    <label for="order_id" class="block text-sm font-medium text-gray-700 mb-1">Select Order *</label>
                    <select name="order_id" id="order_id" required
                            class="block w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500">
                        <option value="">-- Select an order --</option>
                        @foreach($unpaidOrders as $unpaidOrder)
                            <option value="{{ $unpaidOrder->id }}" 
                                    data-total="{{ $unpaidOrder->total_amount }}"
                                    data-paid="{{ $unpaidOrder->paid_amount }}"
                                    {{ $order && $order->id == $unpaidOrder->id ? 'selected' : '' }}>
                                {{ $unpaidOrder->order_number }} - {{ $unpaidOrder->customer->display_name }} 
                                (Total: ${{ number_format($unpaidOrder->total_amount, 2) }}, 
                                Paid: ${{ number_format($unpaidOrder->paid_amount, 2) }}, 
                                Balance: ${{ number_format($unpaidOrder->total_amount - $unpaidOrder->paid_amount, 2) }})
                            </option>
                        @endforeach
                    </select>
                    @error('order_id')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                @if($order)
                <!-- Order Details -->
                <div class="bg-gray-50 rounded-lg p-4 border border-gray-200">
                    <h3 class="text-sm font-semibold text-gray-700 mb-3">Order Details</h3>
                    <div class="grid grid-cols-2 gap-4 text-sm">
                        <div>
                            <span class="text-gray-500">Order Number:</span>
                            <span class="font-medium text-gray-900">{{ $order->order_number }}</span>
                        </div>
                        <div>
                            <span class="text-gray-500">Customer:</span>
                            <span class="font-medium text-gray-900">{{ $order->customer->name }}</span>
                        </div>
                        <div>
                            <span class="text-gray-500">Total Amount:</span>
                            <span class="font-medium text-gray-900">${{ number_format($order->total_amount, 2) }}</span>
                        </div>
                        <div>
                            <span class="text-gray-500">Paid Amount:</span>
                            <span class="font-medium text-gray-900">${{ number_format($order->paid_amount, 2) }}</span>
                        </div>
                        <div class="col-span-2">
                            <span class="text-gray-500">Remaining Balance:</span>
                            <span class="font-bold text-lg text-gray-900">${{ number_format($order->total_amount - $order->paid_amount, 2) }}</span>
                        </div>
                    </div>
                </div>
                @endif

                <!-- Payment Amount -->
                <div>
                    <label for="amount" class="block text-sm font-medium text-gray-700 mb-1">Payment Amount ($) *</label>
                    <input type="number" 
                           name="amount" 
                           id="amount" 
                           step="0.01" 
                           min="0.01"
                           value="{{ old('amount') }}"
                           required
                           class="block w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500">
                    <p class="mt-1 text-xs text-gray-500" id="balance-info"></p>
                    @error('amount')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Discount -->
                <div>
                    <label for="discount" class="block text-sm font-medium text-gray-700 mb-1">Discount ($)</label>
                    <input type="number" 
                           name="discount" 
                           id="discount" 
                           step="0.01" 
                           min="0"
                           value="{{ old('discount', '0.00') }}"
                           class="block w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500">
                    <p class="mt-1 text-xs text-gray-500" id="discount-info"></p>
                    @error('discount')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Payment Summary -->
                <div class="bg-blue-50 rounded-lg p-4 border border-blue-200" id="payment-summary" style="display: none;">
                    <h3 class="text-sm font-semibold text-gray-700 mb-2">Payment Summary</h3>
                    <div class="space-y-1 text-sm">
                        <div class="flex justify-between">
                            <span class="text-gray-600">Payment Amount:</span>
                            <span class="font-medium text-gray-900" id="summary-payment">$0.00</span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-gray-600">Discount:</span>
                            <span class="font-medium text-red-600" id="summary-discount">-$0.00</span>
                        </div>
                        <div class="flex justify-between pt-2 border-t border-blue-200">
                            <span class="font-semibold text-gray-700">Amount Applied:</span>
                            <span class="font-bold text-lg text-blue-600" id="summary-applied">$0.00</span>
                        </div>
                    </div>
                </div>

                <!-- Payment Method -->
                <div>
                    <label for="payment_method" class="block text-sm font-medium text-gray-700 mb-1">Payment Method *</label>
                    <select name="payment_method" id="payment_method" required
                            class="block w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500">
                        <option value="">Select Payment Method</option>
                        @foreach($paymentMethods as $method)
                            <option value="{{ $method->name }}" {{ old('payment_method') == $method->name ? 'selected' : '' }}>{{ $method->name }}</option>
                        @endforeach
                    </select>
                    @error('payment_method')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Notes -->
                <div>
                    <label for="notes" class="block text-sm font-medium text-gray-700 mb-1">Notes</label>
                    <textarea name="notes" 
                              id="notes" 
                              rows="3"
                              class="block w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-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-end gap-4 pt-4 border-t border-gray-200">
                    <a href="{{ route('admin.orders.index') }}" 
                       class="px-4 py-2 text-sm font-medium text-gray-700 bg-gray-100 rounded-lg hover:bg-gray-200">
                        Cancel
                    </a>
                    <button type="submit" 
                            class="px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-lg hover:bg-blue-700">
                        Receive Payment
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const orderSelect = document.getElementById('order_id');
    const amountInput = document.getElementById('amount');
    const discountInput = document.getElementById('discount');
    const balanceInfo = document.getElementById('balance-info');
    const discountInfo = document.getElementById('discount-info');
    const paymentSummary = document.getElementById('payment-summary');
    const summaryPayment = document.getElementById('summary-payment');
    const summaryDiscount = document.getElementById('summary-discount');
    const summaryApplied = document.getElementById('summary-applied');

    function updateBalanceInfo() {
        const selectedOption = orderSelect.options[orderSelect.selectedIndex];
        if (selectedOption && selectedOption.value) {
            const total = parseFloat(selectedOption.dataset.total);
            const paid = parseFloat(selectedOption.dataset.paid);
            const balance = total - paid;
            
            balanceInfo.textContent = `Remaining balance: $${balance.toFixed(2)}`;
            amountInput.max = balance;
            if (!amountInput.value || amountInput.value == '0') {
                amountInput.value = balance > 0 ? balance.toFixed(2) : '';
            }
        } else {
            balanceInfo.textContent = '';
            amountInput.value = '';
        }
        updatePaymentSummary();
    }

    function updatePaymentSummary() {
        const paymentAmount = parseFloat(amountInput.value) || 0;
        const discount = parseFloat(discountInput.value) || 0;
        const applied = Math.max(0, paymentAmount - discount);

        if (paymentAmount > 0) {
            paymentSummary.style.display = 'block';
            summaryPayment.textContent = `$${paymentAmount.toFixed(2)}`;
            summaryDiscount.textContent = `-$${discount.toFixed(2)}`;
            summaryApplied.textContent = `$${applied.toFixed(2)}`;
            
            if (discount > 0) {
                discountInfo.textContent = `After discount: $${applied.toFixed(2)} will be applied to the order`;
            } else {
                discountInfo.textContent = '';
            }
        } else {
            paymentSummary.style.display = 'none';
            discountInfo.textContent = '';
        }
    }

    orderSelect.addEventListener('change', updateBalanceInfo);
    amountInput.addEventListener('input', updatePaymentSummary);
    discountInput.addEventListener('input', updatePaymentSummary);
    
    updateBalanceInfo();
});
</script>
@endsection