@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
    $imagesTTD = [];
    if ($detail->signer) {
       foreach ($detail->signer as $key => $value) {
         if ($detail->ttd_type == 'signature') {
           if ($value->pegawai->user->scan_ttd) {
             if (Storage::exists($value->pegawai->user->scan_ttd)) {
                $imagesTTD[] = 'data:image/png;base64,'.base64_encode(file_get_contents(public_path('back/img/place_signer_'.($key+1).'.png')));
             }
           }
         }elseif ($detail->ttd_type == 'initial') {
           if ($value->pegawai->user->scan_initial) {
             if (Storage::exists($value->pegawai->user->scan_initial)) {
                $imagesTTD[] = 'data:image/png;base64,'.base64_encode(file_get_contents(storage_path('app/'.$value->pegawai->user->scan_initial)));
             }
           }
         }
       }
    }
    $defaultPDF = url(Storage::url($detail->temp_pdf_file));
    if ($detail->number && $detail->isSetTTD()) {
      $defaultPDF = url(Storage::url($detail->pdf_file));
    }
@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="sign" class="btn btn-outline-primary btn-sm" onclick="sign()">
                            <i class="fa fa-save"></i> Sign !
                          </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">
                      @hasanyrole('admin|documenter')
                        @if ($detail->number && !$detail->isSetTTD())
                          <a href="javascript:void(0)" id="signature" class="btn btn-outline-success btn-sm" onclick="drawImages()">
                            <i class="fa fa-pencil-alt"></i> Signature
                          </a>
                          <a href="javascript:void(0)" id="setSign" class="btn btn-outline-success btn-sm" style="display: none" onclick="setTTD()">
                            <i class="fa fa-save"></i> Set Signature
                          </a>
                          <a href="javascript:void(0)" id="signCancel" class="btn btn-outline-secondary btn-sm" style="display: none" onclick="signCancel()">
                            Cancel
                          </a>
                        @endif
                      <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>
                      @endhasanyrole
                      @if ($detail->status == 2 && $detail->pdf_file != null && $detail->isSigned())
                        <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)
                      @foreach ($imagesTTD as $key => $item)
                        <input type="hidden" name="posisi_llx[{{$key}}]">
                        <input type="hidden" name="posisi_lly[{{$key}}]">
                        <input type="hidden" name="posisi_urx[{{$key}}]">
                        <input type="hidden" name="posisi_ury[{{$key}}]">
                      @endforeach
                      <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="{{asset('back')}}/libs/pdfjs-dist/build/pdf.js"></script>

    <script>
      let id_form = "{{$detail->id}}";

      function reject() {
        Swal.fire({
          title: 'Reason of Reject',
          input: 'text',
          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);
        }
      })
      
      const canvas = document.getElementById("the-canvas");
      const ctx = canvas.getContext("2d");

      const imagesTTD = @json($imagesTTD);
      const images = [] ;

      imagesTTD.forEach((e,i) => {
        images.push({
          url: e, x: i*10, y: 10, width: 100, height: 40
        })
      });

      var pdfDataUri = null;
      var url = '{{$defaultPDF}}';
      var pdfjsLib = window['pdfjs-dist/build/pdf'];
      pdfjsLib.GlobalWorkerOptions.workerSrc = '{{asset('back')}}/libs/pdfjs-dist/build/pdf.worker.js';

      var pdfDoc = null,
      pageNum = 1,
      pageRendering = false,
      pageNumPending = null,
      scale = 1

      let selectedImage = null;
      let offsetX = 0;
      let offsetY = 0;
      let isResizing = false;
      let resizeDirection = null;
      let loaded = 0;

      function drawImages() {

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

        loaded = 1;
        for (let i = 0; i < images.length; i++) {
          const img = new Image();
          img.src = images[i].url;
          img.onload = function() {
            ctx.drawImage(img, images[i].x, images[i].y, images[i].width, images[i].height);
            if (selectedImage === images[i]) {
              ctx.strokeStyle = "#15435A";
              ctx.lineWidth = 2;
              ctx.beginPath();
              ctx.rect(images[i].x, images[i].y, images[i].width, images[i].height);
              ctx.stroke();
              ctx.closePath();
              ctx.fillStyle = "#1c84ee";
              ctx.fillRect(images[i].x + images[i].width - 5, images[i].y + images[i].height - 5, 10, 10);
              ctx.fillRect(images[i].x - 5, images[i].y + images[i].height - 5, 10, 10);
              ctx.fillRect(images[i].x + images[i].width - 5, images[i].y - 5, 10, 10);
              ctx.fillRect(images[i].x - 5, images[i].y - 5, 10, 10);

              isShapeExist = true;
            }
          };
        }
      }

      function getMousePos(canvas, event) {
        const rect = canvas.getBoundingClientRect();
        const scaleX = canvas.width / rect.width;
        const scaleY = canvas.height / rect.height;
        return {
          x: (event.clientX - rect.left) * scaleX,
          y: (event.clientY - rect.top) * scaleY
        };
      }

      function onMouseDown(event) {
        const mousePos = getMousePos(canvas, event);
        for (let i = images.length - 1; i >= 0; i--) {
          const img = new Image();
          img.src = images[i].url;
          const x = images[i].x;
          const y = images[i].y;
          const w = images[i].width;
          const h = images[i].height;
          if (mousePos.x >= x && mousePos.x < x + w &&
              mousePos.y >= y && mousePos.y < y + h) {
            selectedImage = images[i];
            offsetX = mousePos.x - x;
            offsetY = mousePos.y - y;
            if (mousePos.x > x + w - 10 && mousePos.y > y + h - 10) {
              isResizing = true;
              resizeDirection = "se";
            }
            break;
          }
        }
      }

      function onMouseMove(event) {
        if (selectedImage) {
          const mousePos = getMousePos(canvas, event);
          const x = mousePos.x - offsetX;
          const y = mousePos.y - offsetY;
          const w = selectedImage.width;
          const h = selectedImage.height;
          if (isResizing) {
            if (resizeDirection === "se") {
              selectedImage.width = mousePos.x - selectedImage.x;
              selectedImage.height = mousePos.y - selectedImage.y;
            }
          } else {
            selectedImage.x = x;
            selectedImage.y = y;
          }
          redraw();
        }
      }

      function onMouseUp(event) {
        selectedImage = null;
        isResizing = false;
        resizeDirection = null;
      }

      function redraw() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        renderPage(pageNum)
      }

      function getImageInfo() {
        for (let i = 0; i < images.length; i++) {
          const { x, y, width, height } = images[i];
          console.log(`Image ${i+1} - x: ${x}, y: ${y}, width: ${width}, height: ${height}`);
        }
      }

      function renderPage(pageNum) {
        if (pageRendering) {
          // Cancel the previous render task
          renderTask.cancel();
        }
        pageRendering = true;

        // Using promise to fetch the page
        pdfDoc.getPage(pageNum).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;
            }
            if (loaded == 1) {
              drawImages();
            }
          });
        });

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

      /**
       * 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);
      });

      canvas.addEventListener("mousedown", onMouseDown);
      canvas.addEventListener("mousemove", onMouseMove);
      canvas.addEventListener("mouseup", onMouseUp);

      function setTTD() {

        // console.log(images);
        for (let i = 0; i < images.length; i++) {
          const { x, y, width, height } = images[i];
          images[i]['x'] = x * canvas.width / canvas.width;
          images[i]['y'] = (canvas.height - y) * canvas.height / canvas.height;
          images[i]['width'] = width * canvas.width / canvas.width;
          images[i]['height'] = height * canvas.height / canvas.height;
        }

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

        let field = {
          _token: "{{csrf_token()}}",
          id_form: id_form,
          page_num: pageNum,
          images: images
        };

        return fetch('{{route("forms.setTTD")}}', {
        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(
                'Signature has been set!',
                '',
                '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();
          $('#setSign').hide();
          $('#sign').show();
          $('#signCancel').hide();

          loaded = 0;
          renderPage(1)
        }

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

      function sign() {
          Swal.fire({
              title: 'Are you sure to sign this form?',
              icon: 'question',
              confirmButtonText: `Yes, sign!`,
          }).then((result) => {
            if (result.isConfirmed) {
                Swal.fire({
                  title: 'Loading...',
                  allowOutsideClick: false,
                  showConfirmButton: false,
                  didOpen: () => {
                    Swal.showLoading();
                  }
                });
                  $.ajax({
                      url: "{{ route('forms.signFPDI') }}",
                      method: "POST",
                      data: {
                          "_token": "{{ csrf_token() }}",
                          "id_form": id_form
                      },

                      success: function(result) {
                          setInterval(() => {
                              window.location.reload()
                          }, 1000);
                          Swal.close();
                          Swal.fire({
                              title: 'Forms signed!',
                              icon: 'success'
                          });
                      }
                  });
              }else{
                Swal.close();
              }
          });
      }

    </script>
@endsection