@extends('layouts.public')

@section('title', 'Sijil Digital — ' . $program->title)

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

@section('content')

@if(! $certificate->isGenerated())
{{-- Not ready yet --}}
<div class="checkin-card card p-4 text-center">
    <div class="rounded-circle bg-warning bg-opacity-10 d-inline-flex align-items-center justify-content-center mx-auto mb-3"
         style="width:70px; height:70px;">
        <i class="bi bi-hourglass-split text-warning" style="font-size:2rem;"></i>
    </div>
    <h5 class="fw-bold mb-2">Sijil Belum Sedia</h5>
    <p class="text-muted small mb-3">
        Sijil anda sedang disediakan. Sila semak semula sebentar atau tunggu emel dari penganjur program.
    </p>
    @if($certificate->status === 'failed')
    <div class="alert alert-danger text-start small">
        <i class="bi bi-exclamation-circle me-1"></i>
        Penjanaan sijil gagal. Sila hubungi penganjur program untuk bantuan.
    </div>
    @endif
</div>

@else

{{-- Questionnaire gate --}}
@if($needsQuestionnaire && ! $hasAnswered)
<div class="checkin-card card p-4 text-center">
    <div class="rounded-circle bg-primary bg-opacity-10 d-inline-flex align-items-center justify-content-center mx-auto mb-3"
         style="width:70px; height:70px;">
        <i class="bi bi-clipboard2-check-fill text-primary" style="font-size:2rem;"></i>
    </div>
    <h5 class="fw-bold mb-2">Jawab Borang Penilaian Dahulu</h5>
    <p class="text-muted small mb-4">
        Sebelum memuat turun sijil, anda perlu melengkapkan borang penilaian program.
    </p>
    @if($qrCode)
    <a href="{{ route('public.questionnaire.show', [$qrCode->token, $participant->uuid]) }}"
       class="btn btn-primary btn-checkin w-100">
        <i class="bi bi-clipboard2 me-2"></i>Isi Borang Penilaian
    </a>
    @else
    <div class="alert alert-warning small">
        Sila dapatkan pautan borang penilaian dari penganjur program.
    </div>
    @endif
</div>

@else
{{-- Certificate ready to download --}}
<div class="checkin-card card p-4 text-center">
    <div class="rounded-circle bg-success bg-opacity-10 d-inline-flex align-items-center justify-content-center mx-auto mb-3"
         style="width:70px; height:70px;">
        <i class="bi bi-award-fill text-success" style="font-size:2rem;"></i>
    </div>
    <h5 class="fw-bold text-success mb-1">Sijil Sedia Dimuat Turun</h5>
    <p class="text-muted small mb-3">
        Tahniah, <strong>{{ $participant->name }}</strong>! Sijil digital anda untuk program ini telah sedia.
    </p>

    <div class="bg-light rounded p-3 text-start mb-4">
        <div class="row g-2">
            <div class="col-5 text-muted small">Program</div>
            <div class="col-7 small fw-medium">{{ $program->title }}</div>
            @if($certificate->certificate_no)
            <div class="col-5 text-muted small">No. Sijil</div>
            <div class="col-7 small">{{ $certificate->certificate_no }}</div>
            @endif
            <div class="col-5 text-muted small">Tarikh Jana</div>
            <div class="col-7 small">{{ $certificate->generated_at?->format('d M Y') ?? '—' }}</div>
            @if($certificate->download_count > 0)
            <div class="col-5 text-muted small">Dimuat Turun</div>
            <div class="col-7 small">{{ $certificate->download_count }} kali</div>
            @endif
        </div>
    </div>

    <form method="POST" action="{{ route('public.certificate.download', $certificate->token) }}">
        @csrf
        <button type="submit" class="btn btn-success btn-checkin w-100 mb-2">
            <i class="bi bi-download me-2"></i>Muat Turun Sijil (JPG)
        </button>
    </form>
    <div class="text-muted" style="font-size:0.75rem;">
        <i class="bi bi-info-circle me-1"></i>Sijil dalam format JPEG. Boleh dimuat turun berulang kali.
    </div>
</div>
@endif

@endif

@endsection