@extends('layouts.index')
@section('title')
    Forms Request
@endsection
@inject('disposition', 'App\Models\FormDisposition')
@section('css')
    <link
        href="{{ asset('back') }}/libs/dropzone/dist/min/dropzone.min.css"
        rel="stylesheet"
    />
    <link
      rel="stylesheet"
      type="text/css"
      href="{{ asset('back') }}/libs/select2/dist/css/select2.min.css"
    />
    <link
      rel="stylesheet"
      type="text/css"
      href="{{ asset('back') }}/libs/ckeditor/samples/toolbarconfigurator/lib/codemirror/neo.css"
    />
    <link
      rel="stylesheet"
      type="text/css"
      href="{{ asset('back') }}/libs/ckeditor/samples/css/samples.css"
    />
    <style>
      #the-canvas {
        border: 1px solid black;
      }
    </style>
    
@endsection
@php
    $imgTTD = null;
    if ($detail->ttd_type == 'signature') {
      if (Auth::user()->scan_ttd) {
        if (Storage::exists(Auth::user()->scan_ttd)) {
           $imgTTD = 'data:image/png;base64,'.base64_encode(file_get_contents(storage_path('app/'.Auth::user()->scan_ttd)));
        }
      }
    }elseif ($detail->ttd_type == 'initial') {
      if (Auth::user()->scan_initial) {
        if (Storage::exists(Auth::user()->scan_initial)) {
           $imgTTD = 'data:image/png;base64,'.base64_encode(file_get_contents(storage_path('app/'.Auth::user()->scan_initial)));
        }
      }
    }
@endphp
@section('content')
      <!-- ============================================================= -->
      <!-- Right Part  Mail detail -->
      <!-- ============================================================= -->
      <div class="container-fluid">
        <div>
          <div class="card-body border-bottom">
            <div class="row">
              <div class="flex">
                <div class="justify-content-between">
                  <div class="float-start">
                    <h4 class="mb-0">{{$detail->subject}}</h4>
                  </div>
                  <div class="float-end">
                    <div class="text-end">
                      <a href="{{ URL::previous() }}" class="btn btn-dark"> <i class="fa fa-redo-alt"></i> Back</a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="scrollable position-relative"
            style="height: calc(100vh - 240px)"
          >
            <div class="card-body border-bottom">
              <div class="d-flex no-block align-items-center mb-5">
                <div class="me-2">
                  <img
                    src="{{$detail->makers->photos_storage}}"
                    alt="user"
                    class="rounded-circle"
                    width="45"
                    height="45"
                  />
                </div>
                <div class="">
                  <h5 class="mb-0 fs-4 font-weight-medium">
                    {{$detail->makers->pegawai ? $detail->makers->pegawai->nama_lengkap : $detail->makers->name}} <small> ( {{$detail->makers->email}} )</small>
                  </h5>
                  <span>to {{$to}}</span>
                </div>
              </div>
              <div class="row">
                <div class="col-md-8">
                  <div class="d-flex justify-content-between mb-3">
                    <div class="float-start">
                      <div id="afterNumber" @if($detail->number == null) style="display:none" @endif>
                        @php
                            $id_pegawai = Auth::user()->pegawai ? Auth::user()->pegawai->id : 0;
                            $id_pegawai_signer = $signerActive ? $signerActive->id_pegawai : -1;
                        @endphp
                        @if ($id_pegawai_signer == $id_pegawai)
                          <a href="javascript:void(0)" id="signature" class="btn btn-outline-success btn-sm" onclick="init()">
                            <i class="fa fa-pencil-alt"></i> Signature
                          </a>
                          <a href="javascript:void(0)" id="sign" class="btn btn-outline-success btn-sm" style="display: none" onclick="sign()">
                            <i class="fa fa-save"></i> Sign !
                          </a>
                          <a href="javascript:void(0)" id="signCancel" class="btn btn-outline-secondary btn-sm" style="display: none" onclick="signCancel()">
                            Cancel
                          </a>
                          <a href="javascript:void(0)" class="btn btn-outline-danger btn-sm" id="reject" onclick="reject()">
                            <i class="fa fa-undo-alt"></i> Reject
                          </a>
                        @endif
                      </div>
                    </div>
                    <div class="float-end">
                      @can('numbering')
                      <div id="beforeNumber" @if($detail->number) style="display:none" @endif >
                        <a href="javascript:void(0)" id="number" class="btn btn-outline-success" onclick="register()">
                          <i class="fa fa-registered"></i> Add Number
                        </a>
                      </div>
                      @endcan
                      @if ($detail->status == 2 && $detail->pdf_file != null)
                        <a href="{{url(Storage::url($detail->pdf_file))}}" class="btn btn-primary" download>
                          <i class="fa fa-pdf-file"></i> Download
                        </a>
                        <a href="javascript:void(0)" onclick="disposition({{$detail->id}})" class="btn btn-outline-warning">
                          <i class="fa fa-pdf-file"></i> Forward
                        </a>
                      @endif
                      @if ($detail->maker == Auth::user()->id && $detail->status != 2)
                        <a href="{{route('forms.edit', $detail->hash_id)}}" class="btn btn-sm btn-outline-success">
                          <i class="fa fa-edit"></i> Edit
                        </a>
                      @endif
                    </div>
                  </div>
                  @if ($detail->temp_pdf_file)
                      <input type="hidden" name="posisi_llx">
                      <input type="hidden" name="posisi_lly">
                      <input type="hidden" name="posisi_urx">
                      <input type="hidden" name="posisi_ury">
                      <input type="hidden" name="save" value="1">
                      <center>
                        <canvas id="the-canvas" class="mt-2" style="border:solid 1px #f6f6f6"></canvas>
                        <div>
                            <button id="prev" class="btn btn-primary btn-sm">Sebelumnya</button>
                            <button id="next" class="btn btn-primary btn-sm">Selanjutnya</button>
                            &nbsp; &nbsp;
                            <span>Halaman : <span id="page_num"></span> / <span id="page_count"></span></span>
                        </div>
                      </center>
                  @else 
                    <iframe src="https://view.officeapps.live.com/op/embed.aspx?src={{url(Storage::url($detail->temp_word_file))}}&embedded=true" id="previewOffice" width="100%" height="623px" frameborder="0">This is an embedded <a target='_blank' href='http://office.com'>Microsoft Office</a> document, powered by <a target='_blank' href='http://office.com/webapps'>Office Online</a>.</iframe>
                  @endif
                    <div class="d-flex justify-content-between container-fluid">
                      <div class="float-start">
                      </div>
                      <div class="float-end" style="display: none">
                          <a href="{{Storage::url($detail->temp_word_file)}}" class="btn btn-outline-info btn-sm" download="">
                              <i class="fa fa-file-word"></i> Download
                          </a>
                          <form id="form-upload" method="POST" style="all: unset">
                            <a href="javascript:void(0)" id="uploadHref" class="btn btn-outline-warning btn-sm">
                              <i class="fa fa-upload"></i> Upload
                            </a>
                            <input type="file" name="file" id="upload" style="display: none" onchange="uploadSubmit()">
                            <input type="submit" id="formSubmit" style="display: none">
                          </form>
                      </div>
                    </div>
                    @if ($detail->attachment)
                      <div class="mt-3">
                        <div class="d-flex">
                          <div>
                            {{-- <img src="https://cdn.svgporn.com/logos/launchdarkly-icon.svg" class="" width="50px" alt=""> --}}
                            <i class="fa fa-file-alt fa-4x"></i>
                          </div>
                          &nbsp;&nbsp;&nbsp;
                          <div class="d-flex-wrap">
                            <h4>Attachment</h4>
                            <a href="{{Storage::url($detail->attachment)}}" download="">Download here</a>
                          </div>
                        </div>
                      </div>
                    @endif
                </div>
                
                <div class="col-md-4">
                    <h4> <i data-feather="activity"></i> Log Activity</h4>
                    <ul class="timeline timeline-left">
                      @foreach ($activity as $item)
                        @php
                            $icon = '';
                            if($item->description == 'created'){
                              $color = 'warning';
                              $icon = 'fa fa-plus';
                            }
                            if($item->description == 'registered'){
                              $color = 'primary';
                              $icon = 'fa fa-registered';
                            }
                            if($item->description == 'rejected'){
                              $color = 'danger';
                              $icon = 'fa fa-undo';
                            }
                            if($item->description == 'signed'){
                              $color = 'success';
                              $icon = 'fa fa-check';
                            }
                            if($item->description == 'uploaded'){
                              $color = 'info';
                              $icon = 'fa fa-upload';
                            }
                            if($item->description == 'updated'){
                              $color = 'info';
                              $icon = 'fa fa-edit';
                            }
                            if($item->description == 'disposition'){
                              $color = 'warning';
                              $icon = 'fa fa-forward';
                            }
                        @endphp
                        <li class="timeline-inverted timeline-item">
                            <div class="timeline-badge {{$color}}">
                            <i class="{{$icon}}"></i>
                            </div>
                            <div class="timeline-panel">
                            <div class="timeline-heading">
                                <h4 class="timeline-title">Forms {{($item->description == 'disposition') ? 'Forwarded' : ucfirst($item->description)}}</h4>
                            </div>
                            <div class="timeline-body">
                                <p>{{$item->causer->name}} <br><small class="text-bold">({{$item->causer->pegawai ? ($item->causer->pegawai->jabatan ? $item->causer->pegawai->jabatan->nama : '-') : '-'}})</small></p>
                                <small>{{date('d F Y - H:i:s', strtotime($item->created_at))}}</small>
                                @if ($item->description == 'rejected')
                                <p>
                                  <small>
                                    <mark>{{$item->getExtraProperty('note')}}</mark>  
                                  </small> 
                                </p>
                                @endif
                                @if ($item->description == 'disposition')
                                <p>
                                  <small>
                                    <mark>{{$item->getExtraProperty('instructions')}}</mark>  
                                  </small> 
                                </p>
                                @php
                                    $forwarded = $disposition->with('pegawai')->find($item->getExtraProperty('id'));
                                @endphp
                                <div class="align-items-center mt-1">
                                  @foreach ($forwarded->pegawai as $i)
                                    <a href="#">
                                      <img
                                        src="{{$i->pegawai->foto_storage}}"
                                        class="
                                          rounded-circle
                                          me-n2
                                          card-hover
                                          border border-2 border-white
                                        "
                                        width="35"
                                        height="35"
                                        data-bs-toggle="tooltip" data-bs-placement="top" title="{{$i->pegawai->nama_lengkap}}"
                                      />
                                    </a>
                                  @endforeach
                                </div>
                                @endif
                            </div>
                            </div>
                        </li>
                      @endforeach
                    </ul>
                </div>
            </div>
          </div>
        </div>
      </div>
@endsection
@section('js')
    <script src="{{asset('back')}}/libs/select2/dist/js/select2.full.min.js"></script>
    <script src="{{asset('back')}}/libs/select2/dist/js/select2.min.js"></script>
    <script src="{{asset('back')}}/js/pages/forms/select2/select2.init.js"></script>
    <script src="{{asset('back')}}/libs/ckeditor/ckeditor.js"></script>
    <script src="{{asset('back')}}/libs/ckeditor/samples/js/sample.js"></script>
    {{-- <script src="//mozilla.github.io/pdf.js/build/pdf.js"></script> --}}
    <script src="https://unpkg.com/browse/pdfjs-dist@3.11.174/build/pdf.js"></script>
    
    <script>
      let id_form = "{{$detail->id}}";
      

      function reject() {
        Swal.fire({
          title: 'Reason of Reject',
          input: 'text',
          inputAttributes: {
            autocapitalize: 'off'
          },
          showCancelButton: true,
          confirmButtonColor: '#fc4b6c',
          confirmButtonText: 'Reject',
          showLoaderOnConfirm: true,
          preConfirm: (note) => {
            let field = {
                _token: "{{csrf_token()}}",
                id_form: id_form,
                note: note
              };

            return fetch('{{route("forms.reject")}}', {
              method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                  },
                body: JSON.stringify(field)
              })
              .then(response => response.json())
              .then(response => {
                if (response.status == true) {
                  Swal.fire(
                      'Rejected!',
                      '',
                      'success'
                    );
                    setInterval(() => {
                      location.reload()
                    }, 1000);
                }else{
                  Swal.fire(
                      'Fail!',
                      '',
                      'error'
                    )
                }
              })
              .catch(error => {
                Swal.showValidationMessage(
                  `Request failed: ${error}`
                )
              })
          },
          allowOutsideClick: () => !Swal.isLoading()
        }).then((result) => {
          if (result.isConfirmed) {
            Swal.fire(
                'Rejected!',
                'success'
              )
          }
        })
      }

      document.getElementById('uploadHref').onclick = function() {
        document.getElementById('upload').click();
      }

      const formUpload = document.getElementById('form-upload');

      function uploadSubmit() {
        formSubmit.click();
      }

      formUpload.addEventListener('submit', async (e) => {
        e.preventDefault();

        let file = formUpload.file.files[0];

        let formData = new FormData();
        formData.append('id_form', id_form)
        formData.append('file', file)

        try {
            let response = await fetch("{{ route('forms.upload') }}", {
                method: "POST",
                body: formData,
                headers: {
                    "X-CSRF-TOKEN": "{{csrf_token()}}"
                }
            });
            var datasend = await response.json();

            if (datasend.status == true) {

                Swal.fire('Uploaded', '', 'success')

                setTimeout(() => {
                  location.reload()
                }, 1000);
            }else if(datasend.status == false){
                if (datasend.data) {
                    var error = Object.entries(datasend.data);
                    var html = ''
                    error.forEach((key,value) => {
                      if (key[1]) {
                        key[1].forEach((k,v) => {
                          console.log(k);
                          html += '<li>'+k+'</li>'
                        })
                      }
                    });

                    Swal.fire({
                      title: 'Fail !',
                      icon: 'error',
                      html:
                          '<ul>'+html+'</ul>'    
                      ,
                      showCloseButton: true,
                      showCancelButton: false,
                      focusConfirm: false,
                      confirmButtonText:
                        '<i class="fa fa-thumbs-up"></i> Ok!',
                      confirmButtonAriaLabel: 'Thumbs up, great!',
                    })
                }
            }

        } catch (err) {
            console.log(err);
        }
      })

      var imageTTD = '{{$imgTTD}}';
      var img = null;
      var pdfDataUri = null;
      
      var url = '{{url(Storage::url($detail->temp_pdf_file))}}';
      
      var pdfjsLib = window['pdfjs-dist/build/pdf'];
      
      pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://unpkg.com/browse/pdfjs-dist@3.11.174/build/pdf.worker.js';

      var pdfDoc = null,
      pageNum = 1,
      pageRendering = false,
      pageNumPending = null,
      scale = 1,
      canvas = document.getElementById('the-canvas'),
      ctx = canvas.getContext('2d');
      context = ctx;

      flag = false;
      let isShapeExist = false;
      var prevX = 0,
          currX = 0,
          prevY = 0,
          currY = 0,
          baseX = 0,
          baseY = 0,
          w, llx, lly, urx, ury, dvcRatio,
          h;
      scale = 1;
      dot_flag = false;
      first_pinch = true;
      first_init = true;

      let shapeX, shapeY, shapeWidth, shapeHeight;

      let isDragging = false;
      let isResize = false;
      let resizeDirection = '';

      var ori_img;

      function init() {
          $('#signature').hide();
          $('#reject').hide();
          $('#sign').show();
          $('#signCancel').show();

            w = canvas.width;
            h = canvas.height;

            dvcRatio = 1;

            canvas.addEventListener("mousemove", function(e) {
                findxy('move', e)
            }, false);
            canvas.addEventListener("mousedown", function(e) {
                findxy('down', e)
            }, false);
            canvas.addEventListener("mouseup", function(e) {
                findxy('up', e)
            }, false);
            canvas.addEventListener("mouseout", function(e) {
                findxy('out', e)
            }, false);


            ori_img = ctx.getImageData(0, 0, w, h);
            ctx.clearRect(0, 0, w, h);
            ctx.putImageData(ori_img, 0, 0);
            drawRect(0, 0, 200, 100);
        }

        function findxy(res, e) {
            if (res == 'down') {
                // console.log("DOWN action");
                baseX = e.clientX;
                baseY = e.clientY;
                if (isMouseInRightBottomCorner(e.clientX, e.clientY) || isMouseInLeftTopCorner(e.clientX, e.clientY) || isMouseInRightTopCorner(e.clientX, e.clientY) || isMouseInLeftBottomCorner(e.clientX, e.clientY)) {
                    isResize = true;
                    isDragging = false;
                    if (isMouseInRightBottomCorner(e.clientX, e.clientY)) {
                        resizeDirection = 'rightBottom';
                    } else if (isMouseInLeftTopCorner(e.clientX, e.clientY)) {
                        resizeDirection = 'leftTop';
                    } else if (isMouseInRightTopCorner(e.clientX, e.clientY)) {
                        resizeDirection = 'rightTop';
                    } else if (isMouseInLeftBottomCorner(e.clientX, e.clientY)) {
                        resizeDirection = 'leftBottom';
                    }


                } else if (isMouseInShape(e.clientX, e.clientY)) {
                    isResize = false;
                    isDragging = true;
                } else {
                    isResize = false;
                    isDragging = false;
                    if (isShapeExist) {
                        ctx.clearRect(0, 0, w, h);
                        ctx.putImageData(ori_img, 0, 0);
                        shapeHeight = img.height * (shapeWidth / img.width);
                        ctx.drawImage(img, shapeX, shapeY, shapeWidth, shapeHeight);
                    }
                }
            }
            if (res == 'up') {
                // console.log("UP action");
                flag = false;
                isDragging = false;
                isResize = false;
                if (isShapeExist) {
                    if (isMouseInShape(e.clientX, e.clientY)) {
                        ctx.clearRect(0, 0, w, h);
                        ctx.putImageData(ori_img, 0, 0);
                        shapeHeight = img.height * (shapeWidth / img.width);
                        ctx.drawImage(img, shapeX, shapeY, shapeWidth, shapeHeight);
                        ctx.strokeStyle = "#1c84ee";
                        ctx.lineWidth = 2;
                        ctx.beginPath();
                        ctx.rect(shapeX, shapeY, shapeWidth, shapeHeight);
                        ctx.stroke();
                        ctx.closePath();
                        ctx.fillStyle = "#1c84ee";
                        ctx.fillRect(shapeX + shapeWidth - 5, shapeY + shapeHeight - 5, 10, 10);
                        ctx.fillRect(shapeX - 5, shapeY + shapeHeight - 5, 10, 10);
                        ctx.fillRect(shapeX + shapeWidth - 5, shapeY - 5, 10, 10);
                        ctx.fillRect(shapeX - 5, shapeY - 5, 10, 10);
                    }
                }
                // console.log("Dest X >>>" + e.clientX);
                // console.log("Dest Y >>>" + e.clientY);
            }
            if (res == 'out') {
                flag = false;
                isDragging = false;
                isResize = false;
            }
            if (res == 'move') {
                if (isMouseInRightBottomCorner(e.clientX, e.clientY) || isMouseInLeftTopCorner(e.clientX, e.clientY)) {
                    canvas.style.cursor = "nwse-resize";
                } else if (isMouseInRightTopCorner(e.clientX, e.clientY) || isMouseInLeftBottomCorner(e.clientX, e.clientY)) {
                    canvas.style.cursor = "nesw-resize";

                } else if (isMouseInShape(e.clientX, e.clientY)) {
                    canvas.style.cursor = "move";
                } else {
                    canvas.style.cursor = "default";
                }

                // console.log("MOVE action");
                if (flag) {
                    prevX = currX;
                    prevY = currY;
                    currX = e.clientX;
                    currY = e.clientY;
                    drawRect();
                }

                if (isDragging) {
                    event.preventDefault();
                    var kotak = canvas.getBoundingClientRect();
                    let mouseX = parseInt(e.clientX);
                    let mouseY = parseInt(e.clientY);

                    let dy = mouseY - baseY;
                    let dx = mouseX - baseX;
                    shapeX += dx;
                    shapeY += dy;

                    // console.log("dx: " + dx + " dy: " + dy);

                    ctx.clearRect(0, 0, w, h);
                    ctx.putImageData(ori_img, 0, 0);
                    shapeHeight = img.height * (shapeWidth / img.width);
                    ctx.drawImage(img, shapeX, shapeY, shapeWidth, shapeHeight);

                    getCoordinate();
                    baseX = mouseX;
                    baseY = mouseY;
                }

                if (isResize) {
                    event.preventDefault();
                    var kotak = canvas.getBoundingClientRect();
                    let mouseX = parseInt(e.clientX);
                    let mouseY = parseInt(e.clientY);

                    let dy = mouseY - baseY;
                    let dx = mouseX - baseX;
                    if (resizeDirection == 'rightBottom') {
                        shapeWidth += dx;
                        shapeHeight += dy;
                    } else if (resizeDirection == 'leftTop') {
                        shapeWidth -= dx;
                        shapeHeight -= dy;
                        shapeX += dx;
                        shapeY += dy;
                    } else if (resizeDirection == 'rightTop') {
                        shapeWidth += dx;
                        shapeHeight -= dy;
                        shapeY += dy;
                    } else if (resizeDirection == 'leftBottom') {
                        shapeWidth -= dx;
                        shapeHeight += dy;
                        shapeX += dx;
                    }

                    ctx.clearRect(0, 0, w, h);
                    ctx.putImageData(ori_img, 0, 0);

                    shapeHeight = img.height * (shapeWidth / img.width);
                    ctx.drawImage(img, shapeX, shapeY, shapeWidth, shapeHeight);
                    ctx.strokeStyle = "#1c84ee";
                    ctx.lineWidth = 2;
                    ctx.beginPath();
                    ctx.setLineDash([0]);
                    ctx.rect(shapeX, shapeY, shapeWidth, shapeHeight);
                    ctx.stroke();
                    ctx.closePath();
                    ctx.fillStyle = "#1c84ee";
                    ctx.fillRect(shapeX + shapeWidth - 5, shapeY + shapeHeight - 5, 10, 10);
                    ctx.fillRect(shapeX - 5, shapeY + shapeHeight - 5, 10, 10);
                    ctx.fillRect(shapeX + shapeWidth - 5, shapeY - 5, 10, 10);
                    ctx.fillRect(shapeX - 5, shapeY - 5, 10, 10);

                    getCoordinate();
                    baseX = mouseX;
                    baseY = mouseY;
                }

            }
        }


        function drawRect(sX = '', sY = '', sW = '', sH = '') {
            /*Get viewport by calling getBoundingClientRect() function*/
            var kotak = canvas.getBoundingClientRect();
            var lenX = currX - baseX;
            var lenY = currY - baseY;

            var srcX = baseX - kotak.left;
            var srcY = baseY - kotak.top;
            var dstX = srcX + lenX;
            var dstY = srcY + lenY;
            if (sX !== '' && sY !== '' && sW !== '' && sH !== '') {
                shapeX = sX * dvcRatio;
                shapeY = sY * dvcRatio;
                shapeWidth = sW * dvcRatio;
            } else {
                shapeX = srcX * dvcRatio;
                shapeY = srcY * dvcRatio;
                shapeWidth = lenX * dvcRatio;
            }
            // shapeHeight = lenY * dvcRatio;

            //Redraw canvas to its first 'state'
            ctx.clearRect(0, 0, w, h);
            ctx.putImageData(ori_img, 0, 0);

            // Draw Rectangle above the canvas

            imgData = null;
            img = new Image();
            img.src = imageTTD;
            img.onload = function() {
                shapeHeight = (img.height * (shapeWidth / img.width)) * dvcRatio;
                ctx.drawImage(img, shapeX, shapeY, shapeWidth, shapeHeight);
                ctx.strokeStyle = "#1c84ee";
                ctx.lineWidth = 2;
                ctx.beginPath();
                ctx.rect(shapeX, shapeY, shapeWidth, shapeHeight);
                ctx.stroke();
                ctx.closePath();
                ctx.fillStyle = "#1c84ee";
                ctx.fillRect(shapeX + shapeWidth - 5, shapeY + shapeHeight - 5, 10, 10);
                ctx.fillRect(shapeX - 5, shapeY + shapeHeight - 5, 10, 10);
                ctx.fillRect(shapeX + shapeWidth - 5, shapeY - 5, 10, 10);
                ctx.fillRect(shapeX - 5, shapeY - 5, 10, 10);

                isShapeExist = true;
                
                getCoordinate();
            };
        }

        function getCoordinate() {
            var kotak = canvas.getBoundingClientRect();

            var trans_x1 = shapeX;
            var trans_x2 = shapeX + shapeWidth;
            var trans_y1 = h / dvcRatio - (shapeY / dvcRatio);
            var trans_y2 = h / dvcRatio - (shapeY + shapeHeight);

            imgData = ctx.getImageData(shapeX, shapeY, shapeWidth, shapeHeight);
            console.log(imgData.width);

            llx = (trans_x1 <= trans_x2) ? trans_x1 : trans_x2;
            urx = (trans_x1 > trans_x2) ? trans_x1 : trans_x2;
            lly = (trans_y1 <= trans_y2) ? trans_y1 : trans_y2;
            ury = (trans_y1 > trans_y2) ? trans_y1 : trans_y2;
            $('[name="posisi_llx"]').val(llx / scale);
            $('[name="posisi_lly"]').val(imgData.height);
            $('[name="posisi_urx"]').val(imgData.width);
            $('[name="posisi_ury"]').val(ury / scale);

            $('#llx').html(llx / scale);
            $('#lly').html(imgData.height);
            $('#urx').html(imgData.width);
            $('#ury').html(ury / scale);


        }

        function isMouseInShape(x, y) {
            var rect = canvas.getBoundingClientRect();
            x = x - rect.left;
            y = y - rect.top;

            let shapeLeft = shapeX;
            let shapeRight = shapeX + shapeWidth;
            let shapeTop = shapeY;
            let shapeBottom = shapeY + shapeHeight;

            if (x > shapeLeft && x < shapeRight && y > shapeTop && y < shapeBottom) {
                return true;
            } else {
                return false;
            }
        }

      function isMouseInRightBottomCorner(x, y) {
          var rect = canvas.getBoundingClientRect();
          x = x - rect.left;
          y = y - rect.top;

          let shapeLeft = shapeX + shapeWidth - 5;
          let shapeRight = shapeX + shapeWidth + 5;
          let shapeTop = shapeY + shapeHeight - 5;
          let shapeBottom = shapeY + shapeHeight + 5;

          if (x > shapeLeft && x < shapeRight && y > shapeTop && y < shapeBottom) {
              return true;
          } else {
              return false;
          }
      }

      function isMouseInLeftTopCorner(x, y) {
          var rect = canvas.getBoundingClientRect();
          x = x - rect.left;
          y = y - rect.top;

          let shapeLeft = shapeX - 5;
          let shapeRight = shapeX + 5;
          let shapeTop = shapeY - 5;
          let shapeBottom = shapeY + 5;

          if (x > shapeLeft && x < shapeRight && y > shapeTop && y < shapeBottom) {
              return true;
          } else {
              return false;
          }
      }

      function isMouseInLeftBottomCorner(x, y) {
          var rect = canvas.getBoundingClientRect();
          x = x - rect.left;
          y = y - rect.top;

          let shapeLeft = shapeX - 5;
          let shapeRight = shapeX + 5;
          let shapeTop = shapeY + shapeHeight - 5;
          let shapeBottom = shapeY + shapeHeight + 5;

          if (x > shapeLeft && x < shapeRight && y > shapeTop && y < shapeBottom) {
              return true;
          } else {
              return false;
          }
      }

      function isMouseInRightTopCorner(x, y) {
          var rect = canvas.getBoundingClientRect();
          x = x - rect.left;
          y = y - rect.top;

          let shapeLeft = shapeX + shapeWidth - 5;
          let shapeRight = shapeX + shapeWidth + 5;
          let shapeTop = shapeY - 5;
          let shapeBottom = shapeY + 5;

          if (x > shapeLeft && x < shapeRight && y > shapeTop && y < shapeBottom) {
              return true;
          } else {
              return false;
          }
      }

      function renderPage(num) {
        pageRendering = true;
        // Using promise to fetch the page
        pdfDoc.getPage(num).then(function(page) {
          var viewport = page.getViewport({scale: scale});
          canvas.height = viewport.height;
          canvas.width = viewport.width;

          // Render PDF page into canvas context
          var renderContext = {
            canvasContext: ctx,
            viewport: viewport
          };
          var renderTask = page.render(renderContext);

          // Wait for rendering to finish
          renderTask.promise.then(function() {
            pageRendering = false;
            if (pageNumPending !== null) {
              // New page rendering is pending
              renderPage(pageNumPending);
              pageNumPending = null;
            }
          });
        });

        // Update page counters
        document.getElementById('page_num').textContent = num;
      }

      /**
       * If another page rendering in progress, waits until the rendering is
       * finised. Otherwise, executes rendering immediately.
       */
      function queueRenderPage(num) {
        if (pageRendering) {
          pageNumPending = num;
        } else {
          renderPage(num);
        }
      }

      /**
       * Displays previous page.
       */
      function onPrevPage() {
        if (pageNum <= 1) {
          return;
        }
        pageNum--;
        queueRenderPage(pageNum);
      }
      document.getElementById('prev').addEventListener('click', onPrevPage);

      /**
       * Displays next page.
       */
      function onNextPage() {
        if (pageNum >= pdfDoc.numPages) {
          return;
        }
        pageNum++;
        queueRenderPage(pageNum);
      }
      document.getElementById('next').addEventListener('click', onNextPage);

      /**
       * Asynchronously downloads PDF.
       */
      pdfjsLib.getDocument(url).promise.then(function(pdfDoc_) {
        pdfDoc = pdfDoc_;
        document.getElementById('page_count').textContent = pdfDoc.numPages;

        // Initial/first page rendering
        renderPage(pageNum);
      });

      function sign() {

        Swal.fire({
          title: 'Loading...',
          allowOutsideClick: false,
          showConfirmButton: false,
          didOpen: () => {
            Swal.showLoading();
          }
        });

        let x = $('[name="posisi_llx"]').val();
        let height = $('[name="posisi_lly"]').val();
        let width = $('[name="posisi_urx"]').val();
        let y = $('[name="posisi_ury"]').val();

        let field = {
          _token: "{{csrf_token()}}",
          id_form: id_form,
          x: x,
          y: y,
          width: width,
          height: height
        };

        return fetch('{{route("forms.signFPDI")}}', {
        method: 'POST',
          headers: {
              'Content-Type': 'application/json'
            },
          body: JSON.stringify(field)
        })
        .then(response => response.json())
        .then(response => {
          Swal.close();
          if (response.status == true) {
            Swal.fire(
                'Signed!',
                '',
                'success'
              );
              
            setInterval(() => {
              location.reload();
            }, 1000);
          }else{
            if (response.data) {
                  var error = Object.entries(response.data);
                  error.forEach((key,value) => {
                    Swal.showValidationMessage(
                      key[1]
                    )
                  });
              }
            
          }
        })
        .catch(error => {
          Swal.close();
          Swal.showValidationMessage(
            `Request failed: ${error}`
          )
        })
      }

      function register() {
        Swal.fire({
          title: 'Enter Number',
          input: 'text',
          inputAttributes: {
            autocapitalize: 'off'
          },
          showCancelButton: true,
          confirmButtonColor: '#39cb7f',
          confirmButtonText: 'Submit',
          showLoaderOnConfirm: true,
          preConfirm: (number) => {
            let field = {
                _token: "{{csrf_token()}}",
                id_form: id_form,
                number: number
              };

            return fetch('{{route("forms.register")}}', {
            method: 'POST',
              headers: {
                  'Content-Type': 'application/json'
                },
              body: JSON.stringify(field)
            })
            .then(response => response.json())
            .then(response => {
              if (response.status == true) {
                Swal.fire(
                    'Registered!',
                    '',
                    'success'
                  );
                  setInterval(() => {
                    location.reload()
                  }, 1000);
              }else{
                if (response.data) {
                      var error = Object.entries(response.data);
                      error.forEach((key,value) => {
                        Swal.showValidationMessage(
                          key[1]
                        )
                      });
                  }
                
              }
            })
            .catch(error => {
              Swal.showValidationMessage(
                `Request failed: ${error}`
              )
            })

          },
          allowOutsideClick: () => !Swal.isLoading()
        })
      }

      function signCancel() {

        $('#signature').show();
        $('#reject').show();
        $('#sign').hide();
        $('#signCancel').hide();

        renderPage(1)
        ctx.clearRect(0, 0, img.width, img.height);
      }

      function disposition() {
        let pegawai = @json($pegawai);
        let pegawaiList = '';

        pegawai.forEach((e,i) => {
          pegawaiList += `<option value="${e.id}">${e.nama_lengkap}</option>`
        });

        Swal.fire({
          title: 'Forward',
          html: `
            <textarea id="instructions" name="instructions" class="form-control mb-3" placeholder="Description"></textarea>
            <select id="selectMultiple" name="pegawai" class="form-select" multiple style="width: 100%;">
              <option disabled></option>
              ${pegawaiList}
            </select>
          `,
          confirmButtonColor: '#183e92',
          confirmButtonText: 'Submit',
          didOpen: () => {
            const selectMultiple = document.getElementById('selectMultiple');
            $(selectMultiple).select2({
              width: '100%',
              dropdownParent: $('.swal2-container'),
              placeholder: 'Select an option'
            });
          },
          preConfirm: () => {
            const instructions = document.getElementById('instructions').value;
            const selectMultiple = document.getElementById('selectMultiple');
            const selectedOptions = Array.from(selectMultiple.selectedOptions).map(option => option.value);

            let field = {
                _token: "{{csrf_token()}}",
                id_form: id_form,
                instructions: instructions ?? '',
                pegawai: selectedOptions
              };

            return fetch('{{route("forms.disposition")}}', {
            method: 'POST',
              headers: {
                  'Content-Type': 'application/json'
                },
              body: JSON.stringify(field)
            })
            .then(response => response.json())
            .then(response => {
              if (response.status == true) {
                Swal.fire(
                    'Forwarded!',
                    '',
                    'success'
                  );
                  setInterval(() => {
                    location.reload()
                  }, 1000);
              }else{
                if (response.data) {
                      var error = Object.entries(response.data);
                      error.forEach((key,value) => {
                        Swal.showValidationMessage(
                          key[1]
                        )
                      });
                  }
                
              }
            })
            .catch(error => {
              Swal.showValidationMessage(
                `Request failed: ${error}`
              )
            })

          },
          allowOutsideClick: () => !Swal.isLoading()
        });
      }
    </script>
@endsection