<?php
$tenant = service('tenantContext')->hasTenant() ? service('tenantContext')->getTenant() : null;
$primaryColor   = safe_hex_color($tenant->primary_color ?? null, '#4f46e5');
$secondaryColor = safe_hex_color($tenant->secondary_color ?? null, '#f59e0b');
$hotelName      = $tenant->hotel_name ?? 'MaxYields PMS';
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <?php include APPPATH . 'Views/public/_shell_head.php'; ?>
    <style>
        /* Kiosk-specific: this runs full-screen on a shared tablet at the
           venue entrance, not a personal phone/desktop — much bigger touch
           targets than the rest of the public pages need. */
        body { display: flex; align-items: center; justify-content: center; background: linear-gradient(160deg, color-mix(in srgb, var(--brand) 90%, black), var(--brand)); }
        .kiosk-card { background: #fff; border-radius: 24px; padding: 3rem 2.5rem; max-width: 560px; width: 100%; box-shadow: 0 20px 60px rgba(0,0,0,0.35); text-align: center; }
        .kiosk-code-input { font-size: 2.4rem; letter-spacing: 0.3em; text-align: center; padding: 1rem; font-weight: 700; }
        .kiosk-btn { font-size: 1.3rem; padding: 1rem; }
    </style>
</head>
<body>
<div class="kiosk-card">
    <i class="bi bi-qr-code-scan" style="font-size: 3rem; color: var(--brand);"></i>
    <h1 class="h4 mt-3 mb-1"><?= esc($event->event_name) ?></h1>
    <p class="text-muted mb-4">Enter your check-in code to confirm you're here</p>

    <?php if (! empty($error)): ?>
        <div class="alert alert-danger"><?= esc($error) ?></div>
    <?php endif; ?>

    <form action="<?= site_url('event-checkin/' . $token) ?>" method="post" id="checkinForm">
        <?= csrf_field() ?>
        <input type="text" name="code" class="form-control kiosk-code-input mb-3" inputmode="numeric" pattern="[0-9]*" maxlength="6" placeholder="000000" autofocus required autocomplete="off">
        <button type="submit" class="btn btn-brand w-100 kiosk-btn"><i class="bi bi-check2-circle me-2"></i>Check In</button>
    </form>
</div>
<script>
// Kiosk convenience: numeric keypad on mobile/tablet, auto-submit once 6
// digits are typed so staff/attendees never have to hunt for a button.
const codeInput = document.querySelector('input[name="code"]');
codeInput.addEventListener('input', function () {
    this.value = this.value.replace(/\D/g, '').slice(0, 6);
    if (this.value.length === 6) {
        document.getElementById('checkinForm').submit();
    }
});
</script>
</body>
</html>
