@extends('layouts.portal')
@section('title', 'Renovar Licencia — Olorun Secure')

@section('content')
<div class="max-w-lg mx-auto">
    <div class="flex items-center gap-3 mb-6">
        <a href="{{ route('portal.dashboard') }}" class="text-gray-500 hover:text-white transition">
            <i class="fas fa-arrow-left"></i>
        </a>
        <h2 class="text-xl font-bold">Renovar Licencia</h2>
    </div>

    <!-- Current Plan -->
    <div class="bg-gray-900 rounded-xl border border-gray-800 p-6 mb-6">
        <div class="flex items-center justify-between mb-4">
            <div>
                <h3 class="font-semibold text-lg">{{ $license->plan ? $license->plan->name : 'Plan' }}</h3>
                <p class="text-sm text-gray-500">{{ $license->plan ? $license->plan->description : '' }}</p>
            </div>
            <div class="text-right">
                <p class="text-2xl font-bold">${{ $license->plan ? number_format($license->plan->price, 2) : '—' }}</p>
                <p class="text-xs text-gray-500">{{ $license->plan ? $license->plan->currency : 'USD' }}</p>
            </div>
        </div>

        <div class="space-y-2 text-sm">
            <div class="flex justify-between text-gray-400">
                <span>Duración</span>
                <span>{{ $license->plan ? $license->plan->duration_days : 365 }} días</span>
            </div>
            <div class="flex justify-between text-gray-400">
                <span>Expira actualmente</span>
                <span class="{{ $license->expires_at && $license->expires_at->isPast() ? 'text-red-400' : '' }}">
                    {{ $license->expires_at ? $license->expires_at->format('d/m/Y') : 'Sin expiración' }}
                </span>
            </div>
            <div class="flex justify-between text-gray-400">
                <span>Nueva expiración</span>
                <span class="text-green-400 font-medium">
                    @php
                        $days = $license->plan ? $license->plan->duration_days : 365;
                        $base = ($license->expires_at && $license->expires_at->isFuture())
                            ? $license->expires_at : now();
                        $newExpiry = $base->copy()->addDays($days);
                    @endphp
                    {{ $newExpiry->format('d/m/Y') }}
                </span>
            </div>
        </div>
    </div>

    <!-- PayPal Button -->
    <div class="bg-gray-900 rounded-xl border border-gray-800 p-6">
        <div id="paypal-button-container"></div>

        <div id="payment-status" class="hidden mt-4 p-4 rounded-lg text-center"></div>

        <div class="mt-4 text-center">
            <p class="text-xs text-gray-600">
                <i class="fas fa-lock mr-1"></i>
                Pago seguro procesado por PayPal. No almacenamos datos de tarjeta.
            </p>
        </div>
    </div>
</div>

<!-- PayPal JS SDK -->
<script src="https://www.paypal.com/sdk/js?client-id={{ config('services.paypal.client_id', 'test') }}&currency={{ $license->plan ? $license->plan->currency : 'USD' }}&locale=es_DO"></script>
<script>
paypal.Buttons({
    style: {
        layout: 'vertical',
        color:  'blue',
        shape:  'rect',
        label:  'pay'
    },
    createOrder: function() {
        return fetch('{{ route("portal.renewal.create") }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            }
        }).then(function(res) {
            return res.json();
        }).then(function(data) {
            if (data.error) {
                throw new Error(data.error);
            }
            return data.id;
        });
    },
    onApprove: function(data) {
        var statusEl = document.getElementById('payment-status');
        statusEl.className = 'mt-4 p-4 rounded-lg text-center bg-blue-500/20 text-blue-400';
        statusEl.innerHTML = '<i class="fas fa-spinner fa-spin mr-1"></i> Procesando pago...';
        statusEl.classList.remove('hidden');

        return fetch('{{ route("portal.renewal.capture") }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            },
            body: JSON.stringify({ order_id: data.orderID })
        }).then(function(res) {
            return res.json();
        }).then(function(result) {
            if (result.success) {
                statusEl.className = 'mt-4 p-4 rounded-lg text-center bg-green-500/20 text-green-400';
                statusEl.innerHTML = '<i class="fas fa-check-circle mr-1"></i> ¡Pago completado! Tu licencia fue renovada hasta el ' + result.expires_at + '.';
                setTimeout(function() {
                    window.location.href = '{{ route("portal.dashboard") }}';
                }, 3000);
            } else {
                statusEl.className = 'mt-4 p-4 rounded-lg text-center bg-red-500/20 text-red-400';
                statusEl.innerHTML = '<i class="fas fa-times-circle mr-1"></i> ' + (result.error || 'Error al procesar el pago.');
            }
        });
    },
    onError: function(err) {
        var statusEl = document.getElementById('payment-status');
        statusEl.className = 'mt-4 p-4 rounded-lg text-center bg-red-500/20 text-red-400';
        statusEl.innerHTML = '<i class="fas fa-times-circle mr-1"></i> Error: ' + err.message;
        statusEl.classList.remove('hidden');
    }
}).render('#paypal-button-container');
</script>
@endsection