@include("header")

<style>
    .status-badge {
        display: inline-block;
        padding: 0.5rem 1rem;
        border-radius: 9999px;
        font-size: 0.875rem;
        font-weight: 600;
    }
    .status-successful { background-color: #d1fae5; color: #065f46; }
    .status-pending { background-color: #fef3c7; color: #92400e; }
    .status-failed { background-color: #fee2e2; color: #991b1b; }
    .status-completed { background-color: #dbeafe; color: #1e40af; }
    .status-partial { background-color: #e0e7ff; color: #3730a3; }
</style>

<section class="py-12 bg-gray-50 min-h-screen">
    <div class="container mx-auto px-6 max-w-5xl">
        <!-- Header -->
        <div class="text-center mb-8">
            <h1 class="text-4xl md:text-5xl font-bold text-gray-900 mb-3">
                Payment Portal
            </h1>
            <p class="text-xl text-gray-600">Ghana Business Masterclass</p>
        </div>

        <!-- Registration Summary -->
        <div class="bg-white rounded-2xl shadow-lg p-8 mb-6">
            <div class="flex items-center justify-between mb-6">
                <h2 class="text-2xl font-bold text-gray-900">Registration Details</h2>
                <span class="status-badge status-{{ $registration->payment_status }}">
                    {{ strtoupper($registration->payment_status) }}
                </span>
            </div>

            <div class="grid md:grid-cols-2 gap-6">
                <div>
                    <p class="text-sm text-gray-500 mb-1">Full Name</p>
                    <p class="text-lg font-semibold text-gray-900">{{ $registration->full_name }}</p>
                </div>
                <div>
                    <p class="text-sm text-gray-500 mb-1">Email</p>
                    <p class="text-lg font-semibold text-gray-900">{{ $registration->email }}</p>
                </div>
                <div>
                    <p class="text-sm text-gray-500 mb-1">Phone</p>
                    <p class="text-lg font-semibold text-gray-900">{{ $registration->phone }}</p>
                </div>
                <div>
                    <p class="text-sm text-gray-500 mb-1">Payment Plan</p>
                    <p class="text-lg font-semibold text-gray-900">{{ $registration->installment_plan }} Installments</p>
                </div>
            </div>

            <!-- Payment Progress -->
            <div class="mt-8">
                <div class="flex justify-between items-center mb-3">
                    <span class="text-sm font-semibold text-gray-700">Payment Progress</span>
                    <span class="text-sm font-semibold text-blue-600">
                        {{ number_format(($registration->amount_paid / $registration->total_amount) * 100, 1) }}%
                    </span>
                </div>
                <div class="w-full bg-gray-200 rounded-full h-4">
                    <div class="bg-blue-600 h-4 rounded-full transition-all duration-500" 
                         style="width: {{ ($registration->amount_paid / $registration->total_amount) * 100 }}%">
                    </div>
                </div>
                <div class="flex justify-between mt-2">
                    <span class="text-sm text-gray-600">
                        GHS {{ number_format($registration->amount_paid, 2) }} paid
                    </span>
                    <span class="text-sm text-gray-600">
                        GHS {{ number_format($registration->total_amount - $registration->amount_paid, 2) }} remaining
                    </span>
                </div>
            </div>

            @if($registration->payment_status == 'completed')
                <div class="mt-6 bg-green-50 border-l-4 border-green-400 p-4 rounded-lg">
                    <div class="flex items-center">
                        <i class="fas fa-check-circle text-green-600 text-2xl mr-3"></i>
                        <div>
                            <p class="font-bold text-green-900">Payment Completed!</p>
                            <p class="text-green-700 text-sm">You will receive access details via email before January 2nd, 2026.</p>
                        </div>
                    </div>
                </div>
            @endif
        </div>

        <!-- Next Payment (if applicable) -->
        @if($nextPayment && $registration->payment_status != 'completed')
        <div class="bg-gradient-to-r from-blue-600 to-blue-700 rounded-2xl shadow-lg p-8 text-white mb-6">
            <div class="flex items-center justify-between flex-wrap gap-4">
                <div>
                    <h3 class="text-2xl font-bold mb-2">Next Payment Due</h3>
                    <p class="text-blue-100 text-lg">
                        Installment #{{ $nextPayment->installment_number }} of {{ $registration->installment_plan }}
                    </p>
                    <p class="text-3xl font-black mt-3">
                        GHS {{ number_format($nextPayment->amount, 2) }}
                    </p>
                </div>
                <div>
                    <button onclick="payNow('{{ $nextPayment->paystack_reference }}', {{ $nextPayment->amount }}, '{{ $registration->email }}')" 
                            class="bg-white text-blue-600 px-8 py-4 rounded-lg font-bold text-lg hover:bg-blue-50 transition inline-flex items-center">
                        <i class="fas fa-credit-card mr-3"></i>
                        PAY NOW
                    </button>
                </div>
            </div>
            <div class="mt-4 pt-4 border-t border-blue-500">
                <p class="text-sm text-blue-100">
                    <i class="fas fa-clock mr-2"></i>
                    Payment deadline: <strong>{{ \Carbon\Carbon::parse($registration->payment_deadline)->format('F j, Y') }}</strong>
                </p>
            </div>
        </div>
        @endif

        <!-- Pay Remaining Balance in Full (if partial payment) -->
@if($registration->payment_status == 'partial')
<div class="bg-gradient-to-r from-green-50 to-green-100 border-2 border-green-500 rounded-2xl shadow-lg p-8 mb-6">
    <div class="flex items-center justify-between flex-wrap gap-6">
        <div class="flex-1">
            <div class="flex items-center gap-3 mb-3">
                <i class="fas fa-bolt text-green-600 text-3xl"></i>
                <h3 class="text-2xl font-bold text-green-800">Pay Remaining Balance in Full</h3>
            </div>
            <p class="text-green-700 text-lg mb-4">
                Skip the remaining installments and complete your payment now to get instant access!
            </p>
            <div class="flex items-baseline gap-2">
                <span class="text-sm text-green-600">Remaining Balance:</span>
                <span class="text-4xl font-black text-green-800">
                    GHS {{ number_format($registration->total_amount - $registration->amount_paid, 2) }}
                </span>
            </div>
            <p class="text-sm text-green-600 mt-3">
                <i class="fas fa-check-circle mr-2"></i>
                Instant access granted upon payment completion
            </p>
        </div>
        <div>
            <button onclick="payFullBalance({{ $registration->total_amount - $registration->amount_paid }}, '{{ $registration->email }}')" 
                    class="bg-green-600 hover:bg-green-700 text-white px-10 py-5 rounded-xl font-bold text-xl transition shadow-lg hover:shadow-xl inline-flex items-center">
                <i class="fas fa-check-double mr-3"></i>
                PAY FULL BALANCE
            </button>
        </div>
    </div>
</div>

<!-- OR Divider -->
<div class="text-center mb-6">
    <div class="inline-flex items-center gap-4">
        <div class="h-px w-20 bg-gray-300"></div>
        <span class="text-gray-500 font-semibold text-lg">OR</span>
        <div class="h-px w-20 bg-gray-300"></div>
    </div>
</div>
@endif

        <!-- Payment History -->
        <div class="bg-white rounded-2xl shadow-lg p-8">
            <h2 class="text-2xl font-bold text-gray-900 mb-6">Payment History</h2>
            
            <div class="space-y-4">
                @foreach($payments as $payment)
                <div class="border border-gray-200 rounded-lg p-6 hover:shadow-md transition">
                    <div class="flex items-center justify-between flex-wrap gap-4">
                        <div class="flex-1">
                            <div class="flex items-center gap-3 mb-2">
                                <span class="text-lg font-bold text-gray-900">
                                    Installment #{{ $payment->installment_number }}
                                </span>
                                <span class="status-badge status-{{ $payment->payment_status }}">
                                    {{ strtoupper($payment->payment_status) }}
                                </span>
                            </div>
                            <p class="text-gray-600 text-sm">
                                <i class="fas fa-calendar mr-2"></i>
                                {{ \Carbon\Carbon::parse($payment->payment_date)->format('F j, Y g:i A') }}
                            </p>
                            @if($payment->verified_at)
                            <p class="text-green-600 text-sm mt-1">
                                <i class="fas fa-check-circle mr-2"></i>
                                Verified: {{ \Carbon\Carbon::parse($payment->verified_at)->format('F j, Y g:i A') }}
                            </p>
                            @endif
                        </div>
                        <div class="text-right">
                            <p class="text-2xl font-bold text-gray-900">
                                GHS {{ number_format($payment->amount, 2) }}
                            </p>
                            @if($payment->payment_status == 'pending')
                            <button onclick="payNow('{{ $payment->paystack_reference }}', {{ $payment->amount }}, '{{ $registration->email }}')" 
                                    class="mt-2 bg-blue-600 text-white px-6 py-2 rounded-lg font-semibold hover:bg-blue-700 transition text-sm">
                                Pay Now
                            </button>
                            @endif
                        </div>
                    </div>
                    <p class="text-xs text-gray-400 mt-3">
                        Reference: {{ $payment->paystack_reference }}
                    </p>
                </div>
                @endforeach
            </div>
        </div>

        <!-- Support Contact -->
        <div class="mt-8 text-center">
            <p class="text-gray-600 mb-2">Need help with your payment?</p>
            <p class="text-lg">
                <i class="fas fa-phone mr-2 text-blue-600"></i>
                <strong>+233 24 980 0839</strong>
                <span class="mx-3">|</span>
                <i class="fas fa-envelope mr-2 text-blue-600"></i>
                <strong>celien@abaitey.com</strong>
            </p>
        </div>
    </div>
</section>

<script src="https://js.paystack.co/v1/inline.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script>
function payNow(reference, amount, email) {
    var handler = PaystackPop.setup({
        key: 'pk_live_37083e6b9e224d31946b2fb03a7e95b70650a63f',
        email: email,
        amount: amount * 100,
        currency: 'GHS',
        ref: reference,
        callback: function(response) {
            verifyPayment(response.reference);
        },
        onClose: function() {
            Swal.fire({
                icon: 'info',
                title: 'Payment Cancelled',
                text: 'You can complete your payment anytime from this portal.',
                confirmButtonColor: '#3b82f6'
            });
        }
    });
    handler.openIframe();
}

function verifyPayment(reference) {
    Swal.fire({
        title: 'Verifying Payment',
        text: 'Please wait...',
        allowOutsideClick: false,
        didOpen: () => {
            Swal.showLoading();
        }
    });

    $.ajax({
        url: '/masterclass/verify-payment',
        type: 'POST',
        data: {
            reference: reference,
            registration_id: {{ $registration->id }},
            _token: '{{csrf_token()}}'
        },
        success: function(response) {
            if(response.success) {
                Swal.fire({
                    icon: 'success',
                    title: 'Payment Successful!',
                    text: 'Thank you for your payment.',
                    confirmButtonColor: '#3b82f6'
                }).then(() => {
                    location.reload();
                });
            }
        },
        error: function() {
            Swal.fire({
                icon: 'error',
                title: 'Verification Failed',
                text: 'Payment verification failed. Please contact support.',
                confirmButtonColor: '#3b82f6'
            });
        }
    });
}
function payFullBalance(remainingAmount, email) {
    // Generate unique reference for full payment
    const reference = 'MASTERCLASS_FULL_' + Date.now() + '_' + Math.random().toString(36).substr(2, 9).toUpperCase();
    
    Swal.fire({
        title: 'Pay Full Balance?',
        html: `You are about to pay <strong>GHS ${remainingAmount.toFixed(2)}</strong><br>This will complete your payment and grant instant access.`,
        icon: 'question',
        showCancelButton: true,
        confirmButtonColor: '#16a34a',
        cancelButtonColor: '#6b7280',
        confirmButtonText: 'Yes, Pay Now!',
        cancelButtonText: 'Cancel'
    }).then((result) => {
        if (result.isConfirmed) {
            var handler = PaystackPop.setup({
                key: 'pk_live_37083e6b9e224d31946b2fb03a7e95b70650a63f',
                email: email,
                amount: remainingAmount * 100,
                currency: 'GHS',
                ref: reference,
                metadata: {
                    custom_fields: [
                        {
                            display_name: "Registration ID",
                            variable_name: "registration_id",
                            value: {{ $registration->id }}
                        },
                        {
                            display_name: "Payment Type",
                            variable_name: "payment_type",
                            value: "full_balance"
                        }
                    ]
                },
                callback: function(response) {
                    verifyFullPayment(response.reference);
                },
                onClose: function() {
                    Swal.fire({
                        icon: 'info',
                        title: 'Payment Cancelled',
                        text: 'You can complete your payment anytime from this portal.',
                        confirmButtonColor: '#3b82f6'
                    });
                }
            });
            handler.openIframe();
        }
    });
}

function verifyFullPayment(reference) {
    Swal.fire({
        title: 'Verifying Payment',
        text: 'Please wait...',
        allowOutsideClick: false,
        didOpen: () => {
            Swal.showLoading();
        }
    });

    $.ajax({
        url: '/masterclass/verify-payment',
        type: 'POST',
        data: {
            reference: reference,
            registration_id: {{ $registration->id }},
            is_full_payment: true,
            _token: '{{csrf_token()}}'
        },
        success: function(response) {
            if(response.success) {
                Swal.fire({
                    icon: 'success',
                    title: 'Payment Completed!',
                    html: '🎉 Thank you! Your payment is complete.<br>You will receive access details via email.',
                    confirmButtonColor: '#16a34a'
                }).then(() => {
                    location.reload();
                });
            }
        },
        error: function() {
            Swal.fire({
                icon: 'error',
                title: 'Verification Failed',
                text: 'Payment verification failed. Please contact support.',
                confirmButtonColor: '#3b82f6'
            });
        }
    });
}
</script>

@include("footer")