@php
  // Ambil background dari card setting
  $cardStyle = data_get($cardSetting, 'card', []);
  $bgImage = data_get($cardStyle, 'background', 'defould.png');
  $bgPath = asset('assets/images/card/' . $bgImage);
  
  // Ambil ukuran kartu dari setting (default: 260px x 400px sesuai dengan yellow-card-3d)
  // Untuk preview, kita gunakan ukuran tetap yang sesuai dengan yellow-card-3d
  // karena preview tidak perlu skala yang sama dengan print
  $cardWidthPx = 260; // Ukuran tetap untuk preview
  $cardHeightPx = 400; // Ukuran tetap untuk preview
  
  // Ambil style untuk elemen-elemen kartu
  $titleStyle = data_get($cardSetting, 'title', []);
  $nameStyle = data_get($cardSetting, 'name', []);
  $photoStyle = data_get($cardSetting, 'photo', []);
  $qrStyle = data_get($cardSetting, 'qr', []);
  
  // QR Code data
  $qrData = !empty($anggotaCard->nomor_anggota) ? $anggotaCard->nomor_anggota : ($uCard->id ?? '');
  $qrSize = data_get($qrStyle, 'size', 80);
  $qrSvg = \SimpleSoftwareIO\QrCode\Facades\QrCode::size($qrSize)->generate($qrData);
  $qrBase64 = base64_encode($qrSvg);
  
  // Photo shape dan size
  $photoShape = data_get($photoStyle, 'shape', 'circle');
  $photoSize = data_get($photoStyle, 'size', 90);
  
  // Position dari card setting atau default - gunakan nilai yang disimpan
  $titleTop = data_get($titleStyle, 'top', 20);
  $titleLeft = data_get($titleStyle, 'left', 0);
  $nameTop = data_get($nameStyle, 'top', 190);
  $nameLeft = data_get($nameStyle, 'left', 30);
  $photoTop = data_get($photoStyle, 'top', 70);
  $photoLeft = data_get($photoStyle, 'left', 85);
  $qrTop = data_get($qrStyle, 'top', 320);
  $qrLeft = data_get($qrStyle, 'left', 30);
  
  // Style inline jika ada
  $titleInlineStyle = data_get($titleStyle, 'style_inline', '');
  $nameInlineStyle = data_get($nameStyle, 'style_inline', '');
  $photoInlineStyle = data_get($photoStyle, 'style_inline', '');
  $qrInlineStyle = data_get($qrStyle, 'style_inline', '');
  
  // Visibility
  $titleVisible = data_get($titleStyle, 'visible', true);
  $nameVisible = data_get($nameStyle, 'visible', false);
  $photoVisible = data_get($photoStyle, 'visible', true);
  $qrVisible = data_get($qrStyle, 'visible', true);
@endphp

<style>
/* Isolasi CSS untuk preview kartu agar tidak konflik dengan CSS global */
.card-preview-wrapper {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 20px !important;
  background: #f5f5f5 !important;
  border-radius: 8px !important;
  width: 100% !important;
  min-width: 300px !important;
  /* Pastikan wrapper tidak membatasi ukuran kartu */
  isolation: isolate;
  box-sizing: border-box !important;
}

.preview-card {
  position: relative !important;
  width: {{ $cardWidthPx }}px !important;
  height: {{ $cardHeightPx }}px !important;
  background: url('{{ $bgPath }}') center center / 100% 100% no-repeat !important;
  border-radius: 20px !important;
  box-shadow: 0 8px 24px 0 rgba(0,0,0,0.18), 0 1.5px 4px 0 rgba(255, 215, 0, 0.3) !important;
  border: 2px solid #fff9c4 !important;
  overflow: visible !important;
  /* Sama dengan .yellow-card-3d di printidcard */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: transform 0.2s cubic-bezier(.25,.8,.25,1), box-shadow 0.2s !important;
  perspective: 800px !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 0 !important;
}

.preview-card-content {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  padding: 24px 16px 16px 16px !important;
  box-sizing: border-box !important;
  /* Pastikan sama dengan .card-content di printidcard */
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  border-radius: 18px !important;
  /* Pastikan content tidak overflow */
  overflow: visible !important;
  margin: 0 !important;
}

.preview-card-title {
  position: absolute !important;
  width: 100%;
  display: block;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.2;
  pointer-events: auto;
  cursor: text;
  padding: 0 !important;
  margin: 0 !important;
  margin-left: 0 !important;
  text-indent: 0 !important;
  /* Reset untuk mencegah konflik */
  box-sizing: border-box;
  /* Style dari setting hanya digunakan jika tidak ada style_inline */
  @if(!$titleInlineStyle || empty(trim($titleInlineStyle)))
    color: {{ data_get($titleStyle, 'color', '#333') }} !important;
    font-family: {{ data_get($titleStyle, 'font', 'Arial, sans-serif') }} !important;
    font-size: {{ data_get($titleStyle, 'size', 18) }}px !important;
    font-weight: {{ data_get($titleStyle, 'weight', 'bold') }} !important;
    text-align: {{ data_get($titleStyle, 'align', 'center') }} !important;
    width: {{ data_get($titleStyle, 'width', '100%') }}{{ is_numeric(data_get($titleStyle, 'width')) ? 'px' : '' }} !important;
  @endif
}

.preview-card-name {
  position: absolute !important;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box;
  /* Style dari setting hanya digunakan jika tidak ada style_inline */
  @if(!$nameInlineStyle || empty(trim($nameInlineStyle)))
    color: {{ data_get($nameStyle, 'color', '#333') }} !important;
    font-family: {{ data_get($nameStyle, 'font', 'Arial, sans-serif') }} !important;
    font-size: {{ data_get($nameStyle, 'size', 16) }}px !important;
    font-weight: {{ data_get($nameStyle, 'weight', 'normal') }} !important;
    font-style: {{ data_get($nameStyle, 'italic', 'normal') === 'italic' ? 'italic' : 'normal' }} !important;
  @endif
}

.preview-card-photo {
  position: absolute !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box;
  /* Jangan gunakan default width/height, gunakan dari style_inline atau setting */
  /* Pastikan tidak ada style default yang meng-override */
}

.preview-card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Pastikan gambar tidak memiliki style yang mengganggu */
  display: block;
}

.preview-card-photo.circle-photo {
  border-radius: 50% !important;
}

.preview-card-photo.square-photo {
  border-radius: 12px !important;
}

.preview-card-qr {
  position: absolute !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box;
  /* Jangan gunakan default styling, gunakan dari style_inline atau setting */
}

.preview-card-qr img {
  width: 100%;
  height: 100%;
  background: #fff;
  padding: 4px;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
  display: block;
}
</style>

<div class="card-preview-wrapper">
  <div class="preview-card">
    <div class="preview-card-content">
      @if($titleVisible)
      @php
        // Prioritas: gunakan style_inline jika ada dan lengkap
        // Jika tidak ada atau tidak lengkap, gunakan data dari setting
        $titleStyleAttr = '';
        if ($titleInlineStyle && !empty(trim($titleInlineStyle))) {
          // Style inline sudah berisi semua style termasuk top, left, dll
          // Gunakan style_inline langsung tanpa modifikasi untuk memastikan akurasi
          $titleStyleAttr = $titleInlineStyle;
          // Pastikan display sesuai dengan visibility setting
          if (stripos($titleStyleAttr, 'display:') === false) {
            $titleStyleAttr .= " display: " . ($titleVisible ? 'block' : 'none') . " !important;";
          } else {
            // Update display yang ada
            $titleStyleAttr = preg_replace('/display:\s*[^;]+;?/i', 'display: ' . ($titleVisible ? 'block' : 'none') . ' !important;', $titleStyleAttr);
          }
        } else {
          // Jika tidak ada style inline, gunakan posisi dan style dari setting
          $titleStyleAttr = "position: absolute !important; top: {$titleTop}px !important; left: {$titleLeft}px !important;";
          $titleStyleAttr .= " color: " . data_get($titleStyle, 'color', '#333') . " !important;";
          $titleStyleAttr .= " font-family: " . data_get($titleStyle, 'font', 'Arial, sans-serif') . " !important;";
          $titleStyleAttr .= " font-size: " . data_get($titleStyle, 'size', 18) . "px !important;";
          $titleStyleAttr .= " font-weight: " . data_get($titleStyle, 'weight', 'bold') . " !important;";
          $titleStyleAttr .= " text-align: " . data_get($titleStyle, 'align', 'center') . " !important;";
          $titleWidth = data_get($titleStyle, 'width', '100%');
          $titleStyleAttr .= " width: " . ($titleWidth . (is_numeric($titleWidth) ? 'px' : '')) . " !important;";
          $titleStyleAttr .= " display: " . ($titleVisible ? 'block' : 'none') . " !important;";
        }
      @endphp
      <div class="preview-card-title" style="{{ $titleStyleAttr }}">
        {{ data_get($cardSetting, 'title.text', 'KARTU ANGGOTA') }}
      </div>
      @endif
      
      @if($nameVisible)
      @php
        $nameStyleAttr = '';
        if ($nameInlineStyle && !empty(trim($nameInlineStyle))) {
          // Style inline sudah berisi semua style termasuk top, left, dll
          // Gunakan style_inline langsung tanpa modifikasi untuk memastikan akurasi
          $nameStyleAttr = $nameInlineStyle;
          // Pastikan display sesuai dengan visibility setting
          if (stripos($nameStyleAttr, 'display:') === false) {
            $nameStyleAttr .= " display: " . ($nameVisible ? 'block' : 'none') . " !important;";
          } else {
            // Update display yang ada
            $nameStyleAttr = preg_replace('/display:\s*[^;]+;?/i', 'display: ' . ($nameVisible ? 'block' : 'none') . ' !important;', $nameStyleAttr);
          }
        } else {
          // Jika tidak ada style inline, gunakan posisi dan style dari setting
          $nameStyleAttr = "position: absolute !important; top: {$nameTop}px !important; left: {$nameLeft}px !important;";
          $nameStyleAttr .= " color: " . data_get($nameStyle, 'color', '#333') . " !important;";
          $nameStyleAttr .= " font-family: " . data_get($nameStyle, 'font', 'Arial, sans-serif') . " !important;";
          $nameStyleAttr .= " font-size: " . data_get($nameStyle, 'size', 16) . "px !important;";
          $nameStyleAttr .= " font-weight: " . data_get($nameStyle, 'weight', 'normal') . " !important;";
          $nameStyleAttr .= " font-style: " . (data_get($nameStyle, 'italic', 'normal') === 'italic' ? 'italic' : 'normal') . " !important;";
          $nameStyleAttr .= " display: " . ($nameVisible ? 'block' : 'none') . " !important;";
        }
      @endphp
      <div class="preview-card-name" style="{{ $nameStyleAttr }}">
        {{ $uCard->name ?? '-' }}
      </div>
      @endif
      
      @if($photoVisible)
      @php
        // Untuk circle, pastikan width = height
        $photoWidth = $photoSize;
        $photoHeight = $photoSize;
        
        $photoStyleAttr = '';
        if ($photoInlineStyle && !empty(trim($photoInlineStyle))) {
          // Style inline sudah berisi semua style termasuk top, left, width, height
          // Gunakan style_inline langsung tanpa modifikasi untuk memastikan akurasi
          $photoStyleAttr = $photoInlineStyle;
          // Pastikan display sesuai dengan visibility setting
          if (stripos($photoStyleAttr, 'display:') === false) {
            $photoStyleAttr .= " display: " . ($photoVisible ? 'block' : 'none') . " !important;";
          } else {
            // Update display yang ada
            $photoStyleAttr = preg_replace('/display:\s*[^;]+;?/i', 'display: ' . ($photoVisible ? 'block' : 'none') . ' !important;', $photoStyleAttr);
          }
        } else {
          // Jika tidak ada style inline, gunakan posisi dan ukuran dari setting
          $photoStyleAttr = "position: absolute !important; top: {$photoTop}px !important; left: {$photoLeft}px !important; width: {$photoWidth}px !important; height: {$photoHeight}px !important;";
          $photoStyleAttr .= " display: " . ($photoVisible ? 'block' : 'none') . " !important;";
        }
      @endphp
      <div class="preview-card-photo {{ $photoShape === 'circle' ? 'circle-photo' : 'square-photo' }}" style="{{ $photoStyleAttr }}">
        @if($pCard && isset($pCard->foto) && $pCard->foto)
          <img src="{{ asset('assets/images/profilefoto/' . $pCard->foto) }}" alt="{{ $uCard->name ?? 'User' }}" onerror="this.src='{{ asset('assets/images/profilefoto/default-profile.png') }}'">
        @else
          <img src="{{ asset('assets/images/profilefoto/default-profile.png') }}" alt="Default photo">
        @endif
      </div>
      @endif
      
      @if($qrVisible)
      @php
        $qrStyleAttr = '';
        if ($qrInlineStyle && !empty(trim($qrInlineStyle))) {
          // Style inline sudah berisi semua style termasuk top, left, width, height
          // Gunakan style_inline langsung tanpa modifikasi untuk memastikan akurasi
          $qrStyleAttr = $qrInlineStyle;
          // Pastikan display sesuai dengan visibility setting
          if (stripos($qrStyleAttr, 'display:') === false) {
            $qrStyleAttr .= " display: " . ($qrVisible ? 'block' : 'none') . " !important;";
          } else {
            // Update display yang ada
            $qrStyleAttr = preg_replace('/display:\s*[^;]+;?/i', 'display: ' . ($qrVisible ? 'block' : 'none') . ' !important;', $qrStyleAttr);
          }
        } else {
          // Jika tidak ada style inline, gunakan posisi dan ukuran dari setting
          $qrStyleAttr = "position: absolute !important; top: {$qrTop}px !important; left: {$qrLeft}px !important; width: {$qrSize}px !important; height: {$qrSize}px !important;";
          $qrStyleAttr .= " display: " . ($qrVisible ? 'block' : 'none') . " !important;";
        }
      @endphp
      <div class="preview-card-qr" style="{{ $qrStyleAttr }}">
        <img src="data:image/svg+xml;base64,{{ $qrBase64 }}" alt="QR Code">
      </div>
      @endif
    </div>
  </div>
</div>