@php
    $userParticipant = optional($peserta)->user;
    $profileParticipant = optional($userParticipant)->profile;
    $provinceParticipant = optional($profileParticipant->province)->name ?? ($profileParticipant->other_province ?? null);
    $regencyParticipant = optional($profileParticipant->regency)->name ?? ($profileParticipant->other_regency ?? null);
    $districtParticipant = optional($profileParticipant->district)->name ?? ($profileParticipant->other_district ?? null);
    
    $titleStyle = data_get($certificateSetting, 'title', []);
    $photoStyle = data_get($certificateSetting, 'photo', []);
    $qrStyle = data_get($certificateSetting, 'qr', []);
    
    $titleFont = data_get($titleStyle, 'font');
    if (empty($titleFont) || $titleFont === 'undefined') { $titleFont = 'DejaVu Sans'; }
@endphp

@if(data_get($titleStyle, 'visible', true))
@php
    $titleTop = (int) round((float) data_get($titleStyle, 'top', 20) * $scaleY);
    $titleLeft = (int) round((float) data_get($titleStyle, 'marginLeft', data_get($titleStyle, 'left', 0)) * $scaleX);
@endphp
<div class="certificate-element" style="
    position:absolute;
    top:{{ $titleTop }}px;
    left:0;
    width:100%;
    margin-left:{{ $titleLeft }}px;
    font-size:{{ data_get($titleStyle, 'size', 18) }}px;
    color:{{ data_get($titleStyle, 'color', '#bfa100') }};
    font-family:'{{ $titleFont }}';
    font-weight:{{ data_get($titleStyle, 'weight', 'bold') }};
    font-style:{{ data_get($titleStyle, 'italic', 'normal') }};
    text-align:{{ data_get($titleStyle, 'align', 'center') }};
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.2;
    padding: 0 6px;
">{{ str_replace(["\r\n","\n"], ' ', ($activity->name ?? 'Sertifikat PESERTA')) }}</div>
@endif

@if(data_get($certificateSetting, 'name.visible', true))
@php
    $nameFont = data_get($certificateSetting, 'name.font');
    if (empty($nameFont) || $nameFont === 'undefined') { $nameFont = 'DejaVu Sans'; }
    $nameAlignRaw = strtolower((string) data_get($certificateSetting, 'name.align', 'center'));
    $nameAlignCss = in_array($nameAlignRaw, ['kiri','left']) ? 'left' : (in_array($nameAlignRaw, ['kanan','right']) ? 'right' : 'center');
    $nameTop = (int) round((float) data_get($certificateSetting, 'name.top', 190) * $scaleY);
    $nameLeft = (int) round((float) data_get($certificateSetting, 'name.left', 30) * $scaleX);
    $nameWidth = (int) round((float) data_get($certificateSetting, 'name.width', 180) * $scaleX);
@endphp
<div class="certificate-element" style="
    position:absolute;
    top:{{ $nameTop }}px;
    left:{{ $nameLeft }}px;
    width:{{ $nameWidth }}px;
    font-size:{{ data_get($certificateSetting, 'name.size', 16) }}px;
    color:{{ data_get($certificateSetting, 'name.color', '#333333') }};
    font-family:'{{ $nameFont }}';
    font-weight:{{ data_get($certificateSetting, 'name.weight', 'normal') }};
    font-style:{{ data_get($certificateSetting, 'name.italic', 'normal') }};
    text-align:{{ $nameAlignCss }};
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.2;
    padding: 0 2mm;
    box-sizing: border-box;
    ">{{ $userParticipant->name ?? '-' }}</div>
@endif

@if(data_get($certificateSetting, 'email.visible', true))
@php
    $emailFont = data_get($certificateSetting, 'email.font');
    if (empty($emailFont) || $emailFont === 'undefined') { $emailFont = 'DejaVu Sans'; }
    $emailTop = (int) round((float) data_get($certificateSetting, 'email.top', 220) * $scaleY);
    $emailLeft = (int) round((float) data_get($certificateSetting, 'email.left', 30) * $scaleX);
    $emailWidth = (int) round((float) data_get($certificateSetting, 'email.width', 180) * $scaleX);
@endphp
<div class="certificate-element" style="
    position:absolute;
    top:{{ $emailTop }}px;
    left:{{ $emailLeft }}px;
    width:{{ $emailWidth }}px;
    font-size:{{ data_get($certificateSetting, 'email.size', 16) }}px;
    color:{{ data_get($certificateSetting, 'email.color', '#333333') }};
    font-family:'{{ $emailFont }}';
    font-weight:{{ data_get($certificateSetting, 'email.weight', 'normal') }};
    font-style:{{ data_get($certificateSetting, 'email.italic', 'normal') }};
    text-align:{{ data_get($certificateSetting, 'email.align', 'center') }};
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.2;
    padding: 0 2mm;
    box-sizing: border-box;
    ">{{ $userParticipant->email ?? '-' }}</div>
@endif

@if(data_get($certificateSetting, 'no_hp.visible', false))
<div class="certificate-element" style="
    position:absolute;
    top:{{ (int) round((float) data_get($certificateSetting, 'no_hp.top', 240) * $scaleY) }}px;
    left:{{ (int) round((float) data_get($certificateSetting, 'no_hp.left', 30) * $scaleX) }}px;
    width:{{ (int) round((float) data_get($certificateSetting, 'no_hp.width', 180) * $scaleX) }}px;
    font-size:{{ data_get($certificateSetting, 'no_hp.size', 16) }}px;
    color:{{ data_get($certificateSetting, 'no_hp.color', '#333333') }};
    font-family:'{{ data_get($certificateSetting, 'no_hp.font', 'DejaVu Sans') }}';
    font-weight:{{ data_get($certificateSetting, 'no_hp.weight', 'normal') }};
    font-style:{{ data_get($certificateSetting, 'no_hp.italic', 'normal') }};
    text-align:{{ data_get($certificateSetting, 'no_hp.align', 'center') }};
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.2;
    padding: 0 2mm;
    box-sizing: border-box;
    ">{{ $profileParticipant->no_hp ?? '-' }}</div>
@endif

@if(data_get($certificateSetting, 'jenis_kelamin.visible', false))
<div class="certificate-element" style="
    position:absolute;
    top:{{ (int) round((float) data_get($certificateSetting, 'jenis_kelamin.top', 260) * $scaleY) }}px;
    left:{{ (int) round((float) data_get($certificateSetting, 'jenis_kelamin.left', 30) * $scaleX) }}px;
    width:{{ (int) round((float) data_get($certificateSetting, 'jenis_kelamin.width', 180) * $scaleX) }}px;
    font-size:{{ data_get($certificateSetting, 'jenis_kelamin.size', 16) }}px;
    color:{{ data_get($certificateSetting, 'jenis_kelamin.color', '#333333') }};
    font-family:'{{ data_get($certificateSetting, 'jenis_kelamin.font', 'DejaVu Sans') }}';
    font-weight:{{ data_get($certificateSetting, 'jenis_kelamin.weight', 'normal') }};
    font-style:{{ data_get($certificateSetting, 'jenis_kelamin.italic', 'normal') }};
    text-align:{{ data_get($certificateSetting, 'jenis_kelamin.align', 'center') }};
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.2;
    padding: 0 2mm;
    box-sizing: border-box;
    ">{{ $profileParticipant->jenis_kelamin ?? '-' }}</div>
@endif

@if(data_get($photoStyle, 'visible', true))
@php
    $photoSizeSetting = (float) data_get($photoStyle, 'size', 90) * $scaleX;
    $photoShape = data_get($photoStyle, 'shape', 'square');
    $photoFilename = optional($profileParticipant)->foto;
    $photoPath = $photoFilename ? public_path('assets/images/profilefoto/' . $photoFilename) : public_path('assets/images/profilefoto/default-profile.png');
    $photoBase64 = image_to_base64_data_uri($photoPath);
    $imgAspectRatio = 1.0;
    if (file_exists($photoPath)) {
        $imgInfo = @getimagesize($photoPath);
        if ($imgInfo && $imgInfo[1] > 0) {
            $imgAspectRatio = $imgInfo[0] / $imgInfo[1];
        }
    }
    $overlayColor = data_get($photoStyle, 'overlay_color', '#000000');
    $overlayOpacity = (int) data_get($photoStyle, 'overlay_opacity', 0);
    $overlayAlpha = max(0, min(100, $overlayOpacity)) / 100.0;
@endphp
<div class="certificate-element" style="top:{{ (int) round((float) data_get($photoStyle, 'top', 70) * $scaleY) }}px; left:{{ (int) round((float) data_get($photoStyle, 'left', 85) * $scaleX) }}px; width: {{ (int) round($photoSizeSetting) }}px; height: {{ (int) round($photoShape == 'circle' ? $photoSizeSetting : $photoSizeSetting / $imgAspectRatio) }}px;">
    @if($photoBase64)
    <img src="{{ $photoBase64 }}" alt="Foto" style="width:100%; height:100%; object-fit: cover; border-radius: {{ $photoShape === 'circle' ? '50%' : '12px' }};">
    <div style="position:absolute; inset:0; background: {{ $overlayColor }}; opacity: {{ $overlayAlpha }}; border-radius: {{ $photoShape === 'circle' ? '50%' : '12px' }};"></div>
    @endif
</div>
@endif

@if(data_get($qrStyle, 'visible', true))
@php
    $qrTop = (int) round((float) data_get($qrStyle, 'top', 320) * $scaleY);
    $qrLeft = (int) round((float) data_get($qrStyle, 'left', 90) * $scaleX);
    $qrSizeInput = (float) data_get($qrStyle, 'size', 80);
    $qrSize = max(0, (int) round($qrSizeInput * $scaleX));
    $qrVal = route('activity.download-certificate', ['id' => $activity->id]) . '?certificate_id=' . urlencode((string) ($peserta->certificate_id ?? ''));
@endphp
<div class="certificate-element" style="top: {{ $qrTop }}px; left: {{ $qrLeft }}px;">
    @php
        try {
            $qrBinary = \SimpleSoftwareIO\QrCode\Facades\QrCode::format('png')->size(max((int)$qrSize,40))->generate((string) $qrVal);
            $qrSrc = 'data:image/png;base64,'.base64_encode($qrBinary);
        } catch (\Throwable $e) {
            $qrSrc = 'https://api.qrserver.com/v1/create-qr-code/?size='.max((int)$qrSize,40).'x'.max((int)$qrSize,40).'&data='.urlencode((string) $qrVal);
        }
    @endphp
    <img src="{{ $qrSrc }}" alt="QR Code" style="width: {{ $qrSize }}px !important; height: {{ $qrSize }}px !important; min-width: {{ $qrSize }}px !important; min-height: {{ $qrSize }}px !important; max-width: {{ $qrSize }}px !important; max-height: {{ $qrSize }}px !important; aspect-ratio: 1 / 1 !important; object-fit: contain !important;">
</div>
@endif