@extends('layouts.app')

@section('title', 'Complete Payment - ' . $appointment->appointment_id)

@section('content')

<div class="content pb-0">
    <div class="row justify-content-center">
        <div class="col-lg-8">
            <!-- Payment Header -->
            <div class="mb-4">
                <h6 class="fw-bold mb-0 d-flex align-items-center">
                    <i class="ti ti-credit-card me-2"></i>Complete Payment
                </h6>
                <p class="text-muted mt-2 mb-0">Appointment ID: {{ $appointment->appointment_id }}</p>
            </div>

            <!-- Appointment Summary Card -->
            <div class="card mb-3">
                <div class="card-body">
                    <h6 class="fw-bold mb-3">Appointment Summary</h6>

                    <div class="row mb-3">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="text-muted small">Doctor</label>
                                <p class="fw-semibold">{{ $doctor->name }}</p>
                            </div>
                            <div class="mb-3">
                                <label class="text-muted small">Clinic</label>
                                <p class="fw-semibold">{{ $clinic->name }}</p>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="text-muted small">Appointment Date</label>
                                <p class="fw-semibold">{{ date('d M, Y', strtotime($appointment->appointment_date)) }}</p>
                            </div>
                            <div class="mb-3">
                                <label class="text-muted small">Type</label>
                                <p class="fw-semibold text-capitalize">
                                    @if($appointment->consultation_type === 'video')
                                        <span class="badge bg-info">Video Call</span>
                                    @else
                                        <span class="badge bg-success">In-Person</span>
                                    @endif
                                </p>
                            </div>
                        </div>
                    </div>

                    <hr>

                    <!-- Fee Breakdown -->
                    <div class="mb-3">
                        <div class="d-flex justify-content-between mb-2">
                            <span>Consultation Fee:</span>
                            <span class="fw-semibold">₹{{ number_format($amount, 2) }}</span>
                        </div>
                        <div class="d-flex justify-content-between mb-2">
                            <span>Taxes & Charges:</span>
                            <span class="fw-semibold">₹0.00</span>
                        </div>
                    </div>

                    <hr>

                    <!-- Total Amount -->
                    <div class="d-flex justify-content-between align-items-center">
                        <h6 class="fw-bold mb-0">Total Amount</h6>
                        <h5 class="fw-bold text-primary mb-0">₹{{ number_format($amount, 2) }}</h5>
                    </div>
                </div>
            </div>

            <!-- Payment Methods Card -->
            <div class="card">
                <div class="card-body">
                    <h6 class="fw-bold mb-3">Payment Method</h6>

                    <p class="text-muted small mb-3">Secure payment powered by Razorpay</p>

                    <!-- Payment Form -->
                    <form id="payment-form">
                        @csrf
                        <input type="hidden" name="appointment_id" value="{{ $appointment->id }}">

                        <button type="button" id="rzp-button" class="btn btn-primary w-100 py-3 fw-semibold">
                            <i class="ti ti-lock me-2"></i>Pay ₹{{ number_format($amount, 2) }} Securely
                        </button>
                    </form>

                    <p class="text-muted small mt-3 mb-0">
                        <i class="ti ti-shield-check me-1"></i>Your payment information is secure and encrypted
                    </p>
                </div>
            </div>

            <!-- Information Card -->
            <div class="card mt-3 border-info">
                <div class="card-body">
                    <h6 class="fw-bold mb-2 text-info">
                        <i class="ti ti-info-circle me-2"></i>Important Information
                    </h6>
                    <ul class="small mb-0 ps-3">
                        <li class="mb-1">Your appointment will be confirmed only after successful payment</li>
                        <li class="mb-1">A confirmation email will be sent to your registered email address</li>
                        <li class="mb-1">You can reschedule or cancel the appointment up to 24 hours before the scheduled time</li>
                        <li>Please ensure you have a stable internet connection during payment</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Razorpay Script -->
<script src="https://checkout.razorpay.com/v1/checkout.js"></script>

<script>
document.getElementById('rzp-button').addEventListener('click', function(e) {
    e.preventDefault();

    const options = {
        key: "{{ $razorpayKey }}",
        amount: {{ $amount * 100 }}, // Amount in paise
        currency: "INR",
        name: "PredCare",
        description: "Appointment Payment - {{ $appointment->appointment_id }}",
        order_id: "{{ $orderId }}",
        image: "{{ asset('assets/img/PRED_CARE-Logo.png') }}",
        handler: function(response) {
            // Payment successful
            console.log('Payment successful:', response);
            submitPaymentForm(response);
        },
        prefill: {
            name: "{{ auth()->user()->name }}",
            email: "{{ auth()->user()->email }}",
            contact: "{{ auth()->user()->phone_number ?? '' }}"
        },
        theme: {
            color: "#0d6efd"
        },
        modal: {
            ondismiss: function() {
                console.log('Payment cancelled by user');
                alert('Payment cancelled. Please try again.');
            }
        }
    };

    const rzp = new Razorpay(options);
    rzp.open();
});

function submitPaymentForm(paymentResponse) {
    const form = document.getElementById('payment-form');

    // Log payment response
    console.log('Payment Response:', paymentResponse);

    // Add Razorpay response fields
    const paymentIdInput = document.createElement('input');
    paymentIdInput.type = 'hidden';
    paymentIdInput.name = 'razorpay_payment_id';
    paymentIdInput.value = paymentResponse.razorpay_payment_id;
    form.appendChild(paymentIdInput);

    const orderIdInput = document.createElement('input');
    orderIdInput.type = 'hidden';
    orderIdInput.name = 'razorpay_order_id';
    orderIdInput.value = paymentResponse.razorpay_order_id;
    form.appendChild(orderIdInput);

    const signatureInput = document.createElement('input');
    signatureInput.type = 'hidden';
    signatureInput.name = 'razorpay_signature';
    signatureInput.value = paymentResponse.razorpay_signature;
    form.appendChild(signatureInput);

    // Change form action and method for payment verification
    form.action = "{{ route('patient.payment.verify') }}";
    form.method = 'POST';

    // Submit the form
    console.log('Submitting payment form...');
    form.submit();
}
</script>

<style>
    .btn {
        transition: all 0.3s ease;
    }

    .btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }

    .card {
        border-radius: 0.5rem;
    }

    .text-muted {
        font-size: 0.875rem;
    }
</style>

@endsection