@extends('admin.layout')
@section('title', 'Betaling detail')

@section('content')
<div class="p-6 max-w-4xl mx-auto space-y-6">

    <div class="flex items-center gap-3">
        <a href="{{ route('admin.logs', ['tab' => 'payments']) }}" class="text-sm text-indigo-600 hover:underline">← Betalingslogs</a>
    </div>

    @php
        $eventColors = [
            'checkout_started'            => 'bg-gray-100 text-gray-700',
            'plan_switch_started'         => 'bg-gray-100 text-gray-700',
            'payment_paid'                => 'bg-green-100 text-green-800',
            'renewal_paid'                => 'bg-green-100 text-green-800',
            'payment_failed'              => 'bg-red-100 text-red-700',
            'payment_expired'             => 'bg-red-100 text-red-700',
            'payment_cancelled'           => 'bg-red-100 text-red-700',
            'subscription_cancelled'      => 'bg-orange-100 text-orange-700',
            'subscription_creation_failed'=> 'bg-red-100 text-red-700',
            'webhook_received'            => 'bg-blue-100 text-blue-700',
            'webhook_error'               => 'bg-red-100 text-red-700',
            'referral_reward_granted'     => 'bg-violet-100 text-violet-700',
        ];
    @endphp

    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        {{-- Linkerkolom: event & gebruiker --}}
        <div class="bg-white border border-gray-100 rounded-lg p-5 space-y-4">
            <div>
                <div class="text-xs text-gray-400 mb-1">Event</div>
                <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium {{ $eventColors[$log->event] ?? 'bg-gray-100 text-gray-600' }}">
                    {{ $log->event }}
                </span>
            </div>
            <div>
                <div class="text-xs text-gray-400 mb-1">Datum/tijd</div>
                <div class="text-sm font-mono text-gray-700">{{ $log->created_at->format('d/m/Y H:i:s') }}</div>
                <div class="text-xs text-gray-400">{{ $log->created_at->diffForHumans() }}</div>
            </div>
            <div>
                <div class="text-xs text-gray-400 mb-1">Gebruiker</div>
                @if($log->user)
                    <a href="{{ route('admin.users.show', $log->user) }}" class="text-indigo-600 hover:underline text-sm font-medium">{{ $log->user->name }}</a>
                    <div class="text-xs text-gray-400">{{ $log->user->email }} · ID {{ $log->user_id }}</div>
                @elseif($log->user_id)
                    <span class="text-gray-500 text-sm">ID {{ $log->user_id }} (account verwijderd)</span>
                @else
                    <span class="text-gray-300 text-sm">—</span>
                @endif
            </div>
            @if($log->referrer)
            <div>
                <div class="text-xs text-gray-400 mb-1">Referrer (beloond)</div>
                <a href="{{ route('admin.users.show', $log->referrer) }}" class="text-indigo-600 hover:underline text-sm">{{ $log->referrer->name }}</a>
                <span class="text-xs text-gray-400">· ID {{ $log->referrer_id }}</span>
            </div>
            @endif
            <div>
                <div class="text-xs text-gray-400 mb-1">IP-adres</div>
                <div class="text-sm font-mono text-gray-700">{{ $log->ip ?? '—' }}</div>
            </div>
        </div>

        {{-- Rechterkolom: betalingsdetails --}}
        <div class="bg-white border border-gray-100 rounded-lg p-5 space-y-4">
            <div class="grid grid-cols-3 gap-4">
                <div>
                    <div class="text-xs text-gray-400 mb-1">Bedrag (na korting)</div>
                    <div class="text-lg font-bold text-gray-800">{{ $log->amount ? '€' . $log->amount : '—' }}</div>
                </div>
                <div>
                    <div class="text-xs text-gray-400 mb-1">Origineel bedrag</div>
                    <div class="text-sm font-mono text-gray-600">{{ $log->original_amount ? '€' . $log->original_amount : '—' }}</div>
                </div>
                <div>
                    <div class="text-xs text-gray-400 mb-1">Korting</div>
                    <div class="text-sm font-mono {{ $log->discount_amount ? 'text-green-700 font-semibold' : 'text-gray-300' }}">{{ $log->discount_amount ? '-€' . $log->discount_amount : '—' }}</div>
                </div>
            </div>
            <div>
                <div class="text-xs text-gray-400 mb-1">Plan</div>
                <div class="text-sm text-gray-700">{{ $log->plan ?? '—' }}</div>
            </div>
            <div>
                <div class="text-xs text-gray-400 mb-1">Coupon code</div>
                <div class="text-sm font-mono text-gray-700">{{ $log->coupon_code ?? '—' }}</div>
            </div>
            <div>
                <div class="text-xs text-gray-400 mb-1">Mollie Payment ID</div>
                <div class="text-sm font-mono text-gray-700 break-all">{{ $log->mollie_payment_id ?? '—' }}</div>
            </div>
            <div>
                <div class="text-xs text-gray-400 mb-1">Mollie Subscription ID</div>
                <div class="text-sm font-mono text-gray-700 break-all">{{ $log->mollie_subscription_id ?? '—' }}</div>
            </div>
            <div>
                <div class="text-xs text-gray-400 mb-1">Valuta</div>
                <div class="text-sm text-gray-700">{{ $log->currency }}</div>
            </div>
        </div>
    </div>

    {{-- Meta / extra context --}}
    @if($log->meta)
    <div class="bg-white border border-gray-100 rounded-lg p-5">
        <div class="text-xs text-gray-400 mb-2">Meta / extra context</div>
        <pre class="text-xs text-gray-600 bg-gray-50 rounded p-3 overflow-x-auto">{{ json_encode($log->meta, JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE) }}</pre>
    </div>
    @endif

</div>
@endsection