@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;">
  <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 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>

  <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
        @php $titleVisible = data_get($certificateSetting ?? [], 'title.visible', true); @endphp
        @if($titleVisible)
        <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>
        @endif
        <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>
        @php $photoVisible = data_get($certificateSetting ?? [], 'photo.visible', true); @endphp
        @if($photoVisible)
        <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>
        @endif
        <div class="card-qr drag-item" style="position:absolute; top:320px; left:90px; cursor:move;">
          @php
            $qrData = $currentCertificateId ?? Auth::user()->id;
            try {
              $qrPng = \SimpleSoftwareIO\QrCode\Facades\QrCode::format('png')->size(80)->generate((string) $qrData);
              $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) $qrData);
            }
          @endphp
          <img src="{{ $qrBase64 }}" alt="QR Code">
        </div>
      </div>
    </div>
    <div class="flex justify-center items-center gap-3 mt-6 flex-nowrap" id="card-menubar">
      @php
        $user = auth()->user();
        $isSuperAdmin = $user->role === 'superadmin';
        $isAdmin = $user->role === 'admin';
        $creator = $activity->user ?? \App\Models\User::find($activity->user_id);
        $creatorHasCards = method_exists($activity, 'creatorHasFeature') ? $activity->creatorHasFeature('digital_cards') : false;
        $isActivityOwner = method_exists($user, 'isCreator') ? ($user->isCreator() && $activity->user_id === $user->id) : false;
        $isCommitteeMember = method_exists($activity, 'canManageRegistration') ? $activity->canManageRegistration($user->id) : false;
        $shouldShowButtons = $isSuperAdmin 
            || ($isAdmin && $canAdminViewButtons)
            || ($creatorHasCards && ($isActivityOwner || $isCommitteeMember));
      @endphp
      @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
      @if($isSuperAdmin)
        <button id="visibility-toggle-btn"
            data-activity-id="{{ $activity->id }}"
            title="Toggle Izin untuk Admin"
            type="button"
            style="background:{{ $canAdminViewButtons ? '#bfa100' : '#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="eye-icon">{!! $canAdminViewButtons ? '👁️' : '🙈' !!}</span>
        </button>
      @endif
    </div>
    @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>

  <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;">
          @php
            $u = auth()->user();
            $p = optional($u->profile);
            $provinceName = optional($p->province)->name ?? ($p->other_province ?? 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
          </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">
          <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">
          <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>
          </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="8.6" min="5" max="20" 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="15" min="3" max="15" 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>
      <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>

<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="A4" selected>A4</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="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>

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

<script>
document.addEventListener('DOMContentLoaded', function() {
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'; }); }
const menubar = document.getElementById('card-menubar');
const toggleMenubarBtn = document.getElementById('card-menubar-toggle');
if (menubar && toggleMenubarBtn) { toggleMenubarBtn.addEventListener('click', () => { menubar.classList.toggle('hidden'); toggleMenubarBtn.classList.toggle('ring-2'); toggleMenubarBtn.classList.toggle('ring-yellow-500'); }); }
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' };
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'; }); }
if (printModal) { printModal.addEventListener('click', (event) => { if (event.target === printModal) { printModal.style.display = 'none'; } }); }
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 => { if (row.querySelectorAll('td').length > 1) { const rowText = row.textContent.toLowerCase(); if (rowText.includes(searchTerm)) { row.style.display = ''; } else { row.style.display = 'none'; } } }); }); }
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; }); }); }
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; } const printUrl = `/activity/{{$activity->id}}/print-certificates-html?users=${selectedIds.join(',')}`; window.open(printUrl, '_blank'); }); }
function updateStyle(className, prop, value) { document.querySelectorAll(className).forEach(el => { el.style[prop] = value; }); }
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 }; }
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'; }
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');
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' : 'Provinsi'; }
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; 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)); });
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); }
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(); });
function updateColorTile() { const tile = document.getElementById('color-tile'); const input = document.getElementById('text-color'); if (tile && input) { tile.style.backgroundColor = input.value; } }
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 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');
const CM_TO_PX = 37.8;
const baseWidthCm = parseFloat((document.getElementById('card-width-cm')?.defaultValue) || 8.6);
const baseHeightCm = parseFloat((document.getElementById('card-height-cm')?.defaultValue) || 15);
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) }; }
let imgAspectRatio = 1.22;
function refreshImgAspectRatio() { if (!cardPhotoImg) return; const nw = cardPhotoImg.naturalWidth; const nh = cardPhotoImg.naturalHeight; if (nw > 0 && nh > 0) { imgAspectRatio = nw / nh; } }
if (cardPhotoImg) { cardPhotoImg.addEventListener('load', () => { refreshImgAspectRatio(); updatePhotoSize(photoSize.value); }); cardPhotoImg.addEventListener('error', () => { imgAspectRatio = 1; updatePhotoSize(photoSize.value); }); if (cardPhotoImg.complete) { refreshImgAspectRatio(); } }
function updatePhotoSize(val) { const v = parseFloat(val); const scale = getCardScale(); if (photoShape.value === 'circle') { const s = v * scale.uniform; cardPhoto.style.width = s + 'px'; cardPhoto.style.height = s + 'px'; } else { const widthPx = (v * scale.scaleX); const heightPx = widthPx / imgAspectRatio; cardPhoto.style.width = widthPx + 'px'; cardPhoto.style.height = heightPx + 'px'; } }
function updatePhotoShape(val) { 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) { 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; 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); updatePhotoShape(photoShape.value); updatePhotoOverlay(); });
if (photoShape) photoShape.addEventListener('change', e => { updatePhotoShape(e.target.value); 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) {} }); }
if (photoOverlayOpacity) photoOverlayOpacity.addEventListener('input', () => updatePhotoOverlay());
updatePhotoSize(document.getElementById('photo-size').value);
updatePhotoShape(document.getElementById('photo-shape').value);
updatePhotoOverlayTile();
const qrSize = document.getElementById('qr-size');
const cardQrImg = document.querySelector('.card-qr img');
function updateQrSize(val) { const v = parseFloat(val); const scale = getCardScale(); const s = Math.min(v * scale.scaleX, v * scale.scaleY); cardQrImg.style.width = s + 'px'; cardQrImg.style.height = s + 'px'; }
if (qrSize) qrSize.addEventListener('input', e => updateQrSize(e.target.value));
updateQrSize(document.getElementById('qr-size').value);
const cardWidthCm = document.getElementById('card-width-cm');
const cardHeightCm = document.getElementById('card-height-cm');
const yellowCard = document.querySelector('.yellow-card-3d');
function updateCardSizeCm() { const w = parseFloat(cardWidthCm.value) * 37.8; const h = parseFloat(cardHeightCm.value) * 37.8; yellowCard.style.width = w + 'px'; yellowCard.style.height = h + 'px'; updatePhotoSize(document.getElementById('photo-size').value); updateQrSize(document.getElementById('qr-size').value); }
if (cardWidthCm) cardWidthCm.addEventListener('input', updateCardSizeCm);
if (cardHeightCm) cardHeightCm.addEventListener('input', updateCardSizeCm);
updateCardSizeCm();
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');
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) {} }); }
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 = 'none'; } }); }
settingPanel.style.display = 'none';
const participantsPanelInit = document.getElementById('participants-panel');
if (participantsPanelInit) participantsPanelInit.style.display = 'none';
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"]').getAttribute('content') || '') }, body: formData, credentials: 'same-origin' }).then(async res => { let data; try { data = await res.json(); } catch (e) { throw e; } return data; }).then(data => { if (data.success) { 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); 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; }); e.target.value = ''; });
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() { const yellowCardEl = document.querySelector('.yellow-card-3d'); yellowCardEl.style.background = ''; yellowCardEl.style.backgroundImage = `url('/assets/images/certificate/${img.dataset.bg}')`; yellowCardEl.style.backgroundSize = '100% 100%'; yellowCardEl.style.backgroundPosition = 'center'; yellowCardEl.style.backgroundRepeat = 'no-repeat'; setActiveBgThumb(img); }); }
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"]').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').forEach(bindBgThumbEvents);
if(document.querySelectorAll('.bg-thumb').length > 0) setActiveBgThumb(document.querySelectorAll('.bg-thumb')[0]);
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); 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 = document.querySelector('.yellow-card-3d') ? document.querySelector('.yellow-card-3d').getBoundingClientRect() : null;
  const cardContentRect = document.querySelector('.card-content') ? document.querySelector('.card-content').getBoundingClientRect() : null;
  const cardSetting = { title: Object.assign(getTextStyleEl('.card-title'), getPosition('.card-title'), { visible: !!(document.getElementById('title-visible')?.checked) }), photo: { size: parseInt(document.getElementById('photo-size').value), shape: document.getElementById('photo-shape').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(document.getElementById('qr-size').value), ...getPosition('.card-qr') }, card: { width_cm: parseFloat(document.getElementById('card-width-cm').value), height_cm: parseFloat(document.getElementById('card-height-cm').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() { 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: (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) });})() };
  const formData = new FormData();
  formData.append('activity_id', activityId);
  formData.append('certificate_setting', JSON.stringify(cardSetting));
  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 }));
  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) { 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'); 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'); setValueIfExists(qrSize, data.certificate_setting.qr?.size); setPosition('.card-qr', data.certificate_setting.qr); updateQrSize(data.certificate_setting.qr?.size); 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-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); if (data.certificate_setting.card?.background) { const yc2 = document.querySelector('.yellow-card-3d'); yc2.style.background = ''; yc2.style.backgroundImage = `url('/assets/images/certificate/${data.certificate_setting.card.background}')`; yc2.style.backgroundSize = '100% 100%'; yc2.style.backgroundPosition = 'center'; yc2.style.backgroundRepeat = 'no-repeat'; 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) {}
          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) {} }); }); }
const toggleButton = document.getElementById('visibility-toggle-btn');
if (toggleButton) { toggleButton.addEventListener('click', function() { const activityId = this.dataset.activityId; const eyeIcon = document.getElementById('eye-icon'); const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content'); fetch(`/activity/${activityId}/toggle-card-visibility`, { method: 'POST', headers: { 'Content-Type': 'application/json', 'Accept': 'application/json', 'X-CSRF-TOKEN': csrfToken || '' }, credentials: 'same-origin' }).then(response => response.json()).then(data => { if (data.success) { const canView = data.new_status; eyeIcon.innerHTML = canView ? '👁️' : '🙈'; this.style.background = canView ? '#bfa100' : '#888'; } else { alert('Gagal mengubah izin: ' + (data.message || 'Error tidak diketahui')); } }).catch(error => { alert('Terjadi kesalahan koneksi.'); }); }); }
@if(isset($certificateSetting) && $certificateSetting)
  const certificateSetting = @json($certificateSetting);
  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;
  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;
  setValueIfExists(qrSize, certificateSetting.qr?.size);
  setPosition('.card-qr', certificateSetting.qr);
  updateQrSize(certificateSetting.qr?.size);
  setValueIfExists(cardWidthCm, certificateSetting.card?.width_cm);
  setValueIfExists(cardHeightCm, certificateSetting.card?.height_cm);
  updateCardSizeCm();
  if (certificateSetting.card?.background) { const yc3 = document.querySelector('.yellow-card-3d'); yc3.style.background = ''; yc3.style.backgroundImage = `url('/assets/images/certificate/${certificateSetting.card.background}')`; yc3.style.backgroundSize = '100% 100%'; yc3.style.backgroundPosition = 'center'; yc3.style.backgroundRepeat = 'no-repeat'; 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); })();
  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); 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'); if (lsCard.card?.background) { const yc4 = document.querySelector('.yellow-card-3d'); yc4.style.background = ''; yc4.style.backgroundImage = `url('/assets/images/certificate/${lsCard.card.background}')`; yc4.style.backgroundSize = '100% 100%'; yc4.style.backgroundPosition = 'center'; yc4.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); })(); } 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);
@endif
});
</script>

@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}
.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;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;border-radius:18px;position:relative}
.card-title{width:100%;display:block;white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word;line-height:1.2;pointer-events:auto !important;cursor:text;padding:0;margin-left:0;text-indent:0}
.editable-selected{outline:none !important}
.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}
.card-qr{margin-top:auto;display:flex;flex-direction:column;align-items:center}
.card-qr img{width:80px;height:80px;background:#fff;padding:4px;border-radius:8px;box-shadow:0 1px 4px rgba(0,0,0,0.08)}
.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;pointer-events:none}
.card-photo img,.card-qr img{pointer-events:none}
.card-photo { z-index: 2; }
.card-title { z-index: 3; }
.circle-photo{border-radius:50% !important;overflow:hidden}
.square-photo{border-radius:12px !important;overflow:hidden}
.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}
#editModeToolbar{display:none !important}
.drag-item,.card-title,.card-name,.card-email,.card-phone,.card-gender,.card-job,.card-role,.card-address,.card-province,.card-photo,.card-qr,.yellow-card-3d,.card-content{user-select:none !important;-webkit-user-select:none !important;-moz-user-select:none !important;-ms-user-select:none !important;pointer-events:auto !important;outline:none !important;border:none !important;box-shadow:none !important}
.drag-item:focus,.card-title:focus,.card-name:focus,.card-email:focus,.card-phone:focus,.card-gender:focus,.card-job:focus,.card-role:focus,.card-address:focus,.card-province:focus{outline:none !important;border:none !important;box-shadow:none !important}
.editable-selected{outline:none !important;border:none !important;box-shadow:none !important}
</style>
@endpush

@endsection