@extends('layouts.app')
@section('title', 'Payment')
@section('page-title', 'Fee Payment')

@section('content')
<div class="max-w-md mx-auto py-12">
    <div class="bg-white rounded-2xl ring-1 ring-stone-200/60 shadow-lg overflow-hidden">
        {{-- Header --}}
        <div class="bg-gradient-to-r from-amber-500 to-amber-600 px-6 py-5 text-white text-center">
            <div class="w-14 h-14 bg-white/20 rounded-full flex items-center justify-center mx-auto mb-3">
                <i class="fas fa-shield-alt text-2xl"></i>
            </div>
            <h2 class="text-lg font-bold">Secure Payment</h2>
            <p class="text-amber-100 text-sm mt-1">{{ $schoolName }}</p>
        </div>

        {{-- Payment Details --}}
        <div class="p-6 space-y-4">
            <div class="bg-stone-50 rounded-xl p-4 space-y-2">
                <div class="flex justify-between text-sm">
                    <span class="text-stone-500">Invoice</span>
                    <span class="font-medium text-stone-700">{{ $invoice->invoice_number }}</span>
                </div>
                <div class="flex justify-between text-sm">
                    <span class="text-stone-500">Student</span>
                    <span class="font-medium text-stone-700">{{ $student->name }}</span>
                </div>
                <div class="flex justify-between text-sm">
                    <span class="text-stone-500">Fee Type</span>
                    <span class="font-medium text-stone-700">{{ $invoice->feeStructure->name ?? '—' }}</span>
                </div>
                <div class="flex justify-between text-sm border-t border-stone-200 pt-2 mt-2">
                    <span class="font-bold text-stone-800">Amount</span>
                    <span class="font-bold text-xl text-amber-600">₹{{ number_format($amount, 2) }}</span>
                </div>
            </div>

            {{-- Processing indicator --}}
            <div id="processingMsg" class="hidden bg-blue-50 rounded-xl p-4 text-center">
                <div class="animate-spin w-8 h-8 border-3 border-blue-500 border-t-transparent rounded-full mx-auto mb-2"></div>
                <p class="text-sm text-blue-700 font-medium">Processing payment...</p>
                <p class="text-xs text-blue-500 mt-1">Please do not close this window</p>
            </div>

            {{-- Pay button --}}
            <button id="payBtn" onclick="startPayment()"
                    class="w-full py-3 bg-amber-500 text-white rounded-xl font-bold text-lg hover:bg-amber-600 transition shadow-md">
                <i class="fas fa-lock mr-2"></i> Pay ₹{{ number_format($amount, 2) }}
            </button>

            <a href="{{ route('fees.index') }}" class="block text-center text-sm text-stone-400 hover:text-stone-600">
                Cancel & go back
            </a>

            <div class="flex items-center justify-center gap-3 pt-2 border-t border-stone-100">
                <img src="https://cdn.razorpay.com/static/assets/logo/payment.svg" alt="Razorpay" class="h-5 opacity-40">
                <span class="text-[10px] text-stone-300">Secured by Razorpay</span>
            </div>
        </div>
    </div>
</div>

{{-- Razorpay Success Form --}}
<form id="razorpay-success-form" method="POST" action="{{ route('razorpay.verify') }}" class="hidden">
    @csrf
    <input type="hidden" name="razorpay_payment_id" id="rp_payment_id">
    <input type="hidden" name="razorpay_order_id" id="rp_order_id">
    <input type="hidden" name="razorpay_signature" id="rp_signature">
    <input type="hidden" name="invoice_id" value="{{ $invoice->id }}">
    <input type="hidden" name="amount" value="{{ $amount }}">
</form>

{{-- Razorpay Failed Form --}}
<form id="razorpay-failed-form" method="POST" action="{{ route('razorpay.failed') }}" class="hidden">
    @csrf
    <input type="hidden" name="invoice_id" value="{{ $invoice->id }}">
</form>

<script src="https://checkout.razorpay.com/v1/checkout.js"></script>
<script>
function startPayment() {
    var options = {
        key: "{{ $razorpayKey }}",
        amount: {{ $amountPaise }},
        currency: "INR",
        name: "{{ $schoolName }}",
        description: "Fee Payment - {{ $invoice->invoice_number }}",
        order_id: "{{ $order['id'] }}",
        prefill: {
            name: "{{ $user->name }}",
            email: "{{ $user->email }}",
            contact: ""
        },
        theme: {
            color: "#f59e0b"
        },
        handler: function(response) {
            document.getElementById('payBtn').classList.add('hidden');
            document.getElementById('processingMsg').classList.remove('hidden');

            document.getElementById('rp_payment_id').value = response.razorpay_payment_id;
            document.getElementById('rp_order_id').value = response.razorpay_order_id;
            document.getElementById('rp_signature').value = response.razorpay_signature;
            document.getElementById('razorpay-success-form').submit();
        },
        modal: {
            ondismiss: function() {
                // User closed the popup
            }
        }
    };

    var rzp = new Razorpay(options);

    rzp.on('payment.failed', function(response) {
        document.getElementById('razorpay-failed-form').submit();
    });

    rzp.open();
}

// Auto-open on load
document.addEventListener('DOMContentLoaded', function() {
    setTimeout(startPayment, 500);
});
</script>
@endsection