@php
    $isSpouse = $tag->isSpouseTag();
    $displayName = $tag->holder_name ?? ($isSpouse ? $registration->spouse_name : $registration->user->name);
    $roleLabel = $isSpouse
        ? 'Spouse'
        : ($registration->user->membershipCategory?->name ?? str_replace('_', ' ', ucfirst($registration->registration_category)));
    $photo = ! $isSpouse && $registration->passport_photo
        ? asset('storage/'.$registration->passport_photo)
        : null;
@endphp

<div class="tag-card-wrap">
    <div class="tag-card" id="tag-{{ $tag->id }}">
        <div class="tag-header">
            @if($settingsService->logoUrl())
                <img src="{{ $settingsService->logoUrl() }}" alt="{{ $branding['organization_name'] }}" class="tag-logo">
            @endif
            <p class="tag-conference-name mb-1">{{ $registration->conference->name }}</p>
            @if($registration->conference->city || $registration->conference->conference_year)
                <small class="tag-conference-location d-block">
                    {{ trim(collect([$registration->conference->city, $registration->conference->conference_year])->filter()->join(' ')) }}
                </small>
            @endif
        </div>
        <div class="p-4 text-center">
            @if($photo)
                <img src="{{ $photo }}" alt="{{ $displayName }}" class="tag-photo mb-3">
            @else
                <div class="tag-photo-placeholder mb-3 mx-auto">
                    <i class="fas fa-user"></i>
                </div>
            @endif

            <h5 class="mb-1 text-uppercase">{{ $displayName }}</h5>
            <p class="mb-1">{{ $roleLabel }}</p>
            @if(! $isSpouse && $registration->user->affiliation)
                <small class="text-muted d-block mb-2">{{ $registration->user->affiliation }}</small>
            @endif

            <h6 class="mt-3 mb-2">{{ $tag->tag_number }}</h6>

            @if($tag->qr_code_image)
                <img src="{{ asset('storage/'.$tag->qr_code_image) }}" alt="QR Code for {{ $displayName }}" class="tag-qr my-2">
            @endif

            <small class="text-muted d-block">Scan at check-in</small>
            <small class="text-muted">Reg #: {{ $registration->registration_number }}</small>
        </div>
    </div>

    <div class="tag-actions text-center no-print">
        <button type="button" class="btn btn-sm btn-outline-secondary" onclick="printTag('tag-{{ $tag->id }}')">
            <i class="fas fa-print me-1"></i> Print {{ $isSpouse ? 'Spouse Tag' : 'My Tag' }}
        </button>
    </div>
</div>

@once
    @push('scripts')
    <script>
        function printTag(elementId) {
            const tag = document.getElementById(elementId);
            if (!tag) {
                window.print();
                return;
            }

            const printWindow = window.open('', '_blank', 'width=800,height=900');
            if (!printWindow) {
                window.print();
                return;
            }

            const styles = `
                body { font-family: Inter, Arial, sans-serif; margin: 0; padding: 24px; }
                .tag-card { max-width: 340px; margin: 0 auto; border: 1px solid #ddd; border-radius: 18px; overflow: hidden; }
                .tag-header { background: linear-gradient(135deg, #0b4f24, #43A047); color: #fff; padding: 18px; text-align: center; }
                .tag-logo { max-height: 42px; max-width: 120px; object-fit: contain; margin-bottom: 8px; display: block; margin-left: auto; margin-right: auto; }
                .tag-conference-name { font-size: 0.85rem; font-weight: 600; line-height: 1.35; margin: 8px 0 4px; }
                .tag-conference-location { font-size: 0.8rem; font-weight: 600; opacity: 0.95; letter-spacing: 0.02em; }
                .tag-photo { width: 88px; height: 88px; object-fit: cover; border-radius: 50%; border: 3px solid rgba(255,255,255,.85); }
                .tag-photo-placeholder { width: 88px; height: 88px; border-radius: 50%; background: #eee; display: inline-flex; align-items: center; justify-content: center; font-size: 2rem; margin-bottom: 12px; }
                .tag-qr { width: 180px; height: 180px; object-fit: contain; }
                .p-4 { padding: 1.5rem; text-align: center; }
                h4, h5, h6, p, small { margin: 0 0 .5rem; }
            `;

            printWindow.document.write('<html><head><title>Conference Tag</title><style>' + styles + '</style></head><body>');
            printWindow.document.write(tag.outerHTML);
            printWindow.document.write('</body></html>');
            printWindow.document.close();
            printWindow.focus();
            printWindow.print();
            printWindow.close();
        }
    </script>
    @endpush
@endonce