@extends('layouts.app')
@section('content')
<section class="content-header">
  <div class="container-fluid">
    <div class="row">
      <div class="col-sm-12">
        <h1 class="float-left">Edit Surat Tugas - Khusus</h1>
      </div>
    </div>
  </div>
</section>

<section class="content">

  <!-- Modal Pegawai -->
  <div class="modal fade" id="pegawaiId" tabindex="-1" role="dialog" aria-labelledby="pegawaiTitleId"
  aria-hidden="true">
  <div class="modal-dialog modal-lg modal-dialog-scrollable" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Pilih Pegawai</h5>
        
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="px-3 pt-3">
        <div class="form-group">
          <input type="search" class="form-control" id="cari_pegawai" placeholder="Cari Nama / Nip..">
        </div>
      </div>
      <div class="modal-body px-3 py-0">
              <table class="table table-bordered" id="list_pegawai">
                <thead>
                  <tr>
                    <th style="width:100px;">Nip</th>
                    <th>Nama</th>
                    <th>Satker</th>
                    <th style="width:80px;" class="text-center">Aksi</th>
                  </tr>
                </thead>
                <tbody>
                  @foreach($pegawai as $u)
                  <tr>
                    <td>{{$u->nip}}</td>
                    <td>{{$u->gelar_depan}} {{$u->nama_lengkap}} {{$u->gelar_belakang}}</td>
                    <td>{{$u->satker}}</td>
                    <td><button class="btn btn-primary btn-sm btn-block btn-pegawai" class="text-center"
                        type="button" data-dismiss="modal" 
                        data-nama = "{{$u->gelar_depan.' '.$u->nama_lengkap.' '.$u->gelar_belakang}}"
                        data-satker = "{{$u->satker}}"
                        
                        @if($u->jabatan == 'PPNPN')
                        data-nippeg="{{$u->id}}"
                        data-pangkat = "-"
                        @else
                        data-nippeg="{{$u->nip}}"
                        data-pangkat = "{{$u->pangkat.' ('.$u->golongan.')'}}"
                        @endif

                        data-jabatan = "{{$u->jabatan}}"
                        >Pilih</button></td>
                  </tr>
                  @endforeach
                </tbody>
              </table>
        
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Tutup</button>
      </div>
    </div>
  </div>
</div>

<div class="card" id="card-pegawai">
  <div class="card-header">
    <h3 class="card-title">Pegawai Yang di Tugaskan</h3>
    <div class="card-tools">

      <button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#pegawaiId">
        <i class="fas fa-plus"></i> Tambah
      </button>
    </div>
  </div>
  <div class="card-body">
    <div class="row">
      <div class="col-12">
        <div id="frameTablePegawaiDiTugaskan">
          <table class="table table-bordered" id="tablePegawaiDiTugaskan">
            <thead>
                <tr>
                  <th style="width:100px;">Nip</th>
                  <th>Nama</th>
                  <th>Pangkat</th>
                  <th>Jabatan</th>
                  <th style="width:80px;" class="text-center">Aksi</th>
                </tr>
            </thead>
            <tbody id="tablePegawaiDiTugaskanTbody">
              @if($surattugas->SuratTugasPegawai->count() <= 0)
              <tr>
                <td colspan="5"> <h5 class="text-center">Belum Ada Pegawai</h5> </td>
              </tr>
              @else
              @foreach($surattugas->SuratTugasPegawai as $peg)
              <tr>
                <td>{{$peg->nip}}</td>
                <td>{{$peg->nama}}</td>
                <td>{{$peg->pangkat}}</td>
                <td>{{$peg->jabatan}}</td>
                <td><button class="btn btn-primary btn-sm btn-block btn-hapus-pegawai" type="button" data-idhapus="{{$peg->id}}"><i class="fa fa-times" aria-hidden="true"></i></button></td>
              </tr>
              @endforeach
              @endif
            </tbody>
          </table>`
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Modal Menimbang-->
<div class="modal fade" id="menimbangId" tabindex="-1" role="dialog" aria-labelledby="menimbangTitleId"
  aria-hidden="true">
  <div class="modal-dialog modal-xl" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Pilih Format Menimbang</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="container-fluid">
          <div class="row">
            <div class="col-md-12">

              <div class="form-group">
                <input type="search" class="form-control" id="cari_format_menimbang"
                  placeholder="Cari Format Menimbang ...">
              </div>

              <table class="table table-bordered" id="list_format_menimbang">
                <thead>
                  <tr>
                    <th>Keyword</th>
                    <th>Format</th>
                    <th style="width:80px;" class="text-center">Aksi</th>
                  </tr>
                </thead>
                <tbody>
                  @foreach($formatSuratMenimbang as $u)
                  <tr>
                    <td>{!! $u->keyword !!}</td>
                    <td>{!! $u->isi !!}</td>
                    <td><button class="btn btn-primary btn-sm btn-block btn-format_menimbang" class="text-center"
                        type="button" data-dismiss="modal" data-id_format_menimbang="{{$u->id}}"
                        data-isi_format_menimbang="{{$u->isi}}">Pilih</button></td>
                  </tr>
                  @endforeach
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Tutup</button>
      </div>
    </div>
  </div>
</div>

<div class="card">
  <div class="card-header">
    <h3 class="card-title">Menimbang</h3>
    <div class="card-tools">

      <button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#menimbangId">
        <i class="fas fa-plus"></i> Tambah
      </button>
    </div>
  </div>
  <div class="card-body">
    <div class="row">
      <div class="col-12">
        <div id="frameTableFormatMenimbang">
          <table class="table table-bordered" id="tableFormatMenimbang">
            <thead>
                <tr>
                  <th>Isi</th>
                  <th style="width:80px;" class="text-center">Aksi</th>
                </tr>
            </thead>
            <tbody id="tableFormatMenimbangTbody">
              @if($surattugas->SuratTugasMenimbang->count() <= 0 )
              <tr>
                <td colspan="2"> <h5 class="text-center">Belum Ada Format</h5> </td>
              </tr>
              @else
                @foreach($surattugas->SuratTugasMenimbang as $menimbang)
                <tr>
                  <td>
                    <textarea id="tableFormatMenimbangTbodyIsi{{$menimbang->id}}">{{$menimbang->isi}}</textarea>
                    <div class="mt-3 d-flex justify-content-between">
                      <button class="btn btn-warning btn-sm mr-2" id="btn-edit-format_menimbang{{$menimbang->id}}" type="button">Edit</button>
                      <div>
                        <button class="btn btn-light btn-sm disabled mr-2" id="btn-batal-format_menimbang{{$menimbang->id}}" type="button">Batal</button>
                        <button class="btn btn-success btn-sm disabled" id="btn-simpan-format_menimbang{{$menimbang->id}}" type="button" data-idedit="{{$menimbang->id}}">Simpan</button>
                      </div>
                    </div>
                  </td>
                  <td><button class="btn btn-primary btn-sm btn-block btn-hapus-format_menimbang" class="text-center" type="button" data-idhapus="{{$menimbang->id}}"><i class="fa fa-times" aria-hidden="true"></i></button></td>
                </tr>
                @endforeach
              @endif 
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Modal Dasar-->
<div class="modal fade" id="dasarId" tabindex="-1" role="dialog" aria-labelledby="dasarTitleId" aria-hidden="true">
  <div class="modal-dialog modal-xl" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Pilih Format Dasar</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="container-fluid">
          <div class="row">
            <div class="col-md-12">

              <div class="form-group">
                <input type="search" class="form-control" id="cari_format_dasar"
                  placeholder="Cari Format Dasar ...">
              </div>

              <table class="table table-bordered" id="list_format_dasar">
                <thead>
                  <tr>
                    <th>Keyword</th>
                    <th>Format</th>
                    <th style="width:80px;" class="text-center">Aksi</th>
                  </tr>
                </thead>
                <tbody>
                  @foreach($formatSuratDasar as $u)
                  <tr>
                    <td>{!! $u->keyword !!}</td>
                    <td>{!! $u->isi !!}</td>
                    <td><button class="btn btn-primary btn-sm btn-block btn-format_dasar" class="text-center"
                        type="button" data-dismiss="modal" data-id_format_dasar="{{$u->id}}"
                        data-isi_format_dasar="{{$u->isi}}">Pilih</button></td>
                  </tr>
                  @endforeach
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Tutup</button>
      </div>
    </div>
  </div>
</div>

<div class="card">
  <div class="card-header">
    <h3 class="card-title">Dasar</h3>
    <div class="card-tools">

      <button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#dasarId">
        <i class="fas fa-plus"></i> Tambah
      </button>
    </div>
  </div>
  <div class="card-body">
    <div class="row">
      <div class="col-12">
        <div id="frameTableFormatDasar">
          <table class="table table-bordered" id="tableFormatDasar">
            <thead>
                <tr>
                  <th>Isi</th>
                  <th style="width:80px;" class="text-center">Aksi</th>
                </tr>
            </thead>
            <tbody id="tableFormatDasarTbody">
              @if($surattugas->SuratTugasDasar->count() <= 0 )
              <tr>
                <td colspan="2"> <h5 class="text-center">Belum Ada Format</h5> </td>
              </tr>
              @else
                @foreach($surattugas->SuratTugasDasar as $dasar)
                <tr>
                  <td>
                    <textarea id="tableFormatDasarTbodyIsi{{$dasar->id}}">{{$dasar->isi}}</textarea>
                    <div class="mt-3 d-flex justify-content-between">
                      <button class="btn btn-warning btn-sm mr-2" id="btn-edit-format_dasar{{$dasar->id}}" type="button">Edit</button>
                      <div>
                        <button class="btn btn-light btn-sm disabled mr-2" id="btn-batal-format_dasar{{$dasar->id}}" type="button">Batal</button>
                        <button class="btn btn-success btn-sm disabled" id="btn-simpan-format_dasar{{$dasar->id}}" type="button" data-idedit="{{$dasar->id}}">Simpan</button>
                      </div>
                    </div>
                  </td>
                  <td><button class="btn btn-primary btn-sm btn-block btn-hapus-format_dasar" class="text-center" type="button" data-idhapus="{{$dasar->id}}"><i class="fa fa-times" aria-hidden="true"></i></button></td>
                </tr>
                @endforeach
              @endif 
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Modal Tujuan-->
<div class="modal fade" id="tujuanId" tabindex="-1" role="dialog" aria-labelledby="tujuanTitleId"
  aria-hidden="true">
  <div class="modal-dialog modal-xl" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Pilih Format Tujuan</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="container-fluid">
          <div class="row">
            <div class="col-md-12">

              <div class="form-group">
                <input type="search" class="form-control" id="cari_format_tujuan"
                  placeholder="Cari Format Tujuan ...">
              </div>

              <table class="table table-bordered" id="list_format_tujuan">
                <thead>
                  <tr>
                    <th>Keyword</th>
                    <th>Format</th>
                    <th style="width:80px;" class="text-center">Aksi</th>
                  </tr>
                </thead>
                <tbody>
                  @foreach($formatSuratTujuan as $u)
                  <tr>
                    <td>{!! $u->keyword !!}</td>
                    <td>{!! $u->isi !!}</td>
                    <td><button class="btn btn-primary btn-sm btn-block btn-format_tujuan" class="text-center"
                        type="button" data-dismiss="modal" data-id_format_tujuan="{{$u->id}}"
                        data-isi_format_tujuan="{{$u->isi}}">Pilih</button></td>
                  </tr>
                  @endforeach
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Tutup</button>
      </div>
    </div>
  </div>
</div>

<div class="card">
  <div class="card-header">
    <h3 class="card-title">Tujuan</h3>
    <div class="card-tools">

      <button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#tujuanId">
        <i class="fas fa-plus"></i> Tambah
      </button>
    </div>
  </div>
  <div class="card-body">
    <div class="row">
      <div class="col-12">
        <div id="frameTableFormatTujuan">
          <table class="table table-bordered" id="tableFormatTujuan">
            <thead>
                <tr>
                  <th>Isi</th>
                  <th style="width:80px;" class="text-center">Aksi</th>
                </tr>
            </thead>
            <tbody id="tableFormatTujuanTbody">
              @if($surattugas->SuratTugasTujuan->count() <= 0 )
              <tr>
                <td colspan="2"> <h5 class="text-center">Belum Ada Format</h5> </td>
              </tr>
              @else
                @foreach($surattugas->SuratTugasTujuan as $tujuan)
                <tr>
                  <td>
                    <textarea id="tableFormatTujuanTbodyIsi{{$tujuan->id}}">{{$tujuan->isi}}</textarea>
                    <div class="mt-3 d-flex justify-content-between">
                      <button class="btn btn-warning btn-sm mr-2" id="btn-edit-format_tujuan{{$tujuan->id}}" type="button">Edit</button>
                      <div>
                        <button class="btn btn-light btn-sm disabled mr-2" id="btn-batal-format_tujuan{{$tujuan->id}}" type="button">Batal</button>
                        <button class="btn btn-success btn-sm disabled" id="btn-simpan-format_tujuan{{$tujuan->id}}" type="button" data-idedit="{{$tujuan->id}}">Simpan</button>
                      </div>
                    </div>
                  </td>
                  <td><button class="btn btn-primary btn-sm btn-block btn-hapus-format_tujuan" class="text-center" type="button" data-idhapus="{{$tujuan->id}}"><i class="fa fa-times" aria-hidden="true"></i></button></td>
                </tr>
                @endforeach
              @endif 
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Modal Tembusan -->
<div class="modal fade" id="tembusanId" tabindex="-1" role="dialog" aria-labelledby="tembusanTitleId" aria-hidden="true">
  <div class="modal-dialog modal-lg modal-dialog-scrollable" role="document">
    <div class="modal-content">
        <div class="modal-header">
            <h5 class="modal-title">Isi Tembusan</h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
          </div>
      <div class="modal-body">
        <div class="form-input">
          <label for="tembusan_input">Masukan Tembusan</label>
          <input type="text" id="tembusan_input" class="form-control"/>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Tutup</button>
        <button type="button" class="btn btn-primary" id="btn-tembusan" data-dismiss="modal">Simpan</button>
      </div>
    </div>
  </div>
</div>

<div class="card" id="card-tembusan">
  <div class="card-header">
    <h3 class="card-title">Tembusan <small>(Optional)</small></h3>
    <div class="card-tools">
      
      <button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#tembusanId">
        <i class="fas fa-plus"></i> Tambah
      </button>
    </div>
  </div>
  <div class="card-body">
    <div class="row">
      <div class="col-12">
        <div id="frameTableTembusan">

          <table class="table table-bordered" id="tableTembusan">
            <thead>
                <tr>
                  <th>Tujuan Tembusan</th>
                  <th style="width:80px;" class="text-center">Aksi</th>
                </tr>
            </thead>
            <tbody id="tableTembusanTbody">

              @if($surattugas->Tembusan->count() <= 0 )
              <tr>
                <td colspan="2"> <h5 class="text-center">Belum Ada Tembusan</h5> </td>
              </tr>
              @else
                @foreach($surattugas->Tembusan as $tembusan)
                <tr>
                  <td>{{$tembusan->nama}}</td>
                  <td><button class="btn btn-primary btn-sm btn-block btn-hapus-tembusan" class="text-center" type="button" data-idhapus="{{$tembusan->id}}"><i class="fa fa-times" aria-hidden="true"></i></button></td>
                </tr>
                @endforeach
              @endif 

            </tbody>
          </table>

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

</section>
@endsection


@section('js')
<script>
  

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

   
        $('.tableFormatMenimbangTbodyIsi').prop('disabled', true);

    // PEGAWAI
    $("#cari_pegawai").on("input", function() {
        var value = $(this).val().toLowerCase();
        $("#list_pegawai tbody tr").filter(function() {
        $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
      });
    });

    $('.btn-pegawai').on("click", function() {
      
      var nippeg = $(this).data('nippeg');
      let that = $(this);

      apiNama="";
      apiSatker="";
      apiPangkat="";
      apiJabatan="";

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

      if ($('#tablePegawaiDiTugaskan').length)
      
      {
        var hasilCariPegawai = $('#tablePegawaiDiTugaskan tr > td:contains('+nippeg+')').length;
        
        if (hasilCariPegawai <= 0) {

          let formData = [];
    
          formData.push({ name: "_token", value: "{{ csrf_token() }}" });
          /*formData.push({ name: "datareq", value: "https://sikep.mahkamahagung.go.id/api-pro/v1/pegawai/"+nippeg });*/
  
          $.ajax({
            type: "POST",
            data: $.param(formData),
            url: "{{url('getapi')}}",
            dataType: 'json',

            success: function (result, status, xhr) {
              if(! result.success) {
                apiNama = that.data('nama');
                apiSatker = that.data('satker');
                apiPangkat = that.data('pangkat');
                apiJabatan = that.data('jabatan');
              } else {
                apiNama = result.data.gelar_depan+' '+result.data.nama_lengkap+' '+result.data.gelar_belakang;
                apiSatker = result.data.satker;
                apiPangkat = result.data.pangkat+'('+result.data.golongan+')';
                apiJabatan = result.data.jabatan;
              }
              
              let formDataCreate = [];
  
              formDataCreate.push({ name: "_token", value: "{{ csrf_token() }}" });
              formDataCreate.push({ name: "st_id", value: "{{$surattugas->id}}" });
              formDataCreate.push({ name: "pegawai_yang_di_tugaskan", value: nippeg });

              $.ajax({
              type: "POST",
              data: $.param(formDataCreate),
              url: "{{url('surat-tugas/edit-khusus-pegawai')}}",
              dataType: 'json',

                success: function (result, status, xhr) {
                  $('#tablePegawaiDiTugaskanTbody').append(
                    ` <tr>
                        <input type="hidden" name="pegawai_yang_di_tugaskan[]" value="`+nippeg+`">
                        <td>`+nippeg+`</td>
                        <td>`+apiNama+`</td>
                        <td>`+apiPangkat+`</td>
                        <td>`+apiJabatan+`</td>
                        <td><button class="btn btn-primary btn-sm btn-block btn-hapus-pegawai" class="text-center" type="button" data-idhapus="`+result+`"><i class="fa fa-times" aria-hidden="true"></i></button></td>
                      </tr>`
                  );
                },
                error: function (xhr, status, error) {
                  console.log('gagal');
                },
                complete: function () {
                  
                }
              });

            },
            error: function (xhr, status, error) {

              console.log('gagal cors2');

              apiNama = that.data('nama');
              apiSatker = that.data('satker');
              apiPangkat = that.data('pangkat');
              apiJabatan = that.data('jabatan');

              let formDataCreate = [];

              formDataCreate.push({ name: "_token", value: "{{ csrf_token() }}" });
              formDataCreate.push({ name: "st_id", value: "{{$surattugas->id}}" });
              formDataCreate.push({ name: "pegawai_yang_di_tugaskan", value: nippeg });

              $.ajax({
              type: "POST",
              data: $.param(formDataCreate),
              url: "{{url('surat-tugas/edit-khusus-pegawai')}}",
              dataType: 'json',

                success: function (result, status, xhr) {
                  $('#tablePegawaiDiTugaskanTbody').append(
                    ` <tr>
                        <input type="hidden" name="pegawai_yang_di_tugaskan[]" value="`+nippeg+`">
                        <td>`+nippeg+`</td>
                        <td>`+apiNama+`</td>
                        <td>`+apiPangkat+`</td>
                        <td>`+apiJabatan+`</td>
                        <td><button class="btn btn-primary btn-sm btn-block btn-hapus-pegawai" class="text-center" type="button" data-idhapus="`+result+`"><i class="fa fa-times" aria-hidden="true"></i></button></td>
                      </tr>`
                  );
                },
                error: function (xhr, status, error) {
                  console.log('gagal');
                },
                complete: function () {
                  
                }
              });

            },
            complete: function () {
              $('.loadiv').remove();  
            }
          });
        }
      } else {
        
        let formData = [];
  
        formData.push({ name: "_token", value: "{{ csrf_token() }}" });
        formData.push({ name: "datareq", value: "https://sikep.mahkamahagung.go.id/api-pro/v1/pegawai/"+nippeg });

        $.ajax({
          type: "POST",
          data: $.param(formData),
          url: "{{url('getapi')}}",
          dataType: 'json',
            
          success: function (result, status, xhr) {
          
            if(! result.success) 
            {
              apiNama = that.data('nama');
              apiSatker = that.data('satker');
              apiPangkat = that.data('pangkat');
              apiJabatan = that.data('jabatan');
            } else {
              apiNama = result.data.gelar_depan+' '+result.data.nama_lengkap+' '+result.data.gelar_belakang;
              apiSatker = result.data.satker;
              apiPangkat = result.data.pangkat+'('+result.data.golongan+')';
              apiJabatan = result.data.jabatan;
            }

            let formDataCreate = [];
  
            formDataCreate.push({ name: "_token", value: "{{ csrf_token() }}" });
            formDataCreate.push({ name: "st_id", value: "{{$surattugas->id}}" });
            formDataCreate.push({ name: "pegawai_yang_di_tugaskan", value: nippeg });

            $.ajax({
            type: "POST",
            data: $.param(formDataCreate),
            url: "{{url('surat-tugas/edit-khusus-pegawai')}}",
            dataType: 'json',

              success: function (result, status, xhr) {
                $('#frameTablePegawaiDiTugaskan').html(
                  ` <table class="table table-bordered" id="tablePegawaiDiTugaskan">
                      <thead>
                          <tr>
                            <th style="width:100px;">Nip</th>
                            <th>Nama</th>
                            <th>Pangkat</th>
                            <th>Jabatan</th>
                            <th style="width:80px;" class="text-center">Aksi</th>
                          </tr>
                      </thead>
                      <tbody id="tablePegawaiDiTugaskanTbody">
                        <tr>
                          <input type="hidden" name="pegawai_yang_di_tugaskan[]" value="`+nippeg+`">
                          <td>`+nippeg+`</td>
                          <td>`+apiNama+`</td>
                          <td>`+apiPangkat+`</td>
                          <td>`+apiJabatan+`</td>
                          <td><button class="btn btn-primary btn-sm btn-block btn-hapus-pegawai" class="text-center" type="button" data-idhapus="`+result+`"><i class="fa fa-times" aria-hidden="true"></i></button></td>
                        </tr>
                      </tbody>
                    </table>`
                );
              },
              error: function (xhr, status, error) {
                console.log('gagal');
              },
              complete: function () {
                
              }
            });
          },
          error: function (xhr, status, error) {
            //alert(error);
            console.log('gagal cors');

            apiNama = that.data('nama');
            apiSatker = that.data('satker');
            apiPangkat = that.data('pangkat');
            apiJabatan = that.data('jabatan');

            let formDataCreate = [];

            formDataCreate.push({ name: "_token", value: "{{ csrf_token() }}" });
            formDataCreate.push({ name: "st_id", value: "{{$surattugas->id}}" });
            formDataCreate.push({ name: "pegawai_yang_di_tugaskan", value: nippeg });

            $.ajax({
            type: "POST",
            data: $.param(formDataCreate),
            url: "{{url('surat-tugas/edit-khusus-pegawai')}}",
            dataType: 'json',

              success: function (result, status, xhr) {
                $('#frameTablePegawaiDiTugaskan').html(
                  ` <table class="table table-bordered" id="tablePegawaiDiTugaskan">
                      <thead>
                          <tr>
                            <th style="width:100px;">Nip</th>
                            <th>Nama</th>
                            <th>Pangkat</th>
                            <th>Jabatan</th>
                            <th style="width:80px;" class="text-center">Aksi</th>
                          </tr>
                      </thead>
                      <tbody id="tablePegawaiDiTugaskanTbody">
                        <tr>
                          <input type="hidden" name="pegawai_yang_di_tugaskan[]" value="`+nippeg+`">
                          <td>`+nippeg+`</td>
                          <td>`+apiNama+`</td>
                          <td>`+apiPangkat+`</td>
                          <td>`+apiJabatan+`</td>
                          <td><button class="btn btn-primary btn-sm btn-block btn-hapus-pegawai" class="text-center" type="button"  data-idhapus="`+result+`"><i class="fa fa-times" aria-hidden="true"></i></button></td>
                        </tr>
                      </tbody>
                    </table>`
                );
              },
              error: function (xhr, status, error) {
                console.log('gagal');
              },
              complete: function () {
                
              }
            });

          },
          complete: function () {
            $('.loadiv').remove();
          }
        });
      }
    });

    $(document).on('click','.btn-hapus-pegawai',function(){
      
      let formDataCreate = [];
      let that = $(this);

      formDataCreate.push({ name: "_token", value: "{{ csrf_token() }}" });
      formDataCreate.push({ name: "pegawai_yang_di_hapus", value: that.data('idhapus') });

      $.ajax({
      type: "POST",
      data: $.param(formDataCreate),
      url: "{{url('surat-tugas/hapus-khusus-pegawai')}}",
      

        success: function (result, status, xhr) {
          
          that.closest("tr").remove();

          if ($('#tablePegawaiDiTugaskanTbody tr').length == 0){
            $('#frameTablePegawaiDiTugaskan').html('<tr><td colspan="5"> <h5 class="text-center">Belum Ada Pegawai</h5></td></tr>');
          }
          console.log('sukses hapus');
        },
        error: function (xhr, status, error) {
          console.log('gagal hapus');
        },
        complete: function () {
          
        }
      });

      
    });

  // FORMAT MENINMBANG
  @foreach($surattugas->SuratTugasMenimbang as $menimbang)
  ClassicEditor
    .create( document.querySelector( '#tableFormatMenimbangTbodyIsi{{$menimbang->id}}' ) )
    .then(editor => { 
      let btnEdit = document.querySelector( '#btn-edit-format_menimbang{{$menimbang->id}}' );
      let btnSimpan = document.querySelector( '#btn-simpan-format_menimbang{{$menimbang->id}}' );
      let btnBatal = document.querySelector( '#btn-batal-format_menimbang{{$menimbang->id}}' );
      editor.isReadOnly = true;

      btnEdit.addEventListener( 'click', () => {

        if (! btnEdit.classList.contains('disabled')) {
          editor.isReadOnly = false;
          btnEdit.classList.add("disabled");
          btnBatal.classList.remove("disabled");
          btnSimpan.classList.remove("disabled");
        }

      });

      btnBatal.addEventListener( 'click', () => {
        
        if (! btnBatal.classList.contains('disabled')) {
          editor.isReadOnly = true;
          btnEdit.classList.remove("disabled");
          btnBatal.classList.add("disabled");
          btnSimpan.classList.add("disabled");
        }

      });

      btnSimpan.addEventListener( 'click', () => {
        
        if (! btnSimpan.classList.contains('disabled')) {
          let formDataCreate = [];

          formDataCreate.push({ name: "_token", value: "{{ csrf_token() }}" });
          //formDataCreate.push({ name: "idedit", value:  btnSimpan.getAttribute('data-idedit') });
          formDataCreate.push({ name: "idedit", value:  "{{$menimbang->id}}"});
          formDataCreate.push({ name: "isi", value:  editor.getData() });

          $.ajax({
            type: "POST",
            data: $.param(formDataCreate),
            url: "{{url('surat-tugas/edit-khusus-menimbang-edit')}}",

            success: function (result, status, xhr) {
              console.log('sukses menimbang');
            },
            error: function (xhr, status, error) {
              console.log('gagal menimbang');
            },
            complete: function () {
              editor.isReadOnly = true;
              btnEdit.classList.remove("disabled");
              btnBatal.classList.add("disabled");
              btnSimpan.classList.add("disabled");
            }
          });

        }

      });

     } )
    .catch( error => {
        console.error( error );
  } );
  @endforeach

  $("#cari_format_menimbang").on("input", function() {
        var value = $(this).val().toLowerCase();
        $("#list_format_menimbang tbody tr").filter(function() {
        $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
      });
    });

    $('.btn-format_menimbang').on("click", function() {
      
      var isiformatmenimbang = $(this).data('isi_format_menimbang');

      let formDataCreate = [];

      formDataCreate.push({ name: "_token", value: "{{ csrf_token() }}" });
      formDataCreate.push({ name: "st_id", value:  "{{$surattugas->id}}"});
      formDataCreate.push({ name: "isi", value:  isiformatmenimbang });

      $.ajax({
        type: "POST",
        data: $.param(formDataCreate),
        url: "{{url('surat-tugas/edit-khusus-menimbang')}}",

        success: function (result, status, xhr) {
          location.reload();
        },
        error: function (xhr, status, error) {
          console.log('gagal menimbang');
        }
      });

    });

    $(document).on('click','.btn-hapus-format_menimbang',function(){
      
      let that = $(this);
      var isiformatmenimbang = $(this).data('isi_format_menimbang');

      let formDataCreate = [];

      formDataCreate.push({ name: "_token", value: "{{ csrf_token() }}" });
      formDataCreate.push({ name: "idhapus", value:  $(this).data('idhapus')});

      $.ajax({
        type: "POST",
        data: $.param(formDataCreate),
        url: "{{url('surat-tugas/hapus-khusus-menimbang')}}",

        success: function (result, status, xhr) {
          that.closest("tr").remove();

          if ($('#tableFormatMenimbangTbody tr').length == 0){
            $('#frameTableFormatMenimbang').html('<tr><td colspan="5"> <h5 class="text-center">Belum Ada Format</h5></td></tr>');
          }

        },
        error: function (xhr, status, error) {
          console.log('gagal menimbang');
        }
      });

      
    });
    // AKHIR FORMAT MENIMBANG

  // FORMAT DASAR
  @foreach($surattugas->SuratTugasDasar as $dasar)
  ClassicEditor
    .create( document.querySelector( '#tableFormatDasarTbodyIsi{{$dasar->id}}' ) )
    .then(editor => { 
      let btnEdit = document.querySelector( '#btn-edit-format_dasar{{$dasar->id}}' );
      let btnSimpan = document.querySelector( '#btn-simpan-format_dasar{{$dasar->id}}' );
      let btnBatal = document.querySelector( '#btn-batal-format_dasar{{$dasar->id}}' );
      editor.isReadOnly = true;

      btnEdit.addEventListener( 'click', () => {

        if (! btnEdit.classList.contains('disabled')) {
          editor.isReadOnly = false;
          btnEdit.classList.add("disabled");
          btnBatal.classList.remove("disabled");
          btnSimpan.classList.remove("disabled");
        }

      });

      btnBatal.addEventListener( 'click', () => {
        
        if (! btnBatal.classList.contains('disabled')) {
          editor.isReadOnly = true;
          btnEdit.classList.remove("disabled");
          btnBatal.classList.add("disabled");
          btnSimpan.classList.add("disabled");
        }

      });

      btnSimpan.addEventListener( 'click', () => {
        
        if (! btnSimpan.classList.contains('disabled')) {
          let formDataCreate = [];

          formDataCreate.push({ name: "_token", value: "{{ csrf_token() }}" });
          //formDataCreate.push({ name: "idedit", value:  btnSimpan.getAttribute('data-idedit') });
          formDataCreate.push({ name: "idedit", value:  "{{$dasar->id}}"});
          formDataCreate.push({ name: "isi", value:  editor.getData() });

          $.ajax({
            type: "POST",
            data: $.param(formDataCreate),
            url: "{{url('surat-tugas/edit-khusus-dasar-edit')}}",

            success: function (result, status, xhr) {
              console.log('sukses dasar');
            },
            error: function (xhr, status, error) {
              console.log('gagal dasar');
            },
            complete: function () {
              editor.isReadOnly = true;
              btnEdit.classList.remove("disabled");
              btnBatal.classList.add("disabled");
              btnSimpan.classList.add("disabled");
            }
          });

        }

      });

     } )
    .catch( error => {
        console.error( error );
  } );
  @endforeach

  $("#cari_format_dasar").on("input", function() {
        var value = $(this).val().toLowerCase();
        $("#list_format_dasar tbody tr").filter(function() {
        $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
      });
    });

    $('.btn-format_dasar').on("click", function() {
      
      var isiformatdasar = $(this).data('isi_format_dasar');

      let formDataCreate = [];

      formDataCreate.push({ name: "_token", value: "{{ csrf_token() }}" });
      formDataCreate.push({ name: "st_id", value:  "{{$surattugas->id}}"});
      formDataCreate.push({ name: "isi", value:  isiformatdasar });

      $.ajax({
        type: "POST",
        data: $.param(formDataCreate),
        url: "{{url('surat-tugas/edit-khusus-dasar')}}",

        success: function (result, status, xhr) {
          location.reload();
        },
        error: function (xhr, status, error) {
          console.log('gagal dasar');
        }
      });

    });

    $(document).on('click','.btn-hapus-format_dasar',function(){
      
      let that = $(this);
      var isiformatdasar = $(this).data('isi_format_dasar');

      let formDataCreate = [];

      formDataCreate.push({ name: "_token", value: "{{ csrf_token() }}" });
      formDataCreate.push({ name: "idhapus", value:  $(this).data('idhapus')});

      $.ajax({
        type: "POST",
        data: $.param(formDataCreate),
        url: "{{url('surat-tugas/hapus-khusus-dasar')}}",

        success: function (result, status, xhr) {
          that.closest("tr").remove();

          if ($('#tableFormatDasarTbody tr').length == 0){
            $('#frameTableFormatDasar').html('<tr><td colspan="5"> <h5 class="text-center">Belum Ada Format</h5></td></tr>');
          }

        },
        error: function (xhr, status, error) {
          console.log('gagal dasar');
        }
      });

      
    });
    // AKHIR FORMAT DASAR

  // FORMAT TUJUAN
  @foreach($surattugas->SuratTugasTujuan as $tujuan)
  ClassicEditor
    .create( document.querySelector( '#tableFormatTujuanTbodyIsi{{$tujuan->id}}' ) )
    .then(editor => { 
      let btnEdit = document.querySelector( '#btn-edit-format_tujuan{{$tujuan->id}}' );
      let btnSimpan = document.querySelector( '#btn-simpan-format_tujuan{{$tujuan->id}}' );
      let btnBatal = document.querySelector( '#btn-batal-format_tujuan{{$tujuan->id}}' );
      editor.isReadOnly = true;

      btnEdit.addEventListener( 'click', () => {

        if (! btnEdit.classList.contains('disabled')) {
          editor.isReadOnly = false;
          btnEdit.classList.add("disabled");
          btnBatal.classList.remove("disabled");
          btnSimpan.classList.remove("disabled");
        }

      });

      btnBatal.addEventListener( 'click', () => {
        
        if (! btnBatal.classList.contains('disabled')) {
          editor.isReadOnly = true;
          btnEdit.classList.remove("disabled");
          btnBatal.classList.add("disabled");
          btnSimpan.classList.add("disabled");
        }

      });

      btnSimpan.addEventListener( 'click', () => {
        
        if (! btnSimpan.classList.contains('disabled')) {
          let formDataCreate = [];

          formDataCreate.push({ name: "_token", value: "{{ csrf_token() }}" });
          //formDataCreate.push({ name: "idedit", value:  btnSimpan.getAttribute('data-idedit') });
          formDataCreate.push({ name: "idedit", value:  "{{$tujuan->id}}"});
          formDataCreate.push({ name: "isi", value:  editor.getData() });

          $.ajax({
            type: "POST",
            data: $.param(formDataCreate),
            url: "{{url('surat-tugas/edit-khusus-tujuan-edit')}}",

            success: function (result, status, xhr) {
              console.log('sukses tujuan');
            },
            error: function (xhr, status, error) {
              console.log('gagal tujuan');
            },
            complete: function () {
              editor.isReadOnly = true;
              btnEdit.classList.remove("disabled");
              btnBatal.classList.add("disabled");
              btnSimpan.classList.add("disabled");
            }
          });

        }

      });

     } )
    .catch( error => {
        console.error( error );
  } );
  @endforeach

  $("#cari_format_tujuan").on("input", function() {
        var value = $(this).val().toLowerCase();
        $("#list_format_tujuan tbody tr").filter(function() {
        $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
      });
    });

    $('.btn-format_tujuan').on("click", function() {
      
      var isiformattujuan = $(this).data('isi_format_tujuan');

      let formDataCreate = [];

      formDataCreate.push({ name: "_token", value: "{{ csrf_token() }}" });
      formDataCreate.push({ name: "st_id", value:  "{{$surattugas->id}}"});
      formDataCreate.push({ name: "isi", value:  isiformattujuan });

      $.ajax({
        type: "POST",
        data: $.param(formDataCreate),
        url: "{{url('surat-tugas/edit-khusus-tujuan')}}",

        success: function (result, status, xhr) {
          location.reload();
        },
        error: function (xhr, status, error) {
          console.log('gagal tujuan');
        }
      });

    });

    $(document).on('click','.btn-hapus-format_tujuan',function(){
      
      let that = $(this);
      var isiformattujuan = $(this).data('isi_format_tujuan');

      let formDataCreate = [];

      formDataCreate.push({ name: "_token", value: "{{ csrf_token() }}" });
      formDataCreate.push({ name: "idhapus", value:  $(this).data('idhapus')});

      $.ajax({
        type: "POST",
        data: $.param(formDataCreate),
        url: "{{url('surat-tugas/hapus-khusus-tujuan')}}",

        success: function (result, status, xhr) {
          that.closest("tr").remove();

          if ($('#tableFormatTujuanTbody tr').length == 0){
            $('#frameTableFormatTujuan').html('<tr><td colspan="5"> <h5 class="text-center">Belum Ada Format</h5></td></tr>');
          }

        },
        error: function (xhr, status, error) {
          console.log('gagal tujuan');
        }
      });

      
    });
    // AKHIR FORMAT TUJUAN

    // TEMBUSAN

    $('#btn-tembusan').on("click", function() {
      
      let tembusan_input = $('#tembusan_input').val();

      let formDataCreate = [];

      formDataCreate.push({ name: "_token", value: "{{ csrf_token() }}" });
      formDataCreate.push({ name: "st_id", value:  "{{$surattugas->id}}"});
      formDataCreate.push({ name: "isi", value:  tembusan_input });

      $.ajax({
        type: "POST",
        data: $.param(formDataCreate),
        url: "{{url('surat-tugas/edit-khusus-tembusan')}}",

        success: function (result, status, xhr) {
          location.reload();
        },
        error: function (xhr, status, error) {
          console.log('gagal tembusan');
        }
      });

    });

    $(document).on('click','.btn-hapus-tembusan',function(){
      
      let that = $(this);

      let formDataCreate = [];

      formDataCreate.push({ name: "_token", value: "{{ csrf_token() }}" });
      formDataCreate.push({ name: "idhapus", value:  $(this).data('idhapus')});

      $.ajax({
        type: "POST",
        data: $.param(formDataCreate),
        url: "{{url('surat-tugas/hapus-khusus-tembusan')}}",

        success: function (result, status, xhr) {
          that.closest("tr").remove();

          if ($('#tableTembusanTbody tr').length == 0){
            $('#frameTableTembusan').html('<tr><td colspan="2"> <h5 class="text-center">Belum Ada Tembusan</h5></td></tr>');
          }

        },
        error: function (xhr, status, error) {
          console.log('gagal tembusan');
        }
      });

    });

    //PILIH JENIS SURAT
    $('#jenis_surat_id').on('change', function() {
      if(this.value == 2) {
        $('#bilaPengawasanReguler').show();
      } else {
        $('#bilaPengawasanReguler').hide();
      }
    });

    $('form input').keydown(function (e) {
    if (e.keyCode == 13) {
        e.preventDefault();
        return false;
    }
});


  });
</script>
@endsection