@extends($isLoggedIn ?? false ? 'layouts.app' : 'layouts.guest-payment')

@section('content')
@if(!($isLoggedIn ?? false))
    <div class="already-logged-in mb-4">
        <h5 style="margin: 0 0 10px 0;">
            <i class="fas fa-info-circle"></i> Guest Payment Mode
        </h5>
        <p style="margin: 0;">
            You can complete the payment without logging in. After successful payment, 
            <strong>please login to access your certificate</strong>.
        </p>
        <p style="margin: 10px 0 0 0;">
            <strong>Payment for:</strong> {{ $recovery->user->fname }} {{ $recovery->user->lname }} 
            ({{ $recovery->user->email }})
        </p>
    </div>
@else
    <div class="alert alert-success">
        <i class="fas fa-check-circle"></i> You are logged in as <strong>{{ Auth::user()->email }}</strong>
    </div>
@endif

@if (session('error'))
    <div class="alert alert-danger alert-dismissible fade show" role="alert">
        <i class="fas fa-exclamation-triangle"></i> {{ session('error') }}
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
@endif

@if (session('info'))
    <div class="alert alert-info alert-dismissible fade show" role="alert">
        <i class="fas fa-info-circle"></i> {{ session('info') }}
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
@endif

<!-- Recovery Information -->
<div class="alert alert-info">
    <h5><i class="fas fa-info-circle"></i> Recovery Information</h5>
    <hr>
    <div class="row">
        <div class="col-md-6">
            <p><strong>Recovery Code:</strong> {{ $recovery->recovery_code }}</p>
            <p><strong>User Name:</strong> {{ $recovery->user->fname }} {{ $recovery->user->lname }}</p>
            <p><strong>Email:</strong> {{ $recovery->user->email }}</p>
        </div>
        <div class="col-md-6">
            <p><strong>Original Payment ID:</strong> {{ $recovery->razorpay_payment_id ?? 'N/A' }}</p>
            <p><strong>Amount:</strong> ₹{{ number_format($recovery->amount, 2) }}</p>
            <p><strong>Status:</strong> 
                <span class="badge 
                    @if($recovery->status === 'payment_completed') bg-success
                    @elseif($recovery->status === 'user_viewed') bg-info
                    @elseif($recovery->status === 'email_sent') bg-warning
                    @else bg-secondary
                    @endif">
                    {{ ucwords(str_replace('_', ' ', $recovery->status)) }}
                </span>
            </p>
        </div>
    </div>
</div>

<!-- Payment Instructions -->
<div class="mb-4">
    <h5><i class="fas fa-hand-point-right"></i> Payment Instructions</h5>
    <ol>
        <li>Review the payment amount carefully</li>
        <li>Click the "Proceed to Payment" button below</li>
        <li>Complete the payment using Razorpay secure gateway</li>
        <li><strong>Save your payment information:</strong> After successful payment, please save the Payment ID, Mode of Payment, Recovery Code, and Payment Date for your records</li>
        <li>After successful payment, you'll be redirected to download your certificate</li>
    </ol>
</div>

<!-- Payment Amount Display -->
<div class="text-center mb-4 p-4 bg-light rounded">
    <h3>Payment Amount</h3>
    <h1 class="text-primary">₹{{ number_format($recovery->amount, 2) }}</h1>
    <p class="text-muted">Black Belt Certificate Payment</p>
</div>

<!-- Payment Button -->
<div class="text-center">
    <button id="rzp-button" class="btn btn-primary btn-lg w-100">
        <i class="fas fa-lock"></i> Proceed to Secure Payment
    </button>
    <div class="mt-2 text-center text-muted">
        <small>
            <i class="fas fa-shield-alt"></i> Powered by Razorpay - Secure Payment Gateway
        </small>
    </div>
</div>

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

<script>
document.addEventListener('DOMContentLoaded', function() {
    const button = document.getElementById('rzp-button');
    
    button.addEventListener('click', function(e) {
        e.preventDefault();
        
        // Show loading state
        button.disabled = true;
        button.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Processing...';
        
        // Create Razorpay order (you'll need to implement this endpoint)
        fetch('{{ route("recovery.certificate.payment.create-order", $recovery->recovery_code) }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            },
            body: JSON.stringify({
                amount: {{ $recovery->amount * 100 }}, // Convert to paise
                recovery_code: '{{ $recovery->recovery_code }}'
            })
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                // Initialize Razorpay
                const options = {
                    key: '{{ $razorpayKey }}',
                    amount: data.order.amount,
                    currency: 'INR',
                    name: 'Taekwondo India',
                    description: 'Black Belt Certificate Payment (Recovery)',
                    order_id: data.order.id,
                    handler: function (response) {
                        // Submit payment details to server
                        const form = document.createElement('form');
                        form.method = 'POST';
                        form.action = '{{ route("recovery.certificate.payment.store", $recovery->recovery_code) }}';
                        
                        const fields = {
                            '_token': '{{ csrf_token() }}',
                            'razorpay_payment_id': response.razorpay_payment_id,
                            'razorpay_order_id': response.razorpay_order_id,
                            'razorpay_signature': response.razorpay_signature
                        };
                        
                        for (const [key, value] of Object.entries(fields)) {
                            const input = document.createElement('input');
                            input.type = 'hidden';
                            input.name = key;
                            input.value = value;
                            form.appendChild(input);
                        }
                        
                        document.body.appendChild(form);
                        form.submit();
                    },
                    prefill: {
                        name: '{{ $recovery->user->fname }} {{ $recovery->user->lname }}',
                        email: '{{ $recovery->user->email }}',
                        contact: '{{ $recovery->user->mobile }}'
                    },
                    theme: {
                        color: '#0d6efd'
                    }
                };
                
                const rzp = new Razorpay(options);
                
                rzp.on('payment.failed', function (response) {
                    alert('Payment failed. Please try again.');
                    button.disabled = false;
                    button.innerHTML = '<i class="fas fa-lock"></i> Proceed to Secure Payment';
                });
                
                rzp.open();
            } else {
                alert('Error creating payment order. Please try again.');
                button.disabled = false;
                button.innerHTML = '<i class="fas fa-lock"></i> Proceed to Secure Payment';
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('An error occurred. Please try again.');
            button.disabled = false;
            button.innerHTML = '<i class="fas fa-lock"></i> Proceed to Secure Payment';
        });
    });
});
</script>

<style>
.bg-light {
    background-color: #f8f9fa !important;
    border: 2px dashed #dee2e6;
}
</style>
@endsection