@extends('layouts.main')

@section('content')
<div class="flex flex-row items-start justify-center min-h-screen bg-[#fafafa] gap-6 md:gap-10 px-3 w-full overflow-x-hidden" style="flex-wrap: nowrap;">
  <!-- TABEL PESERTA -->
  <div id="participants-panel" class="w-full md:w-[650px] md:flex-none bg-yellow-50 rounded-2xl shadow-[0_4px_24px_rgba(191,161,0,0.10),0_1.5px_4px_rgba(255,215,0,0.10)] px-[18px] pt-6 pb-4 mt-8 font-[Segoe UI,Arial,sans-serif] border border-yellow-300">
    <h3 style="font-size:1.08rem; color:#bfa100; margin-bottom:12px; font-weight:bold; letter-spacing:0.5px; text-align:left;">Daftar Peserta Aktivitas</h3>
    <div style="margin-bottom: 12px;">
        <input type="text" id="participant-search" name="participant_search" aria-label="Cari nama atau provinsi" placeholder="Cari nama atau provinsi..." style="width: 100%; padding: 8px 12px; border-radius: 6px; border: 1px solid #ffe066; font-size: 0.97rem; background: #fff; box-sizing: border-box;">
    </div>
    <div style="overflow-y:auto; max-height: 500px;">
      <table id="participant-table" style="width:100%; border-collapse:collapse; font-size:0.97rem; background:#fff; border-radius:8px; overflow:hidden;">
        <thead>
          <tr style="background:#ffe066; color:#bfa100; position: sticky; top: 0;">
            <th style="padding:7px 8px; text-align:center;"><input type="checkbox" id="select-all-participants" name="select_all" aria-label="Pilih semua peserta" title="Pilih Semua"></th>
            <th style="padding:7px 8px; text-align:center;">No</th>
            <th style="padding:7px 8px; text-align:left;">Nama</th>
            <th style="padding:7px 8px; text-align:left;">Provinsi</th>
            <th style="padding:7px 8px; text-align:center;">Jumlah Cetak</th>
          </tr>
        </thead>
        <tbody>
          @php $rowIndex = 1; @endphp
          @foreach($participants as $peserta)
            @php
              $userParticipant = optional($peserta)->user;
              if (! $userParticipant) {
                  continue;
              }
              $profileParticipant = optional($userParticipant->profile);
            @endphp
            <tr style="border-bottom:1px solid #ffe066;">
              <td style="padding:6px 8px; text-align:center;">
                <input type="checkbox"
                       class="participant-checkbox"
                       name="participant_ids[]"
                       aria-label="Pilih peserta"
                       data-participant-id="{{ $userParticipant->id }}">
              </td>
              <td style="padding:6px 8px; text-align:center;">{{ $rowIndex }}</td>
              <td style="padding:6px 8px;">{{ $userParticipant->name ?? '-' }}</td>
              <td style="padding:6px 8px;">{{ optional($profileParticipant->province)->name ?? ($profileParticipant->other_province ?? '-') }}</td>
              <td style="padding:6px 8px; text-align:center;">{{ $peserta->print_count ?? 0 }}</td>
            </tr>
            @php $rowIndex++; @endphp
          @endforeach
          @if($rowIndex === 1)
            <tr><td colspan="5" style="text-align:center; color:#bfa100; padding:12px;">Belum ada peserta</td></tr>
          @endif
        </tbody>
      </table>
    </div>
    <div style="display: flex; justify-content: flex-end; gap: 12px; margin-top: 16px;">
        
        </button>
        <button id="print-selected-cards" style="background:#bfa100; color:#fff; border:none; border-radius:8px; padding: 8px 16px; font-size:0.98rem; font-weight:bold; cursor:pointer; box-shadow:0 2px 8px rgba(0,0,0,0.08);">
            Cetak Sertifikat Terpilih
        </button>
    </div>
  </div>
  <!-- END TABEL PESERTA -->

  <div class="w-full md:flex-1 md:mt-0">
    <div class="yellow-card-3d mx-auto">
      <div class="card-content" style="position:relative;">
        @php
          $uCard = auth()->user();
          $pCard = optional($uCard->profile);
          $provinceCard = optional($pCard->province)->name ?? ($pCard->other_province ?? null);
        @endphp
        <!-- Judul Sertifikat -->
        <div class="card-title drag-item" data-edit-key="activity-card-title" tabindex="0" contenteditable="true" style="position:absolute; top:20px; left:0px; cursor:move;">
          {{ $activity->name ?? 'Sertifikat PESERTA' }}
        </div>
        <div class="card-name drag-item" tabindex="0" contenteditable="true" style="position:absolute; top:190px; left:30px; cursor:move; display:none;">
          {{ auth()->user()->name ?? '-' }}
        </div>
        <div class="card-email drag-item" tabindex="0" contenteditable="true" style="position:absolute; top:220px; left:30px; cursor:move; display:none;">
          {{ $uCard->email ?? '-' }}
        </div>
        <div class="card-phone drag-item" tabindex="0" contenteditable="true" style="position:absolute; top:240px; left:30px; cursor:move; display:none;">
          {{ $pCard->no_hp ?? '-' }}
        </div>
        <div class="card-gender drag-item" tabindex="0" contenteditable="true" style="position:absolute; top:260px; left:30px; cursor:move; display:none;">
          {{ $pCard->jenis_kelamin ?? '-' }}
        </div>
        <div class="card-job drag-item" tabindex="0" contenteditable="true" style="position:absolute; top:280px; left:30px; cursor:move; display:none;">
          {{ $pCard->pekerjaan ?? '-' }}
        </div>
        <div class="card-role drag-item" tabindex="0" contenteditable="true" style="position:absolute; top:300px; left:30px; cursor:move; display:none;">
          {{ $pCard->jabatan ?? '-' }}
        </div>
        <div class="card-address drag-item" tabindex="0" contenteditable="true" style="position:absolute; top:320px; left:30px; cursor:move; display:none;">
          {{ $pCard->alamat ?? '-' }}
        </div>
        <div class="card-province drag-item" tabindex="0" contenteditable="true" style="position:absolute; top:340px; left:30px; cursor:move; display:none;">
          {{ $provinceCard ?? '-' }}
        </div>
        <div class="card-certid drag-item" tabindex="0" contenteditable="false" style="position:absolute; top:360px; left:30px; cursor:move; display:none;">
          {{ $currentCertificateId ?? '-' }}
        </div>
        <!-- Foto -->
        <div class="card-photo drag-item" style="position:absolute; top:70px; left:85px; cursor:move;">
          @if(auth()->user()->profile && auth()->user()->profile->foto)
            @php
                $photoPath = auth()->user()->profile->foto;
                $publicPath = asset('assets/images/profilefoto/' . $photoPath);
            @endphp
            <img src="{{ $publicPath }}"
                 class="user-profile-image"
                 alt="{{ auth()->user()->name }}'s profile picture"
                 onerror="this.src='{{ asset('assets/images/profilefoto/default-profile.png') }}'">
          @else
            <img src="{{ asset('assets/images/profilefoto/default-profile.png') }}"
                 class="user-profile-image"
                 alt="Default profile picture">
          @endif
        </div>
        <!-- QR Code -->
        <div class="card-qr drag-item" style="position:absolute; top:320px; left:90px; cursor:move;">
          @php
            $qrLink = route('activity.download-certificate', ['id' => $activity->id]) . '?show_certificate=1';
            try {
              $qrPng = \SimpleSoftwareIO\QrCode\Facades\QrCode::format('png')->size(80)->generate((string) $qrLink);
              $qrBase64 = 'data:image/png;base64,'.base64_encode($qrPng);
            } catch (\Throwable $e) {
              $qrBase64 = 'https://api.qrserver.com/v1/create-qr-code/?size=80x80&data='.urlencode((string) $qrLink);
            }
          @endphp
          <a href="{{ $qrLink }}" target="_blank"><img src="{{ $qrBase64 }}" alt="QR Code"></a>
        </div>
        
      </div>
    </div>
    <!-- Tombol simpan dan setting di bawah Sertifikat -->
    <div class="flex justify-center items-center gap-3 mt-6 flex-nowrap" id="card-menubar">
      @php
        $user = auth()->user();
        $isSuperAdmin = method_exists($user, 'isSuperAdmin') ? $user->isSuperAdmin() : ($user->role === 'superadmin');
        $isAdmin = method_exists($user, 'isAdmin') ? $user->isAdmin() : ($user->role === 'admin');
        $creator = $activity->user ?? \App\Models\User::find($activity->user_id);
        $isActivityOwner = method_exists($user, 'isCreator') ? ($user->isCreator() && $activity->user_id === $user->id) : false;
        $isCommitteeMember = method_exists($activity, 'canManageRegistration') ? $activity->canManageRegistration($user->id) : false;

        $canAccessPrinting = method_exists($activity, 'canAccessPrinting') ? $activity->canAccessPrinting($user, 'certificates') : ($isActivityOwner || $isCommitteeMember);
        $shouldShowButtons = $canAccessPrinting;
      @endphp

      {{-- Tiga tombol utama --}}
      @if($shouldShowButtons)
        <div id="action-buttons-wrapper" class="flex gap-3 flex-nowrap items-center justify-center">
            <button id="save-card-setting" title="Simpan Pengaturan" class="bg-yellow-600 text-white rounded-full w-11 h-11 text-xl font-bold cursor-pointer shadow flex items-center justify-center hover:bg-yellow-700 transition"><span>💾</span></button>
            <button id="toggle-setting-btn" title="Tampilkan/Penyembunyikan Panel Setting" class="bg-yellow-600 text-white rounded-full w-11 h-11 text-xl font-bold cursor-pointer shadow flex items-center justify-center hover:bg-yellow-700 transition"><span>⚙️</span></button>
            <button id="open-print-settings-modal" title="Pengaturan Cetak" class="bg-gray-500 text-white rounded-full w-11 h-11 text-xl font-bold cursor-pointer shadow flex items-center justify-center hover:bg-gray-600 transition"><span>🖨️</span></button>
        </div>
      @endif

      {{-- Toggle Lihat Sertifikat (Hijau) --}}
      @if($shouldShowButtons)
        @php
          $certificateSettingsModel = \App\Models\CertificateSettings::where('activity_id', $activity->id)->first();
          $downloadCardVisible = $certificateSettingsModel && isset($certificateSettingsModel->print_settings['download_card_visible']) 
                                  ? (bool)$certificateSettingsModel->print_settings['download_card_visible'] 
                                  : false; // Default non-aktif untuk aktivitas baru
        @endphp
        <button id="download-card-visibility-toggle-btn"
            data-activity-id="{{ $activity->id }}"
            data-visible="{{ $downloadCardVisible ? '1' : '0' }}"
            title="{{ $downloadCardVisible ? 'Nonaktifkan' : 'Aktifkan' }} Lihat Sertifikat"
            type="button"
            style="background:{{ $downloadCardVisible ? '#10b981' : '#888' }}; color:#fff; border:none; border-radius:50%; width:44px; height:44px; font-size:1.5rem; font-weight:bold; cursor:pointer; margin-left:8px;">
            <span id="download-card-eye-icon">{!! $downloadCardVisible ? '👁️' : '🙈' !!}</span>
        </button>
      @endif
    </div>

    {{-- Tombol toggle menubar khusus mobile --}}
    @if($shouldShowButtons)
    <div class="flex md:hidden justify-center mt-3">
      <button id="card-menubar-toggle" title="Tampilkan Menu Sertifikat" class="bg-yellow-600 text-white rounded-full w-11 h-11 text-xl font-bold cursor-pointer shadow flex items-center justify-center hover:bg-yellow-700 transition"><span>☰</span></button>
    </div>
    @endif

  </div>
  <!-- Menu Setting di samping -->
  <form id="card-settings" class="bg-yellow-50 rounded-2xl shadow p-4 ring-1 ring-yellow-200 md:sticky top-4 w-full md:w-[650px] space-y-[2px]">
    <h3 class="text-base font-bold text-yellow-700 mb-2">Pengaturan Teks Sertifikat</h3>
    <div class="flex flex-col space-y-[2px]">
      <div class="bg-transparent rounded-lg p-2 ring-1 ring-yellow-100">
        <button type="button" id="profile-toggle" class="w-full text-left flex items-center justify-between border border-yellow-300 bg-white rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-yellow-500">
          <span class="text-base font-semibold text-yellow-700">Profile</span>
          <span class="caret text-yellow-600" aria-hidden="true">▾</span>
        </button>
        <div id="profile-dropdown" class="border border-yellow-300 rounded-lg bg-white p-3" style="display:none;">
          <div class="border-t border-yellow-200 my-0.5"></div>
        @php
          $u = auth()->user();
          $p = optional($u->profile);
          $provinceName = optional($p->province)->name ?? ($p->other_province ?? null);
          $regencyName = optional($p->regency)->name ?? ($p->other_regency ?? null);
          $districtName = optional($p->district)->name ?? ($p->other_district ?? null);
        @endphp
        <div class="flex flex-col gap-[2px] max-w-full">
            <div class="flex items-start gap-2 text-gray-800 leading-tight flex-wrap" data-field="name"><input type="checkbox" class="profile-item-toggle w-4 h-4 mt-0.5" data-field="name"><span class="min-w-[140px] font-semibold text-yellow-700">Nama</span><span class="text-yellow-600">:</span><span class="text-gray-800 flex-1 min-w-0 break-words">{{ $u->name }}</span></div>
            <div class="flex items-start gap-2 text-gray-800 leading-tight flex-wrap" data-field="email"><input type="checkbox" class="profile-item-toggle w-4 h-4 mt-0.5" data-field="email"><span class="min-w-[140px] font-semibold text-yellow-700">Email</span><span class="text-yellow-600">:</span><span class="text-gray-800 flex-1 min-w-0 break-words">{{ $u->email }}</span></div>
            @if($p && $p->no_hp)<div class="flex items-start gap-2 text-gray-800 leading-tight flex-wrap" data-field="no_hp"><input type="checkbox" class="profile-item-toggle w-4 h-4 mt-0.5" data-field="no_hp"><span class="min-w-[140px] font-semibold text-yellow-700">No HP</span><span class="text-yellow-600">:</span><span class="text-gray-800 flex-1 min-w-0 break-words">{{ $p->no_hp }}</span></div>@endif
            @if($p && $p->jenis_kelamin)<div class="flex items-start gap-2 text-gray-800 leading-tight flex-wrap" data-field="jenis_kelamin"><input type="checkbox" class="profile-item-toggle w-4 h-4 mt-0.5" data-field="jenis_kelamin"><span class="min-w-[140px] font-semibold text-yellow-700">Jenis Kelamin</span><span class="text-yellow-600">:</span><span class="text-gray-800 flex-1 min-w-0 break-words">{{ $p->jenis_kelamin }}</span></div>@endif
            @if($p && $p->pekerjaan)<div class="flex items-start gap-2 text-gray-800 leading-tight flex-wrap" data-field="pekerjaan"><input type="checkbox" class="profile-item-toggle w-4 h-4 mt-0.5" data-field="pekerjaan"><span class="min-w-[140px] font-semibold text-yellow-700">Pekerjaan</span><span class="text-yellow-600">:</span><span class="text-gray-800 flex-1 min-w-0 break-words">{{ $p->pekerjaan }}</span></div>@endif
            @if($p && $p->jabatan)<div class="flex items-start gap-2 text-gray-800 leading-tight flex-wrap" data-field="jabatan"><input type="checkbox" class="profile-item-toggle w-4 h-4 mt-0.5" data-field="jabatan"><span class="min-w-[140px] font-semibold text-yellow-700">Jabatan</span><span class="text-yellow-600">:</span><span class="text-gray-800 flex-1 min-w-0 break-words">{{ $p->jabatan }}</span></div>@endif
            @if($p && $p->alamat)<div class="flex items-start gap-2 text-gray-800 leading-tight flex-wrap" data-field="alamat"><input type="checkbox" class="profile-item-toggle w-4 h-4 mt-0.5" data-field="alamat"><span class="min-w-[140px] font-semibold text-yellow-700">Alamat</span><span class="text-yellow-600">:</span><span class="text-gray-800 flex-1 min-w-0 break-words">{{ $p->alamat }}</span></div>@endif
            @if($provinceName)<div class="flex items-start gap-2 text-gray-800 leading-tight flex-wrap" data-field="province"><input type="checkbox" class="profile-item-toggle w-4 h-4 mt-0.5" data-field="province"><span class="min-w-[140px] font-semibold text-yellow-700">Provinsi</span><span class="text-yellow-600">:</span><span class="text-gray-800 flex-1 min-w-0 break-words">{{ $provinceName }}</span></div>@endif
            @if($regencyName)<div class="flex items-start gap-2 text-gray-800 leading-tight flex-wrap" data-field="regency"><input type="checkbox" class="profile-item-toggle w-4 h-4 mt-0.5" data-field="regency"><span class="min-w-[140px] font-semibold text-yellow-700">Kab/Kota</span><span class="text-yellow-600">:</span><span class="text-gray-800 flex-1 min-w-0 break-words">{{ $regencyName }}</span></div>@endif
            @if($districtName)<div class="flex items-start gap-2 text-gray-800 leading-tight flex-wrap" data-field="district"><input type="checkbox" class="profile-item-toggle w-4 h-4 mt-0.5" data-field="district"><span class="min-w-[140px] font-semibold text-yellow-700">Kecamatan</span><span class="text-yellow-600">:</span><span class="text-gray-800 flex-1 min-w-0 break-words">{{ $districtName }}</span></div>@endif
        </div>
        </div>
      </div>
      <div class="bg-transparent rounded-lg p-2 ring-1 ring-yellow-100">
        <label for="text-font" class="text-base font-semibold text-yellow-700">Editor Teks</label>
        <div class="border-t border-yellow-200 my-0.5"></div>
        <div class="flex items-center flex-nowrap whitespace-nowrap gap-[6px]">
          <select id="text-font" name="text_font" aria-label="Font teks" class="border border-yellow-300 bg-white rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-yellow-500 flex-1 min-w-[160px]">
            <option value="Segoe UI">Segoe UI</option>
            <option value="Inter">Inter</option>
            <option value="Poppins">Poppins</option>
            <option value="Montserrat">Montserrat</option>
            <option value="Playfair Display">Playfair Display</option>
            <option value="Arial">Arial</option>
            <option value="Tahoma">Tahoma</option>
            <option value="Times New Roman">Times New Roman</option>
          </select>
          <input type="number" id="text-size" name="text_size" aria-label="Ukuran teks" value="16" min="10" max="40" title="Ukuran" class="border border-yellow-300 bg-white rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-yellow-500 w-[100px] text-center">
          <div class="relative w-11 h-11 flex-shrink-0">
            <div id="color-tile" title="Warna Teks" class="absolute inset-0 border border-yellow-300 rounded-lg shadow-inner" style="background-color:#333333"></div>
            <input type="color" id="text-color" name="text_color" aria-label="Warna teks" value="#333333" title="Warna" class="absolute inset-0 w-full h-full opacity-0 pointer-events-none">
          </div>
          <select id="text-align" name="text_align" aria-label="Perataan teks" title="Rata" class="border border-yellow-300 bg-white rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-yellow-500 w-max">
            <option value="left">Kiri</option>
            <option value="center" selected>Tengah</option>
            <option value="right">Kanan</option>
          </select>
          <input type="number" id="text-width" name="text_width" aria-label="Lebar teks (px)" value="180" min="10" max="999" title="Lebar (px)" class="border border-yellow-300 bg-white rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-yellow-500 w-[10ch] text-center">
          <label class="flex items-center justify-center w-11 h-11 border border-yellow-300 rounded-lg bg-white cursor-pointer" title="Bold">
            <input type="checkbox" id="text-bold" name="text_bold" aria-label="Tebal" class="sr-only">
            <span class="text-yellow-600 font-bold text-base leading-none">B</span>
          </label>
          <label class="flex items-center justify-center w-11 h-11 border border-yellow-300 rounded-lg bg-white cursor-pointer" title="Italic">
            <input type="checkbox" id="text-italic" name="text_italic" aria-label="Miring" class="sr-only">
            <span class="text-yellow-600 italic font-medium text-base leading-none">I</span>
          </label>
        </div>
        </div>
        <div class="text-xs text-gray-500 mt-[2px]">Mengedit: <span id="text-target-label" class="font-medium">Pilih teks pada Sertifikat</span></div>
      </div>

      <div class="bg-transparent rounded-lg p-2">
        <label for="photo-size" class="text-sm font-semibold text-yellow-700 mb-2">Foto</label>
        <div class="flex items-center gap-[2px] flex-nowrap whitespace-nowrap">
          <input type="number" id="photo-size" name="photo_size" aria-label="Ukuran foto" value="90" min="40" max="200" title="Ukuran" class="border border-yellow-300 bg-white rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-yellow-500 w-[72px]">
          <select id="photo-shape" name="photo_shape" aria-label="Bentuk foto" class="border border-yellow-300 bg-white rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-yellow-500 min-w-[84px]">
            <option value="square">Kotak</option>
            <option value="circle">Bulat</option>
          </select>
          <div class="relative w-[34px] h-[34px] inline-block">
            <label id="photo-overlay-tile" title="Warna Overlay" class="absolute inset-0 border border-yellow-300 rounded-lg shadow-inner" style="background-color:#000000"></label>
            <input type="color" id="photo-overlay-color" name="photo_overlay_color" aria-label="Warna overlay foto" value="#000000" title="Warna Overlay" class="absolute inset-0 w-full h-full opacity-0 pointer-events-none">
          </div>
          <input type="number" id="photo-overlay-opacity" name="photo_overlay_opacity" aria-label="Transparansi overlay (%)" value="0" min="0" max="100" title="Transparansi (%) — 0: penuh warna, 100: hilang" class="border border-yellow-300 bg-white rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-yellow-500 w-[56px] text-center">
        </div>
      </div>

      <div class="bg-transparent rounded-lg p-2">
        <label for="qr-size" class="text-sm font-semibold text-yellow-700 mb-2">QR Code</label>
        <div class="flex items-center gap-[2px] justify-between">
          <div class="flex items-center gap-2">
            <input type="number" id="qr-size" name="qr_size" aria-label="Ukuran QR" value="80" min="40" max="200" title="Ukuran" class="w-24 border border-yellow-300 bg-white rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-yellow-500">
            <span id="qr-size-display" class="text-xs text-yellow-600 font-medium">(Aktual: <span id="qr-size-actual">80</span>px)</span>
          </div>
          <div class="flex items-center gap-2">
            <label class="flex items-center gap-2 border border-yellow-300 rounded-lg bg-white px-3 py-2 text-sm">
              <input type="checkbox" id="title-visible" class="w-4 h-4" checked>
              <span class="text-yellow-700">Tampilkan Judul</span>
            </label>
            <label class="flex items-center gap-2 border border-yellow-300 rounded-lg bg-white px-3 py-2 text-sm">
              <input type="checkbox" id="photo-visible" class="w-4 h-4" checked>
              <span class="text-yellow-700">Tampilkan Foto</span>
            </label>
            <label class="flex items-center gap-2 border border-yellow-300 rounded-lg bg-white px-3 py-2 text-sm">
              <input type="checkbox" id="certid-visible" class="w-4 h-4">
              <span class="text-yellow-700">Tampilkan Nomor Sertifikat</span>
            </label>
          </div>
        </div>
      </div>

      <div class="bg-transparent rounded-lg p-2">
        <label for="card-width-cm" class="text-sm font-semibold text-yellow-700 mb-2">Ukuran Sertifikat (cm)</label>
        <div class="flex items-center gap-[2px]">
          <input type="number" id="card-width-cm" name="card_width_cm" aria-label="Lebar Sertifikat (cm)" value="29.7" min="1" max="60" step="0.1" title="Lebar" class="w-24 border border-yellow-300 bg-white rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-yellow-500">
          <span class="text-sm">x</span>
          <input type="number" id="card-height-cm" name="card_height_cm" aria-label="Tinggi Sertifikat (cm)" value="21.0" min="1" max="60" step="0.1" title="Tinggi" class="w-24 border border-yellow-300 bg-white rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-yellow-500">
        </div>
        <div class="mt-2 flex items-center gap-2">
          <select id="card-size-preset" class="border border-yellow-300 bg-white rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-yellow-500">
            <option value="">Pilih preset</option>
            <option value="A3">A3</option>
            <option value="A4" selected>A4</option>
            <option value="A5">A5</option>
            <option value="F4">F4 (Folio)</option>
            <option value="Letter">Letter</option>
            <option value="Legal">Legal</option>
          </select>
          <select id="card-size-orientation" class="border border-yellow-300 bg-white rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-yellow-500">
            <option value="portrait">Portrait</option>
            <option value="landscape" selected>Landscape</option>
          </select>
          <button type="button" id="apply-card-size-preset" class="px-3 py-2 rounded-lg bg-yellow-600 text-white text-sm font-semibold hover:bg-yellow-700 transition">Terapkan</button>
        </div>
      </div>

      <div class="bg-transparent rounded-lg p-2">
        <label class="text-sm font-semibold text-yellow-700 mb-2">Background Sertifikat</label>
        <div class="border-t border-yellow-200 my-0.5"></div>
        <div class="flex items-center flex-nowrap bg-transparent rounded-lg gap-[2px] px-2 py-2 mt-[2px] overflow-x-auto overflow-y-hidden whitespace-nowrap min-h-[56px]" id="bg-thumbnails">
          @php
            $bgDir = public_path('assets/images/certificate');
            $bgFiles = glob($bgDir . '/*.{png,jpg,jpeg,gif,webp}', GLOB_BRACE);
          @endphp
          @if(count($bgFiles) > 0)
            @foreach($bgFiles as $file)
              @php $filename = basename($file); @endphp
              @php $isUploaded = DB::table('certificate_backgrounds')->where('filename', $filename)->exists(); @endphp
              <div class="relative inline-block mr-[4px]">
                <img src="{{ asset('assets/images/certificate/' . $filename) }}" class="bg-thumb w-10 h-14 rounded-md border-2 border-yellow-300 hover:border-yellow-400 transition cursor-pointer" data-bg="{{ $filename }}" alt="{{ $filename }}">
                @if($isUploaded)
                  <button type="button" class="bg-thumb-delete absolute -top-1 -right-1 w-5 h-5 rounded-full border-2 border-dashed border-red-500 bg-red-50 text-red-600 text-xs leading-none flex items-center justify-center" data-bg="{{ $filename }}" title="Hapus">×</button>
                @endif
              </div>
            @endforeach
          @endif
          <label for="bg-upload-input" id="bg-upload-label" class="cursor-pointer flex items-center justify-center w-14 h-14 rounded-full border-2 border-dashed border-yellow-500 bg-yellow-50 text-yellow-600 text-2xl">
            <span class="pointer-events-none leading-none">+</span>
            <input type="file" id="bg-upload-input" name="card_bg_upload" aria-label="Unggah latar belakang Sertifikat" accept="image/*" class="sr-only">
          </label>
        </div>
      </div>
    </div>
  </form>
</div>

<!-- Modal Pengaturan Cetak -->
<div id="print-settings-modal" class="modal-backdrop" style="display: none;">
  <div class="modal-content setting-panel bg-white rounded-xl shadow-lg p-6">
    <div class="flex items-center justify-between">
        <h3 class="text-base font-semibold text-gray-800">Pengaturan Cetak PDF</h3>
        <button id="close-print-settings-modal" class="text-gray-600 hover:text-gray-800 text-2xl leading-none">&times;</button>
    </div>
    <div class="mt-4 space-y-4">
      <div>
        <label for="paper-size" class="text-sm font-medium text-gray-700">Ukuran Kertas</label>
        <div class="mt-1">
            <select id="paper-size" name="paper_size" aria-label="Ukuran kertas" class="w-full border border-gray-300 rounded-md px-2 py-1 text-sm focus:outline-none focus:ring-2 focus:ring-yellow-500">
              <option value="A3">A3</option>
              <option value="A4" selected>A4</option>
              <option value="A5">A5</option>
              <option value="F4">F4 (Folio)</option>
              <option value="Letter">Letter</option>
              <option value="Legal">Legal</option>
            </select>
        </div>
      </div>
      <div>
        <label for="paper-orientation" class="text-sm font-medium text-gray-700">Orientasi</label>
        <div class="mt-1">
            <select id="paper-orientation" name="paper_orientation" aria-label="Orientasi kertas" class="w-full border border-gray-300 rounded-md px-2 py-1 text-sm focus:outline-none focus:ring-2 focus:ring-yellow-500">
              <option value="portrait" selected>Portrait</option>
              <option value="landscape">Landscape</option>
            </select>
        </div>
      </div>
      <div>
        <label for="paper-margin" class="text-sm font-medium text-gray-700">Margin Halaman</label>
        <div class="mt-1 flex items-center gap-2">
          <input id="paper-margin" name="paper_margin" type="number" step="0.1" min="0" value="0" class="w-24 border border-gray-300 rounded-md px-2 py-1 text-sm focus:outline-none focus:ring-2 focus:ring-yellow-500" />
          <span class="text-sm text-gray-600">cm</span>
          <label class="ml-4 inline-flex items-center gap-2 text-sm text-gray-700">
            <input type="checkbox" id="scale-to-paper" class="rounded" checked />
            <span>Sesuaikan ukuran sertifikat ke kertas (full)</span>
          </label>
        </div>
      </div>
      <div>
        <label class="text-sm font-medium text-gray-700">Kompensasi Cetak (opsional)</label>
        <div class="mt-1 grid grid-cols-3 gap-2">
          <div class="flex items-center gap-2">
            <input id="offset-top-mm" type="number" step="0.1" value="0" class="w-24 border border-gray-300 rounded-md px-2 py-1 text-sm focus:outline-none focus:ring-2 focus:ring-yellow-500" />
            <span class="text-sm text-gray-600">Offset Atas (mm)</span>
          </div>
          <div class="flex items-center gap-2">
            <input id="offset-left-mm" type="number" step="0.1" value="0" class="w-24 border border-gray-300 rounded-md px-2 py-1 text-sm focus:outline-none focus:ring-2 focus:ring-yellow-500" />
            <span class="text-sm text-gray-600">Offset Kiri (mm)</span>
          </div>
          <div class="flex items-center gap-2">
            <input id="size-adjust-mm" type="number" step="0.1" value="0" class="w-24 border border-gray-300 rounded-md px-2 py-1 text-sm focus:outline-none focus:ring-2 focus:ring-yellow-500" />
            <span class="text-sm text-gray-600">Penyesuaian Ukuran (mm)</span>
          </div>
        </div>
      </div>
      <div>
        <label for="cards-cols" class="text-sm font-medium text-gray-700">Sertifikat per Halaman (Kolom x Baris)</label>
        <div class="mt-1 flex items-center gap-2 justify-between">
            <input type="number" id="cards-cols" name="cards_cols" aria-label="Kolom per halaman" value="2" min="1" max="5" title="Kolom" class="w-1/2 border border-gray-300 rounded-md px-2 py-1 text-sm focus:outline-none focus:ring-2 focus:ring-yellow-500">
            <span class="text-yellow-600 font-semibold">x</span>
            <input type="number" id="cards-rows" name="cards_rows" aria-label="Baris per halaman" value="4" min="1" max="10" title="Baris" class="w-1/2 border border-gray-300 rounded-md px-2 py-1 text-sm focus:outline-none focus:ring-2 focus:ring-yellow-500">
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Tambahkan hidden input untuk activity_id -->
<input type="hidden" id="activity-id" name="activity_id" value="{{ $activity->id }}">

<script>
document.addEventListener('DOMContentLoaded', function() {
const globalToolbar = document.getElementById('editModeToolbar');
if (globalToolbar) { globalToolbar.style.display = 'none'; try { disableEditMode(); } catch($e) {} }
// Modal Print Settings Logic
const printModal = document.getElementById('print-settings-modal');
const openModalBtn = document.getElementById('open-print-settings-modal');
const closeModalBtn = document.getElementById('close-print-settings-modal');

  if (openModalBtn) {
      openModalBtn.addEventListener('click', () => {
          if (printModal) printModal.style.display = 'flex';
      });
  }
// Toggle menubar on mobile
try {
  const menubar = document.getElementById('card-menubar');
  const toggleMenubarBtn = document.getElementById('card-menubar-toggle');
  if (menubar && toggleMenubarBtn) {
    toggleMenubarBtn.addEventListener('click', () => {
      menubar.classList.toggle('hidden');
      // Tambahkan sedikit animasi ring saat aktif
      toggleMenubarBtn.classList.toggle('ring-2');
      toggleMenubarBtn.classList.toggle('ring-yellow-500');
    });
  }
} catch($e) {}
// Toggle dropdown Profile
try {
  const profileToggle = document.getElementById('profile-toggle');
  const profileDropdown = document.getElementById('profile-dropdown');
  if (profileToggle && profileDropdown) {
    profileToggle.addEventListener('click', function(){
      const show = profileDropdown.style.display === 'none';
      profileDropdown.style.display = show ? 'block' : 'none';
      this.classList.toggle('open', show);
    });
  }
} catch($e) {}

const profileFieldToCardClass = {
  name: '.card-name',
  email: '.card-email',
  no_hp: '.card-phone',
  jenis_kelamin: '.card-gender',
  pekerjaan: '.card-job',
  jabatan: '.card-role',
  alamat: '.card-address',
  province: '.card-province',
  regency: '.card-regency',
  district: '.card-district'
};
document.querySelectorAll('.profile-item-toggle').forEach(toggle => {
  const field = toggle.getAttribute('data-field');
  const sel = profileFieldToCardClass[field];
  const el = sel ? document.querySelector(sel) : null;
  if (!el) return;
  const apply = () => {
    const show = !!toggle.checked;
    el.style.display = show ? 'block' : 'none';
    if (show) ensureInsideCard(el);
    if (show) selectElement(el);
  };
  toggle.addEventListener('change', apply);
  apply();
});

if (closeModalBtn) {
    closeModalBtn.addEventListener('click', () => {
        if (printModal) printModal.style.display = 'none';
    });
}
// Close modal if backdrop is clicked
if (printModal) {
    printModal.addEventListener('click', (event) => {
        if (event.target === printModal) {
            printModal.style.display = 'none';
        }
    });
}
// Real-time search for participants
const searchInput = document.getElementById('participant-search');
const tableRows = document.querySelectorAll('#participant-table tbody tr');

if (searchInput) {
    searchInput.addEventListener('keyup', function() {
        const searchTerm = this.value.toLowerCase();

        tableRows.forEach(row => {
            // Lewati baris "Belum ada peserta"
            if (row.querySelectorAll('td').length > 1) {
                const rowText = row.textContent.toLowerCase();
                if (rowText.includes(searchTerm)) {
                    row.style.display = '';
                } else {
                    row.style.display = 'none';
                }
            }
        });
    });
}
// Fitur centang semua peserta
const selectAllCheckbox = document.getElementById('select-all-participants');
const participantCheckboxes = document.querySelectorAll('.participant-checkbox');

if (selectAllCheckbox) {
  selectAllCheckbox.addEventListener('change', function() {
    participantCheckboxes.forEach(checkbox => {
      checkbox.checked = this.checked;
    });
  });
}

// Preview PDF logic
const previewPdfBtn = document.getElementById('preview-pdf-btn');
if (previewPdfBtn) {
    previewPdfBtn.addEventListener('click', function() {
        const selectedIds = [];
        document.querySelectorAll('.participant-checkbox:checked').forEach(checkbox => {
            selectedIds.push(checkbox.dataset.participantId);
        });

        if (selectedIds.length === 0) {
            alert('Pilih minimal satu peserta untuk melihat preview PDF.');
            return;
        }

        // Kumpulkan semua pengaturan dari antarmuka pengguna
        function getTextStyle(cls) {
            const el = document.querySelector(cls);
            if (!el) return {};
            const cs = getComputedStyle(el);
            const ff = (cs.fontFamily || '').replace(/"/g,'').split(',')[0].trim();
            return {
                color: (function(c){const m=c.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)/i);if(!m) return '#333333';const r=parseInt(m[1]).toString(16).padStart(2,'0');const g=parseInt(m[2]).toString(16).padStart(2,'0');const b=parseInt(m[3]).toString(16).padStart(2,'0');return `#${r}${g}${b}`;})(cs.color||'#333333'),
                font: ff || 'Segoe UI',
                size: Math.round(parseFloat(cs.fontSize)||16),
                align: cs.textAlign || 'center',
                weight: ((cs.fontWeight+'').toLowerCase()==='bold' || cs.fontWeight==='700') ? 'bold' : 'normal',
                italic: ((cs.fontStyle||'').toLowerCase()==='italic') ? 'italic' : 'normal',
                width: Math.round(el.getBoundingClientRect().width)
            };
        }
        function getFieldSetting(field, selector){
          const el = document.querySelector(selector);
          const toggle = document.querySelector(`.profile-item-toggle[data-field="${field}"]`);
          if (!el) return null;
          return Object.assign(getTextStyle(selector), getPosition(selector), { visible: !!(toggle && toggle.checked) });
        }
        const currentCardSetting = {
            title: Object.assign(getTextStyle('.card-title'), getPosition('.card-title'), { visible: !!(document.getElementById('title-visible')?.checked) }),
            photo: { size: parseInt(photoSize.value), shape: photoShape.value, overlay_color: (document.getElementById('photo-overlay-color')?.value || null), overlay_opacity: parseInt(document.getElementById('photo-overlay-opacity')?.value || 0), ...getPosition('.card-photo'), visible: !!(document.getElementById('photo-visible')?.checked) },
            qr: { 
              size: parseInt(qrSize.value), // Size asli dari input
              actual_size: Math.round((() => {
                const v = parseFloat(qrSize.value);
                const scale = getCardScale();
                return Math.min(v * scale.scaleX, v * scale.scaleY);
              })()), // Size aktual yang ditampilkan (sudah di-scale)
              ...getPosition('.card-qr') 
            },
            card: {
              width_cm: parseFloat(cardWidthCm.value),
              height_cm: parseFloat(cardHeightCm.value),
              background: (function() {
                const bg = document.querySelector('.yellow-card-3d').style.backgroundImage;
                if (!bg) return null;
                const match = bg.match(/\/([^\/]+\.(png|jpg|jpeg|gif|webp))/i);
                return match ? match[1] : null;
              })()
            },
            name: getFieldSetting('name', '.card-name'),
            email: getFieldSetting('email', '.card-email'),
            no_hp: getFieldSetting('no_hp', '.card-phone'),
            jenis_kelamin: getFieldSetting('jenis_kelamin', '.card-gender'),
            pekerjaan: getFieldSetting('pekerjaan', '.card-job'),
            jabatan: getFieldSetting('jabatan', '.card-role'),
            alamat: getFieldSetting('alamat', '.card-address'),
            province: getFieldSetting('province', '.card-province'),
            regency: getFieldSetting('regency', '.card-regency'),
            district: getFieldSetting('district', '.card-district')
        };

        // Kumpulkan pengaturan cetak
        const marginVal = parseFloat(document.getElementById('paper-margin').value || '0');
        const offsetTopMm = parseFloat(document.getElementById('offset-top-mm')?.value || '0');
        const offsetLeftMm = parseFloat(document.getElementById('offset-left-mm')?.value || '0');
        const sizeAdjustMm = parseFloat(document.getElementById('size-adjust-mm')?.value || '0');
        const printSettings = {
            paper: document.getElementById('paper-size').value,
            orientation: document.getElementById('paper-orientation').value,
            cols: document.getElementById('cards-cols').value,
            rows: document.getElementById('cards-rows').value,
            margin: `${isNaN(marginVal) ? 0 : marginVal}cm`,
            scale_to_paper: document.getElementById('scale-to-paper').checked,
            offset_top_mm: isNaN(offsetTopMm) ? 0 : offsetTopMm,
            offset_left_mm: isNaN(offsetLeftMm) ? 0 : offsetLeftMm,
            size_adjust_mm: isNaN(sizeAdjustMm) ? 0 : sizeAdjustMm,
        };

        // Buat form sementara untuk mengirim data via POST ke tab baru
        const form = document.createElement('form');
        form.method = 'POST';
        form.action = `/activity/{{$activity->id}}/preview-certificates-pdf?users=${selectedIds.join(',')}`;
        form.target = '_blank';

        const csrfInput = document.createElement('input');
        csrfInput.type = 'hidden';
        csrfInput.name = '_token';
        csrfInput.value = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '';
        form.appendChild(csrfInput);

        // Kirim pengaturan sertifikat yang saat ini ditampilkan di UI
        const certificateSettingInput = document.createElement('input');
        certificateSettingInput.type = 'hidden';
        certificateSettingInput.name = 'certificate_setting';
        certificateSettingInput.value = JSON.stringify(currentCardSetting);
        form.appendChild(certificateSettingInput);

        const printSettingsInput = document.createElement('input');
        printSettingsInput.type = 'hidden';
        printSettingsInput.name = 'print_settings';
        printSettingsInput.value = JSON.stringify(printSettings);
        form.appendChild(printSettingsInput);

        document.body.appendChild(form);
        form.submit();
        document.body.removeChild(form);
    });
}

// Print selected cards logic (placeholder)
const printBtn = document.getElementById('print-selected-cards');
if (printBtn) {
    printBtn.addEventListener('click', function() {
        const selectedIds = [];
        document.querySelectorAll('.participant-checkbox:checked').forEach(checkbox => {
            selectedIds.push(checkbox.dataset.participantId);
        });

        if (selectedIds.length === 0) {
            alert('Pilih minimal satu peserta untuk dicetak Sertifikatnya.');
            return;
        }
        // Buka halaman print HTML auto-print, print_count akan diupdate otomatis
        const printUrl = `/activity/{{$activity->id}}/print-certificates-html?users=${selectedIds.join(',')}`;
        window.open(printUrl, '_blank');
    });
}
// Helper function to update style
function updateStyle(className, prop, value) {
  document.querySelectorAll(className).forEach(el => {
    el.style[prop] = value;
  });
}
// Helper function to get position (left, top) of an element
function getPosition(className) {
  const el = document.querySelector(className);
  if (!el) return {};
  const container = document.querySelector('.card-content');
  const rect = el.getBoundingClientRect();
  const cRect = container ? container.getBoundingClientRect() : { left: 0, top: 0, width: rect.width, height: rect.height };
  const leftPx = Math.round(rect.left - cRect.left);
  const topPx = Math.round(rect.top - cRect.top);
  const widthPx = Math.round(rect.width);
  const heightPx = Math.round(rect.height);
  const rightPx = Math.round(cRect.width - (leftPx + rect.width));
  const bottomPx = Math.round(cRect.height - (topPx + rect.height));
  return { left: leftPx, top: topPx, width: widthPx, height: heightPx, right: rightPx, bottom: bottomPx };
}
// Helper function to set position
function setPosition(className, pos) {
  const el = document.querySelector(className);
  if (el && pos) {
    const container = document.querySelector('.card-content');
    const cRect = container ? container.getBoundingClientRect() : null;
    let left = typeof pos.left !== 'undefined' ? pos.left : undefined;
    let top = typeof pos.top !== 'undefined' ? pos.top : undefined;
    let width = typeof pos.width !== 'undefined' ? pos.width : undefined;
    if (typeof width !== 'undefined') {
      if (cRect) width = Math.min(width, Math.round(cRect.width));
      el.style.width = width + 'px';
    }
    if (typeof left !== 'undefined') {
      if (cRect) left = Math.max(0, Math.min(left, Math.round(cRect.width - el.offsetWidth)));
      el.style.left = left + 'px';
    }
    if (typeof top !== 'undefined') {
      if (cRect) top = Math.max(0, Math.min(top, Math.round(cRect.height - el.offsetHeight)));
      el.style.top = top + 'px';
    }
    try { el.style.marginLeft = '0px'; } catch($e) {}
  }
}
function ensureInsideCard(el) {
  if (!el) return;
  const container = document.querySelector('.card-content');
  if (!container) return;
  const cRect = container.getBoundingClientRect();
  const rect = el.getBoundingClientRect();
  let left = rect.left - cRect.left;
  let top = rect.top - cRect.top;
  const maxLeft = Math.max(0, Math.round(cRect.width - rect.width));
  const maxTop = Math.max(0, Math.round(cRect.height - rect.height));
  left = Math.min(maxLeft, Math.max(0, left));
  top = Math.min(maxTop, Math.max(0, top));
  el.style.left = left + 'px';
  el.style.top = top + 'px';
  el.style.transform = 'none';
}
// Helper function to set value if exists
function setValueIfExists(input, value) {
  if (input && typeof value !== 'undefined') input.value = value;
}
let currentEditableElement = null;
const textTargets = document.querySelectorAll(
  '.card-title, .card-name, .card-email, .card-phone, .card-gender, .card-job, .card-role, .card-address, .card-province, .card-certid'
);
const textFont = document.getElementById('text-font');
const textSize = document.getElementById('text-size');
const textAlign = document.getElementById('text-align');
const textColor = document.getElementById('text-color');
const colorTile = document.getElementById('color-tile');
const textBold = document.getElementById('text-bold');
const textItalic = document.getElementById('text-italic');
const textWidth = document.getElementById('text-width');
const textTargetLabel = document.getElementById('text-target-label');

function cssColorToHex(c) {
  c = (c || '').trim().toLowerCase();
  if (!c) return '#333333';
  if (c.startsWith('#')) {
    if (c.length === 4) return `#${c[1]}${c[1]}${c[2]}${c[2]}${c[3]}${c[3]}`;
    if (c.length >= 7) return `#${c.slice(1,7)}`;
  }
  let m = c.match(/^rgba?\(\s*(\d+)\s*(?:,|\s)\s*(\d+)\s*(?:,|\s)\s*(\d+)/i);
  if (m) {
    const r = parseInt(m[1]).toString(16).padStart(2,'0');
    const g = parseInt(m[2]).toString(16).padStart(2,'0');
    const b = parseInt(m[3]).toString(16).padStart(2,'0');
    return `#${r}${g}${b}`;
  }
  try {
    const tmp = document.createElement('div');
    tmp.style.color = c;
    document.body.appendChild(tmp);
    const cc = getComputedStyle(tmp).color;
    document.body.removeChild(tmp);
    m = cc.match(/^rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)/i);
    if (m) {
      const r = parseInt(m[1]).toString(16).padStart(2,'0');
      const g = parseInt(m[2]).toString(16).padStart(2,'0');
      const b = parseInt(m[3]).toString(16).padStart(2,'0');
      return `#${r}${g}${b}`;
    }
  } catch($e) {}
  return '#333333';
}

  function setToolbarFromElement(el) {
    if (!el) return;
  const cs = getComputedStyle(el);
    const ff = (cs.fontFamily || '').replace(/"/g,'').split(',')[0].trim();
    textFont.value = ff || 'Segoe UI';
    textSize.value = Math.round(parseFloat(cs.fontSize) || 16);
    textAlign.value = cs.textAlign || 'center';
    textColor.value = cssColorToHex(cs.color || '#333333');
    if (colorTile) { colorTile.style.backgroundColor = textColor.value; }
    textWidth.value = Math.round(el.getBoundingClientRect().width);
    const fw = cs.fontWeight + '';
    textBold.checked = (fw === '700' || fw.toLowerCase() === 'bold');
    textItalic.checked = (cs.fontStyle || '').toLowerCase() === 'italic';
    try {
      const lblB = textBold.closest('label');
      lblB && lblB.classList.toggle('ring-2', textBold.checked);
      lblB && lblB.classList.toggle('ring-yellow-500', textBold.checked);
      lblB && lblB.classList.toggle('border-yellow-500', textBold.checked);
    } catch($e) {}
    try {
      const lblI = textItalic.closest('label');
      lblI && lblI.classList.toggle('ring-2', textItalic.checked);
      lblI && lblI.classList.toggle('ring-yellow-500', textItalic.checked);
      lblI && lblI.classList.toggle('border-yellow-500', textItalic.checked);
    } catch($e) {}
    if ((textAlign.value || 'left') === 'left') trimLeadingWhitespace(el);
    textTargetLabel.textContent =
      el.classList.contains('card-title') ? 'Judul' :
      el.classList.contains('card-name') ? 'Nama' :
      el.classList.contains('card-email') ? 'Email' :
      el.classList.contains('card-phone') ? 'No HP' :
      el.classList.contains('card-gender') ? 'Jenis Kelamin' :
      el.classList.contains('card-job') ? 'Pekerjaan' :
      el.classList.contains('card-role') ? 'Jabatan' :
      el.classList.contains('card-address') ? 'Alamat' :
      (el.classList.contains('card-province') ? 'Provinsi' : 'Nomor Sertifikat');
  }

function selectElement(el) {
  textTargets.forEach(e => e.classList.remove('editable-selected'));
  currentEditableElement = el;
  if (el) {
    el.classList.add('editable-selected');
    setToolbarFromElement(el);
  }
}

function computeAlignedLeft(el, align) {
  const parent = document.querySelector('.card-content');
  if (!parent || !el) return (parseInt(el.style.left) || 0);
  const parentWidth = parent.clientWidth; // padding box width; absolute left=0 aligns to padding edge
  const elWidth = el.getBoundingClientRect().width;
  if (align === 'left') return 0;
  if (align === 'center') return Math.max(0, Math.round((parentWidth - elWidth) / 2));
  if (align === 'right') return Math.max(0, Math.round(parentWidth - elWidth));
  return (parseInt(el.style.left) || 0);
}

function adjustAlignLeftEl(el, align) {
  if (!el) return;
  if (align === 'center') {
    el.style.left = '50%';
    el.style.transform = 'translateX(-50%)';
  } else if (align === 'right') {
    el.style.left = '100%';
    el.style.transform = 'translateX(-100%)';
  } else {
    el.style.left = '0px';
    el.style.transform = 'none';
  }
}

function ensureFitHeight(el) {
  if (!el) return;
  el.style.height = 'auto';
}

function trimLeadingWhitespace(el) {
  if (!el) return;
  const text = el.textContent || '';
  const lines = text.split(/\r?\n/);
  const cleaned = lines.map(l => l.replace(/^[\s\u00A0\t]+/, '')).join('\n');
  if (cleaned !== text) el.textContent = cleaned;
}

function trimLeadingEmptyLines(el) {
  if (!el) return;
  const text = el.textContent || '';
  const cleaned = text.replace(/^(?:\s*\n)+/, '');
  if (cleaned !== text) el.textContent = cleaned;
}

textTargets.forEach(el => {
  el.addEventListener('click', () => selectElement(el));
  el.addEventListener('focus', () => selectElement(el));
});

// Delegasi klik di area Sertifikat agar elemen teks selalu bisa dipilih
const cardContentEl = document.querySelector('.card-content');
if (cardContentEl) {
  cardContentEl.addEventListener('click', function(e) {
    const el = e.target.closest('.card-title, .card-name, .card-email, .card-phone, .card-gender, .card-job, .card-role, .card-address, .card-province');
    if (el) { selectElement(el); }
  }, true);
}

// Pilih default judul saat halaman dibuka agar toolbar aktif
const firstTarget = document.querySelector('.card-title');
if (firstTarget) { selectElement(firstTarget); }

['.card-title', '.card-name', '.card-email', '.card-phone', '.card-gender', '.card-job', '.card-role', '.card-address', '.card-province'].forEach(sel => {
  const el = document.querySelector(sel);
  if (!el) return;
  el.style.textAlign = el.style.textAlign || 'center';
  el.style.marginLeft = '0px';
  el.style.textIndent = '0px';
  el.style.transform = 'none';
  ensureFitHeight(el);
  trimLeadingEmptyLines(el);
  ensureInsideCard(el);
});

  textFont.addEventListener('change', e => {
    if (!currentEditableElement) return;
    currentEditableElement.style.fontFamily = e.target.value;
    currentEditableElement.style.transform = 'none';
    ensureFitHeight(currentEditableElement);
  });
  textSize.addEventListener('input', e => {
    if (!currentEditableElement) return;
    currentEditableElement.style.fontSize = e.target.value + 'px';
    currentEditableElement.style.transform = 'none';
    ensureFitHeight(currentEditableElement);
  });
textAlign.addEventListener('change', e => {
  if (!currentEditableElement) return;
  currentEditableElement.style.textAlign = e.target.value;
  currentEditableElement.style.marginLeft = '0px';
  currentEditableElement.style.textIndent = '0px';
  if (e.target.value === 'left') trimLeadingWhitespace(currentEditableElement);
  currentEditableElement.style.transform = 'none';
  trimLeadingEmptyLines(currentEditableElement);
  ensureFitHeight(currentEditableElement);
});
textColor.addEventListener('input', e => {
  const val = e.target.value;
  const target = currentEditableElement || document.querySelector('.card-title');
  if (target) target.style.color = val;
  updateColorTile();
});
textColor.addEventListener('change', e => {
  if (!currentEditableElement) {
    const fallback = document.querySelector('.card-title');
    if (fallback) { fallback.style.color = e.target.value; }
  } else {
    currentEditableElement.style.color = e.target.value;
  }
  updateColorTile();
});
// Tile warna teks sekarang label untuk input#text-color, tidak perlu JS klik

function updateColorTile() {
  if (colorTile) { colorTile.style.backgroundColor = textColor.value; }
}
if (colorTile) {
  colorTile.addEventListener('click', () => {
    try { if (textColor && typeof textColor.showPicker === 'function') { textColor.showPicker(); return; } } catch($e) {}
    try { if (textColor) textColor.click(); } catch($e) {}
  });
}
  textBold.addEventListener('change', e => {
    if (!currentEditableElement) return;
    currentEditableElement.style.fontWeight = e.target.checked ? 'bold' : 'normal';
    currentEditableElement.style.transform = 'none';
    try {
      const lblB = textBold.closest('label');
      lblB && lblB.classList.toggle('ring-2', textBold.checked);
      lblB && lblB.classList.toggle('ring-yellow-500', textBold.checked);
      lblB && lblB.classList.toggle('border-yellow-500', textBold.checked);
    } catch($e) {}
    ensureFitHeight(currentEditableElement);
  });
  textItalic.addEventListener('change', e => {
    if (!currentEditableElement) return;
    currentEditableElement.style.fontStyle = e.target.checked ? 'italic' : 'normal';
    currentEditableElement.style.transform = 'none';
    try {
      const lblI = textItalic.closest('label');
      lblI && lblI.classList.toggle('ring-2', textItalic.checked);
      lblI && lblI.classList.toggle('ring-yellow-500', textItalic.checked);
      lblI && lblI.classList.toggle('border-yellow-500', textItalic.checked);
    } catch($e) {}
    ensureFitHeight(currentEditableElement);
  });
textWidth.addEventListener('input', e => {
  if (!currentEditableElement) return;
  const val = parseInt(e.target.value || 0);
  if (!val || val <= 0) {
    currentEditableElement.style.width = '';
  } else {
    const container = document.querySelector('.card-content');
    const maxWidth = container ? Math.round(container.clientWidth) : val;
    currentEditableElement.style.width = Math.min(val, maxWidth) + 'px';
  }
  currentEditableElement.style.marginLeft = '0px';
  if ((textAlign.value || 'left') === 'left') trimLeadingWhitespace(currentEditableElement);
  currentEditableElement.style.transform = 'none';
  ensureFitHeight(currentEditableElement);
});

const textFitBtn = document.getElementById('text-fit-btn');
  if (textFitBtn) {
    textFitBtn.addEventListener('click', () => {
      if (!currentEditableElement) return;
      currentEditableElement.style.width = 'max-content';
      currentEditableElement.style.marginLeft = '0px';
      currentEditableElement.style.transform = 'none';
      ensureFitHeight(currentEditableElement);
    });
  }

// DRAG & DROP SENSITIF DENGAN MOUSE EVENTS
(function() {
  const cardContent = document.querySelector('.card-content');
  let dragItem = null;
  let startX = 0, startY = 0, origX = 0, origY = 0;

  function onMouseDown(e) {
    // Cari elemen dengan class 'drag-item' (bisa target langsung atau parent-nya)
    let target = e.target;
    if (!target.classList.contains('drag-item')) {
      // Jika target tidak memiliki class 'drag-item', cari parent yang memiliki class tersebut
      target = target.closest('.drag-item');
      if (!target) return; // Jika tidak ditemukan, hentikan
    }
    dragItem = target;
    dragItem.classList.add('dragging');
    // Ambil posisi mouse dan posisi awal elemen
    const rect = dragItem.getBoundingClientRect();
    const parentRect = cardContent.getBoundingClientRect();
    startX = e.clientX;
    startY = e.clientY;
    origX = rect.left - parentRect.left;
    origY = rect.top - parentRect.top;
    // Nonaktifkan seleksi teks saat drag
    document.body.style.userSelect = 'none';
    window.addEventListener('mousemove', onMouseMove);
    window.addEventListener('mouseup', onMouseUp);
  }

  function onMouseMove(e) {
    if (!dragItem) return;
    const cardRect = cardContent.getBoundingClientRect();
    let dx = e.clientX - startX;
    let dy = e.clientY - startY;
    let left = origX + dx;
    let top = origY + dy;
    // Batasi area ke dalam kartu sertifikat saja
    const overflowX = 0;
    const overflowY = 0;
    left = Math.max(0 - overflowX, Math.min(left, cardRect.width - dragItem.offsetWidth + overflowX));
    top = Math.max(0 - overflowY, Math.min(top, cardRect.height - dragItem.offsetHeight + overflowY));
    dragItem.style.left = left + 'px';
    dragItem.style.top = top + 'px';
  }

  function onMouseUp(e) {
    if (dragItem) {
      dragItem.classList.remove('dragging');
      dragItem = null;
      document.body.style.userSelect = '';
    }
    window.removeEventListener('mousemove', onMouseMove);
    window.removeEventListener('mouseup', onMouseUp);
  }

  cardContent.addEventListener('mousedown', onMouseDown);
})();

// Pengaturan ukuran & bentuk foto
const photoSize = document.getElementById('photo-size');
const photoShape = document.getElementById('photo-shape');
const cardPhoto = document.querySelector('.card-photo');
const cardPhotoImg = cardPhoto ? cardPhoto.querySelector('img') : null;
let photoOverlay = cardPhoto ? cardPhoto.querySelector('.photo-overlay') : null;
if (cardPhoto && !photoOverlay) {
  photoOverlay = document.createElement('div');
  photoOverlay.className = 'photo-overlay';
  cardPhoto.appendChild(photoOverlay);
}
const photoOverlayColor = document.getElementById('photo-overlay-color');
const photoOverlayOpacity = document.getElementById('photo-overlay-opacity');
const photoOverlayTile = document.getElementById('photo-overlay-tile');
// Skala mengikuti ukuran Sertifikat
const CM_TO_PX = 37.8;
// Gunakan nilai default input sebagai ukuran dasar Sertifikat untuk perhitungan skala
const baseWidthCm = parseFloat((document.getElementById('card-width-cm')?.defaultValue) || 29.7);
const baseHeightCm = parseFloat((document.getElementById('card-height-cm')?.defaultValue) || 21.0);
const baseCardWidthPx = baseWidthCm * CM_TO_PX;
const baseCardHeightPx = baseHeightCm * CM_TO_PX;

function getCardScale() {
  const rect = document.querySelector('.yellow-card-3d');
  if (!rect) return { scaleX: 1, scaleY: 1, uniform: 1 };
  const currentW = parseFloat(getComputedStyle(rect).width);
  const currentH = parseFloat(getComputedStyle(rect).height);
  const scaleX = currentW / baseCardWidthPx;
  const scaleY = currentH / baseCardHeightPx;
  return { scaleX, scaleY, uniform: Math.min(scaleX, scaleY) };
}

// Rasio gambar asli (width/height) untuk menjaga proporsi pada bentuk kotak
let imgAspectRatio = 1.22; // fallback default
function refreshImgAspectRatio() {
  if (!cardPhotoImg) return;
  const nw = cardPhotoImg.naturalWidth;
  const nh = cardPhotoImg.naturalHeight;
  if (nw > 0 && nh > 0) {
    imgAspectRatio = nw / nh;
  }
}
// Perbarui rasio saat gambar selesai dimuat atau gagal
if (cardPhotoImg) {
  cardPhotoImg.addEventListener('load', () => { refreshImgAspectRatio(); if (photoSize) updatePhotoSize(photoSize.value); });
  cardPhotoImg.addEventListener('error', () => { imgAspectRatio = 1; if (photoSize) updatePhotoSize(photoSize.value); });
  // Inisialisasi awal jika gambar sudah cached/terload
  if (cardPhotoImg.complete) { refreshImgAspectRatio(); }
}

function updatePhotoSize(val) {
  if (!cardPhoto) return;
  const v = parseFloat(val);
  const scale = getCardScale();
  if (photoShape && photoShape.value === 'circle') {
    const s = v * scale.uniform; // lingkaran gunakan skala seragam
    cardPhoto.style.width = s + 'px';
    cardPhoto.style.height = s + 'px';
  } else {
    const widthPx = (v * scale.scaleX);
    const heightPx = widthPx / imgAspectRatio; // pertahankan rasio gambar yang diupload
    cardPhoto.style.width = widthPx + 'px';
    cardPhoto.style.height = heightPx + 'px';
  }
}
function updatePhotoShape(val) {
  if (!cardPhoto) return;
  if (val === 'circle') {
    cardPhoto.classList.add('circle-photo');
    cardPhoto.classList.remove('square-photo');
  } else {
    cardPhoto.classList.add('square-photo');
    cardPhoto.classList.remove('circle-photo');
  }
}
function hexToRgba(hex, alpha) {
  const m = (hex || '').match(/^#([\da-f]{3}|[\da-f]{6})$/i);
  if (!m) return `rgba(0,0,0,${alpha})`;
  let h = m[1];
  if (h.length === 3) h = h.split('').map(x => x + x).join('');
  const r = parseInt(h.slice(0,2), 16);
  const g = parseInt(h.slice(2,4), 16);
  const b = parseInt(h.slice(4,6), 16);
  return `rgba(${r},${g},${b},${alpha})`;
}
function updatePhotoOverlay(color, transparencyPercent) {
  if (!cardPhoto) return;
  const c = (typeof color !== 'undefined' && color !== null) ? color : (photoOverlayColor?.value || '#000000');
  const tRaw = (typeof transparencyPercent !== 'undefined' && transparencyPercent !== null) ? transparencyPercent : (photoOverlayOpacity?.value || 0);
  const t = Math.max(0, Math.min(100, parseInt(tRaw)));
  const alpha = t / 100; // 0 transparent, 1 solid
  const bg = (alpha <= 0) ? 'transparent' : hexToRgba(c, alpha);
  cardPhoto.style.backgroundColor = bg;
  if (photoOverlay) { photoOverlay.style.display = 'none'; }
}
function updatePhotoOverlayTile() {
  if (photoOverlayTile && photoOverlayColor) {
    photoOverlayTile.style.backgroundColor = photoOverlayColor.value;
  }
}
if (photoSize) {
  photoSize.addEventListener('input', e => {
    updatePhotoSize(e.target.value);
    if (photoShape) updatePhotoShape(photoShape.value);
    updatePhotoOverlay();
  });
}
if (photoShape) {
  photoShape.addEventListener('change', e => {
    updatePhotoShape(e.target.value);
    if (photoSize) updatePhotoSize(photoSize.value);
    updatePhotoOverlay();
  });
}
if (photoOverlayColor) photoOverlayColor.addEventListener('input', () => { updatePhotoOverlay(); updatePhotoOverlayTile(); });
if (photoOverlayColor) photoOverlayColor.addEventListener('change', () => { updatePhotoOverlay(); updatePhotoOverlayTile(); });
if (photoOverlayTile) {
  photoOverlayTile.addEventListener('click', () => {
    try { if (photoOverlayColor && typeof photoOverlayColor.showPicker === 'function') { photoOverlayColor.showPicker(); return; } } catch($e) {}
    try { if (photoOverlayColor) photoOverlayColor.click(); } catch($e) {}
  });
}
// Tile warna overlay foto adalah label untuk input#photo-overlay-color
if (photoOverlayOpacity) photoOverlayOpacity.addEventListener('input', () => updatePhotoOverlay());
// Inisialisasi default
if (photoSize) updatePhotoSize(photoSize.value);
if (photoShape) updatePhotoShape(photoShape.value);
updatePhotoOverlayTile();

// Pengaturan ukuran QR code
const qrSize = document.getElementById('qr-size');
const cardQrContainer = document.querySelector('.card-qr');
const cardQrImg = document.querySelector('.card-qr img');
function updateQrSize(val) {
  if (!cardQrImg || !cardQrContainer) return;
  const v = parseFloat(val);
  const scale = getCardScale();
  const s = Math.min(v * scale.scaleX, v * scale.scaleY); // pertahankan bentuk persegi
  // Update ukuran gambar QR code
  cardQrImg.style.width = s + 'px';
  cardQrImg.style.height = s + 'px';
  // Update ukuran container agar fit dengan QR code
  cardQrContainer.style.width = s + 'px';
  cardQrContainer.style.height = s + 'px';
  // Update ukuran di API QR code URL agar sesuai dengan setting
  const src = cardQrImg.getAttribute('src') || '';
  if (!/^data:/i.test(src)) {
    try {
      const qrUrl = new URL(src);
      qrUrl.searchParams.set('size', v + 'x' + v);
      cardQrImg.src = qrUrl.toString();
    } catch($e) {}
  }
  // Tampilkan ukuran aktual yang diterapkan
  const qrSizeActual = document.getElementById('qr-size-actual');
  if (qrSizeActual) {
    qrSizeActual.textContent = Math.round(s);
  }
}
if (qrSize) {
  qrSize.addEventListener('input', e => updateQrSize(e.target.value));
  // Inisialisasi default
  updateQrSize(qrSize.value);
}

// Pengaturan ukuran Sertifikat (cm)
const cardWidthCm = document.getElementById('card-width-cm');
const cardHeightCm = document.getElementById('card-height-cm');
const yellowCard = document.querySelector('.yellow-card-3d');
function updateCardSizeCm() {
  if (!yellowCard || !cardWidthCm || !cardHeightCm) return;
  // 1cm = 37.8px (standar CSS)
  const w = parseFloat(cardWidthCm.value) * 37.8;
  const h = parseFloat(cardHeightCm.value) * 37.8;
  yellowCard.style.width = w + 'px';
  yellowCard.style.height = h + 'px';
  // Saat ukuran Sertifikat berubah, skala foto & QR ikut menyesuaikan
  if (photoSize) updatePhotoSize(photoSize.value);
  if (qrSize) updateQrSize(qrSize.value);
}
if (cardWidthCm) cardWidthCm.addEventListener('input', updateCardSizeCm);
if (cardHeightCm) cardHeightCm.addEventListener('input', updateCardSizeCm);
// Inisialisasi default
updateCardSizeCm();

// Preset ukuran Sertifikat sesuai standar kertas
const cardSizePreset = document.getElementById('card-size-preset');
const cardSizeOrientation = document.getElementById('card-size-orientation');
const applyCardSizePresetBtn = document.getElementById('apply-card-size-preset');
function getPaperDimsCm(name) {
  const n = (name || '').toUpperCase();
  switch (n) {
    case 'A3': return [29.7, 42.0];
    case 'A4': return [21.0, 29.7];
    case 'A5': return [14.8, 21.0];
    case 'LETTER': return [21.59, 27.94];
    case 'LEGAL': return [21.59, 35.56];
    case 'F4': return [21.5, 33.0];
    default: return null;
  }
}
function applyCardPreset() {
  const preset = cardSizePreset ? cardSizePreset.value : '';
  const orient = cardSizeOrientation ? cardSizeOrientation.value : 'portrait';
  const dims = getPaperDimsCm(preset);
  if (!dims) return;
  const w = orient === 'landscape' ? dims[1] : dims[0];
  const h = orient === 'landscape' ? dims[0] : dims[1];
  if (cardWidthCm) cardWidthCm.value = w.toFixed(1);
  if (cardHeightCm) cardHeightCm.value = h.toFixed(1);
  updateCardSizeCm();
}
if (applyCardSizePresetBtn) applyCardSizePresetBtn.addEventListener('click', applyCardPreset);
if (cardSizePreset) cardSizePreset.addEventListener('change', applyCardPreset);
if (cardSizeOrientation) cardSizeOrientation.addEventListener('change', applyCardPreset);

const titleVisibleToggle = document.getElementById('title-visible');
if (titleVisibleToggle) {
  (function(){
    const el = document.querySelector('.card-title');
    if (el) {
      el.style.display = titleVisibleToggle.checked ? 'block' : 'none';
      ensureInsideCard(el);
      try { setToolbarFromElement(el); } catch($e) {}
    }
  })();
  titleVisibleToggle.addEventListener('change', function(){
    const el = document.querySelector('.card-title');
    if (el) {
      el.style.display = this.checked ? 'block' : 'none';
      if (this.checked) {
        const txt = (el.textContent || '').trim();
        if (!txt) {
          el.textContent = `${"{{ $activity->name ?? 'Sertifikat PESERTA' }}"}`;
        }
        if (!el.style.width || el.style.width === '0px') el.style.width = '100%';
        if (!el.style.fontSize || el.style.fontSize === '0px') el.style.fontSize = '18px';
        if (!el.style.textAlign) el.style.textAlign = 'center';
        el.style.opacity = '1';
        el.style.visibility = 'visible';
      }
      ensureInsideCard(el);
      try { setToolbarFromElement(el); } catch($e) {}
    }
    try {
      const raw = localStorage.getItem(LS_CARD_KEY);
      const ls = raw ? JSON.parse(raw) : {};
      ls.title = ls.title || {};
      ls.title.visible = !!this.checked;
      localStorage.setItem(LS_CARD_KEY, JSON.stringify(ls));
    } catch($e) {}
    try {
      if (typeof certificateSetting !== 'undefined' && certificateSetting) {
        certificateSetting.title = certificateSetting.title || {};
        certificateSetting.title.visible = !!this.checked;
      }
    } catch($e) {}
  });
}
const photoVisibleToggle = document.getElementById('photo-visible');
const certIdVisibleToggle = document.getElementById('certid-visible');
if (photoVisibleToggle) {
  (function(){
    const el = document.querySelector('.card-photo');
    if (el) {
      el.style.display = photoVisibleToggle.checked ? 'flex' : 'none';
      ensureInsideCard(el);
    }
  })();
  photoVisibleToggle.addEventListener('change', function(){
    const el = document.querySelector('.card-photo');
    if (el) {
      el.style.display = this.checked ? 'flex' : 'none';
      ensureInsideCard(el);
    }
    try {
      const raw = localStorage.getItem(LS_CARD_KEY);
      const ls = raw ? JSON.parse(raw) : {};
      ls.photo = ls.photo || {};
      ls.photo.visible = !!this.checked;
      localStorage.setItem(LS_CARD_KEY, JSON.stringify(ls));
    } catch($e) {}
    try {
      if (typeof certificateSetting !== 'undefined' && certificateSetting) {
        certificateSetting.photo = certificateSetting.photo || {};
        certificateSetting.photo.visible = !!this.checked;
      }
    } catch($e) {}
  });
}

if (certIdVisibleToggle) {
  (function(){
    const el = document.querySelector('.card-certid');
    if (el) {
      el.style.display = certIdVisibleToggle.checked ? 'block' : 'none';
      ensureInsideCard(el);
      try { setToolbarFromElement(el); } catch($e) {}
    }
  })();
  certIdVisibleToggle.addEventListener('change', function(){
    const el = document.querySelector('.card-certid');
    if (el) {
      el.style.display = this.checked ? 'block' : 'none';
      if (this.checked) {
        if (!el.style.width || el.style.width === '0px') el.style.width = '180px';
        if (!el.style.fontSize || el.style.fontSize === '0px') el.style.fontSize = '14px';
        if (!el.style.textAlign) el.style.textAlign = 'left';
        el.style.opacity = '1';
        el.style.visibility = 'visible';
      }
      ensureInsideCard(el);
      try { setToolbarFromElement(el); } catch($e) {}
    }
    try {
      const raw = localStorage.getItem(LS_CARD_KEY);
      const ls = raw ? JSON.parse(raw) : {};
      ls.certificate_id = ls.certificate_id || {};
      ls.certificate_id.visible = !!this.checked;
      localStorage.setItem(LS_CARD_KEY, JSON.stringify(ls));
    } catch($e) {}
    try {
      if (typeof certificateSetting !== 'undefined' && certificateSetting) {
        certificateSetting.certificate_id = certificateSetting.certificate_id || {};
        certificateSetting.certificate_id.visible = !!this.checked;
      }
    } catch($e) {}
  });
}

// Pengaturan background Sertifikat pakai thumbnail gambar (Blade-generated)
function setActiveBgThumb(selected) {
  document.querySelectorAll('.bg-thumb').forEach(img => img.style.boxShadow = '');
  selected.style.boxShadow = '0 0 0 3px #bfa100';
}
function bindBgThumbEvents(img) {
  img.addEventListener('click', function() {
    yellowCard.style.background = '';
    yellowCard.style.backgroundImage = `url('/assets/images/certificate/${img.dataset.bg}')`;
    yellowCard.style.backgroundSize = '100% 100%';
    yellowCard.style.backgroundPosition = 'center';
    yellowCard.style.backgroundRepeat = 'no-repeat';
    setActiveBgThumb(img);
  });
}
document.querySelectorAll('.bg-thumb').forEach(bindBgThumbEvents);
if(document.querySelectorAll('.bg-thumb').length > 0) setActiveBgThumb(document.querySelectorAll('.bg-thumb')[0]);

function bindBgDeleteEvents(btn) {
  btn.addEventListener('click', function(e) {
    e.stopPropagation();
    const filename = btn.dataset.bg;
    fetch("{{ url('/certificate-settings/background/delete') }}", {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'X-CSRF-TOKEN': (document.querySelector('meta[name="csrf-token"]') ? document.querySelector('meta[name="csrf-token"]').getAttribute('content') : '')
      },
      body: JSON.stringify({ filename }),
      credentials: 'same-origin'
    })
    .then(async res => {
      try { return await res.json(); } catch(e){ throw e; }
    })
  .then(data => {
      if (data.success) {
        const wrap = btn.closest('.relative');
        if (wrap) wrap.remove();
        const yc = document.querySelector('.yellow-card-3d');
        if (yc && (yc.style.backgroundImage||'').includes(filename)) {
          yc.style.background = '';
          yc.style.backgroundImage = '';
          yc.style.backgroundSize = '';
          yc.style.backgroundPosition = '';
          yc.style.backgroundRepeat = '';
        }
      } else {
        alert('Gagal menghapus: ' + (data.message || ''));
      }
    })
    .catch(err => {
      alert('Gagal menghapus: ' + (err.message || ''));
    });
  });
}
document.querySelectorAll('.bg-thumb-delete').forEach(bindBgDeleteEvents);

// tombol clear background dihapus

// Toggle tampil/sembunyi panel setting pakai tombol di bawah Sertifikat
const toggleBtn = document.getElementById('toggle-setting-btn');
const settingPanel = document.getElementById('card-settings');
if (toggleBtn) {
  toggleBtn.addEventListener('click', function() {
    if (settingPanel.style.display === 'none') {
      settingPanel.style.display = '';
      const participantsPanel = document.getElementById('participants-panel');
      if (participantsPanel) participantsPanel.style.display = 'none';
    } else {
      settingPanel.style.display = 'none';
      const participantsPanel = document.getElementById('participants-panel');
      if (participantsPanel) participantsPanel.style.display = '';
    }
  });
}
// Inisialisasi: panel tampil
settingPanel.style.display = 'none';
const participantsPanelInit = document.getElementById('participants-panel');
if (participantsPanelInit) participantsPanelInit.style.display = '';

// Tambah background custom (upload ke backend)
const bgUploadInput = document.getElementById('bg-upload-input');
bgUploadInput.addEventListener('change', function(e) {
  const file = e.target.files[0];
  if (!file) return;
  const formData = new FormData();
  formData.append('background_image', file);
  fetch("{{ url('/certificate-settings/background/upload') }}", {
    method: 'POST',
    headers: {
      'X-CSRF-TOKEN': (document.querySelector('meta[name="csrf-token"]') ? document.querySelector('meta[name="csrf-token"]').getAttribute('content') : '')
    },
    body: formData,
    credentials: 'same-origin'
  })
  .then(async res => {
    let data;
    try {
      data = await res.json();
    } catch (e) {
      // Tidak perlu await res.text() di sini
      throw e;
    }
    return data;
  })
        .then(data => {
          if (data.success) {
      // Cek apakah file benar-benar bisa diakses
      const testImg = new Image();
      testImg.onload = function() {
        const img = document.createElement('img');
        img.src = data.url;
        img.className = 'bg-thumb';
        img.style.width = '38px';
        img.style.height = '54px';
        img.style.borderRadius = '6px';
        img.style.border = '2px solid #ffe066';
        img.style.cursor = 'pointer';
        img.style.marginLeft = '4px';
        img.setAttribute('alt', 'Custom');
        img.setAttribute('data-bg', data.filename);
        bindBgThumbEvents(img);
        const wrap = document.createElement('div');
        wrap.className = 'relative inline-block mr-[4px]';
        wrap.appendChild(img);
        const del = document.createElement('button');
        del.type = 'button';
        del.className = 'bg-thumb-delete absolute -top-1 -right-1 w-5 h-5 rounded-full border-2 border-dashed border-red-500 bg-red-50 text-red-600 text-xs leading-none flex items-center justify-center';
        del.setAttribute('data-bg', data.filename);
        del.title = 'Hapus';
        del.textContent = '×';
        bindBgDeleteEvents(del);
        wrap.appendChild(del);
        const uploadLabel = document.getElementById('bg-upload-label');
        uploadLabel.parentNode.insertBefore(wrap, uploadLabel);
        // Pilih langsung setelah upload
        img.click();
      };
      testImg.onerror = function() {
        alert('File berhasil diupload, tapi tidak ditemukan di direktori. Cek permission folder public/assets/images/certificate!');
      };
      testImg.src = data.url;
    } else {
      alert('Upload gagal! ' + (data.message || ''));
    }
  })
  .catch(err => {
    throw err;
  });
  // Reset input agar bisa upload file yang sama lagi
  e.target.value = '';
});

// === SIMPAN SETTING Sertifikat KE DATABASE TANPA CSRF ===
const activityId = document.getElementById('activity-id').value;
const LS_CARD_KEY = `certificate_setting_${activityId}`;
const LS_PRINT_KEY = `print_settings_${activityId}`;
const saveBtn = document.getElementById('save-card-setting');
if (saveBtn) {
  saveBtn.addEventListener('click', function() {
      function getTextStyleEl(cls) {
        const el = document.querySelector(cls);
        if (!el) {
          return { color: '#333333', font: 'Segoe UI', size: 16, align: 'center', weight: 'normal', italic: 'normal', width: 0 };
        }
        const cs = getComputedStyle(el);
        const ff = (cs.fontFamily || '').replace(/"/g,'').split(',')[0].trim();
        return {
          color: (function(c){const m=c.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)/i);if(!m) return '#333333';const r=parseInt(m[1]).toString(16).padStart(2,'0');const g=parseInt(m[2]).toString(16).padStart(2,'0');const b=parseInt(m[3]).toString(16).padStart(2,'0');return `#${r}${g}${b}`;})(cs.color||'#333333'),
          font: ff || 'Segoe UI',
          size: Math.round(parseFloat(cs.fontSize)||16),
          align: cs.textAlign || 'center',
          weight: ((cs.fontWeight+'').toLowerCase()==='bold' || cs.fontWeight==='700') ? 'bold' : 'normal',
          italic: ((cs.fontStyle||'').toLowerCase()==='italic') ? 'italic' : 'normal',
          width: Math.round(el.getBoundingClientRect().width)
        };
      }
      const yellowCardRect = yellowCard ? yellowCard.getBoundingClientRect() : null;
      const cardContentRect = cardContentEl ? cardContentEl.getBoundingClientRect() : null;
      const cardSetting = {
        title: Object.assign(getTextStyleEl('.card-title'), getPosition('.card-title'), { visible: !!(document.getElementById('title-visible')?.checked) }),
        photo: {
          size: parseInt(photoSize.value),
          shape: photoShape.value,
          overlay_color: (document.getElementById('photo-overlay-color')?.value || null),
          overlay_opacity: parseInt(document.getElementById('photo-overlay-opacity')?.value || 0),
          ...getPosition('.card-photo'),
          visible: !!(document.getElementById('photo-visible')?.checked)
        },
        qr: {
          size: parseInt(qrSize.value), // Size asli dari input
          actual_size: Math.round((() => {
            const v = parseFloat(qrSize.value);
            const scale = getCardScale();
            return Math.min(v * scale.scaleX, v * scale.scaleY);
          })()), // Size aktual yang ditampilkan (sudah di-scale)
          ...getPosition('.card-qr')
        },
        card: {
          width_cm: parseFloat(cardWidthCm.value),
          height_cm: parseFloat(cardHeightCm.value),
          width_px: yellowCardRect ? Math.round(yellowCardRect.width) : null,
          height_px: yellowCardRect ? Math.round(yellowCardRect.height) : null,
          base_width_px: cardContentRect ? Math.round(cardContentRect.width) : null,
          base_height_px: cardContentRect ? Math.round(cardContentRect.height) : null,
          background: (function() {
            // Ambil nama file background dari style.backgroundImage
            const bg = yellowCard.style.backgroundImage;
            if (!bg) return null;
            const match = bg.match(/\/([^\/]+\.(png|jpg|jpeg|gif|webp))/i);
            return match ? match[1] : null;
          })()
        },
        certificate_id: (function(){const t=document.getElementById('certid-visible');return Object.assign(getTextStyleEl('.card-certid'), getPosition('.card-certid'), { visible: !!(t && t.checked) });})(),
        name: (function(){const t=document.querySelector('.profile-item-toggle[data-field="name"]');return Object.assign(getTextStyleEl('.card-name'), getPosition('.card-name'), { visible: !!(t && t.checked) });})(),
        email: (function(){const t=document.querySelector('.profile-item-toggle[data-field="email"]');return Object.assign(getTextStyleEl('.card-email'), getPosition('.card-email'), { visible: !!(t && t.checked) });})(),
        no_hp: (function(){const t=document.querySelector('.profile-item-toggle[data-field="no_hp"]');return Object.assign(getTextStyleEl('.card-phone'), getPosition('.card-phone'), { visible: !!(t && t.checked) });})(),
        jenis_kelamin: (function(){const t=document.querySelector('.profile-item-toggle[data-field="jenis_kelamin"]');return Object.assign(getTextStyleEl('.card-gender'), getPosition('.card-gender'), { visible: !!(t && t.checked) });})(),
        pekerjaan: (function(){const t=document.querySelector('.profile-item-toggle[data-field="pekerjaan"]');return Object.assign(getTextStyleEl('.card-job'), getPosition('.card-job'), { visible: !!(t && t.checked) });})(),
        jabatan: (function(){const t=document.querySelector('.profile-item-toggle[data-field="jabatan"]');return Object.assign(getTextStyleEl('.card-role'), getPosition('.card-role'), { visible: !!(t && t.checked) });})(),
        alamat: (function(){const t=document.querySelector('.profile-item-toggle[data-field="alamat"]');return Object.assign(getTextStyleEl('.card-address'), getPosition('.card-address'), { visible: !!(t && t.checked) });})(),
        province: (function(){const t=document.querySelector('.profile-item-toggle[data-field="province"]');return Object.assign(getTextStyleEl('.card-province'), getPosition('.card-province'), { visible: !!(t && t.checked) });})(),
        regency: (function(){const t=document.querySelector('.profile-item-toggle[data-field="regency"]');return Object.assign(getTextStyleEl('.card-regency'), getPosition('.card-regency'), { visible: !!(t && t.checked) });})(),
        district: (function(){const t=document.querySelector('.profile-item-toggle[data-field="district"]');return Object.assign(getTextStyleEl('.card-district'), getPosition('.card-district'), { visible: !!(t && t.checked) });})()
      };
      const formData = new FormData();
      formData.append('activity_id', activityId);
      formData.append('certificate_setting', JSON.stringify(cardSetting));
      (function(){
        const marginVal = parseFloat(document.getElementById('paper-margin')?.value || '0');
        const scaleToPaper = !!(document.getElementById('scale-to-paper')?.checked);
        const offsetTopMm = parseFloat(document.getElementById('offset-top-mm')?.value || '0');
        const offsetLeftMm = parseFloat(document.getElementById('offset-left-mm')?.value || '0');
        const sizeAdjustMm = parseFloat(document.getElementById('size-adjust-mm')?.value || '0');
        formData.append('print_settings', JSON.stringify({
          paper: document.getElementById('paper-size').value,
          orientation: document.getElementById('paper-orientation').value,
          cols: document.getElementById('cards-cols').value,
          rows: document.getElementById('cards-rows').value,
          margin: `${isNaN(marginVal) ? 0 : marginVal}cm`,
          scale_to_paper: scaleToPaper,
          offset_top_mm: isNaN(offsetTopMm) ? 0 : offsetTopMm,
          offset_left_mm: isNaN(offsetLeftMm) ? 0 : offsetLeftMm,
          size_adjust_mm: isNaN(sizeAdjustMm) ? 0 : sizeAdjustMm,
        }));
      })();
      // Tambahkan CSRF token
      const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
      if (csrfToken) formData.append('_token', csrfToken);
      fetch("{{ route('certificate-settings.save') }}", {
        method: 'POST',
        body: formData,
        credentials: 'same-origin',
        headers: {
          'Accept': 'application/json',
          'X-CSRF-TOKEN': (document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '')
        }
      })
      .then(async res => {
        if (!res.ok) {
          const text = await res.text().catch(() => '');
          throw new Error('Gagal menyimpan (HTTP ' + res.status + ') ' + text);
        }
        return res.json();
      })
      .then(data => {
        if (data.success) {
          // Terapkan ke form dan tampilan Sertifikat
          setPosition('.card-title', data.certificate_setting.title);
          updateStyle('.card-title', 'color', data.certificate_setting.title?.color);
          updateStyle('.card-title', 'fontFamily', data.certificate_setting.title?.font);
          updateStyle('.card-title', 'fontSize', data.certificate_setting.title?.size + 'px');
          updateStyle('.card-title', 'textAlign', data.certificate_setting.title?.align || 'center');
          updateStyle('.card-title', 'fontWeight', data.certificate_setting.title?.weight || 'bold');
          updateStyle('.card-title', 'fontStyle', data.certificate_setting.title?.italic || 'normal');
          updateStyle('.card-title', 'width', (data.certificate_setting.title?.width ? data.certificate_setting.title.width + 'px' : ''));
          updateStyle('.card-title', 'marginLeft', '0px');
          updateStyle('.card-title', 'transform', 'none');
          const tcb = document.getElementById('title-visible');
          if (tcb) tcb.checked = !!data.certificate_setting.title?.visible;
          const tel = document.querySelector('.card-title');
          if (tel) tel.style.display = (data.certificate_setting.title?.visible ? 'block' : 'none');
          // Foto
          setValueIfExists(photoSize, data.certificate_setting.photo?.size);
  setValueIfExists(photoShape, data.certificate_setting.photo?.shape);
  setPosition('.card-photo', data.certificate_setting.photo);
  updatePhotoSize(data.certificate_setting.photo?.size);
  updatePhotoShape(data.certificate_setting.photo?.shape);
  setValueIfExists(photoOverlayColor, data.certificate_setting.photo?.overlay_color);
  setValueIfExists(photoOverlayOpacity, data.certificate_setting.photo?.overlay_opacity);
  updatePhotoOverlay(data.certificate_setting.photo?.overlay_color, data.certificate_setting.photo?.overlay_opacity);
          const pcb = document.getElementById('photo-visible');
          if (pcb) pcb.checked = !!data.certificate_setting.photo?.visible;
          const pel = document.querySelector('.card-photo');
          if (pel) pel.style.display = (data.certificate_setting.photo?.visible ? 'flex' : 'none');
          // QR
          setValueIfExists(qrSize, data.certificate_setting.qr?.size);
          setPosition('.card-qr', data.certificate_setting.qr);
          updateQrSize(data.certificate_setting.qr?.size);
          // Sertifikat
          setValueIfExists(cardWidthCm, data.certificate_setting.card?.width_cm);
          setValueIfExists(cardHeightCm, data.certificate_setting.card?.height_cm);
          updateCardSizeCm();
          function applyTextSetting(sel, s){
            if (!s) return;
            setPosition(sel, s);
            updateStyle(sel, 'color', s.color);
            updateStyle(sel, 'fontFamily', s.font);
            updateStyle(sel, 'fontSize', (s.size ? s.size + 'px' : ''));
            updateStyle(sel, 'textAlign', (s.align || 'center'));
            updateStyle(sel, 'fontWeight', (s.weight || 'normal'));
            updateStyle(sel, 'fontStyle', (s.italic || 'normal'));
            updateStyle(sel, 'width', (s.width ? s.width + 'px' : ''));
            const el = document.querySelector(sel);
            if (el) el.style.display = s.visible ? 'block' : 'none';
            const field = Object.entries(profileFieldToCardClass).find(([,v])=>v===sel)?.[0];
            if (field) {
              const cb = document.querySelector(`.profile-item-toggle[data-field="${field}"]`);
              if (cb) cb.checked = !!s.visible;
            }
          }
          applyTextSetting('.card-certid', data.certificate_setting.certificate_id);
          applyTextSetting('.card-name', data.certificate_setting.name);
          applyTextSetting('.card-email', data.certificate_setting.email);
          applyTextSetting('.card-phone', data.certificate_setting.no_hp);
          applyTextSetting('.card-gender', data.certificate_setting.jenis_kelamin);
          applyTextSetting('.card-job', data.certificate_setting.pekerjaan);
          applyTextSetting('.card-role', data.certificate_setting.jabatan);
          applyTextSetting('.card-address', data.certificate_setting.alamat);
          applyTextSetting('.card-province', data.certificate_setting.province);
          applyTextSetting('.card-regency', data.certificate_setting.regency);
          applyTextSetting('.card-district', data.certificate_setting.district);
          // Background
          if (data.certificate_setting.card?.background) {
            yellowCard.style.background = '';
            yellowCard.style.backgroundImage = `url('/assets/images/certificate/${data.certificate_setting.card.background}')`;
            yellowCard.style.backgroundSize = '100% 100%';
            yellowCard.style.backgroundPosition = 'center';
            yellowCard.style.backgroundRepeat = 'no-repeat';
            // Pilih thumbnail jika ada
            document.querySelectorAll('.bg-thumb').forEach(img => {
              if (img.dataset.bg === data.certificate_setting.card.background) setActiveBgThumb(img);
            });
          }
          try {
            localStorage.setItem(LS_CARD_KEY, JSON.stringify(data.certificate_setting || certificateSetting || cardSetting));
            localStorage.setItem(LS_PRINT_KEY, JSON.stringify({
              paper: document.getElementById('paper-size').value,
              orientation: document.getElementById('paper-orientation').value,
              cols: document.getElementById('cards-cols').value,
              rows: document.getElementById('cards-rows').value,
            }));
          } catch($e) {}
          try {
            if (currentEditableElement) {
              setToolbarFromElement(currentEditableElement);
            } else {
              const el = document.querySelector('.card-title');
              if (el) setToolbarFromElement(el);
            }
          } catch($e) {}
          const settingPanelEl = document.getElementById('card-settings');
          const participantsPanelEl = document.getElementById('participants-panel');
          if (settingPanelEl) settingPanelEl.style.display = 'none';
          if (participantsPanelEl) participantsPanelEl.style.display = '';
          try { alert('Pengaturan Sertifikat berhasil disimpan.'); } catch($e) {}
        } else {
          alert('Gagal menyimpan: ' + (data.message || '')); 
        }
      })
      .catch(err => {
        try { alert('Gagal menyimpan pengaturan: ' + (err && err.message ? err.message : err)); } catch($e) {}
      });
  });
}

// Setelah semua deklarasi variabel input (misal setelah const cardWidthCm, cardHeightCm, yellowCard, dsb)
@if(isset($certificateSetting) && $certificateSetting)
  const certificateSetting = @json($certificateSetting);
  // Terapkan ke form dan tampilan Sertifikat
  setPosition('.card-title', certificateSetting.title);
  updateStyle('.card-title', 'color', certificateSetting.title?.color);
  updateStyle('.card-title', 'fontFamily', certificateSetting.title?.font);
  updateStyle('.card-title', 'fontSize', certificateSetting.title?.size + 'px');
  updateStyle('.card-title', 'textAlign', certificateSetting.title?.align || 'center');
  updateStyle('.card-title', 'fontWeight', certificateSetting.title?.weight || 'bold');
  updateStyle('.card-title', 'fontStyle', certificateSetting.title?.italic || 'normal');
  updateStyle('.card-title', 'width', (certificateSetting.title?.width ? certificateSetting.title.width + 'px' : ''));
  updateStyle('.card-title', 'marginLeft', '0px');
  updateStyle('.card-title', 'transform', 'none');
  updateStyle('.card-title', 'display', (certificateSetting.title?.visible ? 'block' : 'none'));
  const tcb2 = document.getElementById('title-visible');
  if (tcb2) tcb2.checked = !!certificateSetting.title?.visible;
  // Foto
  setValueIfExists(photoSize, certificateSetting.photo?.size);
  setValueIfExists(photoShape, certificateSetting.photo?.shape);
  setPosition('.card-photo', certificateSetting.photo);
  updatePhotoSize(certificateSetting.photo?.size);
  updatePhotoShape(certificateSetting.photo?.shape);
  setValueIfExists(photoOverlayColor, certificateSetting.photo?.overlay_color);
  setValueIfExists(photoOverlayOpacity, certificateSetting.photo?.overlay_opacity);
  updatePhotoOverlay(certificateSetting.photo?.overlay_color, certificateSetting.photo?.overlay_opacity);
  const pel2 = document.querySelector('.card-photo');
  if (pel2) pel2.style.display = (certificateSetting.photo?.visible ? 'flex' : 'none');
  const pcb2 = document.getElementById('photo-visible');
  if (pcb2) pcb2.checked = !!certificateSetting.photo?.visible;
  // QR
  setValueIfExists(qrSize, certificateSetting.qr?.size);
  setPosition('.card-qr', certificateSetting.qr);
  updateQrSize(certificateSetting.qr?.size);
  // Sertifikat
  setValueIfExists(cardWidthCm, certificateSetting.card?.width_cm);
  setValueIfExists(cardHeightCm, certificateSetting.card?.height_cm);
  updateCardSizeCm();
  // Background
  if (certificateSetting.card?.background) {
    yellowCard.style.background = '';
    yellowCard.style.backgroundImage = `url('/assets/images/certificate/${certificateSetting.card.background}')`;
    yellowCard.style.backgroundSize = '100% 100%';
    yellowCard.style.backgroundPosition = 'center';
    yellowCard.style.backgroundRepeat = 'no-repeat';
    // Pilih thumbnail jika ada
    document.querySelectorAll('.bg-thumb').forEach(img => {
      if (img.dataset.bg === certificateSetting.card.background) setActiveBgThumb(img);
    });
  }
  (function applyAllText(){
    function applyTextSetting(sel, s){
      if (!s) return;
      setPosition(sel, s);
      updateStyle(sel, 'color', s.color);
      updateStyle(sel, 'fontFamily', s.font);
      updateStyle(sel, 'fontSize', (s.size ? s.size + 'px' : ''));
      updateStyle(sel, 'textAlign', (s.align || 'center'));
      updateStyle(sel, 'fontWeight', (s.weight || 'normal'));
      updateStyle(sel, 'fontStyle', (s.italic || 'normal'));
      updateStyle(sel, 'width', (s.width ? s.width + 'px' : ''));
      const el = document.querySelector(sel);
      if (el) el.style.display = s.visible ? 'block' : 'none';
      const field = Object.entries(profileFieldToCardClass).find(([,v])=>v===sel)?.[0];
      if (field) {
        const cb = document.querySelector(`.profile-item-toggle[data-field="${field}"]`);
        if (cb) cb.checked = !!s.visible;
      }
    }
    applyTextSetting('.card-name', certificateSetting.name);
    applyTextSetting('.card-email', certificateSetting.email);
    applyTextSetting('.card-phone', certificateSetting.no_hp);
    applyTextSetting('.card-gender', certificateSetting.jenis_kelamin);
    applyTextSetting('.card-job', certificateSetting.pekerjaan);
    applyTextSetting('.card-role', certificateSetting.jabatan);
    applyTextSetting('.card-address', certificateSetting.alamat);
    applyTextSetting('.card-province', certificateSetting.province);
    applyTextSetting('.card-regency', certificateSetting.regency);
    applyTextSetting('.card-district', certificateSetting.district);
    applyTextSetting('.card-certid', certificateSetting.certificate_id);
  })();
  try {
    const el = document.querySelector('.card-title');
    if (el) setToolbarFromElement(el);
  } catch($e) {}
@endif

try {
  const lsCardRaw = localStorage.getItem(LS_CARD_KEY);
  if (lsCardRaw) {
    const lsCard = JSON.parse(lsCardRaw);
    setPosition('.card-title', lsCard.title);
    updateStyle('.card-title', 'color', lsCard.title?.color);
    updateStyle('.card-title', 'fontFamily', lsCard.title?.font);
    updateStyle('.card-title', 'fontSize', lsCard.title?.size + 'px');
    updateStyle('.card-title', 'textAlign', lsCard.title?.align || 'center');
    updateStyle('.card-title', 'fontWeight', lsCard.title?.weight || 'bold');
    updateStyle('.card-title', 'fontStyle', lsCard.title?.italic || 'normal');
    updateStyle('.card-title', 'width', (lsCard.title?.width ? lsCard.title.width + 'px' : ''));
    updateStyle('.card-title', 'marginLeft', '0px');
    updateStyle('.card-title', 'transform', 'none');
    setPosition('.card-photo', lsCard.photo);
    updatePhotoSize(lsCard.photo?.size);
    updatePhotoShape(lsCard.photo?.shape);
    setValueIfExists(photoOverlayColor, lsCard.photo?.overlay_color);
    setValueIfExists(photoOverlayOpacity, lsCard.photo?.overlay_opacity);
    updatePhotoOverlay(lsCard.photo?.overlay_color, lsCard.photo?.overlay_opacity);
    setPosition('.card-qr', lsCard.qr);
    updateStyle('.card-qr', 'transform', 'none');
    updateStyle('.card-qr', 'marginLeft', '0px');
    updateQrSize(lsCard.qr?.size);
    setValueIfExists(cardWidthCm, lsCard.card?.width_cm);
  setValueIfExists(cardHeightCm, lsCard.card?.height_cm);
  updateCardSizeCm();
  const tcb3 = document.getElementById('title-visible');
  if (tcb3) tcb3.checked = !!lsCard.title?.visible;
  const tel3 = document.querySelector('.card-title');
  if (tel3) tel3.style.display = (lsCard.title?.visible ? 'block' : 'none');
  const certcb3 = document.getElementById('certid-visible');
  if (certcb3 && lsCard.certificate_id) certcb3.checked = !!lsCard.certificate_id.visible;
  const certel3 = document.querySelector('.card-certid');
  if (certel3 && lsCard.certificate_id) certel3.style.display = (lsCard.certificate_id.visible ? 'block' : 'none');
  if (lsCard.card?.background) {
    yellowCard.style.background = '';
    yellowCard.style.backgroundImage = `url('/assets/images/certificate/${lsCard.card.background}')`;
    yellowCard.style.backgroundSize = '100% 100%';
    yellowCard.style.backgroundPosition = 'center';
    yellowCard.style.backgroundRepeat = 'no-repeat';
    document.querySelectorAll('.bg-thumb').forEach(img => {
      if (img.dataset.bg === lsCard.card.background) setActiveBgThumb(img);
    });
  }
  const pcb3 = document.getElementById('photo-visible');
  if (pcb3) pcb3.checked = !!lsCard.photo?.visible;
  const pel3 = document.querySelector('.card-photo');
  if (pel3) pel3.style.display = (lsCard.photo?.visible ? 'flex' : 'none');
    (function applyAllText(){
      function applyTextSetting(sel, s){
        if (!s) return;
        setPosition(sel, s);
        updateStyle(sel, 'color', s.color);
        updateStyle(sel, 'fontFamily', s.font);
        updateStyle(sel, 'fontSize', (s.size ? s.size + 'px' : ''));
        updateStyle(sel, 'textAlign', (s.align || 'center'));
        updateStyle(sel, 'fontWeight', (s.weight || 'normal'));
        updateStyle(sel, 'fontStyle', (s.italic || 'normal'));
        updateStyle(sel, 'width', (s.width ? s.width + 'px' : ''));
        const el = document.querySelector(sel);
        if (el) el.style.display = s.visible ? 'block' : 'none';
        const field = Object.entries(profileFieldToCardClass).find(([,v])=>v===sel)?.[0];
        if (field) {
          const cb = document.querySelector(`.profile-item-toggle[data-field="${field}"]`);
          if (cb) cb.checked = !!s.visible;
        }
      }
      applyTextSetting('.card-name', lsCard.name);
      applyTextSetting('.card-email', lsCard.email);
      applyTextSetting('.card-phone', lsCard.no_hp);
      applyTextSetting('.card-gender', lsCard.jenis_kelamin);
      applyTextSetting('.card-job', lsCard.pekerjaan);
      applyTextSetting('.card-role', lsCard.jabatan);
      applyTextSetting('.card-address', lsCard.alamat);
      applyTextSetting('.card-province', lsCard.province);
      applyTextSetting('.card-regency', lsCard.regency);
      applyTextSetting('.card-district', lsCard.district);
    })();
  }
  const lsPrintRaw = localStorage.getItem(LS_PRINT_KEY);
  if (lsPrintRaw) {
    const lsPrint = JSON.parse(lsPrintRaw);
    setValueIfExists(document.getElementById('paper-size'), lsPrint.paper);
    setValueIfExists(document.getElementById('paper-orientation'), lsPrint.orientation);
    setValueIfExists(document.getElementById('cards-cols'), lsPrint.cols);
    setValueIfExists(document.getElementById('cards-rows'), lsPrint.rows);
  }
} catch($e) {}

@if(isset($printSettings) && $printSettings)
  const printSettings = @json($printSettings);
  setValueIfExists(document.getElementById('paper-size'), printSettings.paper);
  setValueIfExists(document.getElementById('paper-orientation'), printSettings.orientation);
  setValueIfExists(document.getElementById('cards-cols'), printSettings.cols);
  setValueIfExists(document.getElementById('cards-rows'), printSettings.rows);
  if (document.getElementById('paper-margin')) {
    const m = (printSettings.margin || '0cm').replace('cm','');
    document.getElementById('paper-margin').value = parseFloat(m || '0');
  }
  const scaleToPaper = !!printSettings.scale_to_paper;
  if (document.getElementById('scale-to-paper')) document.getElementById('scale-to-paper').checked = scaleToPaper;
  if (document.getElementById('offset-top-mm')) document.getElementById('offset-top-mm').value = parseFloat(printSettings.offset_top_mm || 0);
  if (document.getElementById('offset-left-mm')) document.getElementById('offset-left-mm').value = parseFloat(printSettings.offset_left_mm || 0);
  if (document.getElementById('size-adjust-mm')) document.getElementById('size-adjust-mm').value = parseFloat(printSettings.size_adjust_mm || 0);
@endif

// Toggle Download Card Visibility (Hijau)
const downloadCardToggleButton = document.getElementById('download-card-visibility-toggle-btn');
if (downloadCardToggleButton) {
    downloadCardToggleButton.addEventListener('click', function(e) {
        e.preventDefault();
        e.stopPropagation();
        
        const activityId = this.dataset.activityId;
        const eyeIcon = document.getElementById('download-card-eye-icon');
        const currentStatus = this.dataset.visible === '1';
        const newStatus = !currentStatus;

        // Update UI immediately untuk feedback visual
        eyeIcon.innerHTML = newStatus ? '👁️' : '🙈';
        this.style.background = newStatus ? '#10b981' : '#888';
        this.title = (newStatus ? 'Nonaktifkan' : 'Aktifkan') + ' Lihat Sertifikat';
        this.dataset.visible = newStatus ? '1' : '0';

        const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
        fetch(`/activity/${activityId}/toggle-download-card-visibility`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'Accept': 'application/json',
                'X-CSRF-TOKEN': csrfToken || ''
            },
            credentials: 'same-origin',
            body: JSON.stringify({
                visible: newStatus
            })
        })
        .then(response => {
            if (!response.ok) {
                throw new Error('Network response was not ok');
            }
            return response.json();
        })
        .then(data => {
            if (data.success) {
                // UI sudah diupdate di atas, hanya konfirmasi
            } else {
                // Revert perubahan jika gagal
                eyeIcon.innerHTML = currentStatus ? '👁️' : '🙈';
                this.style.background = currentStatus ? '#10b981' : '#888';
                this.title = (currentStatus ? 'Nonaktifkan' : 'Aktifkan') + ' Lihat Sertifikat';
                this.dataset.visible = currentStatus ? '1' : '0';
                alert('Gagal mengubah status: ' + (data.message || 'Error tidak diketahui'));
            }
        })
        .catch(error => {
            
            // Revert perubahan jika error
            eyeIcon.innerHTML = currentStatus ? '👁️' : '🙈';
            this.style.background = currentStatus ? '#10b981' : '#888';
            this.title = (currentStatus ? 'Nonaktifkan' : 'Aktifkan') + ' Lihat Sertifikat';
            this.dataset.visible = currentStatus ? '1' : '0';
            alert('Terjadi kesalahan koneksi.');
        });
    });
}
}); // Akhir DOMContentLoaded
</script>

</div>
@endsection

@push('styles')
<style>
.setting-panel {
  background: #fffbe7;
  border-radius: 16px;
  box-shadow: 0 4px 24px rgba(191, 161, 0, 0.10), 0 1.5px 4px 0 rgba(255, 215, 0, 0.10);
  padding: 24px 24px 16px 24px;
  min-width: 270px;
  max-width: none;
  margin-top: 30px;
  font-family: 'Segoe UI', Arial, sans-serif;
  display: flex;
  flex-direction: column;
  gap: 18px;
  border: 1.5px solid #ffe066;
  transition: box-shadow 0.2s;
}

/* Versi kompak untuk modal pengaturan cetak */
.modal-content.setting-panel {
  max-width: 520px;
  width: 100%;
  margin-top: 0;
}
.setting-compact > * + * { margin-top: 2px !important; }
#card-settings .group-card > * + * { margin-top: 2px !important; }
.setting-panel h3 {
  font-size: 1.08rem;
  color: #bfa100;
  margin-bottom: 8px;
  font-weight: bold;
  letter-spacing: 0.5px;
  text-align: left;
}
.setting-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 2px;
}
.setting-group label {
  font-size: 0.98rem;
  color: #bfa100;
  font-weight: 500;
  margin-bottom: 2px;
}
.setting-row {
  display: flex;
  flex-direction: row;
  gap: 8px;
  align-items: center;
}
.setting-row input[type="color"] {
  border: none;
  width: 28px;
  height: 28px;
  background: none;
  cursor: pointer;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(191, 161, 0, 0.08);
}
.setting-row select, .setting-row input[type="number"] {
  border-radius: 6px;
  border: 1px solid #ffe066;
  padding: 3px 7px;
  font-size: 0.97rem;
  background: #fff;
  transition: border 0.2s;
}
.setting-row select:focus, .setting-row input[type="number"]:focus {
  outline: none;
  border: 1.5px solid #bfa100;
}

.yellow-card-3d {
  width: 260px;
  height: 400px;
  background: url('{{ asset('assets/images/certificate/default-certificate.png') }}') center center / 100% 100% no-repeat;
  border-radius: 20px;
  box-shadow:
    0 8px 24px 0 rgba(0,0,0,0.18),
    0 1.5px 4px 0 rgba(255, 215, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s cubic-bezier(.25,.8,.25,1), box-shadow 0.2s;
  border: 2px solid #fff9c4;
  /* 3D effect */
  perspective: 800px;
  position: relative;
  overflow: hidden;
}
.card-content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 24px 16px 16px 16px;
  box-sizing: border-box;
  /* background: rgba(255,255,255,0.70); */
  border-radius: 18px;
  position: relative;
}
.card-title {
  width: 100%;
  display: block;
  /* Izinkan teks melewati lebar Sertifikat dan tetap menghormati Enter */
  white-space: pre-wrap;          /* pertahankan line break dari input */
  overflow-wrap: anywhere;        /* patahkan kata panjang agar tidak overflow */
  word-break: break-word;         /* fallback untuk beberapa browser */
  line-height: 1.2;               /* sedikit rapat agar multi-baris rapi */
  pointer-events: auto !important;
  cursor: text;
  padding: 0;
  margin-left: 0;
  text-indent: 0;
}
.editable-selected { outline: 2px dashed #93c5fd; outline-offset: 2px; border-radius: 6px; }
.bg-thumb { width: 38px; height: 54px; object-fit: cover; border-radius: 6px; border: 2px solid #ffe066; cursor: pointer; }
.card-title {
  font-size: 1.1rem;
  font-weight: bold;
  color: #bfa100;
  margin-bottom: 10px;
  letter-spacing: 1px;
  text-align: left;
  font-family: 'Segoe UI', Arial, sans-serif;
}
.card-photo {
  width: 90px;
  height: 110px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.10);
  margin-bottom: 12px;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}
.card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}
.photo-overlay { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; border-radius: inherit; display: none; }
/* CSS untuk QR code - memastikan drag-and-drop berfungsi dan ukuran fit */
.card-qr {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
.card-qr img {
  pointer-events: none; /* Biarkan event mouse mencapai parent .drag-item */
  aspect-ratio: 1 / 1; /* Pastikan tetap persegi/kotak */
  object-fit: contain;
  display: block;
  margin: 0;
  padding: 0;
}
.yellow-card-3d:hover {
  transform: rotateY(8deg) scale(1.04);
  box-shadow:
    0 16px 48px 0 rgba(0,0,0,0.22),
    0 3px 8px 0 rgba(255, 215, 0, 0.4);
}
.drag-item.dragging {
  opacity: 0.7;
  box-shadow: 0 0 8px #bfa100;
  /* Nonaktifkan pointer event pada child saat drag agar tidak mengganggu */
  pointer-events: none;
}
.card-photo img {
  pointer-events: none;
}
.card-photo img { object-fit: contain; }
.card-photo { z-index: 2; }
.card-title { z-index: 3; }
/* Profile list on card */
/* Profile list on card */
.circle-photo {
  border-radius: 50% !important;
  overflow: hidden;
}
.square-photo {
  border-radius: 12px !important;
  overflow: hidden;
}
#toggle-setting-btn {
  /* Hapus posisi fixed, gunakan margin auto agar di bawah Sertifikat dan center */
}
.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1050;
}
.modal-content {
  background: #fffbe7;
  padding: 24px;
  border-radius: 16px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
  min-width: 320px;
  max-width: 520px;
  width: 100%;
}
#editModeToolbar { display: none !important; }
</style>
@endpush