@extends('layouts.app')

@section('content')
<div class="container mx-auto px-4 py-8">
    <div class="max-w-2xl mx-auto">
        <div class="bg-white rounded-lg shadow-lg p-8">
            <h1 class="text-3xl font-bold text-gray-900 mb-2">Paiement de la réservation</h1>
            <p class="text-gray-600 mb-8">Réservation #{{ $booking->booking_number }} - {{ $booking->service->name ?? 'Service' }}</p>

            <!-- Amount Summary -->
            <div class="bg-blue-50 border border-blue-200 rounded-lg p-6 mb-8">
                <div class="flex justify-between items-center mb-4">
                    <span class="text-gray-700">Montant du service</span>
                    <span class="font-semibold text-gray-900">{{ number_format($booking->total_price, 2) }} €</span>
                </div>

                @if($booking->deposit_amount > 0)
                <div class="flex justify-between items-center mb-4 text-blue-800">
                    <span class="text-gray-700">Acompte requis ({{ $booking->service->deposit_percentage }}%)</span>
                    <span class="font-semibold">{{ number_format($booking->deposit_amount, 2) }} €</span>
                </div>
                @endif

                <div class="border-t border-blue-300 pt-4 flex justify-between items-center">
                    <span class="text-lg font-bold text-gray-900">Total à payer</span>
                    <span class="text-2xl font-bold text-blue-600" id="displayAmount">{{ number_format($booking->total_price, 2) }} €</span>
                </div>
            </div>

            <!-- Payment Options -->
            @if($booking->deposit_amount > 0 && $booking->payment_status === 'pending')
            <div class="mb-8">
                <label class="block text-sm font-semibold text-gray-900 mb-2">Option de paiement</label>
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                    <div class="relative flex items-start p-4 border rounded-lg cursor-pointer hover:bg-gray-50 transition-colors" onclick="selectPaymentOption('deposit')">
                        <div class="flex items-center h-5">
                            <input id="option_deposit" name="payment_option" type="radio" value="deposit" class="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300" checked>
                        </div>
                        <div class="ml-3 text-sm">
                            <label for="option_deposit" class="font-medium text-gray-700">Payer l'acompte</label>
                            <p class="text-gray-500">{{ number_format($booking->deposit_amount, 2) }} € maintenant</p>
                        </div>
                    </div>
                    <div class="relative flex items-start p-4 border rounded-lg cursor-pointer hover:bg-gray-50 transition-colors" onclick="selectPaymentOption('full')">
                        <div class="flex items-center h-5">
                            <input id="option_full" name="payment_option" type="radio" value="full" class="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300">
                        </div>
                        <div class="ml-3 text-sm">
                            <label for="option_full" class="font-medium text-gray-700">Payer la totalité</label>
                            <p class="text-gray-500">{{ number_format($booking->total_price, 2) }} € maintenant</p>
                        </div>
                    </div>
                </div>
            </div>
            @endif

            @if($booking->deposit_amount > 0 && $booking->payment_status === 'deposit_paid')
            <div class="mb-8">
                <label class="block text-sm font-semibold text-gray-900 mb-2">Option de paiement</label>
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                    <div class="relative flex items-start p-4 border rounded-lg cursor-pointer hover:bg-gray-50 transition-colors" onclick="selectPaymentOption('balance')">
                        <div class="flex items-center h-5">
                            <input id="option_balance" name="payment_option" type="radio" value="balance" class="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300" checked>
                        </div>
                        <div class="ml-3 text-sm">
                            <label for="option_balance" class="font-medium text-gray-700">Payer le solde</label>
                            <p class="text-gray-500">{{ number_format(max(0, $booking->total_price - $booking->deposit_amount), 2) }} € maintenant</p>
                        </div>
                    </div>
                    <div class="relative flex items-start p-4 border rounded-lg cursor-pointer hover:bg-gray-50 transition-colors" onclick="selectPaymentOption('full')">
                        <div class="flex items-center h-5">
                            <input id="option_full_after_deposit" name="payment_option" type="radio" value="full" class="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300">
                        </div>
                        <div class="ml-3 text-sm">
                            <label for="option_full_after_deposit" class="font-medium text-gray-700">Re-payer la totalité</label>
                            <p class="text-gray-500">{{ number_format($booking->total_price, 2) }} €</p>
                        </div>
                    </div>
                </div>
            </div>
            @endif

            <!-- Booking Details -->
            <div class="bg-gray-50 rounded-lg p-6 mb-8">
                <h3 class="font-semibold text-gray-900 mb-4">Détails de la réservation</h3>
                <div class="grid grid-cols-2 gap-4 text-sm">
                    <div>
                        <p class="text-gray-600">Date</p>
                        <p class="font-semibold text-gray-900">{{ $booking->start_datetime->format('d/m/Y') }}</p>
                    </div>
                    <div>
                        <p class="text-gray-600">Heure</p>
                        <p class="font-semibold text-gray-900">{{ $booking->start_datetime->format('H:i') }}</p>
                    </div>
                    <div>
                        <p class="text-gray-600">Prestataire</p>
                        <p class="font-semibold text-gray-900">{{ $booking->prestataire->user->name ?? 'N/A' }}</p>
                    </div>
                    <div>
                        <p class="text-gray-600">Statut</p>
                        <p class="font-semibold text-green-600">
                            @if($booking->payment_status == 'deposit_paid')
                                Acompte payé
                            @elseif($booking->payment_status == 'paid')
                                Payé
                            @else
                                En attente de paiement
                            @endif
                        </p>
                    </div>
                </div>
            </div>

            <!-- Payment Method Selection -->
            <div class="mb-6">
                <label class="block text-sm font-semibold text-gray-900 mb-2">Moyen de paiement</label>
                <div class="flex space-x-4">
                    <button type="button" onclick="selectPaymentMethod('stripe')" id="btn-stripe" class="flex-1 py-3 px-4 border-2 border-blue-600 bg-blue-50 text-blue-700 rounded-lg font-medium flex items-center justify-center transition-all">
                        <i class="fab fa-cc-stripe text-2xl mr-2"></i> Carte Bancaire
                    </button>
                    <button type="button" onclick="selectPaymentMethod('paypal')" id="btn-paypal" class="flex-1 py-3 px-4 border-2 border-gray-200 bg-white text-gray-600 rounded-lg font-medium flex items-center justify-center hover:bg-gray-50 transition-all">
                        <i class="fab fa-paypal text-2xl mr-2"></i> PayPal
                    </button>
                </div>
            </div>

            <!-- Stripe Section -->
            <div id="stripe-section">
                <form id="payment-form" class="space-y-6">
                    @csrf
                    <input type="hidden" id="payment_type" name="payment_type" value="{{ $booking->deposit_amount > 0 && $booking->payment_status === 'pending' ? 'deposit' : ($booking->payment_status === 'deposit_paid' ? 'balance' : 'full') }}">
                    
                    <div id="payment-element">
                        <!-- Stripe Elements will create form elements here -->
                    </div>
                    
                    <div id="error-message" class="text-red-600 text-sm hidden"></div>

                    <button id="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 rounded-lg transition-colors flex justify-center items-center">
                        <div class="spinner hidden mr-2 w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin"></div>
                        <span id="button-text">Payer <span id="payAmount">{{ number_format($booking->deposit_amount > 0 && $booking->payment_status === 'pending' ? $booking->deposit_amount : ($booking->payment_status === 'deposit_paid' ? max(0, $booking->total_price - $booking->deposit_amount) : $booking->total_price), 2) }}</span> €</span>
                    </button>
                    
                    <p class="text-center text-xs text-gray-600 mt-4">
                        <i class="fas fa-lock mr-1"></i> Paiement sécurisé par Stripe. Vos données bancaires sont chiffrées.
                    </p>
                </form>
            </div>

            <!-- PayPal Section -->
            <div id="paypal-section" class="hidden">
                <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-4 mb-4">
                    <p class="text-sm text-yellow-800">Vous allez être redirigé vers PayPal pour finaliser votre paiement.</p>
                </div>
                <div id="paypal-button-container" class="w-full"></div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script src="https://js.stripe.com/v3/"></script>
@if(isset($paypalClientId) && !empty($paypalClientId))
<script src="https://www.paypal.com/sdk/js?client-id={{ $paypalClientId }}&currency=EUR"></script>
@endif

<script>
    const stripe = Stripe("{{ config('services.stripe.key') }}");
    const bookingId = "{{ $booking->id }}";
    let elements;
    let stripeInitialized = false;
    let paypalInitialized = false;
    
    const depositAmount = Number("{{ number_format($booking->deposit_amount, 2, '.', '') }}");
    const totalAmount = Number("{{ number_format($booking->total_price, 2, '.', '') }}");
    const balanceAmount = Math.max(0, totalAmount - depositAmount);
    const hasDeposit = depositAmount > 0;

    // Initialize Stripe by default
    initializeStripe();

    function selectPaymentMethod(method) {
        const stripeSection = document.getElementById('stripe-section');
        const paypalSection = document.getElementById('paypal-section');
        const btnStripe = document.getElementById('btn-stripe');
        const btnPaypal = document.getElementById('btn-paypal');

        if (method === 'stripe') {
            stripeSection.classList.remove('hidden');
            paypalSection.classList.add('hidden');
            
            btnStripe.classList.add('border-blue-600', 'bg-blue-50', 'text-blue-700');
            btnStripe.classList.remove('border-gray-200', 'bg-white', 'text-gray-600');
            
            btnPaypal.classList.remove('border-blue-600', 'bg-blue-50', 'text-blue-700');
            btnPaypal.classList.add('border-gray-200', 'bg-white', 'text-gray-600');
            
            if (!stripeInitialized) {
                initializeStripe();
            }
        } else {
            stripeSection.classList.add('hidden');
            paypalSection.classList.remove('hidden');
            
            btnPaypal.classList.add('border-blue-600', 'bg-blue-50', 'text-blue-700');
            btnPaypal.classList.remove('border-gray-200', 'bg-white', 'text-gray-600');
            
            btnStripe.classList.remove('border-blue-600', 'bg-blue-50', 'text-blue-700');
            btnStripe.classList.add('border-gray-200', 'bg-white', 'text-gray-600');

            if (!paypalInitialized) {
                initializePaypal();
            }
        }
    }

    async function initializeStripe() {
        if (stripeInitialized) return;
        
        const paymentType = document.getElementById('payment_type').value;
        
        try {
            const response = await fetch("{{ route('payment.intent', $booking) }}", {
                method: "POST",
                headers: { "Content-Type": "application/json", "X-CSRF-TOKEN": "{{ csrf_token() }}" },
                body: JSON.stringify({ payment_type: paymentType }),
            });
            
            const { clientSecret } = await response.json();

            const appearance = { theme: 'stripe' };
            elements = stripe.elements({ appearance, clientSecret });

            const paymentElement = elements.create("payment");
            paymentElement.mount("#payment-element");
            stripeInitialized = true;
        } catch (error) {
            console.error("Error initializing Stripe:", error);
        }
    }

    function initializePaypal() {
        if (typeof paypal === 'undefined') {
            console.error("PayPal SDK not loaded");
            document.getElementById('paypal-button-container').innerHTML = '<p class="text-red-500">Erreur de chargement de PayPal. Veuillez vérifier la configuration.</p>';
            return;
        }

        paypal.Buttons({
            createOrder: function(data, actions) {
                const paymentType = document.getElementById('payment_type').value;
                const amount = paymentType === 'deposit' ? depositAmount : (paymentType === 'balance' ? balanceAmount : totalAmount);
                
                return actions.order.create({
                    purchase_units: [{
                        amount: {
                            value: amount.toFixed(2)
                        },
                        description: "Booking #" + bookingId
                    }]
                });
            },
            onApprove: function(data, actions) {
                return actions.order.capture().then(function(details) {
                    // Call backend to record the payment
                    fetch("{{ route('payment.confirm', $booking) }}", {
                        method: "POST",
                        headers: {
                            "Content-Type": "application/json",
                            "X-CSRF-TOKEN": "{{ csrf_token() }}"
                        },
                        body: JSON.stringify({
                            payment_type: document.getElementById('payment_type').value,
                            provider: 'paypal',
                            paypal_order_id: data.orderID
                        })
                    })
                    .then(response => response.json())
                    .then(data => {
                        if (data.success) {
                            window.location.href = "{{ route('prestataire.bookings.index') }}?payment_success=true&provider=paypal";
                        } else {
                            alert('Erreur lors de l\'enregistrement du paiement: ' + (data.error || data.message));
                        }
                    })
                    .catch(error => {
                        console.error('Error:', error);
                        alert('Une erreur est survenue lors de la communication avec le serveur.');
                    });
                });
            }
        }).render('#paypal-button-container');
        
        paypalInitialized = true;
    }

    async function handleSubmit(e) {
        e.preventDefault();
        setLoading(true);

        const { error } = await stripe.confirmPayment({
            elements,
            confirmParams: {
                return_url: "{{ route('payment.success', $booking) }}",
            },
            redirect: 'if_required'
        });

        if (error) {
            showMessage(error.message);
            setLoading(false);
        } else {
            window.location.href = "{{ route('prestataire.bookings.index') }}?payment_success=true";
        }
        
        setLoading(false);
    }

    document.getElementById("payment-form").addEventListener("submit", handleSubmit);

    function selectPaymentOption(type) {
        document.getElementById('payment_type').value = type;
        const amount = type === 'deposit' ? depositAmount : (type === 'balance' ? balanceAmount : totalAmount);
        document.getElementById('payAmount').innerText = amount.toFixed(2);
        document.getElementById('displayAmount').innerText = amount.toFixed(2) + ' €';
        
        // Re-initialize Stripe if it's the active method
        if (document.getElementById('stripe-section').classList.contains('hidden') === false) {
             stripeInitialized = false;
             document.getElementById('payment-element').innerHTML = '';
             initializeStripe();
        }
    }

    function showMessage(messageText) {
        const messageContainer = document.querySelector("#error-message");
        messageContainer.classList.remove("hidden");
        messageContainer.textContent = messageText;
        setTimeout(function () {
            messageContainer.classList.add("hidden");
            messageContainer.textContent = "";
        }, 4000);
    }

    function setLoading(isLoading) {
        if (isLoading) {
            document.querySelector("#submit").disabled = true;
            document.querySelector(".spinner").classList.remove("hidden");
            document.querySelector("#button-text").classList.add("hidden");
        } else {
            document.querySelector("#submit").disabled = false;
            document.querySelector(".spinner").classList.add("hidden");
            document.querySelector("#button-text").classList.remove("hidden");
        }
    }
</script>
@endpush
@endsection