@extends('layouts.main')

@section('title')
    {{ __('credits.checkout') }}
@endsection

@section('page_title')
    {{ __('credits.checkout') }}
@endsection

@php
    $breadcrumbs = [
        ['url' => route('dashboard'), 'label' => __('dashboard.title')],
        ['url' => route('credits.index'), 'label' => __('credits.my_credits')],
        ['url' => route('credits.packages'), 'label' => __('credits.credit_packages')],
        ['url' => '', 'label' => __('credits.checkout')],
    ];
@endphp

@section('content')
    <div class="w-full space-y-6">
        <!-- Header Section -->
        <div class="bg-gradient-to-r from-primary/10 to-secondary/10 rounded-lg p-4 sm:p-6 border border-primary/20">
            <div class="flex items-center space-x-3 sm:space-x-4">
                <div class="w-10 h-10 sm:w-12 sm:h-12 bg-primary rounded-lg flex items-center justify-center shadow-sm flex-shrink-0">
                    <i class="fas fa-credit-card text-white text-lg sm:text-xl"></i>
                </div>
                <div class="flex-1 min-w-0">
                    <h1 class="text-xl sm:text-2xl font-semibold text-gray-700">{{ __('credits.secure_checkout') }}</h1>
                    <p class="text-sm sm:text-base text-gray-600 mt-1">{{ __('credits.complete_purchase_description') }}</p>
                </div>
            </div>
        </div>

        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
            <!-- Order Summary Card -->
            <div class="card border border-gray-200">
                <div class="card-header">
                    <div class="flex items-center space-x-3">
                        <div class="w-8 h-8 bg-primary/10 rounded-lg flex items-center justify-center">
                            <i class="fas fa-receipt text-primary"></i>
                        </div>
                        <h2 class="text-lg font-semibold text-gray-700">{{ __('credits.order_summary') }}</h2>
                    </div>
                </div>
                <div class="card-body bg-white">
                    <div class="space-y-4 pb-4">
                        <!-- Package Info -->
                        <div class="rounded-lg p-4">
                            <div class="flex items-center space-x-3 mb-3">
                                <div class="w-10 h-10 bg-primary/10 rounded-lg flex items-center justify-center">
                                    <i class="fas fa-box text-primary"></i>
                                </div>
                                <div>
                                    <h3 class="font-semibold text-gray-700">{{ $package->title }}</h3>
                                    <p class="text-sm text-gray-600">{{ __('credits.credit_package') }}</p>
                                </div>
                            </div>
                            
                            <div class="space-y-2">
                                <div class="flex justify-between items-center">
                                    <span class="text-gray-600">{{ __('credits.credits') }}:</span>
                                    <span class="font-semibold text-gray-700">{{ number_format($package->credits) }}</span>
                                </div>
                                <div class="flex justify-between items-center">
                                    <span class="text-gray-600">{{ __('credits.rate_per_message') }}</span>
                                    <span class="font-medium text-gray-700">₹{{ number_format($package->effective_rate, 2) }}</span>
                                </div>
                            </div>
                        </div>

                        <!-- Total Amount -->
                        <div class="bg-primary/5 border border-primary/20 rounded-lg p-4 m-4">
                            <div class="flex justify-between items-center">
                                <span class="text-lg font-semibold text-gray-700">{{ __('credits.total_amount') }}</span>
                                <span class="text-2xl font-semibold text-primary">₹{{ number_format($package->price, 2) }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Payment Form Card -->
            <div class="card border border-gray-200">
                <div class="card-header">
                    <div class="flex items-center space-x-3">
                        <div class="w-8 h-8 bg-primary/10 rounded-lg flex items-center justify-center">
                            <i class="fas fa-lock text-primary"></i>
                        </div>
                        <h2 class="text-lg font-semibold text-gray-700">{{ __('credits.payment_details') }}</h2>
                    </div>
                </div>
                <div class="card-body">
                    <form id="payment-form">
                        <div class="space-y-4 px-4 pb-4">
                            <!-- Payment Element -->
                            <div class="py-4">
                                <div id="payment-element" class="px-4 pb-4 bg-gray-50"></div>
                            </div>
                            
                            <!-- Error Message -->
                            <div id="payment-message" class="hidden bg-red-50 border border-red-200 rounded-lg p-3">
                                <div class="flex items-center">
                                    <i class="fas fa-exclamation-circle text-red-500 mr-2"></i>
                                    <span class="text-red-700 text-sm"></span>
                                </div>
                            </div>

                            <!-- Submit Button -->
                            <button type="submit" id="submit-button" class="btn btn-primary w-full">
                                <span id="button-text">
                                    <i class="fas fa-credit-card mr-2"></i>
                                    {{ __('credits.pay_amount', ['amount' => '₹' . number_format($package->price, 2)]) }}
                                </span>
                                <span id="spinner" class="hidden">
                                    <i class="fas fa-spinner fa-spin mr-2"></i>
                                    {{ __('credits.processing') }}
                                </span>
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- Security Notice -->
        <div class="card">
            <div class="card-body">
                <div class="bg-blue-50 border border-blue-200 rounded-lg p-4">
                    <div class="flex items-start space-x-3">
                        <div class="w-8 h-8 bg-blue-100 rounded-lg flex items-center justify-center flex-shrink-0">
                            <i class="fas fa-shield-alt text-blue-600"></i>
                        </div>
                        <div>
                            <h3 class="font-semibold text-blue-800 mb-2">{{ __('credits.secure_payment') }}</h3>
                            <p class="text-sm text-blue-700 mb-2">{{ __('credits.payment_encrypted') }}</p>
                            <div class="flex items-center space-x-4 text-xs text-blue-600">
                                <span class="flex items-center">
                                    <i class="fas fa-lock mr-1"></i>
                                    {{ __('credits.ssl_encrypted') }}
                                </span>
                                <span class="flex items-center">
                                    <i class="fas fa-shield-alt mr-1"></i>
                                    {{ __('credits.pci_compliant') }}
                                </span>
                                <span class="flex items-center">
                                    <i class="fas fa-check-circle mr-1"></i>
                                    {{ __('credits.stripe_verified') }}
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('custom_scripts')
<script src="https://js.stripe.com/v3/"></script>
<script>
    
    // Check if Stripe key exists
    @if(empty(config('stripe.key')))
        alert('Stripe API key is not configured. Please add STRIPE_KEY to your .env file');
    @endif
    
    const stripe = Stripe('{{ $stripeKey }}');
    const options = {
        clientSecret: '{{ $clientSecret }}',
        appearance: {
            theme: 'stripe',
            variables: {
                colorPrimary: '#4E7C50',
            }
        }
    };

    const elements = stripe.elements(options);
    const paymentElement = elements.create('payment');
    
    try {
        paymentElement.mount('#payment-element');
        console.log('Payment element mounted successfully');
    } catch (error) {
        console.error('Error mounting payment element:', error);
        document.getElementById('payment-message').classList.remove('hidden');
        document.getElementById('payment-message').textContent = @json(__('credits.error_loading_payment_form', ['error' => ''])) + error.message;
    }

    const form = document.getElementById('payment-form');
    const submitButton = document.getElementById('submit-button');
    const buttonText = document.getElementById('button-text');
    const spinner = document.getElementById('spinner');
    const messageContainer = document.getElementById('payment-message');

    form.addEventListener('submit', async (e) => {
        e.preventDefault();
        setLoading(true);
        
        console.log('=== Starting payment submission ===');

        try {
            // Confirm payment with Stripe
            console.log('Calling stripe.confirmPayment...');
            const result = await stripe.confirmPayment({
                elements,
                confirmParams: {
                    return_url: window.location.href,
                },
                redirect: 'if_required'
            });

            console.log('Stripe confirmPayment result:', result);

            if (result.error) {
                // Payment failed
                console.error('Payment error:', result.error);
                showMessage(result.error.message);
                setLoading(false);
            } else if (result.paymentIntent) {
                const paymentIntent = result.paymentIntent;
                console.log('PaymentIntent received:', paymentIntent);
                console.log('PaymentIntent status:', paymentIntent.status);
                
                if (paymentIntent.status === 'succeeded') {
                    // Payment succeeded
                    console.log('Payment succeeded! Confirming with backend...');
                    
                    const paymentIntentId = paymentIntent.id;
                    console.log('Payment Intent ID:', paymentIntentId);
                    
                    // Confirm with backend
                    const confirmUrl = '{{ LaravelLocalization::localizeUrl(route("credits.confirm")) }}';
                    console.log('Sending request to:', confirmUrl);
                    const response = await fetch(confirmUrl, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': '{{ csrf_token() }}',
                            'Accept': 'application/json'
                        },
                        body: JSON.stringify({
                            payment_intent_id: paymentIntentId
                        })
                    });

                    console.log('Response status:', response.status);
                    const data = await response.json();
                    console.log('Backend response:', data);

                    if (data.success) {
                        // Redirect to credits page with success message
                        console.log('Success! Redirecting...');
                        const defaultRedirectUrl = '{{ LaravelLocalization::localizeUrl(route("credits.index")) }}';
                        const url = new URL(data.redirect_url || defaultRedirectUrl, window.location.origin);
                        url.searchParams.append('payment_success', '1');
                        url.searchParams.append('credits', data.credits_purchased || 0);
                        window.location.href = url.toString();
                    } else {
                        console.error('Backend returned error:', data.message);
                        showMessage(data.message || @json(__('credits.unexpected_error', ['error' => ''])));
                        setLoading(false);
                    }
                } else if (paymentIntent.status === 'processing') {
                    console.log('Payment is processing...');
                    showMessage(@json(__('credits.payment_processing')));
                    // You might want to poll for status or redirect to a waiting page
                    setTimeout(() => {
                        window.location.href = '{{ LaravelLocalization::localizeUrl(route("credits.index")) }}?payment_processing=1';
                    }, 2000);
                } else if (paymentIntent.status === 'requires_payment_method') {
                    console.log('Payment requires payment method');
                    showMessage(@json(__('credits.payment_failed_try_another')));
                    setLoading(false);
                } else {
                    console.log('Unexpected payment status:', paymentIntent.status);
                    showMessage('Payment status: ' + paymentIntent.status);
                    setLoading(false);
                }
            } else {
                console.error('No error and no paymentIntent in result');
                showMessage(@json(__('credits.unexpected_response')));
                setLoading(false);
            }
        } catch (err) {
            console.error('Payment processing error:', err);
            showMessage(@json(__('credits.unexpected_error', ['error' => ''])) + err.message);
            setLoading(false);
        }
    });

    function setLoading(isLoading) {
        if (isLoading) {
            submitButton.disabled = true;
            buttonText.classList.add('hidden');
            spinner.classList.remove('hidden');
        } else {
            submitButton.disabled = false;
            buttonText.classList.remove('hidden');
            spinner.classList.add('hidden');
        }
    }

    function showMessage(message) {
        messageContainer.classList.remove('hidden');
        messageContainer.textContent = message;
        setTimeout(() => {
            messageContainer.classList.add('hidden');
            messageContainer.textContent = '';
        }, 5000);
    }
</script>
@endpush