@extends('user.layouts.app')
@section('title','Conference Tag')
@section('page-title','Conference Tag / Badge')
@section('page-subtitle','Download or print your conference badges')

@push('styles')
<style>
    .tag-grid {
        display: flex;
        flex-wrap: wrap;
        gap: 1.5rem;
        justify-content: center;
    }
    .tag-card-wrap {
        width: 100%;
        max-width: 340px;
    }
    .tag-card .tag-logo {
        max-height: 42px;
        max-width: 120px;
        object-fit: contain;
        margin-bottom: 0.5rem;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
    .tag-card .tag-conference-name {
        font-size: 0.85rem;
        font-weight: 600;
        line-height: 1.35;
        margin-bottom: 0.25rem;
    }
    .tag-card .tag-conference-location {
        font-size: 0.8rem;
        font-weight: 600;
        opacity: 0.95;
        letter-spacing: 0.02em;
    }
    .tag-card .tag-photo {
        width: 88px;
        height: 88px;
        object-fit: cover;
        border-radius: 50%;
        border: 3px solid rgba(255,255,255,.85);
    }
    .tag-card .tag-photo-placeholder {
        width: 88px;
        height: 88px;
        border-radius: 50%;
        background: rgba(255,255,255,.15);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 2rem;
    }
    .tag-card .tag-qr {
        width: 180px;
        height: 180px;
        object-fit: contain;
    }
    .tag-actions {
        margin-top: 1rem;
    }
    @media print {
        body * {
            visibility: hidden;
        }
        .tag-print-area,
        .tag-print-area * {
            visibility: visible;
        }
        .tag-print-area {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
        }
        .no-print {
            display: none !important;
        }
        .tag-grid {
            display: block;
        }
        .tag-card-wrap {
            max-width: none;
            page-break-inside: avoid;
            margin-bottom: 1.5rem;
        }
        .tag-card {
            max-width: 340px;
            margin: 0 auto 1.5rem;
            box-shadow: none !important;
        }
        main.p-4 {
            padding: 0 !important;
        }
    }
</style>
@endpush

@section('content')

@if(($pendingRegistrations ?? collect())->isNotEmpty())
<div class="alert alert-warning no-print">
    <strong>Registration payment pending.</strong>
    You have unpaid conference registration(s). QR tags are only issued after registration payment is confirmed successfully.
    <ul class="mb-2 mt-2">
        @foreach($pendingRegistrations as $pending)
            <li>{{ $pending->conference?->name }} — payment status: {{ ucfirst($pending->payment_status) }}</li>
        @endforeach
    </ul>
    <a href="{{ route('user.payments-invoices') }}" class="btn btn-sm btn-success">Complete payment</a>
</div>
@endif

@if($registrations->count() > 1)
<form method="GET" class="mb-3 no-print">
    <select name="registration" class="form-select" onchange="this.form.submit()">
        @foreach($registrations as $reg)
            <option value="{{ $reg->id }}" @selected($registration?->id === $reg->id)>{{ $reg->conference->name }}</option>
        @endforeach
    </select>
</form>
@endif

@if($registration)
    @php
        $tags = $registration->tags->sortBy(fn ($tag) => $tag->holder_type === 'spouse' ? 1 : 0);
    @endphp

    @if($tags->isNotEmpty())
        <div class="tag-print-area">
            <div class="tag-grid">
                @foreach($tags as $tag)
                    @include('user.partials.conference-tag-card', [
                        'registration' => $registration,
                        'tag' => $tag,
                    ])
                @endforeach
            </div>
        </div>

        <div class="text-center mt-4 no-print">
            <button type="button" class="btn btn-green" onclick="window.print()">
                <i class="fas fa-print me-1"></i> Print All Tags
            </button>
            <a href="{{ route('user.registration-details', ['registration' => $registration->id]) }}" class="btn btn-light ms-2">Back to Registration</a>
        </div>
    @else
        <div class="content-card p-4 text-center">
            <p class="text-muted mb-0">QR tags are being generated. Please refresh shortly.</p>
        </div>
    @endif
@else
<div class="content-card p-4 text-center">
    <p class="text-muted mb-3">Conference tags are available only after your registration payment is confirmed successfully.</p>
    <a href="{{ route('user.my-conferences') }}" class="btn btn-success">Register for a Conference</a>
    <a href="{{ route('user.payments-invoices') }}" class="btn btn-outline-secondary ms-2">Payments &amp; Invoices</a>
</div>
@endif

@endsection