@extends('layouts.app')

@section('head')
<link id="canonicalTagPreview" rel="canonical" href="" />
@endsection

@section('content')
<a href="#" data-twe-toggle="modal" id="notifClaimed" hidden="" data-twe-target="#modalClaimed"></a>

<div class="lg:container mt-30 pt-16 mx-4 mb-30 pb-16" id="preview">
  @if($url_preview == 500)
  <script>
    alert("{{$message}}");
    window.location.href = "{{route('book',[$kode_konten,$slug,'alias'=>$alias,'aliasCard'=>$aliasCard])}}";
  </script>
  @else

  <iframe crossorigin="anonymous" src="{{ $url_preview }}" class="w-full h-screen border-0 mt-8 p-0 overflow-hidden">
    Your browser doesn't support iframes
  </iframe>
  @endif
</div>


{{-- Bottom Nav Buy --}}
<div class="bottom-menu w-full bg-white fixed bottom-0 left-0 py-3 px-4 border-t border-t-gray-100 z-10">
  <div class="mb-3">
    <div class="flex items-center gap-4">
      <img src="https://kubuku.id/api/generic/showCover/{{ $konten->kode_konten }}" alt="{{ $konten->judul }}"
        class="h-[60px] rounded-lg lazyload" />
      <div>
        @if($emailKlaimCard || $aliasCard)
        <h3 class="font-semibold text-black line-clamp-2">
          @if($aliasCard)
          {{$aliasCard}}
          @endif

          @if($emailKlaimCard)
          Buku ini sudah diklaim oleh {{$emailKlaimCard}}
          @endif
        </h3>
        @endif
        <h3 class="font-semibold text-black line-clamp-2">
          <a href="{{ route('book', [$kode_konten, $slug, 'alias'=>$alias,'aliasCard'=>$aliasCard]) }}">
            {{ $konten->judul }}
          </a>
        </h3>
        <p class="text-sm text-gray-500 hover:text-primary-dark line-clamp-1">{{ $konten->penulis }}</p>
      </div>
    </div>
  </div>
  <div class="grid grid-cols-1 gap-4">
    @if($konten->harga < 1) @guest <button type="button"
      class="font-semibold text-sm rounded-xl h-10 px-4 lg:px-10 py-2.5 cursor-pointer bg-primary hover:bg-primary text-white transition-all ease-out duration-300"
      data-twe-toggle="modal" data-twe-target="#loginModal" data-twe-ripple-init data-twe-ripple-color="light">
      Dapatkan Gratis</button>
      @else
      <button type="button"
        class="font-semibold text-sm rounded-xl h-10 px-4 lg:px-10 py-2.5 cursor-pointer bg-primary hover:bg-primary text-white transition-all ease-out duration-300"
        data-twe-ripple-init data-twe-ripple-color="light" onClick="free()">
        <span id="buttonText2">Dapatkan Gratis</span>
        <span id="loadingSpinner2" class="hidden">
          <i class="fas fa-spinner fa-spin"></i> Memproses...
        </span>
      </button>
      @endguest
      @else
      <button type="button"
        class="font-semibold text-sm rounded-xl h-10 px-4 lg:px-10 py-2.5 cursor-pointer bg-primary hover:bg-primary text-white transition-all ease-out duration-300"
        data-twe-toggle="modal" data-twe-target="#modalBayar" data-twe-ripple-init data-twe-ripple-color="light"
        onClick="belibuku()">Beli
        Rp. {{ number_format($konten->harga, 0, ',', '.') }}</button>
      {{-- <a href="{{ route('book',['kode_konten'=>$kode_konten])}}"
        class="font-semibold text-center text-sm rounded-xl h-10 px-4 lg:px-10 py-2.5 cursor-pointer bg-primary hover:bg-primary text-white transition-all ease-out duration-300"
        onClick="belibuku()">Detail Buku</a> --}}
      @endif

  </div>
</div>
{{-- End Bottom Nav Buy --}}


{{-- Modal Payment --}}
<div data-twe-modal-init
  class="fixed left-0 top-0 z-[1055] hidden h-full w-full overflow-y-auto overflow-x-hidden outline-none"
  id="modalBayar" tabindex="-1" aria-labelledby="modalBayarLabel" aria-hidden="true">
  <div data-twe-modal-dialog-ref
    class="m-4 pointer-events-none relative w-auto translate-y-[-50px] opacity-0 transition-all duration-300 ease-in-out min-[576px]:mx-auto min-[576px]:mt-7 min-[576px]:max-w-[500px] min-[992px]:max-w-[800px]">
    <div
      class="pointer-events-auto relative flex w-full flex-col rounded-2xl border-none bg-white bg-clip-padding text-current shadow-4 outline-none">
      <div class="flex flex-shrink-0 items-center justify-between rounded-t-md p-4">
        <h5 class="text-xl font-semibold leading-normal text-black" id="modalBayarLabel">Pilih Pembayaran</h5>
        <button type="button"
          class="box-content rounded-none border-none text-neutral-500 hover:text-neutral-800 hover:no-underline focus:text-neutral-800 focus:opacity-100 focus:shadow-none focus:outline-none"
          data-twe-modal-dismiss aria-label="Close">
          <span class="[&>svg]:h-6 [&>svg]:w-6">
            <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" stroke-width="1.5"
              stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
            </svg>
          </span>
        </button>
      </div>
      <div class="relative flex-auto md:p-4" data-twe-modal-body-ref>
        <form action="{{ route('payment.checkout') }}" method="POST">
          @csrf
          <input type="hidden" name="kode_konten" id="kode_konten_modal" value="{{ $kode_konten }}" />
          <input type="hidden" name="buy" id="buy" value="" />
          <input type="hidden" name="alias" value="{{ $alias }}" />
          <input type="hidden" name="aliasCard" value="{{ $aliasCard }}" />

          <div class="relative flex-auto p-4" data-twe-modal-body-ref>
            <fieldset id="fieldsetMethod" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
            </fieldset>
            <div class="my-6 grid grid-cols-1">
              <div class="p-4 border border-gray-100 rounded-xl">
                <label for="emailReceive" class="block mb-2 font-medium text-gray-900">Email
                  Penerima</label>
                <input type="email" id="emailReceive" name="emailReceive" value="@auth {{Auth::user()->email}} @endauth"
                  class="w-full p-3 text-sm border rounded-xl !outline-none focus:ring-primary focus:border-primary"
                  placeholder="contoh: pengguna@gmail.com" required />
                @guest
                <div class="mt-3 text-sm text-gray-500">Anda belum login? <a href="#" data-twe-ripple-init
                    data-twe-ripple-color="light" data-twe-toggle="modal" data-twe-target="#loginModal"
                    class="text-primary font-medium hover:text-primary-dark"><span
                      data-twe-modal-dismiss>Masuk</span></a></div>
                @endguest
                <div class="mt-3 block min-h-[1.5rem] ps-[1.5rem]">
                  <input type="checkbox" value="1" id="auto_redeem" name="auto_redeem"
                    class="relative float-left -ms-[1.5rem] me-[6px] mt-[0.15rem] h-[1.125rem] w-[1.125rem] appearance-none rounded-[0.25rem] border-[0.125rem] border-solid border-secondary-500 outline-none before:pointer-events-none before:absolute before:h-[0.875rem] before:w-[0.875rem] before:scale-0 before:rounded-full before:bg-transparent before:opacity-0 before:shadow-checkbox before:shadow-transparent before:content-[''] checked:border-primary checked:bg-primary checked:before:opacity-[0.16] checked:after:absolute checked:after:-mt-px checked:after:ms-[0.25rem] checked:after:block checked:after:h-[0.8125rem] checked:after:w-[0.375rem] checked:after:rotate-45 checked:after:border-[0.125rem] checked:after:border-l-0 checked:after:border-t-0 checked:after:border-solid checked:after:border-white checked:after:bg-transparent checked:after:content-[''] hover:cursor-pointer hover:before:opacity-[0.04] hover:before:shadow-black/60 focus:shadow-none focus:transition-[border-color_0.2s] focus:before:scale-100 focus:before:opacity-[0.12] focus:before:shadow-black/60 focus:before:transition-[box-shadow_0.2s,transform_0.2s] focus:after:absolute focus:after:z-[1] focus:after:block focus:after:h-[0.875rem] focus:after:w-[0.875rem] focus:after:rounded-[0.125rem] focus:after:content-[''] checked:focus:before:scale-100 checked:focus:before:shadow-checkbox checked:focus:before:transition-[box-shadow_0.2s,transform_0.2s] checked:focus:after:-mt-px checked:focus:after:ms-[0.25rem] checked:focus:after:h-[0.8125rem] checked:focus:after:w-[0.375rem] checked:focus:after:rotate-45 checked:focus:after:rounded-none checked:focus:after:border-[0.125rem] checked:focus:after:border-l-0 checked:focus:after:border-t-0 checked:focus:after:border-solid checked:focus:after:border-white checked:focus:after:bg-transparent rtl:float-right" />
                  <label class="inline-block ps-[0.15rem] hover:cursor-pointer text-sm text-black"
                    for="auto_redeem">Buku otomatis masuk ke email penerima, tanpa redeem
                    code.</label>
                </div>
              </div>
              <div class="mt-4 p-4 border border-gray-100 rounded-xl">
                <label for="kode_voucher" class="block mb-2 font-medium text-gray-900">Kode
                  Voucher</label>
                <div class="relative">
                  <input type="text" id="kode_voucher" name="kode_voucher"
                    class="w-full p-3 pr-24 text-sm border rounded-xl !outline-none focus:ring-primary focus:border-primary"
                    placeholder="Masukkan Kode Voucher" />
                  <button type="button" id="clear-voucher-code" class="absolute right-24 top-3 text-gray-400 hidden">
                    <i class="fa fa-times"></i>
                  </button>
                  <button type="button" class="btn btn-primary h-[34px] leading-3 rounded-lg absolute right-1.5 top-1.5"
                    id="btn-voucher">Pakai</button>
                </div>
              </div>
              <div class="mt-4 p-4 border border-gray-100 rounded-xl">
                <h3 class="mb-2 font-medium text-gray-900">Rincian Pembayaran</h3>
                <div class="pb-2 grid grid-cols-2 border-b border-dashed">
                  <div class="text-sm text-gray-500">Metode Pembayaran</div>
                  <div class="text-sm text-gray-500 text-right" id="rincian-metode">--Belum Pilih--
                  </div>
                </div>
                <div class="mt-2 grid grid-cols-2">
                  <div class="text-sm text-gray-500">Buku: {{ $konten->judul }}</div>
                  <div class="text-sm text-gray-500 text-right" id="rincian-buku">Rp {{
                    number_format($konten->harga,0,",",".") }}</div>
                </div>
                <div class="mt-2 grid grid-cols-2" id="div-rincian-diskon" style="display: none;">
                  <div class="text-sm text-gray-500">Potongan Harga</div>
                  <input type="hidden" name="diskon-input" id="diskon-input" value="0">
                  <div class="text-sm text-gray-500 text-right" id="rincian-diskon"></div>
                </div>
                <div class="mt-2 grid grid-cols-2" id="div-rincian-admin">
                  <div class="text-sm text-gray-500">Biaya Layanan</div>
                  <input type="hidden" name="biaya_admin" id="biaya_admin" value="0">
                  <div class="text-sm text-gray-500 text-right" id="rincian-admin">Rp -</div>
                </div>
                <div class="mt-2 pt-2 grid grid-cols-2 border-t border-dashed">
                  <div class="text-black font-semibold">Total</div>
                  <div class="text-black font-semibold text-right" id="rincian-total">Rp -</div>
                </div>
              </div>
            </div>
            <div
              class="flex gap-2 flex-shrink-0 flex-wrap items-center justify-between rounded-b-md border-t border-neutral-100 pt-4">
              <div
                class="px-8 py-2.5 border-solid border border-black bg-black rounded-xl cursor-pointer hover:shadow-md"
                data-twe-modal-dismiss>
                <div data-twe-ripple-init data-twe-toggle="modal" data-twe-target="#modalHowtoRead"
                  class="flex items-center justify-center gap-2 font-medium text-sm text-white">
                  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path
                      d="M20 12V17C20 18.8856 20 19.8284 19.4142 20.4142C18.8284 21 17.8856 21 16 21H6.5C5.11929 21 4 19.8807 4 18.5V18.5C4 17.1193 5.11929 16 6.5 16H16C17.8856 16 18.8284 16 19.4142 15.4142C20 14.8284 20 13.8856 20 12V7C20 5.11438 20 4.17157 19.4142 3.58579C18.8284 3 17.8856 3 16 3H8C6.11438 3 5.17157 3 4.58579 3.58579C4 4.17157 4 5.11438 4 7V18.5"
                      stroke="#ffffff" stroke-width="2" />
                    <path d="M9 8L15 8" stroke="#ffffff" stroke-width="2" stroke-linecap="round" />
                  </svg>
                  <span>Cara Membaca</span>
                </div>
              </div>
              <div class="flex items-center gap-2">
                <button type="button"
                  class="font-semibold h-10 rounded-xl px-8 py-2.5 text-sm cursor-pointer border-solid border border-primary text-primary hover:bg-gray-100 transition-all ease-out duration-300"
                  data-twe-modal-dismiss data-twe-ripple-init data-twe-ripple-color="light">Kembali</button>
                <button type="submit" disabled id="btn-process-buy" name="btn-process-buy"
                  class="font-semibold h-10 rounded-xl px-8 py-2.5 text-sm cursor-pointer bg-primary hover:bg-primary-dark text-white transition-all ease-out duration-300"
                  data-twe-ripple-init data-twe-ripple-color="light">Check Out!</button>
              </div>
            </div>
          </div>

        </form>
      </div>
    </div>
  </div>
</div>
{{-- End Modal Payment --}}

@if($emailKlaimCard)
{{-- <div data-twe-modal-init
  class="fixed left-0 top-0 z-[99999] hidden h-full w-full overflow-y-auto overflow-x-hidden outline-none"
  id="modalClaimed" tabindex="-1" aria-labelledby="modalClaimedTitle" aria-modal="true" role="dialog"> --}}
  <div data-twe-modal-init data-twe-backdrop="static" data-twe-keyboard="false"
    class="fixed left-0 top-0 z-[99999] hidden h-full w-full overflow-y-auto overflow-x-hidden outline-none"
    id="modalClaimed" tabindex="-1" aria-labelledby="modalClaimedTitle" aria-modal="true" role="dialog">

    <div data-twe-modal-dialog-ref
      class="pointer-events-none relative flex min-h-[calc(100%-1rem)] w-auto translate-y-[-50px] items-center opacity-0 transition-all duration-300 ease-in-out min-[576px]:mx-auto min-[576px]:mt-7 min-[576px]:min-h-[calc(100%-3.5rem)] min-[576px]:max-w-[500px]">
      <div
        class="m-4 pointer-events-auto relative flex w-full flex-col rounded-2xl border-none bg-white bg-clip-padding text-current shadow-4 outline-none">
        <div class="flex flex-shrink-0 items-center justify-end rounded-t-2xl p-4">
          <!-- Modal title -->
          <!-- Close button -->
          {{-- <button type="button"
            class="box-content rounded-none border-none text-neutral-500 hover:text-neutral-800 hover:no-underline focus:text-neutral-800 focus:opacity-100 focus:shadow-none focus:outline-none"
            data-twe-modal-dismiss aria-label="Close">
            <span class="[&>svg]:h-6 [&>svg]:w-6">
              <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" stroke-width="1.5"
                stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
              </svg>
            </span>
          </button> --}}
        </div>

        <!-- Modal body -->
        <div class="relative p-8 px-4">
          <div class="text-center">
            <img src="{{ asset('images/buku-sudah-diklaim.png') }}" alt="buku sudah diklaim" class="h-44 mx-auto">
            <h1 class="mt-4 font-semibold text-black text-lg">Yaaah...</h1>
            <p class="mt-2 text-gray-500">Buku ini sudah diklaim oleh {{$emailKlaimCard}}. <strong>Silakan lakukan
                pembelian buku ini agar menjadi milik Anda</strong>.</p>
            <div class="flex justify-center">
              <div class="flex gap-2">
                <a href="{{ url('book', ['kode_konten'=>$kode_konten, 'slug'=>$slug]) }}?aliasCard={{$aliasCard}}"
                  class="btn btn-primary btn-sm px-8 mt-6" data-twe-ripple-init data-twe-ripple-color="light">Lihat
                  Detail
                  Buku</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  @endif
  @endsection

  @section('javascript')
  <script src="{{ asset('js/jquery-3.7.1.min.js') }}"></script>
  <script src="{{ asset('js/tw-elements.umd.min.js') }}"></script>
  <script>
    $(document).ready(function () {
    const notifClaimed = $('#notifClaimed');
      notifClaimed[0].click();
  });

    const currentUrl = window.location.href;
    // Buat URL object untuk manipulasi yang lebih mudah
    const urlObj = new URL(currentUrl);
    
    // Hapus www dari hostname jika ada
    if (urlObj.hostname.startsWith('www.')) {
        urlObj.hostname = urlObj.hostname.replace('www.', '');
    }
    
  document.getElementById('canonicalTagPreview').href = urlObj.toString();

  // @if($emailKlaimCard)
  //  alert('Buku ini sudah diklaim oleh {{$emailKlaimCard}}. Silakan lakukan pembelian di halaman ini dan unduh aplikasi Bacabuku untuk membaca.');
  // @endif
  
  document.addEventListener('keydown', function(event) {
          if (event.key === 'PrintScreen') {
              event.preventDefault();
              alert('Screenshot tidak diizinkan.');
          }
      });
      

      document.addEventListener('contextmenu', function(event) {
          event.preventDefault();
      });

      document.addEventListener('copy', function(event) {
          event.preventDefault();
          alert('Salin teks tidak diizinkan.');
      });

      function baca() {
          const token = localStorage.getItem('token');
          const url = `bintangpusnas://baca?content={{$kode_konten}}&type=buku&token=${token}`;
          window.location.href = url;
      }


  var tampil = 0;
  var active = 0;
  var teksutama = "Maaf screenshot tidak diperkenankan. Klik untuk melanjutkan baca yang sedang anda baca.";
  var tekskeluar = "Silahkan klik untuk melanjutkan membaca buku yang sedang ada baca."
  var teksjelas = "Silahkan klik 2x untuk membaca buku lebih jelas."

  function noScreenshot(options, overlayId) {
    window.scrollTo(0, 1);
    options = options || {};

    const {
      disableRightClick = true,
        disableKeyboardShortcuts = true,
        disableInspectElement = true,
        disablePrintScreen = true,
        disableScreenshot = true,
        disableFunctionKeys = true,
        disableCtrlF4 = true,
        mouseLeave = true,
        mouseEnterAutoHide = true,
        ctrlOverlay = true,
        altOverlay = false,
        shiftOverlay = false,
    } = options;

    if (disableRightClick) {
      window.document.addEventListener('contextmenu', event => event.preventDefault());
    }

    if (disableKeyboardShortcuts) {
      window.document.addEventListener('keydown', event => {
        // Disable keyboard shortcuts
        if ((event.ctrlKey && (event.key === 'c' || event.key === 'u' || event.key === 'i' || event.key === 'j' || event.key === 'k' || event.key === 's')) || (event.metaKey && (event.key === 'c' || event.key === 'u' || event.key === 'i' || event.key === 'j' || event.key === 'k' || event.key === 's'))) {
          event.preventDefault();
        }
      });

      window.document.addEventListener('keydown', event => {
        if ((event.ctrlKey && event.shiftKey && event.key === 's') || (event.ctrlKey && event.key === 's') || (event.metaKey && event.shiftKey && event.key === 's') || (event.metaKey && event.key === 's')) {
          event.preventDefault();
        }
      });
      window.document.addEventListener('keydown', event => {
        if ((event.ctrlKey && event.key === 's') || (event.metaKey && event.key === 's')) {
          event.preventDefault();
        }
      });
      window.document.addEventListener('keydown', event => {
        if (event.metaKey && event.shiftKey && event.key === 's') {
          event.preventDefault();
        }
      });
      window.document.addEventListener('keydown', event => {
        if (event.metaKey && event.key === 's') {
          event.preventDefault();
        }
      });
      window.document.addEventListener('keydown', event => {
        if (event.ctrlKey && event.shiftKey && event.key === 'i') {
          event.preventDefault();
        }
      });
      window.document.addEventListener('keydown', event => {
        if (event.metaKey && event.shiftKey && event.key === 'i') {
          event.preventDefault();
        }
      });
      window.document.addEventListener('keydown', event => {
        if (event.ctrlKey && event.key === 'i') {
          event.preventDefault();
        }
      });
      window.document.addEventListener('keydown', event => {
        if (event.metaKey && event.key === 'i') {
          event.preventDefault();
        }
      });
      window.document.addEventListener('keydown', event => {
        if ((event.ctrlKey && event.shiftKey && event.key === 'j') || (event.ctrlKey && event.key === 'j') || (event.metaKey && event.shiftKey && event.key === 'j') || (event.metaKey && event.key === 'j') || (event.ctrlKey && event.shiftKey && event.key === 'k') || (event.ctrlKey && event.key === 'k') || (event.metaKey && event.shiftKey && event.key === 'k') || (event.metaKey && event.key === 'k')) {
          event.preventDefault();
        }
      });
      window.document.addEventListener('keydown', event => {
        if ((event.metaKey && event.shiftKey && event.key === 'j') || (event.metaKey && event.shiftKey && event.key === '4')) {
          event.preventDefault();
        }

        if (event.metaKey && event.key === '$') {
          event.preventDefault(); // Prevent the default action
        }

      });
      window.document.addEventListener('keydown', event => {
        if (event.metaKey && event.shiftKey && event.key === 'k') {
          event.preventDefault();
        }
      });
    }

    if (disableInspectElement) {
      window.document.addEventListener('keydown', event => {
        if ((event.ctrlKey && event.shiftKey && event.key === 'i') || (event.metaKey && event.shiftKey && event.key === 'i')) {
          event.preventDefault();
        }
      });
    }

    if (disablePrintScreen) {
      window.document.addEventListener('keydown', event => {
        if ((event.key === 'PrintScreen')) {
          event.preventDefault();
        }
      });
      window.document.addEventListener('keyup', (event) => {
        if (event.key === 'PrintScreen') {
          navigator.clipboard.writeText('')
          active = 1;
          
          overlayScreen('no-screenshot-overlay', teksutama)
        } else {
          active = 0;
        }
      })

    }
    if (disableFunctionKeys) {
      window.document.addEventListener('keydown', event => {
        if (event.key === 'F1' || event.key === 'F2' || event.key === 'F3' || event.key === 'F5' || event.key === 'F6' || event.key === 'F7' || event.key === 'F8' || event.key === 'F9' || event.key === 'F10' || event.key === 'F11' || event.key === 'F12') {
          event.preventDefault();
        }
      });
    }

    if (disableCtrlF4) {
      window.document.addEventListener('keydown', event => {
        if (event.ctrlKey && event.key === 'F4') {
          event.preventDefault();
        }
      });
    }

    if (mouseLeave) {
      window.document.addEventListener('mouseleave', () => {
          
        overlayScreen('no-screenshot-overlay', tekskeluar);
      });
    }

    if (mouseEnterAutoHide) {
      window.document.addEventListener('mouseenter', () => {
        HideOverlayScreen(overlayId);
      });
    }

    if (ctrlOverlay) {
      window.document.addEventListener('keydown', event => {
        if (event.ctrlKey || event.metaKey) {
          
          overlayScreen(overlayId, teksutama);
          active = 1;
        }
      });
    }

    if (altOverlay) {
      window.document.addEventListener('keydown', event => {
        if (event.altKey || event.optionsKey) {
          
          overlayScreen(overlayId, teksutama);
          active = 1;
        }
      });
    }

    if (shiftOverlay) {
      window.document.addEventListener('keydown', event => {
        if (event.shiftKey) {
          
          overlayScreen(overlayId, teksutama);
          active = 1;
        }
      });
    }

  }

  function showInitialInfo(teks) {
    const infoId = 'info-preview-message';
    if (document.getElementById(infoId)) return;

    const info = document.createElement('div');
    info.id = infoId;
    info.style.position = 'fixed';
    info.style.top = '100px'; 
    info.style.left = '50%';
    info.style.transform = 'translateX(-50%)';
    info.style.zIndex = '9999';
    info.style.background = 'transparent';
    info.style.color = '#000';
    info.style.fontSize = '14px';
    info.style.fontWeight = 'bold';
    info.style.padding = '8px 16px';
    info.style.borderRadius = '5px';
    info.style.boxShadow = '0 2px 4px rgba(0,0,0,0.2)';
    info.style.pointerEvents = 'none';
    info.style.textAlign = 'center';

    info.innerText = teks;
    document.body.appendChild(info);

    // Hilangkan saat klik dua kali
    document.addEventListener('dblclick', () => {
        const el = document.getElementById(infoId);
        if (el) el.remove();
    });

    // Hilangkan juga saat klik sekali
    window.document.addEventListener('click', () => {
        const el = document.getElementById(infoId);
        if (el) el.remove();
    });
}



  function overlayScreen(overlayId, teks) {
    if (tampil == 0) {
      window.parent.postMessage('show', "*");
      tampil = 1;
    }
    let el = document.getElementById(overlayId);
    if (el == null) {
      if (overlayId) {
        const customOverlay = window.document.getElementById(overlayId);
        if (customOverlay) {
          customOverlay.style.position = 'fixed';
          customOverlay.style.top = '0';
          customOverlay.style.left = '0';
          customOverlay.style.width = '100%';
          customOverlay.style.height = '100%';
          customOverlay.style.zIndex = '99';
          customOverlay.style.display = 'flex';
          customOverlay.style.alignItems = 'center';
          customOverlay.style.justifyContent = 'center';

          // Disable pointer events on body while the overlay is active
          window.document.body.style.pointerEvents = 'none';

          window.document.addEventListener('keydown', escListener);

          function escListener(event) {
            if (event.key === 'Escape') {
              customOverlay.style.display = 'none'; // Hide the custom overlay
              window.document.body.style.pointerEvents = 'auto'; // Re-enable pointer events on body
              window.document.removeEventListener('keydown', escListener);
            }
          }

          return;
        }
      }

      const overlay = window.document.createElement('div');
      overlay.id = 'no-screenshot-overlay';
      overlay.style.position = 'fixed';
      overlay.style.top = '68px';
      overlay.style.left = '0';
      overlay.style.width = '100%';
      overlay.style.height = '78%';
      overlay.style.background = 'rgba(0, 0, 0, 1)';
      overlay.style.zIndex = '99';
      overlay.style.display = 'flex';
      overlay.style.alignItems = 'center';
      overlay.style.justifyContent = 'center';
      if (teks != "") {
        const message = window.document.createElement('div');
        message.textContent = teks;
        message.style.fontSize = '14px';
        message.style.color = 'white'; 
        overlay.appendChild(message);
      }
      window.document.body.append(overlay);
      window.document.addEventListener('mouseenter', () => {
      });
      window.document.addEventListener('click', () => {
        HideOverlayScreen('no-screenshot-overlay');
      });
    }

  }


  function HideOverlayScreen(overlayId) {
    if (active == 0) {
      var overlay = window.document.getElementById('no-screenshot-overlay');
      window.document.body.removeChild(overlay);
      window.document.body.style.pointerEvents = 'auto';
      if (tampil == 1) {
        window.parent.postMessage('hide', "*");
        tampil = 0;
      }
    }
  }

  window.onload = function() {
  showInitialInfo(teksjelas);

  noScreenshot({
    altOverlay: true,
    shiftOverlay: true,
    mouseLeave: true,
    mouseEnterAutoHide: false
  });
};


  document.onclick = function(e) {
    HideOverlayScreen('no-screenshot-overlay');
  };

  window.addEventListener("message", onMessage, false);

  function onMessage(event) {
    //if (event.origin !== "http://example.com") return;

    var data = event.data;

    if (data == "show") {
      
      overlayScreen('no-screenshot-overlay', tekskeluar);
    } else if (data == "hide") {
      HideOverlayScreen('no-screenshot-overlay');
    }
  }
  </script>


  <script>
    function klikPreview() {
        $('#loading-preview').removeClass('hidden')
        $('#a-preview').addClass('hidden')
        $('#loading-preview-mobile').removeClass('hidden')
        $('#a-preview-mobile').addClass('hidden')
    }

    function convertToSlug(Text) {
        return Text.toLowerCase()
            .replace(/ /g, "-")
            .replace(/[^\w-]+/g, "");
    }

    $(window).scroll(function() {
        // Show/hide product summary on scroll
        var scroll = $(window).scrollTop();
        if (scroll > 400) {
            $('.product-sum').addClass('block');
            $('.product-sum').removeClass('hidden');
        } else {
            $('.product-sum').addClass('hidden');
            $('.product-sum').removeClass('block');
        }
    });

    function formatRupiah(number) {
        return new Intl.NumberFormat('id-ID', {
            style: 'currency',
            currency: 'IDR',
            minimumFractionDigits: 0,
            maximumFractionDigits: 0
        }).format(number);
    }

    function formatFileSize(sizeInKB) {
        const sizeInMB = sizeInKB / 1024;
        return sizeInMB.toFixed(2) + ' MB';
    }

    function formatThousand(number) {
        return number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");
    }

    function belibuku() {
        
        var amount = "{{ $konten->harga }}";
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        $.ajax({
            "url": "{{ route('paymentMethod') }}",
            "type": "POST",
            "data": {
                'amount': '{{ $konten->harga }}'                }
        }).done(function(data) {

            if (data.data.responseMessage === 'SUCCESS') {
                var amount = parseInt('{{ $konten->harga }}');

                data.data.paymentFee.sort(function(a, b) {
                    var totalA = parseInt(a.totalFee) + amount;
                    var totalB = parseInt(b.totalFee) + amount;
                    return totalA - totalB;
                });

                data.data.paymentFee.forEach(paymentMethod => {
                    var hargaBuku = amount;
                    var hargaBukuFee = parseInt(paymentMethod.totalFee) + amount;

                    var html = `
                        <div>
                            <label for="${paymentMethod.paymentMethod}"
                                class="flex items-center justify-between cursor-pointer rounded-xl border border-gray-100 p-4 text-sm font-medium hover:border-gray-200 has-[:checked]:border-primary has-[:checked]:ring-1 has-[:checked]:ring-primary">
                                <div>
                                    <img src="${paymentMethod.paymentImage}" alt="${paymentMethod.paymentName}" class="h-6" />
                                    <p class="mt-1 font-medium text-xs text-black">${paymentMethod.paymentName}</p>
                                </div>
                                <div class="text-right">
                                    <p class="font-semibold text-primary">${formatRupiah(hargaBukuFee)}</p>
                                    <span class="text-xs text-gray-500">Biaya Admin: ${paymentMethod.totalFee}</span>
                                </div>
                                <input type="radio" name="PaymentOption" onClick="changeMethod(${hargaBukuFee},${hargaBuku},${paymentMethod.totalFee},'${paymentMethod.paymentName}')" value="${paymentMethod.paymentMethod}" id="${paymentMethod.paymentMethod}" class="sr-only" />
                            </label>
                        </div>
                    `;

                    $('#fieldsetMethod').append(html);
                });

            } else {
                console.error('Gagal mendapatkan metode pembayaran:', data.msg);
            }
        }).fail(function(error) {
            console.error('Terjadi kesalahan:', error);
        });
    }

    function free() {
        $('#buyButton').prop('disabled', true);
        $('#buttonText').addClass('hidden');
        $('#buttonText2').addClass('hidden');
        $('#loadingSpinner').removeClass('hidden');
        $('#loadingSpinner2').removeClass('hidden');

        const harga = "{{ $konten->harga }}";
        const kodeKonten = "{{ $konten->kode_konten }}";
        const urlParams = new URLSearchParams(window.location.search);
        const alias = urlParams.get('alias');
        const aliasCard = urlParams.get('aliasCard');
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        $.ajax({
            url: "{{ route('free.book') }}",
            type: "POST",
            data: {
                buy: harga,
                kode_konten: kodeKonten,
                alias: alias,
                aliasCard: aliasCard,
            }
        }).done(function(response) {
            $('#buyButton').prop('disabled', false);
            $('#buttonText').removeClass('hidden');
            $('#buttonText2').removeClass('hidden');
            $('#loadingSpinner').addClass('hidden');
            $('#loadingSpinner2').addClass('hidden');

            if(response.code === 200){
                notifikasiBook.success(response.msg);

                setTimeout(() => {
                window.location.reload();
            }, 2000);
            }else{
                notifikasiBook.error(response.msg);
            }

            // if (response.code === 'CODE_OK') {
            //     notifikasi.success(response.msg);

            //     alert(response.msg); // Atau tampilkan modal/success message
            //     console.log('Transaksi berhasil:', response.data);
            // } else {
            //     alert(response.msg);
            //     console.warn('Gagal:', response.msg);
            // }
        }).fail(function(error) {
            $('#buyButton').prop('disabled', false);
            $('#buttonText').removeClass('hidden');
            $('#buttonText2').removeClass('hidden');
            $('#loadingSpinner').addClass('hidden');
            $('#loadingSpinner2').addClass('hidden');

            notifikasi.error('Terjadi kesalahan saat memproses permintaan.');
            console.error('Terjadi kesalahan:', error);
        });
    }

    function changeMethod(harga,harga_buku,biaya_admin,metode) 
    {
            getDiskon = $('#diskon-input').val()

            $('#rincian-metode').html(metode)
            $('#rincian-admin').html(formatRupiah(biaya_admin))
            $('#biaya_admin').val(biaya_admin)
            total = parseInt(harga) - parseInt(getDiskon);
            $('#rincian-total').html(formatRupiah(total))
            $('#buy').val(total);
            $('#btn-process-buy').removeAttr('disabled')
            $('#btn-process-buy').html('Beli ' + formatRupiah(total))
    }

    $(document).ready(function() {
        const buyButton = document.getElementById('buyButton');
        const modalBody = document.getElementById('div-payment');
        // const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');

        $(".btn-copy-link").on("click", function() {
            let url = window.location.href;
            let tempInput = $("<input>");
            $("body").append(tempInput);
            tempInput.val(url).select();
            document.execCommand("copy");
            tempInput.remove();
            notyfSuccess.success('Tautan berhasil disalin');
        });
    });

    var notyfVoucher = new Notyf({
        ripple: true,
        duration: 3000,
        dismissible: true,
        position: {
        x: 'right',
        y: 'top',
        },
    });
    
    $('#btn-voucher').click(function() {
        $.ajax({
            url: "{{ route('voucher.check') }}",
            type: "POST",
            data: {
                kode_konten: "{{ $konten->kode_konten }}",
                kode_voucher: $('#kode_voucher').val()
            }
        }).done(function(m){
            if (m.code == 200) {
                var biaya_admin = $('#biaya_admin').val()
                var diskon = m.diskon
                var harga_total = parseInt(m.harga_total) + parseInt(biaya_admin)
                $('#div-rincian-diskon').show()
                $('#diskon-input').val(diskon)
                $('#rincian-diskon').html(formatRupiah(diskon))
                $('#rincian-admin').html(formatRupiah(biaya_admin))
                $('#rincian-total').html(formatRupiah(harga_total))
                $('#btn-process-buy').html('Beli ' + formatRupiah(harga_total))
                notyfVoucher.success(m.message);
            } else {
                notyfVoucher.error(m.message);
                $('#diskon-input').val(0)
                var biaya_admin = $('#biaya_admin').val()
                $('#rincian-diskon').html()
                harga_dasar = "{{$konten->harga}}"
                harga_total = parseInt(harga_dasar) + parseInt(biaya_admin)
                $('#rincian-total').html(formatRupiah(harga_total))
                $('#div-rincian-diskon').hide()
                $('#btn-process-buy').html('Beli'+ formatRupiah(harga_total));

            }
        });
    });
  </script>

  @endsection