<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Visitor Badge</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }

        @page {
            size: 80mm auto;
            margin: 0mm;
        }

        html, body {
            width: 80mm;
            height: 50mm;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }

        body {
            width: 80mm;
            height: 50mm;
            font-family: Arial, sans-serif;
            font-size: 7pt;
            background: #fff;
            color: #000;
        }

        .badge {
            width: 80mm;
            height: 50mm;
            border: 1.5px solid #000;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }

        /* ── Header bar ── */
        .badge-header {
            background: #1a1a2e;
            color: #fff;
            padding: 1.5mm 2mm;
            font-size: 8pt;
            font-weight: bold;
            letter-spacing: 1px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-shrink: 0;
        }

        .badge-header .type     { font-size: 9pt; letter-spacing: 2px; }
        .badge-header .badge-id { font-size: 7pt; opacity: 0.85; }

        /* ── Body ── */
        .badge-body {
            display: flex;
            flex: 1;
            padding: 1.5mm 2mm;
            gap: 2mm;
            overflow: hidden;
        }

        /* ── Fields (left) ── */
        .badge-fields {
            flex: 1;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }

        .field-row {
            display: grid;
            grid-template-columns: 16mm 3mm 1fr;
            line-height: 1.25;
            margin-bottom: 0.6mm;
            align-items: start;
        }

        .field-label {
            color: #000;
            font-size: 6.5pt;
            font-weight: 700;
            white-space: nowrap;
        }

        .field-colon {
            color: #000;
            font-size: 6.5pt;
            font-weight: 700;
            text-align: center;
        }

        .field-value {
            font-weight: 700;
            font-size: 6.5pt;
            color: #000;
            /* Prevent wrapping — truncate with ellipsis if too long */
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        /* ── Photo column (right) ── */
        .badge-photo {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 18mm;
            flex-shrink: 0;
            gap: 0.5mm;
        }

        .badge-photo img {
            width: 16mm;
            height: 16mm;
            object-fit: cover;
            border: 1px solid #000;
        }

        .badge-photo .no-photo {
            width: 16mm;
            height: 16mm;
            border: 1.5px dashed #000;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 6pt;
            color: #000;
            font-weight: 700;
            text-align: center;
        }

        .host-sign {
            font-size: 6pt;
            color: #000;
            font-weight: 700;
            text-align: center;
            border-top: 1px solid #000;
            padding-top: 0.5mm;
            width: 100%;
        }

        /* ── QR code ── */
        .visitor-qr {
            margin-top: 1mm;
            width: 18mm;
            display: flex;
            justify-content: center;
        }

        .visitor-qr svg {
            width: 16mm !important;
            height: 16mm !important;
            display: block;
        }

        /* ── Footer ── */
        .badge-footer {
            border-top: 1px solid #000;
            padding: 0.8mm 2mm;
            text-align: right;
            font-size: 6pt;
            color: #000;
            font-weight: 700;
            flex-shrink: 0;
        }

        @media print {
            body { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
            .no-print { display: none !important; }
        }
    </style>
</head>
<body>

    {{-- ── Print / Close buttons (screen only) ── --}}
    <div class="no-print" style="padding: 8px; text-align:center; background:#f3f4f6;">
        <button onclick="window.print()" style="padding:6px 18px; background:#1a1a2e; color:#fff; border:none; border-radius:6px; cursor:pointer; font-size:13px;">
            🖨️ Print Badge
        </button>
        <button onclick="window.close()" style="padding:6px 18px; background:#e5e7eb; color:#333; border:none; border-radius:6px; cursor:pointer; font-size:13px; margin-left:8px;">
            ✕ Close
        </button>
    </div>

    <div class="badge">

        {{-- Header --}}
        <div class="badge-header">
            <span class="type">{{ strtoupper($visitor->type ?? 'VISITOR') }}</span>
            <span class="badge-id">#{{ $visitor->register_id ?? str_pad($visitor->id, 5, '0', STR_PAD_LEFT) }}</span>
        </div>

        {{-- Body --}}
        <div class="badge-body">

            {{-- Left: fields --}}
            <div class="badge-fields">
                <div class="field-row">
                    <span class="field-label">Name</span>
                    <span class="field-colon">:</span>
                    <span class="field-value">{{ strtoupper($visitor->name) }}</span>
                </div>
                <div class="field-row">
                    <span class="field-label">Company</span>
                    <span class="field-colon">:</span>
                    <span class="field-value">{{ $visitor->company }}</span>
                </div>
                <div class="field-row">
                    <span class="field-label">To Meet</span>
                    <span class="field-colon">:</span>
                    <span class="field-value">{{ strtoupper($visitor->employeeMaster?->name ?? '—') }}</span>
                </div>
                <div class="field-row">
                    <span class="field-label">Dept</span>
                    <span class="field-colon">:</span>
                    <span class="field-value">{{ strtoupper($visitor->employeeMaster?->department ?? $visitor->department ?? '—') }}</span>
                </div>
                <div class="field-row">
                    <span class="field-label">Valid Upto</span>
                    <span class="field-colon">:</span>
                    <span class="field-value">{{ $visitor->valid_upto ? \Carbon\Carbon::parse($visitor->valid_upto)->format('d/m/Y H:i:s') : '—' }}</span>
                </div>
                <div class="field-row">
                    <span class="field-label">Date & Time</span>
                    <span class="field-colon">:</span>
                    <span class="field-value">{{ $visitor->in_time ? \Carbon\Carbon::parse($visitor->in_time)->format('d/m/Y H:i:s') : '—' }}</span>
                </div>
                <div class="field-row">
                    <span class="field-label">No of Visitors</span>
                    <span class="field-colon">:</span>
                    <span class="field-value">{{ $visitor->number_of_person ?? 1 }}</span>
                </div>
            </div>

            {{-- Right: photo + host sign + QR --}}
            <div class="badge-photo">
                @if($photoUrl)
                    <img src="{{ $photoUrl }}" alt="Visitor Photo" />
                @else
                    <div class="no-photo">No Photo</div>
                @endif

                <div class="host-sign">Host Sign</div>

                {{-- QR Code — high res, with quiet zone and high error correction --}}
                @if(!empty($visitor->register_id))
                    <div class="visitor-qr">
                        {!! QrCode::size(300)
                            ->margin(2)
                            ->errorCorrection('H')
                            ->generate((string) $visitor->register_id) !!}
                    </div>
                @endif
            </div>

        </div>

        {{-- Footer --}}
        <div class="badge-footer">Mobile: {{ $visitor->mobile_number }}</div>

    </div>

    <script>
        window.addEventListener('load', function () {
            setTimeout(function () { window.print(); }, 300);
        });
    </script>

</body>
</html>
