changed logic in visitor badge blade file #727

Merged
jothi merged 1 commits from ranjith-dev into master 2026-06-08 06:34:04 +00:00

View File

@@ -41,32 +41,26 @@
.badge-header { .badge-header {
background: #1a1a2e; background: #1a1a2e;
color: #fff; color: #fff;
text-align: center; padding: 1.5mm 2mm;
padding: 2mm 2mm 1.5mm;
font-size: 8pt; font-size: 8pt;
font-weight: bold; font-weight: bold;
letter-spacing: 1px; letter-spacing: 1px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
flex-shrink: 0;
} }
.badge-header .type { .badge-header .type { font-size: 9pt; letter-spacing: 2px; }
font-size: 9pt; .badge-header .badge-id { font-size: 7pt; opacity: 0.85; }
letter-spacing: 2px;
}
.badge-header .badge-id {
font-size: 7pt;
opacity: 0.85;
}
/* ── Body ── */ /* ── Body ── */
.badge-body { .badge-body {
display: flex; display: flex;
flex: 1; flex: 1;
padding: 2mm; padding: 1.5mm 2mm;
gap: 2mm; gap: 2mm;
overflow: hidden;
} }
/* ── Fields (left) ── */ /* ── Fields (left) ── */
@@ -74,82 +68,104 @@
flex: 1; flex: 1;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 1.2mm; overflow: hidden;
} }
.field-row { .field-row {
display: grid; display: grid;
grid-template-columns: 16mm 3mm 1fr; grid-template-columns: 16mm 3mm 1fr;
line-height: 1.3; line-height: 1.25;
margin-bottom: 0.7mm; margin-bottom: 0.6mm;
align-items: start;
} }
.field-label { .field-label {
color: #000; /* was #555 — now pure black */ color: #000;
font-size: 6.5pt; font-size: 6.5pt;
font-weight: 700; /* was normal — now bold */ font-weight: 700;
white-space: nowrap;
} }
.field-colon { .field-colon {
color: #000; /* was #555 — now pure black */ color: #000;
font-size: 6.5pt; font-size: 6.5pt;
font-weight: 700; /* added bold */ font-weight: 700;
text-align: center; text-align: center;
} }
.field-value { .field-value {
font-weight: 700; /* was 600 — now fully bold */ font-weight: 700;
font-size: 6.5pt; font-size: 6.5pt;
color: #000; /* was #111 — now pure black */ color: #000;
/* Prevent wrapping — truncate with ellipsis if too long */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
} }
/* ── Photo (right) ── */ /* ── Photo column (right) ── */
.badge-photo { .badge-photo {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
gap: 1mm;
width: 18mm; width: 18mm;
flex-shrink: 0;
gap: 0.5mm;
} }
.badge-photo img { .badge-photo img {
width: 16mm; width: 16mm;
height: 18mm; height: 16mm;
object-fit: cover; object-fit: cover;
border: 1px solid #ccc; border: 1px solid #000;
} }
.badge-photo .no-photo { .badge-photo .no-photo {
width: 16mm; width: 16mm;
height: 18mm; height: 16mm;
border: 1.5px dashed #000; /* was #aaa — darker border */ border: 1.5px dashed #000;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-size: 6pt; /* slightly larger */ font-size: 6pt;
color: #000; /* was #aaa */ color: #000;
font-weight: 700; font-weight: 700;
text-align: center; text-align: center;
} }
.host-sign { .host-sign {
font-size: 6pt; /* was 5.5pt — slightly larger */ font-size: 6pt;
color: #000; /* was #555 — now pure black */ color: #000;
font-weight: 700; /* added bold */ font-weight: 700;
text-align: center; text-align: center;
border-top: 1px solid #000; /* was 0.5px #aaa — darker line */ border-top: 1px solid #000;
padding-top: 0.5mm; padding-top: 0.5mm;
width: 100%; 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 ── */ /* ── Footer ── */
.badge-footer { .badge-footer {
border-top: 1px solid #000; /* was 0.5px #ddd — darker line */ border-top: 1px solid #000;
padding: 1mm 2mm; padding: 0.8mm 2mm;
text-align: right; text-align: right;
font-size: 6pt; /* was 5.5pt — slightly larger */ font-size: 6pt;
color: #000; /* was #888 — now pure black */ color: #000;
font-weight: 700; /* added bold */ font-weight: 700;
flex-shrink: 0;
} }
@media print { @media print {
@@ -158,9 +174,9 @@
} }
</style> </style>
</head> </head>
<body onload="window.print()"> <body>
{{-- ── Print button (visible on screen only, hidden when printing) ── --}} {{-- ── Print / Close buttons (screen only) ── --}}
<div class="no-print" style="padding: 8px; text-align:center; background:#f3f4f6;"> <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;"> <button onclick="window.print()" style="padding:6px 18px; background:#1a1a2e; color:#fff; border:none; border-radius:6px; cursor:pointer; font-size:13px;">
🖨️ Print Badge 🖨️ Print Badge
@@ -175,7 +191,7 @@
{{-- Header --}} {{-- Header --}}
<div class="badge-header"> <div class="badge-header">
<span class="type">{{ strtoupper($visitor->type ?? 'VISITOR') }}</span> <span class="type">{{ strtoupper($visitor->type ?? 'VISITOR') }}</span>
<span class="badge-id">#{{ str_pad($visitor->register_id, 5, '0', STR_PAD_LEFT) }}</span> <span class="badge-id">#{{ $visitor->register_id ?? str_pad($visitor->id, 5, '0', STR_PAD_LEFT) }}</span>
</div> </div>
{{-- Body --}} {{-- Body --}}
@@ -183,61 +199,62 @@
{{-- Left: fields --}} {{-- Left: fields --}}
<div class="badge-fields"> <div class="badge-fields">
<div class="field-row"> <div class="field-row">
<span class="field-label">Name</span> <span class="field-label">Name</span>
<span class="field-colon">:</span> <span class="field-colon">:</span>
<span class="field-value">{{ strtoupper($visitor->name) }}</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> </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 --}} {{-- Right: photo + host sign + QR --}}
<div class="badge-photo"> <div class="badge-photo">
@if($photoUrl) @if($photoUrl)
<img src="{{ $photoUrl }}" alt="Visitor Photo" /> <img src="{{ $photoUrl }}" alt="Visitor Photo" />
@else @else
<div class="no-photo">No Photo</div> <div class="no-photo">No Photo</div>
@endif @endif
<div class="host-sign">Host Sign</div> <div class="host-sign">Host Sign</div>
<div class="visitor-qr" style="margin-top:2mm;">
{{-- {!! QrCode::size(25) {{-- QR Code high res, with quiet zone and high error correction --}}
->margin(0) @if(!empty($visitor->register_id))
->generate($visitor->register_id) !!} --}} <div class="visitor-qr">
@if(!empty($visitor->register_id)) {!! QrCode::size(300)
{!! QrCode::size(35) ->margin(2)
->margin(0) ->errorCorrection('H')
->generate((string) $visitor->register_id) !!} ->generate((string) $visitor->register_id) !!}
@endif </div>
</div> @endif
</div> </div>
</div> </div>
@@ -247,5 +264,11 @@
</div> </div>
<script>
window.addEventListener('load', function () {
setTimeout(function () { window.print(); }, 300);
});
</script>
</body> </body>
</html> </html>