@extends('layout/main_blank')

@section('content')
<style>
    #colors_sketch, #imgCapture {
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        width: 100%;
    }
    .text-center {
        text-align: center;
    }
</style>
<main class="main-content mt-8">
    <section class="min-vh-100 mb-8">
        <div class="container text-center">
            <h3>Tanda tangan dibawah ini</h3>
            <div class="col-xl-4 col-lg-5 col-md-7 mx-auto">
                <div class="col-12">
                    <canvas id="colors_sketch" height="250"></canvas>
                    <img id="imgCapture"/>
                </div>
                <div class="col-12">
                    <button type="submit" class="btn bg-gradient-dark w-40 mx-2 my-4 mb-2" id="btnClear">Ulang</button>
                    <button type="submit" class="btn bg-gradient-dark w-40 mx-2 my-4 mb-2" id="btnPreview">Preview</button>
                    <button type="submit" class="btn bg-gradient-dark w-40 mx-2 my-4 mb-2" id="btnSimpan">Simpan</button>
                </div>
            </div>
        </div>
    </section>
</main>
<script type="text/javascript">
  (function turnOffSWForThisPageOnce() {
    if ('serviceWorker' in navigator && !sessionStorage.getItem('swDisabledForTTD')) {
      navigator.serviceWorker.getRegistrations().then(regs => {
        if (regs && regs.length) {
          return Promise.all(regs.map(r => r.unregister())).then(() => {
            sessionStorage.setItem('swDisabledForTTD', '1');
            location.reload(); // reload sekali supaya halaman tidak dikontrol SW
          });
        }
      });
    }
  })();
</script>

<script type="text/javascript">
  $(function () {
    const $canvas = $('#colors_sketch');
    const $img = $('#imgCapture');
    const $btnSimpan = $('#btnSimpan');
    const $btnPreview = $('#btnPreview');
    const token = $('meta[name="csrf-token"]').attr('content');

    // helper: base64 -> Blob File (hindari body base64 yang bikin WAF marah)
    function dataURLtoFile(dataURL, filename) {
      const arr = dataURL.split(',');
      const mime = arr[0].match(/:(.*?);/)[1];
      const bstr = atob(arr[1]);
      let n = bstr.length;
      const u8 = new Uint8Array(n);
      while (n--) u8[n] = bstr.charCodeAt(n);
      return new File([u8], filename, { type: mime });
    }

    $canvas.sketch();
    $btnSimpan.hide();
    $img.hide();

    $btnPreview.on("click", function () {
      const base64 = $canvas[0].toDataURL("image/png");
      $img.attr("src", base64).show();
      $canvas.hide();
      $btnSimpan.show();
      $btnPreview.hide();
    });

    $("#btnClear").on("click", function () {
      const old = document.getElementById('colors_sketch');
      const nc = document.createElement('canvas');
      nc.id = 'colors_sketch';
      nc.width = old.width || old.getBoundingClientRect().width; // angka, bukan '100%'
      nc.height = 250;
      old.parentNode.replaceChild(nc, old);
      $('#colors_sketch').show().sketch();
      $img.hide();
      $btnSimpan.hide();
      $btnPreview.show();
    });

    $btnSimpan.on("click", function () {
      const canvas = document.getElementById('colors_sketch');
      const base64 = canvas.toDataURL("image/png");
      $img.attr('src', base64).show();

      // === Kirim SEBAGAI FILE, bukan string base64 ===
      const file = dataURLtoFile(base64, 'ttd.png');
      const form = new FormData();
      form.append('image_file', file);                 // << gunakan file
      form.append('type', '{{ $type }}');
      form.append('slug', '{{ $slug }}');
      form.append('_token', token);                    // token di body

      $.ajax({
        url: '{{ route("uploadImageTtd") }}',
        type: 'POST',
        data: form,
        processData: false,
        contentType: false,
        headers: {
          'X-CSRF-TOKEN': token,
          'X-Requested-With': 'XMLHttpRequest',
          'Accept': 'application/json'
        },
        xhrFields: { withCredentials: true },
        success: function (res) {
          alert(res.message || 'Berhasil');
          if (res && res.data && res.data.url) {
            window.location.href = res.data.url;
          }
        },
        error: function (xhr) {
          console.error('Upload error:', xhr.status, xhr.responseText);
          alert('Gagal menyimpan tanda tangan. Coba ulangi.');
        }
      });
    });
  });
</script>
@endsection