@extends('layouts.app')

@section('title', 'Stripe Payment')

@section('content')
<div class="max-w-md mx-auto px-4">
    <div class="bg-white rounded-lg shadow-lg p-8">
        <h1 class="text-2xl font-bold mb-6 text-center">Stripe Payment</h1>
        
        <p class="text-center mb-6">Order #{{ $order->order_number }}</p>
        <p class="text-center text-2xl font-bold mb-6">Rp {{ number_format($order->total) }}</p>

        <!-- Loading State -->
        <div id="loading" class="text-center py-8 hidden">
            <div class="inline-block animate-spin rounded-full h-8 w-8 border-4 border-blue-600 border-t-transparent"></div>
            <p class="mt-2 text-gray-600">Memuat pembayaran...</p>
        </div>

        <!-- Error Message -->
        <div id="stripe-error" class="bg-red-50 border border-red-200 text-red-700 p-4 rounded-lg mb-6 hidden">
            <p class="font-medium">Error</p>
            <p id="error-text" class="text-sm"></p>
        </div>

        <!-- Stripe Elements -->
        <div id="payment-element" class="mb-6">
            <!-- Stripe will insert elements here -->
        </div>

        <!-- Configuration Error (tampil jika API key salah) -->
        <div id="config-error" class="hidden">
            <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-6 text-center">
                <svg class="w-16 h-16 text-yellow-500 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path>
                </svg>
                <h3 class="text-lg font-bold mb-2">Stripe Belum Dikonfigurasi</h3>
                <p class="text-sm mb-4">Metode pembayaran Stripe sedang dalam pengaturan. Silakan gunakan metode lain.</p>
                <a href="/checkout" class="inline-block bg-blue-600 text-white px-6 py-2 rounded-lg hover:bg-blue-700">
                    Kembali ke Checkout
                </a>
            </div>
        </div>

        <button id="submit" class="w-full bg-blue-600 text-white py-3 rounded-lg hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed">
            Bayar Sekarang
        </button>

        <div id="error-message" class="text-red-600 text-sm mt-4 text-center"></div>
        
        <!-- Cancel link -->
        <a href="/checkout" class="block text-center text-gray-500 text-sm mt-4 hover:underline">
            Batalkan dan kembali
        </a>
    </div>
</div>

<!-- Stripe JS -->
<script src="https://js.stripe.com/v3/"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const stripeKey = '{{ env('STRIPE_KEY') }}';
        const submitBtn = document.getElementById('submit');
        const loadingDiv = document.getElementById('loading');
        const configError = document.getElementById('config-error');
        const stripeError = document.getElementById('stripe-error');
        const errorText = document.getElementById('error-text');
        const paymentElement = document.getElementById('payment-element');
        
        // Cek konfigurasi Stripe
        if (!stripeKey || stripeKey === 'pk_test_xxx') {
            paymentElement.classList.add('hidden');
            submitBtn.classList.add('hidden');
            configError.classList.remove('hidden');
            return;
        }
        
        let stripe, elements, paymentElement_;
        
        try {
            stripe = Stripe(stripeKey);
            
            const clientSecret = '{{ $clientSecret }}';
            
            // Cek client secret
            if (!clientSecret || clientSecret === 'pi_123_secret_456') {
                throw new Error('Invalid payment configuration');
            }
            
            const options = {
                clientSecret: clientSecret,
                appearance: {
                    theme: 'stripe',
                    variables: {
                        colorPrimary: '#2563eb',
                    }
                }
            };
            
            elements = stripe.elements(options);
            paymentElement_ = elements.create('payment');
            paymentElement_.mount('#payment-element');
            
        } catch (e) {
            console.error('Stripe initialization error:', e);
            paymentElement.innerHTML = `
                <div class="bg-red-50 p-4 rounded-lg text-red-700 text-sm">
                    <p class="font-medium">Gagal memuat pembayaran</p>
                    <p>${e.message}</p>
                </div>
            `;
            submitBtn.disabled = true;
            return;
        }

        submitBtn.addEventListener('click', async () => {
            // Disable button
            submitBtn.disabled = true;
            submitBtn.textContent = 'Processing...';
            
            // Show loading
            loadingDiv.classList.remove('hidden');
            stripeError.classList.add('hidden');

            try {
                const { error } = await stripe.confirmPayment({
                    elements,
                    confirmParams: {
                        return_url: '{{ url("/checkout/success/" . $order->id) }}',
                    },
                    redirect: 'if_required'
                });

                if (error) {
                    console.error('Payment confirmation error:', error);
                    
                    // Show error
                    stripeError.classList.remove('hidden');
                    errorText.textContent = error.message;
                    
                    // Re-enable button
                    submitBtn.disabled = false;
                    submitBtn.textContent = 'Bayar Sekarang';
                } else {
                    // Payment succeeded without redirect
                    window.location.href = '{{ url("/checkout/success/" . $order->id) }}?method=stripe';
                }
                
            } catch (e) {
                console.error('Unexpected error:', e);
                stripeError.classList.remove('hidden');
                errorText.textContent = 'Terjadi kesalahan tak terduga';
                
                submitBtn.disabled = false;
                submitBtn.textContent = 'Bayar Sekarang';
            } finally {
                loadingDiv.classList.add('hidden');
            }
        });
    });
</script>
@endsection