@extends('layouts.app')
@section('content')
<div class="row justify-content-center">
<div class="col-lg-7">
<div class="card shadow-sm">
<div class="card-body">
<h2>Pay Consultation Fee</h2>
<p class="mb-1"><strong>Appointment:</strong> {{ $appointment->appointment_number }}</p>
<p class="mb-1"><strong>Doctor:</strong> {{ $appointment->doctor->user->name }}</p>
<p class="mb-1"><strong>Date:</strong> {{ $appointment->appointment_date->format('d M Y') }}</p>
<p class="mb-3"><strong>Time:</strong> {{ substr($appointment->start_time, 0, 5) }}</p>
<h3 class="mb-4">₹{{ number_format($payment->amount, 2) }}</h3>
<button id="pay-button" class="btn btn-primary btn-lg">Pay Now</button>
<p id="payment-message" class="text-danger mt-3"></p>
</div>
</div>
</div>
</div>
<script src="https://checkout.razorpay.com/v1/checkout.js"></script>
<script>
document.getElementById('pay-button').addEventListener('click', function () {
    const options = {
        key: @json(config('services.razorpay.key')),
        amount: {{ (int) round((float) $payment->amount * 100) }},
        currency: 'INR',
        name: @json(config('app.name')),
        description: 'Doctor Consultation',
        order_id: @json($order['id']),
        prefill: {
            name: @json($appointment->patient->user->name),
            email: @json($appointment->patient->user->email),
            contact: @json($appointment->patient->user->phone),
        },
        theme: { color: '#0d6efd' },
        handler: function (response) {
            fetch(@json(route('payments.verify', $payment)), {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'Accept': 'application/json',
                    'X-CSRF-TOKEN': @json(csrf_token())
                },
                body: JSON.stringify(response)
            })
            .then(res => res.json())
            .then(data => {
                if (data.success) {
                    window.location.href = data.redirect;
                } else {
                    document.getElementById('payment-message').textContent = data.message || 'Payment verification failed.';
                }
            })
            .catch(() => {
                document.getElementById('payment-message').textContent = 'Payment verification failed.';
            });
        },
        modal: {
            ondismiss: function () {
                document.getElementById('payment-message').textContent = 'Payment window closed.';
            }
        }
    };

    new Razorpay(options).open();
});
</script>
@endsection