@extends('layouts.public')

@section('title', 'Semak Kehadiran — ' . $program->title)

@section('hero')
<h4 class="mb-1">{{ $program->title }}</h4>
<div class="opacity-75 small">
    <i class="bi bi-calendar3 me-1"></i>{{ $program->start_date->format('d M Y') }}
    &nbsp;&middot;&nbsp;
    <i class="bi bi-geo-alt me-1"></i>{{ $program->location }}
</div>
@endsection

@section('content')

@if($program->isDownloadOpen())
<div class="alert alert-success mb-4 small">
    <i class="bi bi-award-fill me-2"></i>
    <strong>Sijil boleh dimuat turun!</strong>
    Masukkan No. Kad Pengenalan untuk semak status sijil anda.
</div>
@endif

<div class="checkin-card card p-4">
    <h6 class="fw-semibold mb-3">
        <i class="bi bi-search me-2 text-primary"></i>Semak Kehadiran & Sijil
    </h6>
    <form method="POST" action="{{ route('public.semak.check', $qrCode->token) }}">
        @csrf
        <div class="mb-3">
            <label class="form-label fw-medium">No. Kad Pengenalan <span class="text-danger">*</span></label>
            <input type="text" name="no_kp"
                   class="form-control form-control-lg @error('no_kp') is-invalid @enderror"
                   placeholder="900101011234"
                   inputmode="numeric" maxlength="12" autocomplete="off">
            <div class="form-text">12 digit tanpa sempang</div>
            @error('no_kp')<div class="invalid-feedback">{{ $message }}</div>@enderror
        </div>
        <button type="submit" class="btn btn-primary w-100 btn-checkin">
            <i class="bi bi-search me-2"></i>Semak Sekarang
        </button>
    </form>
</div>

@endsection