@extends('layouts.web')

@section('content')
@php
  $only = isset($only_certificate) && $only_certificate ? true : false;
    $activityDateLabel = $activity->date
        ? \Carbon\Carbon::parse($activity->date)->translatedFormat('d F Y')
        : 'Tanggal belum ditentukan';
    $rawTime = $activity->start_time ?? $activity->time ?? null;
    $activityTimeLabel = $rawTime
        ? (\Carbon\Carbon::hasFormat($rawTime, 'H:i:s') || \Carbon\Carbon::hasFormat($rawTime, 'H:i')
            ? \Carbon\Carbon::parse($rawTime)->format('H:i')
            : $rawTime)
        : 'Waktu belum ditentukan';
    $activityLocation = $activity->location ?? 'Lokasi belum ditentukan';
    $activityPriceLabel = ($activity->price ?? 0) > 0
        ? 'Rp ' . number_format($activity->price, 0, ',', '.')
        : 'Gratis';
@endphp

@unless($only)
<section class="hero-news-section relative overflow-hidden">
  <div class="hero-gradient-bg"></div>
  <div class="hero-dots-pattern"></div>
  <div class="hero-circles">
    <div class="hero-circle hero-circle-1"></div>
    <div class="hero-circle hero-circle-2"></div>
    <div class="hero-circle hero-circle-3"></div>
  </div>
  <div class="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 md:py-28">
    <div class="text-center mb-8">
      <h1 class="hero-news-title text-4xl md:text-5xl lg:text-6xl font-bold text-white mb-6">
        {{ $activity->name ?? 'Judul Aktivitas' }}
      </h1>
      <p class="hero-news-subtitle text-lg md:text-xl text-white max-w-3xl mx-auto opacity-90 mb-8">
        {{ \Illuminate\Support\Str::limit(strip_tags($activity->excerpt ?? $activity->description ?? 'Belum ada deskripsi kegiatan.'), 240) }}
      </p>
    </div>
    <div class="flex flex-wrap justify-center gap-4 mt-8">
      <div class="flex items-center gap-3 bg-white/10 backdrop-blur-sm border border-white/20 rounded-2xl px-5 py-3 shadow-lg">
        <span class="inline-flex items-center justify-center w-12 h-12 rounded-xl bg-white/15 border border-white/20">
          <i class="fas fa-calendar-day text-white text-lg"></i>
        </span>
        <div class="text-left">
          <p class="text-xs uppercase tracking-[0.4em] text-white/70 mb-1">Tanggal</p>
          <p class="font-semibold text-white text-sm md:text-base">{{ $activityDateLabel }}</p>
        </div>
      </div>
      <div class="flex items-center gap-3 bg-white/10 backdrop-blur-sm border border-white/20 rounded-2xl px-5 py-3 shadow-lg">
        <span class="inline-flex items-center justify-center w-12 h-12 rounded-xl bg-white/15 border border-white/20">
          <i class="fas fa-clock text-white text-lg"></i>
        </span>
        <div class="text-left">
          <p class="text-xs uppercase tracking-[0.4em] text-white/70 mb-1">Waktu</p>
          <p class="font-semibold text-white text-sm md:text-base">{{ $activityTimeLabel }}</p>
        </div>
      </div>
      <div class="flex items-center gap-3 bg-white/10 backdrop-blur-sm border border-white/20 rounded-2xl px-5 py-3 shadow-lg">
        <span class="inline-flex items-center justify-center w-12 h-12 rounded-xl bg-white/15 border border-white/20">
          <i class="fas fa-map-marker-alt text-white text-lg"></i>
        </span>
        <div class="text-left">
          <p class="text-xs uppercase tracking-[0.4em] text-white/70 mb-1">Lokasi</p>
          <p class="font-semibold text-white text-sm md:text-base">{{ $activityLocation }}</p>
        </div>
      </div>
      
    </div>
  </div>
  <div class="hero-rounded-bottom"></div>
</section>
@endunless
@php
  $widthCm = (float) data_get($certificateSetting, 'card.width_cm', 21);
  $heightCm = (float) data_get($certificateSetting, 'card.height_cm', 29.7);
  $bgFilename = data_get($certificateSetting, 'card.background');
  if (!function_exists('image_to_base64_data_uri')) {
    function image_to_base64_data_uri($path) {
      if (!file_exists($path) || !is_readable($path)) { return null; }
      $type = mime_content_type($path);
      if ($type === false) { $type = 'image/' . pathinfo($path, PATHINFO_EXTENSION); }
      $data = file_get_contents($path);
      return 'data:' . $type . ';base64,' . base64_encode($data);
    }
  }
  $bgPath = $bgFilename ? public_path('assets/images/certificate/' . $bgFilename) : public_path('assets/images/certificate/default-certificate.png');
  $bgBase64 = image_to_base64_data_uri($bgPath);
  $titleStyle = data_get($certificateSetting, 'title', []);
  $photoStyle = data_get($certificateSetting, 'photo', []);
  $qrStyle = data_get($certificateSetting, 'qr', []);
  $u = $user;
  $p = $profile;
  $provinceName = optional($p->province)->name ?? ($p->other_province ?? null);
@endphp

<div class="max-w-5xl mx-auto px-4 py-8">
  <div id="certificate-canvas-target" style="width: {{ $widthCm }}cm; height: {{ $heightCm }}cm; position: relative; margin: 0 auto; overflow: hidden; background: transparent;">
    @if($bgBase64)
      <img src="{{ $bgBase64 }}" alt="Certificate Background" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: fill; object-position: center; z-index: 1;">
    @endif
    <div style="position:relative; width:100%; height:100%; z-index:2;">
      @if(data_get($titleStyle, 'visible', true))
        <div style="
          position:absolute;
          top:{{ (int) data_get($titleStyle, 'top', 20) }}px;
          left:0;
          width:100%;
          margin-left:{{ (int) data_get($titleStyle, 'marginLeft', (int) data_get($titleStyle, 'left', 0)) }}px;
          font-size:{{ (int) data_get($titleStyle, 'size', 18) }}px;
          color:{{ data_get($titleStyle, 'color', '#bfa100') }};
          font-family:'{{ data_get($titleStyle, 'font', 'DejaVu Sans') }}';
          font-weight:{{ data_get($titleStyle, 'weight', 'bold') }};
          font-style:{{ data_get($titleStyle, 'italic', 'normal') }};
          text-align:{{ data_get($titleStyle, 'align', 'center') }};
          line-height:1.2;
          padding:0 6px;">
          {{ str_replace(["\r\n","\n"], ' ', ($activity->name ?? 'Sertifikat PESERTA')) }}
        </div>
      @endif

      @if(data_get($certificateSetting, 'name.visible', false))
        <div data-element="name" style="
          position:absolute;
          top:{{ (int) data_get($certificateSetting, 'name.top', 190) }}px;
          left:{{ (int) data_get($certificateSetting, 'name.left', 30) }}px;
          width:{{ (int) data_get($certificateSetting, 'name.width', 180) }}px;
          font-size:{{ (int) data_get($certificateSetting, 'name.size', 16) }}px;
          color:{{ data_get($certificateSetting, 'name.color', '#333333') }};
          font-family:'{{ data_get($certificateSetting, 'name.font', 'DejaVu Sans') }}';
          font-weight:{{ data_get($certificateSetting, 'name.weight', 'normal') }};
          font-style:{{ data_get($certificateSetting, 'name.italic', 'normal') }};
          text-align:{{ data_get($certificateSetting, 'name.align', 'center') }};
          line-height: {{ (int) data_get($certificateSetting, 'name.size', 16) }}px;">
          {{ optional($u)->name ?? '-' }}
        </div>
      @endif

      @if(data_get($certificateSetting, 'email.visible', false))
        <div style="
          position:absolute;
          top:{{ (int) data_get($certificateSetting, 'email.top', 220) }}px;
          left:{{ (int) data_get($certificateSetting, 'email.left', 30) }}px;
          width:{{ (int) data_get($certificateSetting, 'email.width', 180) }}px;
          font-size:{{ (int) data_get($certificateSetting, 'email.size', 16) }}px;
          color:{{ data_get($certificateSetting, 'email.color', '#333333') }};
          font-family:'{{ data_get($certificateSetting, 'email.font', 'DejaVu Sans') }}';
          font-weight:{{ data_get($certificateSetting, 'email.weight', 'normal') }};
          font-style:{{ data_get($certificateSetting, 'email.italic', 'normal') }};
          text-align:{{ data_get($certificateSetting, 'email.align', 'center') }};">
          {{ optional($u)->email ?? '-' }}
        </div>
      @endif

      @if(data_get($certificateSetting, 'no_hp.visible', false) && $p && $p->no_hp)
        <div style="
          position:absolute;
          top:{{ (int) data_get($certificateSetting, 'no_hp.top', 240) }}px;
          left:{{ (int) data_get($certificateSetting, 'no_hp.left', 30) }}px;
          width:{{ (int) data_get($certificateSetting, 'no_hp.width', 180) }}px;
          font-size:{{ (int) 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') }};">
          {{ $p->no_hp }}
        </div>
      @endif

      @if(data_get($certificateSetting, 'jenis_kelamin.visible', false) && $p && $p->jenis_kelamin)
        <div style="
          position:absolute;
          top:{{ (int) data_get($certificateSetting, 'jenis_kelamin.top', 260) }}px;
          left:{{ (int) data_get($certificateSetting, 'jenis_kelamin.left', 30) }}px;
          width:{{ (int) data_get($certificateSetting, 'jenis_kelamin.width', 180) }}px;
          font-size:{{ (int) 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') }};">
          {{ $p->jenis_kelamin }}
        </div>
      @endif

      @if(data_get($certificateSetting, 'pekerjaan.visible', false) && $p && $p->pekerjaan)
        <div style="
          position:absolute;
          top:{{ (int) data_get($certificateSetting, 'pekerjaan.top', 280) }}px;
          left:{{ (int) data_get($certificateSetting, 'pekerjaan.left', 30) }}px;
          width:{{ (int) data_get($certificateSetting, 'pekerjaan.width', 180) }}px;
          font-size:{{ (int) data_get($certificateSetting, 'pekerjaan.size', 16) }}px;
          color:{{ data_get($certificateSetting, 'pekerjaan.color', '#333333') }};
          font-family:'{{ data_get($certificateSetting, 'pekerjaan.font', 'DejaVu Sans') }}';
          font-weight:{{ data_get($certificateSetting, 'pekerjaan.weight', 'normal') }};
          font-style:{{ data_get($certificateSetting, 'pekerjaan.italic', 'normal') }};
          text-align:{{ data_get($certificateSetting, 'pekerjaan.align', 'center') }};">
          {{ $p->pekerjaan }}
        </div>
      @endif

      @if(data_get($certificateSetting, 'jabatan.visible', false) && $p && $p->jabatan)
        <div style="
          position:absolute;
          top:{{ (int) data_get($certificateSetting, 'jabatan.top', 300) }}px;
          left:{{ (int) data_get($certificateSetting, 'jabatan.left', 30) }}px;
          width:{{ (int) data_get($certificateSetting, 'jabatan.width', 180) }}px;
          font-size:{{ (int) data_get($certificateSetting, 'jabatan.size', 16) }}px;
          color:{{ data_get($certificateSetting, 'jabatan.color', '#333333') }};
          font-family:'{{ data_get($certificateSetting, 'jabatan.font', 'DejaVu Sans') }}';
          font-weight:{{ data_get($certificateSetting, 'jabatan.weight', 'normal') }};
          font-style:{{ data_get($certificateSetting, 'jabatan.italic', 'normal') }};
          text-align:{{ data_get($certificateSetting, 'jabatan.align', 'center') }};">
          {{ $p->jabatan }}
        </div>
      @endif

      @if(data_get($certificateSetting, 'alamat.visible', false) && $p && $p->alamat)
        <div style="
          position:absolute;
          top:{{ (int) data_get($certificateSetting, 'alamat.top', 320) }}px;
          left:{{ (int) data_get($certificateSetting, 'alamat.left', 30) }}px;
          width:{{ (int) data_get($certificateSetting, 'alamat.width', 180) }}px;
          font-size:{{ (int) data_get($certificateSetting, 'alamat.size', 16) }}px;
          color:{{ data_get($certificateSetting, 'alamat.color', '#333333') }};
          font-family:'{{ data_get($certificateSetting, 'alamat.font', 'DejaVu Sans') }}';
          font-weight:{{ data_get($certificateSetting, 'alamat.weight', 'normal') }};
          font-style:{{ data_get($certificateSetting, 'alamat.italic', 'normal') }};
          text-align:{{ data_get($certificateSetting, 'alamat.align', 'center') }};">
          {{ $p->alamat }}
        </div>
      @endif

      @if(data_get($certificateSetting, 'province.visible', false) && $provinceName)
        <div style="
          position:absolute;
          top:{{ (int) data_get($certificateSetting, 'province.top', 340) }}px;
          left:{{ (int) data_get($certificateSetting, 'province.left', 30) }}px;
          width:{{ (int) data_get($certificateSetting, 'province.width', 180) }}px;
          font-size:{{ (int) data_get($certificateSetting, 'province.size', 16) }}px;
          color:{{ data_get($certificateSetting, 'province.color', '#333333') }};
          font-family:'{{ data_get($certificateSetting, 'province.font', 'DejaVu Sans') }}';
          font-weight:{{ data_get($certificateSetting, 'province.weight', 'normal') }};
          font-style:{{ data_get($certificateSetting, 'province.italic', 'normal') }};
          text-align:{{ data_get($certificateSetting, 'province.align', 'center') }};">
          {{ $provinceName }}
        </div>
      @endif

      @if(data_get($certificateSetting, 'certificate_id.visible', false))
        <div style="
          position:absolute;
          top:{{ (int) data_get($certificateSetting, 'certificate_id.top', 360) }}px;
          left:{{ (int) data_get($certificateSetting, 'certificate_id.left', 30) }}px;
          width:{{ (int) data_get($certificateSetting, 'certificate_id.width', 180) }}px;
          font-size:{{ (int) data_get($certificateSetting, 'certificate_id.size', 14) }}px;
          color:{{ data_get($certificateSetting, 'certificate_id.color', '#333333') }};
          font-family:'{{ data_get($certificateSetting, 'certificate_id.font', 'DejaVu Sans') }}';
          font-weight:{{ data_get($certificateSetting, 'certificate_id.weight', 'normal') }};
          font-style:{{ data_get($certificateSetting, 'certificate_id.italic', 'normal') }};
          text-align:{{ data_get($certificateSetting, 'certificate_id.align', 'left') }};">
          {{ $currentCertificateId ?? '-' }}
        </div>
      @endif

      @if(data_get($photoStyle, 'visible', true))
        @php
          $photoSize = (int) data_get($photoStyle, 'size', 90);
          $photoShape = data_get($photoStyle, 'shape', 'square');
          $photoFilename = $p && $p->foto ? $p->foto : null;
          $photoPath = $photoFilename ? public_path('assets/images/profilefoto/' . $photoFilename) : public_path('assets/images/profilefoto/default-profile.png');
          $photoBase64 = image_to_base64_data_uri($photoPath);
          $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 style="position:absolute; top:{{ (int) data_get($photoStyle, 'top', 70) }}px; left:{{ (int) data_get($photoStyle, 'left', 85) }}px; width: {{ $photoSize }}px; height: {{ $photoSize }}px;">
          @if($photoBase64)
            <img src="{{ $photoBase64 }}" alt="Foto" style="width:100%; height:100%; object-fit: cover; border-radius: {{ $photoShape === 'circle' ? '9999px' : '8px' }};">
          @endif
          <div style="position:absolute; inset:0; background: {{ $overlayColor }}; opacity: {{ $overlayAlpha }}; border-radius: {{ $photoShape === 'circle' ? '9999px' : '8px' }};"></div>
        </div>
      @endif

      @php
        $qrTop = (int) data_get($qrStyle, 'top', 320);
        $qrLeft = (int) data_get($qrStyle, 'left', 90);
        $qrSizeInput = (int) data_get($qrStyle, 'size', 80);
        $qrSize = max(40, $qrSizeInput);
      @endphp
      <div style="position:absolute; top: {{ $qrTop }}px; left: {{ $qrLeft }}px;">
        @php
          $qrLink = route('activity.download-certificate', ['id' => $activity->id]) . '?show_certificate=1';
          try {
            $qrBinary = \SimpleSoftwareIO\QrCode\Facades\QrCode::format('png')->size(max($qrSize,40))->generate((string) $qrLink);
            $qrSrc = 'data:image/png;base64,'.base64_encode($qrBinary);
          } catch (\Throwable $e) {
            $qrSrc = 'https://api.qrserver.com/v1/create-qr-code/?size='.max($qrSize,40).'x'.max($qrSize,40).'&data='.urlencode((string) $qrLink);
          }
        @endphp
        <a href="{{ $qrLink }}" target="_blank"><img src="{{ $qrSrc }}" alt="QR Code" style="width: {{ $qrSize }}px; height: {{ $qrSize }}px; object-fit: contain;"></a>
      </div>
    </div>
  </div>
  @unless($only)
  <div class="mt-6" style="width: {{ $widthCm }}cm; margin: 0 auto; display: flex; justify-content: center;">
    @if(!empty($currentCertificateId))
      <button id="download-certificate-png-simple" type="button" class="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-yellow-600 text-white text-sm">
        <i class="fas fa-download"></i>
        <span>Download Sertifikat (PNG)</span>
      </button>
    @endif
  </div>
  @endunless
</div>
@unless($only)
<script>
document.addEventListener('DOMContentLoaded', function(){
  var btn = document.getElementById('download-certificate-png-simple');
  if (!btn) return;
  btn.addEventListener('click', function(){
    var target = document.getElementById('certificate-canvas-target');
    if (!target) return;
    btn.disabled = true;
    var loader = document.createElement('span');
    loader.textContent = ' Mengunduh...';
    loader.style.fontSize = '12px';
    btn.appendChild(loader);
    var fontsReady = (document.fonts && document.fonts.ready) ? document.fonts.ready : Promise.resolve();
    var imgs = Array.prototype.slice.call(target.querySelectorAll('img'));
    var imagesReady = Promise.all(imgs.map(function(img){
      if (img.complete) return Promise.resolve();
      return new Promise(function(resolve){ img.onload = resolve; img.onerror = resolve; });
    }));
    function fallbackHtml2Canvas(){
      function run(){
        window.html2canvas(target, { scale: 2, useCORS: true, backgroundColor: '#ffffff', letterRendering: true, scrollX: 0, scrollY: 0 })
          .then(function(canvas){
            var a = document.createElement('a');
            a.href = canvas.toDataURL('image/png');
            a.download = 'sertifikat.png';
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
          })
          .finally(function(){ btn.disabled = false; try { btn.removeChild(loader); } catch(e){} });
      }
      if (!window.html2canvas){
        var s = document.createElement('script');
        s.src = 'https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js';
        s.onload = run;
        s.onerror = function(){ btn.disabled = false; try { btn.removeChild(loader); } catch(e){}; alert('Gagal memuat pustaka html2canvas.'); };
        document.body.appendChild(s);
      } else { run(); }
    }
    function doDownload(){
      function run(){
        var domtoimage = window.domtoimage;
        domtoimage.toPng(target, { quality: 1, cacheBust: true, bgcolor: '#ffffff', style: { transform: 'none' }})
          .then(function(dataUrl){
            var a = document.createElement('a');
            a.href = dataUrl;
            a.download = 'sertifikat.png';
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
          })
          .catch(function(){ fallbackHtml2Canvas(); })
          .finally(function(){ try { btn.removeChild(loader); } catch(e){}; btn.disabled = false; });
      }
      if (!window.domtoimage){
        var s = document.createElement('script');
        s.src = 'https://cdn.jsdelivr.net/npm/dom-to-image-more@3.3.6/dist/dom-to-image-more.min.js';
        s.onload = run;
        s.onerror = function(){ fallbackHtml2Canvas(); };
        document.body.appendChild(s);
      } else { run(); }
    }
    Promise.all([fontsReady, imagesReady]).then(doDownload);
  });
});
</script>
@endunless
@endsection