@extends('layouts.public')

@section('title', 'Check-In Berjaya')

@section('hero')
<h4 class="mb-1">{{ $program->title }}</h4>
<div class="opacity-75 small">
    <i class="bi bi-geo-alt me-1"></i>{{ $program->location }}
</div>
@endsection

@section('content')

<div class="checkin-card card p-4 text-center">
    <div class="mb-3">
        <div class="rounded-circle bg-success bg-opacity-10 d-inline-flex align-items-center justify-content-center mb-3"
             style="width:80px; height:80px;">
            <i class="bi bi-check-circle-fill text-success" style="font-size:2.5rem;"></i>
        </div>
        <h5 class="fw-bold text-success mb-1">Check-In Berjaya!</h5>
        <p class="text-muted mb-0">Kehadiran anda telah direkodkan.</p>
    </div>

    <div class="bg-light rounded p-3 text-start mb-4">
        <div class="row g-2">
            <div class="col-5 text-muted small">Nama</div>
            <div class="col-7 fw-medium small">{{ $participant->name }}</div>
            <div class="col-5 text-muted small">Agensi</div>
            <div class="col-7 small">{{ $participant->agency ?: '—' }}</div>
            <div class="col-5 text-muted small">Sesi</div>
            <div class="col-7 small">
                <span class="badge bg-primary">{{ Str::ucfirst($attendance->attendance_session) }}</span>
            </div>
            <div class="col-5 text-muted small">Masa Check-In</div>
            <div class="col-7 small">{{ $attendance->checked_in_at->format('d M Y, H:i') }}</div>
        </div>
    </div>

    <div class="alert alert-info text-start small mb-0" role="alert">
        <i class="bi bi-envelope-fill me-2"></i>
        <strong>Sijil Digital (eCert)</strong> akan dihantar ke emel anda selepas program tamat.
        @if($participant->email)
        Emel: <strong>{{ $participant->email }}</strong>
        @else
        Sila pastikan emel anda didaftarkan untuk menerima sijil.
        @endif
    </div>
</div>

@endsection