{{-- Transaction Info Partial - Optimized with date helpers --}}
@php
    // Keep Carbon instances for calculations and formatted strings for display
    $registrationCarbon = $invoice->date ? \Carbon\Carbon::parse($invoice->date) : null;
    $dueCarbon = $invoice->due_date ? \Carbon\Carbon::parse($invoice->due_date) : null;

    $registrationDate = $registrationCarbon ? $registrationCarbon->format('d/m/Y') : 'N/A';
    $dueDate = $dueCarbon ? $dueCarbon->format('d/m/Y') : 'N/A';

    $totalAmount = number_format($invoice->total ?? 0, 0, ',', '.');
    $isExpired = $invoice->status == 1;

    // Precompute days remaining (use 'N/A' when dates are missing)
    $daysRemaining = $dueCarbon && $registrationCarbon ? $dueCarbon->diffInDays($registrationCarbon) : 'N/A';
@endphp

<div class="bg-white rounded-lg shadow-lg p-6">
    <h2 class="text-lg font-semibold text-blue-600 mb-4 border-b border-blue-100 pb-2">
        {{ __('Thông tin giao dịch') }}
    </h2>
    <div class="space-y-4">
        {{-- Order Number --}}
        <div class="flex justify-between items-center">
            <span class="text-gray-600 font-medium">{{ __('Mã đơn hàng') }}</span>
            <span class="text-sm flex items-center gap-2">
                {{ $invoice->order_num }}
                <button type="button" onclick="copyToClipboard('{{ $invoice->order_num }}')"
                    class="text-blue-600 hover:text-blue-800" title="Sao chép">
                    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none"
                        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <rect width="14" height="14" x="8" y="8" rx="2" ry="2" />
                        <path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" />
                    </svg>
                </button>
            </span>
        </div>

        {{-- Registration Date --}}
        <div class="flex justify-between items-center">
            <span class="text-gray-600 font-medium">{{ __('Ngày đăng ký') }}</span>
            <span class="text-sm">{{ $registrationDate }}</span>
        </div>

        {{-- Initial Payment --}}
        <div class="flex justify-between items-center">
            <span class="text-gray-600 font-medium">{{ __('Thanh toán lần đầu') }}</span>
            <span class="text-sm">{{ $totalAmount }} đ</span>
        </div>

        {{-- Recurring Payment Amount --}}
        <div class="flex justify-between items-center">
            <span class="text-gray-600 font-medium">{{ __('Số tiền thanh toán định kỳ') }}</span>
            <span class="text-sm">{{ $totalAmount }} đ</span>
        </div>

        {{-- Service Status --}}
        <div class="flex justify-between items-center">
            <span class="text-gray-600 font-medium">{{ __('Hạn sử dụng') }}</span>
            <span class="text-sm">
                @if ($isExpired)
                    <span class="bg-red-100 text-red-800 px-2 py-1 rounded text-xs">{{ __('Hết hạn') }}</span>
                @else
                    <span class="bg-green-100 text-green-800 px-2 py-1 rounded text-xs">{{ __('Hoạt động') }}</span>
                @endif
            </span>
        </div>

        {{-- Expiry Date --}}
        <div class="flex justify-between items-center">
            <span class="text-gray-600 font-medium">{{ __('Ngày hết hạn') }}</span>
            <span class="text-sm">{{ $dueDate }}</span>
        </div>

        <div class="flex justify-between items-center">
            <span class="text-gray-600 font-medium">{{ __('Số ngày còn lại') }}</span>
            <span class="bg-green-100 text-green-800 px-2 py-1 rounded text-xs">{{ $daysRemaining }} Ngày</span>
        </div>


        {{-- Auto Renewal Status --}}
        <div class="flex justify-between items-center">
            <span class="text-gray-600 font-medium">{{ __('Trạng thái gia hạn tự động') }}</span>
            <span class="bg-red-100 text-red-800 px-2 py-1 rounded text-xs">OFF</span>
        </div>
    <script>
        function copyToClipboard(text, message = 'Đã sao chép!') {
            if (navigator.clipboard) {
                navigator.clipboard.writeText(text).then(() => {
                    if (typeof FuiToast !== 'undefined') {
                        FuiToast.success(message);
                    } else {
                        // Fallback
                        console.log('Copied:', text);
                    }
                });
            }
        }
    </script>
    </div>
</div>