@extends('layouts.admin')

@section('title', 'QR Code — ' . $program->title)
@section('header', 'QR Code Program')

@section('breadcrumb')
<li class="breadcrumb-item"><a href="{{ route('admin.programs.index') }}">Program</a></li>
<li class="breadcrumb-item"><a href="{{ route('admin.programs.show', $program) }}">{{ Str::limit($program->title, 30) }}</a></li>
<li class="breadcrumb-item active">QR Code</li>
@endsection

@section('content')

<div class="row g-4 justify-content-center">
    <div class="col-lg-6">
        <div class="card border-0 shadow-sm">
            <div class="card-header bg-white border-bottom py-3">
                <span class="fw-semibold"><i class="bi bi-qr-code me-2 text-primary"></i>QR Code Check-In</span>
            </div>
            <div class="card-body text-center py-4">

                @if($qrCode)
                {{-- QR Code Image --}}
                <div class="mb-4">
                    <img src="{{ Storage::disk('public')->url($qrCode->qr_image_path) }}"
                         alt="QR Code {{ $program->title }}"
                         class="img-fluid border rounded p-2"
                         style="max-width: 280px;">
                </div>

                {{-- Program Info --}}
                <h6 class="fw-semibold mb-1">{{ $program->title }}</h6>
                <p class="text-muted small mb-3">
                    {{ $program->start_date->format('d M Y') }}
                    @if($program->start_date->ne($program->end_date))
                    — {{ $program->end_date->format('d M Y') }}
                    @endif
                    &middot; {{ $program->location }}
                </p>

                {{-- Check-in URL --}}
                <div class="bg-light rounded p-3 mb-4 text-start">
                    <div class="text-muted small mb-1">URL Check-In:</div>
                    <code class="small text-break" id="checkinUrl">{{ route('public.checkin.show', $qrCode->token) }}</code>
                    <button class="btn btn-sm btn-outline-secondary ms-2"
                            onclick="copyUrl()" title="Salin URL">
                        <i class="bi bi-clipboard" id="copyIcon"></i>
                    </button>
                </div>

                {{-- Action Buttons --}}
                <div class="d-flex flex-column flex-sm-row gap-2 justify-content-center">
                    <a href="{{ route('admin.programs.qr.download', $program) }}"
                       class="btn btn-primary">
                        <i class="bi bi-download me-2"></i>Muat Turun PNG
                    </a>

                    <form method="POST" action="{{ route('admin.programs.qr.generate', $program) }}">
                        @csrf
                        <button type="submit" class="btn btn-outline-warning w-100"
                                onclick="return confirm('Jana semula QR Code? QR Code lama akan dinyahaktifkan.')">
                            <i class="bi bi-arrow-repeat me-2"></i>Jana Semula
                        </button>
                    </form>

                    <form method="POST" action="{{ route('admin.programs.qr.deactivate', $program) }}">
                        @csrf
                        <button type="submit" class="btn btn-outline-danger w-100"
                                onclick="return confirm('Nyahaktifkan QR Code ini?')">
                            <i class="bi bi-x-circle me-2"></i>Nyahaktifkan
                        </button>
                    </form>
                </div>

                {{-- Status --}}
                <div class="mt-3">
                    <span class="badge bg-success"><i class="bi bi-circle-fill me-1" style="font-size:.5rem;"></i>Aktif</span>
                    <small class="text-muted ms-2">Dijana {{ $qrCode->created_at->diffForHumans() }}</small>
                </div>

                @else
                {{-- No QR Code yet --}}
                <div class="py-4">
                    <i class="bi bi-qr-code fs-1 text-muted opacity-25 d-block mb-3"></i>
                    <h6 class="text-muted mb-3">QR Code belum dijana</h6>
                    <p class="text-muted small mb-4">
                        Jana QR Code untuk membolehkan peserta scan dan check-in ke program ini.
                    </p>
                    <form method="POST" action="{{ route('admin.programs.qr.generate', $program) }}">
                        @csrf
                        <button type="submit" class="btn btn-primary btn-lg">
                            <i class="bi bi-qr-code me-2"></i>Jana QR Code
                        </button>
                    </form>
                </div>
                @endif

            </div>
        </div>
    </div>

    {{-- How to Use --}}
    <div class="col-lg-4">
        <div class="card border-0 shadow-sm">
            <div class="card-header bg-white border-bottom py-3">
                <span class="fw-semibold"><i class="bi bi-info-circle me-2 text-primary"></i>Cara Penggunaan</span>
            </div>
            <div class="card-body">
                <ol class="ps-3 small text-muted" style="line-height: 2;">
                    <li>Jana QR Code untuk program ini.</li>
                    <li>Print atau papar QR Code di tempat program.</li>
                    <li>Peserta scan menggunakan kamera telefon.</li>
                    <li>Peserta isi maklumat check-in.</li>
                    <li>Sistem rekod kehadiran secara automatik.</li>
                </ol>
                <hr>
                <div class="small text-muted">
                    <i class="bi bi-shield-check text-success me-1"></i>
                    QR Code mengandungi token unik — bukan ID program.
                </div>
                <div class="small text-muted mt-2">
                    <i class="bi bi-exclamation-triangle text-warning me-1"></i>
                    Jana semula akan membatalkan QR Code lama.
                </div>
            </div>
        </div>

        <div class="card border-0 shadow-sm mt-3">
            <div class="card-header bg-white border-bottom py-3">
                <span class="fw-semibold"><i class="bi bi-calendar-check me-2 text-primary"></i>Status Program</span>
            </div>
            <div class="card-body small">
                <div class="d-flex justify-content-between mb-2">
                    <span class="text-muted">Status</span>
                    @include('admin.partials.program-status-badge', ['status' => $program->status])
                </div>
                @if($program->checkin_start_at)
                <div class="d-flex justify-content-between mb-2">
                    <span class="text-muted">Check-In Dibuka</span>
                    <span>{{ $program->checkin_start_at->format('d/m H:i') }}</span>
                </div>
                <div class="d-flex justify-content-between mb-2">
                    <span class="text-muted">Check-In Ditutup</span>
                    <span>{{ $program->checkin_end_at?->format('d/m H:i') ?? '—' }}</span>
                </div>
                @endif
                @if($program->ecert_download_start_at)
                <div class="d-flex justify-content-between">
                    <span class="text-muted">Download Sijil</span>
                    <span>{{ $program->ecert_download_start_at->format('d/m H:i') }}</span>
                </div>
                @endif
            </div>
        </div>
    </div>
</div>

@endsection

@push('scripts')
<script>
function copyUrl() {
    const url = document.getElementById('checkinUrl').textContent.trim();
    navigator.clipboard.writeText(url).then(() => {
        const icon = document.getElementById('copyIcon');
        icon.className = 'bi bi-clipboard-check';
        setTimeout(() => icon.className = 'bi bi-clipboard', 2000);
    });
}
</script>
@endpush