@extends('layouts.admin')
@section('title', 'Detail Peserta')
@section('page-title', 'Detail Peserta')
@section('breadcrumb')
<a href="{{ route('admin.trainings.index') }}">Pelatihan</a>
<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
<a href="{{ route('admin.trainings.participants.index', $training) }}">{{ Str::limit($training->title, 20) }}</a>
<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
<span class="current">Detail</span>
@endsection

@section('content')
<div class="max-w-3xl space-y-6">

    {{-- Info Peserta --}}
    <div class="admin-card">
        <div class="admin-card-body">
            <div class="admin-section-title">
                <svg class="admin-section-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/></svg>
                Informasi Peserta
            </div>
            <div class="grid grid-cols-2 gap-x-8 gap-y-4 mt-4">
                <div>
                    <p class="text-xs text-gray-400 font-medium uppercase tracking-wider">Nama Lengkap</p>
                    <p class="text-gray-800 font-semibold mt-1">{{ $participant->participant_name }}</p>
                </div>
                <div>
                    <p class="text-xs text-gray-400 font-medium uppercase tracking-wider">Status</p>
                    <span class="admin-badge admin-badge-{{ $participant->status_color }} mt-1">
                        <span class="admin-badge-dot {{ $participant->status === 'completed' ? 'bg-emerald-500' : ($participant->status === 'in_progress' ? 'bg-amber-500' : 'bg-gray-400') }}"></span>
                        {{ $participant->status_label }}
                    </span>
                </div>
                <div>
                    <p class="text-xs text-gray-400 font-medium uppercase tracking-wider">Email</p>
                    <p class="text-gray-700 mt-1">{{ $participant->participant_email ?? '-' }}</p>
                </div>
                <div>
                    <p class="text-xs text-gray-400 font-medium uppercase tracking-wider">Telepon / WA</p>
                    <p class="text-gray-700 mt-1">{{ $participant->participant_phone ?? '-' }}</p>
                </div>
                <div>
                    <p class="text-xs text-gray-400 font-medium uppercase tracking-wider">Instansi</p>
                    <p class="text-gray-700 mt-1">{{ $participant->participant_institution ?? '-' }}</p>
                </div>
                <div>
                    <p class="text-xs text-gray-400 font-medium uppercase tracking-wider">Pelatihan</p>
                    <p class="text-gray-700 mt-1">{{ $training->title }}</p>
                </div>
                <div>
                    <p class="text-xs text-gray-400 font-medium uppercase tracking-wider">Tanggal Daftar</p>
                    <p class="text-gray-700 mt-1">{{ $participant->created_at->format('d F Y, H:i') }}</p>
                </div>
                @if($participant->completed_at)
                <div>
                    <p class="text-xs text-gray-400 font-medium uppercase tracking-wider">Tanggal Selesai</p>
                    <p class="text-gray-700 mt-1">{{ $participant->completed_at->format('d F Y, H:i') }}</p>
                </div>
                @endif
                <div>
                    <p class="text-xs text-gray-400 font-medium uppercase tracking-wider">Kode Sertifikat</p>
                    <p class="text-gray-700 mt-1 font-mono text-sm">{{ $participant->certificate_code }}</p>
                </div>
            </div>
            @if($participant->notes)
            <div class="mt-4 pt-4 border-t border-gray-100">
                <p class="text-xs text-gray-400 font-medium uppercase tracking-wider">Catatan</p>
                <p class="text-gray-700 mt-1">{{ $participant->notes }}</p>
            </div>
            @endif
        </div>
    </div>

    {{-- Verifikasi Info (jika completed) --}}
    @if($participant->status === 'completed')
    <div class="admin-card">
        <div class="admin-card-body">
            <div class="admin-section-title">
                <svg class="admin-section-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"/></svg>
                Konfirmasi Sertifikat
            </div>
            <div class="grid grid-cols-2 gap-8 mt-4">
                <div class="text-center p-4 bg-gray-50 rounded-xl">
                    <p class="text-xs text-gray-400 font-medium uppercase tracking-wider mb-2">Mengetahui</p>
                    <p class="text-gray-800 font-bold">{{ $participant->known_by ?? '-' }}</p>
                    <p class="text-gray-500 text-sm">{{ $participant->known_by_title ?? '-' }}</p>
                </div>
                <div class="text-center p-4 bg-gray-50 rounded-xl">
                    <p class="text-xs text-gray-400 font-medium uppercase tracking-wider mb-2">Menandatangani</p>
                    <p class="text-gray-800 font-bold">{{ $participant->signed_by ?? '-' }}</p>
                    <p class="text-gray-500 text-sm">{{ $participant->signed_by_title ?? '-' }}</p>
                </div>
            </div>
        </div>
    </div>

    {{-- QR Code --}}
    <div class="admin-card">
        <div class="admin-card-body">
            <div class="admin-section-title">
                <svg class="admin-section-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 4v1m6 11h2m-6 0h-2v4m0-11v3m0 0h.01M12 12h4.01M16 20h4M4 12h4m12 0h.01M5 8h2a1 1 0 001-1V5a1 1 0 00-1-1H5a1 1 0 00-1 1v2a1 1 0 001 1zm12 0h2a1 1 0 001-1V5a1 1 0 00-1-1h-2a1 1 0 00-1 1v2a1 1 0 001 1zM5 20h2a1 1 0 001-1v-2a1 1 0 00-1-1H5a1 1 0 00-1 1v2a1 1 0 001 1z"/></svg>
                QR Code Sertifikat
            </div>
            <div class="flex flex-col items-center mt-4">
                <div class="bg-white border-2 border-gray-100 rounded-2xl p-6 shadow-sm">
                    {!! QrCode::size(200)->generate($participant->verification_url) !!}
                </div>
                <p class="text-gray-400 text-xs mt-3 text-center">Scan QR code ini untuk membuka halaman verifikasi sertifikat</p>

                <div class="flex gap-3 mt-5">
                    <a href="{{ route('admin.trainings.participants.download-qr', [$training, $participant]) }}"
                       class="admin-btn admin-btn-primary">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/></svg>
                        Download QR (PNG)
                    </a>
                    <button type="button"
                            onclick="navigator.clipboard.writeText('{{ $participant->verification_url }}').then(() => alert('Link verifikasi berhasil disalin!'))"
                            class="admin-btn admin-btn-secondary">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3"/></svg>
                        Salin Link
                    </button>
                </div>
                <div class="mt-3 bg-gray-50 rounded-lg px-4 py-2">
                    <p class="text-xs text-gray-500 font-mono break-all">{{ $participant->verification_url }}</p>
                </div>
            </div>
        </div>
    </div>
    @endif

    {{-- Action Buttons --}}
    <div class="flex gap-3">
        <a href="{{ route('admin.trainings.participants.edit', [$training, $participant]) }}" class="admin-btn admin-btn-primary">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/></svg>
            Edit Peserta
        </a>
        <a href="{{ route('admin.trainings.participants.index', $training) }}" class="admin-btn admin-btn-secondary">Kembali</a>
    </div>

</div>

@push('head')
<style>
    /* QR Code SVG styling */
    .admin-card svg[viewBox="0 0 {{ 200 }} {{ 200 }}"] {
        width: 200px;
        height: 200px;
    }
</style>
@endpush
@endsection