@extends('layouts.app')

@section('content')

<section class="content-header">
  <div class="container-fluid">
    <div class="row">
      <div class="col-sm-6">
        <h1 class="float-left">Surat Tugas :: {{$st->nomor_surat}}</h1>

        {{-- @hasanyrole('Admin|Pengawas')
        <a href="{{url('surat-tugas/edit/'.Crypt::encryptString($st->id))}}" class="btn btn-primary float-right">Edit</a>
        @endhasanyrole --}}

      </div>
    </div>
  </div>
</section>

@hasanyrole('Admin|Pengawas|Assign')
@include('surat-tugas.show.html.1_0_detail')
@endhasanyrole

@hasanyrole('Koordinator')
@if($st->jenis_surat_id <> 6)
	@include('surat-tugas.show.html.1_0_detailko')
@endif
@if($st->jenis_surat_id == 6)
	@include('surat-tugas.show.html.1_0_detail')
@endif
@endhasanyrole

@hasanyrole('PA')
@include('surat-tugas.show.html.1_0_detailpa')
@endhasanyrole



@endsection

@section('js')
<script>
  
  jQuery.fn.extend({
    insertAtCaret: function(myValue){
      return this.each(function(i) {
        if (document.selection) {
          //For browsers like Internet Explorer
          this.focus();
          var sel = document.selection.createRange();
          sel.text = myValue;
          this.focus();
        }
        else if (this.selectionStart || this.selectionStart == '0') {
          //For browsers like Firefox and Webkit based
          var startPos = this.selectionStart;
          var endPos = this.selectionEnd;
          var scrollTop = this.scrollTop;
          this.value = this.value.substring(0, startPos)+myValue+this.value.substring(endPos,this.value.length);
          this.focus();
          this.selectionStart = startPos + myValue.length;
          this.selectionEnd = startPos + myValue.length;
          this.scrollTop = scrollTop;
        } else {
          this.value += myValue;
          this.focus();
        }
      });
    }
  });

  function remove_selected(id_input){
      var fileInput = document.getElementById(id_input)
      fileInput.value = ''
      fileInput.dispatchEvent(new Event('change'));
    }

function remove_selected_by_class(id_input){
      var fileInput = document.getElementsByClassName(id_input)
      fileInput.value = ''
      //fileInput.dispatchEvent(new Event('change'));
    }

    var loadiv = `<div class="overlay loadiv">
          <div class="spinner-border text-primary" role="status">
            <span class="sr-only">Loading...</span>
          </div>
        </div>`;
        
$(document).ready(function(){
  

    $("#kode_surat").select2({
    dropdownParent: $('#approveId')
});
  $('#btn_dokumen_upload_surattugas').on('click', function() {
    remove_selected('dokumen_upload_surattugas');
    $('#dokumen_upload_surattugas').trigger("click");
  });

  $("#dokumen_upload_surattugas").change(function(){

    if ($(this).get(0).files.length == 0) {
      return;
    }

    $('#card-dokumen_upload_surattugas').append(loadiv);

    let formData = new FormData();

    formData.append('_token', "{{ csrf_token() }}");
    formData.append('st_id', "{{ $st->id }}");
    formData.append('dokumen_upload_surattugas', $('#dokumen_upload_surattugas')[0].files[0]);

    $.ajax({
        type: "POST",
        method: 'POST',
        data : formData,
        url: "{{url('surat-tugas-api/upload-file-surattugas')}}",
        processData: false,
        contentType: false,

        success: function(data) {
          $('#link_upload_surattugas').html(
            `<a href="{{asset('storage/')}}/`+data.file+`">`+data.file+`</a>`
          );
        },
          complete: function () {
            $('.loadiv').remove();
          }
    });
  });
  


  });

</script>
@endsection