{{-- Show Previous Pending Warning if exists --}}
@php
$previousPending = isset($previous_pending_invoice) ? $previous_pending_invoice : null;
@endphp

<style>
    /* Remove arrows from all number inputs globally */
    input[type=number]::-webkit-outer-spin-button,
    input[type=number]::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }
    input[type=number] {
        -moz-appearance: textfield;
    }
</style>


@if($previousPending)
<div class="bg-red-50 border border-red-200 rounded-xl p-4 mb-4">
    <div class="flex items-start">
        <i class="fas fa-exclamation-triangle text-red-600 mt-1 mr-3"></i>
        <div>
            <h4 class="font-semibold text-red-800">Previous Invoice Pending</h4>
            <p class="text-sm text-red-700 mt-1">
                Invoice #{{ $previousPending->invoice_number }} has pending balance of 
                <strong>₹{{ number_format($previous_pending_amount, 2) }}</strong>.
            </p>
            <p class="text-sm text-red-600 mt-2">
                You must clear the previous invoice before receiving payment for this invoice.
            </p>
            <button type="button" onclick="openPaymentModal({{ $previousPending->subscription_history_id }})"
                    class="mt-3 px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 text-sm">
                <i class="fas fa-money-bill-wave mr-2"></i>Pay Previous Invoice First
            </button>
        </div>
    </div>
</div>
@else
    {{-- Normal payment form here --}}
@endif

<form id="paymentForm" class="space-y-4">
    @csrf
    <input type="hidden" name="invoice_id" value="{{ $invoice->id }}">

        <!-- Invoice Summary -->
    <div class="bg-gradient-to-r from-blue-50 to-indigo-50 rounded-xl p-4 border border-blue-200">
        <h4 class="font-semibold text-gray-800 mb-3">
            <i class="fas fa-file-invoice text-blue-600 mr-2"></i>
            Invoice #{{ $invoice->invoice_number }}
        </h4>

        <div class="space-y-2 text-sm">
            <div class="flex justify-between">
                <span class="text-gray-600">Base Amount:</span>
                <span class="font-semibold">₹{{ number_format($invoice->base_amount, 2) }}</span>
            </div>

            @if($invoice->discount_amount > 0)
            <div class="flex justify-between">
                <span class="text-gray-600">Discount:</span>
                <span class="font-semibold text-green-600">-₹{{ number_format($invoice->discount_amount, 2) }}</span>
            </div>
            @endif

            @if($invoice->gst_amount > 0)
            <div class="flex justify-between">
                <span class="text-gray-600">GST (18%):</span>
                <span class="font-semibold">₹{{ number_format($invoice->gst_amount, 2) }}</span>
            </div>
            @endif

            {{-- Show Previous Balance if exists --}}
            @if($invoice->previous_balance > 0)
            <div class="flex justify-between text-sm text-orange-600">
                <span><i class="fas fa-exclamation-circle mr-1"></i>Previous Balance:</span>
                <span class="font-medium">₹{{ number_format($invoice->previous_balance, 2) }}</span>
            </div>
            @endif

            {{-- Show Credit Applied if exists --}}
            @if($invoice->credit_applied > 0)
            <div class="flex justify-between text-sm text-green-600">
                <span><i class="fas fa-check-circle mr-1"></i>Credit Applied:</span>
                <span class="font-medium">-₹{{ number_format($invoice->credit_applied, 2) }}</span>
            </div>
            @endif

            <!-- THIS INVOICE TOTAL (Should be 1180) -->
            <div class="flex justify-between border-t pt-2 mt-2">
                <span class="text-gray-800 font-semibold">This Invoice Total:</span>
                <span class="font-bold text-lg text-blue-700">
                    ₹{{ number_format($invoice->total_amount, 2) }}
                </span>
            </div>
        </div>
    </div>

    <!-- Remaining Amount (Should be 1180 for new invoice) -->
    <div class="rounded-xl p-4 {{ $remaining_amount > 0 ? 'bg-red-50 border border-red-200' : 'bg-green-50 border border-green-200' }}">
        <div class="flex justify-between items-center">
            <span class="font-medium {{ $remaining_amount > 0 ? 'text-red-700' : 'text-green-700' }}">
                <i class="fas {{ $remaining_amount > 0 ? 'fa-clock' : 'fa-check-circle' }} mr-2"></i>
                Amount Remaining:
            </span>
            <span class="text-xl font-bold {{ $remaining_amount > 0 ? 'text-red-600' : 'text-green-600' }}">
                ₹{{ number_format(abs($remaining_amount), 2) }}
                @if($remaining_amount <= 0)
                    <span class="text-sm font-normal">(Fully Paid)</span>
                @endif
            </span>
        </div>
    </div>

    @if($remaining_amount > 0)
    <!-- Amount to Pay - Should default to 1180 not 180 -->
    <div>
        <label class="block text-sm font-medium text-gray-700 mb-1">
            Amount to Pay <span class="text-red-500">*</span>
        </label>
        <div class="relative">
            <span class="absolute left-3 top-1/2 -translate-y-1/2 text-gray-500 font-semibold">₹</span>
            <input type="text" name="amount_paid"
                id="amountPaidInput"
                inputmode="decimal" 
                value="{{ $remaining_amount }}" 
                class="w-full pl-8 pr-4 py-2.5 border border-gray-300 rounded-lg
                        focus:ring-2 focus:ring-green-500 focus:border-green-500
                        text-lg font-semibold"
                oninput="this.value = this.value.replace(/[^0-9.]/g, '');"
                required>

        </div>
        <p class="text-xs text-gray-500 mt-1">
            Invoice total: ₹{{ number_format($invoice->total_amount, 2) }} | 
            Already paid: ₹{{ number_format($total_paid, 2) }} |
            Remaining: ₹{{ number_format($remaining_amount, 2) }}
        </p>
    </div>

    <!-- Payment Method -->
    <div>
        <label class="block text-sm font-medium text-gray-700 mb-1">
            Payment Method <span class="text-red-500">*</span>
        </label>
        <select name="payment_method"
                class="w-full px-4 py-2.5 border border-gray-300 rounded-lg
                       focus:ring-2 focus:ring-green-500" required>
            <option value="cash">💵 Cash</option>
            <option value="bank_transfer">🏦 Bank Transfer</option>
            <option value="upi">📱 UPI</option>
            <option value="cheque">📝 Cheque</option>
            <option value="online">🌐 Online Payment</option>
        </select>
    </div>

    <!-- Transaction ID -->
    <div>
        <label class="block text-sm font-medium text-gray-700 mb-1">
            Transaction ID / UTR / Cheque No.
        </label>
        <input type="text" name="transaction_id"
               class="w-full px-4 py-2.5 border border-gray-300 rounded-lg
                      focus:ring-2 focus:ring-green-500"
               placeholder="Optional reference number">
    </div>

    <!-- Payment Date -->
    <div>
        <label class="block text-sm font-medium text-gray-700 mb-1">
            Payment Date <span class="text-red-500">*</span>
        </label>
        <input type="date" name="payment_date"
               value="{{ now()->format('Y-m-d') }}"
               class="w-full px-4 py-2.5 border border-gray-300 rounded-lg
                      focus:ring-2 focus:ring-green-500" required>
    </div>

    <!-- Notes -->
    <div>
        <label class="block text-sm font-medium text-gray-700 mb-1">Notes</label>
        <textarea name="notes" rows="2"
                  class="w-full px-4 py-2.5 border border-gray-300 rounded-lg
                         focus:ring-2 focus:ring-green-500"
                  placeholder="Any additional information..."></textarea>
    </div>

    <!-- Action Buttons -->
    <div class="flex gap-3 pt-2">
        <button type="button" onclick="closeInvoiceModal()"
                class="flex-1 py-3 border border-gray-300 text-gray-700 rounded-xl
                       hover:bg-gray-50 font-medium text-sm transition-colors">
            <i class="fas fa-times mr-2"></i>Cancel
        </button>
        <button type="button" onclick="submitPayment()"
                class="flex-1 py-3 bg-green-600 text-white rounded-xl
                       hover:bg-green-700 font-semibold transition-colors
                       shadow-lg shadow-green-200 flex items-center justify-center gap-2">
            <i class="fas fa-check"></i> Record Payment
        </button>
    </div>

    @else
    <!-- Already Fully Paid -->
    <div class="text-center py-6">
        <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-3">
            <i class="fas fa-check-circle text-green-600 text-3xl"></i>
        </div>
        <p class="text-green-700 font-semibold text-lg">Invoice Fully Paid</p>
        <p class="text-gray-500 text-sm mt-1">All payments have been received.</p>
        <div class="flex gap-3 mt-4 justify-center">
            <button type="button" onclick="closeInvoiceModal()"
                    class="px-6 py-2.5 bg-gray-500 text-white rounded-xl hover:bg-gray-600
                           font-medium transition-colors">
                <i class="fas fa-times mr-2"></i>Close
            </button>
            <!-- ✅ FIX 2: Receipt popup, not full page -->
            <button type="button" onclick="openReceiptModal({{ $invoice->id }})"
                    class="px-6 py-2.5 bg-green-600 text-white rounded-xl hover:bg-green-700
                           font-medium transition-colors">
                <i class="fas fa-receipt mr-2"></i>View Receipt
            </button>
        </div>
    </div>
    @endif

</form>

<script>
    // Stop mouse wheel from changing number values globally
    document.addEventListener('wheel', function(e) {
        if (e.target.type === 'number') {
            e.preventDefault();
        }
    }, { passive: false });
</script>