@extends('layouts.app')

@section('title', 'Paiement - Commande #' . $foodOrder->order_number)

@push('styles')
<style>
    .payment-card {
        background: linear-gradient(135deg, rgba(255,255,255,0.95), rgba(255,255,255,0.9));
        backdrop-filter: blur(12px);
    }
    #card-element {
        padding: 12px 16px;
        border: 2px solid #e5e7eb;
        border-radius: 12px;
        background: white;
        transition: all 0.3s ease;
    }
    #card-element:focus-within {
        border-color: #f97316;
        box-shadow: 0 0 0 4px rgba(249, 115, 22, 0.1);
    }
    .card-error {
        border-color: #ef4444 !important;
    }
    .secure-badge {
        background: linear-gradient(135deg, #10b981, #059669);
    }
</style>
@endpush

@section('content')
<div class="min-h-screen bg-gradient-to-br from-orange-50 via-amber-50 to-yellow-50 py-6">
    <div class="container mx-auto px-4">
        <div class="max-w-2xl mx-auto">
            
            {{-- Header --}}
            <div class="mb-6">
                <a href="{{ route('food.orders.show', $foodOrder) }}" class="inline-flex items-center gap-2 text-orange-600 hover:text-orange-700 mb-4">
                    <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"/>
                    </svg>
                    Retour à la commande
                </a>
                <h1 class="text-2xl sm:text-3xl font-bold text-gray-900">💳 Paiement sécurisé</h1>
                <p class="text-gray-500 mt-1">Commande #{{ $foodOrder->order_number }}</p>
            </div>

            <div class="grid grid-cols-1 lg:grid-cols-5 gap-6">
                
                {{-- Formulaire de paiement --}}
                <div class="lg:col-span-3">
                    <div class="payment-card rounded-2xl shadow-xl p-6 border border-white/50">
                        
                        {{-- Badge sécurité --}}
                        <div class="flex items-center gap-3 mb-6 p-3 bg-green-50 rounded-xl border border-green-100">
                            <div class="w-10 h-10 secure-badge rounded-full flex items-center justify-center">
                                <svg class="w-5 h-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/>
                                </svg>
                            </div>
                            <div>
                                <p class="font-semibold text-green-700">Paiement sécurisé</p>
                                <p class="text-sm text-green-600">Cryptage SSL 256 bits • Stripe</p>
                            </div>
                        </div>

                        {{-- Méthodes de paiement --}}
                        <div class="mb-6">
                            <h3 class="font-bold text-gray-900 mb-4">Choisir le mode de paiement</h3>
                            
                            <div class="space-y-3">
                                {{-- Carte bancaire --}}
                                <label class="payment-method-option flex items-center gap-4 p-4 border-2 border-orange-500 rounded-xl cursor-pointer bg-orange-50">
                                    <input type="radio" name="payment_method" value="card" checked class="w-5 h-5 text-orange-600">
                                    <div class="flex items-center gap-3 flex-1">
                                        <div class="w-12 h-8 bg-gradient-to-r from-blue-600 to-blue-800 rounded flex items-center justify-center">
                                            <span class="text-white text-xs font-bold">VISA</span>
                                        </div>
                                        <div class="w-12 h-8 bg-gradient-to-r from-red-500 to-yellow-500 rounded flex items-center justify-center">
                                            <span class="text-white text-xs font-bold">MC</span>
                                        </div>
                                        <span class="font-medium text-gray-900">Carte bancaire</span>
                                    </div>
                                </label>

                                {{-- Espèces --}}
                                <label class="payment-method-option flex items-center gap-4 p-4 border-2 border-gray-200 rounded-xl cursor-pointer hover:border-gray-300 transition">
                                    <input type="radio" name="payment_method" value="cash" class="w-5 h-5 text-orange-600">
                                    <div class="flex items-center gap-3 flex-1">
                                        <div class="w-12 h-8 bg-gradient-to-r from-green-500 to-emerald-500 rounded flex items-center justify-center">
                                            <span class="text-white text-lg">💵</span>
                                        </div>
                                        <div>
                                            <span class="font-medium text-gray-900">Espèces</span>
                                            <p class="text-xs text-gray-500">Payer à la réception</p>
                                        </div>
                                    </div>
                                </label>
                            </div>
                        </div>

                        {{-- Formulaire carte Stripe --}}
                        <div id="card-payment-section">
                            <h3 class="font-bold text-gray-900 mb-4">Informations de carte</h3>
                            
                            <form id="payment-form">
                                <div id="card-element" class="mb-4"></div>
                                <div id="card-errors" class="text-red-500 text-sm mb-4 hidden"></div>
                                
                                <button type="submit" id="submit-button" 
                                    class="w-full py-4 bg-gradient-to-r from-orange-500 to-amber-500 text-white font-bold text-lg rounded-xl shadow-lg hover:shadow-xl transition-all disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-3">
                                    <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/>
                                    </svg>
                                    <span id="button-text">Payer {{ number_format($foodOrder->total, 2) }} €</span>
                                    <span id="spinner" class="hidden">
                                        <svg class="animate-spin h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                                            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                                            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                                        </svg>
                                    </span>
                                </button>
                            </form>
                        </div>

                        {{-- Bouton paiement espèces --}}
                        <div id="cash-payment-section" class="hidden">
                            <div class="p-4 bg-amber-50 rounded-xl border border-amber-200 mb-4">
                                <p class="text-amber-700">
                                    <strong>💵 Paiement en espèces</strong><br>
                                    Vous paierez <strong>{{ number_format($foodOrder->total, 2) }} €</strong> directement au prestataire lors de la réception de votre commande.
                                </p>
                            </div>
                            
                            <form action="{{ route('food.orders.payment.cash', $foodOrder) }}" method="POST">
                                @csrf
                                <button type="submit" 
                                    class="w-full py-4 bg-gradient-to-r from-green-500 to-emerald-500 text-white font-bold text-lg rounded-xl shadow-lg hover:shadow-xl transition-all flex items-center justify-center gap-3">
                                    <span class="text-2xl">💵</span>
                                    Confirmer le paiement en espèces
                                </button>
                            </form>
                        </div>
                    </div>
                </div>

                {{-- Récapitulatif --}}
                <div class="lg:col-span-2">
                    <div class="payment-card rounded-2xl shadow-xl p-6 border border-white/50 sticky top-24">
                        <h3 class="font-bold text-gray-900 mb-4 flex items-center gap-2">
                            <span class="text-xl">🧾</span> Récapitulatif
                        </h3>
                        
                        {{-- Prestataire --}}
                        <div class="flex items-center gap-3 mb-4 pb-4 border-b border-gray-100">
                            @if($foodOrder->prestataire->logo)
                                <img src="{{ Storage::url($foodOrder->prestataire->logo) }}" class="w-12 h-12 rounded-xl object-cover">
                            @else
                                <div class="w-12 h-12 bg-gradient-to-br from-orange-400 to-amber-500 rounded-xl flex items-center justify-center text-white font-bold">
                                    {{ strtoupper(substr($foodOrder->prestataire->company_name ?? 'P', 0, 1)) }}
                                </div>
                            @endif
                            <div>
                                <p class="font-semibold text-gray-900">{{ $foodOrder->prestataire->company_name ?? $foodOrder->prestataire->business_name }}</p>
                                <p class="text-sm text-gray-500">{{ $foodOrder->items->count() }} article(s)</p>
                            </div>
                        </div>

                        {{-- Articles --}}
                        <div class="space-y-2 mb-4 max-h-40 overflow-y-auto">
                            @foreach($foodOrder->items as $item)
                                <div class="flex justify-between text-sm">
                                    <span class="text-gray-600">{{ $item->quantity }}× {{ $item->product_name }}</span>
                                    <span class="font-medium">{{ number_format($item->total_price, 2) }} €</span>
                                </div>
                            @endforeach
                        </div>

                        {{-- Totaux --}}
                        <div class="border-t border-gray-100 pt-4 space-y-2">
                            <div class="flex justify-between text-sm">
                                <span class="text-gray-600">Sous-total</span>
                                <span>{{ number_format($foodOrder->subtotal, 2) }} €</span>
                            </div>
                            @if($foodOrder->delivery_fee > 0)
                                <div class="flex justify-between text-sm">
                                    <span class="text-gray-600">Livraison</span>
                                    <span>{{ number_format($foodOrder->delivery_fee, 2) }} €</span>
                                </div>
                            @endif
                            @if($foodOrder->service_fee > 0)
                                <div class="flex justify-between text-sm">
                                    <span class="text-gray-600">Frais de service</span>
                                    <span>{{ number_format($foodOrder->service_fee, 2) }} €</span>
                                </div>
                            @endif
                            <div class="flex justify-between text-lg font-bold pt-2 border-t border-gray-200">
                                <span>Total</span>
                                <span class="text-orange-600">{{ number_format($foodOrder->total, 2) }} €</span>
                            </div>
                        </div>

                        {{-- Type de livraison --}}
                        <div class="mt-4 p-3 bg-gray-50 rounded-xl">
                            <div class="flex items-center gap-2 text-sm">
                                @if($foodOrder->delivery_type === 'pickup')
                                    <span class="text-lg">🏪</span>
                                    <span class="text-gray-700">À emporter</span>
                                @else
                                    <span class="text-lg">🚚</span>
                                    <span class="text-gray-700">Livraison</span>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script src="https://js.stripe.com/v3/"></script>
<script>
    const stripe = Stripe('{{ $stripeKey }}');
    const elements = stripe.elements({
        locale: 'fr'
    });
    
    const cardElement = elements.create('card', {
        style: {
            base: {
                fontSize: '16px',
                color: '#1f2937',
                fontFamily: 'system-ui, sans-serif',
                '::placeholder': {
                    color: '#9ca3af'
                }
            },
            invalid: {
                color: '#ef4444',
                iconColor: '#ef4444'
            }
        }
    });
    
    cardElement.mount('#card-element');
    
    // Gestion des erreurs de carte
    cardElement.on('change', function(event) {
        const errorDiv = document.getElementById('card-errors');
        const cardDiv = document.getElementById('card-element');
        if (event.error) {
            errorDiv.textContent = event.error.message;
            errorDiv.classList.remove('hidden');
            cardDiv.classList.add('card-error');
        } else {
            errorDiv.classList.add('hidden');
            cardDiv.classList.remove('card-error');
        }
    });
    
    // Changement de méthode de paiement
    document.querySelectorAll('input[name="payment_method"]').forEach(radio => {
        radio.addEventListener('change', function() {
            const cardSection = document.getElementById('card-payment-section');
            const cashSection = document.getElementById('cash-payment-section');
            
            document.querySelectorAll('.payment-method-option').forEach(opt => {
                opt.classList.remove('border-orange-500', 'bg-orange-50');
                opt.classList.add('border-gray-200');
            });
            this.closest('.payment-method-option').classList.add('border-orange-500', 'bg-orange-50');
            this.closest('.payment-method-option').classList.remove('border-gray-200');
            
            if (this.value === 'card') {
                cardSection.classList.remove('hidden');
                cashSection.classList.add('hidden');
            } else {
                cardSection.classList.add('hidden');
                cashSection.classList.remove('hidden');
            }
        });
    });
    
    // Soumission du paiement
    const form = document.getElementById('payment-form');
    const submitButton = document.getElementById('submit-button');
    const buttonText = document.getElementById('button-text');
    const spinner = document.getElementById('spinner');
    
    form.addEventListener('submit', async function(e) {
        e.preventDefault();
        
        submitButton.disabled = true;
        buttonText.textContent = 'Traitement...';
        spinner.classList.remove('hidden');
        
        try {
            // 1. Créer le Payment Intent
            const intentResponse = await fetch('{{ route("food.orders.payment.intent", $foodOrder) }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                }
            });
            
            const intentData = await intentResponse.json();
            
            if (intentData.error) {
                throw new Error(intentData.error);
            }
            
            // 2. Confirmer le paiement avec Stripe
            const { error, paymentIntent } = await stripe.confirmCardPayment(intentData.clientSecret, {
                payment_method: {
                    card: cardElement
                }
            });
            
            if (error) {
                throw new Error(error.message);
            }
            
            // 3. Confirmer côté serveur
            const confirmResponse = await fetch('{{ route("food.orders.payment.confirm", $foodOrder) }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                body: JSON.stringify({
                    payment_intent_id: paymentIntent.id,
                    payment_method: 'card'
                })
            });
            
            const confirmData = await confirmResponse.json();
            
            if (confirmData.error) {
                throw new Error(confirmData.error);
            }
            
            // Succès !
            buttonText.textContent = '✓ Paiement réussi !';
            spinner.classList.add('hidden');
            
            setTimeout(() => {
                window.location.href = confirmData.redirect;
            }, 1000);
            
        } catch (error) {
            const errorDiv = document.getElementById('card-errors');
            errorDiv.textContent = error.message;
            errorDiv.classList.remove('hidden');
            
            submitButton.disabled = false;
            buttonText.textContent = 'Payer {{ number_format($foodOrder->total, 2) }} €';
            spinner.classList.add('hidden');
        }
    });
</script>
@endpush
@endsection