@extends('layouts.main')

@section('content')
<style>
  .printcards-layout{display:flex;flex-direction:column;align-items:flex-start;gap:12px;max-width:1280px;margin:0 auto}
  @media(min-width:992px){
    .printcards-layout{flex-direction:row;flex-wrap:nowrap;align-items:flex-start}
    #participants-panel{flex:0 0 880px;max-width:920px;margin-top:0}
    #printcards-right{flex:1 1 auto;min-width:0}
  }
  #card-settings{position:sticky;top:1rem;z-index:1}
  .yellow-card-3d,.card-content{position:relative;z-index:2}
  .card-photo{overflow:hidden;}
  .card-photo img{width:100%;height:100%;object-fit:cover;}
  .circle-photo img{border-radius:50%;}
  .square-photo img{border-radius:0;}
</style>
<div class="printcards-layout min-h-screen bg-[#fafafa] px-3 w-full">
  <!-- TABEL PESERTA - KIRI -->
  <div id="participants-panel" class="w-full md:w-auto md:flex-none md:min-w-[880px] md:max-w-[920px] md:order-1 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 md:mt-0 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 Anggota</h3>
    <div style="margin-bottom: 12px;">
        <input type="text" id="anggota-search" name="anggota_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="anggota-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-anggota" name="select_all" aria-label="Pilih semua anggota" 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;">No. Anggota</th>
            <th style="padding:7px 8px; text-align:left;">Provinsi</th>
          </tr>
        </thead>
        <tbody>
          @forelse($keanggotaan as $i => $anggota)
            <tr style="border-bottom:1px solid #ffe066;">
              <td style="padding:6px 8px; text-align:center;"><input type="checkbox" class="anggota-checkbox" name="anggota_ids[]" aria-label="Pilih anggota" data-anggota-id="{{ $anggota->user->id }}"></td>
              <td style="padding:6px 8px; text-align:center;">{{ $i+1 }}</td>
              <td style="padding:6px 8px;">{{ $anggota->user->name ?? '-' }}</td>
              <td style="padding:6px 8px;">{{ $anggota->nomor_anggota ?? '-' }}</td>
              <td style="padding:6px 8px;">{{ $anggota->user->profile->province->name ?? ($anggota->user->profile->other_province ?? '-') }}</td>
            </tr>
          @empty
            <tr><td colspan="5" style="text-align:center; color:#bfa100; padding:12px;">Belum ada anggota</td></tr>
          @endforelse
        </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 Kartu Terpilih
        </button>
        <button id="preview-pdf-btn" style="background:#6b7280; 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);">
            Lihat Preview
        </button>
    </div>
  </div>
  <!-- END TABEL PESERTA -->
  <!-- KARTU - KANAN -->
  <div id="printcards-right" class="w-full md:flex-1 md:order-2 md:flex md:flex-row md:items-start md:gap-4">
  <div id="card-column" class="w-full md:w-[420px]">
    <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);
          $regencyCard = optional($pCard->regency)->name ?? ($pCard->other_regency ?? null);
          $districtCard = optional($pCard->district)->name ?? ($pCard->other_district ?? null);
        @endphp
        <div class="card-title drag-item" data-edit-key="anggota-card-title" tabindex="0" contenteditable="true" style="position:absolute; top:20px; left:0px; width:100%; text-align:center; cursor:text;">
          {{ data_get($cardSetting, 'title.text', 'KARTU ANGGOTA') }}
        </div>
        <div class="card-name drag-item" tabindex="0" contenteditable="true" style="position:absolute; top:190px; left:30px; cursor:move; display:none;">
          {{ $uCard->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-photo drag-item" style="position:absolute; top:120px; left:50%; transform:translateX(-50%); cursor:default;">
          @if($pCard && $pCard->foto)
            <img src="{{ asset('assets/images/profilefoto/' . $pCard->foto) }}" alt="{{ $uCard->name }}" class="user-profile-image" onerror="this.src='{{ asset('assets/images/profilefoto/default-profile.png') }}'">
          @else
            <img src="{{ asset('assets/images/profilefoto/default-profile.png') }}" alt="Default photo" class="user-profile-image">
          @endif
        </div>
        <div class="card-qr drag-item" style="position:absolute; top:235px; left:50%; transform:translateX(-50%); cursor:default;">
          @php
            $anggotaCard = $uCard->keanggotaan ?? null;
            // Prioritaskan nomor anggota, jika tidak ada baru gunakan ID
            $qrData = !empty($anggotaCard->nomor_anggota) ? $anggotaCard->nomor_anggota : ($uCard->id ?? '');
            $qrSvg = \SimpleSoftwareIO\QrCode\Facades\QrCode::size(80)->generate($qrData);
            $qrBase64 = base64_encode($qrSvg);
          @endphp
          <img src="data:image/svg+xml;base64,{{ $qrBase64 }}" alt="QR Code">
        </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-regency drag-item" tabindex="0" contenteditable="true" style="position:absolute; top:360px; left:30px; cursor:move; display:none;">
          {{ $regencyCard ?? '-' }}
        </div>
        <div class="card-district drag-item" tabindex="0" contenteditable="true" style="position:absolute; top:380px; left:30px; cursor:move; display:none;">
          {{ $districtCard ?? '-' }}
        </div>
        <!-- Foto -->
      </div>
    </div>
    <!-- Tombol simpan dan setting di bawah kartu -->
    <div class="flex md: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() : false)
          || (property_exists($user, 'role') && $user->role === 'superadmin')
          || (method_exists($user, 'hasRole') && $user->hasRole('superadmin'));
        $isAdmin = (method_exists($user, 'isAdmin') ? $user->isAdmin() : false)
          || (property_exists($user, 'role') && $user->role === 'admin')
          || (method_exists($user, 'hasRole') && $user->hasRole('admin'));

        // Tampilkan tombol jika:
        // - Superadmin
        // - Admin
        $shouldShowButtons = $isSuperAdmin || $isAdmin;
      @endphp

      {{-- Tiga tombol utama --}}
      @if($shouldShowButtons)
        <div id="action-buttons-wrapper" class="flex gap-3 flex-nowrap items-center justify-center">
            <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>
        </div>
      @endif
    </div>

  </div>
  <form id="card-settings" class="relative bg-yellow-50 rounded-2xl shadow p-4 pb-16 ring-1 ring-yellow-200 md:sticky top-4 w-full md:w-[650px] space-y-[2px]">
    <div class="flex items-center justify-between mb-2">
      <h3 class="text-base font-bold text-yellow-700">Pengaturan Teks Kartu</h3>
    </div>
    <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 kartu</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-[6px] 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">
          </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="qr-visible" class="w-4 h-4" checked>
              <span class="text-yellow-700">Tampilkan QR</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 Kartu (cm)</label>
        <div class="flex items-center gap-[2px]">
          <input type="number" id="card-width-cm" name="card_width_cm" aria-label="Lebar kartu (cm)" value="5.27" min="5" max="20" step="0.01" 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 kartu (cm)" value="8.6" min="3" max="15" step="0.01" 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 Kartu</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/card');
            $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('idcardbegrounds')->where('filename', $filename)->exists(); @endphp
              <div class="relative inline-block mr-[4px]">
                <img src="{{ asset('assets/images/card/' . $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 kartu" accept="image/*" class="sr-only">
          </label>
        </div>
        @if(isset($shouldShowButtons) && $shouldShowButtons)
          <div class="flex items-center justify-end gap-2 mt-3">
            <button type="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>
            <button type="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>
          </div>
        @endif
      </div>
    </div>
  </form>
  </div>
</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="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">Kartu 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>

<!-- Hidden input untuk keanggotaan -->
<input type="hidden" id="keanggotaan-type" name="keanggotaan_type" value="anggota">

<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();
});

// Toggle tampilkan Judul/Foto/QR
const titleVisibleCb = document.getElementById('title-visible');
const photoVisibleCb = document.getElementById('photo-visible');
const qrVisibleCb = document.getElementById('qr-visible');
function bindVisibilityToggle(cb, selector, resetToCenter){
  if (!cb) return;
  const el = document.querySelector(selector);
  if (!el) return;
  const apply = () => {
    const show = !!cb.checked;
    el.style.display = show ? 'block' : 'none';
    if (show) {
      if (resetToCenter) {
        requestAnimationFrame(() => centerElement(el));
      }
      ensureInsideCard(el);
    }
  };
  cb.addEventListener('change', apply);
  apply();
}
bindVisibilityToggle(titleVisibleCb, '.card-title');
bindVisibilityToggle(photoVisibleCb, '.card-photo');
bindVisibilityToggle(qrVisibleCb, '.card-qr', false);

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 anggota
const searchInput = document.getElementById('anggota-search');
const tableRows = document.querySelectorAll('#anggota-table tbody tr');

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

        tableRows.forEach(row => {
            // Lewati baris "Belum ada anggota"
            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 anggota
const selectAllCheckbox = document.getElementById('select-all-anggota');
const anggotaCheckboxes = document.querySelectorAll('.anggota-checkbox');

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

function updateSettingsOffset(){
  var panel = document.getElementById('card-settings');
  if (!panel) return;
  panel.style.marginLeft = '0px';
}
window.addEventListener('resize', updateSettingsOffset);
setTimeout(updateSettingsOffset, 0);

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

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

        // Kumpulkan semua pengaturan dari antarmuka pengguna
        function getTextStyle(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'
            };
        }
        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), style_inline: getInlineStyleText('.card-title') }),
            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), visible: !!(document.getElementById('photo-visible')?.checked), style_inline: getInlineStyleText('.card-photo'), ...getPosition('.card-photo') },
            qr: { size: parseInt(qrSize.value), visible: !!(document.getElementById('qr-visible')?.checked), style_inline: getInlineStyleText('.card-qr'), ...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')
        };

        // Kumpulkan pengaturan cetak
        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,
        };

        // Buat form sementara untuk mengirim data via POST ke tab baru
        const form = document.createElement('form');
        form.method = 'POST';
        form.action = `{{ route('kartu-anggota.print') }}?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);

        const settingsInput = document.createElement('input');
        settingsInput.type = 'hidden';
        settingsInput.name = 'card_setting';
        settingsInput.value = JSON.stringify(currentCardSetting);
        form.appendChild(settingsInput);

        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
const printBtn = document.getElementById('print-selected-cards');
if (printBtn) {
    printBtn.addEventListener('click', function() {
        const selectedIds = [];
        document.querySelectorAll('.anggota-checkbox:checked').forEach(checkbox => {
            selectedIds.push(checkbox.dataset.anggotaId);
        });

        if (selectedIds.length === 0) {
            alert('Pilih minimal satu anggota untuk dicetak kartunya.');
            return;
        }
        // Buka halaman print HTML
        const printUrl = `{{ route('kartu-anggota.print') }}?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));
  const toRatio = (value, total) => {
    if (!total || total === 0) return null;
    return +(value / total).toFixed(6);
  };
  return {
    left: leftPx,
    top: topPx,
    width: widthPx,
    height: heightPx,
    right: rightPx,
    bottom: bottomPx,
    left_ratio: toRatio(leftPx, cRect.width),
    top_ratio: toRatio(topPx, cRect.height),
    width_ratio: toRatio(widthPx, cRect.width),
    height_ratio: toRatio(heightPx, cRect.height)
  };
}
// Helper function to set position
function setPosition(className, pos) {
  const el = document.querySelector(className);
  if (el && pos) {
    if (typeof pos.left !== 'undefined') {
      el.style.left = (pos.left + 'px');
    }
    if (typeof pos.top !== 'undefined') el.style.top = pos.top + 'px';
    if (typeof pos.width !== 'undefined') el.style.width = pos.width + 'px';
    try { el.style.marginLeft = '0px'; } catch($e) {}
    try { el.style.transform = 'none'; } 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';
}

// Pusatkan elemen absolut secara horizontal dalam container kartu (piksel)
function centerElement(selector){
  const el = typeof selector === 'string' ? document.querySelector(selector) : selector;
  if (!el) return;
  const container = document.querySelector('.card-content');
  if (!container) return;
  const cRect = container.getBoundingClientRect();
  const rect = el.getBoundingClientRect();
  const leftPx = Math.max(0, Math.round((cRect.width - rect.width) / 2));
  el.style.left = leftPx + 'px';
  el.style.transform = 'none';
}

function getInlineStyleText(selector) {
  const el = typeof selector === 'string' ? document.querySelector(selector) : selector;
  if (!el) return '';
  return (el.getAttribute('style') || '').trim();
}
// 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-regency, .card-district'
);
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) {
  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}`;
}

  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; // 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 kartu 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', '.card-regency', '.card-district'].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) {
    if (!e.target.classList.contains('drag-item')) return;
    dragItem = e.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;
    // Batas area kartu (longgarkan agar bisa melewati tepi kiri/kanan/atas/bawah)
    const overflowX = cardRect.width * 0.25;  // izinkan 25% lebar kartu keluar
    const overflowY = cardRect.height * 0.25; // izinkan 25% tinggi kartu keluar
    left = Math.max(-overflowX, Math.min(left, cardRect.width - dragItem.offsetWidth + overflowX));
    top = Math.max(-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.querySelector('img');
let photoOverlay = cardPhoto.querySelector('.photo-overlay');
if (!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 kartu
const CM_TO_PX = 37.8;
// Gunakan nilai default input sebagai ukuran dasar kartu untuk perhitungan skala
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');
  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
cardPhotoImg.addEventListener('load', () => { refreshImgAspectRatio(); updatePhotoSize(photoSize.value); });
cardPhotoImg.addEventListener('error', () => { imgAspectRatio = 1; updatePhotoSize(photoSize.value); });
// Inisialisasi awal jika gambar sudah cached/terload
if (cardPhotoImg.complete) { refreshImgAspectRatio(); }

function updatePhotoSize(val) {
  const v = parseFloat(val);
  const scale = getCardScale();
  if (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) {
  // Hapus semua class yang terkait dengan shape
  cardPhoto.classList.remove('circle-photo', 'square-photo', 'rounded-circle', 'rounded');
  if (cardPhotoImg) {
    cardPhotoImg.classList.remove('rounded-circle', 'rounded');
  }
  
  if (val === 'circle') {
    cardPhoto.classList.add('circle-photo');
    // Untuk circle, pastikan width dan height sama
    const currentSize = parseFloat(photoSize.value) || 90;
    const scale = getCardScale();
    const s = currentSize * scale.uniform;
    cardPhoto.style.width = s + 'px';
    cardPhoto.style.height = s + 'px';
    if (cardPhotoImg) {
      cardPhotoImg.style.width = '100%';
      cardPhotoImg.style.height = '100%';
      cardPhotoImg.style.objectFit = 'cover';
    }
  } else {
    cardPhoto.classList.add('square-photo');
    // Untuk square, gunakan aspect ratio gambar
    updatePhotoSize(photoSize.value);
  }
}
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; // 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;
  }
}
photoSize.addEventListener('input', e => {
  // Untuk circle, pastikan shape tetap circle dan ukuran tetap sama
  if (photoShape.value === 'circle') {
    const v = parseFloat(e.target.value);
    const scale = getCardScale();
    const s = v * scale.uniform;
    cardPhoto.style.width = s + 'px';
    cardPhoto.style.height = s + 'px';
  } else {
    updatePhotoSize(e.target.value);
  }
  // Pastikan shape class tetap benar
  updatePhotoShape(photoShape.value);
  updatePhotoOverlay();
});
photoShape.addEventListener('change', e => {
  const shape = e.target.value;
  updatePhotoShape(shape);
  // Update size setelah shape diupdate
  if (shape === 'circle') {
    // Untuk circle, ukuran sudah diatur di updatePhotoShape
    // Tapi pastikan ukuran tetap sesuai dengan input
    const currentSize = parseFloat(photoSize.value) || 90;
    const scale = getCardScale();
    const s = currentSize * scale.uniform;
    cardPhoto.style.width = s + 'px';
    cardPhoto.style.height = s + 'px';
  } else {
    // Untuk square, gunakan updatePhotoSize normal
    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
// Pastikan shape diinisialisasi terlebih dahulu, lalu size
const initialShape = photoShape.value || 'square';
updatePhotoShape(initialShape);
// Setelah shape diupdate, update size
if (initialShape === 'circle') {
  const currentSize = parseFloat(photoSize.value) || 90;
  const scale = getCardScale();
  const s = currentSize * scale.uniform;
  cardPhoto.style.width = s + 'px';
  cardPhoto.style.height = s + 'px';
} else {
  updatePhotoSize(photoSize.value);
}
updatePhotoOverlayTile();

// Pengaturan ukuran QR code
const qrSize = document.getElementById('qr-size');
const cardQrImg = document.querySelector('.card-qr img');
let qrSizeRatio = null;
function updateQrSize(val) {
  const v = parseFloat(val);
  const s = v; // gunakan nilai input langsung agar preview konsisten dengan print
  cardQrImg.style.width = s + 'px';
  cardQrImg.style.height = s + 'px';
  const cardQr = document.querySelector('.card-qr');
  if (cardQr) {
    cardQr.style.width = s + 'px';
    cardQr.style.height = s + 'px';
  }
  // jangan pusatkan otomatis; pertahankan posisi yang disimpan
}
qrSize.addEventListener('input', e => updateQrSize(e.target.value));
// Inisialisasi default
updateQrSize(qrSize.value);

// Pengaturan ukuran kartu (cm)
const cardWidthCm = document.getElementById('card-width-cm');
const cardHeightCm = document.getElementById('card-height-cm');
const yellowCard = document.querySelector('.yellow-card-3d');
const cardColumn = document.getElementById('card-column');
function syncCardColumnWidth(){
  if (!yellowCard || !cardColumn) return;
  const rect = yellowCard.getBoundingClientRect();
  const w = Math.round(rect.width + 24);
  cardColumn.style.flex = '0 0 ' + w + 'px';
  cardColumn.style.width = w + 'px';
}
function updateCardSizeCm() {
  // 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';
  syncCardColumnWidth();
  // Saat ukuran kartu berubah, skala foto & QR ikut menyesuaikan
  updatePhotoSize(photoSize.value);
  if (qrSizeRatio) {
    const newSize = Math.round(qrSizeRatio * w);
    qrSize.value = newSize;
    updateQrSize(newSize);
  } else {
    updateQrSize(qrSize.value);
  }
}
cardWidthCm.addEventListener('input', updateCardSizeCm);
cardHeightCm.addEventListener('input', updateCardSizeCm);
// Inisialisasi default
updateCardSizeCm();
syncCardColumnWidth();

// Pengaturan background kartu 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/card/${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('/idcard-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);

// Toggle tampil/sembunyi panel setting pakai tombol di bawah kartu
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 setting disembunyikan, peserta 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', file);
  fetch("{{ url('/idcard-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/card!');
      };
      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 KARTU KE DATABASE TANPA CSRF ===
const keanggotaanType = document.getElementById('keanggotaan-type')?.value || 'anggota';
const LS_CARD_KEY = `card_setting_keanggotaan`;
const LS_PRINT_KEY = `print_settings_keanggotaan`;
const saveBtn = document.getElementById('save-card-setting');
if (saveBtn) {
  saveBtn.addEventListener('click', function() {
      const cardContent = document.querySelector('.card-content');
      const cardContentRect = cardContent ? cardContent.getBoundingClientRect() : null;
      const yellowCardRect = yellowCard ? yellowCard.getBoundingClientRect() : cardContentRect;
      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 cardSetting = {
        title: Object.assign(
          getTextStyleEl('.card-title'),
          getPosition('.card-title'),
          { 
            visible: !!(document.getElementById('title-visible')?.checked), 
            style_inline: getInlineStyleText('.card-title'),
            text: (function() {
              const titleEl = document.querySelector('.card-title');
              return titleEl ? titleEl.textContent.trim() : 'KARTU ANGGOTA';
            })()
          }
        ),
        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),
          style_inline: getInlineStyleText('.card-photo'),
          visible: !!(document.getElementById('photo-visible')?.checked),
          ...getPosition('.card-photo')
        },
        qr: {
          size: parseInt(qrSize.value),
          size_ratio: (function(){
            const baseW = yellowCardRect ? yellowCardRect.width : (cardContentRect ? cardContentRect.width : null);
            return (baseW && baseW > 0) ? +(parseInt(qrSize.value)/baseW).toFixed(6) : null;
          })(),
          style_inline: getInlineStyleText('.card-qr'),
          visible: !!(document.getElementById('qr-visible')?.checked),
          ...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() {
            const bg = yellowCard.style.backgroundImage;
            if (!bg) return null;
            const match = bg.match(/\/([^\/]+\.(png|jpg|jpeg|gif|webp))/i);
            return match ? match[1] : null;
          })(),
          style_inline: getInlineStyleText('.yellow-card-3d'),
          content_style_inline: getInlineStyleText('.card-content')
        },
        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), style_inline: getInlineStyleText('.card-name') }
          );
        })(),
        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), style_inline: getInlineStyleText('.card-email') }
          );
        })(),
        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), style_inline: getInlineStyleText('.card-phone') }
          );
        })(),
        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), style_inline: getInlineStyleText('.card-gender') }
          );
        })(),
        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), style_inline: getInlineStyleText('.card-job') }
          );
        })(),
        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), style_inline: getInlineStyleText('.card-role') }
          );
        })(),
        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), style_inline: getInlineStyleText('.card-address') }
          );
        })(),
        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), style_inline: getInlineStyleText('.card-province') }
          );
        })(),
        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), style_inline: getInlineStyleText('.card-regency') }
          );
        })(),
        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), style_inline: getInlineStyleText('.card-district') }
          );
        })()
      };
        const formData = new FormData();
        formData.append('card_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,
      }));
      // Tambahkan CSRF token
      const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
      if (csrfToken) formData.append('_token', csrfToken);
      fetch("{{ route('kartu-anggota.save-settings') }}", {
        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 kartu
          setPosition('.card-title', data.card_setting.title);
          updateStyle('.card-title', 'color', data.card_setting.title?.color);
          updateStyle('.card-title', 'fontFamily', data.card_setting.title?.font);
          updateStyle('.card-title', 'fontSize', data.card_setting.title?.size + 'px');
          updateStyle('.card-title', 'textAlign', data.card_setting.title?.align || 'center');
          updateStyle('.card-title', 'fontWeight', data.card_setting.title?.weight || 'bold');
          updateStyle('.card-title', 'fontStyle', data.card_setting.title?.italic || 'normal');
          updateStyle('.card-title', 'width', (data.card_setting.title?.width ? data.card_setting.title.width + 'px' : ''));
          updateStyle('.card-title', 'marginLeft', '0px');
          updateStyle('.card-title', 'transform', 'none');
          // Foto
          setValueIfExists(photoSize, data.card_setting.photo?.size);
          setValueIfExists(photoShape, data.card_setting.photo?.shape);
          setPosition('.card-photo', data.card_setting.photo);
          // Update shape terlebih dahulu, lalu size
          const loadedShape = data.card_setting.photo?.shape || photoShape.value || 'square';
          updatePhotoShape(loadedShape);
          // Setelah shape diupdate, update size
          if (loadedShape === 'circle') {
            const loadedSize = parseFloat(data.card_setting.photo?.size || photoSize.value) || 90;
            const scale = getCardScale();
            const s = loadedSize * scale.uniform;
            cardPhoto.style.width = s + 'px';
            cardPhoto.style.height = s + 'px';
          } else {
            updatePhotoSize(data.card_setting.photo?.size || photoSize.value);
          }
          setValueIfExists(photoOverlayColor, data.card_setting.photo?.overlay_color);
          setValueIfExists(photoOverlayOpacity, data.card_setting.photo?.overlay_opacity);
          updatePhotoOverlay(data.card_setting.photo?.overlay_color, data.card_setting.photo?.overlay_opacity);
          const pv = document.getElementById('photo-visible');
          // Default visible jika belum ada setting
          if (pv) pv.checked = data.card_setting.photo?.visible !== undefined ? !!data.card_setting.photo.visible : true;
          const photoEl = document.querySelector('.card-photo');
          if (photoEl) photoEl.style.display = (pv && pv.checked) ? 'block' : 'none';
          // QR
          setValueIfExists(qrSize, data.card_setting.qr?.size);
          setPosition('.card-qr', data.card_setting.qr);
          try { qrSizeRatio = data.card_setting.qr?.size_ratio || null; } catch(e) { qrSizeRatio = null; }
          const ycRect = yellowCard ? yellowCard.getBoundingClientRect() : null;
          const baseW = ycRect ? ycRect.width : null;
          const intendedSize = (qrSizeRatio && baseW) ? Math.round(qrSizeRatio * baseW) : (data.card_setting.qr?.size);
          if (intendedSize) { qrSize.value = intendedSize; }
          updateQrSize(intendedSize || data.card_setting.qr?.size);
          const qv = document.getElementById('qr-visible');
          if (qv) qv.checked = !!data.card_setting.qr?.visible;
          const qrEl = document.querySelector('.card-qr');
          if (qrEl) qrEl.style.display = (qv && qv.checked) ? 'block' : 'none';
          // Kartu
          setValueIfExists(cardWidthCm, data.card_setting.card?.width_cm);
          setValueIfExists(cardHeightCm, data.card_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.card_setting.name);
          applyTextSetting('.card-email', data.card_setting.email);
          applyTextSetting('.card-phone', data.card_setting.no_hp);
          applyTextSetting('.card-gender', data.card_setting.jenis_kelamin);
          applyTextSetting('.card-job', data.card_setting.pekerjaan);
          applyTextSetting('.card-role', data.card_setting.jabatan);
          applyTextSetting('.card-address', data.card_setting.alamat);
          applyTextSetting('.card-province', data.card_setting.province);
          applyTextSetting('.card-regency', data.card_setting.regency);
          applyTextSetting('.card-district', data.card_setting.district);
          const tv = document.getElementById('title-visible');
          if (tv) tv.checked = !!data.card_setting.title?.visible;
          const titleEl = document.querySelector('.card-title');
          if (titleEl) titleEl.style.display = (tv && tv.checked) ? 'block' : 'none';
          // Background
          if (data.card_setting.card?.background) {
            yellowCard.style.background = '';
            yellowCard.style.backgroundImage = `url('/assets/images/card/${data.card_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.card_setting.card.background) setActiveBgThumb(img);
            });
          }
          try {
            localStorage.setItem(LS_CARD_KEY, JSON.stringify(data.card_setting || 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 kartu berhasil disimpan.'); } catch($e) {}
          try {
            const settingsPanel = document.getElementById('card-settings');
            const participantsPanel = document.getElementById('participants-panel');
            if (settingsPanel) settingsPanel.style.display = 'none';
            if (participantsPanel) {
              participantsPanel.classList.remove('hidden');
              participantsPanel.style.display = '';
              participantsPanel.scrollIntoView({ behavior: 'smooth', block: 'start' });
            }
          } 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($cardSetting) && $cardSetting)
  const cardSetting = @json($cardSetting);
  // Terapkan ke form dan tampilan kartu
  setPosition('.card-title', cardSetting.title);
  updateStyle('.card-title', 'color', cardSetting.title?.color);
  updateStyle('.card-title', 'fontFamily', cardSetting.title?.font);
  updateStyle('.card-title', 'fontSize', cardSetting.title?.size + 'px');
  updateStyle('.card-title', 'textAlign', cardSetting.title?.align || 'center');
  updateStyle('.card-title', 'fontWeight', cardSetting.title?.weight || 'bold');
  updateStyle('.card-title', 'fontStyle', cardSetting.title?.italic || 'normal');
  updateStyle('.card-title', 'width', (cardSetting.title?.width ? cardSetting.title.width + 'px' : ''));
  updateStyle('.card-title', 'marginLeft', '0px');
  updateStyle('.card-title', 'transform', 'none');
  // Foto
  setValueIfExists(photoSize, cardSetting.photo?.size);
  setValueIfExists(photoShape, cardSetting.photo?.shape);
  setPosition('.card-photo', cardSetting.photo);
  // Update shape terlebih dahulu, lalu size
  const initialShapeFromSetting = cardSetting.photo?.shape || photoShape.value || 'square';
  updatePhotoShape(initialShapeFromSetting);
  // Setelah shape diupdate, update size
  if (initialShapeFromSetting === 'circle') {
    const initialSize = parseFloat(cardSetting.photo?.size || photoSize.value) || 90;
    const scale = getCardScale();
    const s = initialSize * scale.uniform;
    cardPhoto.style.width = s + 'px';
    cardPhoto.style.height = s + 'px';
  } else {
    updatePhotoSize(cardSetting.photo?.size || photoSize.value);
  }
  setValueIfExists(photoOverlayColor, cardSetting.photo?.overlay_color);
  setValueIfExists(photoOverlayOpacity, cardSetting.photo?.overlay_opacity);
  updatePhotoOverlay(cardSetting.photo?.overlay_color, cardSetting.photo?.overlay_opacity);
  // QR
  setValueIfExists(qrSize, cardSetting.qr?.size);
  setPosition('.card-qr', cardSetting.qr);
  updateQrSize(cardSetting.qr?.size);
  // Pastikan foto muncul secara default jika belum ada setting
  const photoVisibleCheckbox = document.getElementById('photo-visible');
  const photoElement = document.querySelector('.card-photo');
  if (photoVisibleCheckbox && photoElement) {
    // Jika belum ada setting photo.visible, set ke true (visible)
    if (cardSetting.photo?.visible === undefined) {
      photoVisibleCheckbox.checked = true;
      photoElement.style.display = 'block';
    } else {
      photoVisibleCheckbox.checked = !!cardSetting.photo.visible;
      photoElement.style.display = cardSetting.photo.visible ? 'block' : 'none';
    }
  }
  // Kartu
  setValueIfExists(cardWidthCm, cardSetting.card?.width_cm);
  setValueIfExists(cardHeightCm, cardSetting.card?.height_cm);
  updateCardSizeCm();
  // Background
  if (cardSetting.card?.background) {
    yellowCard.style.background = '';
    yellowCard.style.backgroundImage = `url('/assets/images/card/${cardSetting.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 === cardSetting.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', cardSetting.name);
    applyTextSetting('.card-email', cardSetting.email);
    applyTextSetting('.card-phone', cardSetting.no_hp);
    applyTextSetting('.card-gender', cardSetting.jenis_kelamin);
    applyTextSetting('.card-job', cardSetting.pekerjaan);
    applyTextSetting('.card-role', cardSetting.jabatan);
    applyTextSetting('.card-address', cardSetting.alamat);
    applyTextSetting('.card-province', cardSetting.province);
  })();
  try {
    const el = document.querySelector('.card-title');
    if (el) setToolbarFromElement(el);
  } catch($e) {}
@else
  // Jika belum ada cardSetting, pastikan foto muncul secara default
  const photoVisibleCheckboxDefault = document.getElementById('photo-visible');
  const photoElementDefault = document.querySelector('.card-photo');
  if (photoVisibleCheckboxDefault && photoElementDefault) {
    photoVisibleCheckboxDefault.checked = true;
    photoElementDefault.style.display = 'block';
  }
@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);
    // Update shape terlebih dahulu, lalu size
    const lsShape = lsCard.photo?.shape || photoShape.value || 'square';
    updatePhotoShape(lsShape);
    // Setelah shape diupdate, update size
    if (lsShape === 'circle') {
      const lsSize = parseFloat(lsCard.photo?.size || photoSize.value) || 90;
      const scale = getCardScale();
      const s = lsSize * scale.uniform;
      cardPhoto.style.width = s + 'px';
      cardPhoto.style.height = s + 'px';
    } else {
      updatePhotoSize(lsCard.photo?.size || photoSize.value);
    }
    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);
    try { qrSizeRatio = lsCard.qr?.size_ratio || null; } catch(e) { qrSizeRatio = null; }
    const ycRect2 = yellowCard ? yellowCard.getBoundingClientRect() : null;
    const baseW2 = ycRect2 ? ycRect2.width : null;
    const intendedSize2 = (qrSizeRatio && baseW2) ? Math.round(qrSizeRatio * baseW2) : (lsCard.qr?.size);
    if (intendedSize2) { qrSize.value = intendedSize2; }
    updateQrSize(intendedSize2 || lsCard.qr?.size);
    setValueIfExists(cardWidthCm, lsCard.card?.width_cm);
    setValueIfExists(cardHeightCm, lsCard.card?.height_cm);
    updateCardSizeCm();
    if (lsCard.card?.background) {
      yellowCard.style.background = '';
      yellowCard.style.backgroundImage = `url('/assets/images/card/${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 tv = document.getElementById('title-visible');
    if (tv) tv.checked = !!lsCard.title?.visible;
    const titleEl = document.querySelector('.card-title');
    if (titleEl) titleEl.style.display = (tv && tv.checked) ? 'block' : 'none';
    const pv = document.getElementById('photo-visible');
    // Default visible jika belum ada setting
    if (pv) pv.checked = lsCard.photo?.visible !== undefined ? !!lsCard.photo.visible : true;
    const photoEl = document.querySelector('.card-photo');
    if (photoEl) photoEl.style.display = (pv && pv.checked) ? 'block' : 'none';
    const qv = document.getElementById('qr-visible');
    if (qv) qv.checked = !!lsCard.qr?.visible;
    const qrEl = document.querySelector('.card-qr');
    if (qrEl) qrEl.style.display = (qv && qv.checked) ? 'block' : '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

// Card ID visibility toggle removed - not applicable for keanggotaan
}); // 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/card/defould.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: visible;
}
.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 kartu 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;
}
.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;
  /* Nonaktifkan pointer event pada child saat drag agar tidak mengganggu */
  pointer-events: none;
}
.card-photo img,
.card-qr img {
  pointer-events: none;
}
.card-photo img { 
  object-fit: contain; 
}
/* Override untuk circle dan square */
.circle-photo img,
.square-photo img {
  object-fit: cover !important;
}
.card-photo { z-index: 2; }
.card-title { z-index: 3; }
/* Profile list on card */
.circle-photo {
  border-radius: 50% !important;
  overflow: hidden;
}
.circle-photo img {
  border-radius: 50% !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}
.square-photo {
  border-radius: 12px !important;
  overflow: hidden;
}
.square-photo img {
  border-radius: 12px !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}
#toggle-setting-btn {
  /* Hapus posisi fixed, gunakan margin auto agar di bawah kartu 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